/* ══════════════════════════════════════════════════════════════════════
   DEROVEST — design system
   ──────────────────────────────────────────────────────────────────────
   One stylesheet, no build step. Order matters:
     1. fonts          5. navigation
     2. tokens         6. page furniture (hero, bands, footer)
     3. reset          7. components
     4. primitives     8. motion  ← every animation lives at the bottom
   Never declare a colour outside §2.
   ══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. FONTS ═════════════════════════════════════════════════════════
   Self-hosted, same origin, latin subset, all three variable — so one
   file per family covers every weight and there is no round trip to
   fonts.googleapis.com before the page can paint. All OFL licensed.
   ═════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Archivo";
  font-style:normal; font-weight:400 900; font-stretch:62% 125%;
  font-display:swap;
  src:url("/assets/fonts/archivo.woff2?v=de2f1fe817") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Manrope";
  font-style:normal; font-weight:400 800;
  font-display:swap;
  src:url("/assets/fonts/manrope.woff2?v=938c6e8019") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal; font-weight:100 800;
  font-display:swap;
  src:url("/assets/fonts/jetbrains-mono.woff2?v=b636a65da4") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══ 2. TOKENS ════════════════════════════════════════════════════════
   The palette is read off the logo: a deep navy field, a bright
   technology blue for structure, and gold used sparingly — the logo
   spends gold on one arrow, so the site spends it on one thing per
   screen. Two surfaces exist: the dark field, and a near-white "paper"
   used for whole sections, which is what gives the page its rhythm.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  /* ground */
  --bg:#05091A;  --bg-2:#080E23;  --bg-3:#0B1330;
  --panel:#0C142E;  --panel-2:#111B3B;  --panel-3:#16224A;
  --line:#1C2950;  --line-2:#263566;  --hair:#FFFFFF0F;

  /* ink on ground */
  /* ink-3 and ink-4 are deliberately light for muted text: both clear 4.5:1
     against every surface they are used on, including the deepest panel. */
  --ink:#EDF2FF;  --ink-2:#A6B4D6;  --ink-3:#98A4C4;  --ink-4:#8994B8;

  /* technology blue */
  --blue:#4C8DFF;  --blue-2:#2F6BF0;  --blue-3:#1B49C9;
  /* blue as TEXT: lighter, so it clears 4.5:1 over the lit background.
     --blue stays the brand value for fills, strokes and borders. */
  --blue-ink:#74A7FF;
  --blue-soft:#4C8DFF14;  --blue-line:#4C8DFF3D;  --blue-glow:#2F6BF055;
  --blue-grad:linear-gradient(135deg,#4C8DFF,#1B49C9);

  /* gold — the growth arrow */
  --gold:#EAB44F;  --gold-2:#C98F2E;
  --gold-soft:#EAB44F16;  --gold-line:#EAB44F44;

  /* status */
  --good:#4ADE9B;  --good-soft:#4ADE9B1C;
  --bad:#F08A80;   --bad-soft:#F08A801C;
  --warn:#FDB022;  --warn-soft:#FDB0221C;  --warn-ink:#FEDF89;

  /* paper — light sections */
  --paper:#F4F6FC;  --paper-2:#FFFFFF;  --paper-3:#E9EEF9;
  --paper-ink:#08102A;  --paper-ink-2:#4B5878;  --paper-ink-3:#5F6C8C;
  --paper-line:#DCE3F2;

  /* form */
  --radius:14px;  --radius-lg:20px;  --radius-sm:10px;
  --shadow:0 1px 0 #FFFFFF0A, 0 30px 70px -40px #000000CC;
  --shadow-lift:0 30px 60px -32px #000000D9;
  --shadow-paper:0 1px 0 #FFFFFF, 0 22px 50px -34px #0A143A2E;
  --grid-line:#FFFFFF08;

  /* motion */
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --rise:16px;
  --t-fast:.18s; --t:.3s; --t-slow:.6s;

  /* rhythm */
  --band:clamp(72px,9vw,136px);
  --gutter:24px;

  color-scheme:dark;
}

/* ═══ 3. RESET ═════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:96px; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  margin:0; line-height:1.0; letter-spacing:-.035em; text-wrap:balance;
  font-variation-settings:"wdth" 106;
}
p{margin:0}
a{color:inherit}
img,svg,video{max-width:100%}
ul,ol{margin:0; padding:0}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:3px}
::selection{background:var(--blue-2); color:#fff}


/* ═══ 4. PRIMITIVES ════════════════════════════════════════════════════ */

/* — type scale — */
.display{
  font-family:"Archivo",sans-serif; font-weight:800;
  font-size:clamp(40px,7.4vw,92px); line-height:.94;
  letter-spacing:-.045em; font-variation-settings:"wdth" 104;
}
h1{font-size:clamp(34px,5vw,64px); font-weight:800; letter-spacing:-.04em}
h2{font-size:clamp(30px,4.2vw,54px); font-weight:800; letter-spacing:-.038em}
h3{font-size:clamp(19px,1.5vw,23px); font-weight:700; letter-spacing:-.025em}
.lede{
  margin-top:clamp(20px,2.2vw,28px); max-width:56ch;
  font-size:clamp(16.5px,1.35vw,19.5px); line-height:1.6; color:var(--ink-2);
}
.lede b,.lede strong{color:var(--ink); font-weight:700}
.sec-lede{margin-top:18px; max-width:60ch; font-size:clamp(16px,1.2vw,18px); color:var(--ink-2)}
.mono,.code-label,.kicker{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.code-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.kicker{
  display:inline-flex; align-items:center; gap:11px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.kicker::before{content:""; width:26px; height:1px; background:var(--blue); flex:none}
.kicker.gold::before{background:var(--gold)}
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.eyebrow .bar{width:32px; height:1px; background:var(--blue); flex:none}

/* — layout — */
.wrap{width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:960px}
.band{padding-block:var(--band); position:relative}
.band.rule{border-top:1px solid var(--line)}
.band-head{max-width:70ch}
.band-head h2{margin-top:20px}

/* the two-column spine: a sticky section marker beside the content */
.spine{display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(24px,3.4vw,56px)}
.spine > .gutter-col{position:relative}
.spine .stick{position:sticky; top:112px; display:flex; flex-direction:column; gap:10px}
.spine .tick{width:26px; height:1px; background:var(--blue); transform-origin:left}
@media (max-width:920px){
  .spine{grid-template-columns:minmax(0,1fr); gap:20px}
  .spine .stick{position:static; flex-direction:row; align-items:center; gap:12px}
}

/* — paper sections — */
.band-paper{
  background:var(--paper); color:var(--paper-ink);
  --ink:var(--paper-ink); --ink-2:var(--paper-ink-2); --ink-3:var(--paper-ink-3);
  --line:var(--paper-line); --line-2:#CBD5EC; --panel:var(--paper-2); --panel-2:var(--paper-3);
  --hair:#0A143A0F; --shadow:var(--shadow-paper); --grid-line:#0A143A08;
  --blue-soft:#2F6BF00F; --blue-line:#2F6BF033; --blue:#1B49C9; --blue-2:#1B49C9;
  --blue-ink:#1B49C9;
  color-scheme:light;
}
.band-paper .code-label,.band-paper .kicker{color:var(--paper-ink-3)}

/* — decorative field: a fine grid plus one soft light source — */
.field{position:relative; overflow:hidden; isolation:isolate}
.field::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 38px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/38px 100%;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.field::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-30% -20% auto -20%; height:120%;
  background:
    radial-gradient(48% 42% at 20% 6%, var(--blue-glow), transparent 68%),
    radial-gradient(34% 34% at 86% 2%, #EAB44F1F, transparent 70%);
  filter:blur(6px);
}

/* — buttons — */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:var(--radius-sm);
  font-family:"Manrope",sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em;
  text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), background var(--t) ease,
             border-color var(--t) ease, box-shadow var(--t) ease, color var(--t) ease;
}
.btn svg{flex:none; transition:transform var(--t) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{
  background:var(--blue-grad); color:#fff;
  box-shadow:0 10px 30px -12px var(--blue-glow), inset 0 1px 0 #FFFFFF2E;
}
.btn-primary:hover{box-shadow:0 16px 40px -12px var(--blue-glow), inset 0 1px 0 #FFFFFF3D; transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:#FFFFFF08}
.btn-ghost:hover{border-color:var(--blue-line); background:var(--blue-soft); transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,#EAB44F,#C98F2E); color:#2A1C02;
  box-shadow:0 10px 30px -14px #C98F2E99, inset 0 1px 0 #FFFFFF4D}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 40px -14px #C98F2EAA}
.btn-sm{padding:10px 17px; font-size:14px; border-radius:9px}
.btn-lg{padding:17px 30px; font-size:16.5px; border-radius:12px}
.btn:active{transform:translateY(0)}
.band-paper .btn-ghost{border-color:#C6D0E6; background:#FFFFFF; color:var(--paper-ink)}
.band-paper .btn-ghost:hover{border-color:#1B49C955; background:#F2F5FD}

/* — inline forward link — */
.more{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:15px; color:var(--blue-ink); width:fit-content;
}
.more svg{transition:transform var(--t) var(--ease)}
.more:hover svg{transform:translateX(4px)}
.more.gold{color:var(--gold)}

/* — chips / tags — */
.tag{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px;
  border:1px solid var(--line); color:var(--ink-3); white-space:nowrap;
}
.tag.good{color:var(--good); border-color:#4ADE9B4D; background:var(--good-soft)}
.tag.bad{color:var(--bad); border-color:#F08A804D; background:var(--bad-soft)}
.tag.blue{color:var(--blue-ink); border-color:var(--blue-line); background:var(--blue-soft)}
.tag.gold{color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft)}
/* an inline status marker — PORTVAX is in beta, so it is labelled wherever
   it is listed beside a product that is already running */
.soon{
  display:inline-block; margin-left:9px; vertical-align:2px;
  font-family:"JetBrains Mono",monospace; font-size:9px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  padding:3px 7px; border-radius:5px;
  background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--gold);
}
.idx-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.02em;
  padding:5px 10px; border-radius:7px; background:var(--panel-2); color:var(--ink-2);
  border:1px solid var(--line);
}

/* — skip link — */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue-2); color:#fff; padding:12px 18px;
  border-radius:0 0 10px 0; font-weight:700; font-size:14px; text-decoration:none;
}
.skip:focus{left:0}


/* ═══ 5. NAVIGATION ════════════════════════════════════════════════════
   Fixed, not sticky: the bar condenses on scroll, and a sticky bar is in
   normal flow, so shrinking it would drag the page up under the reader.
   body carries matching top padding instead.
   ═════════════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--t) ease, border-color var(--t) ease,
             backdrop-filter var(--t) ease, box-shadow var(--t) ease;
}
body{padding-top:74px}
.nav-in{display:flex; align-items:center; gap:clamp(12px,2vw,28px); height:74px; transition:height var(--t) var(--ease)}

.nav.solid{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 20px 40px -34px #000;
}
.nav.solid .nav-in{height:62px}
/* the menu needs a readable backing even at the top of the page */
.nav[data-open="true"]{
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}

/* brand */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; flex:none}
.brand .mark{height:30px; width:auto; flex:none; transition:height var(--t) var(--ease)}
.nav.solid .brand .mark{height:26px}
.brand b{
  font-family:"Archivo",sans-serif; font-variation-settings:"wdth" 118;
  font-weight:800; font-size:19px; letter-spacing:.015em; line-height:1;
}

/* desktop links */
.nav-links{display:flex; align-items:center; gap:clamp(4px,1.4vw,10px); margin-right:auto}
.nav-links > a,.nav-item > a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 12px; border-radius:9px; text-decoration:none;
  color:var(--ink-2); font-size:14.5px; font-weight:600; white-space:nowrap;
  transition:color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav-links > a:hover,.nav-item:hover > a,.nav-item:focus-within > a{color:var(--ink); background:#FFFFFF0A}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px;
  height:2px; border-radius:2px; background:var(--blue);
}
.nav-links > a,.nav-item > a{position:relative}
.nav-item{position:relative}
.nav-item > a svg{color:var(--ink-3); transition:transform var(--t) var(--ease)}
.nav-item:hover > a svg,.nav-item:focus-within > a svg{transform:rotate(180deg)}

/* ── mega menu ─────────────────────────────────────────────────────── */
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; z-index:90;
  transform:translateX(-50%) translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  box-shadow:0 40px 80px -40px #000000E6, inset 0 1px 0 #FFFFFF14;
  padding:10px;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
/* an invisible bridge so the pointer can cross the gap to the panel */
.mega::before{content:""; position:absolute; inset:-14px -10px 100% -10px}
.nav-item:hover > .mega,.nav-item:focus-within > .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.mega-grid{display:grid; gap:4px}
.mega-2{grid-template-columns:repeat(2,minmax(230px,1fr)); width:min(92vw,620px)}
.mega-1{grid-template-columns:minmax(300px,1fr); width:min(92vw,400px)}
.mega-link{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:13px; align-items:start;
  padding:13px 14px; border-radius:12px; text-decoration:none;
  transition:background var(--t-fast) ease;
}
.mega-link:hover{background:#FFFFFF0A}
.mega-link .ic{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--blue-soft); border:1px solid var(--blue-line); color:var(--blue-ink);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:15px;
  transition:background var(--t) ease, border-color var(--t) ease;
}
.mega-link:hover .ic{background:#4C8DFF26; border-color:#4C8DFF66}
.mega-link.is-gold .ic{background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold)}
.mega-link .txt b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
/* direct child only: the title line can carry its own inline markers */
.mega-link .txt > span{display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--ink-3)}
.mega-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:8px; padding:13px 15px; border-radius:12px;
  background:#FFFFFF07; border:1px solid var(--line);
}
.mega-foot p{font-size:13px; color:var(--ink-3); line-height:1.45}
.mega-foot .more{font-size:13.5px}

/* ── mobile menu ───────────────────────────────────────────────────── */
.nav-toggle{
  display:none; place-items:center; width:40px; height:40px; flex:none; order:3;
  border:1px solid var(--line-2); border-radius:11px; background:#FFFFFF0A;
  color:var(--ink); cursor:pointer;
}
.nav-toggle:hover{border-color:var(--blue-line); background:var(--blue-soft)}
.nav-toggle .ex{display:none}
.nav[data-open="true"] .nav-toggle .bars{display:none}
.nav[data-open="true"] .nav-toggle .ex{display:block}
.nav-cta{flex:none}

@media (max-width:1060px){
  .nav-toggle{display:grid}
  .nav-cta{display:none}
  /* Absolute, not fixed: .nav carries a backdrop-filter, which makes it the
     containing block for fixed descendants — a fixed panel would collapse to
     the height of the bar. Anchoring to .nav and taking the rest of the
     viewport gives the same full-height drawer without that trap. */
  .nav-links{
    position:absolute; top:100%; left:0; right:0; z-index:85;
    height:calc(100dvh - var(--nav-h,74px));
    display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:14px var(--gutter) 48px;
    background:var(--bg); overflow-y:auto; overscroll-behavior:contain;
    border-top:1px solid var(--line);
  }
  .nav:not([data-open="true"]) .nav-links{display:none}
  .nav-links > a,.nav-item > a{
    padding:16px 4px; border-radius:0; font-size:17px; font-weight:700; color:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .nav-links a[aria-current="page"]::after{left:4px; right:auto; width:22px; bottom:8px}
  .nav-item > a svg{margin-left:auto; color:var(--blue-ink)}
  .nav-item{display:flex; flex-direction:column}
  .mega{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    width:auto; background:transparent; border:0; box-shadow:none; padding:6px 0 14px;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .mega::before{display:none}
  .mega-grid,.mega-2,.mega-1{grid-template-columns:minmax(0,1fr); width:auto}
  .mega-link{padding:12px 4px; border-radius:10px}
  .mega-link .ic{width:34px; height:34px}
  .mega-foot{margin-top:4px; flex-direction:column; align-items:flex-start; gap:10px}
  .mega-foot .more{white-space:nowrap}
  .nav-mob-cta{display:flex; flex-direction:column; gap:10px; margin-top:26px}
  .nav-mob-meta{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; gap:8px 18px;
  }
  .nav-mob-meta a{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-3); text-decoration:none}
  .nav-mob-meta a:hover{color:var(--blue-ink)}
}
@media (min-width:1061px){ .nav-mob-cta,.nav-mob-meta{display:none} }
@media (max-width:420px){ :root{--gutter:18px} }

/* phones: a row of differently sized buttons looks accidental — stack them */
@media (max-width:560px){
  .hero-cta,.cta-row,.show-cta,.form-actions{flex-direction:column; align-items:stretch}
  .hero-cta .btn,.cta-row .btn,.show-cta .btn,.form-actions .btn{width:100%}
  .close-cta .btn{width:100%}
}

/* reading progress, a hairline along the bottom edge of the bar */
.progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--blue-3),var(--blue),var(--gold));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
  opacity:0; transition:opacity var(--t) ease;
}
.nav.solid .progress{opacity:1}


/* ═══ 6. FOOTER ════════════════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line); background:var(--bg-2); position:relative; overflow:hidden}
.foot::before{
  content:""; position:absolute; inset:auto -10% -60% -10%; height:100%;
  background:radial-gradient(40% 60% at 50% 100%, #2F6BF01F, transparent 70%);
  pointer-events:none;
}
.foot-in{
  position:relative; display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  padding-block:clamp(48px,6vw,76px) clamp(36px,4vw,52px);
}
@media (max-width:940px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px}
  .foot-brand{grid-column:1 / -1}}
@media (max-width:520px){.foot-in{grid-template-columns:minmax(0,1fr)}}
.foot-brand p{margin-top:16px; color:var(--ink-3); font-size:14.5px; max-width:34ch; line-height:1.6}
.foot-brand .brand .mark{height:34px}
.foot-social{display:flex; gap:9px; margin-top:22px}
.foot-social a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:#FFFFFF06; color:var(--ink-3);
  transition:color var(--t) ease, border-color var(--t) ease, background var(--t) ease, transform var(--t) var(--ease);
}
.foot-social a:hover{color:var(--blue-ink); border-color:var(--blue-line); background:var(--blue-soft); transform:translateY(-2px)}
.foot-col{display:flex; flex-direction:column; gap:11px; min-width:0}
.foot-col .code-label{margin-bottom:3px}
.foot-col a{text-decoration:none; color:var(--ink-2); font-size:14.5px; width:fit-content;
  transition:color var(--t-fast) ease}
.foot-col a:hover{color:var(--blue-ink)}
.foot-contact{
  display:flex; flex-direction:column; gap:6px; margin-top:24px;
  font-size:14px; color:var(--ink-3); line-height:1.6;
}
.foot-contact a{color:var(--ink-2); text-decoration:none}
.foot-contact a:hover{color:var(--blue-ink)}
.foot-bottom{
  position:relative; border-top:1px solid var(--line); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; color:var(--ink-4);
}
.foot-bottom .sep{margin-left:auto}
@media (max-width:640px){.foot-bottom .sep{margin-left:0}}


/* ═══ 7. HERO ══════════════════════════════════════════════════════════
   Near-full viewport. The copy sits left, the branch diagram right; on
   narrow screens the diagram drops below and sheds its outer ring.
   ═════════════════════════════════════════════════════════════════════ */
.hero{position:relative; border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/40px 100%;
  mask-image:radial-gradient(130% 100% at 30% 10%, #000 25%, transparent 80%);
}
/* the hero's light is animated now (see .hero-bg); this is only the
   falloff that keeps the headline sitting on a darker patch */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 60% at 28% 52%, #05091A66, transparent 70%),
    linear-gradient(180deg, transparent 60%, #05091A99 100%);
}
.hero-in{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4vw,64px);
  min-height:clamp(560px,calc(100svh - 74px),880px);
  padding-block:clamp(52px,7vw,90px) clamp(60px,7vw,96px);
}
@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr); min-height:0; gap:44px; padding-block:48px 64px}
}
.hero h1{
  font-size:clamp(36px,4.6vw,61px); font-weight:800; line-height:1.02;
  letter-spacing:-.042em; font-variation-settings:"wdth" 97;
}
.hero h1 .accent{
  color:transparent; background:linear-gradient(105deg,#7FB0FF 10%,#4C8DFF 42%,#EAB44F 96%);
  -webkit-background-clip:text; background-clip:text;
}
.hero .lede{max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3vw,38px)}
.hero-proof{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  margin-top:clamp(32px,3.6vw,44px); padding-top:24px; border-top:1px solid var(--line);
  max-width:620px;
}
.hero-proof span{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--ink-3); line-height:1.4;
}
.hero-proof svg{color:var(--blue-ink); flex:none}

/* ── animated hero backdrop ────────────────────────────────────────────
   Four moving layers, all transform/opacity only, all GPU-composited:

     aurora  three large soft lights on different loops, so the hero is
             never lit the same way twice
     beams   a horizontal and a vertical line travelling the grid, which
             is what makes the surface read as live circuitry
     sheen   one slow diagonal pass of light across the whole hero
     motes   particles rising, echoing the logo's climbing arrow

   Nothing here animates a property that forces layout, and the whole
   thing is behind the copy at z-index -2. It halves on tablets and
   stops entirely on phones and under prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────────── */
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none}

/* — aurora — */
.hero-bg .aurora{
  position:absolute; border-radius:50%; will-change:transform;
  mix-blend-mode:screen;
}
.hero-bg .a1{
  width:min(78vw,1040px); aspect-ratio:1; left:-20%; top:-42%;
  background:radial-gradient(circle, #2F6BF0 0%, #2F6BF066 32%, transparent 64%);
  opacity:.5; animation:auroraA 24s ease-in-out infinite;
}
.hero-bg .a2{
  width:min(52vw,680px); aspect-ratio:1; right:-14%; top:-26%;
  background:radial-gradient(circle, #E9A93D 0%, #C9902E4D 34%, transparent 66%);
  opacity:.3; animation:auroraB 31s ease-in-out infinite;
}
.hero-bg .a3{
  width:min(70vw,900px); aspect-ratio:1; right:-10%; bottom:-48%;
  background:radial-gradient(circle, #1B49C9 0%, #1B49C966 34%, transparent 66%);
  opacity:.48; animation:auroraC 27s ease-in-out infinite;
}
@keyframes auroraA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%    {transform:translate3d(9%,7%,0)  scale(1.14)}
  67%    {transform:translate3d(-6%,12%,0) scale(.93)}
}
@keyframes auroraB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%    {transform:translate3d(-11%,9%,0) scale(1.2)}
  72%    {transform:translate3d(5%,-4%,0)  scale(.9)}
}
@keyframes auroraC{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  38%    {transform:translate3d(-9%,-8%,0) scale(1.1)}
  70%    {transform:translate3d(7%,-3%,0)  scale(.95)}
}

/* — beams: a full-bleed element carrying a 1px line, translated a whole
     viewport so the motion stays on the compositor — */
.hero-bg .beam{position:absolute; inset:0; will-change:transform}
.hero-bg .beam::before{content:""; position:absolute; background:currentColor}
.hero-bg .beam-h{color:#7FB0FF; animation:beamDown 9s linear infinite}
.hero-bg .beam-h::before{
  left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, #7FB0FFB3 22%, #FFFFFF 50%, #7FB0FFB3 78%, transparent);
  box-shadow:0 0 12px #4C8DFF80;
}
.hero-bg .beam-v{color:#EAB44F; animation:beamAcross 13s linear infinite; animation-delay:2.5s}
.hero-bg .beam-v::before{
  top:0; bottom:0; left:0; width:1px;
  background:linear-gradient(180deg, transparent, #EAB44F99 26%, #FFE7B0 50%, #EAB44F99 74%, transparent);
  box-shadow:0 0 12px #EAB44F66;
}
@keyframes beamDown  {from{transform:translate3d(0,-4%,0)} to{transform:translate3d(0,104%,0)}}
@keyframes beamAcross{from{transform:translate3d(-4%,0,0)} to{transform:translate3d(104%,0,0)}}

/* — sheen — */
.hero-bg .sheen{
  position:absolute; inset:-30% -60%; will-change:transform;
  background:linear-gradient(108deg, transparent 40%, #7FB0FF1F 48%, #FFFFFF14 50%, #7FB0FF1F 52%, transparent 60%);
  animation:sheen 14s ease-in-out infinite;
}
@keyframes sheen{
  0%,100%{transform:translate3d(-26%,0,0)}
  50%    {transform:translate3d(26%,0,0)}
}

/* — motes: they climb, like the arrow in the mark — */
.hero-bg .motes{position:absolute; inset:0}
.hero-bg .motes i{
  position:absolute; bottom:-8px; width:3px; height:3px; border-radius:50%;
  background:#8FBBFF; box-shadow:0 0 6px #4C8DFFCC; opacity:0;
  animation:rise linear infinite; will-change:transform, opacity;
}
.hero-bg .motes i:nth-child(3n){background:#EAB44F; box-shadow:0 0 6px #EAB44FAA}
.hero-bg .motes i:nth-child(4n){width:2px; height:2px}
@keyframes rise{
  0%  {transform:translate3d(0,0,0) scale(.5); opacity:0}
  10% {opacity:.85}
  85% {opacity:.45}
  100%{transform:translate3d(14px,-102%,0) scale(1); opacity:0}
}
/* spread them across the width on their own clocks */
.hero-bg .motes i:nth-child(1) {left:4%;  animation-duration:17s; animation-delay:0s}
.hero-bg .motes i:nth-child(2) {left:11%; animation-duration:22s; animation-delay:3s}
.hero-bg .motes i:nth-child(3) {left:19%; animation-duration:14s; animation-delay:6s}
.hero-bg .motes i:nth-child(4) {left:27%; animation-duration:25s; animation-delay:1.5s}
.hero-bg .motes i:nth-child(5) {left:34%; animation-duration:19s; animation-delay:8s}
.hero-bg .motes i:nth-child(6) {left:42%; animation-duration:15s; animation-delay:4.5s}
.hero-bg .motes i:nth-child(7) {left:50%; animation-duration:23s; animation-delay:10s}
.hero-bg .motes i:nth-child(8) {left:58%; animation-duration:18s; animation-delay:2s}
.hero-bg .motes i:nth-child(9) {left:66%; animation-duration:21s; animation-delay:7s}
.hero-bg .motes i:nth-child(10){left:74%; animation-duration:16s; animation-delay:11s}
.hero-bg .motes i:nth-child(11){left:82%; animation-duration:24s; animation-delay:5s}
.hero-bg .motes i:nth-child(12){left:89%; animation-duration:20s; animation-delay:9s}
.hero-bg .motes i:nth-child(13){left:95%; animation-duration:26s; animation-delay:13s}
.hero-bg .motes i:nth-child(14){left:15%; animation-duration:28s; animation-delay:15s}

/* tablets: keep the light, drop the fine detail */
@media (max-width:900px){
  .hero-bg .motes i:nth-child(n+8){display:none}
  .hero-bg .sheen{display:none}
}
/* phones: the hero is lit, but nothing moves */
@media (max-width:700px){
  .hero-bg .aurora{animation:none}
  .hero-bg .beam,.hero-bg .motes{display:none}
}

/* ── the branch diagram ────────────────────────────────────────────────
   Origin mark → four branches. Plain SVG in the document, animated with
   CSS only: no render loop, so it costs nothing after first paint. */
.branch{position:relative; width:100%; max-width:640px; margin-inline:auto; aspect-ratio:1/1}
/* the wire layer needs its own box: it carries a transform, which makes it
   the containing block for the absolutely positioned svg inside it */
.branch-inner{position:absolute; inset:0}
.branch svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.branch .ring{fill:none; stroke:var(--line-2); stroke-width:1.2; opacity:.8}
.branch .ring-2{stroke-dasharray:3 9; opacity:.4}
.branch .wire{fill:none; stroke:url(#wireGrad); stroke-width:1.9; stroke-linecap:round}
.branch .pip{fill:var(--blue)}
.branch .core{fill:url(#coreGrad)}
.branch-node{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  padding:11px 15px; border-radius:12px; white-space:nowrap;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-2); box-shadow:0 18px 40px -26px #000000E6;
  text-decoration:none;
  transition:border-color var(--t) ease, transform var(--t) var(--ease), background var(--t) ease;
}
.branch-node:hover{border-color:var(--blue-line); background:color-mix(in srgb, var(--panel-2) 94%, transparent)}
.branch-node b{font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; letter-spacing:-.015em; color:var(--ink)}
.branch-node span{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.branch-node.is-gold{border-color:var(--gold-line)}
.branch-node.is-gold span{color:var(--gold)}
.branch-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:132px; height:132px; border-radius:50%; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #142352, #0A1128 80%);
  border:1px solid var(--line-2);
  box-shadow:0 0 0 10px #4C8DFF0A, 0 30px 60px -30px #000, inset 0 1px 0 #FFFFFF1A;
}
.branch-core img{width:46px; height:auto}
.branch-core span{font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3)}
@media (max-width:1080px){.branch{max-width:520px}}
@media (max-width:600px){
  .branch{max-width:400px}
  .branch-node{padding:8px 11px; border-radius:10px}
  .branch-node b{font-size:12px}
  .branch-node span{font-size:8.5px; letter-spacing:.1em}
  .branch-core{width:96px; height:96px}
  .branch-core img{width:34px}
  .branch-core span{font-size:7.5px}
}


/* ═══ 8. TWO SIDES — the split ═════════════════════════════════════════
   50/50 on desktop; hovering one half takes space from the other. The
   grid animates between fr values, which is cheap and reversible.
   ═════════════════════════════════════════════════════════════════════ */
.sides{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:clamp(36px,4vw,54px);
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:grid-template-columns .55s var(--ease-out);
}
@media (hover:hover) and (min-width:961px){
  .sides:has(.side:nth-child(1):hover){grid-template-columns:1.22fr .78fr}
  .sides:has(.side:nth-child(2):hover){grid-template-columns:.78fr 1.22fr}
}
@media (max-width:960px){.sides{grid-template-columns:minmax(0,1fr)}}
.side{
  position:relative; background:var(--panel); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:18px; overflow:hidden; isolation:isolate;
  transition:background var(--t-slow) var(--ease);
}
.side::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none;
  transition:opacity .55s var(--ease);
}
.side-build::before{background:radial-gradient(70% 60% at 20% 0%, #EAB44F1F, transparent 70%)}
.side-serve::before{background:radial-gradient(70% 60% at 80% 0%, #4C8DFF26, transparent 70%)}
.side:hover::before{opacity:1}
.side-num{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.side-build .side-num{color:var(--gold)}
.side-serve .side-num{color:var(--blue-ink)}
.side h3{font-size:clamp(23px,2.4vw,30px); font-weight:800; letter-spacing:-.032em}
.side > p{color:var(--ink-2); font-size:15.5px; max-width:44ch}
.side-list{list-style:none; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.side-list li{background:var(--bg-2)}
.side-list a{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:13px;
  padding:15px 17px; text-decoration:none; transition:background var(--t) ease, padding var(--t) var(--ease);
}
.side-list a:hover{background:var(--panel-2); padding-left:21px}
.side-list .ic{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:14px; flex:none;
  background:var(--blue-soft); border:1px solid var(--blue-line); color:var(--blue-ink);
}
.side-build .side-list .ic{background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold)}
.side-list b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.side-list small{display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3); line-height:1.4;
  font-weight:400; letter-spacing:0}
.side-list .arw{color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) ease}
.side-list a:hover .arw{color:var(--blue-ink); transform:translateX(3px)}
.side-build .side-list a:hover .arw{color:var(--gold)}
.side-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
}
.side-foot p{font-size:14px; color:var(--ink-3); line-height:1.55; max-width:36ch; margin-right:auto}
.side-foot .more{font-size:14px}

/* the line under the split that states the differentiator */
.sides-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:22px;
  padding:20px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(100deg, var(--gold-soft), transparent 60%);
}
.sides-note p{font-size:clamp(16px,1.5vw,19px); color:var(--ink); font-weight:600; max-width:60ch; letter-spacing:-.015em}
.sides-note p b{color:var(--gold); font-weight:700}


/* ═══ 9. PRODUCT SHOWCASE ══════════════════════════════════════════════
   One pinned viewport per product on desktop; a plain stack on mobile,
   where pinning fights the browser's own scroll gestures.
   ═════════════════════════════════════════════════════════════════════ */
.showcase{position:relative}
.show-item{position:relative; border-top:1px solid var(--line)}
.show-in{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4vw,64px); align-items:center;
  padding-block:clamp(56px,7vw,100px);
}
@media (max-width:1000px){.show-in{grid-template-columns:minmax(0,1fr); gap:38px}}
.show-copy .idx{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
/* the product name is an h2 where the showcase is the page's top section,
   and an h3 where a section heading already sits above it */
.show-copy h2,.show-copy h3{
  margin-top:16px; font-size:clamp(34px,4.4vw,58px); font-weight:800;
  letter-spacing:-.042em; font-variation-settings:"wdth" 104; line-height:.98;
}
.show-copy .role{margin-top:14px; font-size:15px; color:var(--ink-3)}
.show-copy .slogan{
  margin-top:18px; font-family:"Archivo",sans-serif; font-weight:600;
  font-size:clamp(18px,1.8vw,23px); letter-spacing:-.025em; color:var(--blue-ink);
}
.show-copy > p{margin-top:16px; color:var(--ink-2); font-size:16.5px; max-width:48ch}
.show-mods{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.show-mods span{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.04em;
  padding:7px 12px; border-radius:8px; border:1px solid var(--line);
  background:#FFFFFF06; color:var(--ink-2);
}
.show-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* — the product mockups — */
.mock{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:var(--shadow-lift); background:var(--panel);
}
.mock-bar{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--panel-2);
}
.mock-dots{display:flex; gap:6px}
.mock-dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block}
.mock-url{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-3);
  padding:4px 12px; border-radius:6px; background:#FFFFFF08; margin-inline:auto;
}
.mock-body{padding:clamp(16px,2vw,22px)}

/* Mentivax: light, educational */
/* the mockups invert the page, so they set their own ink: anything added
   inside inherits a readable colour instead of the dark theme's near-white */
.mock-light{
  background:var(--paper-2); color:var(--paper-ink); border-color:#D6DEF0;
  box-shadow:0 30px 70px -36px #000000CC, 0 0 0 1px #FFFFFF14;
}
.mock-light .mock-bar{background:var(--paper); border-bottom-color:var(--paper-line)}
.mock-light .mock-dots i{background:#C9D3E8}
.mock-light .mock-url{background:#FFFFFF; color:#5F6C8C; border:1px solid var(--paper-line)}
.m-head{display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--paper-line)}
.m-head .logo{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,#2F6BF0,#1B49C9); color:#fff;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:16px;
}
.m-head b{font-family:"Archivo",sans-serif; font-weight:800; font-size:16px; color:var(--paper-ink); letter-spacing:-.02em}
.m-head .term{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper-ink-3)}
.m-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px}
.m-stat{border:1px solid var(--paper-line); border-radius:12px; padding:13px 14px; background:var(--paper)}
.m-stat .l{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-ink-3)}
.m-stat .v{margin-top:7px; font-family:"Archivo",sans-serif; font-weight:800; font-size:20px;
  color:var(--paper-ink); letter-spacing:-.03em}
.m-stat .v em{font-style:normal; font-size:13px; color:#1B9E6A; margin-left:5px; font-weight:700}
.m-rows{margin-top:14px; border:1px solid var(--paper-line); border-radius:12px; overflow:hidden}
.m-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--paper-line); background:var(--paper-2)}
.m-row:last-child{border-bottom:0}
.m-row .who{font-size:13.5px; font-weight:600; color:var(--paper-ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-row .cls{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--paper-ink-3)}
.m-pill{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:nowrap}
.m-pill.paid{background:#E3F7EE; color:#137A52}
.m-pill.due{background:#FDF0DC; color:#89570C}
.m-pill.present{background:#E6EFFE; color:#1B49C9}
.m-ask{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px;
  border:1px solid #C9D9FA; border-radius:12px; background:#F1F6FF;
}
.m-ask svg{color:#2F6BF0; flex:none}
.m-ask span{font-size:13.5px; color:#2B3A5C}
.m-ask .cursor{width:1.5px; height:15px; background:#2F6BF0; display:inline-block; vertical-align:-3px}
.m-note{margin-top:12px; font-family:"JetBrains Mono",monospace; font-size:10px;
  color:var(--paper-ink-3); letter-spacing:.06em; line-height:1.6}

/* PORTVAX: dark, fintech */
.mock-dark{background:#060A16; color:var(--ink); border-color:#1B2540}
.mock-dark .mock-bar{background:#0A1020; border-bottom-color:#1B2540}
.mock-dark .mock-url{background:#FFFFFF08; color:#6C7CA6}
.p-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #1B2540}
.p-head .logo{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,#EAB44F,#C98F2E); color:#241800;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:16px;
}
.p-head b{font-family:"Archivo",sans-serif; font-weight:800; font-size:16px; letter-spacing:.02em}
.p-head .mode{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--good);
  padding:4px 9px; border-radius:20px; background:var(--good-soft); border:1px solid #4ADE9B44}
.p-flow{display:flex; align-items:center; gap:7px; margin-top:16px; flex-wrap:wrap}
.p-node{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em;
  padding:7px 11px; border-radius:8px; border:1px solid #23305A; background:#0B142A;
  color:var(--ink-2); white-space:nowrap;
}
.p-flow i{color:var(--ink-4); font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px}
.p-chart{
  margin-top:16px; border:1px solid #1B2540; border-radius:12px; padding:14px; background:#080D1C;
  position:relative; overflow:hidden;
}
.p-chart svg{display:block; width:100%; height:auto}
.p-chart .grid-l{stroke:#18213C; stroke-width:1}
.p-chart .equity{fill:none; stroke:#4C8DFF; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.p-chart .equity-fill{fill:url(#eqFill)}
.p-chart .bench{fill:none; stroke:#3A466B; stroke-width:1.4; stroke-dasharray:4 5}
.p-legend{display:flex; gap:16px; margin-top:12px; flex-wrap:wrap}
.p-legend span{display:inline-flex; align-items:center; gap:7px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3)}
.p-legend i{width:14px; height:2px; border-radius:2px; display:block}
.p-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:14px;
  background:#1B2540; border:1px solid #1B2540; border-radius:12px; overflow:hidden}
.p-stat{background:#0A1020; padding:12px 13px}
.p-stat .l{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-4)}
.p-stat .v{margin-top:6px; font-family:"Archivo",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.025em}
.p-note{margin-top:12px; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--ink-4);
  letter-spacing:.06em; line-height:1.6}


/* ═══ 10. SERVICES SWITCHER ════════════════════════════════════════════
   A numbered list on the left drives one diagram on the right. Every
   panel is in the document and only hidden with opacity, so the text is
   crawlable and reachable by keyboard.
   ═════════════════════════════════════════════════════════════════════ */
.switch{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,3.4vw,54px); margin-top:clamp(36px,4vw,54px); align-items:start;
}
@media (max-width:1000px){.switch{grid-template-columns:minmax(0,1fr); gap:26px}}
.switch-list{list-style:none; display:flex; flex-direction:column}
.switch-btn{
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:20px 18px 20px 4px; background:none; border:0; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer; color:inherit; position:relative;
  transition:padding-left var(--t) var(--ease);
}
.switch-list li:first-child .switch-btn{border-top:1px solid var(--line)}
.switch-btn::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--blue); transform:scaleY(0); transform-origin:center;
  transition:transform var(--t) var(--ease);
}
.switch-btn[aria-selected="true"]::before{transform:scaleY(1)}
.switch-btn[aria-selected="true"]{padding-left:18px}
.switch-btn .n{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em;
  color:var(--ink-4); transition:color var(--t) ease;
}
.switch-btn[aria-selected="true"] .n{color:var(--blue-ink)}
.switch-btn .t{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(18px,1.85vw,24px);
  letter-spacing:-.028em; color:var(--ink-3); transition:color var(--t) ease; min-width:0;
}
.switch-btn:hover .t{color:var(--ink-2)}
.switch-btn[aria-selected="true"] .t{color:var(--ink)}
.switch-btn .arw{color:var(--ink-4); opacity:0; transition:opacity var(--t) ease, transform var(--t) var(--ease)}
.switch-btn[aria-selected="true"] .arw{opacity:1; color:var(--blue-ink)}
.switch-foot{margin-top:26px}

.switch-stage{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(170deg, var(--panel), var(--bg-2));
  box-shadow:var(--shadow); overflow:hidden; isolation:isolate;
}
.switch-stage::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/32px 100%;
}
.switch-panels{display:grid}
.switch-panel{
  grid-area:1/1; padding:clamp(24px,3vw,36px);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.switch-panel[data-active="true"]{opacity:1; visibility:visible; transform:none}
.switch-panel h3{font-size:clamp(20px,1.9vw,25px); font-weight:800; letter-spacing:-.03em}
.switch-panel .for{
  margin-top:10px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-ink);
}
.switch-panel > p{margin-top:14px; color:var(--ink-2); font-size:15.5px; max-width:52ch}
.switch-panel .more{margin-top:22px}

/* the little diagram each service shows */
.diagram{margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:var(--radius);
  background:#FFFFFF05}
.dg-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dg-step{
  display:flex; flex-direction:column; gap:5px; padding:12px 14px; min-width:0;
  border:1px solid var(--line-2); border-radius:11px; background:var(--panel-2); flex:1 1 0;
}
.dg-step .l{font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4)}
.dg-step .v{font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.3}
.dg-step.on{border-color:var(--blue-line); background:var(--blue-soft)}
.dg-step.on .l{color:var(--blue-ink)}
.dg-step.gold{border-color:var(--gold-line); background:var(--gold-soft)}
.dg-step.gold .l{color:var(--gold)}
.dg-arrow{color:var(--ink-4); flex:none}
@media (max-width:520px){
  .dg-row{flex-direction:column; align-items:stretch}
  .dg-arrow{transform:rotate(90deg); align-self:center}
}
.dg-bars{display:flex; align-items:flex-end; gap:8px; height:88px; margin-top:4px}
.dg-bar{flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#2F6BF0,#1B49C9);
  position:relative; transform-origin:bottom; opacity:.9}
.dg-bar.cut{background:linear-gradient(180deg,#F08A80,#B4483D)}
.dg-bar.keep{background:linear-gradient(180deg,#4ADE9B,#1B9E6A)}
.dg-caption{margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); line-height:1.7}


/* ═══ 11. AUTOMATION STORY ═════════════════════════════════════════════
   Six manual steps collapse into one automated run as the reader scrolls
   past. Driven by IntersectionObserver adding .in — not by a scroll
   handler — so nothing recalculates on every frame.
   ═════════════════════════════════════════════════════════════════════ */
.auto-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,3.6vw,60px); align-items:center; margin-top:clamp(36px,4vw,54px);
}
@media (max-width:1000px){.auto-wrap{grid-template-columns:minmax(0,1fr); gap:32px}}
.auto-before{display:flex; flex-direction:column; gap:9px}
.auto-task{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel);
}
.auto-task .day{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4); flex:none}
.auto-task .what{font-size:14.5px; color:var(--ink-2); min-width:0}
.auto-task .cost{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--bad); white-space:nowrap}
.auto-loop{
  display:flex; align-items:center; gap:10px; padding:12px 16px; margin-top:2px;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4);
}
.auto-loop svg{color:var(--ink-4)}

.auto-after{
  position:relative; padding:clamp(26px,3vw,36px); border-radius:var(--radius-lg);
  border:1px solid var(--blue-line); overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, #10204A, var(--bg-2));
  box-shadow:0 30px 70px -40px #000, inset 0 1px 0 #FFFFFF14;
}
.auto-after::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 60% at 80% 0%, #4C8DFF2E, transparent 70%);
}
.auto-after .k{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-ink)}
.auto-after h3{margin-top:14px; font-size:clamp(22px,2.2vw,28px); font-weight:800; letter-spacing:-.03em}
.auto-pipe{display:flex; flex-direction:column; gap:0; margin-top:22px}
.auto-pipe .pstep{
  display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start;
  padding-bottom:18px; position:relative;
}
.auto-pipe .pstep:last-child{padding-bottom:0}
.auto-pipe .pstep::before{
  content:""; position:absolute; left:13.5px; top:26px; bottom:-2px; width:1px; background:var(--line-2);
}
.auto-pipe .pstep:last-child::before{display:none}
.auto-pipe .dot{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--blue-soft); border:1px solid var(--blue-line); color:var(--blue-ink);
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; position:relative; z-index:1;
}
.auto-pipe .txt b{display:block; font-size:15px; font-weight:700; letter-spacing:-.015em}
.auto-pipe .txt span{display:block; margin-top:4px; font-size:13.5px; color:var(--ink-3); line-height:1.5}
.auto-result{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--line-2);
}
.auto-result p{font-size:15px; color:var(--ink-2); max-width:38ch}
.auto-result p b{color:var(--ink)}


/* ═══ 12. PROCESS TIMELINE ═════════════════════════════════════════════ */
.timeline{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,28px); margin-top:clamp(40px,4.4vw,60px)}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}}
@media (max-width:560px){.timeline{grid-template-columns:minmax(0,1fr)}}
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:11px; height:1px;
  background:var(--line-2); transform:scaleX(0); transform-origin:left;
}
@media (max-width:900px){.timeline::before{display:none}}
.tl-step{position:relative; padding-top:34px}
.tl-step .dot{
  position:absolute; top:5px; left:0; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--blue); box-shadow:0 0 0 5px var(--bg);
}
.tl-step .n{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue-ink)}
.tl-step h3{margin-top:12px; font-size:20px; font-weight:700; letter-spacing:-.025em}
.tl-step p{margin-top:10px; color:var(--ink-2); font-size:14.5px; line-height:1.6; padding-right:10px}
@media (max-width:900px){
  .tl-step{padding-top:0; padding-left:26px}
  .tl-step .dot{top:4px; box-shadow:0 0 0 4px var(--bg)}
  .tl-step::before{content:""; position:absolute; left:6px; top:18px; bottom:-26px; width:1px; background:var(--line)}
  .tl-step:last-child::before{display:none}
}
.process-terms{display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(32px,3.4vw,44px)}
.process-terms span{
  display:inline-flex; align-items:center; gap:9px; padding:9px 14px;
  border:1px solid var(--line); border-radius:30px; background:#FFFFFF06;
  font-size:13.5px; color:var(--ink-2);
}
.process-terms svg{color:var(--good); flex:none}


/* ═══ 13. AUDIENCE PANELS ══════════════════════════════════════════════ */
.aud{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  margin-top:clamp(36px,4vw,54px); background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
@media (max-width:920px){.aud{grid-template-columns:minmax(0,1fr)}}
.aud-card{
  position:relative; background:var(--panel); padding:clamp(24px,2.6vw,34px);
  display:flex; flex-direction:column; gap:14px; overflow:hidden; isolation:isolate;
  transition:background var(--t-slow) var(--ease);
}
.aud-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(80% 60% at 50% 0%, #4C8DFF1F, transparent 70%);
  transition:opacity var(--t-slow) var(--ease);
}
.aud-card:hover::before{opacity:1}
.aud-card .ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--blue-line); background:var(--blue-soft); color:var(--blue-ink);
  transition:transform var(--t-slow) var(--ease);
}
.aud-card:hover .ic{transform:translateY(-3px)}
.aud-card h3{font-size:21px; font-weight:800; letter-spacing:-.028em}
.aud-card > p{color:var(--ink-2); font-size:15px}
.aud-card ul{list-style:none; display:flex; flex-direction:column; gap:9px;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
.aud-card li{display:flex; gap:10px; font-size:13.5px; color:var(--ink-3); line-height:1.5}
.aud-card li::before{content:"→"; color:var(--blue-ink); flex:none; font-family:"JetBrains Mono",monospace}


/* ═══ 14. ENGAGEMENT MODELS ════════════════════════════════════════════ */
.models{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin-top:clamp(36px,4vw,54px)}
@media (max-width:900px){.models{grid-template-columns:minmax(0,1fr)}}
.model{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); padding:clamp(24px,2.6vw,32px);
  display:flex; flex-direction:column; gap:14px;
  transition:border-color var(--t) ease, transform var(--t) var(--ease), box-shadow var(--t) ease;
}
.model:hover{border-color:var(--blue-line); transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.model.lead{border-color:var(--gold-line); background:linear-gradient(170deg,#191F3C,var(--panel))}
.model .k{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-ink)}
.model.lead .k{color:var(--gold)}
.model h3{font-size:23px; font-weight:800; letter-spacing:-.03em}
.model > p{color:var(--ink-2); font-size:15px}
.model ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:4px}
.model li{display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.model li::before{content:"→"; color:var(--blue-ink); flex:none; font-family:"JetBrains Mono",monospace}
.model.lead li::before{color:var(--gold)}
.model .foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-4); letter-spacing:.06em}


/* ═══ 15. CREDIBILITY ══════════════════════════════════════════════════ */
.cred{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,48px);
  align-items:center; margin-top:clamp(36px,4vw,54px)}
@media (max-width:920px){.cred{grid-template-columns:minmax(0,1fr); gap:30px}}
.cred-list{list-style:none; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.cred-list li{background:var(--panel); padding:18px 22px; display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start}
.cred-list .ic{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--gold)}
.cred-list .txt b{display:block; font-size:15px; font-weight:700; letter-spacing:-.015em}
.cred-list .txt span{display:block; margin-top:4px; font-size:14px; color:var(--ink-3); line-height:1.55}


/* ═══ 16. CLOSING CTA ══════════════════════════════════════════════════ */
.cta-band{position:relative; overflow:hidden; isolation:isolate;
  border-top:1px solid var(--line); background:var(--bg-2)}
.cta-band::before{
  content:""; position:absolute; inset:-50% -20% auto -20%; height:200%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 46% at 22% 20%, #2F6BF047, transparent 66%),
    radial-gradient(30% 36% at 82% 80%, #EAB44F1F, transparent 70%);
}
.cta-band::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/40px 100%;
  mask-image:radial-gradient(90% 90% at 50% 50%, #000 10%, transparent 75%);
}
.cta-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,4vw,64px); align-items:start}
@media (max-width:1000px){.cta-in{grid-template-columns:minmax(0,1fr); gap:38px}}
.cta-in h2{font-size:clamp(32px,4.6vw,60px); letter-spacing:-.042em; line-height:.98}
.cta-lines{display:flex; flex-direction:column; gap:10px; margin-top:26px; max-width:46ch}
.cta-lines span{display:flex; gap:12px; font-size:16px; color:var(--ink-2); line-height:1.5}
.cta-lines span::before{content:"→"; color:var(--blue-ink); font-family:"JetBrains Mono",monospace; flex:none}
.cta-lines b{color:var(--ink); font-weight:700}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* — the reveal-on-tap contact chips — */
.direct{display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin-top:28px}
.direct a{
  display:flex; align-items:center; gap:0; text-decoration:none; padding:14px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  transition:border-color var(--t) ease, gap var(--t-slow) var(--ease), padding var(--t-slow) var(--ease),
             background var(--t) ease;
}
.direct a:hover{border-color:var(--blue-line); background:var(--panel-2)}
.direct svg{color:var(--blue-ink); flex:none}
.direct .txt{display:grid; grid-template-columns:0fr; overflow:hidden; opacity:0;
  transition:grid-template-columns .4s var(--ease), opacity .4s var(--ease)}
.direct .txt > span{min-width:0; overflow:hidden; white-space:nowrap}
.direct a.shown{gap:13px; padding-right:19px}
.direct a.shown .txt{grid-template-columns:1fr; opacity:1}
.direct .k{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4)}
.direct .v{font-weight:700; font-size:15px; color:var(--ink)}
.direct .hint{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-4); letter-spacing:.06em}
.direct.open .hint{opacity:0; transition:opacity var(--t) ease}


/* ═══ 17. FORMS ════════════════════════════════════════════════════════ */
.form-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel);
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--shadow);
}
.form-card .form-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.form-card .form-head b{font-family:"Archivo",sans-serif; font-weight:700; font-size:18px; letter-spacing:-.025em}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:600px){.field-row{grid-template-columns:minmax(0,1fr)}}
label{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4)}
input,select,textarea{
  font-family:"Manrope",sans-serif; font-size:15.5px; color:var(--ink); width:100%;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px; transition:border-color var(--t) ease, background var(--t) ease;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
/* the border change alone is not a focus indicator — keep the real outline */
input:focus,select:focus,textarea:focus{border-color:var(--blue-line); background:var(--bg)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
textarea{resize:vertical; min-height:104px; line-height:1.55}
select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px;
  background-size:5px 5px; background-repeat:no-repeat;
}
.form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.form-note{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-4); letter-spacing:.02em; line-height:1.6}
.form-note a{color:var(--blue-ink); text-decoration:underline; text-underline-offset:2px}


/* ═══ 18. INNER-PAGE FURNITURE ═════════════════════════════════════════ */

/* — sub-page hero — */
.page-hero{position:relative; border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/100% 38px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/38px 100%;
  mask-image:radial-gradient(120% 110% at 22% 0%, #000 20%, transparent 78%);
}
.page-hero::after{
  content:""; position:absolute; inset:-60% -20% auto -20%; height:200%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 38% at 14% 8%, #2F6BF03D, transparent 68%),
    radial-gradient(28% 30% at 88% 10%, #EAB44F17, transparent 72%);
}
/* PORTVAX runs a gold-weighted light source, so the product pages read as
   siblings rather than as the same page twice */
.page-hero-dark::after{
  background:
    radial-gradient(38% 38% at 14% 8%, #EAB44F2E, transparent 68%),
    radial-gradient(30% 32% at 86% 12%, #2F6BF033, transparent 72%);
}
.page-hero-in{
  position:relative; padding-block:clamp(30px,3.6vw,46px) clamp(56px,7vw,92px);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,3.4vw,56px); align-items:end;
}
.page-hero-in.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){/* PORTVAX runs a gold-weighted light source, so the product pages read as
   siblings rather than as the same page twice */
.page-hero-dark::after{
  background:
    radial-gradient(38% 38% at 14% 8%, #EAB44F2E, transparent 68%),
    radial-gradient(30% 32% at 86% 12%, #2F6BF033, transparent 72%);
}
.page-hero-in{grid-template-columns:minmax(0,1fr); gap:32px; align-items:start}}
.page-hero h1{margin-top:22px; font-size:clamp(33px,4.25vw,55px); max-width:24ch;
  letter-spacing:-.042em; line-height:1.02; font-variation-settings:"wdth" 99}
.page-hero .lede{max-width:56ch}
.page-hero .cta-row{margin-top:clamp(26px,3vw,34px)}

/* a compact fact panel that can sit beside a sub-page headline */
.facts{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.facts-head{display:flex; align-items:center; gap:10px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:#FFFFFF06}
.facts-head .code-label{margin-right:auto}
.facts ul{list-style:none}
.facts li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
  padding:14px 18px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2); line-height:1.5}
.facts li:last-child{border-bottom:0}
.facts li svg{color:var(--blue-ink); flex:none; margin-top:3px}
.facts li b{color:var(--ink); font-weight:700}

/* — breadcrumbs — */
.crumbs{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-4)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.crumbs li{display:flex; gap:8px; align-items:center}
.crumbs li+li::before{content:"/"; color:var(--line-2)}
.crumbs a{color:var(--ink-4); text-decoration:none; transition:color var(--t-fast) ease}
.crumbs a:hover{color:var(--blue-ink)}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* — prose — */
.prose{display:flex; flex-direction:column; gap:18px; max-width:68ch}
.prose p{color:var(--ink-2); font-size:16.5px; line-height:1.68}
.prose b,.prose strong{color:var(--ink); font-weight:700}
.prose a{color:var(--blue-ink); text-decoration:underline; text-underline-offset:3px}
.h3{font-family:"Archivo",sans-serif; font-weight:700; font-size:21px;
  letter-spacing:-.028em; margin:0}
.answer{margin-top:20px; font-size:clamp(17px,1.5vw,20px); line-height:1.62; color:var(--ink-2); max-width:70ch}
.answer b{color:var(--ink); font-weight:700}

/* — detail rows — */
.rows{margin-top:clamp(32px,3.6vw,44px); border-top:1px solid var(--line)}
.row{padding-block:clamp(26px,3vw,36px); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(20px,3vw,44px); align-items:start}
@media (max-width:880px){.row{grid-template-columns:minmax(0,1fr); gap:16px}}
.row .n{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-ink)}
.row h2,.row h3{margin-top:12px; font-size:clamp(22px,2.3vw,29px); font-weight:800; letter-spacing:-.032em}
.row .side-copy p{color:var(--ink-2); font-size:15.5px; margin-bottom:16px}
.row ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.row li{display:flex; gap:12px; font-size:15px; color:var(--ink-2); line-height:1.55}
.row li::before{content:"→"; color:var(--blue-ink); flex:none; font-family:"JetBrains Mono",monospace}

/* — numbered vertical track — */
.track{margin-top:clamp(32px,3.6vw,44px); border-left:1px solid var(--line)}
.track .stop{position:relative; padding:0 0 32px 30px}
.track .stop:last-child{padding-bottom:0}
.track .stop::before{
  content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px var(--bg);
}
.track .n{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--blue-ink)}
.track h3{margin-top:10px; font-size:20px; font-weight:700; letter-spacing:-.025em}
.track p{margin-top:9px; color:var(--ink-2); font-size:15px; max-width:64ch; line-height:1.6}

/* — generic cards grid — */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  margin-top:clamp(32px,3.6vw,44px); background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
@media (max-width:920px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.cards.two{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel); padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column; gap:12px;
  transition:background var(--t) ease}
.card:hover{background:var(--panel-2)}
.card .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--blue-line); background:var(--blue-soft); color:var(--blue-ink); margin-bottom:4px}
.card h3{font-size:19px; font-weight:700; letter-spacing:-.025em}
.card p{color:var(--ink-2); font-size:14.5px; line-height:1.6}
.card ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:14px}
.card li{display:flex; gap:9px; font-size:13.5px; color:var(--ink-3); line-height:1.5}
.card li::before{content:"·"; color:var(--blue-ink); flex:none}

/* — FAQ — */
.faq{margin-top:clamp(30px,3.4vw,42px); border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none; cursor:pointer; padding:22px 48px 22px 0; position:relative;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(17px,1.6vw,20px);
  letter-spacing:-.028em; transition:color var(--t-fast) ease;
}
summary:hover{color:var(--blue-ink)}
summary::-webkit-details-marker{display:none}
summary::after{
  content:""; position:absolute; right:10px; top:50%; width:13px; height:13px;
  margin-top:-6px;
  background:
    linear-gradient(currentColor,currentColor) center/13px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 13px no-repeat;
  color:var(--blue-ink); transition:transform var(--t) var(--ease);
}
/* plus → minus. Rotating a half-turn is visually identity for the remaining
   bar, so the marker spins into place rather than snapping. */
details[open] summary::after{transform:rotate(180deg);
  background:linear-gradient(currentColor,currentColor) center/13px 1.6px no-repeat}
details .ans{padding:0 56px 24px 0; color:var(--ink-2); font-size:15.5px; max-width:74ch; line-height:1.68}

/* — next pages — */
.next{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
@media (max-width:880px){.next{grid-template-columns:minmax(0,1fr)}}
.next a{
  background:var(--panel); padding:clamp(20px,2.2vw,26px); text-decoration:none;
  display:flex; flex-direction:column; gap:9px; transition:background var(--t) ease;
}
.next a:hover{background:var(--panel-2)}
.next .k{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-ink)}
.next b{font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; letter-spacing:-.025em}
.next p{color:var(--ink-3); font-size:14px; line-height:1.55}
.next .arw{margin-top:auto; padding-top:10px; color:var(--ink-4);
  transition:transform var(--t) var(--ease), color var(--t) ease}
.next a:hover .arw{transform:translateX(4px); color:var(--blue-ink)}

/* — inline closing CTA box — */
.close-cta{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center;
  margin-top:clamp(34px,4vw,48px); padding:clamp(24px,2.8vw,34px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(120deg, #4C8DFF12, transparent 62%), var(--panel);
}
.close-cta div{margin-right:auto; max-width:58ch}
.close-cta h2{font-size:clamp(22px,2.4vw,30px); letter-spacing:-.032em}
.close-cta p{margin-top:11px; color:var(--ink-2); font-size:15.5px}

/* — flow strip — */
.flow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:26px}
.flow span{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.05em;
  padding:9px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); white-space:nowrap;
}
.flow i{color:var(--ink-4); font-style:normal; font-family:"JetBrains Mono",monospace}

/* — copy still to be supplied — */
.todo{
  border:1px dashed var(--warn); border-radius:12px; padding:14px 16px;
  background:var(--warn-soft); color:var(--warn-ink);
  font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.65;
}
.todo::before{content:"COPY NEEDED"; display:block; font-size:9.5px; letter-spacing:.16em;
  color:var(--warn); margin-bottom:8px}
.todo a{color:var(--warn); text-decoration:underline; text-underline-offset:2px}

/* — 404 — */
.notfound{padding-block:clamp(70px,11vw,150px)}
.notfound .big{
  font-family:"Archivo",sans-serif; font-weight:900; line-height:.84;
  font-size:clamp(90px,20vw,240px); letter-spacing:-.06em;
  color:transparent; background:linear-gradient(120deg,#1E2C58,#4C8DFF 55%,#EAB44F);
  -webkit-background-clip:text; background-clip:text;
}
.notfound h1{margin-top:20px}


/* ══════════════════════════════════════════════════════════════════════
   19. BACKGROUND SYSTEM
   ──────────────────────────────────────────────────────────────────────
   A flat dark page reads as cheap no matter how good the type is. Four
   layers fix that, and none of them move:

     1. canvas   a slow vertical gradient with depth at the top and a
                 vignette at the edges, so the page has a light direction
     2. field    a 44px grid, masked so it never ends on a hard edge
     3. grain    200px of tiled fractal noise — this is the layer that
                 stops large dark areas looking like flat fill
     4. ambient  one soft light source per section, alternating side, so
                 scrolling reads as moving past windows rather than
                 through a tunnel

   1–3 are two fixed pseudo-elements: two composited layers for the whole
   site, painted once, never repainted on scroll. 4 is per-section and
   also static. Nothing here animates, and every value is low-alpha —
   this is meant to be felt, not seen.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* fractal noise, tiled. Inline so it costs no request and cannot 404. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --grid-gap:44px;
}

/* ── 1. canvas ─────────────────────────────────────────────────────────
   Fixed, so this is the same composition at every scroll position: it has
   to stand on its own as a lit viewport, not as a gradient that only works
   at the top of the page. Cool light upper-left, a warm trace upper-right
   (the logo's gold arrow), a second cool source lower-right, and a vignette
   so the edges fall away and the content sits forward.                  */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(64% 52% at 12% 2%,   #2A4694, transparent 62%),
    radial-gradient(46% 36% at 92% 10%,  #6B4C18, transparent 66%),
    radial-gradient(62% 52% at 88% 88%,  #1E3A85, transparent 64%),
    radial-gradient(48% 40% at 2%  80%,  #1B2E6B, transparent 68%),
    linear-gradient(180deg, #0B1436 0%, #070E24 48%, #0A1230 100%);
  opacity:.38;
}

/* ── 2. field + vignette ───────────────────────────────────────────── */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    /* first layer paints on top: the edges fall away so content sits forward */
    radial-gradient(132% 112% at 50% 44%, transparent 46%, #00000038 82%, #00000073 100%),
    linear-gradient(#FFFFFF0B 1px, transparent 1px) 0 0/100% var(--grid-gap),
    linear-gradient(90deg, #FFFFFF0B 1px, transparent 1px) 0 0/var(--grid-gap) 100%;
}

/* ── 3. grain ──────────────────────────────────────────────────────────
   The layer that stops large dark areas reading as flat fill. Tiled, so
   200px of noise covers any viewport.                                   */
html::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); background-size:190px 190px;
  opacity:.07; mix-blend-mode:overlay;
}

/* ── 4. ambient, one soft source per section ───────────────────────────
   Alternating side, with a counter-source at the opposite bottom corner,
   so crossing a section boundary is a change in light and not only a line. */
.band:not(.cta-band){position:relative; isolation:isolate}
.band:not(.cta-band)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 62% at 2% -6%,    #3C6FE01B, transparent 62%),
    radial-gradient(44% 54% at 100% 104%, #2F6BF019, transparent 66%);
}
.band:not(.cta-band):nth-of-type(even)::before{
  background:
    radial-gradient(52% 62% at 98% -6%, #3C6FE01B, transparent 62%),
    radial-gradient(44% 54% at 0% 104%, #2F6BF019, transparent 66%);
}
/* the two sections that carry the brand's second colour */
#products.band::before,#why.band::before{
  background:
    radial-gradient(52% 62% at 98% -6%, #C9902E1C, transparent 64%),
    radial-gradient(44% 54% at 0% 104%, #2F6BF019, transparent 66%);
}

/* ── section rules: a hairline with a bloom under it ───────────────── */
.band.rule:not(.cta-band){border-top:0}
.band.rule:not(.cta-band)::after{
  content:""; position:absolute; inset:0 0 auto 0; height:170px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, var(--line) 12%, #4C8DFF4D 50%, var(--line) 88%, transparent)
      0 0/100% 1px no-repeat,
    radial-gradient(44% 100% at 50% 0%, #2F6BF016, transparent 72%);
}
.show-item{border-top:0; position:relative; isolation:isolate}
.show-item::before{
  content:""; position:absolute; inset:0 0 auto 0; height:200px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, transparent, var(--line) 14%, #4C8DFF59 50%, var(--line) 86%, transparent)
      0 0/100% 1px no-repeat,
    radial-gradient(42% 100% at 50% 0%, #2F6BF012, transparent 72%);
}

/* ── paper sections: a blueprint rather than a wash ────────────────── */
.band-paper{position:relative; overflow:hidden; isolation:isolate}
.band-paper::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(#0A143A0A 1px, transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg, #0A143A0A 1px, transparent 1px) 0 0/28px 100%,
    radial-gradient(60% 50% at 88% 0%, #2F6BF014, transparent 62%),
    linear-gradient(180deg, #FFFFFF, var(--paper) 45%, #EEF2FA 100%);
  mask-image:none;
}

/* ── the hero and the closing band keep their own, stronger treatment ─ */
.hero,.cta-band{isolation:isolate}

/* ══════════════════════════════════════════════════════════════════════
   20. MOTION
   ──────────────────────────────────────────────────────────────────────
   Rules this section keeps to:
     · transform and opacity only — never a property that forces layout
     · one easing curve, so the whole site moves like a single object
     · nothing animates that the reader has not arrived at
     · every effect is switched off under prefers-reduced-motion, and the
       page is complete without any of it
   ══════════════════════════════════════════════════════════════════════ */

@keyframes riseIn   {from{opacity:0; transform:translate3d(0,var(--rise),0)} to{opacity:1; transform:none}}
@keyframes fadeIn   {from{opacity:0} to{opacity:1}}
@keyframes drawX    {from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes maskUp   {from{transform:translate3d(0,102%,0)} to{transform:none}}
@keyframes drift{
  0%,100%{transform:translate3d(-1.5%,0,0) scale(1)}
  50%    {transform:translate3d(2.5%,-1.5%,0) scale(1.06)}
}
@keyframes trace    {to{stroke-dashoffset:0}}
@keyframes pulse{
  0%,100%{opacity:.35; transform:scale(1)}
  50%    {opacity:1;   transform:scale(1.35)}
}
@keyframes travel   {from{offset-distance:0%} to{offset-distance:100%}}
/* for elements whose resting state already carries a centring transform */
@keyframes riseInCentred{
  from{opacity:0; transform:translate(-50%,calc(-50% + var(--rise)))}
  to  {opacity:1; transform:translate(-50%,-50%)}
}
@keyframes breathe{
  0%,100%{opacity:.5}
  50%    {opacity:1}
}
@keyframes caret    {0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1}}
@keyframes growBar  {from{transform:scaleY(.06)} to{transform:scaleY(1)}}

/* ── headline mask reveal ──────────────────────────────────────────────
   Each line is a real text node inside an overflow-hidden span, so the
   whole headline is in the DOM and readable with JavaScript disabled —
   only the paint is delayed. */
.mask{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.mask > span{display:block; animation:maskUp .9s var(--ease-out) both}
.mask:nth-of-type(1) > span{animation-delay:.06s}
.mask:nth-of-type(2) > span{animation-delay:.16s}
.mask:nth-of-type(3) > span{animation-delay:.26s}

/* ── hero entrance ─────────────────────────────────────────────────── */
.hero-copy > *{animation:riseIn .8s var(--ease) both}
.hero-copy > .eyebrow{animation-delay:.02s}
.hero-copy > h1       {animation:none}
.hero-copy > .lede    {animation-delay:.42s}
.hero-copy > .hero-cta{animation-delay:.52s}
.hero-copy > .hero-proof{animation-delay:.6s}
.hero-art{animation:riseIn 1s var(--ease) .3s both}
.hero::after{animation:drift 26s ease-in-out infinite; will-change:transform}
.page-hero::after{animation:drift 30s ease-in-out infinite}
.page-hero-in > *{animation:riseIn .72s var(--ease) both}
.page-hero-in .crumbs{animation-delay:.02s}
.page-hero-in .facts {animation-delay:.3s}

/* ── animated hero backdrop ────────────────────────────────────────────
   Four moving layers, all transform/opacity only, all GPU-composited:

     aurora  three large soft lights on different loops, so the hero is
             never lit the same way twice
     beams   a horizontal and a vertical line travelling the grid, which
             is what makes the surface read as live circuitry
     sheen   one slow diagonal pass of light across the whole hero
     motes   particles rising, echoing the logo's climbing arrow

   Nothing here animates a property that forces layout, and the whole
   thing is behind the copy at z-index -2. It halves on tablets and
   stops entirely on phones and under prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────────── */
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none}

/* — aurora — */
.hero-bg .aurora{
  position:absolute; border-radius:50%; will-change:transform;
  mix-blend-mode:screen;
}
.hero-bg .a1{
  width:min(78vw,1040px); aspect-ratio:1; left:-20%; top:-42%;
  background:radial-gradient(circle, #2F6BF0 0%, #2F6BF066 32%, transparent 64%);
  opacity:.5; animation:auroraA 24s ease-in-out infinite;
}
.hero-bg .a2{
  width:min(52vw,680px); aspect-ratio:1; right:-14%; top:-26%;
  background:radial-gradient(circle, #E9A93D 0%, #C9902E4D 34%, transparent 66%);
  opacity:.3; animation:auroraB 31s ease-in-out infinite;
}
.hero-bg .a3{
  width:min(70vw,900px); aspect-ratio:1; right:-10%; bottom:-48%;
  background:radial-gradient(circle, #1B49C9 0%, #1B49C966 34%, transparent 66%);
  opacity:.48; animation:auroraC 27s ease-in-out infinite;
}
@keyframes auroraA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%    {transform:translate3d(9%,7%,0)  scale(1.14)}
  67%    {transform:translate3d(-6%,12%,0) scale(.93)}
}
@keyframes auroraB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%    {transform:translate3d(-11%,9%,0) scale(1.2)}
  72%    {transform:translate3d(5%,-4%,0)  scale(.9)}
}
@keyframes auroraC{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  38%    {transform:translate3d(-9%,-8%,0) scale(1.1)}
  70%    {transform:translate3d(7%,-3%,0)  scale(.95)}
}

/* — beams: a full-bleed element carrying a 1px line, translated a whole
     viewport so the motion stays on the compositor — */
.hero-bg .beam{position:absolute; inset:0; will-change:transform}
.hero-bg .beam::before{content:""; position:absolute; background:currentColor}
.hero-bg .beam-h{color:#7FB0FF; animation:beamDown 9s linear infinite}
.hero-bg .beam-h::before{
  left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, #7FB0FFB3 22%, #FFFFFF 50%, #7FB0FFB3 78%, transparent);
  box-shadow:0 0 12px #4C8DFF80;
}
.hero-bg .beam-v{color:#EAB44F; animation:beamAcross 13s linear infinite; animation-delay:2.5s}
.hero-bg .beam-v::before{
  top:0; bottom:0; left:0; width:1px;
  background:linear-gradient(180deg, transparent, #EAB44F99 26%, #FFE7B0 50%, #EAB44F99 74%, transparent);
  box-shadow:0 0 12px #EAB44F66;
}
@keyframes beamDown  {from{transform:translate3d(0,-4%,0)} to{transform:translate3d(0,104%,0)}}
@keyframes beamAcross{from{transform:translate3d(-4%,0,0)} to{transform:translate3d(104%,0,0)}}

/* — sheen — */
.hero-bg .sheen{
  position:absolute; inset:-30% -60%; will-change:transform;
  background:linear-gradient(108deg, transparent 40%, #7FB0FF1F 48%, #FFFFFF14 50%, #7FB0FF1F 52%, transparent 60%);
  animation:sheen 14s ease-in-out infinite;
}
@keyframes sheen{
  0%,100%{transform:translate3d(-26%,0,0)}
  50%    {transform:translate3d(26%,0,0)}
}

/* — motes: they climb, like the arrow in the mark — */
.hero-bg .motes{position:absolute; inset:0}
.hero-bg .motes i{
  position:absolute; bottom:-8px; width:3px; height:3px; border-radius:50%;
  background:#8FBBFF; box-shadow:0 0 6px #4C8DFFCC; opacity:0;
  animation:rise linear infinite; will-change:transform, opacity;
}
.hero-bg .motes i:nth-child(3n){background:#EAB44F; box-shadow:0 0 6px #EAB44FAA}
.hero-bg .motes i:nth-child(4n){width:2px; height:2px}
@keyframes rise{
  0%  {transform:translate3d(0,0,0) scale(.5); opacity:0}
  10% {opacity:.85}
  85% {opacity:.45}
  100%{transform:translate3d(14px,-102%,0) scale(1); opacity:0}
}
/* spread them across the width on their own clocks */
.hero-bg .motes i:nth-child(1) {left:4%;  animation-duration:17s; animation-delay:0s}
.hero-bg .motes i:nth-child(2) {left:11%; animation-duration:22s; animation-delay:3s}
.hero-bg .motes i:nth-child(3) {left:19%; animation-duration:14s; animation-delay:6s}
.hero-bg .motes i:nth-child(4) {left:27%; animation-duration:25s; animation-delay:1.5s}
.hero-bg .motes i:nth-child(5) {left:34%; animation-duration:19s; animation-delay:8s}
.hero-bg .motes i:nth-child(6) {left:42%; animation-duration:15s; animation-delay:4.5s}
.hero-bg .motes i:nth-child(7) {left:50%; animation-duration:23s; animation-delay:10s}
.hero-bg .motes i:nth-child(8) {left:58%; animation-duration:18s; animation-delay:2s}
.hero-bg .motes i:nth-child(9) {left:66%; animation-duration:21s; animation-delay:7s}
.hero-bg .motes i:nth-child(10){left:74%; animation-duration:16s; animation-delay:11s}
.hero-bg .motes i:nth-child(11){left:82%; animation-duration:24s; animation-delay:5s}
.hero-bg .motes i:nth-child(12){left:89%; animation-duration:20s; animation-delay:9s}
.hero-bg .motes i:nth-child(13){left:95%; animation-duration:26s; animation-delay:13s}
.hero-bg .motes i:nth-child(14){left:15%; animation-duration:28s; animation-delay:15s}

/* tablets: keep the light, drop the fine detail */
@media (max-width:900px){
  .hero-bg .motes i:nth-child(n+8){display:none}
  .hero-bg .sheen{display:none}
}
/* phones: the hero is lit, but nothing moves */
@media (max-width:700px){
  .hero-bg .aurora{animation:none}
  .hero-bg .beam,.hero-bg .motes{display:none}
}

/* ── the branch diagram ────────────────────────────────────────────── */
.branch .wire{stroke-dasharray:var(--len,320); stroke-dashoffset:var(--len,320);
  animation:trace 1.5s var(--ease-out) forwards}
.branch .w1{--len:240; animation-delay:.55s}
.branch .w2{--len:240; animation-delay:.68s}
.branch .w3{--len:240; animation-delay:.81s}
.branch .w4{--len:240; animation-delay:.94s}
.branch .ring{transform-origin:center; animation:fadeIn 1s ease .35s both}
.branch .ring-2{animation:fadeIn 1s ease .5s both, spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.branch .pip{animation:pulse 3.4s var(--ease) infinite; transform-origin:center; transform-box:fill-box}
.branch .pip:nth-of-type(2){animation-delay:.5s}
.branch .pip:nth-of-type(3){animation-delay:1s}
.branch .pip:nth-of-type(4){animation-delay:1.5s}
/* a packet that runs the wire, so the diagram reads as live */
.branch .spark{
  offset-path:var(--path); offset-rotate:0deg;
  animation:travel 3.6s linear infinite, breathe 3.6s ease-in-out infinite;
}
.branch .spark.s2{animation-delay:.9s}
.branch .spark.s3{animation-delay:1.8s}
.branch .spark.s4{animation-delay:2.7s}
.branch-core{animation:riseInCentred .8s var(--ease) .38s both}
.branch-node{animation:riseInCentred .7s var(--ease) both}
.branch-node.n1{animation-delay:1.05s}
.branch-node.n2{animation-delay:1.16s}
.branch-node.n3{animation-delay:1.27s}
.branch-node.n4{animation-delay:1.38s}
/* pointer parallax: site.js writes --px/--py, the page never reads layout */
.branch{--px:0; --py:0}
.branch-inner{
  transform:translate3d(calc(var(--px) * 12px), calc(var(--py) * 12px), 0);
  transition:transform .5s var(--ease-out); will-change:transform;
}
.branch-nodes{
  position:absolute; inset:0;
  transform:translate3d(calc(var(--px) * -18px), calc(var(--py) * -18px), 0);
  transition:transform .5s var(--ease-out); will-change:transform;
}

/* ── scroll reveal ─────────────────────────────────────────────────── */
.rv{opacity:0; transform:translate3d(0,var(--rise),0);
    transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
[data-stagger] > *{opacity:0; transform:translate3d(0,var(--rise),0)}
[data-stagger].in > *{opacity:1; transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.spine .tick{transform:scaleX(0); transition:transform .55s var(--ease) .1s}
.spine .stick.in .tick{transform:scaleX(1)}
.timeline::before{transition:transform 1.1s var(--ease)}
.timeline.in::before{transform:scaleX(1)}

/* the automation story: manual steps fade back as the pipeline arrives */
.auto-task{transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease)}
.auto-before.in .auto-task{opacity:1; transform:none}
.auto-before .auto-task{opacity:0; transform:translate3d(-14px,0,0)}
.auto-before .auto-task:nth-child(1){transition-delay:.02s}
.auto-before .auto-task:nth-child(2){transition-delay:.09s}
.auto-before .auto-task:nth-child(3){transition-delay:.16s}
.auto-before .auto-task:nth-child(4){transition-delay:.23s}
.auto-before .auto-task:nth-child(5){transition-delay:.3s}
.auto-before .auto-task:nth-child(6){transition-delay:.37s}
@media (hover:hover) and (min-width:1001px){
  .auto-wrap:hover .auto-before.in .auto-task{opacity:.4; filter:saturate(.4)}
}
.auto-pipe .pstep{opacity:0; transform:translate3d(0,10px,0);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
.auto-after.in .pstep{opacity:1; transform:none}
.auto-after.in .pstep:nth-child(1){transition-delay:.2s}
.auto-after.in .pstep:nth-child(2){transition-delay:.32s}
.auto-after.in .pstep:nth-child(3){transition-delay:.44s}
.auto-after.in .pstep:nth-child(4){transition-delay:.56s}

/* mockup details that only start once their card is on screen */
.mock .equity{stroke-dasharray:800; stroke-dashoffset:800}
.mock.in .equity{animation:trace 2s var(--ease-out) .2s forwards}
.mock .equity-fill{opacity:0}
.mock.in .equity-fill{animation:fadeIn 1s ease 1.2s forwards}
.m-ask .cursor{animation:caret 1.15s step-end infinite}
.dg-bar{transform:scaleY(.06)}
.switch-panel[data-active="true"] .dg-bar{animation:growBar .7s var(--ease-out) forwards}
.switch-panel[data-active="true"] .dg-bar:nth-child(1){animation-delay:.05s}
.switch-panel[data-active="true"] .dg-bar:nth-child(2){animation-delay:.11s}
.switch-panel[data-active="true"] .dg-bar:nth-child(3){animation-delay:.17s}
.switch-panel[data-active="true"] .dg-bar:nth-child(4){animation-delay:.23s}
.switch-panel[data-active="true"] .dg-bar:nth-child(5){animation-delay:.29s}
.switch-panel[data-active="true"] .dg-bar:nth-child(6){animation-delay:.35s}

/* ── hover states ──────────────────────────────────────────────────── */
.model,.card,.next a,.aud-card,.side-list a{
  transition:transform var(--t) var(--ease), border-color var(--t) ease,
             background var(--t) ease, box-shadow var(--t) ease;
}
.next a:hover,.card:hover{transform:translateY(-2px)}

/* magnetic pull on the primary call to action (desktop pointers only) */
@media (hover:hover) and (pointer:fine){
  .magnetic{
    transform:translate3d(var(--mx,0),var(--my,0),0);
    transition:transform .35s var(--ease-out);
  }
  .magnetic:hover{transition:transform .1s linear}
}

/* ── page transition ───────────────────────────────────────────────────
   A short fade on leaving, so navigation does not feel like a cut. The
   class is only ever added by script, and removed on pageshow, so a
   back-button restore can never leave the page blank. */
.leaving{opacity:0; transition:opacity .22s ease}


/* ── phones: stop paying for perpetual motion ──────────────────────────
   The hero wash, the orbit ring and the four travelling sparks each hold a
   composited layer alive for as long as the page is open. On a desktop that
   is free; on a phone it is battery. Entrance animations still play — only
   the infinite ones stop.                                                  */
@media (max-width:700px){
  .hero::after,.page-hero::after{animation:none; will-change:auto}
  /* a full-viewport blend layer is re-composited on every scroll frame;
     the grain is the first thing worth giving up on a phone */
  html::after{display:none}
  body::after{background-size:auto, 100% 56px, 56px 100%}
  .branch .ring-2{animation:fadeIn 1s ease .5s both}
  .branch .spark{display:none}
  .hero-bg .beam,.hero-bg .motes,.hero-bg .sheen{display:none}
  .hero-bg .aurora{animation:none}
  .branch .pip{animation:none; opacity:.8}
}

/* ── reduced motion: everything above is decoration ────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv,[data-stagger] > *,.auto-task,.auto-pipe .pstep,
  .hero-copy > *,.hero-art,.page-hero-in > *,.mask > span{
    opacity:1 !important; transform:none !important;
  }
  .branch-node,.branch-core{opacity:1 !important; transform:translate(-50%,-50%) !important}
  .branch .wire{stroke-dashoffset:0 !important}
  .branch .spark{display:none}
  .hero-bg .beam,.hero-bg .motes,.hero-bg .sheen{display:none}
  .hero-bg .aurora{animation:none}
  .spine .tick,.timeline::before{transform:scaleX(1) !important}
  .dg-bar{transform:scaleY(1) !important}
  .mock .equity{stroke-dashoffset:0 !important}
  .mock .equity-fill{opacity:1 !important}
  .branch-inner,.branch-nodes,.magnetic{transform:none !important}
  .progress{display:none}
  .leaving{opacity:1}
}