/* Vectflow ADI — shared base. Extracted 14 Oct 2026 from index.html's inline CSS
   (tokens, background layers, buttons, nav, mobile menu, sections, final CTA,
   footer, path bar). Pages keep their own @font-face lines inline, because
   app/scripts/inline_fonts.py inlines the critical faces into the HTML at deploy. */
/* ───────────────────────── Reset & tokens ───────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#06080F;            /* deeper obsidian */
  --bg-2:#080B16;
  --surface-1:#0E1320;
  --surface-2:#141B2B;
  --surface-3:#1C2540;
  --line:rgba(255,255,255,0.08);
  --line-soft:rgba(255,255,255,0.05);
  --text:#F4F7FF;
  --muted:rgba(244,247,255,0.62);
  --muted-low:rgba(244,247,255,0.48);
  --cyan:#00D1FF;
  --blue:#3A78FF;
  --purple:#7C5CFF;
  --success:#00E5A0;
  --grad:linear-gradient(120deg,#00D1FF 0%,#3A78FF 50%,#7C5CFF 100%);
  --grad-soft:linear-gradient(120deg,rgba(0,209,255,0.16),rgba(124,92,255,0.16));
  --ease:cubic-bezier(0.16,1,0.3,1);
  --maxw:1200px;
  --pad:clamp(20px,5vw,72px);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* Lenis smooth-scroll */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
/* Page transition styles are injected by the shared "page wipe" script (before </body>). */
body{
  background:var(--bg);color:var(--text);
  font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  overflow-x:hidden;position:relative;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(58,107,255,0.35);color:var(--text);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.04;}
.mono{font-family:'SF Mono','Fira Code',Consolas,monospace;}

/* skip link */
.skip{position:absolute;left:-999px;top:0;z-index:1000;background:var(--surface-2);color:var(--text);padding:12px 18px;border-radius:0 0 10px 0;}
.skip:focus{left:0;}

/* ───────────────────────── Background ─────────────────────────
   body paints var(--bg); the only layer over it is the orbs (.orbs, in adi.css,
   decision 0114). The network belongs to the homepage only. */
.page{position:relative;z-index:2;}

/* ───────────────────────── Utilities ───────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.eyebrow{font-family:'SF Mono','Fira Code',Consolas,monospace;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--cyan);display:inline-block;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}

/* ───────────────────────── Buttons ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer;
  padding:14px 26px;border-radius:12px;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{position:relative;color:#fff;border-color:rgba(255,255,255,0.18);
  background:var(--grad);background-size:160% 160%;background-position:0% 50%;
  box-shadow:var(--btn-shadow),inset 0 1px 0 rgba(255,255,255,0.35);}
.btn-primary:hover{transform:translateY(-2px);background-position:100% 50%;
  box-shadow:0 18px 44px -10px rgba(124,77,255,0.5),0 0 40px rgba(58,107,255,0.2),inset 0 1px 0 rgba(255,255,255,0.45);}
.btn-ghost{color:var(--text);border-color:var(--line-strong);background:var(--tint);}
.btn-ghost:hover{border-color:var(--hov-line);background:var(--sel);transform:translateY(-2px);}
.btn-lg{padding:17px 34px;font-size:16px;border-radius:14px;}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.arr{transition:transform .25s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

/* The header (nav, Systems panel, phone menu) lives in adi.css: one header on every page (0113). */
section{padding:clamp(80px,11vh,140px) 0;position:relative;}
section[id]{scroll-margin-top:88px;}
.sec-head{max-width:760px;margin-bottom:64px;}
.sec-title{font-size:clamp(32px,5vw,56px);margin-top:18px;}
.sec-lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);margin-top:20px;max-width:620px;}

.final{text-align:center;border:1px solid var(--line);border-radius:28px;padding:clamp(50px,8vw,90px) var(--pad);background:
  radial-gradient(80% 120% at 50% 0%,var(--glow-c),transparent 60%),
  var(--card);position:relative;overflow:hidden;}
.final h2{font-size:clamp(34px,6vw,64px);}
.final p{color:var(--muted);max-width:560px;margin:22px auto 0;font-size:18px;}
/* The button row had no rule on these pages (only the hero and price card set one), so
   the button sat flush against the paragraph above it. */
/* Hero buttons sit in a row with a gap on every page (they touched on the system
   pages, which had no rule); phones stack them full width (adi.css). */
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.final .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:36px;}
.final-faq{margin-top:26px!important;font-size:15px;color:var(--muted-low);}
.final-faq a{color:var(--muted);border-bottom:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease);}
.final-faq a:hover{color:var(--text);border-color:var(--sel-line);}

/* ───────────────────────── Footer ───────────────────────── */
footer{border-top:1px solid var(--line);padding:80px 0 40px;background:var(--foot-bg);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.foot-brand img{height:44px;margin-bottom:22px;}
.foot-brand p{color:var(--muted);max-width:300px;font-size:14.5px;line-height:1.6;}
.foot-seq{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px;max-width:300px;}
.foot-seq span{font-family:'SF Mono',monospace;font-size:12.5px;letter-spacing:0.06em;color:var(--muted);display:flex;align-items:center;gap:8px;}
.foot-seq span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.foot-col{text-align:right;}
.foot-col h4{font-family:'SF Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-low);margin-bottom:18px;}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;padding:6px 0;transition:color .2s var(--ease);}
.foot-col a:hover{color:var(--text);}
.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:64px;padding-top:28px;border-top:1px solid var(--line-soft);flex-wrap:wrap;}
.foot-bot p{font-size:13px;color:var(--muted-low);text-wrap:pretty;}
.foot-bot a{color:inherit;transition:color .2s var(--ease);}
.foot-bot a:hover{color:var(--text);}
.foot-legal a{color:var(--muted-low);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:color .2s var(--ease),text-decoration-color .2s var(--ease);}
.foot-legal a:hover{color:var(--text);text-decoration-color:var(--muted-low);}

/* ───────────────────────── Mobile path bar ───────────────────────── */
.path-bar{display:none;position:fixed;bottom:var(--vv-gap,0px);left:0;right:0;z-index:470;background:var(--glass-solid);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px;transition:transform .35s var(--ease),visibility 0s;}
/* THE HIDDEN STATE MUST CLEAR THE GAP, NOT JUST THE BAR. `translateY(130%)` was
   written when `bottom` was 0, where 1.3x the bar's own height is comfortably
   off-screen. `bottom` is no longer 0: --vv-gap lifts the bar above iOS Safari's
   collapsed toolbar (see the visualViewport block near the end of this file), and
   a bar lifted by G then pushed down by a fixed 130% comes to rest with its TOP
   edge (G - 0.3 x height) ABOVE the viewport bottom. This bar is 79px +
   env(safe-area-inset-bottom), about 113px on a notched iPhone, so 0.3 x height
   is ~34px against a collapse gap of roughly 45-90px -- leaving 11-56px of it on
   screen. That is the blue sliver in the founder's 18 Sep screenshots.
   It is also exactly why the sliver was SAFARI-ONLY, which had looked like an
   engine quirk and is not one: --vv-gap is 0 in every browser whose toolbar does
   not collapse, and at G=0 the old 130% hid correctly and hid the bug with it.
   Translating by the gap as well makes the hidden state correct for any G.
   visibility is the backstop rather than the mechanism: if this arithmetic is
   ever wrong again the bar still cannot paint or take a tap, and the 0s-in /
   .35s-out delay keeps the slide itself visible in both directions. */
.path-bar.hide{transform:translateY(calc(100% + var(--vv-gap,0px) + 16px));visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;}
.path-bar .btn{flex:1;padding:14px;font-size:15px;}

/* ───────────────────────── Responsive (shared) ───────────────────────── */
@media(max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .foot-brand{grid-column:1/-1;}
  .foot-col{text-align:left;}
}
@media(max-width:720px){
  .foot-grid{grid-template-columns:1fr;}
  .path-bar{display:flex;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  #gl{display:none;}
}