/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none;background:#050D1A;-webkit-overflow-scrolling:touch}
body{overscroll-behavior:none;background:#050D1A;color:#f0f4ff;font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeSpeed}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:'DM Sans',sans-serif}

/* ─── TOKENS (calibrated 2026-04 — see docs/color-research.md) ─── */
:root{
  /* Surfaces — navy, slightly warmed to reduce "crypto-blue" cast */
  --cream:#080E1A;
  --cream2:#101828;
  --cream3:#172036;
  /* Text — warm whites, reduced blue bias */
  --ink:#F4F6FA;
  --ink2:#C5CDDB;
  --ink3:#8A95A8;
  --ink4:#5A667A;
  --white:#07111e;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.14);
  /* Brand accents — desaturated from neon (matches Stripe/Linear tier) */
  --green:#4ADE99;
  --greenl:rgba(74,222,153,0.1);
  --teal:#2DD4D9;
  --teall:rgba(45,212,217,0.1);
  /* Clinical/data-research accent — periwinkle replaces amber for brand use */
  --periwinkle:#8B9FFF;
  --periwinklel:rgba(139,159,255,0.1);
  /* Amber retained as semantic-warning only (not a brand color) */
  --amber:#fbbf24;
  --amberl:rgba(251,191,36,0.1);
  /* Semantic "problem-state" token — shifted from coral (red-pink, too
     alarming / clashed with teal+mint palette) to a muted honey amber.
     Warm enough to read as cautionary, desaturated enough to sit peer-
     to-peer with --teal and --green in visual weight. */
  --coral:#D9A876;
  --corall:rgba(217,168,118,0.12);
  --lime:#4ADE99;
  --max:1160px;
  /* Apple signature easings */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.18s;
  --dur:.28s;
  --dur-slow:.5s;
  --dur-reveal:.9s;
  /* 8pt spacing scale */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;
  /* Radius scale */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}

/* ─── LAYOUT ─── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 48px;width:100%;box-sizing:border-box}
@media(max-width:1200px){.wrap{padding:0 32px}}
@media(max-width:900px){.wrap{padding:0 20px}}
@media(max-width:600px){.wrap{padding:0 16px}}

/* ─── TYPOGRAPHY ─── */
.serif{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1.02}
.label{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:12px}
.label::before{content:'';display:block;width:18px;height:1px;background:var(--teal);flex-shrink:0}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes shimmer-move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes orbDrift{0%,100%{opacity:.05;transform:translate(0,0)}50%{opacity:.08;transform:translate(16px,-12px)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes dotIn{to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulseRing{0%,100%{r:28;opacity:.15}50%{r:42;opacity:.04}}
@keyframes dataFlow{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.au{animation:fadeUp .65s var(--ease) both}
.au1{animation-delay:.08s}.au2{animation-delay:.16s}.au3{animation-delay:.24s}.au4{animation-delay:.32s}
/* Reveal system — snappy, premium feel (visible by default, JS enhances via .js-ready) */
.rv,.rv-l,.rv-r,.rv-scale{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.js-ready .rv:not(.in){opacity:0;transform:translateY(12px)}
.js-ready .rv-l:not(.in){opacity:0;transform:translateX(-12px)}
.js-ready .rv-r:not(.in){opacity:0;transform:translateX(12px)}
.js-ready .rv-scale:not(.in){opacity:0;transform:scale(.97)}
.rv.in,.rv-l.in,.rv-r.in,.rv-scale.in{opacity:1;transform:none}
.rv.d1,.rv-l.d1,.rv-r.d1{transition-delay:.06s}
.rv.d2,.rv-l.d2,.rv-r.d2{transition-delay:.12s}
.rv.d3{transition-delay:.18s}.rv.d4{transition-delay:.24s}

/* ─── SHIMMER GRADIENT TEXT ─── */
.hero h1 em,.ph h1 em,.page-hero h1 em,.sh h2 em,.prod-cta h2 em,.cta-sect h2 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--teal),var(--lime),var(--teal));
  background-size:200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer-move 6s linear infinite;
}

/* ─── BUTTONS (Apple-grade) ─── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:11px 22px;border-radius:100px;border:none;cursor:pointer;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);letter-spacing:-.005em;white-space:nowrap;will-change:transform}
.btn-lg{padding:14px 30px;font-size:15px}
.btn:active{transform:scale(0.96)!important;transition:transform .1s var(--ease-out)!important}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.btn-dark{background:linear-gradient(135deg,var(--teal),var(--lime));color:#050D1A;font-weight:600;box-shadow:0 4px 18px rgba(45,212,217,.18),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-dark:hover{box-shadow:0 10px 32px rgba(45,212,217,.32),inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.05)}
.btn-outline{background:rgba(255,255,255,.02);color:#E5EAF5;border:1px solid rgba(255,255,255,.14)}
.btn-outline:hover{border-color:rgba(45,212,217,.5);color:var(--teal);background:rgba(45,212,217,.08)}
.btn-green{background:linear-gradient(135deg,var(--lime),var(--teal));color:#050D1A;font-weight:700}
.btn-green:hover{filter:brightness(1.05);box-shadow:0 8px 24px rgba(74,222,153,.25)}
.btn-teal{background:linear-gradient(135deg,var(--teal),var(--lime));color:#050D1A;font-weight:700}
.btn-teal:hover{filter:brightness(1.05)}
/* Clinical Intelligence primary button (was amber, now periwinkle) */
.btn-amber{background:var(--periwinkle);color:#050D1A;font-weight:700}
.btn-amber:hover{background:#A4B4FF;filter:brightness(1.03)}

/* ─── PAGE ROUTING ─── */
.page{display:none}
.page.active{display:block}

/* ─── NAV ─── */
/* Nav base: transparent shell, backdrop lives on ::before pseudo-element so
   blur repaints are isolated and don't leak as flickers at the nav edge. */
nav:not(.mm-body){position:fixed;top:0;left:0;right:0;z-index:900;height:84px !important;min-height:84px !important;background:transparent;border-bottom:1px solid transparent}
nav:not(.mm-body)::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,13,26,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);transition:background .25s ease;will-change:background}
nav.nav-scrolled::before{background:rgba(5,13,26,.97)}

/* Mobile: iOS Safari (and Chrome-on-iOS, which is WebKit) re-composites
   backdrop-filter on every scroll frame for position:fixed elements, which
   produces the flicker the user kept reporting. On phones we drop the blur
   entirely and use a solid background — the glass effect is a desktop-only
   polish here. */
@media(max-width:768px){
  nav:not(.mm-body)::before{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(5,13,26,.92) !important;
  }
  nav.nav-scrolled::before{background:rgba(5,13,26,.98) !important}
}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:901;pointer-events:none}
.scroll-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--lime));transform-origin:left;transition:width .08s linear;box-shadow:0 0 12px rgba(74,222,153,.4)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.nav-logo{display:flex;align-items:center;cursor:pointer;flex-shrink:0;gap:10px;text-decoration:none;color:inherit}
.nav-logo:hover{opacity:.88}
.nav-logo .logo-mark{height:34px;width:34px;display:block;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.nav-logo .logo-word{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--ink);line-height:1;white-space:nowrap}
@media(max-width:520px){.nav-logo .logo-mark{height:30px;width:30px}.nav-logo .logo-word{font-size:18px}}
@media(max-width:380px){.nav-logo .logo-word{display:none}}
.nav-links{display:flex;align-items:center;gap:0px}
.nl{font-size:15px;font-weight:500;color:rgba(240,244,255,.68);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .18s;white-space:nowrap;position:relative}
.nl:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.nl::after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:1.5px;background:var(--teal);transition:width .2s var(--ease),left .2s var(--ease)}
.nl:hover::after{width:60%;left:20%}

/* ─── Current-page indicator ─── */
/* Desktop nav: the link matching the current route gets brand-green colour,
   a soft tint background, and a persistent underline bar. JS in app.js
   tags the matching link with .is-active at DOMContentLoaded. */
.nl.is-active,
.nav-dd-trigger.is-active{
  color:var(--green);
  background:rgba(74,222,153,.08);
}
.nl.is-active::after,
.nav-dd-trigger.is-active + .nav-dd-chevron::after{
  width:60%;left:20%;
  background:var(--green);
  box-shadow:0 0 8px rgba(74,222,153,.45);
}
/* Fallback: for .nav-dd-trigger (doesn't have ::after from .nl), put the
   underline on the trigger itself via a pseudo-element. */
.nav-dd-trigger{position:relative}
.nav-dd-trigger.is-active::after{
  content:"";position:absolute;bottom:2px;left:20%;
  width:60%;height:1.5px;
  background:var(--green);
  box-shadow:0 0 8px rgba(74,222,153,.45);
}

/* Mobile menu: active link gets green name + left accent bar */
.mm-link.is-active{background:rgba(74,222,153,.05)}
.mm-link.is-active .mm-link-name{color:var(--green)}
.mm-link.is-active::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:3px;background:var(--green);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(74,222,153,.5);
}
.nav-right{display:flex;align-items:center;gap:10px}
@media(max-width:768px){.nav-links{display:none}.nav-inner{padding:0 24px}}

/* ─── PRODUCTS DROPDOWN (nav-dd) ───────────────────────────────────────────
   Apple-grade interaction. 80ms hover-open, 180ms close grace, glass panel.
   Timing: open cubic-bezier(.32,.72,0,1) / close cubic-bezier(.4,0,.68,1).
   A11y: role=menu + role=menuitem + aria-expanded + ArrowUp/Down/Esc/Home/End.
   ─────────────────────────────────────────────────────────────────────────── */
.nav-dd{position:relative;display:inline-block}
.nav-dd-trigger{
  background:none;border:0;padding:8px 16px;margin:0;cursor:pointer;
  font:inherit;font-size:15px;font-weight:500;letter-spacing:-.015em;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:rgba(240,244,255,.68);border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  transition:color .2s var(--ease-out),background .2s var(--ease-out)
}
.nav-dd-trigger:hover,
.nav-dd-trigger[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.04)}
.nav-dd-trigger:focus-visible{outline:2px solid rgba(45,212,217,.55);outline-offset:2px}
.nav-dd-chevron{transition:transform .24s cubic-bezier(.32,.72,0,1);transform-origin:center;opacity:.7}
.nav-dd-trigger[aria-expanded="true"] .nav-dd-chevron{transform:rotate(180deg);opacity:1}

.nav-dd-panel{
  position:absolute;top:calc(100% + 10px);left:0;
  width:min(420px,calc(100vw - 32px));
  /* Near-opaque base (.97) — blur was imperceptible at this opacity but was
     the source of repaint flicker as content scrolled underneath. Dropped. */
  background:rgba(6,12,24,.97);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:6px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 50px 120px -30px rgba(45,212,217,.2);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;
  pointer-events:none;visibility:hidden;
  transition:opacity .18s cubic-bezier(.4,0,.68,1),
             transform .18s cubic-bezier(.4,0,.68,1),
             visibility 0s linear .18s;
  z-index:100
}
/* Fallback for browsers without backdrop-filter support — go fully opaque
   so there is zero bleed-through. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-dd-panel{background:rgba(6,12,24,1)}
}
.nav-dd.is-open .nav-dd-panel{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;
  transition:opacity .28s cubic-bezier(.32,.72,0,1),
             transform .28s cubic-bezier(.32,.72,0,1),
             visibility 0s
}

.nav-dd-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;min-height:56px;
  border-radius:11px;
  text-decoration:none;color:inherit;
  position:relative;outline:none;
  transition:background .18s var(--ease-out)
}
.nav-dd-item + .nav-dd-item{margin-top:2px}
.nav-dd-item:hover,.nav-dd-item:focus-visible{background:rgba(255,255,255,.05)}
.nav-dd-item:focus-visible{box-shadow:inset 0 0 0 2px rgba(45,212,217,.45)}

.nav-dd-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 4px 12px -3px rgba(0,0,0,.35)
}
.nav-dd-body{flex:1;min-width:0;display:flex;flex-direction:column}
.nav-dd-eyebrow{
  font:700 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,244,255,.45);margin-bottom:4px
}
.nav-dd-name{
  font:600 15px/1.25 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;
  color:var(--ink)
}
.nav-dd-desc{
  font:400 12px/1.45 'DM Sans',sans-serif;
  color:rgba(240,244,255,.55);margin-top:3px
}
.nav-dd-arrow{
  flex-shrink:0;color:rgba(240,244,255,.28);
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),color .2s var(--ease-out)
}
.nav-dd-item:hover .nav-dd-arrow,
.nav-dd-item:focus-visible .nav-dd-arrow{opacity:1;transform:translateX(0);color:var(--teal)}

/* Desktop dropdown hides in the sub-900px range; mobile uses the .mobile-menu instead. */
@media(max-width:900px){.nav-dd{display:none}}

/* Reduced motion — honour user preference */
@media(prefers-reduced-motion:reduce){
  .nav-dd-panel,.nav-dd-chevron,.nav-dd-arrow,.nav-dd-trigger,.nav-dd-item{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
.tag-green{background:var(--greenl);color:var(--green);border:1px solid rgba(74,222,153,.2)}
.tag-teal{background:var(--teall);color:var(--teal);border:1px solid rgba(45,212,217,.2)}

/* ─── HERO ─── */
.hero{padding:148px 0 0;position:relative;overflow:hidden}
.hero-inner{max-width:900px;margin:0 auto;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;justify-content:center;padding:6px 14px;border:1px solid rgba(45,212,217,.22);border-radius:100px;background:rgba(45,212,217,.05)}
.hero-eyebrow .label{color:#D1D5DB;font-size:10px}
.hero-eyebrow .label::before{display:none}
.hero-pulse{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.2s ease infinite}
.hero h1{font-size:clamp(42px,6.2vw,88px);margin-bottom:20px;line-height:1.02;letter-spacing:-.042em;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800}
.hero-sub{font-size:19px;font-weight:400;color:#D1D5DB;line-height:1.55;max-width:680px;margin:0 auto 40px;letter-spacing:-.005em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px;justify-content:center}
.hero-stats{border-top:1px solid var(--border);padding-top:40px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.hstat{padding:0 24px;border-right:1px solid var(--border)}
.hstat:last-child{border-right:none}
.hstat-n{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;margin-bottom:8px;background:linear-gradient(135deg,var(--ink),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hstat-l{font-size:13px;color:#CCCCCC;line-height:1.5}
@media(max-width:768px){.hero-stats{grid-template-columns:1fr 1fr}.hstat{padding:18px 20px;border-right:none;border-bottom:1px solid var(--border)}}

/* ─── HERO SVG VISUAL (Apple Health style) ─── */
.hero-visual-wrap{width:100%;max-width:1200px;margin:56px auto 0;position:relative;padding:0 24px;aspect-ratio:1200/320;display:block}
.hero-visual-wrap svg{display:block;width:100%;height:100%}

/* Continuous ECG trace — traces left→right, fades gently, loops softly */
.ecg-trace{
  stroke-dasharray:2400;
  stroke-dashoffset:2400;
  animation:ecgDraw 9s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes ecgDraw{
  0%   {stroke-dashoffset:2400;opacity:0}
  10%  {opacity:1}
  60%  {stroke-dashoffset:0;opacity:1}
  90%  {stroke-dashoffset:0;opacity:0}
  100% {stroke-dashoffset:2400;opacity:0}
}

/* Soft echo behind the primary trace */
.ecg-echo{
  animation:ecgBreath 4.5s ease-in-out infinite;
}
@keyframes ecgBreath{
  0%,100% {opacity:.08}
  50%     {opacity:.22}
}

/* Center anchor dot — subtle, slow heartbeat */
.ecg-anchor{
  transform-origin:670px 120px;
  transform-box:fill-box;
  animation:anchorBeat 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes anchorBeat{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(74,222,153,0))}
  30%    {transform:scale(1.35);filter:drop-shadow(0 0 8px rgba(74,222,153,.55))}
  60%    {transform:scale(1)}
}

.ecg-ring{
  transform-origin:670px 120px;
  transform-box:fill-box;
  animation:ringExpand 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ringExpand{
  0%,70%,100% {transform:scale(.6);opacity:0}
  30%         {transform:scale(1);opacity:.35}
  50%         {transform:scale(1.9);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .ecg-trace,.ecg-echo,.ecg-anchor,.ecg-ring{animation:none}
  .ecg-trace{stroke-dashoffset:0}
}


/* ─── HERO LOAD STAGGER ─── */
.hero .hero-inner{animation:heroReveal .8s var(--ease) both}
@keyframes heroReveal{from{opacity:0;transform:translateY(0)}to{opacity:1}}
.hero-eyebrow.au{animation-duration:.5s}
.hero h1.au{animation-duration:.7s;animation-delay:.06s}
.hero .hero-sub.au{animation-duration:.7s;animation-delay:.14s}
.hero-ctas.au{animation-duration:.6s;animation-delay:.22s}
.hero-stats.au{animation-duration:.7s;animation-delay:.30s}


/* ─── SPACING & LINE HEIGHT (single source of truth below) ─── */
.section .wrap,.section-tinted .wrap{position:relative;z-index:1}
body{line-height:1.7;color:#E0E0E0}
.num-item p,.feat-card p,.rs-card p,.serve-card p,.prod-card>p{line-height:1.6;color:#D1D5DB;font-size:15px}
.page-hero p,.ph-sub{font-size:17px;font-weight:400;color:#D1D5DB;line-height:1.7;max-width:620px}

/* ─── CENTERED SECTION HEADER (Apple-style) ─── */
.sh-center{text-align:center;margin-left:auto;margin-right:auto;max-width:860px}
.sh-center .label{justify-content:center}
.sh-center .label::before{display:none}
.sh-center .label{padding-left:0;font-size:11px;color:var(--teal)}
.sh-center h2{max-width:860px;margin-left:auto;margin-right:auto}
.sh-center p{margin-left:auto;margin-right:auto;text-align:center;max-width:620px}


/* ─── SCROLL BEHAVIOUR ─── */
html{scroll-behavior:smooth}
/* Smooth snap between main sections on homepage */
#page-home .section,#page-home .section-tinted,#page-home .hero,#page-home .cta-sect{scroll-margin-top:64px}


/* ─── HAMBURGER MENU ─── */
.ham-line{display:block;width:22px;height:1.5px;background:var(--ink2);border-radius:2px;transition:all .25s var(--ease)}
.mm-link:last-of-type{border-bottom:none}
.mm-ctas .btn{justify-content:center;width:100%;padding:14px}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .nav-right{gap:6px}
}

/* ─── PATTERNS ─── */
.glow-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.glow-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.08;pointer-events:none}
.orb-teal{background:radial-gradient(circle,rgba(45,212,217,.3),transparent 70%);width:420px;height:420px}
.orb-green{background:radial-gradient(circle,rgba(74,222,153,.22),transparent 70%);width:340px;height:340px;animation-delay:-7s}
.orb-amber{background:radial-gradient(circle,rgba(139,159,255,.22),transparent 70%);width:300px;height:300px}
.dot-pattern{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);background-size:28px 28px}
.dot-pattern-sm{background-size:20px 20px}
.line-pattern{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px}
.stripe-pattern{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent,transparent 14px,rgba(255,255,255,.012) 14px,rgba(255,255,255,.012) 15px)}


/* ══════════ SCROLL-SNAP REVEAL SYSTEM ══════════ */
/* Key sections snap into view with min-height fill */

.snap-section.compact {
  min-height: auto;
  padding: 120px 0;
}

/* Reveal: sections animate in from slightly below */
@keyframes sectionReveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-reveal { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.section-reveal.sr-in { opacity: 1 !important; transform: none !important; }
.rv,.rv-l,.rv-r,.rv-scale { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }

/* ══════════ ALIGNMENT SYSTEM (8pt grid, firm consistency) ══════════ */
/* Every card variant uses one of three padding buckets: sm(24/24), md(32/28), lg(40/32) */
.prod-card  { padding: 40px 32px; }
.feat-card  { padding: 32px 28px; }
.rs-card    { padding: 32px 28px; }
.serve-card { padding: 32px 24px; }
.testi-card { padding: 32px 28px; }
.pt-card    { padding: 32px 28px; }
.ben-card,.val-card { padding: 32px 28px; }
.num-item   { padding: 24px 0; gap: 24px; }
.step-item  { padding: 24px 0; gap: 24px; }
.metric-card { padding: 24px 28px; gap: 24px; }
.cta-card { padding: 24px 24px; }
.r-area-card,.r-pil-card { padding: 28px 24px; }

/* Section heading — single bucket */
.sh h2 { margin-bottom: 0; }

/* Two-col — single bucket */
.two-col { gap: 80px; }

/* Grid gaps — single bucket where gap is used */
.testi-grid { gap: 20px; }
.metric-stack { gap: 12px; }

/* ══════════ FULL-SCREEN SECTIONS ══════════ */






/* ─── SECTIONS (Apple rhythm) ─── */
.section{padding:140px 0;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.section-tinted{padding:140px 0;background:linear-gradient(180deg,rgba(11,21,41,.35) 0%,rgba(11,21,41,.6) 50%,rgba(11,21,41,.35) 100%);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.section .wrap,.section-tinted .wrap{position:relative;z-index:1}
.sh{margin-bottom:72px}
.sh .label{margin-bottom:18px}
.sh h2{font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.032em;font-weight:800}
.sh p{font-size:18px;font-weight:400;color:#E0E0E0;max-width:620px;margin-top:22px;line-height:1.55;letter-spacing:-.005em}

/* ─── PRODUCT GRID (Apple-grade lift) ─── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;background:transparent;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.prod-card{padding:48px 36px;border-right:1px solid var(--border);cursor:pointer;transition:background var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(15,30,56,.55) 0%,rgba(11,21,41,.35) 100%);display:flex;flex-direction:column}
.prod-card:last-child{border-right:none}
.prod-card::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(45,212,217,.14),transparent 70%);opacity:0;transition:opacity var(--dur-slow) var(--ease-out);pointer-events:none}
.prod-card:hover{background:linear-gradient(180deg,rgba(15,30,56,.8) 0%,rgba(11,21,41,.55) 100%);box-shadow:inset 0 0 0 1px rgba(45,212,217,.18),0 20px 48px -20px rgba(45,212,217,.18)}
.prod-card:hover::after{opacity:1}
.prod-tag{display:inline-block;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:100px;margin-bottom:18px}
.tag-g{background:var(--greenl);color:var(--green);border:1px solid rgba(74,222,153,.22)}
.tag-t{background:var(--teall);color:var(--teal);border:1px solid rgba(45,212,217,.22)}
.tag-a{background:var(--periwinklel);color:var(--periwinkle);border:1px solid rgba(139,159,255,.24)}
.prod-card h3{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px;font-family:'Plus Jakarta Sans',sans-serif;color:#fff}
.prod-card p{font-size:15px;color:#D1D5DB;line-height:1.6;font-weight:400;margin-bottom:28px}
.prod-img{width:100%;height:180px;object-fit:cover;display:block;opacity:.32;mix-blend-mode:luminosity;border-radius:10px;margin-top:auto;transition:opacity var(--dur-slow) var(--ease-out)}
.prod-card:hover .prod-img{opacity:.5}

/* Typography-led product stat — replaces abstract SVG imagery */
.prod-stat{margin:auto 0 22px;padding:28px 0 24px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px}
.prod-stat-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(44px,4.2vw,60px);line-height:.95;letter-spacing:-.04em}
.prod-stat-l{font-size:13px;color:#C5CDDB;line-height:1.5;font-weight:400;letter-spacing:-.005em}

.prod-link{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur) var(--ease-out)}
.prod-card:hover .prod-link{gap:12px}
@media(max-width:768px){.prod-grid{grid-template-columns:1fr}.prod-card{border-right:none;border-bottom:1px solid var(--border)}}

/* ─── TWO COL ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.two-col-c{align-items:center}
.two-col-divided{position:relative}
.two-col-divided::before{content:"";position:absolute;top:8%;bottom:8%;left:50%;width:1px;background:linear-gradient(to bottom,transparent,rgba(45,212,217,.55) 15%,rgba(74,222,153,.55) 85%,transparent);transform:translateX(-50%);pointer-events:none}
.two-col-divided::after{content:"";position:absolute;top:46%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--teal);transform:translate(-50%,-50%);box-shadow:0 0 16px rgba(45,212,217,.8);pointer-events:none}
@media(max-width:1024px){.two-col{grid-template-columns:1fr;gap:56px}.two-col-divided::before,.two-col-divided::after{display:none}}

/* ─── NUMBER LIST ─── */
.num-list{display:flex;flex-direction:column}
.num-item{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--border);align-items:start;transition:border-color .2s}
.num-item:last-child{border-bottom:none}
.num-item:hover{border-color:var(--border2)}
.num-n{font-size:11px;color:var(--ink4);padding-top:4px;font-weight:400;letter-spacing:.05em}
.num-item:hover .num-n{color:var(--teal)}
.num-item h4{font-size:15px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.num-item p{font-size:14px;color:var(--ink2);line-height:1.68;font-weight:300}

/* ─── METRIC STACK ─── */
.metric-stack{display:flex;flex-direction:column;gap:14px}
.metric-card{display:flex;align-items:center;gap:24px;padding:26px 28px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:linear-gradient(180deg,rgba(15,30,56,.7) 0%,rgba(11,21,41,.5) 100%);transition:border-color var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
.metric-card:hover{border-color:rgba(45,212,217,.25);box-shadow:0 16px 48px -16px rgba(45,212,217,.18)}
.mc-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:38px;letter-spacing:-.04em;line-height:1;flex-shrink:0;min-width:92px}
.mc-l{font-size:15px;color:#D1D5DB;line-height:1.5;font-weight:400}

/* ─── SERVE GRID (flex-column, tag pinned to bottom for alignment across cards) ─── */
.serve-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:20px;overflow:hidden;width:100%;background:linear-gradient(180deg,rgba(15,30,56,.32) 0%,rgba(11,21,41,.18) 100%);align-items:stretch}
.serve-card{padding:36px 28px;border-right:1px solid var(--border);transition:background var(--dur-slow) var(--ease-out);background:transparent;display:flex;flex-direction:column}
.serve-card:last-child{border-right:none}
.serve-card:hover{background:rgba(15,30,56,.55)}
.serve-card h4{font-size:16px;font-weight:700;margin-bottom:10px;letter-spacing:-.015em;color:#fff}
.serve-card p{font-size:14px;color:#D1D5DB;line-height:1.6;font-weight:400}
.stag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.serve-card .stag{margin-top:auto;align-self:flex-start;padding-top:4px}
.serve-card > p + .stag,.serve-card > h4 + .stag{margin-top:24px}
@media(max-width:768px){.serve-grid{grid-template-columns:1fr 1fr}}

/* ─── RESEARCH GRID ─── */
.rs-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.rs-card{padding:32px 26px;border-right:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.rs-card:last-child{border-right:none}
.rs-card:hover{background:rgba(15,30,56,.66)}
.rs-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.rs-tag::before{content:"";display:block;width:16px;height:1px;background:currentColor}
.rs-card h4{font-size:15px;font-weight:600;margin-bottom:8px}
.rs-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.rs-grid{grid-template-columns:1fr}}

/* ─── FEATURE GRID ─── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.feat-card{padding:32px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.feat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-shrink:0}
.feat-card:nth-child(3),.feat-card:nth-child(6){border-right:none}
.feat-card:nth-child(4),.feat-card:nth-child(5),.feat-card:nth-child(6){border-bottom:none}
.feat-card:hover{background:rgba(15,30,56,.66)}
.feat-card h4{font-size:14px;font-weight:600;margin-bottom:7px}
.feat-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.feat-grid{grid-template-columns:1fr}.feat-card{border-right:none}}

/* ─── STEPS ─── */
.steps-wrap{max-width:760px;margin:0 auto}
.step-item{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--border);align-items:start;transition:border-color .2s}
.step-item:last-child{border-bottom:none}
.step-item:hover{border-color:var(--border2)}
.step-n{font-size:11px;color:var(--ink4);padding-top:3px;letter-spacing:.06em}
.step-item:hover .step-n{color:var(--teal)}
.step-item h4{font-size:15px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.step-item p{font-size:13px;color:var(--ink2);line-height:1.68;font-weight:300}

/* ─── TIMELINE ─── */
.tl-wrap{padding-left:120px;position:relative}
.tl-wrap::before{content:"";position:absolute;left:88px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--border) 10%,var(--border) 90%,transparent)}
.tl-item{position:relative;padding:24px 0;border-bottom:1px solid var(--border)}
.tl-item:last-child{border-bottom:none}
.tl-m{position:absolute;left:-120px;top:28px;width:110px;text-align:right;padding-right:28px}
.tl-m::after{content:"";position:absolute;right:-5px;top:6px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--teal);background:var(--cream2)}
.tl-d{font-size:10px;font-weight:600;color:var(--teal);letter-spacing:.06em}
.tl-ph{font-size:10px;color:var(--ink3);margin-top:2px}
.tl-c{padding:20px 22px;background:rgba(15,30,56,.7);border:1px solid rgba(255,255,255,.07);border-radius:12px}
.tl-c h4{font-size:14px;font-weight:600;margin-bottom:6px}
.tl-c p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
.tl-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tl-tag{font-size:10px;color:var(--ink3);border:1px solid var(--border);padding:2px 9px;border-radius:100px}
@media(max-width:768px){.tl-wrap{padding-left:0}.tl-wrap::before{display:none}.tl-m{position:static;text-align:left;padding-right:0;margin-bottom:8px}.tl-m::after{display:none}}

/* ─── PRICING ─── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.price-card{padding:32px 28px;border-right:1px solid var(--border);transition:background .2s;background:rgba(15,30,56,.4)}
.price-card:last-child{border-right:none}
.price-card.pop{background:rgba(240,244,255,.96);color:#050D1A}
.price-card:not(.pop):hover{background:rgba(15,30,56,.7)}
.price-tier{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.price-card.pop .price-tier{color:rgba(5,13,26,.5)}
.price-name{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:4px;font-family:'Plus Jakarta Sans',sans-serif}
.price-sub{font-size:12px;color:var(--ink3);margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.price-card.pop .price-sub{color:rgba(5,13,26,.5);border-color:rgba(5,13,26,.12)}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.prf{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:8px;font-weight:300}
.price-card.pop .prf{color:rgba(5,13,26,.7)}
.prf-y{color:var(--teal);font-weight:600;font-size:12px}
.price-card.pop .prf-y{color:#0077b6}
.prf-n{color:var(--ink4)}
@media(max-width:768px){.price-grid{grid-template-columns:1fr}.price-card{border-right:none;border-bottom:1px solid var(--border)}}

/* ─── FEE GRID ─── */
.fee-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.fee-card{padding:32px 26px;border-right:1px solid var(--border);text-align:center;transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column;align-items:center}
.fee-card:last-child{border-right:none}
.fee-card:hover{background:rgba(15,30,56,.7)}
.fee-card.hi{border-top:2px solid #fbbf24}
.fee-ph{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.fee-name{font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:8px;font-family:'Plus Jakarta Sans',sans-serif}
.fee-desc{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.fee-grid{grid-template-columns:1fr}.fee-card{border-right:none;border-bottom:1px solid var(--border)}}

/* ─── BENEFIT GRID ─── */
.ben-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.ben-card{padding:30px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.ben-card:nth-child(2){border-right:none}
.ben-card:nth-child(3),.ben-card:nth-child(4){border-bottom:none}
.ben-card:nth-child(4){border-right:none}
.ben-card:hover{background:rgba(15,30,56,.7)}
.ben-card h4{font-size:14px;font-weight:600;margin-bottom:7px}
.ben-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.ben-grid{grid-template-columns:1fr}.ben-card{border-right:none}}

/* ─── PROBLEM GRID ─── */
.prob-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.prob-card{padding:28px 22px;border-right:1px solid var(--border);background:rgba(15,30,56,.4);transition:background .5s var(--ease-out);display:flex;flex-direction:column}
.prob-card:last-child{border-right:none}
.prob-card:hover{background:rgba(15,30,56,.7)}
.prob-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:36px;letter-spacing:-.04em;line-height:1;color:var(--teal);margin-bottom:8px}
.prob-t{font-size:13px;font-weight:600;margin-bottom:5px}
.prob-d{font-size:12px;color:var(--ink2);line-height:1.55;font-weight:300}
@media(max-width:768px){.prob-grid{grid-template-columns:1fr 1fr}}

/* ─── ROAD / TEAM / VAL GRIDS ─── */
.road-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.road-card{padding:28px 22px;border-right:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.road-card:last-child{border-right:none}
.road-card:hover{background:rgba(15,30,56,.7)}
.road-stage{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-family:'JetBrains Mono',monospace;color:var(--ink3)}
.road-yr{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:26px;line-height:1;margin-bottom:7px;letter-spacing:-.04em}
.road-arr{font-size:11px;color:var(--teal);margin-bottom:10px;font-weight:500;letter-spacing:.03em}
.road-card p{font-size:12px;color:var(--ink2);line-height:1.6;font-weight:300}
@media(max-width:768px){.road-grid{grid-template-columns:1fr 1fr}.road-card{border-bottom:1px solid var(--border)}}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.team-card{padding:24px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.team-card:nth-child(3),.team-card:nth-child(6){border-right:none}
.team-card:nth-child(4),.team-card:nth-child(5),.team-card:nth-child(6){border-bottom:none}
.team-card:hover{background:rgba(15,30,56,.7)}
.tav{width:56px;height:56px;border-radius:14px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.02em;color:#050D1A;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 20px -8px rgba(0,0,0,.55);position:relative;overflow:hidden}
.tav::before{content:"";position:absolute;inset:3px;border-radius:11px;border:1px solid rgba(255,255,255,.08);pointer-events:none;z-index:2}
.tav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.team-card h4{font-size:13px;font-weight:600;margin-bottom:3px}
.team-role{font-size:11px;color:var(--teal);font-weight:500;margin-bottom:6px}
.team-card p{font-size:11px;color:var(--ink3);line-height:1.55;font-weight:300}
@media(max-width:768px){.team-grid{grid-template-columns:1fr 1fr}}

.val-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.val-card{padding:28px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.val-card:nth-child(3),.val-card:nth-child(6){border-right:none}
.val-card:nth-child(4),.val-card:nth-child(5),.val-card:nth-child(6){border-bottom:none}
/* When the grid holds exactly 3 cards (Design Charter), keep them on one row
   with no bottom borders — there is no row underneath. */
.val-grid:has(> .val-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.val-grid:has(> .val-card:nth-child(3):last-child) .val-card{border-bottom:none}
.val-card:hover{background:rgba(15,30,56,.7)}
.val-num{font-size:10px;color:var(--ink4);margin-bottom:12px;letter-spacing:.06em}
.val-card h4{font-size:14px;font-weight:600;margin-bottom:7px}
.val-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
.val-ico{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(45,212,217,.08);border:1px solid rgba(45,212,217,.18);color:var(--teal);margin-bottom:14px;transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}
.val-card:hover .val-ico{background:rgba(45,212,217,.14);border-color:rgba(45,212,217,.32)}
@media(max-width:768px){.val-grid{grid-template-columns:1fr}}

/* ─── RESEARCH AREA / STAT GRIDS ─── */
.r-area-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.r-area-card{padding:28px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.r-area-card:nth-child(2){border-right:none}
.r-area-card:nth-child(3),.r-area-card:nth-child(4){border-bottom:none}
.r-area-card:nth-child(4){border-right:none}
.r-area-card:hover{background:rgba(15,30,56,.7)}
.r-area-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.r-area-card h4{font-size:14px;font-weight:600;margin-bottom:7px}
.r-area-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.r-area-grid{grid-template-columns:1fr}}

.r-pil-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.r-pil-card{padding:28px 24px;border-right:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.r-pil-card:last-child{border-right:none}
.r-pil-card:hover{background:rgba(15,30,56,.7)}
.r-pil-n{font-size:10px;color:var(--ink4);margin-bottom:12px}
.r-pil-card h4{font-size:14px;font-weight:600;margin-bottom:7px}
.r-pil-card p{font-size:13px;color:var(--ink2);line-height:1.65;font-weight:300}
@media(max-width:768px){.r-pil-grid{grid-template-columns:1fr}}

.r-stat-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.r-stat{padding:20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(15,30,56,.4)}
.r-stat:nth-child(2){border-right:none}
.r-stat:nth-child(3),.r-stat:nth-child(4){border-bottom:none}
.r-stat:nth-child(4){border-right:none}
.r-stat-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:26px;line-height:1;letter-spacing:-.04em;margin-bottom:4px}
.r-stat-l{font-size:11px;color:var(--ink2);font-weight:300}

/* ─── PARTNER GRID ─── */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%}
.pt-card{padding:32px 26px;border-right:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.pt-card > .btn,.pt-card button.btn{margin-top:auto;align-self:flex-start}
.pt-card:last-child{border-right:none}
.pt-card:hover{background:rgba(15,30,56,.7)}
.pt-card h4{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em;font-family:'Plus Jakarta Sans',sans-serif}
.pt-card p{font-size:13px;color:var(--ink2);line-height:1.65;margin-bottom:16px;font-weight:300}
@media(max-width:768px){.pt-grid{grid-template-columns:1fr}}

/* ─── CONTACT ─── */
.contact-block{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.ci h2{font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.04em;margin-bottom:12px;font-family:'Plus Jakarta Sans',sans-serif}
.ci>p{font-size:14px;color:var(--ink2);line-height:1.75;margin-bottom:28px;font-weight:300}
.contact-items{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(15,30,56,.4)}
.ci-item{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);transition:background .15s}
.ci-item:last-child{border-bottom:none}
.ci-item:hover{background:rgba(15,30,56,.7)}
.ci-item h4{font-size:11px;color:var(--ink3);margin-bottom:2px;font-weight:500;text-transform:uppercase;letter-spacing:.07em}
.ci-item a,.ci-item p{font-size:14px;color:var(--ink);font-weight:500;transition:color .15s}
.ci-item a:hover{color:var(--teal)}
.ci-ico{width:36px;height:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(45,212,217,.08);border:1px solid rgba(45,212,217,.16);color:var(--teal);flex-shrink:0}
.form-wrap{border:1px solid var(--border);border-radius:16px;padding:32px;background:rgba(15,30,56,.7)}
.form-wrap h3{font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:20px;font-family:'Plus Jakarta Sans',sans-serif}
.form-fields{display:flex;flex-direction:column;gap:14px}
.ff{display:flex;flex-direction:column;gap:5px}
.ff label{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.07em}
.fi{width:100%;padding:11px 14px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .18s,background .18s}
.fi:focus{border-color:var(--teal);background:rgba(45,212,217,.04);box-shadow:0 0 0 3px rgba(45,212,217,.15)}
.fi::placeholder{color:var(--ink4)}
.fta{resize:vertical;min-height:96px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fsel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238a9bb5' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}

/* iOS Safari auto-zooms on input focus when computed font-size < 16px.
   Lift all form controls to 16px on ≤768px so iOS skips the zoom animation
   that makes the page feel broken after users tap a field. We also bump
   touch target minimum height so controls remain easy to hit. */
@media(max-width:768px){
  .fi,.fta,.fsel,
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="search"],input[type="number"],input[type="password"],input[type="date"],
  textarea,select{
    font-size:16px !important;
    min-height:44px;
  }
  .fta{min-height:108px}
}
@media(max-width:1024px){.contact-block{grid-template-columns:1fr}}
@media(max-width:768px){.frow2{grid-template-columns:1fr}}

/* ─── MODAL ─── */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);z-index:9999;align-items:center;justify-content:center;padding:24px}
.modal-ov.open{display:flex}
.modal-box{background:rgba(11,21,41,.96);border:1px solid rgba(255,255,255,.12);border-radius:18px;width:100%;max-width:480px;position:relative;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,.5);backdrop-filter:blur(20px)}
.modal-box-vid{max-width:760px}
.modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--ink2);width:30px;height:30px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:1}
.modal-close:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.mhdr{padding:32px 32px 0;text-align:center}
.mhdr-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.mhdr h3{font-size:20px;font-weight:700;letter-spacing:-.03em;margin-bottom:5px;font-family:'Plus Jakarta Sans',sans-serif}
.mhdr p{font-size:13px;color:var(--ink2);font-weight:300}
.mbdy{padding:24px 32px 32px}
.mform{display:flex;flex-direction:column;gap:12px}
.mf{display:flex;flex-direction:column;gap:5px}
.mf label{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.07em}
.mi{width:100%;padding:11px 13px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:13px;outline:none;transition:border-color .18s}
.mi:focus{border-color:var(--teal);background:rgba(45,212,217,.04)}
.mi::placeholder{color:var(--ink4)}
.mta{resize:vertical;min-height:80px}
.mr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238a9bb5' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.m-ok{text-align:center;padding:16px 0}
.m-ok-icon{width:48px;height:48px;border-radius:50%;background:rgba(74,222,153,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.m-ok h4{font-size:17px;font-weight:700;margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif}
.m-ok p{font-size:13px;color:var(--ink2);line-height:1.6;font-weight:300}
.vid-wrap-m{border-radius:18px;overflow:hidden;background:#000}
.vid-wrap-m iframe{width:100%;aspect-ratio:16/9;display:block;border:none}
.vid-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 22px}
.vid-foot h4{font-size:14px;font-weight:600}
.vid-foot p{font-size:12px;color:var(--ink2)}
@media(max-width:768px){.mr2{grid-template-columns:1fr}.modal-box{max-width:100%}}

/* ─── PAGE HERO ─── */
.page-hero,.ph{padding:104px 0 72px;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
/* Ensure page-hero wrap uses the exact same padding/max-width as nav-inner — prevents horizontal drift */
.page-hero .wrap,.ph .wrap{max-width:var(--max);margin:0 auto;padding:0 48px;width:100%;box-sizing:border-box}
@media(max-width:1200px){.page-hero .wrap,.ph .wrap{padding:0 32px}}
@media(max-width:900px){.page-hero .wrap,.ph .wrap{padding:0 20px}}
@media(max-width:600px){.page-hero .wrap,.ph .wrap{padding:0 16px}}
.page-hero .wrap,.ph .wrap{position:relative;z-index:1}
.page-hero h1,.ph h1,.ph-h{font-size:clamp(38px,5.2vw,72px);margin-bottom:20px;max-width:860px;line-height:1.04;letter-spacing:-.038em;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800}
.page-hero p,.ph-sub{font-size:17px;font-weight:400;color:#D1D5DB;line-height:1.55;max-width:600px}
.ph-ey{margin-bottom:22px;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border:1px solid rgba(255,255,255,.14);border-radius:100px;background:rgba(255,255,255,.02)}
.ph-ey-text{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;color:#D1D5DB}
.ph-ey-line{display:block;width:6px;height:6px;border-radius:50%}
/* Uniform pill eyebrow for any .label inside a page hero */
.page-hero>.wrap>.label:first-child,
.ph>.wrap>.label:first-child,
.page-hero .wrap>.label:first-child,
.ph .wrap>.label:first-child{display:inline-flex;padding:6px 14px;border:1px solid rgba(45,212,217,.22);border-radius:100px;background:rgba(45,212,217,.05);color:#D1D5DB;font-size:10px;margin-bottom:22px}
.page-hero .wrap>.label:first-child::before,
.ph .wrap>.label:first-child::before{display:none}
.ph-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;margin-bottom:56px}
.ph-stats{display:flex;padding-top:52px;border-top:1px solid var(--border)}
.ph-stat{flex:1;padding:0 32px;border-right:1px solid var(--border)}
.ph-stat:first-child{padding-left:0}
.ph-stat:last-child{border-right:none}
.ph-stat-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:40px;line-height:1;letter-spacing:-.04em;margin-bottom:4px}
.ph-stat-l{font-size:12px;color:var(--ink3)}
@media(max-width:768px){.ph-stats{flex-direction:column;gap:0}.ph-stat{padding:16px 0;border-right:none;border-bottom:1px solid var(--border)}}

/* ─── PRODUCT CTA ─── */
.prod-cta{padding:96px 0;background:rgba(11,21,41,.6);border-top:1px solid var(--border);text-align:center;position:relative;overflow:hidden}
.prod-cta .wrap{position:relative;z-index:1}
.prod-cta h2{font-size:clamp(30px,4vw,48px);margin-bottom:13px}
.prod-cta>div>p{font-size:15px;color:var(--ink2);margin-bottom:28px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.68;font-weight:300}
.prod-cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ─── CTA SECTION ─── */
.cta-sect{padding:140px 0;text-align:center;position:relative;overflow:hidden}
.cta-sect .wrap{position:relative;z-index:1}.cta-sect .label{margin-bottom:28px;justify-content:center}
.cta-sect .label::before{display:none}
.cta-sect h2{font-size:clamp(36px,5vw,64px);margin-bottom:18px;margin-top:20px;letter-spacing:-.035em}
.cta-sect>p{font-size:17px;font-weight:400;color:#D1D5DB;margin-bottom:0;line-height:1.6;max-width:560px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:64px;margin-top:48px}
.cta-cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;text-align:left;width:100%;align-items:stretch}
.cta-card{padding:28px 28px;border-right:1px solid var(--border);transition:background .5s var(--ease-out);background:rgba(15,30,56,.4);display:flex;flex-direction:column}
.cta-card:last-child{border-right:none}
.cta-card:hover{background:rgba(15,30,56,.7)}
.cta-card-t{font-size:13px;font-weight:700;margin-bottom:8px;letter-spacing:.01em}
.cta-card-d{font-size:13px;color:var(--ink2);margin-bottom:20px;line-height:1.55;font-weight:400}
.cta-card > .btn{margin-top:auto;align-self:flex-start}
@media(max-width:768px){.cta-cards{grid-template-columns:1fr}.cta-card{border-right:none;border-bottom:1px solid var(--border)}}

/* ─── PREMIUM PRODUCT DEMO VIDEO ─── */
.demo-video{position:relative;max-width:1040px;margin:0 auto;border-radius:20px;overflow:hidden;background:#050D1A;box-shadow:0 40px 80px -32px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05),0 80px 140px -50px rgba(45,212,217,.22),0 -30px 100px -40px rgba(74,222,153,.12);transform:translateZ(0)}
.demo-video::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(45,212,217,.4),rgba(74,222,153,.2) 40%,rgba(255,255,255,.04) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}

/* ─── Tablet-framed variant of .demo-video (adds bezel + camera dot) ───
   Used on the PharmaDoyen desktop walkthrough to echo the iPhone-framed
   mobile walkthrough on the same page. Everything inside the bezel is the
   standard demo-video-preview — no JS changes needed. */
.demo-video--tablet{padding:22px 18px 18px;background:linear-gradient(180deg,#15192a 0%,#0a0e1c 100%);border-radius:26px}
.demo-video--tablet::before{border-radius:26px}
.demo-video--tablet::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#05080f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 2px rgba(45,212,217,.35);z-index:4;pointer-events:none}
.demo-video--tablet .demo-video-preview{border-radius:10px}
@media(max-width:640px){
  .demo-video--tablet{padding:12px 10px 10px;border-radius:18px}
  .demo-video--tablet::before{border-radius:18px}
  .demo-video--tablet::after{top:5px;width:5px;height:5px}
  .demo-video--tablet .demo-video-preview{border-radius:8px}
}
.demo-video-preview{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#050D1A;overflow:hidden;border-radius:20px;cursor:pointer;border:none;padding:0}
.demo-video-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.95);transition:filter .4s var(--ease-out)}
.demo-video-preview:hover video{filter:brightness(.88) saturate(1)}
.demo-video-preview .demo-video-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .6s var(--ease-out);filter:brightness(.78)}
.demo-video-preview.preview-ready .demo-video-poster-img,
.demo-video-preview.ready .demo-video-poster-img{opacity:0}
.demo-video-spinner{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.15);border-top-color:var(--teal);animation:spin .8s linear infinite;opacity:0;transition:opacity .25s ease;z-index:2;pointer-events:none}
.demo-video-preview.loading .demo-video-spinner{opacity:1}
.demo-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal),var(--lime));box-shadow:0 20px 48px -16px rgba(45,212,217,.55),0 0 0 8px rgba(255,255,255,.05);transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-out),opacity .4s var(--ease-out);z-index:2}
.demo-video-play svg{margin-left:4px}
.demo-video-preview:hover .demo-video-play{transform:translate(-50%,-50%) scale(1.05)}
.demo-video-preview.ready .demo-video-play{opacity:0;pointer-events:none}
.demo-video-meta{position:absolute;left:20px;bottom:18px;display:flex;align-items:center;gap:10px;z-index:2;transition:opacity .4s var(--ease-out)}
.demo-video-preview.ready .demo-video-meta{opacity:0;pointer-events:none}
.demo-video-dur{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;color:#fff;background:rgba(5,13,26,.72);backdrop-filter:blur(8px);padding:5px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
.demo-video-cap{font-size:12px;color:rgba(255,255,255,.75);font-weight:500;letter-spacing:.01em}
.demo-video{position:relative}
.demo-video video.full{display:block;width:100%;height:100%;background:#000;border-radius:20px;position:absolute;inset:0;object-fit:cover;z-index:4;opacity:0;transition:opacity .5s var(--ease-out)}
.demo-video.expanded video.full{opacity:1}
@media(max-width:768px){
  .demo-video{border-radius:14px}
  .demo-video-preview{border-radius:14px}
  .demo-video-play{width:68px;height:68px}
  .demo-video-play svg{width:24px;height:24px}
  .demo-video-meta{left:14px;bottom:12px}
  .demo-video-cap{display:none}
}

/* ─── iPHONE MOCKUP for mobile product showcase ─── */
.mobile-showcase{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;max-width:1160px;margin:0 auto}
.mobile-showcase-copy{max-width:520px}
.mobile-showcase-copy h3{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:18px;color:#fff}
.mobile-showcase-copy p{font-size:17px;color:#D1D5DB;line-height:1.55;margin-bottom:18px}
.mobile-showcase-feats{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.mobile-showcase-feat{display:flex;align-items:flex-start;gap:14px}
.mobile-showcase-feat-icon{width:36px;height:36px;border-radius:10px;background:rgba(74,222,153,.08);border:1px solid rgba(74,222,153,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mobile-showcase-feat h5{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px}
.mobile-showcase-feat p{font-size:13.5px;color:#C5CDDB;line-height:1.5;margin:0}

.iphone-frame{position:relative;width:300px;height:620px;margin:0 auto;background:#111;border-radius:48px;padding:14px;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.06),inset 0 0 0 2px rgba(255,255,255,.04),0 80px 140px -50px rgba(74,222,153,.18),0 -30px 100px -40px rgba(45,212,217,.12);aspect-ratio:300/620}
.iphone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#000;border-radius:20px;z-index:3}
.iphone-screen{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;background:linear-gradient(180deg,#080E1A 0%,#101828 100%)}
.iphone-home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4px;background:rgba(255,255,255,.4);border-radius:4px;z-index:5}
/* Real mobile video inside the phone frame */
.iphone-screen-video{position:absolute;inset:0;border:none;padding:0;background:#050D1A;cursor:pointer;overflow:hidden;border-radius:36px}
.iphone-screen-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;filter:brightness(.92) saturate(1)}
.iphone-screen-video .iphone-screen-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .5s var(--ease-out);filter:brightness(.85);border-radius:36px}
.iphone-screen-video.preview-ready .iphone-screen-poster,
.iphone-screen-video.ready .iphone-screen-poster{opacity:0}
.iphone-screen-spinner{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--teal);animation:spin .8s linear infinite;opacity:0;transition:opacity .25s ease;z-index:2;pointer-events:none}
.iphone-screen-video.loading .iphone-screen-spinner{opacity:1}
.iphone-screen-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--teal),var(--lime));box-shadow:0 14px 36px -10px rgba(45,212,217,.5),0 0 0 6px rgba(255,255,255,.06);transition:transform .4s var(--ease-spring),opacity .4s var(--ease-out);z-index:3}
.iphone-screen-play svg{margin-left:3px}
.iphone-screen-video:hover .iphone-screen-play{transform:translate(-50%,-50%) scale(1.05)}
.iphone-screen-video.preview-ready .iphone-screen-play{opacity:.92}
.iphone-screen-video.ready .iphone-screen-play{opacity:0;pointer-events:none}
.iphone-screen-video video.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;z-index:4;opacity:0;transition:opacity .5s var(--ease-out);background:#000}
.iphone-screen-video.expanded video.full{opacity:1}

@media(max-width:900px){
  .mobile-showcase{grid-template-columns:1fr;gap:56px;text-align:center}
  .mobile-showcase-copy{margin:0 auto}
  .mobile-showcase-feats{text-align:left;max-width:420px;margin:26px auto 0}
  .iphone-frame{transform:scale(.92);transform-origin:top center}
}
@media(max-width:768px){
  .iphone-frame{width:264px;height:546px;padding:12px;border-radius:42px;transform:none}
  .iphone-screen{border-radius:32px}
  .iphone-notch{width:96px;height:26px;top:16px}
}

/* ─── VIDEO (legacy) ─── */
.video-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#000}
.video-wrap iframe{width:100%;aspect-ratio:16/9;display:block;border:none}
.video-placeholder{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;background:#0B1529}
.video-placeholder img{width:100%;height:100%;object-fit:cover;opacity:.3;mix-blend-mode:luminosity;position:absolute;inset:0}
.play-btn{width:72px;height:72px;border-radius:50%;background:rgba(45,212,217,.15);border:2px solid rgba(45,212,217,.4);display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;z-index:1}
.video-placeholder:hover .play-btn{background:rgba(45,212,217,.25);transform:scale(1.06)}

/* ─── CHIP / COMPLIANCE ─── */
.chip-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px auto}
.chip{padding:8px 18px;background:rgba(15,30,56,.6);border:1px solid var(--border);border-radius:100px;font-size:13px;font-weight:500;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* ─── FOOTER ─── */
footer{padding:0;border-top:none;background:transparent;position:relative;overflow:hidden}
.foot-cta-band{padding:100px 0;background:linear-gradient(135deg,rgba(45,212,217,.06),rgba(74,222,153,.04));border-top:1px solid rgba(45,212,217,.15);border-bottom:1px solid var(--border);text-align:center;position:relative;overflow:hidden}
.foot-cta-band h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(36px,5vw,68px);letter-spacing:-.04em;line-height:1.0;margin-bottom:16px}
.foot-cta-band h2 em{font-style:normal;background:linear-gradient(90deg,var(--teal),var(--lime));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot-cta-band p{font-size:18px;color:var(--ink2);font-weight:300;margin-bottom:36px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.75}
.foot-cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
/* ─── FOOTER (premium, multi-column, top-1% pattern) ─── */
footer{background:linear-gradient(180deg,#050A12 0%,#030710 100%);border-top:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,217,.35),rgba(74,222,153,.25),transparent);pointer-events:none}
.foot-main{padding:88px 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:56px;margin-bottom:64px;align-items:start}

/* Brand column */
.foot-brand{display:flex;flex-direction:column;max-width:300px}
.foot-brand-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand-mark{display:block;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.foot-brand-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.04em}
.foot-brand-tag{font-size:14px;color:#C5CDDB;line-height:1.55;font-weight:400;margin-bottom:22px}

/* Status pill */
.foot-status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(74,222,153,.25);border-radius:100px;background:rgba(74,222,153,.05);margin-bottom:22px;align-self:flex-start}
.foot-status-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px rgba(74,222,153,.6);animation:pulse 2.4s ease infinite;flex-shrink:0}
.foot-status-text{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--lime);letter-spacing:.1em;text-transform:uppercase}

/* Social row */
.foot-social{display:flex;gap:8px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:#8A95A8;transition:color .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)}
.foot-social a:hover{color:var(--teal);background:rgba(45,212,217,.08);border-color:rgba(45,212,217,.3)}

/* Link columns */
.foot-col h5{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A95A8;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.foot-col ul li a{font-size:14px;color:#E5EAF5;transition:color .3s var(--ease-out);cursor:pointer;font-weight:500;letter-spacing:-.005em;display:inline-flex;flex-direction:column;line-height:1.35}
.foot-col ul li a:hover{color:var(--teal)}
.foot-sub{font-size:11.5px;color:#8A95A8;font-weight:400;letter-spacing:0;margin-top:2px}

/* Contact column */
.foot-contact-list li{line-height:1.55}
.foot-contact-list li a{font-weight:400}
.foot-addr{font-size:13px;color:#C5CDDB;line-height:1.6;font-weight:400;display:block;padding-top:4px}

/* Compliance strip */
.foot-compliance{display:flex;align-items:center;gap:18px;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.foot-compliance-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5A667A;white-space:nowrap}
.foot-compliance-list{display:flex;gap:6px;flex-wrap:wrap}
.foot-compliance-badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;color:#C5CDDB;padding:5px 12px;border:1px solid rgba(255,255,255,.08);border-radius:100px;background:rgba(255,255,255,.02);letter-spacing:.04em;white-space:nowrap}

/* Bottom bar */
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding:24px 0 36px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;gap:14px}
.foot-copy{font-size:12.5px;color:#5A667A;font-weight:400;letter-spacing:.01em}
.foot-legal{display:flex;gap:22px;list-style:none}
.foot-legal li a{font-size:12.5px;color:#8A95A8;font-weight:500;transition:color .3s var(--ease-out);letter-spacing:-.005em}
.foot-legal li a:hover{color:#E5EAF5}

/* Responsive */
@media(max-width:1200px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.foot-col:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.foot-col:last-child h5{grid-column:1/-1}}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:40px}.foot-brand{grid-column:1/-1;max-width:none}.foot-brand-tag{max-width:420px}.foot-col:last-child{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}.foot-col:last-child{grid-column:1/-1;grid-template-columns:1fr;gap:14px}.foot-col:last-child h5{grid-column:auto}.foot-bottom{flex-direction:column;align-items:flex-start}.foot-legal{flex-wrap:wrap;gap:16px}.foot-compliance{flex-direction:column;align-items:flex-start;gap:12px}}

/* ─── TESTIMONIALS ─── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;align-items:stretch}
.testi-card{background:rgba(15,30,56,.58);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:32px 28px;transition:border-color .5s var(--ease-out),box-shadow .5s var(--ease-out),background .5s var(--ease-out);display:flex;flex-direction:column;height:100%}
.testi-card:hover{border-color:rgba(45,212,217,.22);box-shadow:0 20px 48px -20px rgba(45,212,217,.18);background:rgba(15,30,56,.78)}
.testi-stars{margin-bottom:16px}
.testi-quote{font-size:15px;font-weight:400;color:#D1D5DB;line-height:1.65;margin-bottom:28px}
.testi-quote::before{content:'"';font-size:28px;color:var(--teal);display:block;line-height:1;margin-bottom:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800}
.testi-author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.testi-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.05em;color:#050D1A;flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 14px -5px rgba(0,0,0,.45);position:relative}
.testi-av::before{content:"";position:absolute;inset:2px;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.testi-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.testi-role{font-size:11px;color:var(--ink3)}
.testi-stars{display:flex;gap:2px;margin-bottom:14px}
.testi-stars span{color:#fbbf24;font-size:13px}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}


/* ════════════════════════════════════════════
   MOBILE OPTIMIZATION — 480px and below
   ════════════════════════════════════════════ */

@media(max-width:768px){

  /* ─── NAV ─── */
  nav:not(.mm-body){height:68px !important;min-height:68px !important}
  .nav-inner{height:68px !important;padding:0 20px}
  .nav-logo .logo-mark{height:30px;width:30px}
  .nav-right .btn{padding:8px 16px;font-size:12px}
  /* hide extra nav buttons on mobile, keep only CTA */
  .nav-right .btn-outline:not(:last-child){display:none}

  /* ─── HERO ─── */
  .hero{padding:120px 0 24px;min-height:auto}
  .hero-inner{padding-bottom:40px;max-width:100%;padding-left:4px;padding-right:4px}
  .hero h1{font-size:clamp(34px,9vw,48px);line-height:1.06;letter-spacing:-.035em;margin-bottom:16px}
  .hero-sub{font-size:16px;line-height:1.55;margin:0 auto 32px;max-width:100%;color:#D1D5DB}
  .hero-eyebrow{margin-bottom:14px}
  .hero-eyebrow .label{font-size:10px}
  .hero-ctas{gap:10px;margin-bottom:44px;flex-direction:row;justify-content:center}
  .hero-ctas .btn{flex:1 1 auto;min-width:0;justify-content:center;max-width:180px}
  .hero-stats{grid-template-columns:1fr 1fr;padding-top:32px;gap:0;text-align:center}
  .hstat{padding:16px 8px;border-right:none;border-bottom:1px solid var(--border)}
  .hstat:nth-child(odd){border-right:1px solid var(--border)}
  .hstat:nth-child(3),.hstat:nth-child(4){border-bottom:none}
  .hstat-n{font-size:30px}
  .hstat-l{font-size:12px}

  /* ─── HERO SVG (Apple Health) ─── */
  .hero-visual-wrap{margin:28px auto 0;padding:0 16px;aspect-ratio:1200/320}
  .hero-visual-wrap svg{width:100%;height:100%}

  /* ─── SECTION SPACING (mobile) ─── */
  .section{padding:80px 0}
  .section-tinted{padding:80px 0}
  .sh{margin-bottom:44px}
  .sh h2{font-size:clamp(30px,7.5vw,40px);line-height:1.08;letter-spacing:-.028em}
  .sh p{font-size:15px;max-width:100%;line-height:1.6;letter-spacing:-.005em}
  .sh-center{max-width:100%;padding:0 4px}
  .sh-center h2{max-width:100%}
  .sh-center p{max-width:100%}

  /* ─── PRODUCT GRID ─── */
  .prod-card{padding:32px 24px}
  .prod-card h3{font-size:20px}

  /* ─── TWO COL ─── */
  .two-col{gap:40px}
  .two-col-c{gap:40px}

  /* ─── METRIC CARDS ─── */
  .mc-n{font-size:28px;min-width:72px}

  /* ─── SERVE GRID ─── */
  .serve-grid{grid-template-columns:1fr}
  .serve-card{border-right:none;border-bottom:1px solid var(--border)}
  .serve-card:last-child{border-bottom:none}

  /* ─── NUMBER LIST ─── */
  .num-item{padding:20px 0;gap:16px}
  .num-list .num-item p{font-size:13px}

  /* ─── PAGE HERO (mobile) ─── */
  .page-hero,.ph{padding:120px 0 64px}
  .page-hero h1,.ph-h,.ph h1{font-size:clamp(34px,9vw,48px);line-height:1.06;letter-spacing:-.035em;margin-bottom:18px}
  .page-hero p,.ph-sub{font-size:16px;max-width:100%;line-height:1.55}
  .ph-ctas{gap:10px}
  .ph-ctas .btn{flex:1;min-width:0;justify-content:center}
  .ph-stats{flex-direction:column;padding-top:36px;gap:0}
  .ph-stat{border-right:none;border-bottom:1px solid var(--border);padding:16px 0}
  .ph-stat:last-child{border-bottom:none}
  .ph-stat-n{font-size:32px}

  /* ─── TESTIMONIALS ─── */
  .testi-card{padding:28px 20px}
  .testi-quote{font-size:14px}

  /* ─── TIMELINE ─── */
  .tl-wrap{padding-left:0}
  .tl-c{padding:16px 18px}

  /* ─── PRICING ─── */
  .price-card{padding:28px 22px}

  /* ─── CTA SECTION ─── */
  .cta-sect{padding:96px 0}
  .cta-sect h2{font-size:clamp(34px,9vw,52px);line-height:1.0}
  .cta-sect>p{font-size:16px;max-width:100%}
  .cta-btns{flex-direction:column;align-items:center;gap:10px}
  .cta-btns .btn{width:100%;max-width:320px;justify-content:center}
  .cta-cards{grid-template-columns:1fr}
  .cta-card{border-right:none;border-bottom:1px solid var(--border)}
  .cta-card:last-child{border-bottom:none}

  /* ─── PROD CTA ─── */
  .prod-cta{padding:64px 0}
  .prod-cta h2{font-size:clamp(28px,8vw,42px)}
  .prod-cta-btns{flex-direction:column;align-items:center;gap:10px}
  .prod-cta-btns .btn{width:100%;max-width:300px;justify-content:center}

  /* ─── MODAL ─── */
  .modal-ov{padding:16px 12px;align-items:flex-end}
  .modal-box{border-radius:20px 20px 0 0;max-height:92vh}
  .mhdr{padding:24px 24px 0}
  .mbdy{padding:20px 24px 32px}
  .mr2{grid-template-columns:1fr}
  .vid-foot{flex-direction:column;gap:12px;text-align:center}

  /* ─── FOOTER ─── */
  .foot-cta-band{padding:72px 0}
  .foot-cta-band h2{font-size:clamp(30px,9vw,48px)}
  .foot-cta-band p{font-size:16px}
  .foot-cta-btns{flex-direction:column;align-items:center;gap:10px}
  .foot-cta-btns .btn{width:100%;max-width:300px;justify-content:center}
  .foot-main{padding:64px 0 0}

  /* ─── CONTACT ─── */
  .contact-block{grid-template-columns:1fr;gap:40px}
  .form-wrap{padding:24px 20px}

  /* ─── ROAD GRID ─── */
  .road-grid{grid-template-columns:1fr}
  .road-card{border-right:none}

  /* ─── PARTNER GRID ─── */
  .pt-grid{grid-template-columns:1fr}
  .pt-card{border-right:none;border-bottom:1px solid var(--border)}
  .pt-card:last-child{border-bottom:none}

  /* ─── VAL / BEN / TEAM ─── */
  .val-grid,.r-pil-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .team-card:nth-child(3){border-right:none}

  /* ─── FEE GRID ─── */
  .fee-grid{grid-template-columns:1fr}
  .fee-card{border-right:none;border-bottom:1px solid var(--border);text-align:left;padding:28px 24px}

  /* ─── BUTTONS GENERAL ─── */
  .btn-lg{padding:12px 24px;font-size:14px}
}

/* ═════════ VERY SMALL SCREENS (\u2264400px) ═════════ */
@media(max-width:400px){
  .hero h1{font-size:36px;line-height:1.06}
  .page-hero h1,.ph-h,.ph h1{font-size:36px;line-height:1.06}
  .sh h2{font-size:30px;line-height:1.08}
  .hero-sub,.page-hero p,.ph-sub{font-size:15px}
  .hstat-n{font-size:30px}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;justify-content:center}
  .nav-right .btn:not(.btn-dark){display:none}
}

/* ═════════ TABLET / iPad (769px–1024px) — prevent endless scroll, preserve multi-col density ═════════ */
@media(min-width:769px) and (max-width:1024px){
  .hero{padding:136px 0 0}
  .hero h1{font-size:clamp(52px,7vw,76px);line-height:1.04;letter-spacing:-.04em}
  .hero-sub{font-size:17px;max-width:580px;line-height:1.55}
  .page-hero,.ph{padding:136px 0 72px}
  .page-hero h1,.ph-h,.ph h1{font-size:clamp(52px,7vw,76px);line-height:1.04;letter-spacing:-.04em}
  .page-hero p,.ph-sub{font-size:17px;max-width:580px;line-height:1.55}
  .hero-stats{grid-template-columns:repeat(4,1fr);padding-top:32px}
  .hstat{padding:0 16px}
  .hstat-n{font-size:32px}
  .hstat-l{font-size:12px}
  /* Products: 3-up tablet (keeps density, avoids endless scroll) */
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .prod-card{padding:32px 24px;border-right:1px solid var(--border);border-bottom:none}
  .prod-card:last-child{border-right:none}
  .prod-card h3{font-size:20px}
  .prod-card p{font-size:13.5px}
  .serve-grid{grid-template-columns:repeat(2,1fr)}
  .serve-card{padding:28px 22px}
  .serve-card:nth-child(2),.serve-card:nth-child(4){border-right:none}
  .testi-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .testi-grid .testi-card:last-child{grid-column:1/-1;max-width:560px;margin:0 auto}
  .testi-card{padding:28px 24px}
  .two-col{gap:56px}
  .two-col-divided::before{display:none}
  .two-col-divided::after{display:none}
  .sh{margin-bottom:60px}
  .sh h2{font-size:clamp(32px,4.4vw,48px);line-height:1.06;letter-spacing:-.028em}
  .sh p{font-size:16px;max-width:560px;line-height:1.55}
  .section,.section-tinted{padding:96px 0}
  .cta-sect{padding:96px 0}
  .cta-cards{grid-template-columns:repeat(3,1fr)}
  .cta-card{padding:24px 20px}
  .metric-card{padding:22px 24px;gap:20px}
  .mc-n{font-size:32px;min-width:80px}
  .mc-l{font-size:14px}
  .r-pil-grid,.r-area-grid{grid-template-columns:repeat(2,1fr)}
  .val-grid,.team-grid,.road-grid{grid-template-columns:repeat(3,1fr)}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
}


@media(max-width:768px){
  /* NAV: hide all but logo + hamburger */
  .nav-right .btn{display:none}
  .nav-inner{padding:0 20px}
  /* PAGE HERO BUTTONS — stack vertically */
  .ph-ctas{flex-direction:column;align-items:flex-start;gap:12px}
  .ph-ctas .btn{width:100%;justify-content:center;max-width:340px;min-height:52px;font-size:15px}

  /* Hero CTA buttons — centered stack on mobile */
  .hero-ctas{flex-direction:column;align-items:center;gap:10px;margin-bottom:32px}
  .hero-ctas .btn{width:100%;justify-content:center;max-width:300px;min-height:48px;font-size:14px}

  /* Prod CTA buttons */
  .prod-cta-btns{flex-direction:column;align-items:center;gap:12px}
  .prod-cta-btns .btn{width:100%;max-width:320px;min-height:52px;justify-content:center}

  /* Touch targets — minimum 48px height */
  .btn{min-height:44px}
  .btn-lg{min-height:52px}
  .nl{min-height:44px;display:flex;align-items:center}
  .prod-card,.serve-card,.rs-card,.feat-card{cursor:pointer}

  /* Logo left aligned */
  .nav-logo{gap:8px}
}


/* ── PDF VIEWER MODAL ── */
#pdf-modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;flex-direction:column}
#pdf-modal-ov.open{display:flex}
.pdf-modal-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(5,13,26,.98);border-bottom:1px solid rgba(255,255,255,.09);flex-shrink:0;gap:16px}
.pdf-modal-bar h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:#f0f4ff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-modal-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pdf-modal-body{display:flex;flex-direction:column;flex:1;overflow:hidden}
.pdf-modal-body iframe{width:100%;height:100%;border:none;display:block}
@media(max-width:768px){
  .pdf-modal-bar{padding:10px 16px}
  .pdf-modal-bar h4{font-size:12px}
  .pdf-modal-actions .btn-outline{display:none}
}


@media(max-width:768px){
  .blog-post-grid{grid-template-columns:1fr!important}
  .blog-featured-grid{grid-template-columns:1fr!important}
}


/* ─── SECTION REVEAL ─── */


/* Inactive page: keep reveal elements hidden (no paint leak) */
.page:not(.active) .rv,
.page:not(.active) .rv-l,
.page:not(.active) .rv-r,
.page:not(.active) .rv-scale { opacity: 0; transform: none; transition: none; }



.nl.nav-active { color: #ffffff !important; }
.nl.nav-active::after { width: 60% !important; left: 20% !important; }

/* ── NAV SCROLL STATES ──
   Both states use rgba() backgrounds of the same kind so the .25s transition
   interpolates smoothly instead of hard-snapping (browsers cannot animate
   between gradient and solid color).
   transform:translateZ(0) + isolation promote the nav onto its own GPU layer
   so content scrolling underneath does not cause backdrop-filter repaint
   leaks — the classic iOS Safari fixed-header flicker. */
nav:not(.mm-body) {
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  height: 84px !important; min-height: 84px !important;
  transform: translateZ(0);
  isolation: isolate;
}
nav.nav-top {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
nav.nav-scrolled {
  border-bottom-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 32px rgba(0,0,0,.4) !important;
  height: 84px !important;
  min-height: 84px !important;
}








@media(max-width:768px) {
  
  
  .nl.nav-active::after { width: 0 !important; }
}


@media(max-width:768px) {
  .blog-featured { display: flex !important; flex-direction: column !important; }
  .blog-featured > div:first-child { padding: 32px 24px !important; }
  .blog-featured > div:last-child { min-height: 220px !important; }
  .blog-posts { grid-template-columns: 1fr !important; }
}


@media(max-width:768px){
  .nav-logo .logo-mark{height:32px !important;width:32px !important}
}


/* ═══ HAMBURGER — Apple SF-style 3-line icon ═══ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  border-radius: 10px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:active { background: rgba(255,255,255,.08); }
.hamburger span {
  display: block;
  width: 22px;
  height: 1.8px;
  background: #ffffff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .22s ease, opacity .22s ease, width .22s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* ═══ MOBILE MENU — Apple sheet style ═══════════════════════════════════════
   Scientific alignment with the app's design system:
   - Tokens: var(--ink|ink3|border|teal|ease-out|dur|dur-fast) only (no magic).
   - 8-point grid: 4/8/12/16/20/24 padding rhythm; 60px link min-height for
     Fitts-compliant thumb target (Apple HIG ≥ 44, we go 60).
   - Type scale aligned: 11/13/17/18/20px (existing scale). Letter-spacing
     -.02em on names (matches H2/H3), +.14em on all-caps section labels.
   - Motion: opacity .28s + translateY 8px→0 body-slide, var(--ease-out).
     Individual items do not stagger — total motion duration < Doherty threshold.
   - Z-index 840 (below modals at 9999, above nav at 800).
   ─────────────────────────────────────────────────────────────────────────── */
.mobile-menu{
  display:none;
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  inset:0;
  height:100vh;
  width:100%;
  background:rgba(5,13,26,.94);
  -webkit-backdrop-filter:blur(32px) saturate(1.5);
  backdrop-filter:blur(32px) saturate(1.5);
  /* z-index: 950 — sits ABOVE nav (z:900) so the menu's own close X and
     header are not occluded by the nav bar when the menu is open. */
  z-index:950;
  overflow:hidden;
  opacity:0;
  transition:opacity var(--dur) var(--ease-out);
}
.mobile-menu.open{display:block;opacity:1}

/* Header (pinned to top of menu) */
.mm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top,0));
  border-bottom:1px solid var(--border);
  background:rgba(5,13,26,.7);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  position:absolute;top:0;left:0;right:0;
  z-index:3;
}
.mm-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.mm-brand-mark{height:28px;width:28px;display:block;flex-shrink:0}
.mm-brand-word{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:var(--ink);
}
.mm-close{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:rgba(240,244,255,.75);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.mm-close:hover{background:rgba(255,255,255,.10);color:var(--ink)}
.mm-close:active{background:rgba(255,255,255,.14);transform:scale(.96)}

/* Body (scrollable region between header and CTAs) */
.mm-body{
  position:absolute;
  top:calc(73px + env(safe-area-inset-top,0));
  bottom:calc(140px + env(safe-area-inset-bottom,0));
  left:0;right:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:8px 0 8px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur) var(--ease-out) 60ms,
             transform var(--dur) var(--ease-out) 60ms;
}
.mobile-menu.open .mm-body{opacity:1;transform:translateY(0)}
.mm-group + .mm-group{margin-top:8px;border-top:1px solid var(--border)}

.mm-section{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(138,155,181,.55);
  padding:20px 20px 8px;
}

.mm-link{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;min-height:60px;
  text-decoration:none;color:inherit;
  border-bottom:1px solid rgba(255,255,255,.04);
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--ease-out);
  position:relative;
}
.mm-link:active{background:rgba(255,255,255,.05)}
.mm-group .mm-link:last-of-type{border-bottom:none}

.mm-icon{
  flex-shrink:0;
  width:38px;height:38px;
  border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 3px 10px -2px rgba(0,0,0,.35);
}

.mm-link-body{flex:1;min-width:0;display:flex;flex-direction:column}
.mm-link-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.3;
}
.mm-link--product .mm-link-name{font-size:17px}
.mm-link:not(.mm-link--product) .mm-link-name{font-size:18px;font-weight:500}
.mm-sub{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:400;line-height:1.4;
  color:rgba(138,155,181,.7);
  margin-top:3px;
}
.mm-chevron{color:rgba(138,155,181,.35);flex-shrink:0;transition:transform var(--dur-fast) var(--ease-out)}
.mm-link:active .mm-chevron{transform:translateX(2px)}

/* CTAs (pinned to bottom of menu) */
.mm-ctas{
  padding:16px 20px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0));
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--border);
  background:rgba(5,13,26,.7);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  position:absolute;bottom:0;left:0;right:0;
  z-index:3;
}
.mm-ctas .btn{
  width:100%;justify-content:center;
  min-height:48px;font-size:16px;font-weight:600;border-radius:12px;
}

/* Reduced motion: collapse transitions */
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mm-body,.mm-link,.mm-close,.mm-chevron{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media(min-width:769px) {
  .hamburger { display: none !important; }
  .mobile-menu { display: none !important; }
}
@media(max-width:768px) {
  .hamburger { display: flex; }
  .nav-links { display: none !important; }
  .nav-right .btn:not(.hamburger) { display: none; }
  .nav-right { gap: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE AUDIT — 2026-04 — coverage across 9 device profiles
   iPhone SE · iPhone 15 · iPhone Pro Max · iPad portrait · iPad landscape
   Small laptop · MacBook · FHD desktop · QHD/4K
   ══════════════════════════════════════════════════════════════════════ */

/* Safe-area insets for notched iPhones (iPhone X and later)
   — mobile-menu safe-area lives inside .mm-header / .mm-ctas so the menu
   body can scroll beneath; we only handle nav + hero here. */
@supports(padding:max(0px)){
  nav:not(.mm-body){padding-top:env(safe-area-inset-top,0)}
  .hero,.page-hero,.ph{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
}

/* Use dynamic viewport units on browsers that support them (Safari mobile, Chrome 108+) */
@supports(height:100dvh){
  .modal-ov{max-height:100dvh}
  .mobile-menu{height:100dvh}
}

/* Prevent horizontal overflow of anything on every viewport */
body,main,section{max-width:100%;overflow-x:clip}

/* ─── VERY SMALL (\u2264360px · iPhone SE 1st gen, older Android) ─── */
@media(max-width:360px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{padding-left:14px;padding-right:14px}
  .hero{padding:112px 0 20px}
  .hero h1{font-size:30px;line-height:1.08;letter-spacing:-.025em}
  .hero-sub{font-size:14px;line-height:1.55}
  .page-hero,.ph{padding:104px 0 48px}
  .page-hero h1,.ph-h,.ph h1{font-size:30px;line-height:1.08}
  .sh h2{font-size:26px;line-height:1.1}
  .prod-card{padding:28px 20px}
  .prod-card h3{font-size:19px}
  .serve-card,.feat-card,.rs-card,.testi-card,.ben-card,.val-card,.r-pil-card,.r-area-card{padding:24px 18px}
  .metric-card{padding:20px 18px;gap:14px}
  .mc-n{font-size:26px;min-width:60px}
  .mc-l{font-size:13px}
  .hstat-n{font-size:26px}
  .hstat-l{font-size:11px}
  .btn{padding:10px 18px;font-size:12.5px}
  .btn-lg{padding:12px 22px;font-size:14px}
  .nav-logo .logo-mark{height:28px !important;width:28px !important}
  .iphone-frame{width:240px;height:496px;padding:10px;border-radius:38px}
  .iphone-notch{width:82px;height:22px;top:14px}
  .iphone-screen{border-radius:30px}
}

/* ─── SMALL LAPTOPS / NETBOOKS (1025-1279px) ─── */
@media(min-width:1025px) and (max-width:1279px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{padding:0 40px}
  .section,.section-tinted{padding:112px 0}
  .cta-sect{padding:112px 0}
  .page-hero,.ph{padding:112px 0 80px}
  .hero{padding:128px 0 0}
  .two-col{gap:72px}
  .demo-video{max-width:920px}
}

/* ─── STANDARD DESKTOP (1280-1599px · MacBook, most monitors) ─── */
@media(min-width:1280px) and (max-width:1599px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{max-width:1200px;padding:0 48px}
}

/* ─── WIDE DESKTOP (1600-1919px · larger iMacs, wide monitors) ─── */
@media(min-width:1600px) and (max-width:1919px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{max-width:1280px;padding:0 56px}
  .demo-video{max-width:1200px}
}

/* ─── FULL HD+ (1920-2559px) ─── */
@media(min-width:1920px) and (max-width:2559px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{max-width:1360px;padding:0 64px}
  .demo-video{max-width:1280px}
  .hero h1{font-size:clamp(60px,6vw,96px)}
  .page-hero h1,.ph h1,.ph-h{font-size:clamp(54px,5vw,84px)}
  .sh h2{font-size:clamp(44px,4.2vw,64px)}
}

/* ─── QHD / 4K (\u22652560px) — cap content width, stop sprawling ─── */
@media(min-width:2560px){
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{max-width:1440px;padding:0 72px}
  .demo-video{max-width:1360px}
  .hero h1{font-size:104px}
  .page-hero h1,.ph h1,.ph-h{font-size:88px}
  .sh h2{font-size:68px}
  .hero-sub{font-size:22px;max-width:760px}
}

/* ─── SHORT VIEWPORT (landscape phones, iPad landscape with keyboard) ─── */
@media(max-height:680px) and (min-width:769px){
  .hero{padding-top:96px}
  .page-hero,.ph{padding:96px 0 48px}
  .sh{margin-bottom:48px}
}

/* ─── TABLET SCROLL RELIEF (769-1024) — reduce section vertical fat ─── */
@media(min-width:769px) and (max-width:1024px){
  .section,.section-tinted,.cta-sect{padding:80px 0}
  .page-hero,.ph{padding-bottom:56px}
  .sh{margin-bottom:48px}
  .hero-visual-wrap{margin-top:40px}
  .demo-video{max-width:860px}
}

/* ─── NARROW TABLET (769-900px · iPad portrait) — tighter type ─── */
@media(min-width:769px) and (max-width:900px){
  .hero h1{font-size:clamp(44px,6vw,60px);line-height:1.05}
  .page-hero h1,.ph h1,.ph-h{font-size:clamp(40px,5.5vw,54px);line-height:1.06}
  .sh h2{font-size:clamp(30px,4.2vw,42px)}
  .serve-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-card:nth-child(even){border-right:none}
  .prod-card:nth-last-child(-n+2){border-bottom:none}
  .prod-card:last-child{grid-column:1/-1}
  .feat-grid,.val-grid,.team-grid,.road-grid{grid-template-columns:repeat(2,1fr)}
  .cta-cards{grid-template-columns:1fr 1fr}
  .cta-card:last-child{grid-column:1/-1;border-right:none;border-top:1px solid var(--border)}
  .two-col{grid-template-columns:1fr;gap:48px}
}

/* ─── iPAD LANDSCAPE (1024-1100px range) — optimize for landscape reading ─── */
@media(min-width:1025px) and (max-width:1100px) and (orientation:landscape){
  .hero{padding-top:112px}
  .hero h1{font-size:clamp(48px,6vw,66px)}
  .section,.section-tinted{padding:88px 0}
}

/* Skip-to-content (a11y WCAG 2.4.1) — visually hidden until keyboard-focused */
.skip-link{position:fixed;top:-100px;left:16px;z-index:9999;padding:12px 20px;background:var(--teal);color:#050D1A;font-weight:700;font-size:14px;border-radius:8px;transition:top .2s var(--ease-out);text-decoration:none}
.skip-link:focus{top:16px;outline:2px solid #fff;outline-offset:2px}
main:focus{outline:none}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE ALIGNMENT — Apple-grade centering + full-width card stacks
   ══════════════════════════════════════════════════════════════════════ */

/* Center all sub-page hero content on mobile (Apple pattern) */
@media(max-width:768px){
  .page-hero .wrap,.ph .wrap{text-align:center}
  .page-hero h1,.page-hero p,.ph h1,.ph-h,.ph-sub{margin-left:auto;margin-right:auto}
  .ph-ey{align-self:center}
  .ph-ctas{flex-direction:column;align-items:center !important;gap:10px}
  .ph-ctas .btn{width:100%;justify-content:center;max-width:320px;min-height:48px}
  .ph-stats{text-align:center}
  .ph-stat{text-align:center}
}

/* All card grids collapse to single-column on phones — full-width stack, Apple pattern */
@media(max-width:600px){
  .prob-grid,.road-grid,.val-grid,.r-pil-grid,.r-area-grid,.team-grid,.feat-grid,.ben-grid,.rs-grid,.serve-grid,.prod-grid,.testi-grid,.cta-cards,.r-stat-grid,.price-grid,.fee-grid,.pt-grid{grid-template-columns:1fr !important;gap:0}
  .prob-card,.road-card,.val-card,.r-pil-card,.r-area-card,.team-card,.feat-card,.ben-card,.rs-card,.serve-card,.prod-card,.testi-card,.cta-card,.r-stat,.price-card,.fee-card,.pt-card{border-right:none !important;border-bottom:1px solid var(--border) !important}
  .prob-card:last-child,.road-card:last-child,.val-card:last-child,.r-pil-card:last-child,.r-area-card:last-child,.team-card:last-child,.feat-card:last-child,.ben-card:last-child,.rs-card:last-child,.serve-card:last-child,.prod-card:last-child,.testi-card:last-child,.cta-card:last-child,.r-stat:last-child,.price-card:last-child,.fee-card:last-child,.pt-card:last-child{border-bottom:none !important}
  /* testi-card uses gap spacing, keep its own rhythm */
  .testi-grid{gap:16px}
  .testi-card{border:1px solid rgba(255,255,255,.07) !important;border-radius:16px !important}
}

/* ══════════════════════════════════════════════════════════════════════
   ZOOM SAFETY — 125%-400% browser zoom / low-res + system scaling
   WCAG 2.1 AA: usable at 200% zoom without horizontal scroll
   ══════════════════════════════════════════════════════════════════════ */

/* 1. All media fluid — never forces horizontal overflow */
img,video,svg,iframe{max-width:100%;height:auto}

/* 2. Long text / brand names break rather than overflow */
h3,h4,h5,p,li,a,span,em,strong,label,button{overflow-wrap:break-word;word-wrap:break-word}
h1,h2{overflow-wrap:break-word}

/* 3. iPhone frame shrinks gracefully when viewport narrows */
.iphone-frame{max-width:100%;width:min(300px,100%)}
.mobile-showcase-phone,.mobile-showcase-copy{min-width:0}

/* 4. Demo video container shrinks to viewport */
.demo-video,.video-wrap,.vid-wrap-m{max-width:100%;width:100%}
.demo-video-play,.iphone-screen-play{flex-shrink:0}

/* 5. Grids never force min-width that exceeds viewport */
.nav-inner,.wrap,.foot-grid,.prod-grid,.serve-grid,.testi-grid,.feat-grid,.rs-grid,.cta-cards,.prob-grid,.val-grid,.team-grid,.road-grid,.r-area-grid,.r-pil-grid,.r-stat-grid,.pt-grid,.price-grid,.fee-grid,.ben-grid,.metric-stack{min-width:0}

/* 6. Card internals allow shrinking */
.prod-card,.serve-card,.testi-card,.feat-card,.rs-card,.ben-card,.val-card,.team-card,.prob-card,.metric-card,.cta-card,.r-area-card,.r-pil-card,.road-card,.pt-card{min-width:0}

/* 7. Zoom tier — effective viewport 481-683px (200-250% zoom on a 1366 laptop) */
@media(max-width:683px) and (min-width:481px){
  .hero h1{font-size:clamp(34px,7vw,44px)}
  .page-hero h1,.ph h1,.ph-h{font-size:clamp(32px,6.5vw,42px)}
  .sh h2{font-size:clamp(28px,6vw,36px)}
  .hero-sub,.page-hero p,.ph-sub{font-size:16px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hstat-n{font-size:28px}
  .section,.section-tinted,.cta-sect{padding:64px 0}
  .hero{padding:104px 0 24px}
  .page-hero,.ph{padding:96px 0 48px}
  .two-col,.contact-block{grid-template-columns:1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}

/* 8. Deep zoom — effective viewport 320-480px (300-400% zoom) */
@media(max-width:480px){
  .nav-inner{padding:0 16px}
  .hero-ctas,.ph-ctas{flex-direction:column;gap:10px}
  .hero-ctas .btn,.ph-ctas .btn{width:100%;max-width:100%}
  .two-col,.contact-block{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .chip-wrap{flex-wrap:wrap;gap:6px;justify-content:center}
  .chip{font-size:11px;padding:5px 12px}
}

/* 9. Super-zoom safety — under 320px (400%+ zoom on low-res) */
@media(max-width:319px){
  html{font-size:14px}
  .wrap,.nav-inner,.page-hero .wrap,.ph .wrap{padding-left:10px;padding-right:10px}
  .hero h1,.page-hero h1,.ph-h,.ph h1{font-size:26px;line-height:1.1}
  .sh h2{font-size:22px;line-height:1.15}
  .btn{padding:9px 14px;font-size:12px;white-space:normal;line-height:1.2}
  .btn-lg{min-height:44px}
  .iphone-frame{width:100%;max-width:260px}
}

/* 10. User requests high-contrast mode */
@media(prefers-contrast:more){
  :root{--ink2:#F4F6FA;--ink3:#D5DDE8;--border:rgba(255,255,255,.22);--border2:rgba(255,255,255,.35)}
  .prod-card,.serve-card,.testi-card,.feat-card,.rs-card,.ben-card,.metric-card{border-color:rgba(255,255,255,.3)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — listing + article typography
   ═══════════════════════════════════════════════════════════════════════════
   Scientific alignment with the app's design system:
   - Reading measure: 680–720px (≈ 60–78 characters/line, optimal per Bringhurst).
   - Body type: DM Sans 18px/1.75 (humanist, large x-height, fast scan).
   - Headings: Plus Jakarta Sans matching H2/H3 rhythm used site-wide.
   - Tokens only (--ink, --ink2, --ink3, --teal, --border, --border2).
   - Article image corner radius = 20px (= .demo-video, stays consistent).
   - Paragraph vertical rhythm: 24px baseline, multiplier on H2 (64px) and H3 (40px).
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Listing-page post cards ─── */
/* auto-fit with a min column width so the grid never leaves empty cells
   when underpopulated. 2 cards → 2 columns. 3 cards → 3. 1 card → 1.
   Max ~360px min width keeps cards from getting uncomfortably wide. */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;max-width:1080px;margin:0 auto}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;gap:20px}}

.blog-card{
  display:flex;flex-direction:column;
  background:rgba(15,30,56,.45);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.blog-card:hover{
  transform:translateY(-3px);
  border-color:rgba(45,212,217,.22);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.55),0 0 0 1px rgba(45,212,217,.08);
}
.blog-card-thumb{
  position:relative;
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,#0B1529 0%,#0F1E38 100%);
  overflow:hidden;
}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.blog-card:hover .blog-card-thumb img{transform:scale(1.03)}
.blog-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:10px;font:600 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.blog-card-tag{color:var(--teal);padding:3px 10px;background:rgba(45,212,217,.08);border:1px solid rgba(45,212,217,.18);border-radius:100px}
.blog-card-tag--green{color:var(--green);background:rgba(74,222,153,.08);border-color:rgba(74,222,153,.18)}
.blog-card-tag--periwinkle{color:#8B9FFF;background:rgba(139,159,255,.08);border-color:rgba(139,159,255,.2)}
.blog-card-tag--coral{color:#F87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2)}
.blog-card-date{color:var(--ink3);font-weight:500;letter-spacing:.08em}
.blog-card h3{
  font:700 17px/1.3 'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.02em;color:var(--ink);
  margin:0;
}
.blog-card p{
  font:300 13px/1.7 'DM Sans',sans-serif;
  color:var(--ink2);
  margin:0;flex:1;
  /* Clamp to 3 lines max to keep cards balanced */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.blog-card-read{font:600 12px/1 'Plus Jakarta Sans',sans-serif;color:var(--teal);display:inline-flex;align-items:center;gap:6px;letter-spacing:-.01em}
.blog-card-read svg{transition:transform .24s var(--ease-out)}
.blog-card:hover .blog-card-read svg{transform:translateX(3px)}
.blog-card-reading-time{font:500 11px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink3);letter-spacing:.04em}

/* ─── Featured post (hero card) on listing ─── */
.blog-featured{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  background:rgba(15,30,56,.5);
  text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.blog-featured:hover{border-color:rgba(45,212,217,.25);box-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 0 80px -20px rgba(45,212,217,.12)}
.blog-featured-copy{padding:48px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.blog-featured-thumb{background:linear-gradient(135deg,#0B1529,#0F1E38);min-height:320px;position:relative;overflow:hidden}
.blog-featured-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media(max-width:900px){.blog-featured{grid-template-columns:1fr}.blog-featured-copy{padding:32px 24px}.blog-featured-thumb{min-height:220px}}

/* ─── Individual post page ─── */
.post-back-wrap{max-width:880px;margin:0 auto;padding:32px 24px 0}
.post-back{
  font:500 13px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink3);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
  padding:8px 12px;margin-left:-12px;border-radius:8px;
}
.post-back:hover{color:var(--teal);background:rgba(45,212,217,.05)}
.post-back svg{transition:transform var(--dur-fast) var(--ease-out)}
.post-back:hover svg{transform:translateX(-2px)}

.post-hero{max-width:880px;margin:0 auto;padding:40px 24px 32px}
.post-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
  margin-bottom:28px;
}
.post-eyebrow-dot{width:3px;height:3px;border-radius:50%;background:var(--border2)}
.post-eyebrow-date{color:var(--ink3);font-weight:500;letter-spacing:.08em}
h1.post-title{
  font:800 clamp(34px,5vw,64px)/1.08 'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.035em;
  color:var(--ink);
  margin-bottom:20px;
}
p.post-deck{
  font:300 clamp(18px,2.2vw,24px)/1.5 'DM Sans',sans-serif;
  color:var(--ink2);letter-spacing:-.005em;
  margin-bottom:32px;max-width:720px;
}

.post-byline{
  display:flex;align-items:center;gap:14px;
  max-width:880px;margin:0 auto;padding:20px 24px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.post-byline-av{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.05em;color:#050D1A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 12px -4px rgba(0,0,0,.4);
}
.post-byline-meta{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.post-byline-name{font:600 14px/1.3 'Plus Jakarta Sans',sans-serif;color:var(--ink);letter-spacing:-.01em}
.post-byline-role{font:400 12px/1.35 'DM Sans',sans-serif;color:var(--ink3)}
.post-byline-time{font:500 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;color:var(--ink3);flex-shrink:0}

.post-hero-image{max-width:1040px;margin:48px auto 64px;padding:0 24px}
.post-hero-image img,.post-hero-image figure{
  width:100%;height:auto;display:block;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.6);
}
.post-hero-image figcaption{margin-top:14px;font:400 13px/1.5 'DM Sans',sans-serif;color:var(--ink3);text-align:center}

/* ─── Article body ─── */
.post-article{max-width:720px;margin:0 auto;padding:0 24px 48px}
.post-article > *:first-child{margin-top:0}
.post-article p{font:400 18px/1.75 'DM Sans',sans-serif;color:var(--ink2);margin:0 0 24px}
.post-article .post-lead{font:300 22px/1.55 'DM Sans',sans-serif;color:var(--ink);letter-spacing:-.005em;margin-bottom:32px}
.post-article h2{font:700 clamp(24px,3vw,32px)/1.22 'Plus Jakarta Sans',sans-serif;letter-spacing:-.025em;color:var(--ink);margin:64px 0 20px}
.post-article h3{font:600 22px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:var(--ink);margin:44px 0 14px}
.post-article h4{font:600 18px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em;color:var(--ink);margin:32px 0 10px}
.post-article ul,.post-article ol{font:400 18px/1.75 'DM Sans',sans-serif;color:var(--ink2);margin:0 0 24px;padding-left:1.5em}
.post-article li{margin-bottom:10px}
.post-article li::marker{color:var(--ink3)}
.post-article blockquote{
  font:500 22px/1.45 'Plus Jakarta Sans',sans-serif;
  color:var(--ink);letter-spacing:-.01em;
  border-left:3px solid var(--teal);
  padding:4px 0 4px 24px;
  margin:36px 0;
  font-style:italic;
}
.post-article blockquote p{font:inherit;color:inherit;margin:0}
.post-article blockquote cite{display:block;margin-top:14px;font:400 14px/1.4 'DM Sans',sans-serif;font-style:normal;color:var(--ink3);letter-spacing:.02em}
.post-article strong{color:var(--ink);font-weight:600}
.post-article em{color:var(--ink);font-style:italic}
.post-article a:not(.btn){color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out)}
.post-article a:not(.btn):hover{color:var(--lime)}
.post-article code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:rgba(45,212,217,.08);padding:2px 6px;border-radius:5px;color:var(--teal);border:1px solid rgba(45,212,217,.14)}
.post-article pre{background:rgba(5,13,26,.7);border:1px solid var(--border);border-radius:12px;padding:20px 24px;overflow-x:auto;margin:28px 0;-webkit-overflow-scrolling:touch}
.post-article pre code{background:none;padding:0;border:0;font-size:13px;line-height:1.75;color:var(--ink2)}
.post-article hr{border:0;border-top:1px solid var(--border);margin:56px 0}
.post-article figure{margin:36px 0}
.post-article figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--border);display:block}
.post-article figcaption{margin-top:12px;font:400 13px/1.5 'DM Sans',sans-serif;color:var(--ink3);text-align:center}
.post-article .post-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:32px 0;padding:28px;border:1px solid var(--border);border-radius:16px;background:rgba(15,30,56,.4)}
.post-article .post-stat-n{font:800 clamp(32px,4vw,44px)/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;color:var(--teal);margin-bottom:6px}
.post-article .post-stat-l{font:400 13px/1.5 'DM Sans',sans-serif;color:var(--ink3)}

/* ─── Post footer (share + next) ─── */
.post-footer{max-width:720px;margin:56px auto 48px;padding:40px 24px;border-top:1px solid var(--border)}
.post-share-label{font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.post-share{display:flex;gap:10px;flex-wrap:wrap}
/* Button+anchor normalized — same pill styling applied regardless of element.
   <button> elements get default browser styling (white bg, system font) unless
   we reset; this block makes every .post-share-btn render identically. */
.post-share-btn,
button.post-share-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  margin:0;
  border:1px solid var(--border2);
  border-radius:100px;
  background:rgba(255,255,255,.02);
  color:var(--ink2);
  font:500 13px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.post-share-btn:hover,
button.post-share-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(45,212,217,.06)}
.post-share-btn:focus-visible,
button.post-share-btn:focus-visible{outline:2px solid rgba(45,212,217,.55);outline-offset:2px}
.post-share-btn[data-copied]{border-color:var(--green);color:var(--green);background:rgba(74,222,153,.06)}
.post-share-btn svg{flex-shrink:0}
.post-share-btn:active{transform:scale(.98)}

.post-next{margin-top:48px;padding-top:40px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.post-next{grid-template-columns:1fr}}
.post-next a{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;border:1px solid var(--border);border-radius:14px;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.post-next a:hover{border-color:rgba(45,212,217,.22);background:rgba(45,212,217,.03)}
.post-next-label{font:600 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.post-next-title{font:600 15px/1.35 'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em;color:var(--ink)}

/* ─── Mobile refinement ─── */
@media(max-width:640px){
  .post-hero{padding:24px 20px 20px}
  .post-back-wrap{padding:20px 20px 0}
  .post-byline{padding:16px 20px;gap:12px}
  .post-byline-name,.post-byline-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .post-hero-image{margin:32px auto 40px;padding:0 16px}
  .post-article{padding:0 20px 40px}
  .post-article h2{margin:44px 0 16px}
  .post-article h3{font-size:19px;margin:32px 0 12px}
  .post-article h4{font-size:16px;margin:28px 0 8px}
  .post-article p,.post-article ul,.post-article ol{font-size:16px;line-height:1.7;margin-bottom:20px}
  .post-article .post-lead{font-size:18px;line-height:1.55;margin-bottom:26px}
  .post-article blockquote{font-size:18px;line-height:1.5;padding-left:18px;margin:28px 0}
  .post-article blockquote cite{font-size:12.5px}
  .post-article pre{padding:16px 18px;margin:22px 0}
  .post-article pre code{font-size:12px;line-height:1.7}
  .post-article figure{margin:28px 0}
  .post-article .post-stat-row{padding:20px;gap:16px;margin:24px 0}
  .post-footer{padding:32px 20px;margin-top:44px}

  /* Keep the eyebrow ("Engineering · April 19, 2026") on ONE line */
  .post-eyebrow{flex-wrap:nowrap;white-space:nowrap;font-size:10.5px}
  .post-eyebrow > span{flex-shrink:0}

  /* Subtitle wraps naturally on mobile — balance can create awkward breaks
     on narrow viewports, pretty flows more like body copy */
  .post-deck{text-wrap:pretty}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — reading progress, TOC, newsletter, text-wrap niceties
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reading-progress bar (top of viewport) */
.read-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:850;
  background:transparent;pointer-events:none;
}
.read-progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--teal),var(--lime));
  transform-origin:left;
  transition:width .08s linear;
  box-shadow:0 0 12px rgba(45,212,217,.35);
}

/* Native balanced wrapping on headings/decks — modern browsers only,
   degrades silently. Prevents orphan words in big display type. */
h1.post-title, .post-deck, .post-article h2, .post-article h3, .blog-featured h2, .blog-card h3 {
  text-wrap:balance;
}
.post-article p, .post-article li { text-wrap:pretty; }

/* Sticky TOC (desktop only) — sits left of the article body */
.post-toc{
  display:none;
  position:sticky;top:96px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  padding:8px 0;
  font-family:'Plus Jakarta Sans',sans-serif;
  border-left:1px solid var(--border);
}
.post-toc-label{
  font:700 10px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);padding:0 16px 14px;
}
.post-toc ol{list-style:none;margin:0;padding:0}
.post-toc li{margin:0}
.post-toc a{
  display:block;padding:8px 16px;margin-left:-1px;
  border-left:2px solid transparent;
  font:500 13px/1.45 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;
  color:var(--ink3);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.post-toc a:hover{color:var(--ink2)}
.post-toc a.is-active{color:var(--teal);border-left-color:var(--teal)}

/* Two-column layout for article + TOC (only when TOC populated) */
@media(min-width:1100px){
  .post-layout{
    max-width:1080px;margin:0 auto;
    display:grid;grid-template-columns:200px 720px;gap:48px;
    padding:0 24px;align-items:start;
  }
  .post-layout .post-toc{display:block}
  .post-layout .post-article{max-width:720px;margin:0;padding:0;grid-column:2}
  /* Newsletter + share-footer now live INSIDE .post-layout so they sit
     in the same grid column as the article body — prevents the X-axis
     misalignment you see between article (col 2) and centred siblings. */
  .post-layout > .newsletter,
  .post-layout > .post-footer{
    grid-column:2;
    max-width:720px;
    margin-left:0;margin-right:0;
    width:100%;
  }
  .post-layout > .post-footer{margin:56px 0 48px}
  .post-layout > .newsletter{margin:80px 0 0;padding:44px 40px}
}

/* Newsletter subscribe card — slots into post footer + listing page */
.newsletter{
  max-width:680px;margin:64px auto 0;
  padding:40px 36px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(45,212,217,.05) 0%,rgba(15,30,56,.5) 100%);
  text-align:center;
  position:relative;overflow:hidden;
}
.newsletter::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(45,212,217,.14),transparent 70%);
  pointer-events:none;
}
.newsletter > *{position:relative;z-index:1}
.newsletter-eyebrow{
  font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
  margin-bottom:14px;
}
.newsletter h3{
  font:700 clamp(22px,2.4vw,28px)/1.25 'Plus Jakarta Sans',sans-serif;letter-spacing:-.025em;
  color:var(--ink);
  margin:0 0 8px;
}
.newsletter p{
  font:300 15px/1.55 'DM Sans',sans-serif;
  color:var(--ink2);
  max-width:460px;margin:0 auto 24px;
}
.newsletter-form{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:stretch;
  max-width:460px;margin:0 auto;
}
/* Input + button share identical box metrics — same padding, same line-height,
   same explicit min-height — so the row reads as one clean pill pair. */
.newsletter-input,
.newsletter-btn{
  min-height:48px;
  padding:0 20px;
  border-radius:100px;
  box-sizing:border-box;
  display:inline-flex;align-items:center;
  line-height:1.2;
}
.newsletter-input{
  flex:1;min-width:240px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border2);
  color:var(--ink);
  font:400 15px/1.2 'DM Sans',sans-serif;
  outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.newsletter-input:focus{border-color:var(--teal);background:rgba(45,212,217,.04);box-shadow:0 0 0 3px rgba(45,212,217,.15)}
.newsletter-input::placeholder{color:var(--ink4)}
.newsletter-btn{
  border:0;
  padding:0 28px;
  background:linear-gradient(135deg,var(--teal),var(--lime));
  color:#050D1A;
  font:700 14px/1.2 'Plus Jakarta Sans',sans-serif;letter-spacing:-.005em;
  cursor:pointer;
  justify-content:center;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:0 10px 24px -10px rgba(45,212,217,.5);
}
.newsletter-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(45,212,217,.65)}
.newsletter-btn:active{transform:translateY(0)}
/* Helper note — constrained to the same visual column as the form above,
   centred so it reads as a caption to the form, not a standalone paragraph. */
/* Specificity-safe: .newsletter p has spec 0,1,1 which was beating our
   0,1,0 .newsletter-note rule and collapsing margin-top to 0. !important
   pins the intended 36px breathing regardless of cascade order. */
.newsletter-note{
  max-width:460px !important;
  margin:36px auto 0 !important;
  font:400 12px/1.55 'DM Sans',sans-serif !important;
  color:var(--ink3) !important;
}
.newsletter-success{
  color:var(--lime);
  font:500 14px/1.5 'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.01em;
  margin-top:8px;
}
@media(prefers-reduced-motion:reduce){
  .newsletter-btn{transition:none}
  .newsletter-btn:hover{transform:none}
}

/* iOS 16px zoom guard applies automatically via the global form selector */

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERSHIP — featured CEO + team row
   ADVISERS   — named experts with photo + credentials
   Tokens only. Photos use <img> with an initials-gradient fallback so the
   layout stays elegant whether or not the photo file exists on disk.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Featured leader (CEO) ─── */
.leader-hero{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:48px;
  align-items:center;
  max-width:1000px;margin:0 auto 56px;
  padding:36px 40px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(45,212,217,.05) 0%,rgba(15,30,56,.5) 50%,rgba(74,222,153,.04) 100%);
  position:relative;overflow:hidden;
}
.leader-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 100% at 0% 50%,rgba(45,212,217,.08),transparent 60%),radial-gradient(ellipse 60% 100% at 100% 50%,rgba(74,222,153,.06),transparent 60%);
  pointer-events:none;z-index:0;
}
.leader-hero > *{position:relative;z-index:1}

.leader-hero-photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#0077b6,#2d6a4f);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 20px 50px -18px rgba(0,0,0,.55),
    0 0 0 8px rgba(255,255,255,.02),
    0 40px 100px -30px rgba(45,212,217,.3);
}
.leader-hero-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  z-index:1;
}
.leader-hero-photo .leader-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font:800 64px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;
  color:#050D1A;
  z-index:0;
}
/* .has-img shows the photo on top; fallback stays but is hidden behind it. */

.leader-hero-body{display:flex;flex-direction:column;gap:14px}
.leader-hero-role{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font:700 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
  padding:5px 12px;border-radius:100px;
  background:rgba(45,212,217,.08);border:1px solid rgba(45,212,217,.18);
}
.leader-hero-name{
  font:800 clamp(28px,3.4vw,40px)/1.1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.03em;color:var(--ink);
  margin:0;
}
.leader-hero-bio{
  font:300 16px/1.7 'DM Sans',sans-serif;
  color:var(--ink2);margin:0;max-width:560px;
}
.leader-hero-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;
  font:500 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.04em;
  color:var(--ink3);
}
.leader-hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border2);flex-shrink:0}
.leader-hero-meta a{color:var(--ink3);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.leader-hero-meta a:hover{color:var(--teal)}

@media(max-width:760px){
  .leader-hero{grid-template-columns:1fr;gap:28px;padding:28px 24px;text-align:center}
  .leader-hero-photo{width:200px;height:200px;max-width:200px;margin:0 auto}
  .leader-hero-role{align-self:center}
  .leader-hero-meta{justify-content:center}
  .leader-hero-body{align-items:center}

  /* Staff + adviser cards: match leader-hero centering on mobile */
  .team-card{text-align:center;align-items:center}
  .tav{margin-left:auto;margin-right:auto}
  .adviser-card{text-align:center;align-items:center}
  .adviser-photo{margin-left:auto;margin-right:auto}
  .adviser-affiliations{justify-content:center}
}

/* ─── Advisers grid — named experts with photo + credentials ─── */
.adviser-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:20px;max-width:1080px;margin:0 auto;
}
.adviser-card{
  display:flex;flex-direction:column;gap:16px;
  padding:28px 26px;
  border:1px solid var(--border);border-radius:18px;
  background:rgba(15,30,56,.45);
  transition:background .4s var(--ease-out),border-color .4s var(--ease-out),transform .4s var(--ease-out);
}
.adviser-card:hover{
  background:rgba(15,30,56,.68);
  border-color:rgba(45,212,217,.22);
  transform:translateY(-2px);
}
.adviser-photo{
  position:relative;
  width:72px;height:72px;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#8B9FFF,#2DD4D9);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    0 8px 24px -10px rgba(0,0,0,.5);
}
.adviser-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.adviser-photo .adviser-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 22px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;color:#050D1A;
  z-index:0;
}
.adviser-card h4{
  font:700 17px/1.25 'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em;
  color:var(--ink);margin:0;
}
.adviser-role{
  font:600 11px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);
  margin-top:-4px;
}
.adviser-card p{
  font:300 13px/1.65 'DM Sans',sans-serif;
  color:var(--ink2);margin:0;
}
.adviser-affiliations{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  margin-top:6px;
  font:500 11px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;
  color:var(--ink3);
}
.adviser-affiliations .dot{width:3px;height:3px;border-radius:50%;background:var(--border2);flex-shrink:0}

@media(max-width:480px){
  .adviser-card{padding:22px 20px}
  .adviser-photo{width:56px;height:56px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   RX-PREVIEW — PharmaDoyen "At the counter" (home page)
   ═══════════════════════════════════════════════════════════════════════════
   Uses the REAL product walkthrough video (not a recreation). Muted, looping,
   2× playback via assets/app.js (data-demo-src lazy-loaded on intersection).
   Two mockups, one per device class:
     .rx-preview--web    — framed card (desktop/tablet, ≥641 px)
     .rx-preview--mobile — iPhone-framed shell (≤640 px)
   ═══════════════════════════════════════════════════════════════════════════ */

.rx-preview{
  position:relative;
  margin:56px auto 0;
  border-radius:22px;
  overflow:hidden;
}
.rx-preview--web{
  max-width:720px;display:block;
  background:linear-gradient(180deg,rgba(15,30,56,.58) 0%,rgba(8,16,32,.62) 100%);
  border:1px solid var(--border);
  box-shadow:
    0 32px 80px -40px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 80px 160px -60px rgba(45,212,217,.14);
}
.rx-preview--web::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 55% at 0% 0%,rgba(45,212,217,.08),transparent 60%),
    radial-gradient(ellipse 55% 65% at 100% 100%,rgba(74,222,153,.05),transparent 60%);
  pointer-events:none;z-index:0;
}
.rx-preview--web > *{position:relative;z-index:1}
.rx-preview--mobile{display:none}

/* Window chrome — Stripe/Apple convention: dark bezel + 3 dots + URL slug.
   Anchors the bright app UI against the dark page so it doesn't glare. */
.rx-window{
  margin:18px 18px 0;
  border-radius:12px;
  overflow:hidden;
  background:#0a1426;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.rx-window-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg,#0e1a2e 0%,#081223 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.rx-dot{width:10px;height:10px;border-radius:50%;display:block}
.rx-dot--r{background:#ff5f57}
.rx-dot--y{background:#febc2e}
.rx-dot--g{background:#28c840}
.rx-window-title{
  flex:1;text-align:center;
  font:500 11px/1 'JetBrains Mono',monospace;
  letter-spacing:.02em;
  color:rgba(138,155,181,.55);
  padding-right:66px;  /* optical balance against the 3 dots on the left */
}

/* The walkthrough clip lives inside the window chrome, no margin of its own. */
.rx-frame{
  overflow:hidden;
  background:#0a1426;
  aspect-ratio:16 / 9;
  position:relative;
}
.rx-video{
  display:block;width:100%;height:100%;object-fit:cover;
  background:#0a1426;
  /* Tone-map the bright app UI so it reads as content, not screen-glare,
     against the site's dark canvas. Apple/Stripe use similar mid-tone dims. */
  filter:brightness(.92) saturate(.97);
}
.rx-footer{
  padding:14px 28px 18px;
  font:500 10px/1 'JetBrains Mono',monospace;
  letter-spacing:.12em;
  color:rgba(138,155,181,.4);
  border-top:1px solid rgba(255,255,255,.04);
  background:rgba(5,13,26,.25);
  margin-top:20px;
}

/* ─── Mobile phone-framed (≤640 px) ────────────────────────────────────── */
@media(max-width:640px){
  .rx-preview--web{display:none}
  .rx-preview--mobile{
    display:block;
    max-width:300px;margin:40px auto 0;
    background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;
  }
  .rx-phone{
    position:relative;
    padding:10px;
    border-radius:46px;
    background:linear-gradient(180deg,#0d1424 0%,#050a16 100%);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
      0 36px 70px -28px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.03) inset,
      0 80px 140px -60px rgba(45,212,217,.18);
  }
  .rx-phone-notch{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    width:94px;height:24px;border-radius:100px;
    background:#020510;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    z-index:3;
  }
  .rx-phone-bar{
    position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
    width:100px;height:4px;border-radius:100px;
    background:rgba(255,255,255,.2);
    z-index:3;
  }
  .rx-phone-screen{
    border-radius:36px;
    background:#0a1426;
    overflow:hidden;
    aspect-ratio:9 / 16;
    position:relative;
  }
  .rx-phone-screen .rx-video{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:brightness(.92) saturate(.97);
  }
}

/* ─── Tablet refinement (641–900 px) ───────────────────────────────────── */
@media(min-width:641px) and (max-width:900px){
  .rx-preview--web{max-width:720px}
  .rx-frame{margin:18px 18px 0}
}