/* ==========================================================================
   IRA Smart Ring — design system
   Dark-mode-first. Tokens → primitives → components → sections.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  --bg:#050509;
  --bg-2:#0B0D14;
  --bg-3:#0F1119;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.035);

  --ink:#FFFFFF;
  --ink-2:#A7ACB8;
  --ink-3:#6E7484;

  --purple:#7C3AED;
  --blue:#2563EB;
  --cyan:#22D3EE;

  /* Brand gradient, sampled from the logo lockup and brightened for dark UI.
     Always starts on purple — that first stop is the brand signature. */
  --tint-1:#7C3AED;   /* deep purple — brand accent, the opening note */
  --tint-2:#9D5CF5;   /* violet                                      */
  --tint-3:#6D8FF0;   /* blue        — logo #505AA8                  */
  --tint-4:#3DD3F2;   /* cyan        — logo #45C8EF                  */

  /* Restrained type scale. The hero is the only oversized element; section
     headings stay close to it so the page reads as one system. */
  --t-hero:clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem);   /* 36 → 60 */
  --t-h2:clamp(1.625rem, 1.3rem + 1.35vw, 2.5rem);    /* 26 → 40 */
  --t-h3:clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17 → 20 */
  --t-body:clamp(.9375rem, .91rem + .13vw, 1rem);     /* 15 → 16 */

  --pad:clamp(1.25rem, 4vw, 3rem);
  --section-y:clamp(3.5rem, 5.5vw, 5.75rem);
  --gutter:clamp(2rem, 4.5vw, 4.5rem);
  --max:1280px;
  --max-wide:1480px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:24px;
}

/* ---------- Reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip contains oversized transforms without making the root a
   scroll container (which would break position:sticky). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Manrope,Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* Required — without it the presentational height attribute beats the fluid
   width and every image renders stretched. */
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:rgba(124,58,237,.4)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:.75rem 1.25rem;background:var(--purple);border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Layout ------------------------------------------------------ */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.shell--wide{max-width:var(--max-wide)}
.section{position:relative;padding-block:var(--section-y);isolation:isolate}
.section--tight{padding-block:clamp(2.75rem,4vw,4rem)}
.section--band{background:var(--bg-2);border-block:1px solid var(--line)}

/* ---------- Section patterns -------------------------------------------
   No grids. Two motifs, both taken from the brand itself:

   --pat-pulse   the dotted heartbeat that runs through the IRA logo mark,
                 tiled as a continuous trace.
   contour rings concentric circles echoing the ring product.

   Both are radially masked so they dissolve at the section edges.          */
:root{
  --pat-pulse:url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='90'>\
<g fill='white' fill-opacity='0.5'>\
<circle cx='6' cy='45' r='1.3'/><circle cx='20' cy='45' r='1.3'/><circle cx='34' cy='45' r='1.3'/>\
<circle cx='48' cy='45' r='1.3'/><circle cx='62' cy='45' r='1.5'/><circle cx='76' cy='45' r='1.5'/>\
<circle cx='90' cy='45' r='1.7'/>\
<circle cx='102' cy='38' r='1.6'/><circle cx='102' cy='45' r='1.8'/><circle cx='102' cy='52' r='1.6'/>\
<circle cx='114' cy='30' r='1.8'/><circle cx='114' cy='45' r='2'/><circle cx='114' cy='60' r='1.8'/>\
<circle cx='126' cy='17' r='2.1'/><circle cx='126' cy='31' r='1.9'/><circle cx='126' cy='45' r='2.4'/>\
<circle cx='126' cy='59' r='1.9'/><circle cx='126' cy='73' r='2.1'/>\
<circle cx='138' cy='30' r='1.8'/><circle cx='138' cy='45' r='2'/><circle cx='138' cy='60' r='1.8'/>\
<circle cx='150' cy='38' r='1.6'/><circle cx='150' cy='45' r='1.8'/><circle cx='150' cy='52' r='1.6'/>\
<circle cx='164' cy='45' r='1.7'/><circle cx='178' cy='45' r='1.5'/><circle cx='192' cy='45' r='1.5'/>\
<circle cx='206' cy='45' r='1.3'/><circle cx='220' cy='45' r='1.3'/><circle cx='234' cy='45' r='1.3'/>\
<circle cx='248' cy='45' r='1.3'/>\
</g></svg>");
}

/* Banded sections — the pulse trace, wide and slow */
.section--band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background-image:var(--pat-pulse);
  background-size:390px 135px;
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 50%,#000 12%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 62% at 50% 50%,#000 12%,transparent 100%);
}
.section--band::after{                   /* a single soft brand wash */
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:46rem;aspect-ratio:1;border-radius:50%;top:-14rem;right:-12rem;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 68%);filter:blur(40px);
}

/* Plain sections — oversized concentric rings, anchored off the left edge */
.section:not(.section--band):not(.hero)::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:-18rem;translate:0 -50%;width:74rem;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle,
    transparent 0 74px,rgba(148,163,255,.055) 74px 75px);
  -webkit-mask-image:radial-gradient(circle,#000 24%,transparent 66%);
  mask-image:radial-gradient(circle,#000 24%,transparent 66%);
}

/* Atmosphere: one fixed layer for the whole page */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(130px);opacity:.15}
.aurora::before{width:64vw;height:64vw;background:var(--purple);top:-20vw;right:-16vw}
.aurora::after{width:54vw;height:54vw;background:var(--blue);bottom:-22vw;left:-18vw}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%);
}

/* ---------- Type -------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:baseline;gap:.85rem;
  font-size:.75rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);
}
.eyebrow__num{
  color:var(--cyan);font-variant-numeric:tabular-nums;
  padding-right:.85rem;border-right:1px solid var(--line-strong);
}
.display{font-size:var(--t-hero);line-height:1.04;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.025em;font-weight:800;text-wrap:balance}
.h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.015em;font-weight:700}
.lede{color:var(--ink-2);max-width:52ch;font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem)}
.small{font-size:.8125rem;color:var(--ink-3);line-height:1.7}
.muted{color:var(--ink-2)}
/* Follows the logo's own "AI HEALTHCARE" ramp — purple → violet → blue → cyan —
   lifted in luminance so it stays legible on the near-black background. */
.tint{
  background:linear-gradient(100deg,
    var(--tint-1) 0%, var(--tint-2) 26%, var(--tint-3) 62%, var(--tint-4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-head{max-width:64ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .h2{margin-block:1.25rem 1.1rem}

/* ---------- Buttons ----------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.75rem;border-radius:999px;font-size:.9375rem;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--purple),var(--blue));color:#fff;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 10px 34px -14px rgba(124,58,237,.9);
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22),transparent 80%);
  transform:translateX(-110%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px -14px rgba(124,58,237,1)}
.btn:hover::after{transform:translateX(110%)}
.btn--ghost{background:var(--glass);border:1px solid var(--line-strong);box-shadow:none;backdrop-filter:blur(12px)}
.btn--ghost:hover{background:rgba(255,255,255,.07);box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:fixed;inset-inline:0;top:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.nav[data-scrolled="true"]{background:rgba(5,5,9,.66);backdrop-filter:blur(22px) saturate(160%);border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:clamp(4.75rem,7vw,6rem)}
.brand{display:inline-flex;align-items:center}
.brand img{height:clamp(2.5rem,4.2vw,3.5rem);width:auto}
.brand--footer img{height:clamp(3rem,5vw,4.25rem)}
.nav__links{display:flex;gap:2rem;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.nav__links a{position:relative;padding-block:.4rem;transition:color .3s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}
.nav__cta{padding:.7rem 1.4rem;font-size:.875rem}
.nav__buy-ring{width:1.05rem;height:1.05rem;flex:none;animation:tilt 7s var(--ease) infinite}
@keyframes tilt{0%,100%{transform:rotateY(0) rotate(0)}50%{transform:rotateY(180deg) rotate(-8deg)}}
.nav__toggle{display:none;width:2.9rem;height:2.9rem;place-items:center;border-radius:999px;border:1px solid var(--line-strong)}
.nav__toggle span{display:block;width:1.15rem;height:1.5px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s}
.nav__toggle span+span{margin-top:.32rem}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(.47rem) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-.47rem) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:99;display:grid;align-content:center;
  padding:6rem var(--pad) var(--pad);background:rgba(5,5,9,.95);backdrop-filter:blur(28px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer a{font-size:clamp(1.5rem,6vw,2rem);font-weight:800;letter-spacing:-.03em;
  padding-block:.65rem;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:2rem;width:100%}

/* ==========================================================================
   Media frame — the premium container for supplied artwork
   ========================================================================== */
.frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-3);
  box-shadow:0 40px 80px -40px rgba(0,0,0,1);
  transition:translate .7s var(--ease),box-shadow .7s var(--ease),border-color .7s var(--ease);
}
.frame::after{               /* inner hairline: gives the panel real depth */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* Gradient hairline that lights up on approach — a single, quiet accent */
.frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;
  background:linear-gradient(140deg,rgba(124,58,237,.75),rgba(34,211,238,.45) 45%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease);
}
.frame:hover{translate:0 -4px;border-color:transparent;box-shadow:0 50px 90px -40px rgba(0,0,0,1)}
.frame:hover::before{opacity:1}
.frame img{width:100%;transition:transform 1.1s var(--ease),scale 1.1s var(--ease)}
.frame:hover img{scale:1.035}
/* Halo behind a frame, so panels sit in light rather than on flat black */
.frame-wrap{position:relative;isolation:isolate}
.frame-wrap::before{
  content:"";position:absolute;z-index:-1;inset:8% 4%;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.3),rgba(37,99,235,.1) 50%,transparent 72%);
  filter:blur(60px);
}
/* Cutout artwork: no frame, the page background shows through */
.cutout{position:relative;isolation:isolate}
.cutout::before{
  content:"";position:absolute;z-index:-1;top:50%;left:50%;translate:-50% -50%;
  width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.34),rgba(37,99,235,.12) 48%,transparent 70%);
  filter:blur(55px);
}

/* ==========================================================================
   Duo — the alternating text / media split used by most sections
   ========================================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:center}
.duo--media-first .duo__media{order:-1}
.duo__body{max-width:34rem}
.duo__body .h2{margin-block:1.1rem 1.15rem}
/* Cap the artwork so a short text column and a square image stay in the same
   visual register — without this the media dwarfs the copy beside it.
   width:auto with both maxima keeps the aspect ratio intact while landing
   every panel, square or landscape, at a consistent height. */
.duo__media{display:grid;justify-items:center;align-content:center}
.duo__media>*{width:100%;max-width:44rem}
.duo__media .frame{width:fit-content;max-width:100%;margin-inline:auto}
.duo__media .frame img{width:auto;max-width:100%;max-height:38rem}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:9rem 6rem;overflow:hidden}
/* Hero backdrop: the logo's dotted pulse drifting across, plus concentric
   rings behind the product. No grid — the motif is the brand's own. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.2;
  background-image:var(--pat-pulse);
  background-size:340px 118px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.45) 45%,transparent 78%);
  mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.45) 45%,transparent 78%);
  animation:drift 46s linear infinite;
}
@keyframes drift{to{background-position:340px 0}}
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;right:14%;translate:50% -50%;width:min(52rem,80vw);aspect-ratio:1;border-radius:50%;
  background:
    repeating-radial-gradient(circle,transparent 0 58px,rgba(148,163,255,.07) 58px 59px);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%);
  mask-image:radial-gradient(circle,#000 30%,transparent 72%);
  animation:spin 120s linear infinite;
}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--gutter);align-items:center}
.hero .display{margin-block:1.75rem 1.85rem}
.hero__stage{width:100%;max-width:44rem;margin-inline:auto;animation:float 10s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(-1%)}50%{transform:translateY(1%)}}

.scroll-cue{position:absolute;left:50%;bottom:2rem;translate:-50% 0;display:grid;justify-items:center;gap:.65rem;
  color:var(--ink-3);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase}
.scroll-cue__rail{width:1px;height:3.25rem;background:linear-gradient(180deg,var(--line-strong),transparent);position:relative;overflow:hidden}
.scroll-cue__rail::after{content:"";position:absolute;inset-inline:0;height:1rem;
  background:linear-gradient(180deg,transparent,var(--cyan));animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}

/* Pillars under the hero copy — glass cards with a lit top edge */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:3rem}
.pillars li{
  position:relative;overflow:hidden;padding:1.4rem 1.25rem;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);
  transition:border-color .5s var(--ease),translate .5s var(--ease),background .5s var(--ease);
}
.pillars li::before{                     /* gradient hairline along the top */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tint-1),var(--tint-4),transparent);
  opacity:.55;transition:opacity .5s var(--ease);
}
.pillars li::after{                      /* soft corner bloom on hover */
  content:"";position:absolute;top:-40%;right:-30%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%);
  filter:blur(28px);opacity:0;transition:opacity .55s var(--ease);pointer-events:none;
}
.pillars li:hover{border-color:rgba(157,92,245,.5);translate:0 -3px;
  background:linear-gradient(165deg,rgba(255,255,255,.085),rgba(255,255,255,.02))}
.pillars li:hover::before{opacity:1}
.pillars li:hover::after{opacity:1}
.pillars__icon{
  display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:10px;margin-bottom:.9rem;
  border:1px solid rgba(157,92,245,.35);background:rgba(124,58,237,.14);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.pillars__icon svg{width:1.15rem;height:1.15rem;color:#C4B5FD}
.pillars li:hover .pillars__icon{border-color:rgba(61,211,242,.55);background:rgba(61,211,242,.14)}
.pillars b{display:block;font-size:1rem;letter-spacing:-.01em}
.pillars p{margin-top:.4rem;font-size:.875rem;color:var(--ink-2)}

/* ==========================================================================
   Stat band
   ========================================================================== */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
.stat-band>*{background:var(--bg-2);padding:clamp(1.75rem,3vw,2.75rem) clamp(1rem,2vw,1.75rem)}
.section--band .stat-band>*{background:var(--bg-2)}
.stat-band .value{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.stat-band .label{margin-top:.7rem;font-size:.75rem;color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase}

/* Key figures inside a duo body */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:2.25rem}
.figures li{background:var(--bg);padding:1.25rem 1rem 1.25rem 0}
.section--band .figures li{background:var(--bg-2)}
.figures b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.figures span{display:block;margin-top:.3rem;font-size:.6875rem;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}

/* ==========================================================================
   Steps / pillars grid
   ========================================================================== */
.steps{display:grid;gap:.85rem;margin-top:clamp(2.5rem,5vw,4rem)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step{
  position:relative;overflow:hidden;border-radius:18px;
  padding:clamp(1.75rem,2.8vw,2.35rem) clamp(1.25rem,2vw,1.75rem);
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(14px);
  transition:border-color .5s var(--ease),translate .5s var(--ease),background .5s var(--ease);
}
.section--band .step{background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.step::before{                          /* the lit top edge, drawn on hover */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tint-1),var(--tint-4),transparent);
  transform:scaleX(.35);opacity:.5;transform-origin:left;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.step::after{                           /* corner bloom */
  content:"";position:absolute;top:-35%;right:-25%;width:65%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.32),transparent 70%);
  filter:blur(30px);opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.step:hover{border-color:rgba(157,92,245,.45);translate:0 -4px;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.018))}
.step:hover::before{transform:scaleX(1);opacity:1}
.step:hover::after{opacity:1}
.step__no{
  font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(120deg,var(--tint-1),var(--tint-4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.5;transition:opacity .5s var(--ease);
}
.step:hover .step__no{opacity:1}
.step h3{margin-block:1rem .6rem}
.step p{color:var(--ink-2);font-size:.9375rem}
.step__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}
.step__tags li{font-size:.6875rem;font-weight:600;letter-spacing:.05em;padding:.34rem .7rem;
  border:1px solid var(--line);border-radius:999px;color:var(--ink-2);
  background:rgba(255,255,255,.03);transition:border-color .4s var(--ease),color .4s var(--ease)}
.step:hover .step__tags li{border-color:rgba(157,92,245,.35);color:var(--ink)}

/* ---------- Tick list --------------------------------------------------- */
.ticks{display:grid;gap:.95rem;margin-top:2.25rem}
.ticks li{display:flex;gap:.85rem;align-items:flex-start;color:var(--ink-2);font-size:.9375rem}
.ticks svg{flex:none;margin-top:.35rem;width:1rem;height:1rem;color:var(--cyan)}

/* ---------- Ordered chain ---------------------------------------------- */
.chain{display:grid;gap:.5rem;margin-top:2.25rem}
.chain li{display:flex;align-items:baseline;gap:1.1rem;padding:1.1rem 1.35rem;border-radius:14px;
  border:1px solid var(--line);background:var(--glass);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.chain li:hover{border-color:rgba(124,58,237,.55);transform:translateX(6px)}
.chain__idx{flex:none;width:1.75rem;font-size:.6875rem;letter-spacing:.16em;color:var(--ink-3);font-weight:800}
.chain b{font-size:.9375rem}
.chain p{margin-top:.2rem;font-size:.8125rem;color:var(--ink-2)}

/* ---------- Compact label grid ------------------------------------------ */
.tags{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:2.25rem}
.tags li{background:var(--bg);padding:.95rem 1rem .95rem 0;display:flex;align-items:center;gap:.75rem;font-size:.9375rem}
.section--band .tags li{background:var(--bg-2)}
.tags i{width:.35rem;height:.35rem;border-radius:50%;flex:none;background:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.9)}

/* ==========================================================================
   Constellation — ring at the centre, labelled nodes on a circle
   Used by Advanced Biometrics (12 nodes) and CareShield AI (6 nodes).
   Node placement is pure CSS: rotate out to the radius, then counter-rotate
   the content so labels stay upright.
   ========================================================================== */
.orb{position:relative;width:100%;aspect-ratio:1;margin-inline:auto}
.orb__core{position:absolute;inset:26%;display:grid;place-items:center}
.orb__core img{border-radius:50%}

/* Concentric guides */
.orb__ring{position:absolute;border-radius:50%;pointer-events:none}
.orb__ring--path{inset:22%;border:1px solid rgba(255,255,255,.10)}
.orb__ring--dash{inset:31%;border:1px dashed rgba(148,163,255,.22);animation:spin 90s linear infinite}
.orb__ring--glow{inset:34%;border:1px solid rgba(124,58,237,.28);
  box-shadow:0 0 60px rgba(124,58,237,.18) inset;animation:spin 70s linear infinite reverse}

/* A single lit dot travelling the guide circle */
.orb__tracer{position:absolute;inset:22%;border-radius:50%;pointer-events:none;
  animation:spin 14s linear infinite}
.orb__tracer::before{content:"";position:absolute;top:-3px;left:50%;translate:-50% 0;
  width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px 3px rgba(34,211,238,.85)}

/* Each node is a full-size layer rotated about the orb's centre, with its
   content pinned to the top edge. Percentages then resolve against the ORB,
   not against the node's own (small) box — which is why a percentage radius
   inside translate() does not work here. */
.orb__node{position:absolute;inset:0;transform:rotate(var(--a));transform-origin:50% 50%}
.orb__node>span{
  position:absolute;top:var(--r,11%);left:50%;
  transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));
  display:flex;align-items:center;gap:.7rem;width:max-content;
}
.orb__node--flip>span{flex-direction:row-reverse}
.orb__node--flip .orb__text{text-align:right}

.orb__icon{
  flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  border:1px solid rgba(148,163,255,.45);background:rgba(9,10,24,.9);
  box-shadow:0 0 22px rgba(124,58,237,.35),inset 0 0 12px rgba(124,58,237,.2);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),scale .45s var(--ease);
}
.orb__icon svg{width:1.35rem;height:1.35rem;color:#C4B5FD}
.orb__text{
  white-space:nowrap;padding:.5rem .85rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);background:rgba(9,10,24,.72);backdrop-filter:blur(8px);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.orb__text b{display:block;font-size:.875rem;font-weight:700;line-height:1.25}
.orb__text span{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.orb__node:hover .orb__icon{border-color:var(--cyan);scale:1.1;
  box-shadow:0 0 30px rgba(34,211,238,.6),inset 0 0 14px rgba(34,211,238,.3)}
.orb__node:hover .orb__text{border-color:rgba(34,211,238,.45);background:rgba(13,16,32,.95)}

/* Wide variant: title + description, fewer nodes (CareShield AI flow) */
.orb--flow .orb__node{--r:8%}
.orb--flow .orb__text{white-space:normal;max-width:11rem;border:0;background:none;padding:0;backdrop-filter:none}
.orb--flow .orb__text b{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.3rem}
.orb--flow .orb__text p{font-size:.75rem;line-height:1.5;color:var(--ink-2)}
.orb--flow .orb__node:hover .orb__text{background:none;border:0}

/* Nodes arrive in sequence once the constellation scrolls in. The scale sits
   on the inner span so it does not fight the layer's placement rotation. */
.orb__node>span{opacity:0;scale:.8;
  transition:opacity .7s var(--ease),scale .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.is-visible .orb__node>span{opacity:1;scale:1}

/* ==========================================================================
   Biometrics orbit (legacy chip list fallback)
   ========================================================================== */
.orbit{position:relative;width:min(100%,40rem);aspect-ratio:1;margin:clamp(2.5rem,5vw,4rem) auto 0}
.orbit__rings{position:absolute;inset:0}
.orbit__rings i{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;animation:spin 60s linear infinite}
.orbit__rings i:nth-child(2){inset:14%;border-style:dashed;border-color:rgba(255,255,255,.06);animation-duration:45s;animation-direction:reverse}
.orbit__rings i:nth-child(3){inset:28%;border-color:rgba(124,58,237,.24);animation-duration:80s}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit__core{position:absolute;inset:30%}
.orbit__node{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1))}
.orbit__chip{display:grid;gap:.15rem;justify-items:center;text-align:center;white-space:nowrap;
  padding:.6rem 1rem;border-radius:14px;border:1px solid var(--line);
  background:rgba(11,13,20,.85);backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.orbit__chip:hover{border-color:rgba(34,211,238,.55);transform:scale(1.06)}
.orbit__chip b{font-size:.8125rem;font-weight:700}
.orbit__chip span{font-size:.6875rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

.biometrics{display:none;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:clamp(2.5rem,5vw,4rem)}
.biometrics li{background:var(--bg-2);padding:1.35rem 1.25rem;display:flex;align-items:center;gap:.85rem}
.biometrics i{width:.4rem;height:.4rem;border-radius:50%;flex:none;background:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.85)}
.biometrics b{font-size:.9375rem;font-weight:600}

/* ==========================================================================
   AI flow
   ========================================================================== */
/* Linear fallback for the CareShield flow constellation */
.flow{display:none;gap:.55rem}
.flow__node{position:relative;display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.4rem;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  font-weight:700;letter-spacing:.06em;font-size:.8125rem;text-transform:uppercase;overflow:hidden}
.flow__node::before{content:"";position:absolute;inset-block:0;left:0;width:35%;
  background:linear-gradient(100deg,transparent,rgba(34,211,238,.16),transparent);
  transform:translateX(-120%);animation:particle 3.4s linear infinite;animation-delay:var(--d,0s)}
@keyframes particle{0%{transform:translateX(-120%)}60%,100%{transform:translateX(400%)}}
.flow__node i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.flow__node--accent{border-color:rgba(124,58,237,.5);background:linear-gradient(100deg,rgba(124,58,237,.2),rgba(37,99,235,.06))}
.flow__link{justify-self:center;width:1px;height:1.4rem;background:linear-gradient(180deg,var(--line-strong),transparent)}

/* ==========================================================================
   Panels (HRV plot, ECG trace)
   ========================================================================== */
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));backdrop-filter:blur(14px)}
.tilt{transition:transform .5s var(--ease)}
.tilt:hover{transform:perspective(900px) rotateX(calc(var(--my,0)*-3deg)) rotateY(calc(var(--mx,0)*3deg))}

.lorenz{width:100%;height:auto}
.lorenz circle{opacity:0;animation:plot .5s var(--ease) forwards}
@keyframes plot{to{opacity:1}}

.ecg{width:100%;height:auto;overflow:visible}
.ecg__trace{stroke-dasharray:2600;stroke-dashoffset:2600;animation:trace 5s linear infinite}
@keyframes trace{0%{stroke-dashoffset:2600}70%,100%{stroke-dashoffset:0}}

.charge-bar{height:3px;width:100%;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:2rem}
.charge-bar i{display:block;height:100%;width:35%;border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));animation:charge 4.5s var(--ease) infinite}
@keyframes charge{0%{width:8%}70%,100%{width:100%}}

/* ==========================================================================
   Specifications
   ========================================================================== */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem)}
.spec-group{background:var(--bg-2);padding:clamp(1.75rem,3vw,2.25rem)}
.section--band .spec-group{background:var(--bg-3)}
.spec-group h3{font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);font-weight:800}
.spec-group dl{margin-top:1.5rem;display:grid;gap:.9rem}
.spec-group div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.spec-group div:last-child{border-bottom:0;padding-bottom:0}
.spec-group dt{font-size:.8125rem;color:var(--ink-3)}
.spec-group dd{font-size:.875rem;font-weight:600;text-align:right}

/* ==========================================================================
   Reasons
   ========================================================================== */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
.reason{background:var(--bg);padding:clamp(1.75rem,3vw,2.5rem)}
.section--band .reason{background:var(--bg-2)}
.reason svg{width:1.4rem;height:1.4rem;color:var(--cyan);margin-bottom:1.25rem}
.reason b{display:block;font-size:1rem;margin-bottom:.5rem}
.reason p{font-size:.9375rem;color:var(--ink-2)}

/* ==========================================================================
   Ecosystem
   ========================================================================== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);text-align:center}
.trio b{display:block;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.035em}
.trio span{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.final{position:relative;text-align:center;overflow:hidden;padding-block:clamp(5rem,10vw,9rem)}
.final__stage{width:min(100%,40rem);margin:0 auto clamp(2rem,4vw,3rem);animation:float 10s var(--ease) infinite}
.final .btn-row{justify-content:center}

/* Support address — gradient, sized between body and heading */
.mail-line{margin-top:1.5rem;font-size:clamp(1rem,.95rem + .35vw,1.25rem);color:var(--ink-2)}
.mail-link{
  position:relative;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(100deg,var(--tint-1) 0%,var(--tint-2) 30%,var(--tint-3) 65%,var(--tint-4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mail-link::after{                 /* underline that draws in on hover */
  content:"";position:absolute;left:0;right:0;bottom:-.15em;height:1px;
  background:linear-gradient(90deg,var(--tint-1),var(--tint-4));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.mail-link:hover::after{transform:scaleX(1)}

/* App store badges */
.stores{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.5rem}
.store{
  display:inline-flex;align-items:center;gap:.8rem;padding:.7rem 1.4rem .75rem;
  border-radius:14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);text-align:left;
  transition:border-color .4s var(--ease),background .4s var(--ease),translate .4s var(--ease);
}
.store:hover{border-color:rgba(34,211,238,.55);background:rgba(255,255,255,.07);translate:0 -2px}
.store__logo{width:1.65rem;height:1.65rem;flex:none;color:var(--ink)}
.store__text small{display:block;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.store__text b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
@media (max-width:600px){
  .stores{flex-direction:column;align-items:center}
  .store{justify-content:center;width:min(100%,17rem)}
}
.final .lede{margin-inline:auto;text-align:center}

.footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(2,1fr);gap:var(--gutter)}
.footer__col h4{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);font-weight:800;margin-bottom:1.25rem}
.footer__col li+li{margin-top:.75rem}
.footer__col a{font-size:.9375rem;color:var(--ink-2);transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--ink)}
.social{display:flex;gap:.65rem;margin-top:1.75rem}
.social a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--ink-2);transition:color .3s var(--ease),border-color .3s var(--ease)}
.social a:hover{color:var(--ink);border-color:var(--cyan)}
.social svg{width:1.05rem;height:1.05rem}
.footer__base{margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line)}
.disclaimer{max-width:78ch;font-size:.75rem;line-height:1.75;color:var(--ink-3);margin-top:1.25rem}

/* ==========================================================================
   Legal / FAQ pages
   ========================================================================== */
.doc{padding-block:clamp(7rem,12vw,10rem) clamp(4rem,7vw,6rem)}
.doc__head{max-width:56rem;margin-inline:auto}
.doc__head .h2{margin-block:1.1rem .9rem}
.doc__meta{font-size:.8125rem;color:var(--ink-3)}
.doc__body{max-width:56rem;margin:clamp(2.5rem,5vw,4rem) auto 0}
.doc__body section+section{margin-top:clamp(2.25rem,4vw,3.25rem)}
.doc__body h2{
  font-size:1.125rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.9rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.doc__body h2 span{color:var(--cyan);font-size:.75rem;letter-spacing:.16em;margin-right:.7rem}
.doc__body h3{font-size:.9375rem;font-weight:700;margin:1.5rem 0 .5rem}
.doc__body p{color:var(--ink-2);margin-bottom:.9rem}
.doc__body p:last-child{margin-bottom:0}
.doc__body a{color:#9FC6FF;text-decoration:underline;text-underline-offset:3px}
.doc__body a:hover{color:var(--cyan)}
.doc__body ul{display:grid;gap:.6rem;margin:.5rem 0 1rem}
.doc__body ul li{position:relative;padding-left:1.15rem;color:var(--ink-2);font-size:.9375rem}
.doc__body ul li::before{content:"";position:absolute;left:0;top:.62em;width:.3rem;height:.3rem;
  border-radius:50%;background:var(--tint-2)}
.doc__body strong{color:var(--ink)}
.callout{
  margin:1.25rem 0;padding:1.15rem 1.35rem;border-radius:14px;
  border:1px solid rgba(157,92,245,.35);background:rgba(124,58,237,.1);
}
.callout p{color:var(--ink-2);margin:0}
.callout strong{color:#C4B5FD}

/* Table of contents */
.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.toc a{font-size:.8125rem;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);transition:border-color .35s var(--ease),color .35s var(--ease)}
.toc a:hover{border-color:rgba(157,92,245,.55);color:var(--ink)}

/* FAQ accordion */
.faq{display:grid;gap:.6rem;max-width:56rem;margin:clamp(2.5rem,5vw,4rem) auto 0}
.faq details{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  transition:border-color .4s var(--ease)}
.faq details[open]{border-color:rgba(157,92,245,.4)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  padding:1.1rem 1.35rem;font-weight:700;font-size:.9375rem;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.6rem;height:.6rem;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  rotate:45deg;transition:rotate .35s var(--ease),border-color .35s var(--ease)}
.faq details[open] summary::after{rotate:225deg;border-color:var(--cyan)}
.faq summary:hover{color:#C4B5FD}
.faq .faq__a{padding:0 1.35rem 1.25rem}
.faq .faq__a p{color:var(--ink-2);font-size:.9375rem;margin-bottom:.75rem}
.faq .faq__a p:last-child{margin-bottom:0}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}

/* Media unmasks upward and settles out of a slight over-scale */
.reveal-media .frame{clip-path:inset(0 0 100% 0);transform:scale(1.05)}
.reveal-media .frame img{transform:scale(1.08)}
.reveal-media.is-visible .frame{
  clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path 1.15s var(--ease),transform 1.3s var(--ease);
  transition-delay:var(--delay,0ms);
}
.reveal-media.is-visible .frame img{transform:none;transition:transform 1.4s var(--ease);transition-delay:var(--delay,0ms)}
/* Escape hatch set by the script if a transition never ran — artwork must
   never be left clipped out of view. */
.reveal-media.no-anim .frame{clip-path:none;transform:none;transition:none}
.reveal-media.no-anim .frame img{transform:none;transition:none}

/* Headings lift in slightly behind the block they sit in.
   Deliberately NOT a clip-path wipe: a stalled transition would leave the most
   important text on the page hidden. translate degrades to merely un-animated. */
.reveal .h2,.reveal .display{
  transform:translateY(.28em);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--delay,0ms) + 90ms);
}
.reveal.is-visible .h2,.reveal.is-visible .display{transform:none}

/* The eyebrow rule draws itself in */
.eyebrow__num{transition:border-color .8s var(--ease)}
.reveal .eyebrow::after{
  content:"";display:block;width:0;height:1px;margin-left:.85rem;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transition:width 1s var(--ease);transition-delay:calc(var(--delay,0ms) + 250ms);
}
.reveal.is-visible .eyebrow::after{width:3.5rem}

/* Scroll-linked parallax: JS writes --shift, CSS moves the panel */
.parallax{translate:0 var(--shift,0px)}

/* Stat and figure rows count in from a hairline */
.stat-band>*,.figures li{position:relative;overflow:hidden}
.stat-band>*::before,.figures li::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.is-visible .stat-band>*::before,.is-visible .figures li::before{transform:scaleX(1)}
.stat-band>*:nth-child(2)::before,.figures li:nth-child(2)::before{transition-delay:.1s}
.stat-band>*:nth-child(3)::before{transition-delay:.2s}
.stat-band>*:nth-child(4)::before{transition-delay:.3s}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .reasons{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .steps--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:grid}
  .hero{min-height:auto;padding-block:8rem 4rem}
  .hero__grid,.duo,.duo--wide-media,.duo--wide-media.duo--media-first{grid-template-columns:1fr}
  .duo--media-first .duo__media{order:0}
  .hero__stage{order:2;max-width:30rem}
  .steps--3{grid-template-columns:1fr}
  .orbit,.orb{display:none}
  .biometrics,.flow{display:grid}
  .scroll-cue{display:none}
  .footer__top{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr}
  .pillars li{padding-inline:1.25rem}
}
@media (max-width:600px){
  .stat-band,.reasons,.figures,.trio,.steps--4,.tags,.biometrics{grid-template-columns:1fr}
  .figures li,.pillars li,.tags li{padding-inline:1.25rem}
  .btn-row .btn{width:100%}
  .footer__top{grid-template-columns:1fr}
  .flow__node{font-size:.75rem;padding:.9rem 1.1rem}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .reveal .h2,.reveal .display{transform:none}
  .reveal-media .frame{clip-path:none;transform:none}
  .reveal-media .frame img{transform:none}
  .parallax{translate:none}
  .lorenz circle{opacity:1}
  .ecg__trace{stroke-dashoffset:0}
}