/* ==========================================================================
   Cardiotrack design system — "engineered / precision"
   Locked brand: blue #1D83BD · charcoal #22272B · paper #FCFDFE
   Type: Fraunces (italic accents) + Manrope
   ========================================================================== */

:root{
  /* --- brand (locked) --- */
  --blue:#1D83BD;
  --blue-lift:#4FA8DC;
  --blue-deep:#12608E;
  --charcoal:#22272B;
  --paper:#FCFDFE;

  /* --- engineered dark scale, derived from charcoal --- */
  --void:#0B0E11;
  --bg:#0E1216;
  --surface:#141A20;
  --surface-2:#1A2128;
  --raised:#20282F;

  /* --- lines and text --- */
  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.14);
  --ink:#E9EFF5;
  --ink-2:#A8B6C2;
  --ink-3:#8A9AA7;            /* lifted from #6F7F8C to clear AA on the ground */

  /* --- five accent data palette --- */
  --a-blue:#1D83BD;
  --a-amber:#E8A23D;
  --a-green:#3DC492;
  --a-violet:#7C63E8;
  --a-coral:#E05252;

  /* --- depth --- */
  --glow:rgba(29,131,189,.38);
  --glow-soft:rgba(29,131,189,.13);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 20px 46px -20px rgba(0,0,0,.75);

  --r:10px; --r-lg:16px; --r-xl:22px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal:.75s cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* --------------------------------------------------------- graph paper bed */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);
  opacity:.6;
}
main,header,footer{position:relative;z-index:1}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:112px 0;position:relative}
@media(max-width:820px){section{padding:76px 0}}

/* surface variants — differentiate without light/dark flipping */
.s-deep{background:var(--void)}
.s-raise{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.s-line{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.s-glow{position:relative;overflow:hidden}
.s-glow::before{
  content:"";position:absolute;left:50%;top:-30%;width:min(1100px,120%);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow-soft) 0%,transparent 62%);
}

/* ------------------------------------------------------------- typography */
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{
  font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.038em;line-height:1.02;
}
h2{font-size:clamp(1.95rem,3.5vw,3rem)}
h3{font-size:1.16rem;letter-spacing:-.015em;line-height:1.3}
em{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  letter-spacing:-.01em;
  background:linear-gradient(96deg,var(--blue-lift),#9AD2F2 55%,var(--blue-lift));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
p{color:var(--ink-2)}
.lead{font-size:1.12rem;line-height:1.66;color:var(--ink-2);max-width:60ch}
.sub{color:var(--ink-2);font-size:1rem;max-width:56ch}

.label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-lift);margin-bottom:20px;
}
.label::before{content:"";width:22px;height:1px;background:var(--blue);opacity:.85}

.headrow{
  display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:end;
  margin-bottom:56px;
}
.headrow .sub{padding-bottom:6px}
@media(max-width:880px){.headrow{grid-template-columns:1fr;gap:20px;margin-bottom:40px}}
.center{text-align:center;max-width:720px;margin:0 auto 56px}
.center .label{justify-content:center}
.center .sub{margin:16px auto 0}

/* tabular numerals everywhere a figure appears */
b,.num,.metric b,.map-stats b,.chip b{font-variant-numeric:tabular-nums lining-nums}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);font-size:.94rem;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .35s var(--ease),
             background .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue-lift),var(--blue));
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -8px var(--glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 44px -10px var(--glow)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--hair-2);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(79,168,220,.5);background:rgba(29,131,189,.09)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* --------------------------------------------------------- scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--reveal),transform var(--reveal)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* =============================================================== HEADER === */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(14,18,22,.72);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
header.stuck{border-bottom-color:var(--hair);background:rgba(11,14,17,.92);box-shadow:0 1px 0 var(--hair),0 6px 24px -14px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;gap:34px;height:70px}
.brand{display:flex;align-items:center;flex:none}
/* the logo art carries the wordmark, so it is the only brand mark.
   brightness(0) flattens the dark and blue to black, invert(1) lifts it to white. */
.brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.96;
  transition:opacity .35s var(--ease)}
.brand:hover img{opacity:1}
.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-links a{
  font-size:.9rem;font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--blue-lift);
  transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav .btn{padding:10px 20px;font-size:.87rem}

/* the current page, and a product page marks its parent dropdown */
.nav-links a[aria-current="page"],.nav-drop.here .nav-drop-btn{color:var(--ink)}
.nav-links a[aria-current="page"]::after{width:100%}

/* "Book a checkup" is the one consumer door among business doors, so it sits
   quieter than the audience links rather than competing with them */
.nav-quiet{font-weight:500;color:var(--ink-3)}

/* group labels are a mobile device only, the desktop row reads by position */
.nav-group{display:none}

/* ---------------------------------------------------- the products menu */
.nav-drop{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:color .3s var(--ease);
}
.nav-drop-btn:hover{color:var(--ink)}
.nav-caret{width:10px;height:6px;transition:transform .3s var(--ease)}
.nav-drop.open .nav-caret{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:210px;padding:8px;border-radius:14px;
  background:var(--surface);border:1px solid var(--hair-2);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:60;
}
.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-links .nav-menu a{
  padding:10px 12px;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-links .nav-menu a::after{display:none}
.nav-links .nav-menu a:hover,.nav-links .nav-menu a:focus-visible{background:rgba(29,131,189,.14);color:var(--ink)}
/* the menu bridges the gap to the trigger so the pointer can cross it */
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--hair-2);
  border-radius:8px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3.5px 0}

@media(max-width:940px){
  .nav-links{display:none}
  .nav-links.open{
    display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--void);border-bottom:1px solid var(--hair);padding:8px 28px 22px;
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--hair);width:100%}
  .burger{display:block}

  /* on mobile the dropdown flattens into a plain labelled group */
  .nav-links.open .nav-group{
    display:block;margin:16px 0 2px;font-size:.68rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
  }
  .nav-links.open .nav-group:first-child{margin-top:4px}
  .nav-links.open .nav-drop{width:100%}
  .nav-links.open .nav-drop-btn{display:none}
  .nav-links.open .nav-menu{
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;
    padding:0;border:0;background:none;box-shadow:none;gap:0;
  }
  .nav-links.open .nav-menu a{padding:13px 0;border-bottom:1px solid var(--hair);border-radius:0}
  .nav-links.open .nav-menu a:hover{background:none}
  .nav-links.open .nav-drop::after{display:none}
  .nav-links.open .btn{margin-top:18px;text-align:center;justify-content:center}
}

/* ================================================================= HERO === */
.hero{
  position:relative;display:flex;align-items:center;
  padding:96px 0 104px;overflow:hidden;background:var(--void);
}
.hero .layer{position:absolute;inset:0;pointer-events:none}
.layer-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 42%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 42%,#000 0%,transparent 72%);
}
.layer-glow{
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,rgba(29,131,189,.15) 0%,transparent 62%),
    radial-gradient(ellipse 45% 45% at 88% 78%,rgba(29,131,189,.05) 0%,transparent 64%);
}
.layer-vig{background:radial-gradient(ellipse 100% 70% at 50% 40%,transparent 40%,var(--void) 100%)}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero h1{margin-bottom:24px;max-width:15ch}
.hero .lead{max-width:48ch;font-size:1.08rem}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:42px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid var(--hair);
  font-size:.85rem;color:var(--ink-2);
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.chip b{color:var(--ink);font-weight:800}
.chip:hover{border-color:rgba(79,168,220,.45);background:rgba(29,131,189,.09)}

/* ---------------------------------------- hero + the ecosystem schematic */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px;align-items:center;
}
.hero-copy{max-width:62ch;margin-bottom:0}
@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{margin-bottom:0}
}

/* ------------------------------------------- the smart health report card */
/* The thing a person actually walks away with, so it leads the page rather
   than sitting three screens down. Values are illustrative, not a real case. */
.hero-report{margin:0}
.hr-card{
  position:relative;border-radius:20px;padding:24px 24px 20px;
  background:linear-gradient(168deg,var(--surface-2) 0%,var(--surface) 62%);
  border:1px solid var(--hair-2);
  box-shadow:var(--shadow-md),0 0 0 1px rgba(29,131,189,.06),0 0 70px -30px var(--glow);
}
.hr-card::before{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 82% 0%,rgba(79,168,220,.14),transparent 62%);
}
.hr-card > *{position:relative}

.hr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hr-eyebrow{
  display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.hr-title{display:block;margin-top:7px;font-size:1.06rem;font-weight:800;
  letter-spacing:-.015em;color:var(--ink)}
.hr-badge{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 12px;border-radius:100px;font-size:.72rem;font-weight:700;
  color:var(--a-green);background:rgba(61,196,146,.10);
  border:1px solid rgba(61,196,146,.28);
}
.hr-badge i{width:6px;height:6px;border-radius:50%;background:var(--a-green);
  animation:hrpulse 2.4s ease-in-out infinite}
@keyframes hrpulse{0%,100%{opacity:.35}50%{opacity:1}}

.hr-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px;
  padding-bottom:16px;border-bottom:1px solid var(--hair);
}
.hr-meta span{
  font-size:.72rem;color:var(--ink-3);padding:4px 10px;border-radius:6px;
  background:rgba(255,255,255,.035);border:1px solid var(--hair);
}

.hr-score{display:grid;grid-template-columns:118px minmax(0,1fr);gap:20px;align-items:center}
.hr-ring{position:relative;width:118px;height:118px}
.hr-ring svg{width:100%;height:100%;display:block}
.hr-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:9}
.hr-fill{
  fill:none;stroke:var(--blue-lift);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:345.6;stroke-dashoffset:62.2;
  animation:hrring 1.5s cubic-bezier(.22,1,.36,1) .25s both;
}
@keyframes hrring{from{stroke-dashoffset:345.6}}
.hr-ringtext{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;
}
.hr-ringtext b{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.hr-ringtext span{font-size:.66rem;color:var(--ink-3);letter-spacing:.04em}

.hr-organs{display:flex;flex-direction:column;gap:11px;min-width:0}
.hr-organ{display:grid;grid-template-columns:64px minmax(0,1fr) 26px;gap:10px;align-items:center}
.hr-organ span{font-size:.78rem;color:var(--ink-2)}
.hr-organ em{font-style:normal;font-size:.78rem;font-weight:800;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}
.hr-bar{display:block;height:5px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.hr-bar b{
  display:block;height:100%;width:var(--w);border-radius:100px;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  animation:hrbar 1.1s cubic-bezier(.22,1,.36,1) .35s both;
}
@keyframes hrbar{from{width:0}}

.hr-ecg{margin:18px 0 16px;padding-top:16px;border-top:1px solid var(--hair)}
.hr-ecg svg{width:100%;height:52px;display:block;margin-top:9px}
.hr-trace{
  fill:none;stroke:var(--a-green);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:0;
  animation:hrtrace 3.6s linear .5s infinite;
}
@keyframes hrtrace{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}

.hr-flags{display:flex;flex-wrap:wrap;gap:8px}
.hr-flag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;
  font-size:.75rem;background:rgba(255,255,255,.035);border:1px solid var(--hair);
}
.hr-flag span{color:var(--ink-3)}
.hr-flag b{font-weight:800}
.hr-flag.warn b{color:var(--a-amber)}
.hr-flag.ok b{color:var(--a-green)}

.hr-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--hair);
}
.hr-foot span{font-size:.75rem;color:var(--ink-3);line-height:1.4}
.hr-foot b{flex:none;font-size:.82rem;font-weight:800;color:var(--blue-lift)}

@media(max-width:520px){
  .hr-score{grid-template-columns:1fr;justify-items:center;gap:18px}
  .hr-organs{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hr-fill,.hr-bar b,.hr-trace,.hr-badge i{animation:none}
  .hr-trace{stroke-dasharray:none}
}



.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================ CARDS + THE HOVER LANGUAGE === */
/* Never a colour flip. Card rises, faint blue wash, border and icon chip take
   brand blue, heading tints. ~.45s ease. (Avin iterated on this twice.)      */
.card{
  position:relative;z-index:1;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:30px 28px;
  transition:transform .2s var(--ease),
             border-color .45s var(--ease),
             background .45s var(--ease),
             box-shadow .45s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(29,131,189,.15),rgba(29,131,189,.02));
  border-color:rgba(79,168,220,.42);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7),0 0 0 1px rgba(79,168,220,.10);
}
.card h3{margin-bottom:9px;transition:color .45s var(--ease)}
.card:hover h3{color:var(--blue-lift)}
.card p{font-size:.92rem;line-height:1.6}

.ico{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.045);border:1px solid var(--hair);margin-bottom:20px;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.card:hover .ico{background:rgba(29,131,189,.17);border-color:rgba(79,168,220,.42);color:var(--blue-lift)}

/* accents cycle across every card grid */
.grid>*:nth-child(5n+1) .ico{color:var(--a-blue)}
.grid>*:nth-child(5n+2) .ico{color:var(--a-amber)}
.grid>*:nth-child(5n+3) .ico{color:var(--a-green)}
.grid>*:nth-child(5n+4) .ico{color:var(--a-violet)}
.grid>*:nth-child(5n+5) .ico{color:var(--a-coral)}

.go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.85rem;
  font-weight:700;color:var(--ink-3);transition:color .45s var(--ease),gap .3s var(--ease)}
.card:hover .go{color:var(--blue-lift);gap:11px}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.g5,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.g3{grid-template-columns:1fr}}
@media(max-width:640px){.g5,.g4,.g2{grid-template-columns:1fr}}

/* ======================================================= STAT TILE BAND === */
.metrics{position:relative;padding:76px 0;background:var(--void);overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.mrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.metric{text-align:center;padding:0 14px;border-left:1px solid var(--hair)}
.metric:first-child{border-left:0}
.metric b{display:block;font-size:clamp(2.1rem,4.4vw,3.15rem);font-weight:800;
  letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff,#9FC6DE);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.metric span{display:block;margin-top:11px;font-size:.79rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.note{text-align:center;margin-top:34px;font-size:.83rem;color:var(--ink-3)}
@media(max-width:760px){
  .mrow{grid-template-columns:1fr 1fr;row-gap:38px}
  .metric:nth-child(3){border-left:0}
}

/* ================================================================= MAPS === */
.maps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1000px){.maps{grid-template-columns:1fr}}
.map-panel{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--void));
  border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.map-panel:hover{border-color:rgba(79,168,220,.3);box-shadow:0 24px 60px -26px rgba(0,0,0,.8)}
.map-hd{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--hair);font-size:.82rem;font-weight:700}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.6rem;letter-spacing:.13em;
  color:var(--ink-3);font-weight:700;text-align:right}
.map-holder{position:relative;padding:14px;flex:1;display:flex;
  flex-direction:column;justify-content:center}
.map-holder svg{width:100%;height:auto;display:block;overflow:visible;max-height:100%}
/* India */
.soiland{fill:rgba(255,255,255,.05);stroke:rgba(79,168,220,.5);stroke-width:1}
.st{fill:rgba(255,255,255,.04);stroke:rgba(127,195,237,.2);stroke-width:.5;
  transition:fill .3s var(--ease)}
.st:hover{fill:rgba(29,131,189,.18)}
.cbub{fill:rgba(79,168,220,.3);stroke:var(--blue-lift);stroke-width:.9;cursor:pointer;
  transform-origin:center;transition:fill .3s var(--ease),stroke-width .3s var(--ease);
  animation:bub 4.2s ease-in-out infinite}
.cbub:hover{fill:rgba(79,168,220,.6);stroke-width:1.8}
@keyframes bub{0%,100%{opacity:.68}50%{opacity:1}}
/* World */
.wc{fill:rgba(79,168,220,.075);stroke:rgba(127,195,237,.28);stroke-width:.55;
  transition:fill .3s var(--ease)}
.wc.lit{fill:rgba(29,131,189,.55);stroke:rgba(154,209,242,.85);stroke-width:.75;cursor:pointer}
.wc.lit:hover{fill:var(--blue-lift)}
.map-tip{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-140%);
  background:var(--raised);border:1px solid var(--hair-2);border-radius:9px;
  padding:8px 12px;font-size:.8rem;font-weight:700;white-space:nowrap;z-index:5;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.85);transition:opacity .18s
}
.map-tip.on{opacity:1}
.map-tip small{display:block;font-weight:600;color:var(--blue-lift);font-size:.73rem;margin-top:2px}
.map-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding:16px 18px;border-top:1px solid var(--hair)}
.map-stats.four{grid-template-columns:repeat(4,1fr)}
.map-stats>div{text-align:center}
.map-stats b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.map-stats span{display:block;font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px}
@media(max-width:560px){.map-stats,.map-stats.four{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ========================================================= HOW IT WORKS === */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.pipe::before{
  content:"";position:absolute;top:60px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-2) 12%,var(--hair-2) 88%,transparent);
}
@media(max-width:960px){.pipe{grid-template-columns:1fr 1fr}.pipe::before{display:none}}
@media(max-width:600px){.pipe{grid-template-columns:1fr}}
.pstep{position:relative;background:var(--bg);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:28px 24px;transition:border-color .45s var(--ease),
  background .45s var(--ease),transform .2s var(--ease)}
.pstep:hover{transform:translateY(-4px);border-color:rgba(79,168,220,.42);
  background:linear-gradient(180deg,rgba(29,131,189,.09),transparent)}
.pstep .n{font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--ink-3);
  display:block;margin-bottom:16px}
.pstep .ico{margin-bottom:16px}
.pstep h3{margin-bottom:8px}
.pstep p{font-size:.9rem}
.pstep.ai{border-color:rgba(79,168,220,.4);
  background:linear-gradient(180deg,rgba(29,131,189,.13),transparent)}
.pstep.ai .ico{background:rgba(29,131,189,.2);border-color:rgba(79,168,220,.45);color:var(--blue-lift)}

/* ====================================================== AI INTEL STACK === */
.ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
@media(max-width:1000px){.ai-grid{grid-template-columns:1fr;gap:28px}}
.stack{display:flex;flex-direction:column;gap:12px}
.icard{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:18px 20px;transition:border-color .45s var(--ease)}
.icard:hover{border-color:rgba(79,168,220,.35)}
.ihead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
  font-size:.78rem;font-weight:700;color:var(--ink-2)}
.pill{color:var(--a-green);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:rgba(61,196,146,.14);
  border:1px solid rgba(61,196,146,.30)}
.pill.amber{background:rgba(232,162,61,.15);color:var(--a-amber);border-color:rgba(232,162,61,.32)}
.marker{display:grid;grid-template-columns:74px 1fr 52px;gap:12px;align-items:center;
  padding:7px 0;font-size:.81rem;color:var(--ink-2)}
.marker b{text-align:right;color:var(--ink);font-weight:700}
.bar{height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--blue);
  width:0;transition:width 1.1s var(--ease)}
.in .bar i{width:var(--w)}
.marker.warn .bar i{background:var(--a-amber)}
.marker.warn b{color:var(--a-amber)}
.mini-ecg{height:52px;margin:6px 0 12px}
.mini-ecg svg{width:100%;height:100%}
.mini-ecg path{fill:none;stroke:var(--blue-lift);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.in .mini-ecg path{animation:trace 2.6s var(--ease) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.verdict{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:12px;border-top:1px solid var(--hair);font-size:.79rem;color:var(--ink-2)}
.sig{color:var(--a-green);font-weight:700}
.ai-list{display:flex;flex-direction:column;gap:12px}
.ai-item{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  padding:20px;border:1px solid var(--hair);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .2s var(--ease)}
.ai-item:hover{transform:translateY(-3px);border-color:rgba(79,168,220,.42);
  background:linear-gradient(180deg,rgba(29,131,189,.09),transparent)}
.ai-item .ico{margin-bottom:0}
.ai-item h3{font-size:1.02rem;margin-bottom:5px;transition:color .45s var(--ease)}
.ai-item:hover h3{color:var(--blue-lift)}
.ai-item p{font-size:.88rem}

/* =============================================== PREVENTIVE CARDIAC PANEL === */
.band{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
@media(max-width:1000px){.band{grid-template-columns:1fr;gap:32px}}
.pts{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.pt{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  font-size:.93rem;color:var(--ink-2)}
.pt .ico{width:34px;height:34px;border-radius:9px;margin:0;color:var(--blue-lift)}
.pt .ic{width:16px;height:16px}
.tmt{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:20px;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.tmt .hd{display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.tmt svg{width:100%;height:auto;display:block}

/* ============================================================= PATENTS === */
.pat{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:36px 34px;position:relative;overflow:hidden}
.pat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 100% 0%,rgba(29,131,189,.15),transparent 60%)}
.pat-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pat-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;
  background:rgba(29,131,189,.15);border:1px solid rgba(79,168,220,.35);
  color:var(--blue-lift);font-size:.73rem;font-weight:700}
.pat-chip .ic{width:14px;height:14px}
.pat-num{font-size:.79rem;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.pat h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;
  letter-spacing:-.02em;margin-bottom:12px}
.pat>p{max-width:66ch}
.claims{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.claims span{font-size:.79rem;padding:7px 13px;border-radius:8px;
  background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--ink-2)}

/* ========================================================= CREDIBILITY === */
.cred-block{margin-bottom:46px}
.logo-cap{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.marquee{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mtrack{display:flex;align-items:center;gap:22px;width:max-content;animation:march 42s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Partner marks are supplied as rasters with baked in white grounds and very
   different padding. Filtering them to white turned several into blank
   blocks, so they sit on a light chip at a uniform size instead, in their
   real colours. Whitespace is trimmed off the source files at build prep. */
.mtrack img{width:150px;height:58px;object-fit:contain;flex:none;
  background:#F3F6FA;border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:10px 16px;opacity:.88;
  transition:opacity .45s var(--ease),transform .3s var(--ease)}
.mtrack img:hover{opacity:1;transform:translateY(-2px)}
.wall{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tile{padding:11px 20px;border-radius:100px;background:rgba(255,255,255,.04);
  border:1px solid var(--hair);font-size:.85rem;font-weight:600;color:var(--ink-2);
  transition:border-color .45s var(--ease),background .45s var(--ease),color .45s var(--ease)}
.tile:hover{border-color:rgba(79,168,220,.42);background:rgba(29,131,189,.1);color:var(--ink)}

/* =========================================================== RESOURCES === */
.dl{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px;
  transition:transform .2s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.dl:hover{transform:translateY(-4px);border-color:rgba(79,168,220,.42);
  background:linear-gradient(180deg,rgba(29,131,189,.09),transparent)}
.dl .ico{margin-bottom:0}
.dl h3{font-size:1.02rem;margin-bottom:5px;transition:color .45s var(--ease)}
.dl:hover h3{color:var(--blue-lift)}
.dl p{font-size:.87rem}
.meta{display:inline-block;margin-top:12px;font-size:.78rem;font-weight:700;color:var(--ink-3);
  transition:color .45s var(--ease)}
.dl:hover .meta{color:var(--blue-lift)}

/* =========================================================== FINAL CTA === */
.final{padding:0 0 112px}
.final-card{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--surface),var(--void));
  border:1px solid var(--hair-2);border-radius:28px;padding:76px 40px}
.final-card::before{content:"";position:absolute;left:50%;top:-60%;width:130%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(29,131,189,.20) 0%,transparent 58%)}
.final-card>*{position:relative}
.final-card .cta-row{justify-content:center}
.final-card h2{max-width:18ch;margin:0 auto}

/* ============================================================== FOOTER === */
footer{background:var(--void);border-top:1px solid var(--hair);padding:64px 0 34px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:48px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fgrid h4{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px}
.fgrid a{display:block;font-size:.89rem;color:var(--ink-2);padding:6px 0;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.fgrid a:hover{color:var(--blue-lift);transform:translateX(3px)}
.fbrand p{font-size:.89rem;max-width:34ch;margin-top:14px}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--hair);font-size:.81rem;color:var(--ink-3)}

/* ================================================================ CHAT === */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:54px;height:54px;
  border-radius:50%;border:1px solid rgba(79,168,220,.4);cursor:pointer;
  background:linear-gradient(180deg,var(--blue-lift),var(--blue));color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 36px -10px var(--glow);transition:transform .25s var(--ease)}
.chat-fab:hover{transform:scale(1.07)}
.chat-fab .ic{width:22px;height:22px}
.chat-panel{position:fixed;right:22px;bottom:88px;z-index:80;width:min(360px,calc(100vw - 44px));
  background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.chat-panel.open{opacity:1;visibility:visible;transform:none}
.chat-hd{padding:15px 18px;border-bottom:1px solid var(--hair);font-weight:700;font-size:.9rem}
.chat-body{padding:18px;font-size:.87rem;color:var(--ink-2);min-height:96px}
.chat-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--hair)}
.chat-in input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--hair);
  border-radius:8px;padding:10px 12px;color:var(--ink);font:inherit;font-size:.87rem;outline:none}
.chat-in input:focus{border-color:rgba(79,168,220,.5)}
.chat-in button{background:var(--blue);border:0;border-radius:8px;color:#fff;
  padding:0 15px;cursor:pointer;font-weight:700}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;
  border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue-lift);outline-offset:3px;border-radius:4px}

/* ================================================== CUSTOMER SEGMENTS === */
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.segs{grid-template-columns:1fr}}
.seg{
  position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:30px 28px;
  transform:translate3d(var(--mgx,0px),var(--mgy,0px),0);
  transition:transform .2s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),box-shadow .45s var(--ease);
}
.seg:hover{
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) - 10px),0) scale(1.022);
  background:linear-gradient(180deg,rgba(29,131,189,.13),rgba(29,131,189,.03));
  border-color:rgba(79,168,220,.5);
  box-shadow:0 34px 74px -22px rgba(0,0,0,.82),0 0 0 1px rgba(79,168,220,.16);
  z-index:3;
}
.seg-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.seg-hd .ico{margin-bottom:0;flex:none}
.seg-for{font-size:1.02rem;font-weight:800;letter-spacing:.02em;
  color:var(--blue-lift);transition:color .45s var(--ease)}
.seg:hover .seg-for{color:var(--blue-lift)}
.seg h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.78rem;
  line-height:1.14;letter-spacing:-.025em;margin-bottom:20px;text-wrap:balance}
@media(max-width:1200px){.seg h3{font-size:1.55rem}}
.vp{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.vp li{position:relative;padding-left:24px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.vp li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--blue-lift);opacity:.75;
}
.seg-ft{margin-top:auto;padding-top:20px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:10px}
.seg-stat{font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.seg-stat b{color:var(--ink);font-weight:800}
.seg .go{margin-top:0}
.seg:hover .go{color:var(--blue-lift);gap:11px}
.seg-also{text-align:center;margin-top:34px;font-size:.92rem;color:var(--ink-3)}
.seg-also a{color:var(--blue-lift);font-weight:700}
.seg-also a:hover{text-decoration:underline}

/* ============================== CURSOR: magnetism, card shine, spotlight === */
/* Only on real pointers. Touch and reduced-motion get the static page.        */
.cursor-glow{
  position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;z-index:200;opacity:0;
  mix-blend-mode:screen;will-change:transform,opacity;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle,rgba(29,131,189,.15) 0%,rgba(29,131,189,.035) 44%,transparent 68%);
}
.cursor-glow.on{opacity:1}

/* clickable things drift toward the cursor */
.btn,.card,.dl,.ai-item,.pstep,.tile,.map-panel{
  transform:translate3d(var(--mgx,0px),var(--mgy,0px),0);
}
.btn-primary:hover,.btn-ghost:hover{
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) - 2px),0) scale(1.03);
}
/* whatever the cursor is on lifts clear of its neighbours so it reads easily */
.card:hover,.dl:hover,.ai-item:hover,.pstep:hover{
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) - 8px),0) scale(1.028);
  z-index:3;
}
.card:hover,.dl:hover,.pstep:hover{
  box-shadow:0 28px 64px -20px rgba(0,0,0,.82),0 0 0 1px rgba(79,168,220,.16);
}

/* a light that tracks across the surface of whatever you are over */
.card,.dl,.seg,.pstep,.ai-item,.map-panel{position:relative;overflow:hidden}
.card::after,.dl::after,.seg::after,.pstep::after,.ai-item::after,.map-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
             rgba(120,190,240,.13),transparent 68%);
}
.card:hover::after,.dl:hover::after,.seg:hover::after,
.pstep:hover::after,.ai-item:hover::after,.map-panel:hover::after{opacity:1}

@media(hover:none),(prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
  .card::after,.dl::after,.seg::after,.pstep::after,.ai-item::after,.map-panel::after{display:none}
}

/* ======================================================================
   PORTED COMPONENTS — used by the eleven sub pages.
   Structural pieces map onto the card system; the page specific hero
   visuals share one panel treatment so they stay coherent on dark.
   ====================================================================== */

/* --- sub page hero --- */
.hero.subpage{padding:88px 0 76px}
.hero.subpage .hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:48px;align-items:center;
}
@media(max-width:1000px){.hero.subpage .hero-grid{grid-template-columns:1fr;gap:34px}}
.hero.subpage .hero-copy{margin-bottom:0;max-width:none}
.hero.subpage h1{font-size:clamp(2.2rem,4.6vw,3.5rem);max-width:18ch}
.hero.subpage .lead{max-width:52ch}

/* --- the hero side panel and its many internals --- */
.panel{
  position:relative;z-index:2;background:var(--surface);
  border:1px solid var(--hair-2);border-radius:var(--r-xl);padding:24px;
  box-shadow:0 34px 78px -28px rgba(0,0,0,.85);
}
/* A photo in a panel keeps its own shape. The width and height attributes are
   there to reserve space and stop the layout jumping, so the height has to be
   handed back to the aspect ratio or the picture is stretched to the box. */
.panel > img{display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 10px)}

/* the team photo on the about page, full width under the hero copy */
.team-shot{
  margin:44px 0 0;padding:14px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--hair-2);
  box-shadow:0 34px 78px -28px rgba(0,0,0,.85);
}
.team-shot img{display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 10px)}
.team-shot figcaption{
  margin-top:12px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
}
@media(max-width:640px){.team-shot{padding:8px;margin-top:32px}}
.panel .hd{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.panel .ok{color:var(--a-green);display:flex;align-items:center;gap:7px;white-space:nowrap}
.panel svg{width:100%;height:auto;display:block}

/* flow of steps down the panel */
.fsteps{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:22px;margin-bottom:22px}
.fdot{position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--hair-2)}
.fstep{display:flex;align-items:center;gap:11px;font-size:.88rem;color:var(--ink-2);position:relative}
.fstep i{
  position:absolute;left:-22px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--blue-lift);
}
.fstep:last-child i{background:var(--blue-lift);box-shadow:0 0 10px 1px var(--glow)}

/* big paired figures inside a panel */
.bignums{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:18px;border-top:1px solid var(--hair)}
.bignums>div b{
  display:block;font-size:1.32rem;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,#9FC6DE);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bignums>div span{display:block;margin-top:4px;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* generic children of a panel, so nothing is left unstyled */
.panel .ringrow,.panel .ledger,.panel .feed,.panel .wa-loop,.panel .dotgrid,
.panel .ticks,.panel .drift-panel,.panel .ai-shot,.panel .tilt-wrap{
  display:block;color:var(--ink-2);font-size:.87rem
}
.panel .ringtext,.panel .dg-count,.panel .ringpulse{color:var(--blue-lift);font-weight:800}
.panel .wa-card{
  background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;font-size:.86rem;color:var(--ink-2)
}
.panel .wa-card .from{display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.panel .tick{display:inline-block;color:#57C79C;font-weight:800;margin-right:6px}

/* --- old vs new comparison rows --- */
.lrow{
  display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1.15fr);
  gap:18px;align-items:center;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px 26px;
  transform:translate3d(var(--mgx,0px),var(--mgy,0px),0);
  transition:transform .2s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
}
.lrow:hover{
  transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) - 4px),0);
  border-color:rgba(79,168,220,.42);
  background:linear-gradient(180deg,rgba(29,131,189,.09),transparent);
}
.lrow .cap{display:block;font-size:.64rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:6px;color:var(--ink-3)}
.lrow .old{color:var(--ink-3);font-size:.93rem}
.lrow .new{color:var(--ink);font-size:.95rem;font-weight:600}
.lrow .new .cap{color:var(--blue-lift)}
.larrow{display:flex;align-items:center;justify-content:center;color:var(--blue-lift);opacity:.7}
@media(max-width:760px){
  .lrow{grid-template-columns:1fr}
  .larrow{transform:rotate(90deg);padding:2px 0}
}
.lstack{display:flex;flex-direction:column;gap:12px}

/* --- FAQ --- */
.faq{max-width:840px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px}
.faq details{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:2px 22px;transition:border-color .45s var(--ease),background .45s var(--ease);
}
.faq details[open]{border-color:rgba(79,168,220,.35);background:rgba(29,131,189,.09)}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--ink);padding:17px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.97rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue-lift);font-size:1.3rem;font-weight:700;flex:none;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px;font-size:.93rem;max-width:72ch}

/* --- misc ported bits --- */
.tag{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a-amber);display:block;margin-bottom:10px}
.card.spec{border-color:rgba(79,168,220,.5);background:linear-gradient(180deg,rgba(29,131,189,.15),transparent)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:18px}
.store{border:1px solid var(--hair-2);color:var(--ink);border-radius:9px;padding:11px 18px;
  font-weight:700;font-size:.88rem;transition:border-color .45s var(--ease),background .45s var(--ease)}
.store:hover{border-color:rgba(79,168,220,.5);background:rgba(29,131,189,.1)}
.note{font-size:.83rem;color:var(--ink-3)}
.form-note{font-size:.83rem;color:var(--ink-3);margin-top:14px}
.logo-wall{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center}
.logo-wall img{width:150px;height:58px;object-fit:contain;
  background:#F3F6FA;border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:10px 16px;opacity:.88;
  transition:opacity .45s var(--ease),transform .3s var(--ease)}
.logo-wall img:hover{opacity:1;transform:translateY(-2px)}

/* --- live indicator: lost when the home ECG monitor was removed, still used
       by every "LIVE FROM ..." label and by the device page monitor --- */
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--a-green);flex:none;
  display:inline-block;box-shadow:0 0 0 0 rgba(31,158,110,.6);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(31,158,110,.55)}
  70%{box-shadow:0 0 0 9px rgba(31,158,110,0)}
  100%{box-shadow:0 0 0 0 rgba(31,158,110,0)}
}

/* --- the ECG monitor now lives only on the device page, where it is the
       product rather than decoration --- */
.monitor{position:relative;height:150px;margin-top:22px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.monitor canvas{width:100%;height:100%;display:block}
.monitor-hud{display:flex;align-items:center;gap:11px;margin-top:10px;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.bpm{margin-left:auto}
.bpm b{color:var(--blue-lift);font-size:.92rem;letter-spacing:0}

/* --- page specific bits carried over --- */
.cred{padding:112px 0}
@media(max-width:820px){.cred{padding:76px 0}}

.t1,.t2{display:block;font-size:.9rem;font-weight:700;color:var(--ink);
  padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--hair);margin-bottom:10px}
.t2{border-color:rgba(79,168,220,.4);background:rgba(29,131,189,.11)}
.t1 small,.t2 small{display:block;margin-top:4px;font-size:.76rem;font-weight:600;color:var(--ink-3)}

/* device photo with floating callouts */
.panel.tilt-wrap{background:none;border:0;box-shadow:none;padding:0;position:relative}
.panel.tilt{overflow:hidden;padding:0}
.panel.tilt img{width:100%;height:auto;display:block;border-radius:calc(var(--r-xl) - 1px)}
.float{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:var(--raised);border:1px solid var(--hair-2);border-radius:12px;
  padding:11px 15px;font-size:.83rem;font-weight:700;color:var(--ink);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.85);
  right:-8px;bottom:16%;max-width:74%;
}
.float.f2{right:auto;left:-8px;bottom:auto;top:14%}
.float small{display:block;margin-top:3px;font-size:.74rem;font-weight:600;color:var(--ink-3)}
.tick{color:var(--a-green);font-weight:800;flex:none}
@media(max-width:620px){.float,.float.f2{position:static;margin-top:10px;max-width:none;right:auto;left:auto}}


/* ============================================ COMPLIANCE CALLOUT ========= */
.compliance{
  display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;
  margin-top:22px;padding:26px 28px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(61,196,146,.10),rgba(61,196,146,.02));
  border:1px solid rgba(61,196,146,.28);
}
.compliance .ico{
  width:52px;height:52px;margin:0;border-radius:13px;
  background:rgba(61,196,146,.16);border-color:rgba(61,196,146,.32);color:var(--a-green);
}
.compliance .ic{width:22px;height:22px}
.compliance h3{margin-bottom:8px;color:#7FD9B4}
@media(max-width:640px){.compliance{grid-template-columns:1fr}}
.compliance p{font-size:.93rem;max-width:74ch;color:var(--ink-2)}

/* The four points a compliance reviewer actually checks, laid out so they can
   be scanned rather than read. Each one is backed by the privacy page. */
.comp-points{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;
}
.comp-points li{
  position:relative;padding-left:20px;font-size:.86rem;line-height:1.5;color:var(--ink-3);
}
.comp-points li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;
  background:var(--a-green);opacity:.8;
}
.comp-points b{display:block;margin-bottom:2px;font-weight:800;color:var(--ink)}
@media(max-width:820px){.comp-points{grid-template-columns:1fr;gap:13px}}


/* ============================================ FOUNDERS AND THE TEAM === */
/* Photo slots render a monogram until a real file lands in assets/team, so the
   page looks finished today rather than showing a broken frame. */
.founder{
  padding:28px;border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--hair);
}
.fd-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.fd-photo{
  flex:none;width:62px;height:62px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--blue-lift);
  background:rgba(29,131,189,.14);border:1px solid rgba(79,168,220,.3);
  background-size:cover;background-position:center;
}
.fd-photo.sm{width:48px;height:48px;border-radius:13px;margin-bottom:14px}
.founder h3{margin:0 0 3px}
.fd-role{font-size:.8rem;color:var(--ink-3)}
.founder p{font-size:.92rem;color:var(--ink-2)}
.founder p + p{margin-top:12px}
.tmember{
  padding:22px;border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--hair);
}
.tmember h3{margin:0 0 3px;font-size:1rem}
.tmember .fd-role{display:block;margin-bottom:10px}
.tmember p{font-size:.85rem;color:var(--ink-3)}

/* ------------------------------------------------------- the timeline */
.tline{list-style:none;margin:34px 0 0;padding:0 0 0 26px;position:relative}
.tline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(79,168,220,.5),rgba(255,255,255,.06));
}
.tline li{position:relative;padding:0 0 26px}
.tline li:last-child{padding-bottom:0}
.tline li::before{
  content:"";position:absolute;left:-26px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--bg);border:2px solid var(--blue-lift);
}
.tl-when{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-lift);margin-bottom:5px;
}
.tl-what{display:block;font-size:.93rem;color:var(--ink-2);max-width:74ch}
@media(max-width:640px){.founder,.tmember{padding:20px}}

/* ================================== THE CASE FLOW, RUNNING ============== */
/* A case is a pipeline, so the panel shows it moving rather than as a list. */
.fsteps{position:relative}
.frunner{
  position:absolute;left:1.5px;width:8px;height:8px;border-radius:50%;
  background:var(--blue-lift);box-shadow:0 0 12px 2px rgba(29,131,189,.75);
  animation:caseRun 7s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes caseRun{
  0%,6%   {top:4px}
  20%,26% {top:calc(25% + 2px)}
  40%,46% {top:calc(50% - 2px)}
  60%,66% {top:calc(75% - 4px)}
  80%,100%{top:calc(100% - 12px)}
}
.fstep i{transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.fstep:nth-child(n+3) i{animation:caseStep 7s linear infinite}
.fstep:nth-child(3) i{animation-delay:0s}
.fstep:nth-child(4) i{animation-delay:1.4s}
.fstep:nth-child(5) i{animation-delay:2.8s}
.fstep:nth-child(6) i{animation-delay:4.2s}
.fstep:nth-child(7) i{animation-delay:5.6s}
@keyframes caseStep{
  0%,7%    {background:var(--bg);box-shadow:none}
  12%,100% {background:var(--blue-lift);box-shadow:0 0 10px 1px rgba(29,131,189,.7)}
}
.fstep:last-child i{border-color:var(--a-green)}
.fstep span{transition:color .4s var(--ease)}

/* ------------------------------------------------------------ legal pages */
.legal{max-width:76ch}
.legal h2{font-size:1.28rem;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:12px}
.legal a{color:var(--blue-lift);font-weight:600}
.legal a:hover{text-decoration:underline}

/* ================================================ ECOSYSTEM SCHEMATIC ====
   Flat, clinical, readable at a glance. Three systems that work on the same
   case, with the case entering above and the signed report leaving below.
   ====================================================================== */
.schematic{margin-top:52px}
.sch-rail{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  text-align:center;padding:14px 22px;border-radius:100px;
  background:var(--surface);border:1px solid var(--hair-2);
}
.sch-rail span{font-weight:800;font-size:.92rem;letter-spacing:-.01em;color:var(--ink)}
.sch-rail small{font-size:.8rem;color:var(--ink-3)}
.sch-in{position:relative}
.sch-in::after,.sch-out::before{
  content:"";position:absolute;left:50%;width:1px;height:26px;
  background:linear-gradient(180deg,var(--hair-2),transparent);
}
.sch-in::after{bottom:-26px}
.sch-out::before{top:-26px;background:linear-gradient(0deg,var(--hair-2),transparent)}
.sch-out{position:relative;margin-top:26px;border-color:rgba(61,196,146,.32);
  background:linear-gradient(180deg,rgba(61,196,146,.09),var(--surface))}
.sch-out span{color:#7FD9B4}


/* the two way link between systems */

@media(max-width:1040px){
            .sch-join i:last-child{display:none}
}

/* ===================================================== AMBIENT STARFIELD ===
   One fixed screen blended canvas, light enough to read as texture rather
   than scenery. No planets: the ecosystem is the schematic, not a solar
   system.
   ====================================================================== */
#ambient{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:.9;
}
@media(prefers-reduced-motion:reduce){#ambient{opacity:.55}}

/* ================================================== ECOSYSTEM MAP ========
   Three hubs, each ringed by the parts it runs, all wired to each other.
   Icons carry the meaning; the words are labels, not copy.
   ====================================================================== */
.ecomap{width:100%;height:auto;display:block;margin:14px 0;overflow:visible}

.eco-trunk line{stroke:var(--hair-2);stroke-width:1.4}
.eco-trunk line.flow{
  stroke:var(--blue-lift);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:3 15;opacity:.9;
  animation:ecoflow 2.6s linear infinite;
}
@keyframes ecoflow{to{stroke-dashoffset:-36}}

.eco-spoke line{stroke:var(--hair);stroke-width:1}

/* --- hubs --- */
.eco-hub .halo{fill:none;stroke-width:1;opacity:.4}
.eco-hub .core{stroke-width:1.5}
.eco-hub .hub-name{
  font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:15px;
  letter-spacing:-.02em;fill:var(--ink);
}
.eco-hub .hub-role{
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:8.5px;
  letter-spacing:.14em;
}
.h-blue   .core{fill:rgba(29,131,189,.16);stroke:var(--blue-lift)}
.h-blue   .halo{stroke:rgba(79,168,220,.45)}
.h-blue   .hub-role{fill:#8FD0F2}
.h-violet .core{fill:rgba(124,99,232,.16);stroke:#9B86F2}
.h-violet .halo{stroke:rgba(155,134,242,.45)}
.h-violet .hub-role{fill:#BCAEF7}
.h-green  .core{fill:rgba(61,196,146,.16);stroke:#3DC492}
.h-green  .halo{stroke:rgba(61,196,146,.45)}
.h-green  .hub-role{fill:#7FD9B4}

/* --- satellites --- */
.eco-sats .sat circle{
  fill:var(--surface);stroke-width:1.2;
  transition:fill .35s var(--ease),stroke-width .35s var(--ease);
}
.eco-sats .sat svg{color:var(--ink-2);transition:color .35s var(--ease)}
.eco-sats .sat use{stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.eco-sats .sat text{
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:11px;
  fill:var(--ink-2);transition:fill .35s var(--ease);
}
.h-blue   .sat circle{stroke:rgba(79,168,220,.5)}
.h-violet .sat circle{stroke:rgba(155,134,242,.5)}
.h-green  .sat circle{stroke:rgba(61,196,146,.5)}

.eco-sats .sat{cursor:default}
.h-blue   .sat:hover circle{fill:rgba(29,131,189,.22);stroke-width:2}
.h-violet .sat:hover circle{fill:rgba(124,99,232,.22);stroke-width:2}
.h-green  .sat:hover circle{fill:rgba(61,196,146,.22);stroke-width:2}
.eco-sats .sat:hover svg{color:var(--ink)}
.eco-sats .sat:hover text{fill:var(--ink)}

/* a gentle breathing halo, no orbit, no planets */
.eco-hub .halo{animation:ecopulse 4.6s ease-in-out infinite}
.h-violet .halo{animation-delay:1.5s}
.h-green  .halo{animation-delay:3s}
@keyframes ecopulse{0%,100%{opacity:.25}50%{opacity:.55}}

@media(max-width:820px){
  .eco-sats .sat text{font-size:13px}
  .eco-hub .hub-name{font-size:17px}
  .eco-hub .hub-role{font-size:10px}
}

/* ================================================== APP SCREENSHOTS ======
   Named slots: drop a file into assets/apps and it replaces the frame.
   ====================================================================== */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.phones{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.phone{margin:0}
.phone-shell{
  position:relative;aspect-ratio:9/15.6;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--void));
  border:1px solid var(--hair-2);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease),border-color .45s var(--ease);
}
.phone:hover .phone-shell{transform:translateY(-5px);border-color:rgba(79,168,220,.4)}
.phone-shell::before{                       /* the notch, so it reads as a phone */
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:34%;height:16px;border-radius:0 0 12px 12px;background:var(--void);z-index:2;
}
.phone-shell img{width:100%;height:100%;object-fit:cover;display:block}
.slot-note{
  display:none;flex-direction:column;gap:6px;text-align:center;padding:0 22px;
  font-size:.76rem;color:var(--ink-3);line-height:1.5;
}
.slot-note b{
  font-size:.82rem;color:var(--blue-lift);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.phone-shell.empty{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),
    linear-gradient(180deg,var(--surface),var(--void));
}
.phone-shell.empty .slot-note{display:flex}
.phone figcaption{margin-top:18px;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.phone figcaption b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:5px}

/* ========================================================= VIDEOS ======= */
.vid{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(29,131,189,.20),var(--surface) 60%,var(--void));
  border:1px solid var(--hair);cursor:pointer;
  transition:transform .2s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.vid:hover{transform:translateY(-4px);border-color:rgba(79,168,220,.45);
  box-shadow:0 22px 54px -20px rgba(0,0,0,.75)}
.vid-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(29,131,189,.85);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(29,131,189,.8);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.vid:hover .vid-play{transform:translate(-50%,-60%) scale(1.08);background:var(--blue-lift)}
.vid-play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.vid-meta{position:relative;padding:20px;background:linear-gradient(0deg,var(--void),transparent)}
.vid-meta h3{font-size:1.02rem;margin:6px 0 5px}
.vid-meta p{font-size:.86rem}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vid.playing .vid-play,.vid.playing .vid-meta{display:none}

/* ------------------------------------------- wide screenshot slot -------- */
.shot{margin:0}
.shot-frame{
  position:relative;aspect-ratio:16/9.4;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--void));
  border:1px solid var(--hair-2);box-shadow:0 26px 60px -26px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;
}
.shot-frame img{width:100%;height:100%;object-fit:cover;display:block}
.shot-frame.empty{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),
    linear-gradient(180deg,var(--surface),var(--void));
}
.shot-frame.empty .slot-note{display:flex}
.shot-cap{margin-top:14px;font-size:.9rem;color:var(--ink-3);text-align:center}

/* drawn console views: our own rendering of a real screen, anonymised */
.shot-frame.drawn{
  aspect-ratio:auto;padding:20px;align-items:stretch;
  background:linear-gradient(180deg,var(--surface),var(--void));
}
.shot-frame.drawn svg{width:100%;height:auto;display:block}

/* a link out on every video, and a message when framing is refused */
.vid-out{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.8rem;font-weight:700;color:var(--blue-lift);
}
.vid-out::after{content:"↗"}
.vid-out:hover{text-decoration:underline}
.vid.blocked .vid-play{opacity:.35;pointer-events:none}
.vid.blocked .vid-meta::before{
  content:"Playing here is blocked in this preview. The link below opens it.";
  display:block;font-size:.78rem;color:var(--a-amber);margin-bottom:8px;
}

/* the video poster: held locally, so it never depends on a third party host */
.vid-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62;transition:opacity .45s var(--ease),transform .6s var(--ease);
}
.vid:hover .vid-poster{opacity:.78;transform:scale(1.03)}
.vid::after{                       /* keeps the caption legible over the still */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--void) 4%,rgba(11,14,17,.35) 46%,rgba(11,14,17,.1) 100%);
}
.vid-play,.vid-meta{position:relative;z-index:2}
.vid.playing .vid-poster,.vid.playing::after{display:none}


/* ================================================== PRODUCT ART =========
   Not a screenshot. One idea per screen, at a size you can actually read,
   in the site's own palette. A real file in assets/apps replaces it.
   ====================================================================== */
.fig{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding:32px 20px 20px;gap:11px;text-align:left;
  background:radial-gradient(120% 70% at 50% 0%,rgba(79,168,220,.22),transparent 62%),
             linear-gradient(180deg,#131A21,#0A0D10);
}
.f-green{background:radial-gradient(120% 70% at 50% 0%,rgba(61,196,146,.22),transparent 62%),
         linear-gradient(180deg,#111A17,#0A0D10)}
.f-violet{background:radial-gradient(120% 70% at 50% 0%,rgba(155,134,242,.22),transparent 62%),
          linear-gradient(180deg,#15141F,#0A0D10)}
/* The drawn figure used to be hidden until JavaScript noticed the screenshot
   had failed to load and marked the shell .empty. The build now decides: a
   real file in assets/apps ships the img, otherwise it ships the figure and
   nothing else. Only one of the two is ever present, so there is nothing to
   hide, and the art no longer depends on a failed network request or on JS
   running at all. */
.phone-shell .fig{display:flex}

.f-eyebrow{font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.f-status{font-size:20px;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.f-blue .f-status{background:linear-gradient(180deg,#EAF4FB,#8FD0F2);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.f-flow{display:flex;flex-direction:column;gap:11px;margin-top:4px;position:relative}
.f-flow::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.12)}
.f-step{display:flex;align-items:center;gap:11px;font-size:10.5px;color:var(--ink-3);position:relative}
.f-step i{width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);
  background:#0A0D10;flex:none;z-index:1}
.f-step.done i{background:#4FA8DC;border-color:#4FA8DC}
.f-step.done span{color:var(--ink-2)}
.f-step.live i{background:#3DC492;border-color:#3DC492;box-shadow:0 0 0 4px rgba(61,196,146,.18)}
.f-step.live span{color:#7FD9B4;font-weight:700}

.f-ring{position:relative;width:118px;margin:2px auto 0}
.f-ring svg{width:100%;height:auto;display:block}
.f-ringtext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.f-ringtext b{font-size:34px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.03em}
.f-ringtext span{font-size:9px;color:var(--ink-3);margin-top:2px}
.f-rows{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.f-rows>div{display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:8px;padding:8px 10px}
.f-rows span{font-size:10px;color:var(--ink-2)}
.f-rows b{font-size:12px;font-weight:800}
.f-rows .ok{color:#3DC492}.f-rows .warn{color:var(--a-amber)}
.f-ecg{width:100%;height:26px;margin-top:auto;opacity:.75}
.f-ecg path{fill:none;stroke:#3DC492;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.f-big{font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#F2F7FB,#B9A6F5);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.f-sub{font-size:9.5px;color:var(--ink-3);margin-top:-6px}
.f-bars{width:100%;height:54px;margin-top:6px}
.f-bars rect{fill:#9B86F2;opacity:.85}
.f-bars rect:nth-child(n+3){opacity:.45}
.f-legend{display:flex;justify-content:space-between;font-size:8px;color:var(--ink-3);
  font-weight:700;padding:0 4px}

.f-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--hair);padding-top:11px}
.f-foot span{font-size:9.5px;color:var(--ink-3)}
.f-foot b{font-size:12px;font-weight:800;color:var(--ink)}

/* additions for the richer product art */
.f-teal{background:radial-gradient(120% 70% at 50% 0%,rgba(37,211,102,.20),transparent 62%),
        linear-gradient(180deg,#0F1A17,#0A0D10)}
.f-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.f-chip{font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;background:rgba(255,255,255,.06);
  border:1px solid var(--hair);color:var(--ink-3);white-space:nowrap}
.f-chip.live{color:#7FD9B4;border-color:rgba(61,196,146,.38);background:rgba(61,196,146,.12)}
.f-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.f-strip>div{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:8px;
  padding:7px 4px;text-align:center}
.f-strip b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.f-strip span{font-size:7.5px;color:var(--ink-3)}
.f-step em{margin-left:auto;font-style:normal;font-size:8.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.f-note{font-size:8.5px;line-height:1.45;color:var(--ink-3);
  border-left:2px solid rgba(61,196,146,.45);padding-left:8px}

/* the multilingual support thread */
.f-chat{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.f-msg{max-width:88%;font-size:9.5px;line-height:1.4;padding:7px 9px;border-radius:11px}
.f-msg.in{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--hair);
  color:var(--ink-2);border-bottom-left-radius:3px}
.f-msg.out{align-self:flex-end;background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.30);
  color:#CFF3DE;border-bottom-right-radius:3px}
.f-lang{align-self:center;font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:1px 0}

/* ============================================ CARDIAC HEALTH REPORT =====
   What a person actually receives, drawn rather than described.
   ====================================================================== */
.report{
  background:linear-gradient(180deg,var(--surface),var(--void));
  border:1px solid var(--hair-2);border-radius:var(--r-xl);
  padding:30px;box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.rep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-bottom:22px;border-bottom:1px solid var(--hair);margin-bottom:24px}
.rep-eyebrow{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-lift);margin-bottom:8px}
.rep-name{font-size:1.5rem;font-weight:800;letter-spacing:-.025em}
.rep-score{display:flex;align-items:center;gap:16px;flex:none}
.rep-ring{position:relative;width:82px;flex:none}
.rep-ring svg{width:100%;height:auto;display:block}
.rep-ringtext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rep-ringtext b{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.rep-ringtext span{font-size:8.5px;color:var(--ink-3)}
.rep-band{font-size:.76rem;font-weight:800;padding:7px 14px;border-radius:100px;white-space:nowrap}
.rep-band.warn{background:rgba(232,162,61,.14);color:var(--a-amber);border:1px solid rgba(232,162,61,.34)}

.rep-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px}
@media(max-width:900px){.rep-grid{grid-template-columns:1fr;gap:26px}.report{padding:22px}}
.rep-col{display:flex;flex-direction:column;gap:12px}
.rep-sec{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.rep-marker{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--hair)}
.m-name{font-size:.92rem;font-weight:700;color:var(--ink)}
.m-name em{display:block;font-style:normal;font-size:.7rem;font-weight:600;color:var(--a-amber);margin-top:3px}
.m-val{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.m-val i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink-3)}
.m-bar{grid-column:1/-1;height:4px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:4px}
.m-bar i{display:block;height:100%;border-radius:3px}
.m-tar{grid-column:1/-1;font-size:.72rem;color:var(--ink-3)}
.rep-marker.high .m-val{color:var(--a-coral)} .rep-marker.high .m-bar i{background:var(--a-coral)}
.rep-marker.mid  .m-val{color:var(--a-amber)} .rep-marker.mid  .m-bar i{background:var(--a-amber)}
.rep-marker.ok   .m-val{color:var(--a-green)} .rep-marker.ok   .m-bar i{background:var(--a-green)}

.rep-panel{background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:var(--r-lg);padding:16px}
.rep-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--ink-2)}
.rep-row .warn{color:var(--a-amber);font-weight:800}
.rep-chart{width:100%;height:auto;margin:10px 0 6px}
.rep-note{font-size:.84rem;color:var(--ink-2)}
.rep-actions{display:flex;flex-direction:column;gap:9px}
.rep-actions>div{display:flex;gap:12px;align-items:baseline;
  background:rgba(29,131,189,.07);border:1px solid rgba(79,168,220,.20);
  border-radius:10px;padding:11px 13px}
.rep-actions b{font-size:.78rem;font-weight:800;color:var(--blue-lift);white-space:nowrap;flex:none;min-width:88px}
.rep-actions span{font-size:.86rem;color:var(--ink-2)}
.rep-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:.85rem;color:var(--a-amber)}

/* small charts inside the product art */
.f-mini{width:100%;height:40px}
.f-mini rect{fill:#4FA8DC;opacity:.55}
.f-mini rect:nth-child(4){opacity:.95}
.f-mini.line circle{fill:#3DC492;opacity:.7}
.f-mini.line circle.hi{fill:#7FD9B4;opacity:1}
.f-split{display:flex;height:8px;border-radius:100px;overflow:hidden;background:rgba(255,255,255,.07)}
.f-split i{display:block;height:100%}
.f-split i.ai{background:#9B86F2}
.f-split i.hu{background:rgba(255,255,255,.22)}
.f-splitkey{display:flex;justify-content:space-between;font-size:8px;color:var(--ink-3);font-weight:700}
.f-splitkey i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}
.f-splitkey i.ai{background:#9B86F2}
.f-splitkey i.hu{background:rgba(255,255,255,.22)}

/* ==================================================== THE LEAD FORM =====
   The only thing on this site that turns an ad click into a CRM record.
   ====================================================================== */
.lead-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start}
@media(max-width:960px){.lead-wrap{grid-template-columns:1fr;gap:32px}}
.lead-alt{margin-top:26px}

.lead-form{
  background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-xl);
  padding:30px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.lead-fields{grid-template-columns:1fr}.lead-form{padding:22px}}
.lead-fields label{display:flex;flex-direction:column;gap:6px}
.lead-fields label.wide{grid-column:1/-1}
.lead-fields span{font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--ink-3)}
.lead-fields input,.lead-fields textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--hair-2);border-radius:9px;
  padding:11px 13px;color:var(--ink);font:inherit;font-size:.94rem;outline:none;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.lead-fields input:focus,.lead-fields textarea:focus{
  border-color:rgba(79,168,220,.6);background:rgba(29,131,189,.07)}
.lead-fields input.invalid,.lead-fields textarea.invalid{border-color:rgba(224,82,82,.7)}
.lead-fields textarea{resize:vertical;min-height:74px}
.lead-fields .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lead-form>button{margin-top:20px;width:100%}
.lead-status{margin-top:14px;font-size:.9rem;color:var(--ink-2);min-height:1.2em}
.lead-status.ok{color:#7FD9B4;font-weight:700}
.lead-status.err{color:#F2A0A0}
.lead-status a{color:var(--blue-lift);font-weight:700}
.lead-fine{margin-top:14px;font-size:.78rem;color:var(--ink-3);line-height:1.5}
.lead-fine a{color:var(--blue-lift)}