/* CareNest design tokens — plain CSS (works alongside Tailwind CDN) */
:root{
  --radius:.875rem;
  --background: oklch(0.985 0.005 240);
  --foreground: oklch(0.20 0.04 260);
  --card:#fff;
  --card-foreground: oklch(0.20 0.04 260);
  --primary: oklch(0.55 0.20 258);
  --primary-foreground:#fff;
  --primary-soft: oklch(0.94 0.04 250);
  --secondary: oklch(0.72 0.12 180);
  --secondary-foreground: oklch(0.15 0.03 240);
  --muted: oklch(0.96 0.01 240);
  --muted-foreground: oklch(0.50 0.03 250);
  --accent: oklch(0.94 0.04 230);
  --emergency: oklch(0.62 0.23 22);
  --emergency-foreground:#fff;
  --border: oklch(0.92 0.01 240);
  --shadow-soft: 0 4px 20px -4px color-mix(in oklab, var(--primary) 12%, transparent);
  --shadow-lift: 0 20px 40px -16px color-mix(in oklab, var(--primary) 22%, transparent);
}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Poppins',system-ui,sans-serif;letter-spacing:-.01em}
#site-header{    background-color: #f7fbfd;}
.container-x{max-width:80rem;margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container-x{padding-inline:1.5rem}}
@media(min-width:1024px){.container-x{padding-inline:2rem}}
.section-padding{padding-block:5rem}
@media(min-width:1024px){.section-padding{padding-block:7rem}}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary) 70%,var(--secondary)));
  color:var(--primary-foreground);padding:.875rem 1.5rem;border-radius:9999px;font-weight:600;
  box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s,filter .25s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);filter:brightness(1.05)}

.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;
  color:var(--primary);border:1.5px solid color-mix(in oklab,var(--primary) 40%,transparent);
  padding:.8125rem 1.5rem;border-radius:9999px;font-weight:600;transition:all .25s}
.btn-outline:hover{background:var(--primary-soft);border-color:var(--primary)}

.btn-emergency{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--emergency);color:var(--emergency-foreground);padding:.75rem 1.25rem;border-radius:9999px;font-weight:600;
  box-shadow:0 8px 24px -8px color-mix(in oklab,var(--emergency) 50%,transparent);transition:transform .2s,filter .2s}
.btn-emergency:hover{transform:translateY(-1px);filter:brightness(1.05)}

.card-medical{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);
  border-radius:1.25rem;padding:1.75rem;box-shadow:var(--shadow-soft);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.card-medical:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lift);
  border-color:color-mix(in oklab,var(--primary) 30%,var(--border))}

.glass-light{background:color-mix(in oklab,var(--card) 70%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid color-mix(in oklab,var(--border) 80%,transparent)}

.badge-trust{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:9999px;
  background:var(--primary-soft);color:var(--primary);font-size:.8125rem;font-weight:600}

.gradient-text{background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero-gradient{
  background:
    radial-gradient(60% 80% at 10% 0%, color-mix(in oklab,var(--primary) 18%,transparent), transparent 60%),
    radial-gradient(50% 60% at 100% 100%, color-mix(in oklab,var(--secondary) 22%,transparent), transparent 60%),
    var(--background);
}

.text-primary{color:var(--primary)}
.text-secondary{color:var(--secondary)}
.text-emergency{color:var(--emergency)}
.text-muted-foreground{color:var(--muted-foreground)}
.bg-primary{background:var(--primary)}
.bg-primary-soft{background:var(--primary-soft)}
.bg-secondary{background:var(--secondary)}
.text-primary-foreground{color:var(--primary-foreground)}
.text-secondary-foreground{color:var(--secondary-foreground)}
.border-border{border-color:var(--border)}

@keyframes heartbeat{0%,100%{transform:scale(1)}20%{transform:scale(1.18)}40%{transform:scale(.95)}60%{transform:scale(1.12)}80%{transform:scale(.98)}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-right{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animate-heartbeat{animation:heartbeat 1.2s ease-in-out infinite}
.animate-float{animation:float 4s ease-in-out infinite}
.animate-fade-up{animation:fade-up .7s ease-out both}
.animate-fade-right{animation:fade-right .8s ease-out both}
header .text-primary{border-bottom: 2px solid;}
/* .card-medical .grid{border-bottom: 2px solid;} */
.footer-div{background:linear-gradient(135deg,oklch(0.18 0.04 260) 0%,oklch(0.22 0.06 258) 60%,oklch(0.28 0.09 220) 100%)}
.badge-trust-footer{background:rgba(255,255,255,1);color:#0e0202;}
.badge-footer{background:rgba(255,255,255,.08);color:#fff}
.journey-time{    padding-top: 8%;}
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}