/* ── SABA HEALTH HUB — SHARED DESIGN SYSTEM ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --forest:#0D2318;
  --forest-mid:#1A3828;
  --forest-soft:#243D2C;
  --sage:#4A7C59;
  --sage-600:#3D6849;
  --sage-light:#6FA27A;
  --sage-pale:#E8F0EA;
  --sage-ultra:#F2F7F3;
  --warm:#F8F6F2;
  --warm-dark:#F0EDE8;
  --white:#FFFFFF;
  --ink:#0F1A14;
  --ink-soft:#3D5042;
  --ink-muted:#6B7C70;
  --border:#D4DDD6;
  --border-strong:#B0C4B5;
  --amber:#D4872A;
  --amber-pale:#FDF3E7;
  --amber-border:#E8C27A;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'DM Mono',monospace;
  --shadow-card:0 2px 16px rgba(15,26,20,0.07),0 1px 3px rgba(15,26,20,0.04);
  --shadow-lift:0 8px 32px rgba(15,26,20,0.10),0 2px 8px rgba(15,26,20,0.05);
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.2s;
}
.nav.scrolled{box-shadow:0 2px 20px rgba(15,26,20,0.08)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--sage);
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-mark svg{width:18px;height:18px}
.nav-logo-name{font-family:var(--font-display);font-size:20px;color:var(--ink);letter-spacing:-0.2px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;color:var(--ink-soft);text-decoration:none;font-weight:500;transition:color 0.15s}
.nav-links a:hover,.nav-links a.active{color:var(--sage)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn-ghost{
  font-size:14px;color:var(--ink-soft);font-weight:500;
  padding:8px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:transparent;
  cursor:pointer;font-family:var(--font-body);
  text-decoration:none;display:inline-block;
  transition:all 0.15s;
}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage)}
.btn-primary{
  font-size:14px;font-weight:600;color:white;
  padding:9px 22px;border-radius:var(--radius-sm);
  background:var(--sage);border:none;cursor:pointer;
  font-family:var(--font-body);text-decoration:none;
  display:inline-block;transition:all 0.15s;
  box-shadow:0 2px 10px rgba(74,124,89,0.3);
}
.btn-primary:hover{background:var(--sage-600);transform:translateY(-1px)}
.btn-primary-lg{font-size:16px;padding:14px 32px;border-radius:var(--radius-sm)}
.btn-outline-white{
  font-size:14px;font-weight:600;color:white;
  padding:9px 22px;border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,255,255,0.4);
  background:transparent;cursor:pointer;
  font-family:var(--font-body);text-decoration:none;
  display:inline-block;transition:all 0.15s;
}
.btn-outline-white:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.7)}

/* ── SECTION WRAPPERS ── */
.section{padding:96px 48px}
.section-inner{max-width:1120px;margin:0 auto;width:100%}
.section-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--sage);margin-bottom:12px;
}
.section-h2{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  line-height:1.12;letter-spacing:-0.5px;
  color:var(--ink);margin-bottom:16px;
}
.section-h2 em{font-style:italic;color:var(--sage)}
.section-sub{
  font-size:18px;color:var(--ink-soft);
  max-width:560px;line-height:1.7;margin-bottom:40px;
}

/* ── BADGES ── */
.badge-saved{background:var(--sage-pale);color:var(--sage);border:1px solid var(--border-strong);font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px}
.badge-prefill{background:#EEF3FA;color:#1A3F6F;border:1px solid #8BAED4;font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px}
.badge-daily{background:var(--amber-pale);color:var(--amber);border:1px solid var(--amber-border);font-size:11px;font-weight:600;padding:2px 10px;border-radius:99px}

/* ── FOOTER ── */
.footer{background:var(--forest);padding:64px 48px 32px}
.footer-inner{max-width:1120px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand-name{font-family:var(--font-display);font-size:22px;color:white;margin-bottom:8px}
.footer-brand-desc{font-size:14px;color:rgba(255,255,255,0.45);line-height:1.7;max-width:280px}
.footer-col-title{font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:14px}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.55);text-decoration:none;margin-bottom:8px;transition:color 0.15s}
.footer-col a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:13px;color:rgba(255,255,255,0.3)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:13px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.15s}
.footer-legal a:hover{color:rgba(255,255,255,0.6)}

/* ── CARDS ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.card:hover{box-shadow:var(--shadow-lift)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .nav{padding:0 20px}
  .nav-links{display:none}
  .section{padding:64px 20px}
  .footer{padding:48px 20px 24px}
  .footer-top{grid-template-columns:1fr;gap:32px}
}