:root{
  --disp:'Rubik',system-ui,sans-serif; --body:'Assistant',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
  --step--1:clamp(.78rem,.74rem + .2vw,.88rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.1rem);
  --step-1:clamp(1.18rem,1.08rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.55rem + 2.1vw,3.3rem);
  --step-4:clamp(2.6rem,1.8rem + 3.7vw,5.2rem);
}
/* ---------- THEME TOKENS ---------- */
:root[data-theme="dark"]{
  --bg:#07090F; --bg2:#0A0E18; --panel:#0E1322; --panel-2:#121A2C;
  --line:rgba(150,166,204,.13); --line-hi:rgba(150,166,204,.26);
  --txt:#C9D0DE; --txt-hi:#EEF2F9; --muted:#828BA0; --chrome:#E2E8F3;
  --accent:#3B74FF; --accent-2:#6E9BFF; --accent-deep:#0E2050; --glow:rgba(59,116,255,.5); --warm:#E5642A;
  --glass-top:rgba(228,236,250,.2); --glass-bot:rgba(9,13,24,.34); --glass-border:rgba(228,236,250,.3); --doit-text:#e6efff; --ring:#5b8cff; --glass-gloss:rgba(255,255,255,.55);
  --net:150,170,220; --net-line:59,116,255; --net-a:.5;
  --ag-exp:214,228,255; --ag-team:82,132,255; --ag-line:59,116,255; --ag-dim:120,140,185;
  --logo-shadow:drop-shadow(0 0 38px rgba(59,116,255,.32));
  --card-shadow:0 24px 60px -34px rgba(0,0,0,.7);
  --hero-glow1:rgba(59,116,255,.18); --hero-glow2:rgba(59,116,255,.10); --blob:rgba(59,116,255,.28); --blob2:rgba(150,180,255,.16);
  --nav-bg:rgba(9,12,20,.72);
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#F5F9FF; --panel:#FFFFFF; --panel-2:#F4F8FD;
  --line:rgba(20,44,100,.11); --line-hi:rgba(20,44,100,.20);
  --txt:#232B44; --txt-hi:#060B16; --muted:#455073; --chrome:#1E2742;
  --accent:#1A4EF5; --accent-2:#0F37C6; --accent-deep:#C9D6FF; --glow:rgba(26,78,245,.30); --warm:#CF5220;
  --glass-top:rgba(255,255,255,.97); --glass-bot:rgba(219,230,250,.72); --glass-border:rgba(40,70,150,.3); --doit-text:#123ccb; --ring:#2f5bd8; --glass-gloss:rgba(255,255,255,.95);
  --net:52,104,230; --net-line:40,100,255; --net-a:.6;
  --ag-exp:24,38,78; --ag-team:26,78,245; --ag-line:40,100,255; --ag-dim:120,136,170;
  --logo-shadow:drop-shadow(0 8px 20px rgba(24,44,96,.24)) drop-shadow(0 1px 1px rgba(24,44,96,.22));
  --card-shadow:0 30px 60px -26px rgba(28,64,150,.30), 0 10px 24px -12px rgba(28,64,150,.16);
  --hero-glow1:rgba(52,124,255,.18); --hero-glow2:rgba(90,158,255,.13); --blob:rgba(60,134,255,.20); --blob2:rgba(120,178,255,.15);
  --nav-bg:rgba(255,255,255,.82);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
@supports not (overflow-x:clip){html{overflow-x:hidden}}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--body); font-size:var(--step-0); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
  transition:background .5s ease, color .5s ease;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 82% -6%, var(--hero-glow1), transparent 60%),
    radial-gradient(900px 700px at 8% 12%, var(--hero-glow2), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg));
}
/* light mode: pure white base with elegant blue accents */
:root[data-theme="light"] body::before{
  background:
    radial-gradient(760px 560px at 84% 2%, rgba(79,124,255,.07), transparent 70%),
    radial-gradient(640px 520px at 8% 20%, rgba(96,158,255,.05), transparent 75%),
    radial-gradient(720px 560px at 62% 96%, rgba(79,124,255,.03), transparent 80%),
    #FFFFFF;
}
#bgcanvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55; pointer-events:none}
:root[data-theme="light"] #bgcanvas{opacity:.85}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); position:relative; z-index:2}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:rgba(59,116,255,.32); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.eyebrow{font-family:var(--mono); font-size:var(--step--1); font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-2); direction:ltr; display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); flex:0 0 auto}
h1,h2,h3{font-family:var(--disp); color:var(--txt-hi); font-weight:700; line-height:1.1; text-wrap:balance; margin:0}
h2{font-size:var(--step-3); letter-spacing:-.01em}
h3{font-size:var(--step-1); font-weight:600}
p{margin:0}
.lead{font-size:var(--step-1); color:var(--txt); font-weight:400; line-height:1.6; max-width:60ch}
.muted{color:var(--muted)}
.ltr{direction:ltr; unicode-bidi:isolate}
.chrome-text{
  background:linear-gradient(176deg,#fff 4%,#c4ccdb 34%,#8f9bb4 50%,#eef2f9 66%,#aab4c9 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent; position:relative;
}
:root[data-theme="light"] .chrome-text{
  background:linear-gradient(176deg,#59647f 8%,#28324c 42%,#111a30 78%,#3a4560 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent-text{color:var(--accent-2)}
section{position:relative; z-index:2; padding-block:clamp(52px,7vw,100px)}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(28px,4vw,46px); max-width:64ch}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
[data-d="1"]{transition-delay:.07s}[data-d="2"]{transition-delay:.14s}[data-d="3"]{transition-delay:.21s}[data-d="4"]{transition-delay:.28s}[data-d="5"]{transition-delay:.35s}[data-d="6"]{transition-delay:.42s}
/* headings resolve into focus as they reveal */
.sec-head.reveal{filter:blur(6px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1)}
.sec-head.reveal.in{filter:blur(0)}

/* scroll progress */
.progress{position:fixed; inset-block-start:0; inset-inline-start:0; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:60; box-shadow:0 0 12px var(--glow)}

/* nav */
header.nav{position:fixed; inset-block-start:0; inset-inline:0; z-index:50; transition:background .4s, border-color .4s; border-block-end:1px solid transparent}
header.nav.scrolled{background:var(--nav-bg); backdrop-filter:blur(16px) saturate(1.2); border-block-end:1px solid var(--line)}
.nav-in{max-width:var(--maxw); margin-inline:auto; padding:14px clamp(18px,5vw,40px); display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:26px; width:auto; filter:var(--logo-shadow)}
.brand .desc{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); direction:ltr; display:none}
/* Wordmark only in the bar — the five links plus Get Glance need the room. */
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:.92rem; color:var(--muted); transition:color .25s; position:relative}
.nav-links a:hover{color:var(--txt-hi)}
.nav-links a::after{content:""; position:absolute; inset-inline:0; inset-block-end:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:inline-end; transition:transform .3s}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:inline-start}
.nav-links a.active{color:var(--txt-hi)}
.nav-links a.active::after{transform:scaleX(1); transform-origin:inline-start}
.cursor-trail{position:fixed; inset:0; width:100%; height:100%; z-index:70; pointer-events:none}
.nav-tools{display:flex; align-items:center; gap:10px}
.icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line-hi); background:transparent; color:var(--txt-hi); cursor:pointer; display:grid; place-items:center; transition:border-color .25s, background .25s, transform .25s; font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.04em}
.icon-btn:hover{border-color:var(--accent); background:rgba(59,116,255,.08); transform:translateY(-1px)}
.icon-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7}
.icon-btn .sun{display:none}
:root[data-theme="light"] .icon-btn .sun{display:block}
:root[data-theme="light"] .icon-btn .moon{display:none}
.hamburger{display:none}
.hamburger svg path{transition:transform .3s, opacity .2s; transform-origin:center}
.hamburger[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.hamburger[aria-expanded="true"] .l2{opacity:0}
.hamburger[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1040px){.nav-links{display:none} .hamburger{display:grid}}
@media(max-width:420px){.nav-cta .doit.sm{--pad-y:8px; --pad-x:12px; font-size:.8rem}}
/* mobile menu overlay */
.mobile-menu{position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:var(--nav-bg); backdrop-filter:blur(22px) saturate(1.2); opacity:0; transition:opacity .3s; padding:24px; overflow-y:auto}
.mobile-menu.open{opacity:1}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex; flex-direction:column; align-items:center; gap:8px; flex:none}
.mobile-menu a{font-family:var(--disp); font-weight:600; font-size:1.5rem; color:var(--txt-hi); padding:8px 14px; transition:color .2s}
.mobile-menu a:hover{color:var(--accent-2)}
/* Privacy/Terms render like every other top-level menu link — previously
   singled out with a smaller, dimmer, side-by-side treatment. */
.mobile-menu-legal{display:flex; flex-direction:column; align-items:center; gap:2px; margin-block-start:4px}
/* skip link */
.skip{position:fixed; inset-block-start:8px; inset-inline-start:8px; z-index:80; padding:10px 16px; border-radius:10px; background:#1741C4; color:#fff; font-family:var(--disp); font-weight:600; transform:translateY(-160%); transition:transform .2s}
.skip:focus{transform:none}

/* Do It button */
.magnetic{display:inline-flex}
.doit{--pad-y:16px; --pad-x:34px; position:relative; display:inline-flex; align-items:center; justify-content:center; padding:var(--pad-y) var(--pad-x); border:0; cursor:pointer; isolation:isolate; border-radius:999px; background:transparent; -webkit-tap-highlight-color:transparent; font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--doit-text); text-shadow:0 1px 10px var(--glow); transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.doit .shell{position:absolute; inset:0; border-radius:inherit; z-index:-2;
  background:linear-gradient(180deg,var(--glass-gloss) 0%,transparent 24%),linear-gradient(180deg,var(--glass-top),var(--glass-bot));
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1.5px 0 var(--glass-gloss), inset 0 -12px 26px rgba(14,32,80,.24), 0 16px 46px -10px var(--glow); transition:box-shadow .3s}
.doit .ring{position:absolute; inset:6px; border-radius:999px; z-index:-1; border:2px solid var(--ring); box-shadow:0 0 12px var(--glow), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 11px color-mix(in srgb,var(--ring) 42%,transparent); transition:box-shadow .3s, border-color .3s}
.doit .shine{position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1}
.doit .shine::before{content:""; position:absolute; inset-block:-40%; inline-size:40%; inset-inline-start:-60%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg)}
.doit:hover{transform:translateY(-2px) scale(1.035)}
.doit:hover .shell{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 22px rgba(14,32,80,.4), 0 20px 60px -8px var(--glow)}
.doit:hover .ring{border-color:var(--accent-2); box-shadow:0 0 22px var(--glow), inset 0 0 16px var(--glow)}
.doit:hover .shine::before{animation:sweep .85s cubic-bezier(.3,.6,.2,1) forwards}
.doit .btn-spin{display:none; width:18px; height:18px; border-radius:50%; border:2px solid color-mix(in srgb,var(--doit-text) 30%,transparent); border-top-color:var(--doit-text); animation:spin .7s linear infinite}
.doit.loading{cursor:default}
.doit.loading .btn-label{opacity:0}
.doit.loading .btn-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.doit:active{transform:translateY(0) scale(.99)}
.doit.lg{--pad-y:21px; --pad-x:52px; font-size:1.35rem}
.doit.sm{--pad-y:10px; --pad-x:20px; font-size:.92rem}
@keyframes sweep{to{inset-inline-start:130%}}
@keyframes breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 22px rgba(14,32,80,.28), 0 14px 44px -12px var(--glow)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 22px rgba(14,32,80,.28), 0 18px 60px -10px var(--glow)}}
.doit.breathe .shell{animation:breathe 3.6s ease-in-out infinite}

.ghost{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-family:var(--disp); font-weight:500; font-size:1rem; color:var(--txt-hi); border:1px solid var(--line-hi); background:transparent; cursor:pointer; transition:border-color .3s, background .3s}
.ghost .arw{transition:transform .3s}
.ghost:hover{border-color:var(--accent); background:rgba(59,116,255,.08)}
.ghost:hover .arw{transform:translateX(-4px)}
[dir="ltr"] .ghost:hover .arw{transform:translateX(4px)}
[dir="ltr"] .ghost .arw{transform:scaleX(-1)}

/* hero */
.hero{min-height:100svh; display:flex; align-items:center; padding-block:130px 90px; position:relative; overflow:hidden}
.hero-blobs{position:absolute; inset:0; z-index:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform}
:root[data-theme="light"] .blob{mix-blend-mode:normal}

/* light: keep bubbles soft and tucked behind the hero, not bleeding to edges */
:root[data-theme="light"] .blob.b1{width:36vw; height:36vw; inset-block-start:2%; inset-inline-start:56%}
:root[data-theme="light"] .blob.b2{width:30vw; height:30vw; inset-block-start:30%; inset-inline-start:14%}
:root[data-theme="light"] .blob.b3{display:none}
.blob.b1{width:52vw; height:52vw; background:radial-gradient(circle, var(--blob) 0%, color-mix(in srgb,var(--blob) 78%,transparent) 17%, color-mix(in srgb,var(--blob) 46%,transparent) 34%, color-mix(in srgb,var(--blob) 20%,transparent) 53%, color-mix(in srgb,var(--blob) 6%,transparent) 74%, transparent 100%); inset-block-start:-6%; inset-inline-start:52%; animation:float1 17s ease-in-out infinite; will-change:transform}
.blob.b2{width:40vw; height:40vw; background:radial-gradient(circle, var(--blob2) 0%, color-mix(in srgb,var(--blob2) 78%,transparent) 17%, color-mix(in srgb,var(--blob2) 46%,transparent) 34%, color-mix(in srgb,var(--blob2) 20%,transparent) 53%, color-mix(in srgb,var(--blob2) 6%,transparent) 74%, transparent 100%); inset-block-start:34%; inset-inline-start:8%; animation:float2 21s ease-in-out infinite; will-change:transform}
.blob.b3{width:32vw; height:32vw; background:radial-gradient(circle, var(--blob) 0%, color-mix(in srgb,var(--blob) 78%,transparent) 17%, color-mix(in srgb,var(--blob) 46%,transparent) 34%, color-mix(in srgb,var(--blob) 20%,transparent) 53%, color-mix(in srgb,var(--blob) 6%,transparent) 74%, transparent 100%); inset-block-end:-4%; inset-inline-start:60%; animation:float1 24s ease-in-out infinite reverse; will-change:transform}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.08)}}
.hero-in{position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start}
.hero-in > picture, .cta-box > picture{display:contents}
[dir="ltr"] .hero-in{align-items:flex-start}
.hero-logo{width:min(206px,44vw); height:auto; margin-bottom:20px; filter:var(--logo-shadow)}
.hero h1{font-size:var(--step-4); letter-spacing:-.02em; margin:4px 0 20px; transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hero .lead{margin-bottom:36px}
.hero-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
/* Glance is its own product in this hero: one Get Glance action, plus a
   text link to the org path. Flow's Do It stays the primary hero CTA. */
/* A bordered card, not just a divider line under Flow's own CTA — Glance
   needs to read as a distinct product sitting inside this hero, not as one
   more paragraph continuing Flow's own pitch. The tag/dot above the copy
   names that explicitly; the card boundary makes it visible at a glance,
   before anyone reads a word. */
.hero-glance{margin-top:34px; padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); box-shadow:var(--card-shadow); display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; max-width:640px}
.hero-glance-tag{flex:1 1 100%; display:flex; align-items:center; gap:9px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.hero-glance-dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.hero-glance-dot::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent)}
.hero-glance p{margin:0; font-size:.95rem; line-height:1.6; color:var(--muted); flex:1 1 100%}
.hero-glance p b{color:var(--txt-hi); font-weight:600}
.hero-glance-flow{font-size:.9rem; font-weight:600; color:var(--txt); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--txt) 35%, transparent)}
.hero-glance-flow:hover{color:var(--accent)}
.hero-foot{margin-top:46px; display:flex; align-items:center; gap:13px; color:var(--muted); font-size:.9rem}
.hero-foot .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); flex:0 0 auto}
.scroll-cue{position:absolute; inset-block-end:26px; inset-inline-start:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; direction:ltr; z-index:3}
.scroll-cue .bar{width:1px; height:38px; background:linear-gradient(var(--accent),transparent); animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}
@media(max-width:640px){.scroll-cue{display:none}.hero{min-height:auto; padding-block:120px 60px}}

/* generic card grid */
.grid-3{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:640px){.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-2{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:820px){.grid-2{grid-template-columns:1fr 1fr}}
.card{position:relative; isolation:isolate; border:1px solid var(--line); border-radius:20px; padding:30px 28px; background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 55%, transparent)); box-shadow:var(--card-shadow); overflow:hidden; transition:border-color .35s, transform .2s}
.card::before{content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0; transition:opacity .35s ease; background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent) 24%, transparent), transparent 62%); pointer-events:none}
.card:hover::before{opacity:1}
.card > *{position:relative; z-index:1}
.card::after{content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:34%; height:1px; z-index:2; background:linear-gradient(90deg,var(--accent),transparent); transition:width .5s cubic-bezier(.2,.7,.2,1)}
.card:hover::after{width:100%}
.card .ic{transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s}
.card:hover .ic{transform:translateY(-2px) scale(1.06); background:rgba(59,116,255,.14); border-color:var(--accent)}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-hi); background:rgba(59,116,255,.08); margin-bottom:18px}
.card .ic svg{width:23px; height:23px; stroke:var(--accent-2); fill:none; stroke-width:1.6}
/* icons stay in the cobalt/chrome family — no warm accents */
.card h3{margin-bottom:9px; font-weight:700; color:var(--txt-hi)}
.card h3 .en{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--accent-2); direction:ltr; font-weight:500; margin-bottom:6px; text-transform:uppercase}
.card p{color:var(--muted); font-size:.97rem}

/* tilt */
.tilt{transform-style:preserve-3d; will-change:transform; transition:transform .18s ease}
.tilt .tc{transform:translateZ(26px)}

/* dual core */
.panel{position:relative; border:1px solid var(--line); border-radius:22px; padding:clamp(26px,3vw,38px); background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 60%, transparent)); overflow:hidden; box-shadow:var(--card-shadow)}
.panel .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; direction:ltr; padding:5px 11px; border-radius:999px; border:1px solid var(--line-hi); display:inline-block; margin-bottom:18px}
.panel.visible .tag{color:var(--accent-2); border-color:rgba(59,116,255,.4)}
.panel.shadow .tag{color:var(--muted)}
.panel h3{margin-bottom:11px; color:var(--txt-hi); font-weight:700}
.panel p{color:var(--muted); max-width:44ch}
.panel .art{height:150px; margin-bottom:22px; border-radius:14px; border:1px solid var(--line); position:relative; overflow:hidden; background:radial-gradient(120% 120% at 50% 0,rgba(59,116,255,.08),transparent 60%); display:flex; align-items:center; justify-content:center}
.mini-doit{position:relative; padding:12px 26px; border-radius:999px; font-family:var(--disp); font-weight:700; color:var(--doit-text); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); border:1px solid var(--glass-border); box-shadow:0 0 26px -4px var(--glow)}
.mini-doit span{position:absolute; inset:6px; border-radius:999px; border:2px solid var(--ring); box-shadow:inset 0 0 10px var(--glow)}
.grid-scan{position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:22px 22px; opacity:.6}
.grid-scan::after{content:""; position:absolute; inset-inline:0; height:60px; background:linear-gradient(180deg,transparent,var(--glow),transparent)}
.grid-scan.anim::after{animation:scanY 4s linear infinite}
@keyframes scanY{0%{inset-block-start:-60px}100%{inset-block-start:100%}}

/* dual-core live demo — one synchronized 8s story with a faux cursor */
.art.demo{height:214px; flex-direction:column; align-items:stretch; justify-content:center; gap:0; padding:18px 20px; overflow:hidden; position:relative}
.demo-chip{align-self:flex-start; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--accent-2); border:1px solid var(--line-hi); border-radius:999px; padding:6px 12px; background:color-mix(in srgb,var(--panel) 70%,transparent); opacity:0; animation:d-chip 6s ease-in-out infinite}
.demo-doit{align-self:center; margin:13px 0 15px; font-family:var(--disp); font-weight:700; font-size:.98rem; color:var(--doit-text); padding:9px 24px; border-radius:999px; background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); border:1px solid var(--glass-border); box-shadow:0 0 22px -4px var(--glow); opacity:0; animation:d-doit 6s ease-in-out infinite}
.demo-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.demo-steps li{position:relative; padding-inline-start:26px; font-size:.85rem; color:var(--muted); opacity:0}
.demo-steps li::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:1px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--accent)}
.demo-steps li::after{content:"✓"; position:absolute; inset-inline-start:3.5px; inset-block-start:-1px; font-size:.72rem; font-weight:700; color:var(--accent-2); opacity:0}
.demo-steps li:nth-child(1){animation:d-s1 6s ease-in-out infinite}
.demo-steps li:nth-child(2){animation:d-s2 6s ease-in-out infinite}
.demo-steps li:nth-child(3){animation:d-s3 6s ease-in-out infinite}
.demo-steps li:nth-child(1)::after{animation:d-c1 6s ease-in-out infinite}
.demo-steps li:nth-child(2)::after{animation:d-c2 6s ease-in-out infinite}
.demo-steps li:nth-child(3)::after{animation:d-c3 6s ease-in-out infinite}
.demo-cursor{position:absolute; left:24%; top:96%; width:20px; height:20px; z-index:6; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); animation:demoCursor 6s cubic-bezier(.5,0,.25,1) infinite}
.demo-cursor svg{width:100%; height:100%; display:block; fill:var(--txt-hi); stroke:var(--panel); stroke-width:1}
@keyframes d-chip{0%,8%{opacity:0;transform:translateY(-6px)}14%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes d-doit{0%,14%{opacity:0;transform:scale(.9)}20%{opacity:1;transform:scale(1.06)}25%,39%{opacity:1;transform:scale(1)}41%{transform:scale(.86)}45%{transform:scale(1.05)}49%,90%{transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes d-s1{0%,45%{opacity:0;transform:translateX(-6px)}51%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes d-s2{0%,55%{opacity:0;transform:translateX(-6px)}61%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes d-s3{0%,65%{opacity:0;transform:translateX(-6px)}71%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes d-c1{0%,49%{opacity:0}54%,100%{opacity:1}}
@keyframes d-c2{0%,59%{opacity:0}64%,100%{opacity:1}}
@keyframes d-c3{0%,69%{opacity:0}74%,100%{opacity:1}}
@keyframes demoCursor{0%,18%{opacity:0; left:26%; top:98%}23%{opacity:1; left:26%; top:98%}39%{opacity:1; left:50%; top:32%}41%{left:50%; top:35%}45%{left:50%; top:32%}86%{opacity:1; left:50%; top:32%}93%,100%{opacity:0; left:26%; top:98%}}
@media (prefers-reduced-motion:reduce){.demo-chip,.demo-doit,.demo-steps li,.demo-steps li::after,.demo-cursor{animation:none!important; opacity:1}.demo-cursor{opacity:0}}
[dir="rtl"] .demo-steps li{padding-inline-start:26px}

/* legal demo — static preview + play button, under the hero */
.legal-demo-preview{position:relative; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 60%, transparent)); box-shadow:var(--card-shadow); padding:8px; max-width:720px}
.ld-mock{border-radius:16px; overflow:hidden; opacity:.92; pointer-events:none; user-select:none}
.ld-caption-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 14px 8px; flex-wrap:wrap}
.ld-caption-row .ld-tag{font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.ld-caption-row .ld-runtime{font-family:var(--mono); font-size:.76rem; color:var(--accent-2); font-weight:600}
.ld-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-64%); width:84px; height:84px; border-radius:50%; border:1px solid var(--glass-border); background:linear-gradient(180deg,var(--glass-top),var(--glass-bot)); box-shadow:0 18px 40px -14px var(--glow), inset 0 1px 0 var(--glass-gloss); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.ld-play:hover{transform:translate(-50%,-64%) scale(1.06); box-shadow:0 22px 48px -12px var(--glow), inset 0 1px 0 var(--glass-gloss)}
.ld-play .tri{width:0; height:0; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent var(--accent); margin-inline-start:5px}

/* legal demo — modal */
.ld-modal{position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .3s ease}
.ld-modal.open{opacity:1}
.ld-modal[hidden]{display:none}
.ld-backdrop{position:absolute; inset:0; background:var(--nav-bg); backdrop-filter:blur(22px) saturate(1.2)}
.ld-panel{position:relative; width:100%; max-width:640px; max-height:88svh; overflow-y:auto; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 60%, transparent)); box-shadow:var(--card-shadow); padding:28px 28px 30px; transform:translateY(10px) scale(.98); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ld-modal.open .ld-panel{transform:translateY(0) scale(1)}
.ld-close{position:absolute; top:16px; inset-inline-end:16px}
.ld-progress{display:flex; align-items:center; gap:8px; margin-bottom:22px}
.ld-dot{width:7px; height:7px; border-radius:50%; background:var(--line-hi); transition:background .3s, width .3s, border-radius .3s}
.ld-dot.active{background:var(--accent); width:20px; border-radius:4px}
.ld-dot.done{background:var(--accent-2)}
.ld-step{display:none}
.ld-step.active{display:block; animation:ldStepIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes ldStepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.ld-step-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.ld-step-tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ld-pill{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; font-weight:600}
.ld-pill.zero{background:var(--panel-2); color:var(--muted); border:1px solid var(--line)}
.ld-pill.turn{background:color-mix(in srgb,var(--accent) 9%, transparent); color:var(--accent-2); border:1px solid color-mix(in srgb,var(--accent) 22%, transparent)}
.ld-body{color:var(--txt); font-size:.98rem; margin:16px 0}
.ld-body b{color:var(--txt-hi)}
.ld-amt{font-family:var(--mono); color:var(--accent-2); font-weight:600}
.ld-rail{height:3px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:20px}
.ld-rail i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0%; animation-timing-function:linear; animation-fill-mode:forwards}
.ld-rail-label{font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-top:8px; letter-spacing:.04em}

.ld-approve{border:1px solid var(--line); border-inline-start:3px solid var(--accent); border-radius:14px; background:var(--panel-2); padding:16px 18px}
.ld-glyph{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; color:var(--accent-2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px}
.ld-checklist{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px}
.ld-checklist li{display:flex; align-items:flex-start; gap:8px; font-size:.92rem; opacity:0; transform:translateX(-6px); animation:ldCheckIn .4s ease forwards}
[dir="rtl"] .ld-checklist li{transform:translateX(6px)}
.ld-checklist li:nth-child(1){animation-delay:.15s}
.ld-checklist li:nth-child(2){animation-delay:.45s}
@keyframes ldCheckIn{to{opacity:1; transform:translateX(0)}}
.ld-ck{width:18px; height:18px; border-radius:50%; background:color-mix(in srgb,var(--accent-2) 12%, transparent); color:var(--accent-2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:.7rem; margin-top:1px}

.ld-doc-split{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
@media(max-width:520px){.ld-doc-split{grid-template-columns:1fr}}
.ld-doc-row{display:flex; align-items:center; justify-content:space-between; font-size:.78rem; padding:5px 0; border-bottom:1px dashed var(--line)}
.ld-doc-row:last-child{border-bottom:none}
.ld-doc-row .k{color:var(--muted)}
.ld-doc-row .v{font-family:var(--mono); color:var(--txt-hi); font-weight:600}
.ld-doc-row .v.new{color:var(--accent-2)}
.ld-doc-row .v.old{color:var(--muted); text-decoration:line-through; font-weight:400; margin-inline-end:6px}
.ld-fadeup{opacity:0; animation:ldFadeUp .5s ease forwards}
@keyframes ldFadeUp{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

.ld-mail-field{display:flex; gap:8px; font-size:.8rem; padding:6px 0; border-bottom:1px solid var(--line)}
.ld-mail-field .k{color:var(--muted); min-width:52px; flex:0 0 auto}
.ld-mail-field .v{color:var(--txt-hi); font-family:var(--mono); font-size:.78rem}
.ld-mail-body{font-size:.86rem; color:var(--txt); margin-top:12px; white-space:pre-line}
.ld-mail-attach{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.ld-attach-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line); font-family:var(--mono); font-size:.72rem; color:var(--muted)}

.ld-tooltip{position:relative; margin-top:14px; padding:10px 14px; border-radius:12px; background:var(--txt-hi); color:var(--bg); font-size:.82rem; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--card-shadow)}

.ld-end-check{width:56px; height:56px; border-radius:50%; background:color-mix(in srgb,var(--accent-2) 10%, transparent); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px; box-shadow:0 0 0 8px color-mix(in srgb,var(--accent-2) 6%, transparent)}
.ld-end-lines{display:flex; flex-direction:column; gap:8px; margin-bottom:22px}
.ld-end-lines p{margin:0; color:var(--txt)}
.ld-end-lines .headline{font-family:var(--disp); font-weight:700; font-size:1.1rem; color:var(--txt-hi)}
.ld-end-lines .final{color:var(--accent-2); font-weight:600}

/* legal demo — shared fake-document window (scoped, does not touch .win used by dual-core) */
.ld-win{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--panel)}
.ld-win-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.ld-win-bar .wd{width:8px; height:8px; border-radius:50%; background:var(--line-hi)}
.ld-win-title{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-inline-start:8px}
.ld-win-body{padding:14px}
.ld-inbox-row{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:10px; margin-bottom:4px}
.ld-inbox-row .av{width:26px; height:26px; border-radius:50%; background:var(--line-hi); flex:0 0 auto}
.ld-inbox-row .lines{flex:1; min-width:0}
.ld-inbox-row .l1{height:8px; width:60%; background:var(--line-hi); border-radius:4px; margin-bottom:6px}
.ld-inbox-row .l2{height:6px; width:40%; background:var(--line); border-radius:4px}
.ld-inbox-row.hi{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%, transparent),transparent); border:1px solid color-mix(in srgb,var(--accent) 18%, transparent)}
.ld-sender{font-weight:600; color:var(--txt-hi); font-size:.86rem}
.ld-subject{font-size:.82rem; color:var(--txt); margin-top:2px}
.ld-scan-badge{position:relative; margin-top:8px; height:16px; overflow:hidden; font-family:var(--mono); font-size:.72rem}
.ld-scan-badge span{position:absolute; inset-inline-start:0; top:0; transition:opacity .4s}
.ld-scan-badge .a{color:var(--muted); opacity:1; animation:ldFadeOut .5s ease 1.6s forwards}
.ld-scan-badge .b{color:var(--accent-2); opacity:0; animation:ldFadeIn .5s ease 1.9s forwards}
@keyframes ldFadeOut{to{opacity:0}}
@keyframes ldFadeIn{to{opacity:1}}

@media(max-width:640px){.legal-demo-preview{max-width:none}}
@media (prefers-reduced-motion:reduce){
  .ld-step.active, .ld-checklist li, .ld-fadeup, .ld-scan-badge .a, .ld-scan-badge .b{animation:none!important; opacity:1!important; transform:none!important}
}

/* shadow: scanned work-window */
.art.win-art{height:230px; padding:12px; align-items:stretch; justify-content:stretch; background:none; border-color:var(--line)}
.win{width:100%; height:100%; border:1px solid var(--line-hi); border-radius:11px; background:color-mix(in srgb,var(--panel) 84%,transparent); overflow:hidden; display:flex; flex-direction:column; position:relative}
.win-bar{display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel-2) 72%,transparent)}
.win-bar .wd{width:8px; height:8px; border-radius:50%; background:var(--line-hi)}
.win-title{position:relative; margin-inline-start:8px; height:1.1em; flex:1; font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--muted)}
.win-title span{position:absolute; inset-inline-start:0; top:0; opacity:0; transition:opacity .5s; white-space:nowrap}
.win-title span.on{opacity:1}
.win-body{position:relative; flex:1; overflow:hidden}
.wv{position:absolute; inset:18px 18px 14px; opacity:1; display:flex; flex-direction:column; gap:10px; justify-content:center; animation:winFade 6s ease-in-out infinite}
@keyframes winFade{0%,4%{opacity:0}12%,88%{opacity:1}97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wv{animation:none; opacity:1}}
#winTitle{animation:winFade 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#winTitle{animation:none; opacity:1}}
/* skeleton: thin, translucent, like real scanned text */
.wrow{height:5px; border-radius:3px; background:currentColor; color:var(--muted); opacity:.22; width:100%}
.wrow.h{width:44%; height:6px; opacity:.34}
.wrow.s{width:74%}
/* detection: micro-dashed box at row height with a mono tag above */
.wdetect{position:relative; align-self:flex-start; margin:3px 0}
.wtag{position:absolute; inset-block-end:calc(100% + 3px); inset-inline-start:2px; font-family:var(--mono); font-size:.54rem; letter-spacing:.14em; color:var(--accent-2); white-space:nowrap}
.wbox{display:inline-flex; align-items:center; height:19px; padding:0 9px; border:1px dashed var(--accent); border-radius:3px; background:rgba(59,116,255,.06); box-shadow:0 0 0 1px rgba(59,116,255,.05)}
.wval{font-family:var(--mono); font-size:.72rem; color:var(--txt-hi); letter-spacing:.02em}
.wbox.mask .wval{filter:blur(2.4px); opacity:.8}
/* laser: razor-thin 1px line, glow spreads downward only */
.scanline{position:absolute; inset-inline:0; top:8%; height:1px; background:linear-gradient(90deg,transparent,#38e6ff 18%,#5b9bff 82%,transparent); animation:winScan 3.4s cubic-bezier(.6,0,.4,1) infinite}
.scanline::after{content:""; position:absolute; inset-inline:0; top:1px; height:26px; background:linear-gradient(180deg,rgba(56,230,255,.14),transparent); pointer-events:none}
@keyframes winScan{0%{top:8%; opacity:0}8%{opacity:1}92%{opacity:1}100%{top:92%; opacity:0}}

@keyframes fadeInUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:translateY(0)}}

/* security grid */
.sec-secure{border-block:1px solid var(--line); background:radial-gradient(1000px 500px at 80% 0,var(--hero-glow2),transparent 60%)}
.sixgrid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.secure-note{margin-top:30px; display:flex; align-items:center; gap:15px; padding:20px 24px; border:1px solid rgba(59,116,255,.28); border-radius:16px; background:linear-gradient(90deg,rgba(59,116,255,.09),transparent); color:var(--txt); font-size:1.02rem}
.secure-note b{color:var(--txt-hi)}
.secure-note svg{flex:0 0 auto; width:24px; height:24px; stroke:var(--accent-2); fill:none; stroke-width:1.6}

/* integrations strip — RTL logo marquee */
.integ-sec{padding-block:clamp(32px,5vw,52px); border-block:1px solid var(--line); background:color-mix(in srgb,var(--panel) 30%, transparent)}
.integ-title{align-self:stretch; text-align:center; color:var(--muted); font-size:.95rem; margin-bottom:24px}
.integ-marquee{align-self:stretch; position:relative; overflow:hidden; direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.trust-divider{align-self:stretch; height:1px; background:linear-gradient(90deg,transparent,var(--line-hi),transparent)}
.integ-track{display:flex; align-items:center; gap:clamp(38px,5.5vw,68px); width:max-content; animation:integ-scroll 32s linear infinite; will-change:transform}
@keyframes integ-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.integ-logo{display:inline-flex; align-items:center; gap:11px; color:var(--txt-hi); opacity:.48; filter:grayscale(1); transition:opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); flex:0 0 auto}
.integ-logo svg{height:27px; width:auto; flex:0 0 auto; fill:currentColor}
.integ-logo span{font-family:var(--disp); font-weight:600; font-size:1.02rem; letter-spacing:.01em; white-space:nowrap}
.integ-logo:hover{opacity:1; filter:none; color:var(--accent-2); transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.integ-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:18px 34px}}

/* scroll reveal animations */
.reveal{opacity:0; animation:fadeInUp 0.7s ease-out forwards}
.reveal.in{animation-play-state:running}
.card{transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color .35s}
.card:hover{transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:var(--card-shadow), 0 16px 44px -14px var(--glow), inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent); animation:shimmerCard 2s ease-in-out infinite}
.card.reveal{animation:slideInLeft 0.6s cubic-bezier(0.2,0.7,0.2,1) forwards; opacity:0}
.card[data-d="2"].reveal{animation-delay:0.1s}
.card[data-d="3"].reveal{animation-delay:0.2s}
.card[data-d="4"].reveal{animation-delay:0.3s}
.card[data-d="5"].reveal{animation-delay:0.4s}
.card[data-d="6"].reveal{animation-delay:0.5s}

/* ---------- border beam: a light that travels the card's own border on a conic gradient ----------
   The gradient's *angle* is animated via the --beam-a custom property (driven by rAF in JS below) —
   the box itself never rotates, so the ring stays glued to the card's rounded rect at any aspect ratio. */
.beam-wrap{position:relative; border-radius:20px; isolation:isolate; --beam-a:40deg}
.beam-wrap > .card{position:relative; z-index:1; height:100%}
.beam-wrap::before, .beam-wrap::after{
  content:""; position:absolute; inset:-1px; z-index:0; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--beam-a),
    transparent 0deg,
    color-mix(in srgb,var(--accent) 12%,transparent) 26deg,
    color-mix(in srgb,var(--accent) 75%,transparent) 52deg,
    color-mix(in srgb,#ffffff 55%,var(--accent-2)) 60deg,
    #ffffff 64deg,
    color-mix(in srgb,#ffffff 55%,var(--accent-2)) 68deg,
    transparent 94deg,
    transparent 180deg,
    color-mix(in srgb,var(--accent-2) 10%,transparent) 206deg,
    color-mix(in srgb,var(--accent-2) 60%,transparent) 230deg,
    color-mix(in srgb,#ffffff 45%,var(--accent-2)) 236deg,
    transparent 258deg,
    transparent 360deg);
}
.beam-wrap::before{
  padding:1.4px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.85; transition:opacity .35s ease;
}
.beam-wrap::after{filter:blur(13px); opacity:.28; z-index:-1; transition:opacity .35s ease}
.beam-wrap:hover::before{opacity:1}
.beam-wrap:hover::after{opacity:.45}

/* R4: ambient glow orbs — depth behind key sections */
.agraph-sec, .cta-sec{position:relative; overflow:hidden}
.agraph-sec::before, .agraph-sec::after, .cta-sec::before{content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, var(--blob) 0%, color-mix(in srgb,var(--blob) 78%,transparent) 17%, color-mix(in srgb,var(--blob) 46%,transparent) 34%, color-mix(in srgb,var(--blob) 20%,transparent) 53%, color-mix(in srgb,var(--blob) 6%,transparent) 74%, transparent 100%); opacity:.7}
.agraph-sec::before{width:46vw; height:46vw; top:-12%; left:-8%; animation:orbDrift 26s ease-in-out infinite}
.agraph-sec::after{width:38vw; height:38vw; bottom:-14%; right:-6%; background:radial-gradient(circle, var(--blob2) 0%, color-mix(in srgb,var(--blob2) 78%,transparent) 17%, color-mix(in srgb,var(--blob2) 46%,transparent) 34%, color-mix(in srgb,var(--blob2) 20%,transparent) 53%, color-mix(in srgb,var(--blob2) 6%,transparent) 74%, transparent 100%); animation:orbDrift 32s ease-in-out infinite reverse}
.cta-sec::before{width:52vw; height:52vw; left:24%; bottom:-30%; animation:orbDrift 30s ease-in-out infinite}
.agraph-sec > *, .cta-sec > *{position:relative; z-index:1}
.terrain-zone{position:relative}
canvas.terrain-canvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity .7s ease; -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 98%,transparent), linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 98%,transparent), linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-composite:intersect}
canvas.terrain-canvas.show{opacity:1}
.terrain-zone > section, .terrain-zone > footer{position:relative; z-index:1}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-4%) scale(1.14)}}
/* dual-core: depth + observe→act connector beam + do-it glow ring */
#dualcore{position:relative; overflow:hidden}
#dualcore::before{content:""; position:absolute; z-index:0; width:44vw; height:44vw; border-radius:50%; left:28%; top:16%; background:radial-gradient(circle, var(--blob) 0%, color-mix(in srgb,var(--blob) 78%,transparent) 17%, color-mix(in srgb,var(--blob) 46%,transparent) 34%, color-mix(in srgb,var(--blob) 20%,transparent) 53%, color-mix(in srgb,var(--blob) 6%,transparent) 74%, transparent 100%); opacity:.55; pointer-events:none; animation:orbDrift 28s ease-in-out infinite}
#dualcore .wrap{position:relative; z-index:1}
.grid-2{position:relative}
.core-beam{display:none}
@media(min-width:820px){
  .core-beam{display:block; position:absolute; z-index:2; top:31%; left:46.5%; width:7%; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.6; pointer-events:none}
  .core-beam::after{content:""; position:absolute; top:50%; left:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px 3px var(--glow); animation:beamRun 6s cubic-bezier(.5,0,.5,1) infinite}
}
@keyframes beamRun{0%,7%{left:0; opacity:0}11%{opacity:1}19%{left:100%; opacity:1}23%,100%{left:100%; opacity:0}}
.demo-doit{position:relative}
.demo-doit::after{content:""; position:absolute; inset:-5px; border-radius:999px; border:1.5px solid var(--accent); opacity:0; animation:doitRing 6s ease-in-out infinite}
@keyframes doitRing{0%,40%{opacity:0; transform:scale(.85)}44%{opacity:.8; transform:scale(1)}58%{opacity:0; transform:scale(1.35)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.core-beam::after,.demo-doit::after,#dualcore::before{animation:none}.core-beam::after{opacity:0}.demo-doit::after{opacity:0}}
/* Use cases reuse .sixgrid + .card */
#usecases{position:relative}
#usecases .sixgrid{grid-template-columns:1fr}
@media(min-width:760px){#usecases .sixgrid{grid-template-columns:1fr 1fr}}
/* Trust band */
.trust-sec{position:relative; overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(40px,6vw,64px); background:color-mix(in srgb,var(--panel) 22%, transparent); text-align:center}
.trust-sec::before{content:""; position:absolute; z-index:0; inset:auto; width:60vw; height:60vw; left:20%; top:-30%; border-radius:50%; background:radial-gradient(circle, var(--blob) 0%, color-mix(in srgb,var(--blob) 78%,transparent) 17%, color-mix(in srgb,var(--blob) 46%,transparent) 34%, color-mix(in srgb,var(--blob) 20%,transparent) 53%, color-mix(in srgb,var(--blob) 6%,transparent) 74%, transparent 100%); opacity:.5; pointer-events:none; animation:orbDrift 30s ease-in-out infinite}
.trust-sec .wrap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px}
.trust-sec .eyebrow{justify-content:center}
.trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.trust-badge{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; color:var(--txt-hi); padding:11px 18px; border-radius:999px; border:1px solid var(--line-hi); background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 60%,transparent)); box-shadow:var(--card-shadow); transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s}
.trust-badge:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.trust-badge svg{width:19px; height:19px; fill:none; stroke:var(--accent-2); stroke-width:1.6; flex:0 0 auto}
.trust-note{max-width:60ch; color:var(--muted); font-size:1rem}
@media (prefers-reduced-motion:reduce){.trust-sec::before{animation:none}}
:root[data-theme="light"] .agraph-sec::before,:root[data-theme="light"] .agraph-sec::after,:root[data-theme="light"] .cta-sec::before{opacity:.5}
@media (prefers-reduced-motion:reduce){.agraph-sec::before,.agraph-sec::after,.cta-sec::before{animation:none}}
/* Phones: shed the remaining per-element blur surfaces. Each filter:blur() box
   is its own offscreen texture, and a pinch-zoom-out puts every one of them on
   screen at the same moment — which is what made the page go blank. The glow and
   the reveal both survive as opacity/transform, which the compositor handles for
   free. */
@media (max-width:820px){
  .beam-wrap::after{display:none}
  .sec-head.reveal{filter:none}
  .sec-head.reveal.in{filter:none}
}

/* performance stats — circular carousel (arc-positioned cards, counter, nav) */
.ccarousel{outline:none; display:flex; flex-direction:column; align-items:center; gap:28px}
.cc-stage{position:relative; width:100%; max-width:840px; height:clamp(300px,36vw,380px); margin-inline:auto}
.cc-counter{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:0}
.cc-num{font-family:var(--disp); font-weight:700; font-size:clamp(3.4rem,3rem + 3vw,5rem); line-height:1; letter-spacing:-.03em; color:color-mix(in srgb,var(--txt-hi) 20%, transparent); font-variant-numeric:tabular-nums}
.cc-of{font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; direction:ltr; color:color-mix(in srgb,var(--muted) 88%, transparent); margin-top:2px}
.cc-track{position:absolute; inset:0}
.cc-card{
  position:absolute; top:50%; left:50%; z-index:1; appearance:none; font-family:inherit; color:inherit; text-align:start; cursor:pointer;
  width:min(300px,74vw); border:1px solid color-mix(in srgb,var(--line-hi) 75%, transparent); border-radius:20px; padding:26px 26px 28px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 95%, transparent), color-mix(in srgb,var(--panel-2) 88%, transparent));
  box-shadow:0 12px 34px -14px rgba(0,0,0,.36);
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .55s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.cc-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.cc-card.is-active{box-shadow:0 26px 64px -16px rgba(0,0,0,.46), 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent), 0 14px 36px -10px var(--glow); border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
.cc-tag{display:inline-flex; align-items:center; border-radius:999px; padding:5px 12px; font-family:var(--mono); font-size:.6rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; direction:ltr; color:var(--accent-2); background:color-mix(in srgb,var(--accent) 13%, transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); margin-bottom:16px}
.cc-big{font-family:var(--disp); font-weight:700; font-size:clamp(2.1rem,1.6rem + 2vw,2.8rem); line-height:1; letter-spacing:-.03em; color:var(--txt-hi); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:2px}
.cc-big .cc-u{color:var(--accent-2)}
.cc-title{margin:12px 0 0; font-family:var(--disp); font-weight:600; color:var(--txt-hi); font-size:1.05rem}
.cc-desc{margin:8px 0 0; color:var(--muted); font-size:.9rem; line-height:1.5}
.cc-controls{display:flex; align-items:center; gap:18px}
.cc-arrow{width:42px; height:42px; border-radius:999px; border:1px solid var(--line-hi); background:color-mix(in srgb,var(--panel) 70%, transparent); color:var(--txt-hi); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s, transform .2s, background .3s}
.cc-arrow:hover{border-color:var(--accent); background:rgba(59,116,255,.1); transform:scale(1.06)}
.cc-arrow svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.cc-dots{display:flex; align-items:center; gap:7px}
.cc-dots button{width:7px; height:7px; border-radius:999px; border:none; background:var(--line-hi); padding:0; cursor:pointer; transition:width .3s, background .3s}
.cc-dots button.active{width:26px; background:var(--accent)}
@media (prefers-reduced-motion:reduce){.cc-card{transition:opacity .3s ease}}

/* action graph — full-bleed cinematic */
.agraph-sec{position:relative; border-block:1px solid var(--line); overflow:hidden; padding-block:clamp(60px,8vw,108px); background:radial-gradient(1200px 720px at 50% 52%, var(--hero-glow2), transparent 60%)}
.agraph-head{max-width:64ch; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; z-index:2}
.ag-tag{font-family:var(--mono); font-size:.86rem; letter-spacing:.02em; color:var(--accent-2); direction:ltr; margin:8px 0 2px; line-height:1.5}
.agraph-head .lead{text-align:center; max-width:60ch}
.agraph-stage{position:relative; width:100%; height:clamp(360px,68vh,700px); margin-block:clamp(4px,1.5vw,14px)}
/* The lattice projects to a near-square bounding box, and the canvas fits it to
   whichever axis is tighter. On a phone that axis is width, so a tall stage
   just adds dead space under the base — match the stage to the shape instead. */
@media (max-width:620px){ .agraph-stage{height:clamp(300px,52vw + 140px,460px)} }
.agraph-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.agraph-legend{display:flex; gap:24px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:.86rem; position:relative; z-index:2}
.agraph-legend span{display:inline-flex; align-items:center; gap:8px}
.agraph-legend i{width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto}
.agraph-legend .exp{background:rgb(var(--ag-exp)); box-shadow:0 0 10px var(--glow)}
.agraph-legend .team{background:rgb(var(--ag-team)); box-shadow:0 0 10px var(--glow)}

/* insights — heading + a 3D coverflow of real article covers + CTA to the blog */
.ins-sec-simple{padding:72px 0; text-align:center}
.ins-sec-simple h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.2rem); color:var(--txt-hi); margin:12px 0 14px; letter-spacing:-.01em}
.ins-sec-simple p{font-family:var(--body); color:var(--muted); font-size:1.05rem; max-width:56ch; margin:0 auto 22px; line-height:1.6}
.ins-viewall{font-family:var(--disp); font-weight:700; color:var(--accent-2); text-decoration:none; font-size:1rem}
.ins-viewall:hover{text-decoration:underline}

.ins-cf{--cf-card:clamp(150px,17vw,230px); width:100%; margin:8px 0 34px}
.ins-cf-frame{
  position:relative; cursor:grab; outline:none; touch-action:pan-y;
  perspective:calc(var(--cf-card) * 3);
}
.ins-cf-frame:active{cursor:grabbing}
.ins-cf-track{position:relative; height:calc(var(--cf-card) * .68); transform-style:preserve-3d}
.ins-cf-card{
  position:absolute; left:50%; top:0; width:var(--cf-card); aspect-ratio:3/2;
  border-radius:14px; overflow:hidden; will-change:transform;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.5), 0 0 0 1px var(--line);
  text-decoration:none;
}
.ins-cf-card picture{position:absolute; inset:0; display:block}
.ins-cf-card img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none}
.ins-cf-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72)); opacity:0; transition:opacity .25s}
.ins-cf-card .t{
  position:absolute; left:10px; right:10px; bottom:9px; margin:0;
  font-family:var(--disp); font-weight:700; font-size:.74rem; line-height:1.3; color:#fff;
  opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s;
}
.ins-cf-card.is-center::after,.ins-cf-card.is-center .t{opacity:1; transform:translateY(0)}
.ins-cf-nav{display:flex; justify-content:center; gap:10px; margin-top:16px}
.ins-cf-btn{
  all:unset; box-sizing:border-box; width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--txt-hi); background:var(--surface,rgba(255,255,255,.06));
  border:1px solid var(--line); transition:border-color .15s,transform .15s;
}
.ins-cf-btn:hover{border-color:var(--accent-2); transform:translateY(-1px)}
.ins-cf-btn svg{width:16px; height:16px}
@media (max-width:640px){ .ins-cf{--cf-card:clamp(130px,44vw,190px)} }

/* waitlist */
.cta-sec{border-block-start:1px solid var(--line); background:radial-gradient(900px 500px at 50% 120%,var(--hero-glow1),transparent 60%)}
.cta-box{text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px}
.cta-box .logo{width:min(220px,54vw); height:auto; filter:var(--logo-shadow); margin-bottom:2px}
.cta-box h2{font-size:var(--step-3)}
.cta-box .lead{text-align:center; max-width:54ch}
.wait-form{display:flex; gap:13px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:8px; width:100%; max-width:580px}
.wait-form .field{position:relative; flex:1 1 260px}
.wait-form input{width:100%; padding:19px 22px; border-radius:999px; border:1px solid var(--line-hi); background:color-mix(in srgb,var(--panel) 70%, transparent); color:var(--txt-hi); font-family:var(--body); font-size:1.05rem; transition:border-color .3s, box-shadow .3s}
.wait-form .field input{padding-inline-end:52px}
.wait-form input::placeholder{color:var(--muted)}
.wait-form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--glow)}
.field.valid input{border-color:#22C55E}
.field.valid input{animation:fieldPulse 1.8s ease-in-out 2}
@keyframes fieldPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.field-icon{position:absolute; inset-inline-end:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; pointer-events:none}
.field-icon svg{position:absolute; inset:0; width:100%; height:100%; stroke:var(--muted); transition:opacity .3s ease, transform .3s ease}
.field-icon .icon-check{opacity:0; transform:scale(.4); stroke:#22C55E}
.field.valid .icon-envelope{animation:envelopeFly .65s cubic-bezier(.3,.6,.3,1) forwards}
.field.valid .icon-check{animation:checkIn .5s ease .4s forwards}
@keyframes envelopeFly{0%{opacity:1; transform:translate(0,0) scale(1)}100%{opacity:0; transform:translate(8px,-14px) scale(.35)}}
@keyframes checkIn{from{opacity:0; transform:scale(.4)}to{opacity:1; transform:scale(1)}}
.wait-msg{min-height:22px; font-size:.98rem; color:var(--accent-2)}
/* waitlist entrance: gentle scale-in + one-shot glow invitation on the email field */
.wait-wrap.reveal{transform:scale(.96) translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.wait-wrap.reveal.in{transform:none}
.wait-wrap.reveal.in .field input{animation:waitFieldWelcome 1.6s ease-out .3s 1}
@keyframes waitFieldWelcome{0%{box-shadow:0 0 0 0 var(--glow)}45%{box-shadow:0 0 0 8px var(--glow)}100%{box-shadow:0 0 0 0 transparent}}
/* cutting-edge animations */
@keyframes morphShape{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmerCard{0%{opacity:.8; filter:brightness(1)}50%{opacity:1; filter:brightness(1.05)}100%{opacity:.8; filter:brightness(1)}}
@keyframes glowPulse{0%{box-shadow:0 0 12px rgba(59,116,255,.3)}50%{box-shadow:0 0 24px rgba(59,116,255,.6)}100%{box-shadow:0 0 12px rgba(59,116,255,.3)}}
@keyframes slideInLeft{from{opacity:0; transform:translateX(-30px)}to{opacity:1; transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0; transform:translateX(30px)}to{opacity:1; transform:translateX(0)}}
.wait-msg.err{color:#ff7a55}
/* The two real ways in, side by side. Neither is a step on a ladder: Flow and
   Glance are separate products for separate audiences, so each gets its own
   full card rather than being crammed into a tier comparison. Their *visual
   weight* is deliberately not equal — the Flow card holds the actual lead
   form and reads heavier, the Glance card is a single-line link — because
   Flow is the more foundational product this page leads with (see
   docs/design-principles.md, "the more foundational one leads"), not because
   of an oversight. */
.cta-paths{display:grid; gap:18px; width:100%; max-width:760px; margin:6px 0 22px; text-align:start; align-items:start}
@media (min-width:760px){ .cta-paths{grid-template-columns:1fr 1fr} }
.cta-path{
  display:flex; flex-direction:column; gap:8px; padding:24px 26px; border-radius:20px;
  border:1px solid var(--line); background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 18px 40px -26px rgba(26,78,245,.4);
  text-decoration:none; transition:border-color .25s, transform .25s, background .25s, box-shadow .25s;
}
.cta-path:hover{border-color:var(--cat); transform:translateY(-3px); background:linear-gradient(160deg, rgba(26,78,245,.09), rgba(26,78,245,.02)); box-shadow:0 1px 2px rgba(0,0,0,.1), 0 26px 52px -26px rgba(26,78,245,.55)}
.cta-path:focus-visible{outline:2px solid var(--cat); outline-offset:3px}
.cta-path b{font-size:1.05rem; font-weight:700; color:var(--txt-hi)}
.cta-path span{font-size:.88rem; line-height:1.55; color:var(--muted)}
.cta-path-form{cursor:default}
.cta-path-form:hover{transform:none; border-color:var(--line); background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 18px 40px -26px rgba(26,78,245,.4)}
.cta-path-form .wait-wrap{width:100%; display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:8px}
.cta-path-form .wait-form{justify-content:flex-start; max-width:none}
.cta-path-form .wait-msg{text-align:start}
.cta-path-link{justify-content:center; position:relative}
.cta-path-arrow{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); color:var(--muted); margin-top:6px; transition:border-color .25s, color .25s, transform .25s}
.cta-path-arrow svg{width:15px; height:15px}
.cta-path-link:hover .cta-path-arrow{border-color:var(--cat); color:var(--cat); transform:translateX(3px)}
@media (max-width:759px){ .cta-path-link{align-items:flex-start} .cta-path-arrow{display:none} }
/* A quiet scroll cue, not a third button competing with the two real paths. */
.hero-scroll{
  display:inline-flex; align-items:center; gap:7px; margin-top:22px; padding:6px 2px;
  background:none; border:0; cursor:pointer; font-family:inherit; font-size:.9rem;
  color:var(--muted); transition:color .2s;
}
.hero-scroll::after{content:''; width:8px; height:8px; border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.hero-scroll:hover{color:var(--txt-hi)}
.hero-scroll:focus-visible{outline:2px solid var(--cat); outline-offset:3px; border-radius:4px}
.cta-fine{color:var(--muted); font-size:.86rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.cta-fine svg{width:15px; height:15px; stroke:var(--accent-2); fill:none; stroke-width:1.6}
.success-mark{display:none; align-items:center; gap:12px; color:var(--accent-2); font-family:var(--disp); font-weight:700; font-size:1.2rem}
.wait-confirm-note{display:none; font-family:var(--sans,inherit); font-size:.86rem; color:var(--muted,#8891A4); text-align:center; margin-top:-6px}
.wait-wrap.step2 .wait-form{display:none}
.wait-wrap.done .wait-form{display:none}
.wait-wrap.done .success-mark{display:inline-flex}
.wait-wrap.step2 .wait-confirm-note, .wait-wrap.done .wait-confirm-note{display:block}

.wait-enrich{display:none; flex-direction:column; align-items:center; gap:10px; margin-top:2px; width:100%; max-width:460px}
.wait-wrap.step2 .wait-enrich{display:flex}
.wait-enrich-note{font-size:.86rem; color:var(--muted); margin:0; text-align:center}
.wait-enrich-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; width:100%}
.wait-enrich-form input{flex:1 1 150px; padding:12px 16px; border-radius:999px; border:1px solid var(--line-hi); background:color-mix(in srgb,var(--panel) 70%, transparent); color:var(--txt-hi); font-family:var(--body); font-size:.92rem; transition:border-color .3s, box-shadow .3s}
.wait-enrich-form input::placeholder{color:var(--muted)}
.wait-enrich-form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow)}
.wait-enrich-form input.err{border-color:#ff7a55; box-shadow:0 0 0 3px rgba(255,122,85,.18)}

/* footer */
footer{border-block-start:1px solid var(--line); padding-block:52px; position:relative; z-index:2}
.foot-in{display:flex; flex-wrap:wrap; gap:24px; align-items:center}
.foot-links{display:flex; gap:24px; color:var(--muted); font-size:.92rem; flex-wrap:wrap}
.foot-links a:hover{color:var(--txt-hi)}
.foot-legal{width:100%; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.foot-legal .en{font-family:var(--mono); direction:ltr; letter-spacing:.05em}

/* Toggled from the homepage script when a section leaves the viewport. */
.motion-off, .motion-off *{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important; transition-duration:.001s !important}
  .reveal{opacity:1; transform:none}
  .sec-head.reveal{filter:none}
  .field.valid .icon-envelope{opacity:0}
  .field.valid .icon-check{opacity:1; transform:scale(1)}
  .scroll-cue .bar{display:none}
}
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:#1741C4; color:#fff; padding:10px 18px; border-radius:0 0 8px 0; font-family:var(--sans,sans-serif); font-weight:700; font-size:.9rem}
.skip-link:focus{left:0}

/* Two-path hero + how-it-works. First-viewport text is not .reveal / .p-reveal. */
.hero.hero-paths{min-height:auto; align-items:flex-start; padding-block:128px 48px}
.hero.hero-paths .hero-in{align-items:center; text-align:center}
.hero.hero-paths .hero-logo{width:min(160px,38vw); margin-inline:auto; margin-bottom:28px}
.hero.hero-paths .eyebrow{justify-content:center}
.hero.hero-paths .eyebrow::before,.loop-sec .eyebrow::before{width:7px; height:7px; border-radius:50%; background:#5B8CFF; box-shadow:0 0 10px var(--glow)}
.hero.hero-paths h1{font-size:clamp(2.05rem,1.45rem + 2.1vw,3.05rem); max-width:16em; line-height:1.12; margin-inline:auto}
.hero.hero-paths .lead{margin-inline:auto; max-width:48ch}
.path-label{margin:52px 0 0; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.path-split{display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; text-align:start; margin-top:16px}
.path-card{background:color-mix(in srgb, var(--panel) 88%, transparent); border:1px solid var(--line); border-radius:20px; padding:32px 28px 28px; display:flex; flex-direction:column; gap:14px}
.path-card.glance-card{border-color:color-mix(in srgb, #5B8CFF 35%, var(--line))}
.path-card .who{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2)}
.path-card.glance-card .who{color:#5B8CFF}
.path-card h3{font-family:var(--disp); font-weight:700; font-size:1.45rem; color:var(--txt-hi); margin:0; letter-spacing:-.02em}
.path-card p{color:var(--txt); font-size:1rem; line-height:1.6; margin:0; flex:1}
.path-card .cta-row{margin-top:8px}
.doit.ghost{color:var(--txt-hi); text-shadow:none}
.doit.ghost .shell{background:transparent; box-shadow:none; border-color:var(--line-hi)}
.doit.ghost .ring,.doit.ghost .shine{display:none}
.loop-sec{padding:72px 0 28px; text-align:center}
.loop-sec .eyebrow{justify-content:center}
.loop-sec h2{margin-bottom:12px}
.loop-sec .lead{margin:0 auto 36px; max-width:46ch}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:start; max-width:960px; margin:0 auto}
.pillar{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px 22px}
.pillar h3{font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--txt-hi); margin:0 0 8px}
.pillar p{font-size:.95rem; color:var(--muted); line-height:1.55; margin:0}
.glance-now{max-width:68ch; margin:40px auto 0; text-align:start; font-size:.95rem; color:var(--txt); line-height:1.6}
.glance-now b{color:var(--txt-hi)}
.quiet-line{font-size:.85rem; color:var(--muted); text-align:center; padding:28px 0 8px; border-top:1px solid var(--line); margin:48px auto 0; max-width:720px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px}
.roadmap-badge{display:inline-flex; align-items:center; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:transparent}
.path-text-link{display:inline-flex; margin-top:16px; font-family:var(--disp); font-weight:600; color:var(--accent-2); border-bottom:1px solid transparent}
.path-text-link:hover{border-bottom-color:var(--accent-2)}
@media(max-width:800px){.path-split,.pillars{grid-template-columns:1fr} .hero.hero-paths{padding-block:108px 36px}}