/* Wellvue — Peach-Worlds-style scroll-sequenced landing
   Dark cinematic dpalette: navy #06080F, teal #00D4AA, purple #A78BFA, blue #60A5FA
   Inter type, 6-stage scroll choreography of the 3D logo.
*/
:root{
  --bg:#06080F;
  --bg-2:#0a0e1c;
  --surface:rgba(15,20,32,0.6);
  --border:rgba(255,255,255,0.08);
  --border-hover:rgba(255,255,255,0.18);
  --text:#E8ECF4;
  --text-2:#8B95A8;
  --text-3:#525E73;
  --teal:#00D4AA;
  --teal-glow:rgba(0,212,170,0.18);
  --purple:#A78BFA;
  --purple-glow:rgba(167,139,250,0.18);
  --blue:#60A5FA;
  --coral:#FF6B6B;
  --amber:#FBB040;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body::-webkit-scrollbar{width:0;height:0;display:none}
a{color:inherit;text-decoration:none}

/* ───────── Custom cursor ───────── */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform;
  mix-blend-mode:difference;
}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:#fff;transition:width .25s ease,height .25s ease,background .25s ease}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,0.4);border-radius:50%;transition:width .3s ease,height .3s ease,border-color .3s ease,background .3s ease}
.cursor-ring.hover{width:64px;height:64px;border-color:var(--teal);background:rgba(0,212,170,0.08)}
.cursor-dot.hover{width:0;height:0}
@media (max-width:780px){.cursor-dot,.cursor-ring{display:none}html,body{cursor:auto}}

/* ───────── Fixed canvas (3D logo) ───────── */
.stage-canvas{
  position:fixed;inset:0;z-index:5;
  pointer-events:none;
}
.stage-canvas canvas{width:100%;height:100%;display:block}

/* Atmospheric background canvas (sits below logo, above page bg) */
.atmos-canvas{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
}
.atmos-canvas canvas{width:100%;height:100%;display:block}

/* Deep page base — pure flat dark, no edge gradients */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#02030A;
}
/* Film grain — kept very subtle, layered above atmos for unified texture */
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ───────── Top nav ───────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-2);
}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;letter-spacing:0.2em}
/* Real laurel image instead of the old conic-gradient circle. Square
   tile so the laurel artwork doesn't get cropped by border-radius. */
.nav-brand-mark{
  width:30px;height:30px;border-radius:8px;
  display:block;object-fit:cover;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.4);
}
.nav-links{display:flex;gap:28px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:#fff;opacity:.7;transition:opacity .25s;white-space:nowrap}
.nav-links a:hover{opacity:1}
/* ── Intermediate / tablet nav (981–1100px): tighter gap so 5 links
      don't crowd a shrunk laptop window before mobile rules kick in. */
@media (max-width:1100px){
  .nav{padding:14px 22px;gap:14px}
  .nav-links{gap:18px;font-size:11px}
}
/* ── Smaller laptop / tablet (≤900px): wrap nav onto two rows so
      brand + waitlist sit on top, plain links flow underneath. */
@media (max-width:900px){
  .nav{padding:12px 18px;flex-wrap:wrap;row-gap:8px}
  .nav-links{flex:1 1 100%;justify-content:flex-end;gap:14px;font-size:10.5px}
}
/* ── Mobile nav: keep links visible (was hidden — caused "menus all gone on phone") ── */
@media (max-width:780px){
  .nav{padding:12px 14px;gap:8px;flex-wrap:wrap}
  .nav-left{gap:8px}
  .nav-links{display:flex !important;margin-left:auto;gap:14px;font-size:10px;letter-spacing:0.04em;flex-wrap:wrap}
  .nav-links a{white-space:nowrap;padding:0;background:transparent;border-radius:0;border:none}
}
@media (max-width:480px){
  .nav-brand span:nth-of-type(2){display:none}  /* hide "WELLVUE" word on small phones */
  .nav-links{gap:10px;font-size:9px}
}
/* Eye stays visible on phones — its drift positions are clamped at runtime
   in logo3d.js via viewportScaleFactor() so it never leaves the viewport. */

/* ───────── Sections ───────── */
section{position:relative;z-index:10;width:100%;display:flex;align-items:center;justify-content:center}
.section-inner{max-width:1240px;width:100%;padding:0 40px;position:relative}
@media(max-width:780px){.section-inner{padding:0 22px}}

/* HERO */
/* min-height (not fixed height) so the hero grows when the user shrinks
   the window vertically — the headline + CTA + store-stack can all
   exceed the viewport height and the page just scrolls naturally. */
.hero{min-height:100vh;height:auto;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:90px 0 40px}
.hero-content{
  position:relative;z-index:11;
  padding:32px 40px;border-radius:24px;
}
/* Legibility scrim — radial dark wash behind text content so the
   drifting 3D eye + atmospheric canvas behind never make a paragraph
   hard to read. Applied to every text container the eye can drift
   over. Cards (.agent-card, .analysis-card, .device-row) skip this
   because they already have their own dark fills + backdrop-blur. */
.text-col,.hero-content,.cta-scene .section-inner,.center-head,.stats-strip{
  position:relative;
}
.text-col::before,.hero-content::before,.cta-scene .section-inner::before,.center-head::before,.stats-strip::before{
  content:"";position:absolute;inset:-40px -60px;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(6,8,15,0.85) 0%, rgba(6,8,15,0.55) 45%, transparent 75%);
  pointer-events:none;
  filter:blur(2px);
}
/* CTA gets an extra-strong scrim — the large centered eye lands here */
.cta-scene .section-inner::before{
  inset:-100px -140px;
  background:radial-gradient(ellipse at center, rgba(6,8,15,0.94) 0%, rgba(6,8,15,0.80) 35%, rgba(6,8,15,0.45) 62%, transparent 85%);
  filter:blur(4px);
}
.eyebrow{
  display:inline-block;
  padding:8px 16px;border:1px solid var(--border);border-radius:100px;
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-2);
  margin-bottom:28px;background:rgba(255,255,255,0.02);backdrop-filter:blur(8px);
}
.eyebrow .pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:10px;box-shadow:0 0 0 0 var(--teal);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,212,170,.7)}70%{box-shadow:0 0 0 12px rgba(0,212,170,0)}100%{box-shadow:0 0 0 0 rgba(0,212,170,0)}}
.hero h1{
  font-size:clamp(44px,8vw,116px);
  font-weight:200;letter-spacing:-0.04em;line-height:0.95;
  /* Pushed down + more breathing room before the "Powered by..." motto */
  /* per MG 2026-05-16.                                                 */
  margin-top:48px;
  margin-bottom:56px;
}
.hero h1 em{font-style:normal;font-weight:600;background:linear-gradient(90deg,#C9952B 0%,#C9952B 42%,#FFE066 47%,#FFFFFF 50%,#FFE066 53%,#C9952B 58%,#C9952B 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shineSweep 3s linear infinite}
/* Brand gold accent applied to nav active link, waitlist join button,
   and form submit buttons per MG 2026-05-13. Replaces the old
   teal-purple-blue gradient family across the site so the gold AI
   Agent treatment cascades through every brand surface. */
.nav-links a.active{color:#FFE066 !important;border-bottom:2px solid #FFE066}
.gold-shine-btn{background:linear-gradient(90deg,#A67C00 0%,#C9952B 30%,#FFE066 50%,#C9952B 70%,#A67C00 100%) !important;background-size:280% 100% !important;color:#0D0D14 !important;animation:shineSweep 3s linear infinite,waitlistPulse 2.6s ease-in-out infinite !important;border:1px solid rgba(255,224,102,0.6) !important;text-shadow:none !important}
.gold-shine-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
/* Realistic shining gold per MG 2026-05-13 (v2). Base text is SOLID
   gold across most of its width; only a narrow bright shine band
   sweeps across linearly every 3s (right to left). The shine appears
   to "pass over" polished metal instead of the previous all-metallic
   gradient look. Same physics mirrored in the iOS mottoWord
   TimelineView animation so brand reads identical on app + web. */
.brand-gold{
  font-style:normal;font-weight:700;
  background:linear-gradient(90deg,
    #C9952B 0%,
    #C9952B 42%,
    #FFE066 47%,
    #FFFFFF 50%,
    #FFE066 53%,
    #C9952B 58%,
    #C9952B 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(255,215,0,0.32);
  animation:shineSweep 3s linear infinite;
}
@keyframes shineSweep{
  0%   {background-position:200% 0}
  100% {background-position:-100% 0}
}
/* Two-tone halo per MG 2026-05-13. The first H1 line ("Stop
   measuring.") = cool blue. The <br /> separates the two lines
   so we tag the second line via a span class server-side. We
   apply the default cool-blue glow at the H1 level, then
   override the second line via .hero h1 .line-2 with the
   bright teal-cyan glow so the two lines read distinctly when
   compared side by side. */
.hero h1{
  text-shadow:
    0 0 8px rgba(89,140,242,0.55),
    0 0 24px rgba(89,140,242,0.40),
    0 0 56px rgba(123,156,245,0.25);
}
.hero h1 .line-2{
  /* Brighter mint-cyan fill per MG 2026-05-14 — visibly distinct from
     the white "Stop measuring." line above. Matches brand cyan family. */
  color:#9FF7DF;
  /* 25% smaller than line 1's h1 size per MG 2026-05-14. h1 is
     clamp(44px,8vw,116px) → line-2 is clamp(33px,6vw,87px).
     Still comfortably bigger than the .hero-motto (22-30px). */
  font-size: clamp(33px, 6vw, 87px);
  /* Light sky-blue outline around each letter per MG 2026-05-13. */
  -webkit-text-stroke: 1.5px #7DD3FC;
  /* Desktop default: brightness +50% over the prior baseline AND
     breathing pulse 2x faster (3.5s → 1.75s) per MG 2026-05-14
     (rev3). Mobile <= 600px gets a 50% DIMMER variant via the
     media query below, with the same fast breathing pattern. */
  animation: line2Breathe 1.75s ease-in-out infinite;
}
/* Glow opacities multiplied by 0.97 per MG 2026-05-14 (rev4) — 3% less
   shiny across both breath endpoints so the brighter fill carries the
   visibility instead of the halo. */
@keyframes line2Breathe{
  0%,100% {
    text-shadow:
      0 0 6px rgba(77,199,217,0.669),
      0 0 16px rgba(77,199,217,0.572),
      0 0 38px rgba(109,232,245,0.466),
      0 0 72px rgba(109,232,245,0.291);
  }
  50% {
    text-shadow:
      0 0 6px rgba(77,199,217,0.941),
      0 0 16px rgba(77,199,217,0.795),
      0 0 38px rgba(109,232,245,0.650),
      0 0 72px rgba(109,232,245,0.407);
  }
}
/* Mobile shine — dimmed another 30% per MG 2026-05-14 (rev2), then
   another 3% per MG 2026-05-14 (rev4). Same fast breathing pattern. */
@media (max-width: 600px){
  .hero h1 .line-2{
    animation: line2BreatheMobile 1.75s ease-in-out infinite;
  }
  @keyframes line2BreatheMobile{
    0%,100% {
      text-shadow:
        0 0 6px rgba(77,199,217,0.233),
        0 0 16px rgba(77,199,217,0.204),
        0 0 38px rgba(109,232,245,0.165),
        0 0 72px rgba(109,232,245,0.097);
    }
    50% {
      text-shadow:
        0 0 6px rgba(77,199,217,0.330),
        0 0 16px rgba(77,199,217,0.281),
        0 0 38px rgba(109,232,245,0.223),
        0 0 72px rgba(109,232,245,0.146);
    }
  }
}
.hero-motto{font-size:clamp(22px,2.6vw,30px) !important;font-weight:400;color:var(--text-1) !important;max-width:680px !important;margin:0 auto 18px !important;line-height:1.35 !important;letter-spacing:-0.01em}
.hero-sub{font-size:clamp(15px,1.4vw,18px);color:var(--text-2);max-width:540px;margin:0 auto 40px;line-height:1.6}
.hero-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:100px;
  font-size:13px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  background:#fff;color:#000;border:1px solid #fff;
  transition:transform .3s ease,box-shadow .3s ease;
  will-change:transform;
}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.2)}
.btn:hover{box-shadow:0 12px 40px rgba(0,212,170,0.25)}
.btn .arrow{display:inline-block;transition:transform .3s ease}
.btn:hover .arrow{transform:translateX(4px)}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-3);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint .line{width:1px;height:36px;background:linear-gradient(to bottom,transparent,var(--teal),transparent);background-size:1px 200%;animation:drift 2.4s linear infinite}
@keyframes drift{from{background-position:0 -100%}to{background-position:0 100%}}

/* GENERIC big sections */
/* clamp() padding so each section breathes on big viewports but
   doesn't waste 28% of a shrunk window on whitespace. min-height
   removed so content drives the section height naturally. */
.scene{min-height:auto;padding:clamp(56px,12vh,180px) 0}
.scene-tag{
  font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--teal);
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.scene-tag::before{content:"";width:24px;height:1px;background:var(--teal)}
.scene-h{
  font-size:clamp(36px,5.5vw,72px);
  font-weight:200;letter-spacing:-0.03em;line-height:1.02;
  margin-bottom:24px;max-width:14ch;
}
.scene-h em{font-style:normal;font-weight:600;background:linear-gradient(90deg,#C9952B 0%,#C9952B 42%,#FFE066 47%,#FFFFFF 50%,#FFE066 53%,#C9952B 58%,#C9952B 100%);background-size:280% 100%;animation:shineSweep 3s linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent}
.scene-p{font-size:17px;color:var(--text-2);max-width:42ch;line-height:1.65}

/* split layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.right .text-col{grid-column:2}
.split.right .vis-col{grid-column:1;grid-row:1}
/* On phones the .split grids collapse to one column. The .split.right
   variant set explicit grid-column:2 / grid-column:1 on its children
   (so the text could sit right and video could sit left on desktop).
   In a 1-column grid, those explicit positions create an implicit
   second column and push the video off-screen entirely — which is why
   "video missing" appeared on Build Your Own, AI Health Assistant,
   Sleep, Longevity, etc on mobile. Reset the grid-column / grid-row
   here so children fall back to source order. */
@media(max-width:980px){
  .split{grid-template-columns:1fr}
  .split.right .text-col,
  .split.right .vis-col{grid-column:1;grid-row:auto}
}

/* AGENTS rail — precision-grade card with depth, an orbital halo on the
   icon, and a hover reveal that brings out an extra detail line plus an
   inward glow ring. Description copy stays compact by default; the hover
   state is where the additional capability text appears. */
.agents-rail{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px;
}
.agent-card{
  position:relative;padding:26px 26px 22px;border:1px solid var(--border);border-radius:20px;
  background:linear-gradient(180deg,rgba(18,24,38,0.78),rgba(12,16,26,0.82));
  backdrop-filter:blur(14px);
  transition:border-color .35s,transform .35s,box-shadow .35s,background .35s;
  overflow:hidden;
  isolation:isolate;
}
/* cursor-tracked radial wash (enhanced) */
.agent-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%),rgba(0,212,170,0.18),transparent 62%);
  opacity:0;transition:opacity .45s;
  pointer-events:none;
}
/* inward glow ring that lights up on hover, sits behind everything */
.agent-card::after{
  content:"";position:absolute;inset:1px;border-radius:19px;z-index:-1;
  background:radial-gradient(80% 60% at 50% 0%,rgba(0,212,170,0.10),transparent 70%);
  opacity:0;transition:opacity .45s;
  pointer-events:none;
}
.agent-card:hover::before{opacity:1}
.agent-card:hover::after{opacity:1}
.agent-card:hover{
  border-color:rgba(0,212,170,0.32);
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(0,0,0,0.45),0 0 0 1px rgba(0,212,170,0.18) inset;
}

/* Icon: real 3D rotation in CSS — no Three.js scene per card. The icon
   sits on its own 3D plane that orbits around Y, with a halo ring that
   counter-rotates and an outer aurora pulse. Reads as an actual
   animated 3D logo, not a static SVG with a glow. */
.agent-icon{
  position:relative;width:60px;height:60px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  perspective:600px;
  transform-style:preserve-3d;
}
.agent-icon svg{
  width:26px;height:26px;position:relative;z-index:3;
  transform-style:preserve-3d;
  animation:agentSpin 9s linear infinite;
  filter:drop-shadow(0 0 6px currentColor);
}
/* halo ring that counter-rotates around the icon */
.agent-icon::before{
  content:"";position:absolute;inset:-2px;border-radius:18px;
  border:1px solid currentColor;opacity:0.28;
  transform-style:preserve-3d;
  animation:agentRing 7s linear infinite reverse;
  z-index:2;
}
/* outer aurora pulse */
.agent-icon::after{
  content:"";position:absolute;inset:-12px;border-radius:24px;
  background:radial-gradient(circle,currentColor 0%,transparent 60%);
  opacity:0.18;filter:blur(10px);
  animation:agentAurora 4s ease-in-out infinite;
  z-index:1;
}
.agent-card:hover .agent-icon::after{opacity:0.40}
.agent-card:hover .agent-icon svg{animation-duration:3s}
@keyframes agentSpin{
  0%   {transform:rotateY(0deg) rotateX(8deg)}
  50%  {transform:rotateY(180deg) rotateX(-8deg)}
  100% {transform:rotateY(360deg) rotateX(8deg)}
}
@keyframes agentRing{
  0%   {transform:rotate3d(0,1,0,0deg) scale(1)}
  50%  {transform:rotate3d(0,1,0,180deg) scale(1.06)}
  100% {transform:rotate3d(0,1,0,360deg) scale(1)}
}
@keyframes agentAurora{
  0%,100% {opacity:0.16;transform:scale(1)}
  50%     {opacity:0.32;transform:scale(1.10)}
}

.agent-name{font-size:19px;font-weight:600;letter-spacing:-0.012em;margin-bottom:8px}
.agent-desc{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:14px}
.agent-tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.agent-tag{
  font-size:10.5px;letter-spacing:0.06em;padding:5px 11px;
  border:1px solid var(--border);border-radius:100px;color:var(--text-2);
  background:rgba(255,255,255,0.02);
  transition:border-color .3s,color .3s,background .3s;
}
.agent-card:hover .agent-tag{
  border-color:rgba(0,212,170,0.22);
  color:var(--text);
}
@media(max-width:780px){.agents-rail{grid-template-columns:1fr}}

/* Analysis grid (chip cloud) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;max-width:780px}
.chip{
  font-size:12px;padding:8px 14px;border-radius:100px;
  border:1px solid var(--border);background:rgba(255,255,255,0.02);
  color:var(--text-2);transition:all .3s;
  white-space:nowrap;
}
.chip:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-glow);transform:translateY(-1px)}
.chip.t{color:var(--teal);border-color:rgba(0,212,170,0.3)}
.chip.p{color:var(--purple);border-color:rgba(167,139,250,0.3)}
.chip.b{color:var(--blue);border-color:rgba(96,165,250,0.3)}
.chip.a{color:var(--amber);border-color:rgba(251,176,64,0.3)}
.chip.c{color:var(--coral);border-color:rgba(255,107,107,0.3)}

/* DEVICES list */
.devices{display:flex;flex-direction:column;gap:8px;margin-top:34px;max-width:540px}
.device-row{
  display:flex;align-items:center;gap:18px;
  padding:18px 22px;border:1px solid var(--border);border-radius:16px;
  background:rgba(15,20,32,0.4);transition:all .3s;
}
.device-row:hover{border-color:var(--border-hover);background:rgba(15,20,32,0.7)}
/* Replaces the old .device-icon mono-text box. Each row gets a real
   SVG glyph in its own colored chip, so Smart Rings, Apple Health,
   Smartwatches, and Fitness Bands read as actual product categories
   instead of three identical "RING / WTCH / BAND" labels. */
.device-glyph{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  position:relative;
  transition:transform .3s, box-shadow .3s;
}
.device-glyph svg{width:22px;height:22px}
.device-glyph::after{
  content:"";position:absolute;inset:-3px;border-radius:14px;
  background:radial-gradient(circle,currentColor 0%,transparent 65%);
  opacity:0.18;filter:blur(6px);z-index:-1;
}
.device-glyph.teal{background:var(--teal-glow);color:var(--teal)}
.device-glyph.coral{background:var(--coral-glow);color:var(--coral)}
.device-glyph.blue{background:rgba(96,165,250,0.10);color:var(--blue)}
.device-glyph.purple{background:var(--purple-glow);color:var(--purple)}
.device-row:hover .device-glyph{transform:scale(1.06)}
.device-row .name{flex:1;font-size:15px;font-weight:500}
.device-row .status{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-3)}
.device-row.active .status{color:var(--teal)}

/* Waitlist CTA button — sits in the LEFT group of the nav, beside the
   WellVue brand. Bright teal gradient so it visibly outweighs the plain
   text nav links on the right. Soft pulse animation draws the eye. */
.nav-cta{
  display:inline-flex;align-items:center;
  color:#02110d;
  background:linear-gradient(90deg,#A67C00 0%,#C9952B 30%,#FFE066 50%,#C9952B 70%,#A67C00 100%);background-size:280% 100%;animation:shineSweep 3s linear infinite,waitlistPulse 2.6s ease-in-out infinite;
  font-weight:700;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  padding:8px 16px;border-radius:100px;
  text-decoration:none;
  box-shadow:0 6px 22px rgba(0,212,170,0.35), 0 0 0 1px rgba(0,212,170,0.45) inset;
  animation:waitlistPulse 2.6s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{
  color:#02110d;
  background:linear-gradient(90deg,#FFE066 0%,#C9952B 50%,#FFE066 100%);background-size:280% 100%;animation:shineSweep 3s linear infinite;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,212,170,0.45), 0 0 0 1px rgba(0,212,170,0.55) inset;
}
@keyframes waitlistPulse{
  0%,100%{box-shadow:0 6px 22px rgba(0,212,170,0.35), 0 0 0 1px rgba(0,212,170,0.45) inset, 0 0 0 0 rgba(0,212,170,0.35)}
  50%   {box-shadow:0 6px 22px rgba(0,212,170,0.45), 0 0 0 1px rgba(0,212,170,0.55) inset, 0 0 0 8px rgba(0,212,170,0.0)}
}

/* ───── Download-app popup (home page, ad landing) ─────
   Slides in from the top on load; breathing App Store badge; close (X) so a
   visitor who'd rather read the site can dismiss it. 2026-06-23. */
@keyframes dlPopBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.dl-pop{
  position:fixed;z-index:1400;top:90px;left:50%;
  transform:translateX(-50%) translateY(-16px);
  width:min(720px,calc(100% - 24px));
  display:flex;align-items:center;gap:24px;
  padding:26px 64px 26px 32px;
  background:linear-gradient(180deg,rgba(18,24,38,0.98),rgba(10,14,22,0.98));
  border:1.5px solid rgba(0,212,170,0.34);border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,0.6),0 0 60px rgba(0,212,170,0.20);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.dl-pop.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dl-pop.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-16px)}
.dl-pop-text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.dl-pop-text strong{color:#fff;font-size:23px;font-weight:700;line-height:1.18}
.dl-pop-text span{color:rgba(255,255,255,0.7);font-size:16px;line-height:1.35}
.dl-pop-badge{flex-shrink:0;display:block}
.dl-pop-badge img{display:block;height:84px;width:auto;border-radius:12px;animation:dlPopBreathe 2.6s ease-in-out infinite;filter:drop-shadow(0 10px 26px rgba(0,212,170,0.55))}
.dl-pop-close{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.8);cursor:pointer;transition:background .2s,color .2s;
}
.dl-pop-close:hover{background:rgba(255,255,255,0.14);color:#fff}
.dl-pop-close svg{width:20px;height:20px}
@media(max-width:780px){ .dl-pop{top:104px} }
@media(max-width:520px){
  .dl-pop{flex-direction:column;align-items:stretch;text-align:center;gap:16px;padding:24px 18px 26px}
  .dl-pop-text strong{font-size:21px}
  .dl-pop-badge{align-self:center}
  .dl-pop-badge img{height:76px}
  .dl-pop-close{top:8px;right:8px}
}

/* Waitlist modal */
.waitlist-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.waitlist-modal.open{opacity:1;pointer-events:auto}
.wl-backdrop{
  position:absolute;inset:0;
  background:rgba(2,4,10,0.78);
  backdrop-filter:blur(18px) saturate(140%);
}
.wl-card{
  position:relative;
  width:100%;max-width:460px;
  background:linear-gradient(180deg,rgba(18,24,38,0.98),rgba(10,14,22,0.98));
  border:1px solid rgba(0,212,170,0.22);
  border-radius:24px;
  padding:34px 30px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 60px rgba(0,212,170,0.12);
  transform:translateY(20px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
.waitlist-modal.open .wl-card{transform:translateY(0)}
.wl-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  color:var(--text-2);cursor:pointer;
  transition:background .2s,color .2s;
}
.wl-close:hover{background:rgba(255,255,255,0.10);color:var(--text)}
.wl-close svg{width:16px;height:16px}
.wl-marks{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin-bottom:18px;
}
.wl-mark{
  width:60px;height:60px;border-radius:14px;overflow:hidden;
  background:#000;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
}
.wl-mark img{width:100%;height:100%;object-fit:cover;display:block}
.wl-mark.wl-mark-store{
  width:auto;height:60px;padding:0;
}
.wl-mark.wl-mark-store svg{display:block;height:60px;width:auto}
.wl-card h3{
  font-size:22px;font-weight:700;letter-spacing:-0.4px;
  text-align:center;margin-bottom:8px;
}
.wl-lede{
  text-align:center;font-size:14px;color:var(--text-2);
  margin-bottom:22px;line-height:1.55;
}
.wl-form{display:flex;flex-direction:column;gap:14px}
.wl-field{display:flex;flex-direction:column;gap:6px}
.wl-field span{
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;
}
.wl-field span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--text-3);font-weight:400;font-size:11px;margin-left:4px}
.wl-field input,
.wl-field textarea{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);font-family:inherit;font-size:14px;
  outline:none;transition:border-color .2s,background .2s;
  resize:vertical;
}
.wl-field input:focus,
.wl-field textarea:focus{
  border-color:rgba(0,212,170,0.45);
  background:rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(0,212,170,0.12);
}
.wl-submit{
  margin-top:6px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;
  border-radius:100px;border:none;
  background:linear-gradient(90deg,#A67C00 0%,#C9952B 30%,#FFE066 50%,#C9952B 70%,#A67C00 100%);background-size:280% 100%;animation:shineSweep 3s linear infinite,waitlistPulse 2.6s ease-in-out infinite;
  color:#02110d;font-weight:700;font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(0,212,170,0.35);
  transition:transform .2s,box-shadow .2s;
}
.wl-submit svg{width:16px;height:16px}
.wl-submit:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(0,212,170,0.45)}
.wl-fineprint{
  font-size:11px;color:var(--text-3);text-align:center;
  margin-top:4px;line-height:1.5;
}
.wl-success{display:none;text-align:center;padding:8px 0 4px}
.wl-success.show{display:block}
.wl-check{
  width:54px;height:54px;border-radius:50%;
  margin:0 auto 14px;
  background:rgba(0,212,170,0.16);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--teal);
}
.wl-check svg{width:28px;height:28px}
.wl-success h4{font-size:18px;font-weight:700;margin-bottom:6px}
.wl-success p{font-size:14px;color:var(--text-2);line-height:1.55}
@media(max-width:560px){
  .wl-card{padding:28px 20px 24px}
  .wl-card h3{font-size:19px}
  .wl-mark{width:52px;height:52px}
  .wl-mark.wl-mark-store{height:52px}
  .wl-mark.wl-mark-store svg{height:52px}
}

/* App Store download badge — links to the live App Store listing. */
.appstore-badge{
  display:inline-block;
  border-radius:12px;
  transition:transform .25s, box-shadow .25s, filter .25s;
  cursor:pointer;
  line-height:0;
}
.appstore-badge img{display:block;width:200px;height:auto}
.appstore-badge:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 10px 28px rgba(0,212,170,0.22));
}

/* Vertical App Store + laurel combo. App Store badge sits on top, the
   laurel companion mark sits directly under it. Laurel is wrapped in
   a clipping frame that scales the image up by 1.18 so the white
   filmstrip perforations baked into the JPEG sit *outside* the visible
   area. No border, no extra background. Half the previous size per
   request. */
.store-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:24px auto 0;
}
.store-stack .appstore-badge img{display:block;width:200px;height:auto}
.store-stack .store-laurel-wrap{
  display:block;
  width:100px;height:100px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  transition:transform .3s, box-shadow .3s;
}
.store-stack .store-laurel-wrap img{
  display:block;
  width:118%;height:118%;
  margin-left:-9%;margin-top:-9%;
  object-fit:cover;
}
.store-stack .store-laurel-wrap:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,212,170,0.18);
}
/* Bottom CTA banner reuses the same proportions */
.store-stack-cta{
  margin-top:14px;
}
@media(max-width:560px){
  .store-stack .appstore-badge img{width:170px}
  .store-stack .store-laurel-wrap{width:84px;height:84px}
}

/* Agent hover-popover — small floating panel that slides out when the
   cursor enters an agent card and vanishes the moment the cursor
   leaves. CSS-only, no modal, no backdrop. Sits absolutely above the
   card so it can overlap neighbours. */
.agent-card .agent-pop{
  position:absolute;
  left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%, 8px);
  width:300px;max-width:88vw;
  padding:16px 18px 14px;
  background:linear-gradient(180deg,rgba(18,24,38,0.98),rgba(10,14,22,0.98));
  border:1px solid rgba(0,212,170,0.30);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,0.55),0 0 30px rgba(0,212,170,0.16);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s;
  pointer-events:none;
  z-index:50;
}
/* Driven by JS — card gets .open on click, loses it on pointer-leave
   or click-outside. No :hover dependency so the popover doesn't flicker
   when the user just drifts past a card. */
.agent-card.open .agent-pop{
  opacity:1;visibility:visible;
  transform:translate(-50%, 0);
  transition-delay:0s;
}
/* Little arrow at the bottom pointing back to the card */
.agent-card .agent-pop::after{
  content:"";position:absolute;
  left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;
  background:linear-gradient(135deg,rgba(18,24,38,0.98),rgba(10,14,22,0.98));
  border-right:1px solid rgba(0,212,170,0.30);
  border-bottom:1px solid rgba(0,212,170,0.30);
}
.agent-pop .ap-eyebrow{
  font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--teal);font-weight:700;
  margin-bottom:10px;
}
.agent-pop .ap-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.agent-pop .ap-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--text);line-height:1.45;
  padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
}
.agent-pop .ap-quote{
  font-family:Georgia,serif;color:var(--teal);
  font-size:22px;line-height:0.5;flex-shrink:0;margin-top:8px;
}

/* On phones the cards already span full width. The popover collapses
   to a flat below-card panel (so it never spills off-screen) but still
   only renders when the card is .open — same click-to-toggle model as
   desktop. */
@media(max-width:780px){
  .agent-card .agent-pop{
    position:relative;
    left:auto;bottom:auto;
    transform:none;width:auto;max-width:none;
    margin-top:14px;
    pointer-events:auto;
    box-shadow:none;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.02);
    /* Hidden until JS toggles .open on the card */
    max-height:0;
    overflow:hidden;
    margin-top:0;
    opacity:0;
    transition:max-height .3s ease, margin-top .3s ease, opacity .25s ease;
  }
  .agent-card.open .agent-pop{
    max-height:600px;
    margin-top:14px;
    opacity:1;
  }
  .agent-card .agent-pop::after{display:none}
}

/* CTA */
.cta-scene{text-align:center;min-height:auto;display:flex;align-items:center;justify-content:center;padding:clamp(60px,12vh,180px) 0}
.cta-h{font-size:clamp(48px,7vw,96px);font-weight:200;letter-spacing:-0.03em;line-height:1;margin-bottom:36px}
.cta-h em{font-style:normal;font-weight:600;background:linear-gradient(90deg,#C9952B 0%,#C9952B 42%,#FFE066 47%,#FFFFFF 50%,#FFE066 53%,#C9952B 58%,#C9952B 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shineSweep 3s linear infinite}
.cta-p{color:var(--text-2);max-width:44ch;margin:0 auto 40px;font-size:17px;line-height:1.6}

/* footer — borderless so it bleeds into page */
footer{
  position:relative;z-index:10;
  padding:48px 40px 36px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  font-size:12px;color:var(--text-3);letter-spacing:0.06em;
}
footer a{color:var(--text-2);transition:color .2s}
footer a:hover{color:var(--teal)}
.footer-links{display:flex;gap:24px}

/* Reveal animation */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
[data-reveal].in{opacity:1;transform:none}

/* Scramble text holds its width */
.scramble{display:inline-block;font-variant-numeric:tabular-nums}

/* Stat strip */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:64px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat{padding:24px 18px;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
.stat-num{font-size:34px;font-weight:300;letter-spacing:-0.03em}
.stat-num em{font-style:normal;font-weight:500;color:var(--teal)}
.stat-lbl{font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border)}}

/* Floating side index (current section) — now a real glass panel with
   a numeric prefix per row, an animated gradient bar on the active row,
   and a teal pin glow that shows where you are in the page. The old
   version was a column of plain hairlines that disappeared into the
   background; this reads as a navigation chip on every screen size that
   shows it. */
.side-index{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;gap:4px;
  padding:14px 12px;
  background:rgba(10,14,22,0.62);
  border:1px solid var(--border);
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 40px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-3);
  font-variant-numeric:tabular-nums;
  transition:border-color .35s,box-shadow .35s;
}
.side-index:hover{border-color:rgba(0,212,170,0.20);box-shadow:0 14px 48px rgba(0,0,0,0.55),0 0 0 1px rgba(0,212,170,0.08) inset}
.side-index .item{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;cursor:pointer;
  transition:color .3s,background .3s,padding .3s;
}
.side-index .item .bar{
  width:22px;height:1px;background:var(--text-3);
  transition:width .35s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s;
}
.side-index .item:hover{color:var(--text)}
.side-index .item:hover .bar{background:var(--text-2);width:30px}
.side-index .item.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(0,212,170,0.10),transparent 80%);
}
.side-index .item.active .bar{
  width:46px;
  background:linear-gradient(90deg,var(--teal),var(--purple));
  box-shadow:0 0 12px rgba(0,212,170,0.55);
}
/* Hide the floating side index whenever the viewport is narrow enough
   that the .section-inner content edge could collide with it.
   Geometry: the menu sits at left:24px and is ~110px wide, so it
   ends around x=134. The content column is max-width:1240px with
   40px padding, centered. Solving (X - 1240)/2 + 40 > 134 gives
   X > 1428, so we only show the menu when the viewport is wide
   enough to give it real clearance from the leftmost text column
   (.split.right text sits there). */
@media(max-width:1440px){.side-index{display:none}}

/* Progress bar at top */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--teal);z-index:60;width:0;box-shadow:0 0 12px var(--teal)}

/* Marquee */
.marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin:8vh 0;
  padding:22px 0;
  background:rgba(15,20,32,0.4);
}
.marquee-track{display:flex;gap:48px;white-space:nowrap;animation:marquee 32s linear infinite}
.marquee span{font-size:18px;font-weight:300;letter-spacing:-0.02em;color:var(--text-2)}
.marquee span em{font-style:normal;color:var(--teal);font-weight:500}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───────────────────────────────────────────────────────────────
   Sections restored from the original wellvue.ai
   ─────────────────────────────────────────────────────────────── */

/* Stats strip — borderless, blends into page. overflow:visible so the
   scrim pseudo (inset:-40px -60px) can bleed beyond the bounds and
   dim the 3D eye behind in a soft circle, matching the hero/CTA. */
.stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:1240px;margin:0 auto;
  border-radius:0;background:transparent;
  overflow:visible;
}
.stats-strip .stat-cell{
  text-align:center;padding:28px 18px;
  border-right:1px solid rgba(255,255,255,0.04);
}
.stats-strip .stat-cell:last-child{border-right:none}
.stats-strip .stat-num{
  font-size:34px;font-weight:300;letter-spacing:-0.03em;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats-strip .stat-label{
  font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-3);margin-top:6px;
}
@media(max-width:780px){
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .stats-strip .stat-cell:nth-child(2){border-right:none}
  .stats-strip .stat-cell:nth-child(1),
  .stats-strip .stat-cell:nth-child(2){border-bottom:1px solid var(--border)}
  .stats-strip .stat-num{font-size:26px}
}

/* Section eyebrow + title pair (legacy header style) */
.section-eyebrow{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.25em;color:var(--teal);margin-bottom:14px;
}
.section-h{
  font-size:clamp(30px,5vw,52px);font-weight:200;letter-spacing:-0.03em;
  line-height:1.05;margin-bottom:18px;
}
.section-h em{
  font-style:normal;font-weight:600;
  background:linear-gradient(90deg,#C9952B 0%,#C9952B 42%,#FFE066 47%,#FFFFFF 50%,#FFE066 53%,#C9952B 58%,#C9952B 100%);background-size:280% 100%;animation:shineSweep 3s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-desc{
  font-size:16px;color:var(--text-2);max-width:62ch;line-height:1.65;
}
.center-head{text-align:center;margin:0 auto;max-width:760px}
.center-head .section-desc{margin-left:auto;margin-right:auto}

/* 9-agent grid (3 columns on desktop) */
.agents-3col{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:48px;
}
@media(max-width:980px){.agents-3col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.agents-3col{grid-template-columns:1fr}}

.agent-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.agent-icon svg{width:22px;height:22px}
.agent-card .agent-name{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.agent-card .agent-desc{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:14px}

/* Build Your Own Agents — full-width agent card with video */
.agent-card-full{
  margin-top:14px;position:relative;overflow:hidden;
  border:1px solid rgba(0,212,170,0.18);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(0,212,170,0.05), rgba(167,139,250,0.05));
  backdrop-filter:blur(10px);
  display:grid;grid-template-columns:340px 1fr;
}
.agent-card-full:hover{border-color:rgba(0,212,170,0.35)}
.agent-card-full .full-visual{
  position:relative;overflow:hidden;
  border-right:1px solid var(--border);
}
.agent-card-full .full-visual video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.agent-card-full .full-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(15,20,32,0.85));
  pointer-events:none;
}
.agent-card-full .full-content{padding:32px 36px;display:flex;flex-direction:column;justify-content:center}
.agent-card-full .full-content .agent-name{font-size:22px}
@media(max-width:780px){
  .agent-card-full{grid-template-columns:1fr}
  .agent-card-full .full-visual{height:200px;border-right:none;border-bottom:1px solid var(--border)}
  .agent-card-full .full-visual::after{
    background:linear-gradient(to bottom, transparent 60%, rgba(15,20,32,0.85));
  }
  .agent-card-full .full-content{padding:24px}
}

/* Feature bullets — checkmark list, restored from legacy */
.f-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.f-bullets li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14.5px;color:var(--text-2);line-height:1.55;
}
.f-bullets li::before{
  content:"";width:16px;height:16px;flex-shrink:0;margin-top:3px;
  background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Feature tag (small color-coded pill above feature title) */
.f-tag{
  display:inline-block;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;
  padding:6px 12px;border-radius:100px;
  margin-bottom:14px;border:1px solid transparent;
}
.f-tag.teal  {color:var(--teal);  background:rgba(0,212,170,0.10);  border-color:rgba(0,212,170,0.25)}
.f-tag.purple{color:var(--purple);background:rgba(167,139,250,0.10);border-color:rgba(167,139,250,0.25)}
.f-tag.coral {color:var(--coral); background:rgba(255,107,107,0.10); border-color:rgba(255,107,107,0.25)}
.f-tag.amber {color:var(--amber); background:rgba(251,176,64,0.10);  border-color:rgba(251,176,64,0.25)}
.f-tag.blue  {color:var(--blue);  background:rgba(96,165,250,0.10);  border-color:rgba(96,165,250,0.25)}

/* Feature visual frame — phone-screen recording sits here */
.feature-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:520px;
}
.feature-visual video,
.feature-visual .video-placeholder{
  width:360px;max-width:100%;
  border-radius:38px;
  box-shadow:0 24px 70px rgba(0,0,0,0.55), 0 0 60px rgba(0,212,170,0.10);
  border:3px solid rgba(255,255,255,0.08);
  background:#0a0e1c;
  aspect-ratio:9/19.5;
  object-fit:cover;display:block;
}
.feature-visual.cinematic video,
.feature-visual.cinematic .video-placeholder{
  width:100%;max-width:540px;
  aspect-ratio:16/9;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 24px 70px rgba(0,0,0,0.55), 0 0 60px rgba(167,139,250,0.10);
}
.feature-visual .video-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--text-3);text-align:center;padding:32px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px),
    radial-gradient(ellipse at center, rgba(0,212,170,0.04), transparent 70%),
    #08101c;
}
/* Build Your Own card uses .full-visual — placeholder fills the frame */
.agent-card-full .full-visual{min-height:240px}
.agent-card-full .full-visual .video-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--text-3);text-align:center;padding:32px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px),
    radial-gradient(ellipse at center, rgba(0,212,170,0.04), transparent 70%),
    #08101c;
  border:none;border-radius:0;box-shadow:none;aspect-ratio:auto;
}
.feature-visual .video-placeholder .ph-label{
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal);
}
.feature-visual .video-placeholder .ph-hint{
  font-size:13px;color:var(--text-2);max-width:200px;line-height:1.5;
}
.feature-visual .video-placeholder svg{
  width:42px;height:42px;color:var(--teal);opacity:0.7;
}
.feature-visual .glow-overlay{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
}
@media(max-width:780px){
  .feature-visual{min-height:280px}
  .feature-visual video,
  .feature-visual .video-placeholder{width:220px}
  .feature-visual.cinematic video{width:100%}
}

/* Analyses category cards (6-card grid, replaces chip cloud) */
.analyses-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:40px;
}
@media(max-width:980px){.analyses-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.analyses-grid{grid-template-columns:1fr}}
.analysis-card{
  padding:24px;border:1px solid var(--border);border-radius:16px;
  background:rgba(15,20,32,0.55);backdrop-filter:blur(8px);
  transition:border-color .3s, transform .3s, background .3s;
}
.analysis-card:hover{border-color:var(--border-hover);transform:translateY(-2px);background:rgba(15,20,32,0.75)}
.analysis-card .ac-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.analysis-card .ac-icon svg{width:22px;height:22px}
.analysis-card .ac-title{font-size:16px;font-weight:600;margin-bottom:8px}
.analysis-card .ac-desc{font-size:13px;color:var(--text-2);line-height:1.55}

/* CTA banner (legacy gradient bordered banner) */
.cta-banner{
  max-width:920px;margin:0 auto;
  padding:54px 36px;text-align:center;
  background:linear-gradient(135deg, rgba(0,212,170,0.08), rgba(167,139,250,0.08));
  border:1px solid rgba(0,212,170,0.20);
  border-radius:24px;
  position:relative;overflow:hidden;
}
.cta-banner h2{
  font-size:clamp(28px,4vw,44px);font-weight:300;letter-spacing:-0.025em;
  margin-bottom:14px;
}
.cta-banner h2 em{
  font-style:normal;font-weight:600;
  background:linear-gradient(120deg,var(--teal),var(--purple),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-banner p{
  font-size:16px;color:var(--text-2);max-width:560px;margin:0 auto 28px;line-height:1.6;
}
.cta-banner .price-line{
  font-size:13px;color:var(--text-3);margin-top:18px;
}

/* Wellness disclaimer — same page, just smaller print */
.wellness-disclaimer{
  position:relative;z-index:10;
  background:transparent;
  padding:8px 16px 36px;font-size:12px;color:var(--text-3);
  text-align:center;line-height:1.6;
}
.wellness-disclaimer p{max-width:680px;margin:0 auto}
.wellness-disclaimer strong{color:var(--text-2);font-weight:600}

/* Top nav: legacy 4-link nav */
.nav-links a{font-weight:500}
.nav-links a.active{color:var(--teal);opacity:1}

/* Footer: small adjustments to align with legacy copy */
footer .brand{font-weight:600;letter-spacing:0.18em;text-transform:uppercase}
footer .made-by{margin-top:6px;font-size:11px;color:var(--text-3);letter-spacing:0.05em}
footer .legal-links a{margin:0 8px}

/* Reveal animation also used for restored sections */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.9s ease, transform 0.9s ease}
.reveal.in{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────────────────────────
   PHONE POLISH PASS — every section sized so the desktop story
   reads cleanly on a 390px viewport. Desktop layout is untouched.
   Each block here only narrows / shrinks; nothing is hidden.
   ─────────────────────────────────────────────────────────────── */

@media(max-width:560px){
  /* NAV — wrap two rows on small phones so Join Waitlist + 5 links
     fit without horizontal scrolling. .nav-left stays inline; the
     .nav-links group flows underneath. */
  .nav{padding:10px 14px;flex-wrap:wrap;row-gap:8px;column-gap:10px}
  .nav-left{flex:0 0 auto;gap:10px}
  .nav-cta{font-size:10px;padding:6px 12px;letter-spacing:0.12em}
  .nav-brand{font-size:11px;letter-spacing:0.15em}
  .nav-brand-mark{width:26px;height:26px;border-radius:7px}
  .nav-links{
    flex:1 1 100%;justify-content:flex-end;gap:10px;
    font-size:9.5px;letter-spacing:0.06em;
  }
  .nav-links a{padding:0;background:transparent;border-radius:0;border:none;opacity:.85}

  /* HERO — bring h1 down + give the paragraph viewport-relative width */
  .hero{height:auto;min-height:100vh;padding:90px 0 40px}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:1.0;margin-bottom:18px;padding:0 16px}
  .hero-sub{
    font-size:14px;line-height:1.55;max-width:100%;
    padding:0 22px;margin:0 auto 26px;
  }
  .hero-cta-row{flex-direction:column;align-items:center;gap:12px;width:100%;padding:0 22px}
  .hero-cta-row .btn{width:100%;max-width:320px;justify-content:center}

  /* STORE STACK — App Store badge + laurel under it. Squeeze both. */
  .store-stack{margin-top:22px;gap:12px}
  .store-stack .appstore-badge img{width:170px}
  .store-stack .store-laurel-wrap{width:84px;height:84px;border-radius:14px}
  .store-stack-cta{margin-top:14px}

  /* STATS STRIP — keep 2x2 grid but tighten so 4 numbers don't dominate */
  .stats-strip{margin:0 16px}
  .stat-cell{padding:18px 12px}
  .stat-num{font-size:24px}
  .stat-lbl{font-size:9px;letter-spacing:0.16em}

  /* SECTION SPACING — every .scene gets less vertical air on phone */
  .scene{padding:8vh 0;min-height:auto}
  .section-inner{padding:0 18px}
  .section-h{font-size:clamp(26px,7vw,38px) !important;line-height:1.1}
  .section-desc{font-size:14px;line-height:1.55}
  .center-head{padding:0 4px}

  /* AGENTS GRID — single column with tighter card padding + smaller text */
  .agents-3col{gap:14px;margin-top:24px}
  .agent-card{padding:18px 16px}
  .agent-icon{width:52px;height:52px;margin-bottom:14px}
  .agent-icon svg{width:22px;height:22px}
  .agent-name{font-size:16px}
  .agent-desc{font-size:13px;line-height:1.5}
  .agent-tag{font-size:9.5px;padding:4px 9px;letter-spacing:0.04em}

  /* AGENT POPOVER (mobile, in-card flat panel) — cap height so a
     popover near the screen edge doesn't extend past the viewport.
     Internal scroll if needed. */
  .agent-card.open .agent-pop{
    max-height:min(520px, calc(100vh - 160px));
    overflow-y:auto;
  }

  /* SPLIT FEATURE SECTIONS — phone-frame video is vertical 9:19.5,
     so width:200px → height ≈ 433px. min-height MUST be at least
     that big or the parent flex container clips the video and the
     IntersectionObserver never registers it as visible (which is why
     "some videos didn't show" before). */
  .feature-visual{min-height:460px;padding:10px 0}
  .feature-visual video,
  .feature-visual .video-placeholder{
    width:200px;border-radius:30px;border-width:2px;
  }

  /* CTA BANNER — much smaller h2 so two-line headline doesn't overflow */
  .cta-banner{padding:36px 22px;border-radius:20px;margin:0 14px}
  .cta-h{font-size:clamp(30px,8vw,46px);line-height:1.05;margin-bottom:22px}
  .cta-p{font-size:14px;line-height:1.55;margin-bottom:26px}

  /* FOOTER — stack vertically + center */
  footer{
    flex-direction:column;align-items:center;text-align:center;
    padding:28px 18px;gap:16px;
  }
  .footer-links,
  .legal-links{justify-content:center;gap:14px;flex-wrap:wrap}

  /* WAITLIST MODAL — bigger inputs (≥16px) so iOS doesn't auto-zoom on focus */
  .wl-card{padding:26px 18px 22px;border-radius:20px;max-height:calc(100vh - 24px)}
  .wl-card h3{font-size:18px}
  .wl-lede{font-size:13px;margin-bottom:18px}
  .wl-field input,
  .wl-field textarea{font-size:16px;padding:11px 12px}
  .wl-submit{font-size:14px;padding:12px 18px}
  .wl-mark.wl-mark-store svg{height:48px}
}

/* Ultra-narrow phones (iPhone SE 1st gen / 320px) — last-ditch squeeze */
@media(max-width:380px){
  .nav-links{font-size:9px;gap:8px}
  .hero h1{font-size:30px}
  .hero-sub{font-size:13px}
  .store-stack .appstore-badge img{width:150px}
  .store-stack .store-laurel-wrap{width:74px;height:74px}
  .agent-card{padding:16px 14px}
  .agent-name{font-size:15px}
  .feature-visual{min-height:400px}
  .feature-visual video,
  .feature-visual .video-placeholder{width:170px}
  .cta-h{font-size:26px}
}


/* ─── AI Discovery section (canvas animation) ─────────────────────── */
/* Stage itself has NO background — the dimming is done by a soft     */
/* radial pseudo-element with a feathered mask so the 3D eye behind   */
/* is dimmed in the center but not visibly "cut" by a hard rectangle. */
/* MG 2026-05-16.                                                     */
#ai-discovery .discovery-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 4vh auto 0;
  aspect-ratio: 16 / 11;
  background: transparent;
  isolation: isolate;
  overflow: visible;
}
/* Mobile: switch to a much taller canvas so the WEARABLES box + brain
   + INPUTS box + insight card all have vertical room. Layout shifts
   inside the canvas are handled in ai-discovery.js. MG 2026-05-16. */
@media (max-width: 720px) {
  #ai-discovery .discovery-stage {
    aspect-ratio: 4 / 5;
    max-width: 100%;
  }
}
#ai-discovery .discovery-stage::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: brightness(0.45) saturate(0.85);
  -webkit-backdrop-filter: brightness(0.45) saturate(0.85);
  background: radial-gradient(
    ellipse 60% 65% at 50% 55%,
    rgba(6, 9, 18, 0.40) 0%,
    rgba(6, 9, 18, 0.20) 45%,
    rgba(6, 9, 18, 0) 75%
  );
  mask-image: radial-gradient(
    ellipse 60% 65% at 50% 55%,
    black 35%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.4) 78%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 60% 65% at 50% 55%,
    black 35%,
    rgba(0, 0, 0, 0.85) 55%,
    rgba(0, 0, 0, 0.4) 78%,
    transparent 100%
  );
}
#ai-discovery .discovery-stage canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}



/* AI Discovery video player styling */
#ai-discovery .discovery-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
}