/* ═══════════════════════════════════════════════════════════
   HealthMate — Landing
   Design system carried over from the product (brand tokens)
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Accent — brand blue (exact hex from brand guide) */
  --accent:#005EFF;
  --accent-hover:#2E7BFF;
  --accent-dark:#2755A4;
  --accent-stroke:#E3EDFF;
  --accent-light-1:#C7DBFF;
  --accent-light-2:#EDF4FF;
  --accent-surface:#F9FAFF;

  /* Ink */
  --ink:#1A1A1A;
  --ink-2:#6A6A6A;
  --ink-3:#828282;
  --muted:#B0B0B0;

  /* Surfaces */
  --white:#FFFFFF;
  --surface:#F7F9FC;       /* airy muted section bg */
  --surface-2:#F1F4F9;
  --divider:#E8ECF2;
  --card-border:#EEF1F6;

  /* Status (used only as small accents) */
  --success:#27A474;   --success-light:#E4F6ED;
  --warning:#F99D00;   --warning-light:#FFF2D7;
  --danger:#FF3B30;

  /* Radii */
  --r-card:20px;
  --r-tile:16px;
  --r-btn:14px;
  --r-pill:999px;

  /* Shadows — soft, diffuse */
  --sh-sm:0 2px 8px rgba(16,30,54,.05);
  --sh-md:0 10px 30px -8px rgba(16,30,54,.10);
  --sh-lg:0 30px 70px -24px rgba(16,30,54,.20);
  --sh-blue:0 18px 40px -12px rgba(0,94,255,.35);

  --maxw:1180px;
  --pad:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent-light-1)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}

/* signature trailing blue dot for headings */
.dot::after{content:".";color:var(--accent)}

/* ── Typography scale ── */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:800}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  color:var(--accent);
  background:var(--accent-light-2);
  border:1px solid var(--accent-stroke);
  padding:8px 14px;border-radius:var(--r-pill);
}
.eyebrow i{font-size:16px}
.sec-head{max-width:760px;margin:0 auto;text-align:center}
.sec-head.left{margin:0;text-align:left}
.sec-title{font-size:clamp(30px,4vw,46px);font-weight:800}
.sec-sub{margin-top:18px;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);font-weight:500;line-height:1.55;text-wrap:pretty}

/* ─────────────── Buttons ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
  border-radius:var(--r-btn);padding:15px 26px;border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn i{font-size:20px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 22px 46px -12px rgba(0,94,255,.45)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--divider)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light-2)}
.btn-white{background:#fff;color:var(--accent)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 22px 46px -12px rgba(0,0,0,.25)}
.btn-lg{padding:18px 32px;font-size:17px}
.fine{font-size:13.5px;color:var(--ink-3);font-weight:500}
.fine i{color:var(--success);font-size:15px;vertical-align:-2px;margin-right:4px}

/* ─────────────── Navbar ─────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--divider);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:15px;font-weight:600;color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:11px 20px;font-size:15px}
.nav-burger{display:none;background:none;border:none;cursor:pointer;font-size:26px;color:var(--ink)}

/* ── Brand lockup ── */
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em}
.brand .tile{
  width:38px;height:38px;border-radius:11px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto;
  box-shadow:0 6px 16px -4px rgba(0,94,255,.5);
}
.brand .tile svg{width:22px;height:22px}
.brand .wm{font-size:21px;color:var(--ink)}
.brand.on-blue .tile{background:#fff;color:var(--accent);box-shadow:none}
.brand.on-blue .wm{color:#fff}

/* ─────────────── Hero ─────────────── */
.hero{padding:148px 0 90px;position:relative;overflow:hidden}
.hero::before{ /* soft ambient blue glow, not a flat fill */
  content:"";position:absolute;top:-220px;right:-180px;width:680px;height:680px;
  background:radial-gradient(circle, rgba(0,94,255,.10), transparent 68%);
  pointer-events:none;z-index:0;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1.05;margin-top:24px}
.hero-sub{margin-top:24px;font-size:clamp(17px,1.7vw,20px);color:var(--ink-2);font-weight:500;line-height:1.55;max-width:560px;text-wrap:pretty}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .fine{margin-top:18px}

/* phone mockup */
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone{
  width:300px;border-radius:46px;background:#0c0d10;padding:11px;
  box-shadow:var(--sh-lg);position:relative;flex:0 0 auto;
}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:96px;height:26px;background:#0c0d10;border-radius:16px;z-index:3}
.phone .screen{border-radius:36px;overflow:hidden;background:#fff;aspect-ratio:1170/2532;position:relative}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* floating chips around hero phone */
.chip{
  position:absolute;background:#fff;border:1px solid var(--card-border);
  border-radius:16px;box-shadow:var(--sh-md);padding:12px 16px;display:flex;align-items:center;gap:11px;
  font-weight:700;font-size:14px;z-index:4;
}
.chip .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.chip small{display:block;font-size:12px;font-weight:600;color:var(--ink-3)}
.chip.c1{top:84px;left:-46px;animation:floaty 6.5s ease-in-out infinite}
.chip.c2{bottom:128px;right:-40px;animation:floaty 7.2s ease-in-out .4s infinite}

/* ─────────────── Section frame ─────────────── */
.section{padding:104px 0}
.section.muted{background:var(--surface)}
.section-head-block{margin-bottom:56px}

/* ─────────────── Problem stats ─────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat-card{
  background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);
  padding:36px 32px;box-shadow:var(--sh-sm);
}
.stat-num{font-size:clamp(44px,5vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-card.s-blue .stat-num{color:var(--accent)}
.stat-card.s-orange .stat-num{color:var(--warning)}
.stat-card.s-ink .stat-num{color:var(--ink)}
.stat-label{margin-top:16px;font-size:16px;color:var(--ink-2);font-weight:500;line-height:1.5}

/* ─────────────── Value props ─────────────── */
.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vp-card{
  background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);
  padding:34px 30px;box-shadow:var(--sh-sm);transition:transform .25s ease, box-shadow .25s ease;
}
.vp-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.tile-ic{
  width:58px;height:58px;border-radius:var(--r-tile);display:flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:22px;
}
.ic-blue{background:var(--accent-light-2);color:var(--accent)}
.ic-green{background:var(--success-light);color:var(--success)}
.ic-orange{background:var(--warning-light);color:var(--warning)}
.vp-card h3{font-size:22px;font-weight:800;margin-bottom:10px}
.vp-card p{color:var(--ink-2);font-size:16px;font-weight:500;margin:0;line-height:1.55}

/* ─────────────── How it works ─────────────── */
.how-grid{display:grid;grid-template-columns:1fr .8fr;gap:64px;align-items:center}
.steps{display:flex;flex-direction:column;gap:14px}
.step{
  display:flex;gap:20px;padding:24px;border-radius:var(--r-card);cursor:pointer;
  border:1px solid transparent;transition:background .25s, border-color .25s, box-shadow .25s;
}
.step.active{background:#fff;border-color:var(--card-border);box-shadow:var(--sh-md)}
.step-num{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
  background:var(--surface-2);color:var(--ink-3);transition:all .25s;
}
.step.active .step-num{background:var(--accent);color:#fff;box-shadow:var(--sh-blue)}
.step h3{font-size:21px;font-weight:800;margin:4px 0 6px}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;font-weight:500;line-height:1.5}
.step.active p{color:var(--ink-2)}
.how-note{margin-top:30px;display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;color:var(--accent);
  background:var(--accent-light-2);border:1px solid var(--accent-stroke);padding:16px 18px;border-radius:14px}
.how-note i{font-size:20px;flex:0 0 auto;margin-top:1px}
.how-phone{position:relative}
.how-phone .phone .screen img{transition:opacity .45s ease;position:absolute;inset:0}
.how-phone .phone .screen img{opacity:0}
.how-phone .phone .screen img.show{opacity:1}

/* ─────────────── Bento ─────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;grid-auto-rows:1fr}
.bento-card{
  background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);
  padding:30px;box-shadow:var(--sh-sm);transition:transform .25s, box-shadow .25s;
  display:flex;flex-direction:column;
}
.bento-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.bento-card.large{grid-column:span 2}
.bento-card h3{font-size:21px;font-weight:800;margin:18px 0 8px}
.bento-card p{margin:0;color:var(--ink-2);font-size:15.5px;font-weight:500;line-height:1.5}
.bento-card .grow{flex:1}
/* mini biomarker bars decoration for the large analytics card */
.mini-bars{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:24px}
.mini-bars span{flex:1;border-radius:8px;background:var(--success-light)}
.mini-bars span b{display:block;width:100%;border-radius:8px;background:var(--success);height:6px}
.assistant-bubble{
  margin-top:22px;background:var(--accent);color:#fff;border-radius:18px 18px 18px 6px;
  padding:16px 18px;font-size:15px;font-weight:600;max-width:300px;box-shadow:var(--sh-blue);line-height:1.45;
}

/* ─────────────── Body systems ─────────────── */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.sys-card{
  background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);
  padding:28px;box-shadow:var(--sh-sm);display:flex;align-items:center;gap:18px;
  transition:transform .25s, box-shadow .25s;
}
.sys-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.sys-orb{
  width:62px;height:62px;border-radius:50%;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  border:3px solid var(--warning);color:var(--warning);
}
.sys-orb.ok{border-color:var(--success);color:var(--success)}
.sys-orb.none{border-color:var(--divider);color:var(--muted)}
.sys-card h3{font-size:18px;font-weight:800;margin:0 0 4px}
.sys-status{font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.sys-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-ok{color:var(--success)}
.st-warn{color:var(--warning)}
.st-none{color:var(--muted)}
.sys-note{margin-top:34px;text-align:center;color:var(--ink-3);font-size:15px;font-weight:500}

/* ─────────────── Roadmap (Скоро) ─────────────── */
.road-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.road-card{
  background:var(--surface);border:1px dashed var(--divider);border-radius:var(--r-card);
  padding:28px;display:flex;flex-direction:column;gap:14px;
}
.road-card .ic{width:48px;height:48px;border-radius:13px;background:#fff;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ink-3)}
.soon-badge{
  align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:#fff;border:1px solid var(--divider);padding:5px 11px;border-radius:var(--r-pill);
}
.road-card h3{font-size:17.5px;font-weight:700;margin:0;color:var(--ink-2)}

/* ─────────────── Security ─────────────── */
.sec-block{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.shield-card{
  background:linear-gradient(160deg,var(--accent),#0048c4);border-radius:28px;
  padding:54px 44px;color:#fff;box-shadow:var(--sh-blue);position:relative;overflow:hidden;
}
.shield-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.shield-ic{width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:46px;margin-bottom:26px}
.shield-card h3{font-size:26px;font-weight:800;line-height:1.15}
.shield-card p{margin:14px 0 0;font-size:16px;font-weight:500;color:rgba(255,255,255,.85);line-height:1.55}
.sec-list{display:flex;flex-direction:column;gap:20px}
.sec-item{display:flex;gap:16px;align-items:flex-start}
.sec-check{width:40px;height:40px;border-radius:50%;background:var(--success-light);color:var(--success);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.sec-item h4{margin:2px 0 4px;font-size:17.5px;font-weight:800}
.sec-item p{margin:0;color:var(--ink-2);font-size:15.5px;font-weight:500;line-height:1.5}

/* ─────────────── Social proof ─────────────── */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.counter{text-align:center;padding:30px;background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.counter .n{font-size:clamp(38px,4.5vw,52px);font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1}
.counter .l{margin-top:10px;color:var(--ink-2);font-weight:600;font-size:15px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:#fff;border:1px solid var(--card-border);border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-sm)}
.review .stars{color:var(--warning);font-size:16px;letter-spacing:2px;margin-bottom:14px}
.review .quote{font-size:16px;font-weight:500;color:var(--ink-2);font-style:italic;min-height:72px}
.review .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.review .av{width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px;flex:0 0 auto}
.review .who b{display:block;font-size:15px;font-weight:800}
.review .who span{font-size:13.5px;color:var(--ink-3);font-weight:600}
.ph-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;color:var(--muted);font-style:normal}

/* ─────────────── FAQ ─────────────── */
.faq{max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--divider)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;font-size:18.5px;font-weight:700;color:var(--ink);
}
.faq-q i{font-size:24px;color:var(--accent);transition:transform .3s ease;flex:0 0 auto}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 4px 26px;color:var(--ink-2);font-size:16px;font-weight:500;line-height:1.6;max-width:680px}

/* ─────────────── Final CTA ─────────────── */
.final{background:linear-gradient(150deg,var(--accent),#0049c9);color:#fff;text-align:center;padding:104px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;top:-160px;left:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.final::after{content:"";position:absolute;bottom:-180px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.final-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.final h2{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.08}
.final p{margin:20px 0 0;font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.9);font-weight:500;line-height:1.5}
.final .btn{margin-top:36px}
.final .fine{color:rgba(255,255,255,.78);margin-top:20px}
.final .fine i{color:#fff}

/* ─────────────── Footer ─────────────── */
.footer{background:#0d0f14;color:#fff;padding:64px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer .brand .wm{color:#fff}
.foot-desc{margin-top:18px;color:rgba(255,255,255,.6);font-size:15px;font-weight:500;max-width:300px;line-height:1.55}
.foot-col h5{margin:0 0 18px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.foot-col a{display:block;color:rgba(255,255,255,.72);font-size:15px;font-weight:500;padding:7px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.10);padding-top:28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-bottom p{margin:0;color:rgba(255,255,255,.5);font-size:13.5px;font-weight:500;line-height:1.6}
.foot-legal{display:flex;gap:24px;flex-wrap:wrap}
.foot-legal a{color:rgba(255,255,255,.6);font-size:13.5px;font-weight:600}
.foot-legal a:hover{color:#fff}
.disclaimer{max-width:520px}

/* ─────────────── Scroll reveal ───────────────
   Content is visible by DEFAULT. JS adds `.armed` to hide+animate.
   If JS never runs, nothing is ever hidden — page can't go blank. */
.reveal.armed{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.armed.in{opacity:1;transform:none}
[data-stagger].armed>*{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
[data-stagger].armed.in>*{opacity:1;transform:none}

/* ─────────────── Responsive ─────────────── */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-sub{max-width:none}
  .how-grid{grid-template-columns:1fr;gap:48px}
  .how-phone{order:-1}
  .sec-block{grid-template-columns:1fr;gap:40px}
  .bento-card.large{grid-column:span 3}
  .nav-links{display:none}
  .nav-burger{display:block}
}
@media(max-width:720px){
  .section{padding:72px 0}
  .hero{padding:120px 0 64px}
  .stat-grid,.vp-grid,.bento,.sys-grid,.road-grid,.counters,.review-grid{grid-template-columns:1fr}
  .bento-card.large{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .chip{display:none}
  .hero-cta .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,[data-stagger]>*{transition:none}
}