/* Self-hosted fonts (same files and subsets Google Fonts serves): Inter and JetBrains Mono, SIL Open Font License 1.1, see fonts/OFL-*.txt */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) 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:500 600;font-display:swap;src:url(fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jetbrains-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jetbrains-mono-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jetbrains-mono-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) 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}
/* =========================================================
   Ozumni — prototype styles v4
   Style direction: productized-agency look (warm paper, black panels,
   amber accents, bento grids, horizon glow). Own implementation.
   ========================================================= */
:root{
  --bg:#f0efec; --card:#ffffff; --ink:#0a0a0a; --ink-2:#55555e; --ink-3:#8b8b93; --line:#e2e0da;
  --night:#000000; --night-2:#111111; --night-3:#1a1a1a; --line-dark:#262626;
  /* accent family (theme-able). --amber is the historical name of the accent. */
  --amber:#ffc83d; --amber-2:#ffb300; --glow:#ff9a3d;
  --acc-rgb:255,200,61; --glow-rgb:255,154,61; --hl-rgb:255,214,150;
  --on-acc:#1a1400; --acc-ink:#8a6400;
  --spot-rgb:var(--glow-rgb); /* cursor spotlight on cards */
  /* surfaces & text roles (dark themes override these) */
  --card-2:#ffffff; --glass:rgba(255,255,255,.88); --outline:rgba(0,0,0,.035); --hi:#ffffff; --ink-h:#222222;
  --ghost-c:var(--ghost-c); --solid:#0a0a0a; --on-solid:#ffffff; --bar-top:rgba(255,255,255,.95);
  --ok:#16a34a; --warn:#f5b700; --err:#c2271d;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:20px; --r-sm:12px; --max:1240px; --gut:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  /* aliases used by form.js / older inline styles */
  --violet:var(--ink); --accent:var(--ink); --violet-soft:var(--bg-1); --accent-soft:var(--bg-1); --paper:var(--bg); --bg-alt:var(--bg-1); --lime:var(--amber); --lime-ink:var(--on-acc);
}
/* derived surfaces follow the page background, so warm and cool greys never mix */
:root,:root[data-theme]{
  --bg-1:color-mix(in oklab,var(--bg) 45%,#fff);
  --bg-2:color-mix(in oklab,var(--bg) 94%,#000);
  --line-2:color-mix(in oklab,var(--line) 85%,#000);
  --acc-soft:color-mix(in oklab,var(--amber) 22%,#fff);
  --acc-tint:color-mix(in oklab,var(--amber) 55%,#fff);
}
/* ---- color themes: two dark themes, color1 is the default (set on <html>) ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.05}
h1{font-size:clamp(42px,5.6vw,76px)}
h2{font-size:clamp(32px,4vw,52px);color:var(--ink-h)}
h3{font-size:18px;letter-spacing:-.02em;line-height:1.3}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}   /* read by screen readers and search, not shown */
p{margin:0}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:640px){.container{padding:0 16px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--solid);color:var(--on-solid);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--amber-2);outline-offset:3px;border-radius:6px}
::selection{background:var(--amber);color:#000}
.muted{color:var(--ink-2)}
.mono{font-family:var(--f-mono)}
.ph{color:var(--acc-ink);background:var(--acc-soft);border-radius:4px;padding:0 4px;font-weight:600}
.dark .ph,.panel .ph,.hero .ph,.inv .ph{background:rgba(var(--acc-rgb),.14);color:var(--amber)}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.logo .mark{width:28px;height:28px;flex:none}
.logo .mark .ring{fill:none;stroke:currentColor;stroke-width:4}
.logo .mark .sat{fill:var(--amber);stroke:var(--bg);stroke-width:2.5}
.logo .wm{font:600 21px/1 var(--f-body);letter-spacing:-.05em}
.logo .llc{font:500 10px/1 var(--f-mono);letter-spacing:.08em;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:3px 4px 2px}
/* new wordmark (2026-10-23, Figma si-panda-team 142:243): letters follow the text colour, the star is the CTA pink */
.logo .wordmark{height:15px;width:auto;display:block;flex:none;overflow:visible}
.header .logo .wordmark,.mobile-menu .logo .wordmark{height:12px}
.logo .wordmark .star{fill:var(--cta,#ff4d6d)}
.cmp-logo .wordmark{height:11px}
.foot .logo .wordmark{height:20px;margin-top:8px}
@media (max-width:640px){.header .logo .wordmark{height:11px}}
.on-dark .logo .mark .sat{stroke:#000}

/* ---------- buttons (with amber square) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;border-radius:12px;font:500 15px/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;letter-spacing:-.01em}
.btn .bi{width:30px;height:30px;border-radius:8px;background:var(--amber);color:#000;display:grid;place-items:center;font-size:15px;margin-left:-10px;flex:none}
.btn-primary{background:var(--solid);color:var(--on-solid);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{background:color-mix(in oklab,var(--solid) 86%,var(--bg))}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.on-dark .btn-primary,.dark .btn-primary,.panel .btn-primary,.hero .btn-primary,.inv .btn-primary{background:#141414;border-color:#2e2e2e;color:#fff}
.on-dark .btn-primary:hover,.dark .btn-primary:hover,.panel .btn-primary:hover,.hero .btn-primary:hover,.inv .btn-primary:hover{border-color:#555}
.on-dark .btn-ghost,.dark .btn-ghost,.panel .btn-ghost,.hero .btn-ghost{background:transparent;border-color:#333;color:#fff}
.btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.btn-sm .bi{width:26px;height:26px;margin-left:-8px}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px}
.link:hover{text-decoration-color:var(--ink)}
.dark .link,.panel .link{color:#fff;text-decoration-color:#666}

/* ---------- prototype helpers ---------- */
.bid{position:absolute;top:12px;left:12px;z-index:30;font:600 11px/1 var(--f-mono);letter-spacing:.04em;background:#ffe14d;color:#3a3000;padding:5px 8px;border-radius:6px;pointer-events:none}
body.hide-bid .bid{display:none}
.proto-toggle{position:fixed;right:16px;bottom:16px;z-index:90;font:600 12px/1 var(--f-body);background:#ffe14d;color:#3a3000;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:var(--shadow)}

/* ---------- sections ---------- */
section{position:relative;padding:120px 0}
@media (max-width:768px){section{padding:80px 0}}
.sec-head{margin-bottom:48px;max-width:780px;position:relative}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:18px;letter-spacing:-.01em}
.label{display:inline-block;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.panel .label,.inv .label{color:#777}
.ghost{position:absolute;left:-.04em;top:-.42em;font-weight:600;letter-spacing:-.06em;line-height:1;font-size:clamp(90px,15vw,220px);color:var(--ghost-c);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.sec-head h2,.sec-head p,.sec-head .label{position:relative;z-index:1}
.grid{display:grid;gap:var(--gut)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{position:relative;background:var(--card);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;height:100%;overflow:hidden;box-shadow:0 0 0 1px var(--outline)}
.card.black{background:var(--night);color:#fff}
.card.black .muted,.card.black p{color:#9a9aa3}
.card.amber{background:var(--amber);color:var(--on-acc)}
.grow{flex:1}

/* ---------- header (floating) ---------- */
.header{position:fixed;top:8px;left:8px;right:8px;z-index:50;border-radius:18px;transition:background .25s,box-shadow .25s,color .25s;color:var(--ink)}
.header .nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;max-width:var(--max);margin:0 auto;padding:0 24px}
.header.scrolled{background:color-mix(in oklab,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px var(--outline),0 10px 30px rgba(0,0,0,.06)}
.header.on-dark{color:#fff;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.header .bid{top:50%;transform:translateY(-50%);left:auto;right:12px}
@media (max-width:1400px){.header .bid{display:none}}
.menu{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-size:14px;font-weight:500;opacity:.72;transition:opacity .15s}
.menu a:hover,.menu a.active{opacity:1}
.nav-right{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border:1px solid rgba(127,127,127,.35);border-radius:12px;background:transparent;cursor:pointer;align-items:center;justify-content:center;color:inherit}
.burger span,.burger span:before,.burger span:after{display:block;width:18px;height:2px;background:currentColor;position:relative;border-radius:2px}
.burger span:before,.burger span:after{content:"";position:absolute;left:0}
.burger span:before{top:-6px}.burger span:after{top:6px}
@media (max-width:900px){.header nav{display:none}.burger{display:inline-flex}.header .nav{padding:0 12px;gap:10px}}
@media (max-width:480px){.hide-sm{display:none}}
.mobile-menu{position:fixed;inset:0;z-index:80;background:#000;color:#fff;padding:20px 16px;display:none;flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;height:52px}
.mobile-menu .logo .mark .sat{stroke:#000}
.mobile-menu ul{list-style:none;padding:28px 0;margin:0}
.mobile-menu ul a{display:block;padding:14px 0;font-size:30px;font-weight:600;letter-spacing:-.04em;text-decoration:none;border-bottom:1px solid var(--line-dark)}
.close{width:42px;height:42px;border:1px solid #333;border-radius:12px;background:transparent;color:#fff;font-size:22px;cursor:pointer}

/* ---------- B01 hero panel ---------- */
.hero-wrap{padding:8px}
.hero{position:relative;overflow:hidden;background:#000;color:#fff;border-radius:24px;min-height:calc((100vh - 16px) * .77);min-height:calc((100svh - 16px) * .77);padding:0;display:flex;flex-direction:column}
.hero .gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:88px 88px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%)}
.hero .stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 47% 22%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 26%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 8%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 35% 33%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 56% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 34%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 40%,#fff 50%,transparent 51%);opacity:.55;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.25}}
.hero .sq{position:absolute;width:88px;height:88px;background:rgba(var(--acc-rgb),.07);border:1px solid rgba(var(--acc-rgb),.12)}
.hero .horizon{position:absolute;left:calc(50% - min(85vw,1300px));top:64%;width:170vw;height:170vw;max-width:2600px;max-height:2600px;border-radius:50%;background:#000;box-shadow:0 -1px 0 rgba(var(--hl-rgb),.95),0 -12px 40px rgba(var(--acc-rgb),.55),0 -60px 140px rgba(var(--glow-rgb),.35),0 -160px 260px rgba(var(--glow-rgb),.18)}
.hero .bigword{position:absolute;left:0;right:0;bottom:-.2em;text-align:center;font-weight:600;letter-spacing:-.06em;line-height:1;font-size:clamp(120px,24vw,380px);color:rgba(255,255,255,.055);pointer-events:none;user-select:none;white-space:nowrap}
.hero-inner{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:120px 0 110px}
.hero-grid{display:grid;grid-template-columns:1.75fr .65fr;gap:48px;align-items:end;width:100%}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero-inner{padding:110px 0 120px}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:500;margin-bottom:24px}
.pill b{background:rgba(255,255,255,.1);border-radius:999px;padding:3px 9px;font-weight:500}
.hero h1{letter-spacing:-.045em;font-size:clamp(40px,4.3vw,62px)}
.hero .lead{font-size:18px;line-height:1.5;color:#c9c9cf;margin-bottom:24px;max-width:380px;letter-spacing:-.01em}
.hero .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- stack strip ---------- */
.strip{padding:72px 0 0;text-align:center}
.strip .label{margin-bottom:28px}
.strip .marquee{max-width:1040px;margin:0 auto}
.strip .marquee .tr{gap:64px;padding-right:64px;animation-duration:40s}
.stack span{font-size:22px;font-weight:600;letter-spacing:-.04em;color:#a0a0a4}

/* ---------- B02 stats bento ---------- */
.stats{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:var(--gut)}
.stats .big{grid-row:span 2}
.stats .wide{grid-column:2/4}
@media (max-width:960px){.stats{grid-template-columns:1fr 1fr}.stats .big{grid-row:auto}.stats .wide{grid-column:1/-1}}
@media (max-width:640px){.stats{grid-template-columns:1fr}}
.tiles-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.roll{display:flex;font-size:clamp(72px,8vw,112px);font-weight:500;letter-spacing:-.06em;line-height:1;height:1em;overflow:hidden;position:relative;z-index:1}
.roll .col{display:flex;flex-direction:column;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.roll .col span{height:1em;line-height:1}
.statnum{position:relative;z-index:1}
.statnum small{display:block;margin-top:12px;color:var(--ink-2);font-size:15px}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.mini-stats div{padding:16px;border-radius:14px;background:var(--bg)}
.mini-stats b{display:block;font-size:30px;font-weight:600;letter-spacing:-.05em}
.mini-stats span{font-size:13px;color:var(--ink-2)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .tr{display:inline-flex;gap:10px;white-space:nowrap;animation:tick 30s linear infinite;padding:4px 10px 4px 0}
.marquee:hover .tr{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.chip-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(0,0,0,.04);font-size:13px;font-weight:500}
.chip-pill i{width:14px;height:14px;border-radius:4px;background:var(--amber);flex:none}
.quote-card blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2);letter-spacing:-.01em;position:relative;z-index:1}
.quote-card cite{display:block;margin-top:14px;font-style:normal;font-size:14px;position:relative;z-index:1}
.tag-mono{font:600 13px var(--f-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;position:relative;z-index:1}
.warm{position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(var(--acc-rgb),.22),transparent 45%);pointer-events:none}

/* ---------- B03 about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about .big-text{font-size:clamp(24px,2.6vw,34px);line-height:1.25;letter-spacing:-.035em;font-weight:500;color:var(--ink-h)}
.about .big-text em{font-style:normal;color:var(--ink-3)}
.about .big-text+.big-text{margin-top:20px}
.facts{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);padding:8px 22px;box-shadow:0 0 0 1px var(--outline)}
.fact{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--bg-2);font-size:15px}
.fact:last-child{border-bottom:0}
.fact span{color:var(--ink-3)}
.fact b{font-weight:500;text-align:right}
/* B03 About: "ozumni.config" code card (replaced the label/value facts on 2026-10-22) */
.facts.config{background:var(--night);color:#e6ebf6;padding:0;overflow:hidden;box-shadow:0 0 0 1px var(--line-dark),var(--shadow)}
.config .cfg-bar{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line-dark);font:500 12px var(--f-mono);color:#8c97b5}
.config .dots{display:flex;gap:6px}
.config .dots i{width:10px;height:10px;border-radius:50%;background:#2b3a66}
.config .st{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#5ee08f}
.config .st::before{content:"";width:6px;height:6px;border-radius:50%;background:#5ee08f}
.config ol{list-style:none;margin:0;padding:14px 20px 18px;counter-reset:ln;font:500 14px/1.3 var(--f-mono)}
.config li{counter-increment:ln;display:grid;grid-template-columns:22px 128px 1fr;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.config li:last-child{border-bottom:0}
.config li::before{content:counter(ln);color:#46537a;font-size:12px}
.config .k{color:#7aa7ff}
.config .s{color:#eef2fb}
.config .b{color:#5ee08f}
.config .c{color:#8c97b5}
.config .cur{display:inline-block;width:8px;height:1.05em;background:#7aa7ff;vertical-align:-.2em;line-height:0;margin-left:6px;animation:cfg-blink 1.1s steps(1) infinite}
@keyframes cfg-blink{50%{opacity:0}}
/* typing in (motion.js): the untyped tail keeps its space, the caret sits right after the typed text and stays solid while typing */
.config .rest{visibility:hidden}
.config .cur.cfg-typing{animation:none;margin-left:1px}
@media (prefers-reduced-motion:reduce){.config .cur{animation:none}}
@media (max-width:560px){.config li{grid-template-columns:18px 96px 1fr;font-size:12.5px}}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:28px}}

/* ---------- B04 focus bento v2: widget infographics (sample data, no real product UI) ----------
   Radius rule: cards 20px · widgets 16px · chips/segments full pill. One accent: amber. Green only for "up" deltas. */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(340px,auto);gap:var(--gut)}
.bento .tall{grid-row:span 2}
.bento .wide{grid-column:span 2}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.bento .tall{grid-row:auto}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento .wide{grid-column:auto}}
.bento .card{padding:22px;gap:6px}
.bento .card:not(.black):not(.tint){background:linear-gradient(180deg,var(--bg-1),var(--card) 70%)}
.bento .card h3{font-size:17px;position:relative;z-index:1}
.bento .card p{font-size:14px;color:var(--ink-2);max-width:360px;position:relative;z-index:1}
.bento .card > h3 + p{min-height:calc(2 * 1.6em)}   /* captions keep two lines, so titles in one row sit on one line whatever the text length */
.bento .black p{color:#9a9aa3}
.bento .tint{background:radial-gradient(130% 90% at 50% 0%,color-mix(in oklab,var(--amber) 42%,#fff) 0%,color-mix(in oklab,var(--amber) 17%,#fff) 40%,var(--card) 100%)}
.viz{position:relative;flex:1;min-height:180px;margin:2px 0 18px;display:grid;place-items:center}
.num{font-variant-numeric:tabular-nums}
.dots-bg{position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px) 0 0/14px 14px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}

/* shared widget parts */
.wg{position:relative;z-index:1;width:100%;max-width:360px;background:var(--glass);border-radius:16px;padding:14px 16px;box-shadow:0 0 0 1px var(--outline),inset 0 1px 0 var(--hi),0 18px 40px -18px rgba(70,50,0,.22);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
.wg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg-2);font:500 11px/1 var(--f-body);color:var(--ink-3);white-space:nowrap}
.seg span{padding:5px 9px;border-radius:999px}
.seg .on{background:var(--card-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--outline)}
.seg.dark{background:#141414;color:#76767e;box-shadow:inset 0 0 0 1px #222}
.seg.dark .on{background:#2a2a2a;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.kpi{display:flex;align-items:center;gap:10px;margin:12px 0}
.kpi b{font-size:40px;font-weight:600;letter-spacing:-.045em;line-height:1}
.delta{display:inline-flex;align-items:center;gap:2px;font:600 11px/1 var(--f-mono);padding:4px 7px;border-radius:999px;background:#e3f4e8;color:#12703a;white-space:nowrap}
.delta:before{content:"↑";font:600 11px/1 var(--f-body)}
.black .delta{background:rgba(74,222,128,.13);color:#5ee08f}
.meter{height:10px;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--bg-2) 0 4px,var(--bg-1) 4px 8px);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;transform-origin:left;transform:scaleX(var(--v,.7));background:linear-gradient(90deg,var(--acc-tint),var(--amber) 55%,var(--glow))}
.wg-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--ink-3)}
.wg-foot b{color:var(--ink);font-weight:600}

/* AI assistant (dark) */
.wg-dark{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1)}
.wg-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ai-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.ai-badge i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--on-acc);background:linear-gradient(135deg,var(--acc-tint),var(--amber) 50%,var(--glow));box-shadow:0 6px 18px -4px rgba(var(--glow-rgb),.55)}
.chat{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:10px}
.bub{max-width:86%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.bub.u{align-self:flex-end;background:#1f1f1f;color:#ddd;border-bottom-right-radius:4px}
.bub.a{align-self:flex-start;background:#fff;color:#111;border-bottom-left-radius:4px}
.bub.a b{display:block;font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:4px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#1f1f1f;border-radius:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:#888;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.stat-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px;padding:12px 14px;border-radius:12px;background:#0f0f0f;box-shadow:inset 0 0 0 1px #222}
.stat-row small{display:block;font-size:11px;color:#77777f;margin-bottom:4px}
.stat-row b{font-size:22px;font-weight:600;letter-spacing:-.04em;color:#fff}
.composer{display:flex;align-items:center;justify-content:space-between;padding:7px 7px 7px 14px;border-radius:12px;background:#141414;box-shadow:inset 0 0 0 1px #262626;font-size:13px;color:#6f6f78}
.composer b{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--amber);color:#000;font-size:14px}

/* productivity */
.w-prod .viz{place-items:start center;padding-bottom:30px}
/* B04 tall AI card: the assistant panel fills the card height at any width; spare height goes into the chat, which sits on the composer like a real chat */
.w-ai .viz{place-items:stretch}
.w-ai .wg-dark{height:100%}
.w-ai .chat{flex:1;justify-content:flex-end;min-height:0;overflow:hidden}
.w-ai .chat .extra.off{display:none}   /* the opening message shows only when the chat has room for it (index.html script) */
.toast{position:absolute;z-index:2;right:2px;bottom:0;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:14px;background:#0d0d0d;color:#fff;font-size:12.5px;font-weight:500;box-shadow:0 14px 30px -10px rgba(0,0,0,.45)}
.toast small{display:block;font:500 10px var(--f-mono);color:#8a8a92;letter-spacing:.04em}
.avs{display:flex}
.avs i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 9px/1 var(--f-body);font-style:normal;color:var(--on-acc);background:var(--amber);box-shadow:0 0 0 2px #0d0d0d}
.avs i+i{margin-left:-7px}
.avs i:nth-child(2){background:color-mix(in oklab,var(--amber) 50%,var(--glow))}.avs i:nth-child(3){background:#2a2a2a;color:#ddd}

/* health gauge */
.gauge{position:relative;width:196px;height:196px}
.gauge>i{position:absolute;left:50%;top:0;width:5px;height:22px;margin-left:-2.5px;border-radius:3px;background:#232323;transform-origin:50% 98px;transform:rotate(var(--a))}
.gauge>i.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:color-mix(in oklab,var(--glow) calc((1 - var(--t)) * 100%),var(--amber));box-shadow:0 0 10px rgba(var(--glow-rgb),.35)}
.gauge .ctr{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:4px}
.gauge .ctr b{font-size:36px;font-weight:600;letter-spacing:-.045em;line-height:1;color:#fff}
.gauge .ctr small{font-size:12px;color:#8a8a92}

/* marketing: sparkline + live feed over a dot map */
.mapdots{position:absolute;inset:0;background:radial-gradient(var(--line-2) 1.1px,transparent 1.4px) 0 0/13px 13px;-webkit-mask-image:radial-gradient(ellipse 55% 60% at 72% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 55% 60% at 72% 40%,#000 30%,transparent 75%);opacity:.9}
.viz.mkt{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;place-items:center stretch;width:100%}
.mkt .wg{max-width:none}
.spark{display:block;width:100%;height:56px;overflow:visible}
.spark .line{fill:none;stroke:var(--glow);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.feed li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;border-radius:999px;background:var(--glass);box-shadow:0 0 0 1px var(--outline),0 10px 24px -12px rgba(70,50,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.feed li:nth-child(2){margin-left:28px}.feed li:nth-child(3){margin-left:12px}
.feed div{flex:1;min-width:0;line-height:1.2}
.feed b{display:block;font-size:13px;font-weight:600}
.feed small{font-size:11.5px;color:var(--ink-3)}
.feed em{font:600 12px/1 var(--f-mono);font-style:normal;padding:7px 10px;border-radius:999px;background:#0d0d0d;color:#fff}
.mono-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 11px/1 var(--f-body);color:var(--on-acc);background:var(--amber)}
.mono-av.b{background:color-mix(in oklab,var(--amber) 50%,var(--glow))}.mono-av.c{background:#1f1f1f;color:#fff}
@media (max-width:760px){.viz.mkt{grid-template-columns:1fr}.feed li:nth-child(n){margin-left:0}}

/* data & analytics: bar chart */
.viz.data{display:flex;flex-direction:column;align-items:stretch;gap:18px;width:100%;place-self:stretch}
.data-top{display:flex;align-items:flex-end;gap:12px}
.data-top b{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:.9}
.data-top small{font-size:12px;line-height:1.3;color:var(--acc-ink)}
.chart{flex:1;min-height:190px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
.chart .col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.chart i{display:block;width:100%;height:calc(var(--h) * (100% - 40px));border-radius:10px 10px 6px 6px;transform-origin:bottom;background:linear-gradient(180deg,var(--bar-top),rgba(var(--hl-rgb),.75));box-shadow:inset 0 0 0 1px rgba(190,140,30,.16),inset 0 1px 0 var(--hi)}
.chart .hot i{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px),linear-gradient(180deg,var(--acc-tint),var(--amber) 55%,var(--glow));box-shadow:0 10px 24px -8px rgba(var(--glow-rgb),.6)}
.chart em{font:600 10px/1 var(--f-mono);font-style:normal;padding:4px 5px;border-radius:999px;background:var(--card-2);color:#12703a;box-shadow:0 0 0 1px var(--outline);white-space:nowrap}
.chart .dn em{color:var(--ink-3)}
.chart .hot em{background:#0d0d0d;color:#fff}
.chart span{font-size:11px;color:color-mix(in oklab,var(--acc-ink) 65%,#fff)}

/* education: ring + heatmap */
.viz.edu{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px;width:100%;align-items:center}
.edu .wg{max-width:none}
.ringwg{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:104px;height:104px;flex:none}
/* progress ring as SVG: starts at the bottom centre (6 o'clock) and runs clockwise, round caps, smooth edge, a faint track under it; --v is the percent (0-100) */
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(90deg);overflow:visible}
.ring circle{fill:none;stroke-width:11}
.ring .trk{stroke:rgba(127,140,170,.18)}
.ring .arc{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
html:not(.js) .ring .arc{stroke-dashoffset:calc(100 - var(--v))}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;font-size:15px;font-weight:600;color:var(--ink-2)}
.ring span b{font-size:28px;letter-spacing:-.04em;color:var(--ink)}
.ring-txt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.ring-txt small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.steps-mini{display:flex;gap:5px;margin-top:12px}
.steps-mini i{width:22px;height:6px;border-radius:999px;background:var(--bg-2)}
.steps-mini i.d{background:var(--solid)}.steps-mini i.c{background:var(--amber)}
.pill-dark{font:600 11px/1 var(--f-mono);padding:5px 9px;border-radius:999px;background:#0d0d0d;color:#fff}
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:14px}
.heat i,.legend i{display:block;aspect-ratio:1;border-radius:4px;background:var(--bg-2)}
.heat .l1,.legend .l1{background:color-mix(in oklab,var(--amber) 35%,#fff)}.heat .l2,.legend .l2{background:var(--acc-tint)}.heat .l3,.legend .l3{background:var(--amber)}.heat .l4,.legend .l4{background:var(--glow)}
.legend{display:inline-flex;align-items:center;gap:4px}
.legend i{width:10px;border-radius:3px}
@media (max-width:760px){.viz.edu{grid-template-columns:1fr}}
/* B04 education: lesson player across the full width under the ring and the streak */
.playwg{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.pl-thumb{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(135deg,var(--amber),var(--glow));box-shadow:0 6px 18px -6px rgba(var(--acc-rgb),.6)}
.pl-thumb i{width:4px;height:14px;border-radius:2px;background:#fff}
.pl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;color:var(--ink-3)}
.pl-time{font:500 11px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-time b{color:var(--ink);font-weight:600}
.pl-title{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bar{height:5px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.pl-bar i{display:block;height:100%;border-radius:inherit;transform-origin:left;transform:scaleX(.4);background:linear-gradient(90deg,var(--amber),var(--glow))}
.pl-speed{flex:none}
.pl-speed span{cursor:pointer;transition:background-color .2s ease,color .2s ease}
@media (max-width:520px){.pl-speed{display:none}}

/* ---------- B05 approach ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);list-style:none;padding:0;margin:0 0 var(--gut)}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 1px var(--outline)}
.step .n{font:500 12px var(--f-mono);color:var(--ink-3)}
.step p{font-size:14px;color:var(--ink-2)}
.cmp{background:var(--card);border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--outline)}
.cmp-row{display:grid;grid-template-columns:240px 1fr 1fr;align-items:stretch;border-bottom:1px solid var(--bg-2);font-size:15px}
.cmp-row:last-child{border-bottom:0}
.cmp-row>div{padding:20px 24px;display:flex;align-items:center;gap:12px}
.cmp-row>div:first-child{background:var(--bg-1)}
.cmp-head{font-weight:600}
.cmp-head>div:nth-child(3){color:var(--ink-3);font-weight:500}
.ok,.no{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;font-style:normal}
.ok{background:var(--ok)}.ok:after{content:"✓"}
.no{background:var(--warn);color:#3a2a00}.no:after{content:"!"}
.cmp .ri{width:18px;text-align:center;color:var(--ink-2)}
@media (max-width:760px){.cmp-row{grid-template-columns:1fr}.cmp-row>div{padding:10px 20px}.cmp-row>div:first-child{padding:14px 20px;font-weight:600}.cmp-head{display:none}.cmp-row>div:nth-child(2):before{content:"Ozumni";font:500 11px var(--f-mono);color:var(--ink-3);width:64px;flex:none}.cmp-row>div:nth-child(3):before{content:"Typical";font:500 11px var(--f-mono);color:var(--ink-3);width:64px;flex:none}}

/* ---------- dark panels ---------- */
.panel-wrap{padding:0 8px}
.panel{position:relative;overflow:hidden;background:#000;color:#fff;border-radius:24px;padding:110px 0}
.panel h2{color:#fff}
.panel .sec-head p{color:#9a9aa3}
.panel .ghost{color:rgba(255,255,255,.05)}
.panel .gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:88px 88px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%)}
.panel .container{position:relative;z-index:1}
.tech-bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:minmax(200px,auto);gap:var(--gut)}
.tech-bento .tall{grid-row:span 2}
@media (max-width:960px){.tech-bento{grid-template-columns:1fr 1fr}.tech-bento .tall{grid-row:auto;grid-column:1/-1}}
@media (max-width:640px){.tech-bento{grid-template-columns:1fr}}
.cap{position:relative;overflow:hidden;background:var(--night-2);border:1px solid var(--line-dark);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s;height:100%}
.cap:hover{border-color:#3a3a3a}
.cap .code{font:500 11px var(--f-mono);color:var(--amber);letter-spacing:.08em}
.cap p{color:#9a9aa3;font-size:14px}
.chipviz{position:relative;flex:1;min-height:220px;display:grid;place-items:center;margin:8px 0}
.chipviz .wire{position:absolute;height:1px;left:4%;right:4%;background:linear-gradient(90deg,transparent,rgba(var(--glow-rgb),.7),transparent)}
.chipviz .wire.v{width:1px;height:auto;top:4%;bottom:4%;left:50%;right:auto;background:linear-gradient(180deg,transparent,rgba(var(--glow-rgb),.7),transparent)}
.chipviz .core{position:relative;width:120px;height:120px;border-radius:26px;background:linear-gradient(145deg,color-mix(in oklab,var(--amber) 70%,var(--glow)),var(--glow));box-shadow:0 0 70px rgba(var(--glow-rgb),.45),inset 0 2px 0 rgba(255,255,255,.45);display:grid;place-items:center;color:var(--on-acc);font:600 26px var(--f-body);letter-spacing:-.04em}
.chipviz .core:after{content:"";position:absolute;inset:-16px;border-radius:36px;border:1px dashed rgba(var(--glow-rgb),.45)}
/* B06 multi-agent card: copy on the left, orchestrator + agents diagram on the right */
.tech-bento .agents{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center}
.agents-copy{display:flex;flex-direction:column;gap:8px}
.agent-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.agent-tags li{font:500 11px/1 var(--f-mono);padding:6px 9px;border-radius:999px;border:1px solid var(--line-dark);color:#c9cdd8}
/* the diagram uses the AI engine card's look: the orchestrator is the glowing core, agents are chips on the same pulsing wires (.chipviz) */
.agentnet{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"a core b" "c core d";column-gap:24px;min-height:240px;margin:0}
.agentnet .core{grid-area:core;width:124px;height:124px;font:600 13px/1.2 var(--f-mono);letter-spacing:0;text-align:center}
.agentnet .node{position:relative;z-index:1;font:500 13px/1 var(--f-mono);color:#d7dbe8;white-space:nowrap;padding:12px 16px;border-radius:12px;background:var(--night-3);border:1px solid rgba(var(--glow-rgb),.45);box-shadow:0 0 28px rgba(var(--glow-rgb),.18),inset 0 1px 0 rgba(255,255,255,.06)}
.agentnet .n1{grid-area:a}.agentnet .n2{grid-area:b}.agentnet .n3{grid-area:c}.agentnet .n4{grid-area:d}
@media (max-width:960px){.tech-bento .agents{grid-template-columns:1fr}}
@media (max-width:640px){.agentnet{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:"a b" "core core" "c d";row-gap:40px;column-gap:12px;padding:12px 0}.agentnet .wire:not(.v){display:none}.agentnet .node{font-size:12px;padding:10px 12px}}
.techrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--gut)}
.techrow span{padding:9px 14px;border-radius:10px;border:1px solid var(--line-dark);background:var(--night-2);font:500 13px var(--f-mono);color:#bdbdc5}
/* B06 tech row as a slow right-to-left marquee (reuses .marquee + @keyframes tick); reduced motion gets the plain wrapped list */
.techrow.marquee{display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.techrow.marquee .tr{animation-duration:70s}
@media (prefers-reduced-motion:reduce){.techrow.marquee{-webkit-mask-image:none;mask-image:none}.techrow.marquee .tr{display:flex;flex-wrap:wrap;white-space:normal}.techrow.marquee [aria-hidden="true"]{display:none}}

/* ---------- B07 values ---------- */
.value{background:var(--card);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px;height:100%;box-shadow:0 0 0 1px var(--outline)}
.value .vn{font:500 12px var(--f-mono);color:var(--ink-3)}
.value b{font-size:20px;font-weight:600;letter-spacing:-.03em}
.value p{font-size:14px;color:var(--ink-2)}

/* ---------- B08 founder desk ---------- */
.desk{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
@media (max-width:900px){.desk{grid-template-columns:1fr;gap:28px}}
.desk .photo{aspect-ratio:1/1;border-radius:18px;background:radial-gradient(circle at 50% 36%,#333 0 18%,transparent 19%),radial-gradient(ellipse 42% 34% at 50% 100%,#333 0 98%,transparent 100%),linear-gradient(160deg,#1c1c1c,#0d0d0d);display:grid;place-items:end start;padding:14px;font:500 12px var(--f-mono);color:#777;border:1px solid var(--line-dark)}
.letter{font-size:18px;line-height:1.6;color:#e6e6ea;letter-spacing:-.01em}
.letter p+p{margin-top:16px}
.letter u{text-decoration-color:#666;text-underline-offset:3px}
.socials{display:flex;gap:16px;justify-content:flex-end;margin-bottom:22px;font:500 13px var(--f-mono)}
.socials a{color:#888;text-decoration:none}.socials a:hover{color:#fff}
.team-row{margin-top:40px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.team-row .tcard{min-width:0}
@media (max-width:960px){.team-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-row{grid-template-columns:1fr}}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.tcard{display:inline-flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:12px;background:#0d0d0d;border:1px solid var(--line-dark);min-width:240px}
.tcard .who{display:flex;align-items:center;gap:8px;font-size:13px;color:#9a9aa3}
.tcard .who i{width:22px;height:22px;border-radius:50%;background:#2a2a2a;flex:none}
.tcard b{font-size:14px;font-weight:600;color:#fff}

/* ---------- B09 audiences ---------- */
.aud{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:24px;text-decoration:none;min-height:300px;height:100%;transition:transform .2s;box-shadow:0 0 0 1px var(--outline)}
.aud:hover{transform:translateY(-4px)}
.aud .k{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.aud h3{font-size:30px;letter-spacing:-.045em;line-height:1.05}
.aud p{flex:1;opacity:.75;max-width:300px}
.aud .go{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;position:relative;z-index:1}
.aud .go .bi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--amber);color:#000}
.aud-1{background:#000;color:#fff}
.aud-2{background:var(--card);color:var(--ink)}
.aud-3{background:var(--amber);color:var(--on-acc)}
.aud-3 .go .bi{background:#000;color:var(--amber)}
/* B09 fourth entry point (clients): soft glow-to-accent tint, works on light and dark themes */
.aud-4{background:linear-gradient(155deg,rgba(var(--glow-rgb),.30),rgba(var(--acc-rgb),.14) 70%),var(--card);color:var(--ink)}
.aud .orb{position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;border:1px solid currentColor;opacity:.14}
.aud .orb:after{content:"";position:absolute;inset:40px;border-radius:50%;border:1px solid currentColor}

/* ---------- B10 partners ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
@media (max-width:420px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--card);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:30px;min-height:150px;font-weight:600;letter-spacing:-.02em;box-shadow:0 0 0 1px var(--outline)}
.tile i{font-style:normal;width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center}
.checks{list-style:none;padding:0;margin:24px 0 32px;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:12px;color:var(--ink-2)}
.checks li:before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:2px}
.checks b{color:var(--ink)}
.mail{display:inline-block;margin-left:14px;font-size:14px;color:var(--ink-2)}
/* the button clips (overflow:hidden), so its baseline is its bottom edge: centre both instead, the link then sits on the button label's line */
.btn:has(+ .mail),.btn + .mail{vertical-align:middle}
@media (max-width:520px){.mail{display:block;margin:12px 0 0}}

/* ---------- B11 investors ---------- */
.inv{position:relative;overflow:hidden;background:#000;color:#fff;border-radius:24px;padding:56px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.inv .horizon{position:absolute;left:50%;top:80%;width:180%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#000;box-shadow:0 -1px 0 rgba(var(--hl-rgb),.9),0 -14px 40px rgba(var(--glow-rgb),.45),0 -70px 140px rgba(var(--glow-rgb),.25);z-index:0}
.inv>*:not(.horizon){position:relative;z-index:1}
.inv h2{color:#fff}
.inv .muted,.inv .mail{color:#a8a8b0}
.inv-note{margin:22px 0 0;font-size:12px;color:#7d859c}
/* B11 right side: two ways to invest (company / single product); icons reuse the ring + satellite mark */
.inv-ways{display:grid;gap:12px}
.way{display:grid;grid-template-columns:48px 1fr;gap:8px 18px;align-items:start;padding:22px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.way:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08)}
.way-ic{grid-row:1/span 5;width:48px;height:48px}
/* product tiles: .on = lit, .off = outline only, .hot = the one product (CTA pink with a glow); .star = the Ozumni sparkle from the logo */
.way-ic{overflow:visible}
.way-ic .t.on{fill:rgba(255,255,255,.9)}
.way-ic .t.off{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.6}
.way-ic .t.hot{fill:var(--cta,#ff4d6d);filter:drop-shadow(0 0 6px rgba(255,77,109,.85))}
.way-ic .star{fill:var(--cta,#ff4d6d);stroke:#0b1630;stroke-width:1.6;paint-order:stroke;filter:drop-shadow(0 0 5px rgba(255,77,109,.7))}
.way-k{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#a8a8b0}
.way h3{font-size:22px;letter-spacing:-.03em;line-height:1.15;color:#fff}
.way p{margin:0;font-size:14px;line-height:1.55;color:#b6bdd0}
.way-tags{display:flex;flex-wrap:wrap;gap:6px}
.way-tags i{font:500 11px/1 var(--f-mono);font-style:normal;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:#d3d9ea}
.way-go{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-size:14px;font-weight:500}
.way-go i{font-style:normal;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--cta,#ff4d6d);color:#fff;transition:transform .2s var(--ease-out)}
.way:hover .way-go i{transform:translateX(3px)}
@media (max-width:520px){.way{grid-template-columns:1fr}.way-ic{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.way-go i{transition:none}}
@media (max-width:860px){.inv{grid-template-columns:1fr;padding:28px}}

/* ---------- B12 careers ---------- */
.perks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.perk{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--card);font-size:14px;font-weight:500;box-shadow:0 0 0 1px var(--outline)}
.perk i{width:22px;height:22px;border-radius:6px;background:var(--amber);font-style:normal;display:grid;place-items:center;font-size:12px}
.jobs{background:var(--card);border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--outline)}
.job{display:grid;grid-template-columns:1fr 150px 110px 110px 36px;gap:16px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--bg-2);text-decoration:none;transition:background .15s}
.job:last-child{border-bottom:0}
.job:hover{background:var(--bg-1)}
.job b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.job span{font-size:13px;color:var(--ink-2)}
.job .arr{width:34px;height:34px;border-radius:9px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--outline);display:grid;place-items:center;color:var(--ink);font-size:17px;font-weight:600;transition:background-color .2s ease,color .2s ease}
.job .arr .gl{color:inherit;font-size:inherit}
.job:hover .arr,.job:focus-visible .arr{background:var(--amber);color:var(--on-acc);box-shadow:0 6px 18px -6px rgba(var(--acc-rgb),.6)}
@media (max-width:760px){.job{grid-template-columns:1fr auto;gap:4px 12px}.job b{grid-column:1/-1}.job .arr{display:none}}
.work-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.hiring{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px;font-size:14px;color:var(--ink-2)}
.hiring b{background:var(--card);border-radius:999px;padding:6px 12px;color:var(--ink);font-weight:500;box-shadow:0 0 0 1px var(--line)}

/* ---------- B13 press ---------- */
.news{text-decoration:none;transition:transform .2s,box-shadow .2s}
.news:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news time{font:500 11px var(--f-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.news h3{font-size:19px}
.press-box{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gut);margin-top:var(--gut)}
@media (max-width:860px){.press-box{grid-template-columns:1fr}}
.boiler p{font-size:15px;color:var(--ink-2)}

/* ---------- B14 faq ---------- */
.faq-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:28px}}
.faq-cta{margin-top:32px;background:var(--card);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1px var(--outline),0 12px 30px rgba(0,0,0,.05)}
.faq-cta h3{font-size:22px;letter-spacing:-.03em}
.faq-cta .btn{align-self:flex-start;margin-top:6px}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-item h3{margin:0}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:22px 40px 22px 0;font:500 16px/1.4 var(--f-body);letter-spacing:-.01em;color:var(--ink);cursor:pointer;position:relative}
.faq-q:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq-q[aria-expanded=true]:after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 40px 22px 0;color:var(--ink-2);font-size:15px}
.faq-a[hidden]{display:none}

/* ---------- B15/B16 footer ---------- */
footer{position:relative;background:#000;color:#cfcfd4;padding:8px 8px 0;overflow:hidden}
footer .glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 10% 70%,rgba(255,255,255,.08),transparent 70%);pointer-events:none}
.cta-card{position:relative;overflow:hidden;max-width:calc(var(--max) - 48px);margin:24px auto 0;border-radius:28px;background:linear-gradient(180deg,#1b1b1b,#0f0f0f);border:1px solid #232323;padding:48px 48px 150px}
@media (max-width:640px){.cta-card{padding:28px 20px 110px;margin:16px 0 0}}
.cta-card h2{color:#fff;font-size:clamp(34px,4.4vw,58px);max-width:640px;position:relative;z-index:1}
.cta-card>p{color:#9a9aa3;margin-top:14px;max-width:520px;position:relative;z-index:1}
.cta-card .arrow{position:absolute;right:36px;top:44px;z-index:2;width:64px;height:44px;border-radius:12px;background:#fff;color:#000;display:grid;place-items:center;font-size:22px;text-decoration:none;transition:transform .2s}
.cta-card .arrow:hover{transform:translateX(4px)}
@media (max-width:640px){.cta-card .arrow{position:relative;right:auto;top:auto;margin-top:18px}}
.cta-card .bigword{position:absolute;left:28px;right:0;bottom:-.26em;font-weight:600;letter-spacing:-.06em;line-height:1;font-size:clamp(110px,17vw,250px);color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;z-index:0}
.topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;position:relative;z-index:1}
.topic-chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid #333;color:#ddd;text-decoration:none;font-size:14px;font-weight:500;background:rgba(255,255,255,.03)}
.topic-chips a:hover{border-color:var(--amber);color:#fff}
.topic-chips a[aria-current="page"]{border-color:var(--amber);color:#fff}   /* inner pages: the chip of the page you are on */
.mails{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px;position:relative;z-index:1}
@media (max-width:960px){.mails{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.mails{grid-template-columns:1fr}}
.mails div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid #262626;background:rgba(0,0,0,.45);font-size:13px;min-width:0}
.mails span{font:500 10px var(--f-mono);letter-spacing:.1em;color:#777;text-transform:uppercase}
.mails a{color:#fff;text-decoration:none;font-weight:500;overflow-wrap:anywhere}
.mails a:hover{color:var(--amber)}
.foot{position:relative;max-width:var(--max);margin:0 auto;padding:72px 24px 28px}
@media (max-width:640px){.foot{padding:56px 8px 24px}}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h3,.foot h4{font-size:13px;font-weight:500;color:#777;margin-bottom:16px;letter-spacing:0}   /* h3: the footer follows the page's h2 sections */
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px}
.foot a{text-decoration:none;color:#e6e6ea}
.foot a:hover{color:var(--amber)}
.foot .logo{color:#fff}
.foot .logo .mark .sat{stroke:#000}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;font-size:13px;color:#777}
.legal ul{flex-direction:row;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.legal a{color:#9a9aa3}

/* =========================================================
   Forms (contact page)
   ========================================================= */
.form-wrap{background:var(--card);color:var(--ink);border-radius:24px;padding:32px;box-shadow:0 0 0 1px var(--outline),0 20px 50px rgba(0,0,0,.06)}
@media (max-width:640px){.form-wrap{padding:22px 16px;border-radius:20px}}
.progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;font:500 11px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.progress .bar{flex:1;height:4px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--amber);border-radius:999px;transition:width .3s}
.form-wrap h3{font-size:24px;letter-spacing:-.04em}
.field{margin-bottom:14px}
.field>label,.field>.lbl{display:block;font-weight:500;font-size:14px;margin-bottom:6px}
.opt{font-weight:400;color:var(--ink-3);font-size:12px}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);font:400 15px/1.4 var(--f-body);color:var(--ink);background:var(--bg-1);transition:border-color .15s,box-shadow .15s,background .15s}
.textarea{min-height:120px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);background:var(--card);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.35)}
.invalid .input,.invalid .textarea,.invalid .select{border-color:var(--err)}
.err{display:none;color:var(--err);font-size:13px;margin-top:6px}
.invalid .err{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2);background:var(--bg-1);transition:all .15s;user-select:none}
.chip input:checked+span{background:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.55);color:var(--ink);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12)}
.chip input:focus-visible+span{outline:2px solid var(--amber-2);outline-offset:2px}
.file{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;border:1px dashed var(--ink-3);border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;cursor:pointer;text-align:center;padding:10px;background:var(--bg-1)}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.check{display:flex;gap:10px;align-items:center;line-height:1.4;font-size:14px;color:var(--ink-2);margin-bottom:12px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--amber);flex:none;cursor:pointer}
.field>label.check{display:flex;font-weight:400;font-size:14px}
.form-actions{display:flex;gap:12px;margin-top:8px}
.form-actions .btn-primary{flex:1}
.form-note{font-size:12px;color:var(--ink-3);margin-top:14px;text-align:center}
.hp{position:absolute;left:-5000px}
.thanks{text-align:center;padding:12px 0}
.thanks .okc{width:64px;height:64px;border-radius:16px;background:var(--amber);color:#000;display:grid;place-items:center;font-size:28px;margin:0 auto 18px;box-shadow:0 10px 30px rgba(var(--acc-rgb),.45)}
.topics{display:grid;gap:10px}
.topic{position:relative;display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;cursor:pointer;background:var(--bg-1);transition:border-color .15s,background .15s,box-shadow .15s}
.topic:hover{border-color:var(--ink-3);background:var(--card)}
.topic input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topic .ti{width:40px;height:40px;border-radius:10px;background:#000;color:var(--amber);display:grid;place-items:center;font-size:16px;flex:none}
.topic b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.topic small{color:var(--ink-3);font-size:13px}
.topic .sla{margin-left:auto;font:500 10px/1.5 var(--f-mono);color:var(--ink-3);text-align:right;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.topic:has(input:checked){border-color:var(--ink);background:var(--card);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.45)}
.topic:has(input:focus-visible){outline:2px solid var(--amber-2);outline-offset:2px}
@media (max-width:520px){.topic .sla{display:none}}
.topic-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-bottom:16px;color:var(--ink-2);background:var(--bg-1);border-radius:12px;padding:6px 6px 6px 14px}
.topic-badge b{color:var(--ink)}
.topic-badge button{background:var(--card-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:500 13px var(--f-body);cursor:pointer;padding:6px 10px}
.hint{font-size:14px;padding:12px 14px;border-radius:12px;background:color-mix(in oklab,var(--amber) 15%,#fff);margin-bottom:16px}
legend{padding:0}
/* mobile fixes */
main,footer{overflow-x:clip}
@media (max-width:960px){.hero .horizon{top:82%}}
@media (max-width:480px){
  .nav-right .btn-sm>span:not(.bi){display:none}
  .nav-right .btn-sm{padding:0 5px;min-height:40px}
  .nav-right .btn-sm .bi{margin:0}
}

/* =========================================================
   Motion system v1
   Curves/durations: animate + apple-design skills.
   CSS = predetermined motion · motion.js = scroll-linked values & pointer springs.
   Hidden start states live under .js so the page works without JS.
   ========================================================= */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1)}

/* ---- press feedback: instant, on pointer-down ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform 160ms var(--ease-out),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.topic-chips a,.burger,.close,.chip span,.topic{transition:transform 160ms var(--ease-out),border-color .2s ease,color .2s ease,background-color .2s ease,box-shadow .2s ease}
.topic-chips a:active,.burger:active,.close:active,.chip:active span,.topic:active{transform:scale(.97)}
.job:active,.news:active,.aud:active{transform:scale(.985)}

/* ---- icon roll inside amber squares (built by motion.js) ---- */
.bi,.job .arr{position:relative;overflow:hidden}
.gl{position:absolute;left:0;top:0;width:100%;height:200%;display:flex;flex-direction:column;transform:translateY(-50%);transition:transform .45s var(--ease-out)}
.gl.x{flex-direction:row;width:200%;height:100%;transform:translateX(-50%)}
.gl i{flex:1;display:grid;place-items:center;font-style:normal}

@media (hover:hover) and (pointer:fine){
  :is(a,button):hover .gl,:is(a,button):focus-visible .gl{transform:none}
  /* light sweep across primary buttons */
  .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-120%)}
  .btn-primary:hover::after{transform:translateX(220%);transition:transform .9s var(--ease-out)}
  .btn-ghost:hover{background-color:#fff}
  .on-dark .btn-ghost:hover,.hero .btn-ghost:hover,.panel .btn-ghost:hover{background-color:rgba(255,255,255,.06);border-color:#555}
  .topic-chips a:hover{transform:translateY(-2px)}
  .job b{transition:transform .35s var(--ease-out)}
  .job:hover b{transform:translateX(4px)}
  .aud .orb{transition:transform 1s var(--ease-out)}
  .aud:hover .orb{transform:scale(1.18) rotate(20deg)}
}
@media (hover:none){.aud:hover,.news:hover,.cta-card .arrow:hover{transform:none}}

/* ---- pointer spotlight on cards (motion.js sets --mx/--my on the card itself) ---- */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(var(--spot-rgb),.07),transparent 60%)}
.spot:hover::after{opacity:1}
.card.black.spot::after,.cap.spot::after,.aud-1.spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(var(--spot-rgb),.09),transparent 60%)}
.aud-3.spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}

/* ---- scroll reveal (stagger delay --rd assigned per batch by motion.js) ---- */
.js .reveal{opacity:0;transform:translateY(28px);filter:blur(4px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--rd,0ms)}
.js .reveal.in{opacity:1;transform:none;filter:none}

/* ---- headline words rise out of a mask ---- */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wd>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--base,0ms) + var(--i,0) * 55ms)}
.words-in .wd>span{transform:none}

/* ---- header: hide on scroll down, return on scroll up; nav indicators ---- */
.header{transition:transform .5s var(--ease-out),background .3s ease,box-shadow .3s ease,color .3s ease}
.header.hide{transform:translateY(calc(-100% - 16px))}
.header nav{position:relative}
.nav-pill,.nav-line{position:absolute;pointer-events:none;left:-16px;right:-16px}
.nav-pill{top:-8px;bottom:-8px;border-radius:10px;background:currentColor;opacity:0;clip-path:inset(0 100% 0 0 round 10px);transition:clip-path .35s var(--ease-out),opacity .25s ease}
.nav-pill.on{opacity:.08}
.nav-line{bottom:-14px;height:2px;background:var(--amber);opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease-in-out),opacity .3s ease}
.nav-line.on{opacity:1}
.menu{position:relative;z-index:1}

/* ---- mobile menu grows out of the burger and returns into it ---- */
.js .mobile-menu{display:flex;visibility:hidden;clip-path:circle(0 at calc(100% - 41px) 42px);transition:clip-path .4s var(--ease-drawer),visibility 0s .4s}
.js .mobile-menu.open{visibility:visible;clip-path:circle(150% at calc(100% - 41px) 42px);transition:clip-path .6s var(--ease-drawer),visibility 0s}
.js .mobile-menu ul li{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s var(--ease-out)}
.js .mobile-menu.open ul li{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.mobile-menu.open ul li:nth-child(1){transition-delay:.12s}.mobile-menu.open ul li:nth-child(2){transition-delay:.16s}.mobile-menu.open ul li:nth-child(3){transition-delay:.2s}.mobile-menu.open ul li:nth-child(4){transition-delay:.24s}.mobile-menu.open ul li:nth-child(5){transition-delay:.28s}.mobile-menu.open ul li:nth-child(6){transition-delay:.32s}

/* =========== B01 hero: orchestrated intro =========== */
.hero .sky{position:absolute;inset:0}
.js .hero .sky{opacity:0;transition:opacity 1.8s ease}
.hero.is-in .sky{opacity:1}
.hero .grid-hi{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--acc-rgb),.3) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--acc-rgb),.3) 1px,transparent 1px);background-size:88px 88px;-webkit-mask-image:radial-gradient(240px circle at var(--x,50%) var(--y,40%),#000,transparent 75%);mask-image:radial-gradient(240px circle at var(--x,50%) var(--y,40%),#000,transparent 75%);opacity:0;transition:opacity .6s ease}
.hero .grid-hi.on{opacity:1}
.hero .cell{position:absolute;width:88px;height:88px;background:rgba(var(--acc-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.22);opacity:0}
.js .hero .horizon{opacity:0;translate:0 140px;transition:opacity 1.4s var(--ease-out) .1s,translate 2.2s var(--ease-out) .1s}
.hero.is-in .horizon{opacity:1;translate:0 0}
.hero .flare{position:absolute;left:50%;top:64%;width:1100px;height:360px;margin:-230px 0 0 -550px;pointer-events:none;background:radial-gradient(ellipse at 50% 64%,rgba(var(--acc-rgb),.3),rgba(var(--glow-rgb),.1) 45%,transparent 70%);mix-blend-mode:screen}
.js .hero .flare{opacity:0;scale:.5 .3;transition:opacity 1.6s ease .9s,scale 2.4s var(--ease-out) .7s}
.hero.is-in .flare{opacity:1;scale:1}
.hero .orbits{position:absolute;left:50%;top:64%;width:1600px;height:600px;margin:-300px 0 0 -800px;pointer-events:none;z-index:1;overflow:visible}
.js .hero .orbits{opacity:0;scale:.9;transition:opacity 2s ease 1.1s,scale 2.6s var(--ease-out) 1s}
.hero.is-in .orbits{opacity:1;scale:1}
.orbits ellipse{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.orbits ellipse.dash{stroke:rgba(var(--acc-rgb),.32);stroke-dasharray:2 7}
.js .hero .bigword{opacity:0;translate:0 22%;transition:opacity 1.6s ease .5s,translate 2.4s var(--ease-out) .45s}
.hero.is-in .bigword{opacity:1;translate:0 0}
.js .hero .pill,.js .hero .lead,.js .hero .ctas{opacity:0;translate:0 18px;filter:blur(6px);transition:opacity .9s var(--ease-out),translate 1s var(--ease-out),filter .9s var(--ease-out)}
.js .hero .pill{transition-delay:.2s}.js .hero .lead{transition-delay:.85s}.js .hero .ctas{transition-delay:1s}
.hero.is-in .pill,.hero.is-in .lead,.hero.is-in .ctas{opacity:1;translate:0 0;filter:none}
.hero-inner,.hero .sky>*,.hero .horizon,.hero .orbits,.hero .bigword{will-change:transform}
@media (max-width:960px){.hero .orbits,.hero .flare{top:82%}.js .hero .orbits,.hero.is-in .orbits{scale:.55}}

/* =========== B04 widget scenes (play once, when the card is .seen) =========== */
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
.js .chat>*,.js .stat-row,.js .composer{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.seen .chat>*,.seen .stat-row,.seen .composer{opacity:1;transform:none}
.seen .chat>:nth-child(1){transition-delay:.3s}.seen .chat>:nth-child(2){transition-delay:.9s}.seen .chat>:nth-child(3){transition-delay:1.5s}.seen .chat>:nth-child(4){transition-delay:2.1s}.seen .chat>:nth-child(5){transition-delay:2.6s}
.seen .stat-row{transition-delay:.6s}.seen .composer{transition-delay:.8s}
.bub.u{transform-origin:right bottom}.bub.a,.typing{transform-origin:left bottom}
.js .meter i{transform:scaleX(0);transition:transform 1.4s var(--ease-out) .4s}
.seen .meter i{transform:scaleX(var(--v,.7))}
.js .toast{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s var(--ease-out) 1s,transform .7s var(--ease-out) 1s}
.seen .toast{opacity:1;transform:none}
.js .gauge>i.on::after{opacity:0;transition:opacity .35s ease;transition-delay:calc(var(--k) * 30ms + .25s)}
.seen .gauge>i.on::after{opacity:1}
.js .spark .line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-in-out) .3s}
.seen .spark .line{stroke-dashoffset:0}
.js .spark .area{opacity:0;transition:opacity 1s ease 1.2s}
.seen .spark .area{opacity:1}
.js .feed li{opacity:0;transform:translateX(18px);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.seen .feed li{opacity:1;transform:none}
.seen .feed li:nth-child(1){transition-delay:.6s}.seen .feed li:nth-child(2){transition-delay:.75s}.seen .feed li:nth-child(3){transition-delay:.9s}
.js .chart i{transform:scaleY(0);transition:transform 1.1s var(--ease-out)}
.js .chart em{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s var(--ease-out)}
.seen .chart i{transform:none}.seen .chart em{opacity:1;transform:none}
.chart .col:nth-child(2) i{transition-delay:.06s}.chart .col:nth-child(3) i{transition-delay:.12s}.chart .col:nth-child(4) i{transition-delay:.18s}.chart .col:nth-child(5) i{transition-delay:.24s}.chart .col:nth-child(6) i{transition-delay:.3s}.chart .col:nth-child(7) i{transition-delay:.36s}
.seen .chart em{transition-delay:.9s}
.ring .arc{transition:stroke-dashoffset 1.8s var(--ease-out) .3s}
.seen .ring .arc{stroke-dashoffset:calc(100 - var(--v))}
.js .heat i{opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .5s var(--ease-out);transition-delay:calc(var(--k) * 18ms + .3s)}
.seen .heat i{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .chat>*,.js .stat-row,.js .composer,.js .toast,.js .feed li,.js .chart em,.js .heat i{transform:none}
  .js .chart i,.js .meter i{transition:none}
  .js .spark .line{transition:none;stroke-dashoffset:0}
}

/* =========== B05 comparison rows =========== */
.js .cmp .cmp-row{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.seen.cmp .cmp-row{opacity:1;transform:none}
.seen.cmp .cmp-row:nth-child(2){transition-delay:.08s}.seen.cmp .cmp-row:nth-child(3){transition-delay:.16s}.seen.cmp .cmp-row:nth-child(4){transition-delay:.24s}.seen.cmp .cmp-row:nth-child(5){transition-delay:.32s}.seen.cmp .cmp-row:nth-child(6){transition-delay:.4s}.seen.cmp .cmp-row:nth-child(7){transition-delay:.48s}
.js .cmp .ok{transform:scale(.4);transition:transform .5s var(--ease-out) .6s}
.seen.cmp .ok{transform:none}

/* =========== B06 AI core: data pulses along wires =========== */
.chipviz .wire{overflow:hidden}
.chipviz .wire::after{content:"";position:absolute;top:0;left:0;height:100%;width:18%;background:linear-gradient(90deg,transparent,rgb(var(--hl-rgb)),transparent);transform:translateX(-100%);animation:pulse-x 3.4s var(--ease-in-out) infinite}
.chipviz .wire:nth-child(2)::after{animation-delay:1.1s}.chipviz .wire:nth-child(3)::after{animation-delay:2.2s}
.chipviz .wire.v::after{width:100%;height:18%;background:linear-gradient(180deg,transparent,rgb(var(--hl-rgb)),transparent);transform:translateY(-100%);animation-name:pulse-y;animation-delay:.6s}
@keyframes pulse-x{to{transform:translateX(560%)}}
/* B06 tech row: now and then the same data pulse runs once around the outline of one chip (index.html picks a random visible chip) */
@property --zap{syntax:'<angle>';inherits:false;initial-value:0deg}
.techrow span{position:relative}
.techrow span.zap::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--zap),transparent 0 62%,rgba(var(--glow-rgb),.8) 80%,#fff 90%,rgba(var(--acc-rgb),.95) 96%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.8));animation:zap 1.7s var(--ease-in-out) forwards}
@keyframes zap{0%{--zap:0deg;opacity:0}12%{opacity:1}82%{opacity:1}100%{--zap:360deg;opacity:0}}
@keyframes pulse-y{to{transform:translateY(560%)}}
.chipviz .core:before{content:"";position:absolute;inset:-34px;border-radius:44px;background:radial-gradient(rgba(var(--glow-rgb),.45),transparent 70%);z-index:-1;animation:breathe 3.2s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.35}to{opacity:1}}

/* =========== B11 / B15: horizons and big words rise in =========== */
.js .inv .horizon{translate:0 80px;transition:translate 2s var(--ease-out) .2s}
.inv.seen .horizon{translate:0 0}
.js .cta-card .bigword{translate:0 30%;opacity:0;transition:translate 2s var(--ease-out) .2s,opacity 1.4s ease .2s}
.cta-card.seen .bigword{translate:0 0;opacity:1}
.js .topic-chips a{opacity:0;transform:translateY(10px)}
.cta-card.seen .topic-chips a{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),border-color .2s ease,color .2s ease}
.cta-card.seen .topic-chips a:nth-child(2){transition-delay:.06s}.cta-card.seen .topic-chips a:nth-child(3){transition-delay:.12s}.cta-card.seen .topic-chips a:nth-child(4){transition-delay:.18s}.cta-card.seen .topic-chips a:nth-child(5){transition-delay:.24s}.cta-card.seen .topic-chips a:nth-child(6){transition-delay:.3s}
.cta-card.seen .topic-chips a:hover,.cta-card.seen .topic-chips a:active{transition-delay:0s}
@media (hover:hover) and (pointer:fine){.cta-card.seen .topic-chips a:hover{transform:translateY(-2px)}}
.cta-card.seen .topic-chips a:active{transform:scale(.97)}

/* =========== contact form =========== */
.thanks .okc{animation:pop .6s var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-12deg)}}

/* =========== reduced motion: fewer, gentler — fades stay, movement goes =========== */
@media (prefers-reduced-motion:reduce){
  .js .reveal{transform:none;filter:none;transition:opacity .4s ease}
  .wd>span{transform:none;transition:none}
  .js .hero .horizon,.js .hero .bigword,.js .hero .orbits,.js .hero .flare,.js .hero .pill,.js .hero .lead,.js .hero .ctas{translate:none;scale:none;filter:none;transition:opacity .6s ease}
  .marquee .tr,.hero .stars,.typing i,.chipviz .wire::after,.chipviz .core:before,.sbar .caret,.hero .pill b:before{animation:none}
  .btn:active,.topic:active,.job:active,.news:active,.aud:active,.topic-chips a:active{transform:none}
  .gl{transition:none}
  .js .chat>*,.js .donut,.js .notif,.js .sres,.js .lesson,.js .streak,.js .cmp .cmp-row,.js .topic-chips a{transform:none}
  .js .mobile-menu{clip-path:none;opacity:0;transition:opacity .2s ease,visibility 0s .2s}
  .js .mobile-menu.open{opacity:1;clip-path:none;transition:opacity .2s ease,visibility 0s}
  .js .mobile-menu ul li{transform:none}
  .header{transition:background .3s ease,box-shadow .3s ease,color .3s ease}
  .thanks .okc{animation:none}
}
.progress .bar i{transform-origin:left}


/* ---- dark themes (dual-glow, after Dribbble refs) ---- */
:root[data-theme="color1"]{color-scheme:dark;--spot-rgb:var(--acc-rgb);
  --bg:#0d0a14;--bg-1:#141020;--bg-2:#1c1729;--line:#2a2438;--line-2:#3a3350;
  --card:rgba(255,255,255,.035);--card-2:rgba(255,255,255,.09);--glass:rgba(32,26,48,.72);--outline:rgba(255,255,255,.08);--hi:rgba(255,255,255,.07);
  --ink:#f3f0fa;--ink-h:#f3f0fa;--ink-2:#b2abc4;--ink-3:#7f7893;--ghost-c:rgba(255,255,255,.04);--solid:#f3f0fa;--on-solid:#0d0a14;--bar-top:rgba(255,255,255,.14);
  --amber:#ff9d3d;--amber-2:#ff7a1a;--glow:#8b5cf6;--acc-rgb:255,157,61;--glow-rgb:139,92,246;--hl-rgb:255,205,160;--on-acc:#1a0d00;--acc-ink:#ffb877;
  --acc-soft:rgba(255,157,61,.14)}
:root[data-theme="color2"]{color-scheme:dark;
  --bg:#090b14;--bg-1:#0f1220;--bg-2:#161a29;--line:#222739;--line-2:#30364f;
  --card:rgba(255,255,255,.035);--card-2:rgba(255,255,255,.09);--glass:rgba(24,28,46,.72);--outline:rgba(255,255,255,.08);--hi:rgba(255,255,255,.07);
  --ink:#eef1f8;--ink-h:#eef1f8;--ink-2:#a6acc2;--ink-3:#757c95;--ghost-c:rgba(255,255,255,.04);--solid:#eef1f8;--on-solid:#090b14;--bar-top:rgba(255,255,255,.14);
  --amber:#ff4d6d;--amber-2:#f43f5e;--glow:#4f7cff;--acc-rgb:255,77,109;--glow-rgb:79,124,255;--hl-rgb:255,180,196;--on-acc:#ffffff;--acc-ink:#ff8fa3;
  --acc-soft:rgba(255,77,109,.14)}
:root:is([data-theme="color1"],[data-theme="color2"]) body{background:radial-gradient(900px 520px at 0% 0%,rgba(var(--glow-rgb),.16),transparent 60%),radial-gradient(800px 600px at 100% 35%,rgba(var(--acc-rgb),.08),transparent 60%),radial-gradient(900px 700px at 15% 85%,rgba(var(--glow-rgb),.1),transparent 60%),var(--bg);background-attachment:fixed}
:root:is([data-theme="color1"],[data-theme="color2"]) :is(.hero,.panel,.inv,.card.black,.aud-1,.cta-card){box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
:root:is([data-theme="color1"],[data-theme="color2"]) :is(.hero,.panel,.inv,.card.black,.aud-1){background-color:#050408}
:root:is([data-theme="color1"],[data-theme="color2"]) .bento .tint{background:radial-gradient(130% 90% at 50% 0%,rgba(var(--acc-rgb),.26),rgba(var(--glow-rgb),.1) 50%,var(--card) 100%)}
:root:is([data-theme="color1"],[data-theme="color2"]) .delta{background:rgba(74,222,128,.13);color:#5ee08f}
:root:is([data-theme="color1"],[data-theme="color2"]) .chart em{color:#5ee08f}
:root:is([data-theme="color1"],[data-theme="color2"]) .hint{background:rgba(var(--acc-rgb),.1)}
:root:is([data-theme="color1"],[data-theme="color2"]) .ph{background:rgba(var(--acc-rgb),.14);color:var(--acc-ink)}
:root:is([data-theme="color1"],[data-theme="color2"]) .btn-primary .bi{box-shadow:0 0 18px rgba(var(--acc-rgb),.45)}
:root:is([data-theme="color1"],[data-theme="color2"]) .stack span{color:#6f6a80}

/* ---- prototype: theme switcher ---- */
.theme-sw{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:4px;padding:5px 6px 5px 12px;border-radius:999px;background:rgba(15,15,15,.88);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08);font:500 12px/1 var(--f-body)}
.theme-sw>span{color:#8a8a92;margin-right:6px}
.theme-sw button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 7px;border:0;border-radius:999px;background:transparent;color:#bbb;font:inherit;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform 160ms var(--ease-out)}
.theme-sw button:active{transform:scale(.95)}
.theme-sw button i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.theme-sw button[aria-pressed=true]{background:#fff;color:#000}
@media (max-width:640px){.theme-sw b{display:none}.theme-sw button{padding:0 8px}.theme-sw>span{display:none}}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .4s ease,border-color .4s ease,color .4s ease,fill .4s ease,box-shadow .4s ease!important}

/* =========== B01 hero video loop =========== */
.hero .hero-video{position:absolute;left:0;right:0;top:26%;bottom:-6%;pointer-events:none;display:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 80%,transparent 100%)}
.hero .hero-video video{width:100%;height:100%;object-fit:cover;object-position:50% 45%;mix-blend-mode:screen;filter:var(--vid-filter,none);display:block}
.hero[data-hero="waves"] .hv-waves,.hero[data-hero="earth"] .hv-earth{display:block}
.hero[data-hero]:not([data-hero="planet"]) :is(.horizon,.flare,.orbits){display:none}
/* scrim keeps the headline readable over bright particles */
.hero[data-hero]:not([data-hero="planet"]) .hero-inner::before{content:"";position:absolute;inset:-10% -5% -10% -5%;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 28% 52%,rgba(0,0,0,.55),transparent 70%),radial-gradient(30% 40% at 84% 50%,rgba(0,0,0,.5),transparent 75%)}
.js .hero .hero-video{opacity:0;scale:1.08;transition:opacity 2.2s ease .2s,scale 3s var(--ease-out) .1s}
.hero.is-in .hero-video{opacity:1;scale:1}
/* video is warm orange + icy blue; shift it per theme */
:root[data-theme="color2"]{--vid-filter:hue-rotate(-28deg) saturate(1.15)}
@media (prefers-reduced-motion:reduce){.js .hero .hero-video{scale:none;transition:opacity .6s ease}}
/* switcher: second group */
.theme-sw .sep{width:1px;height:18px;background:#333;margin:0 6px}

@media (max-width:960px){.hero .hv-waves{top:56%}}
/* Earth: full panel, mirrored, soft edges; JS fades it through black at the loop seam */
.hero .hv-earth{top:0;bottom:0;-webkit-mask-image:none;mask-image:none}
.hero .hv-earth video{transform:scaleX(-1);object-fit:cover;object-position:50% 50%;filter:contrast(1.22) brightness(.9) var(--vid-filter-earth,)}
:root[data-theme="color2"]{--vid-filter-earth:hue-rotate(-15deg)}
@media (max-width:960px){.hero .hv-earth video{object-position:30% 50%}}

/* shorter hero (70% of viewport): keep backdrops below the copy */
.hero .horizon{top:82%}
.hero .flare,.hero .orbits{top:82%}
.hero .hv-waves{top:50%}
@media (max-width:960px){.hero .horizon,.hero .flare,.hero .orbits{top:90%}.hero .hv-waves{top:62%}}
/* hero panel never wider than 1440px; centered on wide screens */
.hero{max-width:1440px;margin:0 auto}
.hero-wrap{padding:0}.hero{max-width:none;border-radius:0}
/* grid highlight sits over the video layer */
.hero .grid-hi{z-index:1;mix-blend-mode:screen}
/* video layers bleed past the bottom so the scroll drift (up to 110px) never reveals an empty edge */
.hero .hero-video{left:0;right:0}
.hero .hv-waves{top:calc(50% - 24px);bottom:-150px}
.hero .hv-earth{top:-24px;bottom:-150px}
@media (max-width:960px){.hero .hv-waves{top:calc(62% - 24px)}}


/* =========== B01 hero: night city (Three.js canvas) =========== */
.hero[data-hero="city"] .hv-city{display:block}
.hero .hv-city{top:0;bottom:-150px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 30%,#000 62%);mask-image:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 30%,#000 62%)}
/* poster: the city's first frame (tools/bake-hero), there at once and dimmed while the live city loads (that fades in over it);
   phones keep only the poster, undimmed (.poster-only) */
.hero .hv-city{--dim:rgba(10,22,48,.24);background:linear-gradient(var(--dim),var(--dim)),url(media/hero-city-day.webp) center top/cover no-repeat}
:root[data-theme="color2"] .hero .hv-city{--dim:rgba(3,5,12,.58);background-image:linear-gradient(var(--dim),var(--dim)),url(media/hero-city-night.webp)}
@media (max-aspect-ratio:1/1){.hero .hv-city{background-image:linear-gradient(var(--dim),var(--dim)),url(media/hero-city-day-m.webp)}:root[data-theme="color2"] .hero .hv-city{background-image:linear-gradient(var(--dim),var(--dim)),url(media/hero-city-night-m.webp)}}
.hero .hv-city.poster-only{--dim:transparent}
.js .hero .hero-video.hv-city{opacity:1;scale:none;transition:none}   /* no fade-and-zoom entrance for the city: the poster is simply there */
.hero .hv-city canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
.hero .hv-city canvas.ready{opacity:1}

/* =========== hero "light" variant: white plastic city behind dark copy =========== */
.hero[data-hero="city"]{background:#eceef3}
.hero[data-hero="city"] :is(.sky,.grid-hi){display:none}
.hero .hv-city{-webkit-mask-image:none;mask-image:none}
.hero .hv-city::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 62% at 26% 42%,rgba(236,238,243,.92),rgba(236,238,243,.55) 45%,transparent 75%),radial-gradient(36% 50% at 84% 40%,rgba(236,238,243,.9),rgba(236,238,243,.5) 55%,transparent 80%)}
.hero[data-hero="city"]{color:#14121c}
.hero[data-hero="city"] .hero-inner::before{display:none}
.hero[data-hero="city"] .lead{color:#4a4856}
.hero[data-hero="city"] .pill{background:rgba(255,255,255,.7);border-color:rgba(20,18,28,.1);color:#14121c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero[data-hero="city"] .pill b{background:rgba(20,18,28,.06)}
.hero[data-hero="city"] .btn-primary{background:#14121c;border-color:#14121c;color:#fff}
.hero[data-hero="city"] .btn-ghost{background:rgba(255,255,255,.75);border-color:rgba(20,18,28,.14);color:#14121c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero[data-hero="city"] .btn-ghost:hover{background:#fff;border-color:rgba(20,18,28,.3)}
.hero-light .header.on-dark{color:#14121c}
.hero-light .header.on-dark .logo .mark .sat{stroke:#eceef3}
.hero-light .header.on-dark .burger{border-color:rgba(20,18,28,.2)}

/* ===================== Theme: Light (client references: Flowze / Flowize AI) =====================
   Cool white page with soft blue glows, cobalt accent, navy ink, white cards with soft shadows.
   The former black panels (capabilities, investors, footer) turn deep navy with a blue glow. */
:root[data-theme="light"]{color-scheme:light;
  --bg:#f5f8fe;--card:#ffffff;--ink:#0b1630;--ink-2:#4a5672;--ink-3:#8b94ab;--line:#e2e8f4;
  --night:#0b1630;--night-2:#111d3d;--night-3:#16244a;--line-dark:#24325c;
  --amber:#2f6bff;--amber-2:#1f55e6;--glow:#7aa7ff;--acc-rgb:47,107,255;--glow-rgb:122,167,255;--hl-rgb:170,200,255;--on-acc:#ffffff;--acc-ink:#1f55e6;--spot-rgb:47,107,255;
  --card-2:#ffffff;--glass:rgba(255,255,255,.8);--outline:rgba(20,40,90,.07);--hi:#ffffff;--ink-h:#0b1630;--solid:#2f6bff;--on-solid:#ffffff;--bar-top:rgba(255,255,255,.92);
  --shadow:0 1px 2px rgba(20,40,90,.05),0 14px 36px rgba(40,70,140,.08)}
:root[data-theme="light"] body{background:radial-gradient(900px 560px at 0% 0%,rgba(var(--acc-rgb),.09),transparent 60%),radial-gradient(800px 640px at 100% 30%,rgba(var(--glow-rgb),.14),transparent 62%),radial-gradient(900px 700px at 10% 85%,rgba(var(--acc-rgb),.07),transparent 60%),var(--bg);background-attachment:fixed}
:root[data-theme="light"] .card{box-shadow:0 0 0 1px var(--outline),var(--shadow)}
:root[data-theme="light"]{--ghost-c:rgba(11,22,48,.035)}
:root[data-theme="light"] .hero .bigword{color:rgba(11,22,48,.04)}
:root[data-theme="light"] .btn-primary{background:var(--amber);color:#fff;box-shadow:0 8px 20px -8px rgba(var(--acc-rgb),.65),inset 0 1px 0 rgba(255,255,255,.18)}
:root[data-theme="light"] .btn-primary:hover{background:var(--amber-2)}
:root[data-theme="light"] .btn .bi{background:rgba(255,255,255,.18);color:#fff}
:root[data-theme="light"] .btn-ghost .bi{background:rgba(var(--acc-rgb),.1);color:var(--amber)}
:root[data-theme="light"] .header.scrolled{background:rgba(255,255,255,.78);box-shadow:0 0 0 1px var(--outline),0 10px 30px rgba(30,60,130,.08)}
/* deep navy panels instead of black */
:root[data-theme="light"] :is(.panel,.inv,.card.black,.aud-1){background:radial-gradient(120% 90% at 50% 0%,#16285a,#0b1630 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-theme="light"] :is(.panel,.inv,.card.black,.aud-1) .btn-primary{background:var(--amber);border-color:transparent;color:#fff}
:root[data-theme="light"] .inv .horizon{background:#0b1630}
:root[data-theme="light"] footer{background:#0b1630;color:#c6cde0}
/* the "Let's build what's next." card rides up over the last section: a footer with the card starts --lift higher, that band
   transparent, so the card's top sits on the section above and the footer colour begins under it */
footer:has(.cta-card){--lift:80px;margin-top:calc(-1 * var(--lift));background:linear-gradient(180deg,transparent var(--lift),#000 var(--lift))}
:root[data-theme="light"] footer:has(.cta-card){background:linear-gradient(180deg,transparent var(--lift),#0b1630 var(--lift))}
footer:has(.cta-card) .glow{top:var(--lift)}
@media (max-width:640px){footer:has(.cta-card){--lift:56px}}
:root[data-theme="light"] .cta-card{background:linear-gradient(180deg,#16285a,#0f1d44);border-color:#24325c}
:root[data-theme="light"] .mobile-menu{background:#0b1630}
:root[data-theme="light"] .cap,:root[data-theme="light"] .techrow span{background:#111d3d;border-color:#24325c}
/* the hero keeps the city: cool white, navy copy */
:root[data-theme="light"] .hero:not([data-hero="city"]){background:#0b1630}
:root[data-theme="light"] .hero[data-hero="city"]{background:#eef1f7;color:var(--ink)}
:root[data-theme="light"] .hero[data-hero="city"] .lead{color:var(--ink-2)}
:root[data-theme="light"] .hero[data-hero="city"] .btn-primary{background:var(--amber);color:#fff}
:root[data-theme="light"] .hero .hv-city::after{background:radial-gradient(64% 70% at 22% 46%,rgba(238,241,247,.94),rgba(238,241,247,.6) 46%,transparent 74%),radial-gradient(34% 50% at 86% 42%,rgba(238,241,247,.86),rgba(238,241,247,.45) 55%,transparent 80%)}
:root[data-theme="light"] .hero[data-hero="city"] h1 em,:root[data-theme="light"] .accent-word{color:var(--amber)}
/* hero copy v2: one left column anchored low, city left open on the right */
.hero-inner{align-items:flex-end;padding:140px 0 88px}
.hero-stack{grid-template-columns:minmax(0,860px)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
/* the hero copy starts where the header logo ends: header inset max(8px, (100% - 1440px) / 2) + its 28px padding + the 12px-high
   wordmark (viewBox 3703 x 418), minus the inset of the hero container (max-width 1440px, centred) */
@media (min-width:901px){.hero-inner > .hero-stack{padding-left:calc(max(8px, (100% - 1440px) / 2) - max(0px, (100% - 1440px) / 2) + 28px + 12px * 3703 / 418)}}
.hero-stack h1{font-size:clamp(40px,4.3vw,64px);line-height:1.02;margin:22px 0 22px}
.hero-stack .lead{max-width:520px;font-size:19px;margin:0 0 30px}
.hero[data-hero="city"] .hv-city::after,:root[data-theme="light"] .hero .hv-city::after{background:linear-gradient(0deg,rgba(238,241,247,.55) 0%,rgba(238,241,247,0) 22%)}
@media (max-width:960px){.hero-inner{padding:120px 0 72px}.hero[data-hero="city"] .hv-city::after,:root[data-theme="light"] .hero .hv-city::after{background:linear-gradient(0deg,rgba(238,241,247,.96) 0%,rgba(238,241,247,.85) 52%,rgba(238,241,247,.2) 80%,rgba(238,241,247,.4) 100%)}}
/* header over the light city: small frosted white plate instead of a side wash */
.hero-light .header.on-dark{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(30,60,130,.06)}
.hero-light .hero-stack .lead{color:#2c3757;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(30,60,130,.06);padding:14px 18px;border-radius:14px;margin-left:-18px}
@media (max-width:960px){.hero-light .hero-stack .lead{margin-left:0}}
/* B04 widgets in the light theme: borrow Pulse's coral + blue pair so the dashboards are not monochrome */
:root[data-theme="light"] #focus .bento{--amber:#ff4d6d;--amber-2:#f43f5e;--glow:#4f7cff;--acc-rgb:255,77,109;--glow-rgb:79,124,255;--hl-rgb:255,180,196;--on-acc:#ffffff;--acc-ink:#e11d48;--spot-rgb:255,77,109;--acc-soft:rgba(255,77,109,.12)}
/* AI chip in the light theme: Ember's orange + violet pair, as in the dark version */
:root[data-theme="light"] .chipviz,:root[data-theme="light"] .agentviz{--amber:#ff9d3d;--glow:#8b5cf6;--acc-rgb:255,157,61;--glow-rgb:139,92,246;--hl-rgb:255,205,160;--on-acc:#1a0d00}
/* placeholder marks in the light theme: coral, like the bento avatars */
:root[data-theme="light"] .ph{color:#e11d48;background:rgba(255,77,109,.12)}
:root[data-theme="light"] :is(.dark,.panel,.hero,.inv,.card.black) .ph{color:#ff6b86;background:rgba(255,77,109,.16)}
/* audience cards in the light theme: coral arrows and a coral talent card, as in Pulse */
:root[data-theme="light"] .aud{--amber:#ff4d6d;--acc-rgb:255,77,109;--spot-rgb:255,77,109;--on-acc:#ffffff}
:root[data-theme="light"] .aud .go .bi{color:#fff}
:root[data-theme="light"] .aud-3 .go .bi{background:#0b1630;color:#ff4d6d}

/* CTA = the label pink of the city models, in both themes (Light and Pulse); the page accents and glows stay as they are.
   Button text is dark (#14121c): 5.8:1 on #ff4d6d and 4.9:1 on the hover #f2385c (WCAG AA); white text was only 3.2:1. */
:root:is([data-theme="light"],[data-theme="color2"]){--cta:#ff4d6d;--cta-2:#f2385c;--cta-rgb:255,77,109}
:root:is([data-theme="light"],[data-theme="color2"]) :is(.hero[data-hero],body,.panel,.inv,.on-dark,.dark,.card) .btn-primary{background:var(--cta);border-color:transparent;color:#14121c;box-shadow:0 8px 20px -8px rgba(var(--cta-rgb),.7),inset 0 1px 0 rgba(255,255,255,.2)}
:root:is([data-theme="light"],[data-theme="color2"]) :is(.hero[data-hero],body,.panel,.inv,.on-dark,.dark,.card) .btn-primary:hover{background:var(--cta-2);border-color:transparent}
:root:is([data-theme="light"],[data-theme="color2"]) :is(.hero[data-hero],body,.panel,.inv,.on-dark,.dark,.card) .btn-primary .bi{background:rgba(255,255,255,.35);color:#14121c;box-shadow:none}

/* hero: a wider container than the rest of the page */
.hero .container{max-width:1440px}
/* the header plate matches the hero container: 1440px max, content on the same 24px inset as the hero copy */
.header{left:max(8px,calc((100% - 1440px) / 2));right:max(8px,calc((100% - 1440px) / 2))}
.header .nav{max-width:none}
/* a pill with no inner chip: even padding */
.pill:not(:has(b)){padding:6px 14px}
/* Pulse: the city goes to night (city-kit.js), the hero copy and its plates turn light-on-dark */
:root[data-theme="color2"] .hero[data-hero="city"]{background:#090b14;color:var(--ink)}
:root[data-theme="color2"] .hero[data-hero="city"] .lead{color:var(--ink-2)}
:root[data-theme="color2"] .hero[data-hero="city"] .pill{background:rgba(14,17,30,.62);border-color:rgba(255,255,255,.1);color:var(--ink)}
:root[data-theme="color2"] .hero[data-hero="city"] .btn-ghost{background:rgba(14,17,30,.62);border-color:rgba(255,255,255,.14);color:var(--ink)}
:root[data-theme="color2"] .hero[data-hero="city"] .btn-ghost:hover{background:rgba(26,31,52,.85);border-color:rgba(255,255,255,.3)}
:root[data-theme="color2"] .hero .hv-city::after{background:linear-gradient(0deg,rgba(9,11,20,.7) 0%,rgba(9,11,20,0) 24%)}
@media (max-width:960px){:root[data-theme="color2"] .hero .hv-city::after{background:linear-gradient(0deg,rgba(9,11,20,.96) 0%,rgba(9,11,20,.85) 52%,rgba(9,11,20,.2) 80%,rgba(9,11,20,.4) 100%)}}
:root[data-theme="color2"].hero-light .header.on-dark{color:var(--ink);background:rgba(12,15,28,.55);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.3)}
:root[data-theme="color2"].hero-light .header.on-dark .logo .mark .sat{stroke:#090b14}
:root[data-theme="color2"].hero-light .header.on-dark .burger{border-color:rgba(255,255,255,.2)}
:root[data-theme="color2"].hero-light .hero-stack .lead{color:var(--ink-2);background:rgba(12,15,28,.55);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.3)}
/* hero lead: no plate; a soft halo in the page colour keeps it readable over the city */
.hero-light .hero-stack .lead,:root[data-theme="color2"].hero-light .hero-stack .lead{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin-left:0;border-radius:0}
.hero-light .hero-stack .lead{color:#2c3757;text-shadow:0 0 14px rgba(245,248,254,.95),0 0 4px rgba(245,248,254,.9)}
:root[data-theme="color2"].hero-light .hero-stack .lead{color:#c3c9dc;text-shadow:0 0 14px rgba(9,11,20,.95),0 0 4px rgba(9,11,20,.9)}
:root[data-theme="light"] .hero[data-hero="city"] .lead{color:#2c3757}
/* pill to headline: the same visible gap as between the two headline lines (line-height minus cap height, less the cap offset in the line box) */
.hero-copy > .pill{margin-bottom:0}
.hero-stack h1{margin-top:.143em}
/* more air: headline -> lead -> CTAs */
.hero-stack h1{margin-bottom:34px}
.hero-stack .lead{margin-bottom:42px}
/* the visitor's local time in the hero (motion.js); on screens where the header (max 1440 wide) would cover it, it sits under the header */
.hero .oz-clock{position:absolute;top:42px;right:24px;transform:translateY(-50%);z-index:3;font:500 14px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink);pointer-events:none}
:root[data-theme="color2"] .hero .oz-clock{color:#eef1f8;text-shadow:0 0 18px rgba(79,124,255,.6)}
@media (max-width:1740px){.hero .oz-clock{top:106px}}
/* =========== "Loading" (index.html): bottom-right of the hero, level with its buttons, while the live city loads over its poster =========== */
.hero .hv-loading{position:absolute;right:24px;bottom:24px;z-index:3;display:flex;align-items:center;gap:12px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;transition:opacity .5s ease}
.hero .hv-loading[hidden]{display:none}
.hero .hv-loading canvas{display:block;width:40px;height:40px;color:var(--ink)}
:root[data-theme="color2"] .hero .hv-loading{color:rgba(238,241,248,.72)}
:root[data-theme="color2"] .hero .hv-loading canvas{color:#eef1f8}
.hero .hv-loading.done{opacity:0}
/* header: the gap from the left edge of the bar to the logo letters equals the gap from its top edge (68px bar, letters 12px / 11px) */
.header .nav{padding-left:calc((68px - 12px) / 2)}
@media (max-width:640px){.header .nav{padding-left:calc((68px - 11px) / 2)}}
/* =========== Work-with-us pages: clients.html / partners.html / investors.html =========== */
.pg-hero{position:relative;padding:150px 0 48px;overflow:hidden}
.pg-hero .ghost{top:56px}
.pg-hero .crumb{position:relative;display:inline-block;margin-bottom:22px;font-size:14px;color:var(--ink-3);text-decoration:none}
.pg-hero .crumb:hover{color:var(--ink)}
.pg-hero .label{display:block;position:relative}
.pg-hero h1{position:relative;font-size:clamp(40px,5.2vw,68px);max-width:16ch}
.pg-hero .lead{position:relative;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:660px;margin-top:20px}
.pg-hero .ctas{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:30px}
.pg-sec{padding:64px 0}
.pg-sec .grid{align-items:stretch}
.pg-text{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:16px;max-width:560px}
.pg-note{padding:28px;gap:4px;height:auto;align-self:start}   /* sized by its own list, not stretched to the text column */
.pg-note .checks{margin:18px 0 20px}
.qa{border-bottom:1px solid var(--line)}   /* full width of the content column, like the blocks above it */
.qa details{border-top:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:18px;font-weight:600;letter-spacing:-.02em;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-1);font-weight:500;transition:transform .25s var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{max-width:820px;padding:0 50px 22px 0;color:var(--ink-2);font-size:16px;line-height:1.6}
.pg-form{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gut);align-items:stretch}   /* form and side column share top and bottom edges */
.pg-aside{display:flex;flex-direction:column;gap:var(--gut)}
.pg-aside > .card{height:auto}
.aside-fig{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;container-type:size}
.aside-fig .step-fig{height:min(100%,230px);width:auto;max-width:100%;margin:0}
@container (max-height:110px){.aside-fig .step-fig{display:none}}
.pg-next{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;color:#b6bdd0;font-size:15px;line-height:1.5}
.pg-next li::marker{color:var(--cta,#ff4d6d);font-weight:600}
.pg-form-sec{padding-bottom:110px}
@media (max-width:960px){.pg-form{grid-template-columns:1fr}}
@media (max-width:640px){.pg-hero{padding-top:120px}.pg-sec{padding:44px 0}.qa summary{font-size:16px}.qa details p{padding-right:0}}
/* =========== 404.html: centered message (after the 21st.dev "Centered 404 Message", without the popular-pages row) =========== */
.nf{min-height:calc(100vh - 64px);display:flex}
.nf-wrap{flex:1;display:flex;align-items:center;padding:140px 0 80px}
.nf-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.nf-code{position:relative;font-size:clamp(120px,20vw,220px);font-weight:600;line-height:.9;letter-spacing:-.07em;padding-right:.04em;
  background:linear-gradient(180deg,var(--ink) 15%,rgba(127,140,170,.35));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-star{position:absolute;top:-.08em;right:-.2em;width:.26em;height:.26em;fill:var(--cta,#ff4d6d);filter:drop-shadow(0 0 14px rgba(255,77,109,.55))}
.nf h1{margin-top:28px;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.04em}
.nf p{margin-top:14px;max-width:520px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.nf-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.nf-ctas .bi svg{display:block}
.nf-foot{padding:24px 0}
@media (prefers-reduced-motion:no-preference){.nf-star{animation:nf-twinkle 3.2s var(--ease-in-out) infinite}}
@keyframes nf-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.82) rotate(45deg)}}
/* clients page, "How a project runs": a hairline figure on top of every step card, in the site palette (follows Light / Pulse) */
.steps.with-figs .step{gap:6px}
.step-fig{width:100%;max-width:230px;margin:0 auto 10px;
  --hairline-plate:var(--card);--hairline-hi:var(--ink);--hairline-edge:var(--ink-3);
  --hairline-mid:color-mix(in oklab,var(--ink-3) 55%,var(--card));--hairline-lo:var(--line);--hairline-stroke:1;
  /* the Isometric figures (skyline) take the same palette; the tower under the pointer takes the CTA pink */
  --iso-plate:var(--card);--iso-hi:var(--ink);--iso-edge:var(--ink-3);--iso-mid:color-mix(in oklab,var(--ink-3) 55%,var(--card));--iso-lo:var(--line);--iso-accent:var(--cta,#ff4d6d);--iso-stroke:1}
:root[data-theme="color2"] .step-fig{--hairline-lo:rgba(255,255,255,.1);--iso-lo:rgba(255,255,255,.1)}
/* Isometric faces must be opaque to hide the lines behind them: in Pulse the card is a 3.5% white veil, so the plate is that veil laid over the page colour */
:root[data-theme="color2"] .step-fig{--iso-plate:color-mix(in srgb,var(--bg) 96.5%,#fff)}
/* =========== Cookie notice (motion.js, every page) =========== */
.oz-cookie{position:fixed;left:16px;bottom:16px;z-index:95;width:min(380px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border-radius:16px;
  background:var(--glass);color:var(--ink);box-shadow:0 0 0 1px var(--outline),0 18px 44px -12px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.oz-cookie.in{opacity:1;transform:none}
.oz-cookie p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.oz-cookie p b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.oz-cookie-act{display:flex;justify-content:flex-end;gap:8px}
:root[data-theme="color2"] .oz-cookie{background:rgba(13,16,30,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 44px -12px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.oz-cookie{transition:none}}

/* =========== Legal pages: privacy / terms / cookies / accessibility / do-not-sell (tools/build-legal-pages.py) =========== */
.legal-doc{padding:140px 0 100px}
.legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px 56px;align-items:start}
.legal-head{grid-column:1/-1;max-width:820px;margin-bottom:12px}
.legal-head .crumb{display:inline-block;margin-bottom:22px;font-size:14px;color:var(--ink-3);text-decoration:none}
.legal-head .crumb:hover{color:var(--ink)}
.legal-head .label{display:block}
.legal-head h1{font-size:clamp(36px,4.6vw,56px)}
.legal-meta{margin-top:14px;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.legal-lead{margin-top:14px;font-size:18px;line-height:1.6;color:var(--ink-2)}
.legal-draft{margin-top:20px;padding:12px 16px;border-radius:12px;background:rgba(var(--acc-rgb),.1);color:var(--ink-2);font-size:14px;line-height:1.5}
.legal-draft b{color:var(--ink)}
.legal-toc{position:sticky;top:96px;font-size:14px}
.legal-toc b{display:block;margin-bottom:10px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.legal-toc ol{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;color:var(--ink-3)}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:760px}
.legal-sec{padding:0 0 30px;scroll-margin-top:96px}
.legal-sec+.legal-sec{padding-top:30px;border-top:1px solid var(--line)}
.legal-sec h2{font-size:24px;letter-spacing:-.03em;margin-bottom:12px}
.legal-sec p,.legal-sec li{font-size:16px;line-height:1.7;color:var(--ink-2)}
.legal-sec p+p,.legal-sec ul+p,.legal-sec p+ul{margin-top:12px}
.legal-sec ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal-sec b{color:var(--ink);font-weight:600}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}}
@media (max-width:640px){.legal-doc{padding-top:116px}}
/* investors page: each way of investing is its own full section (#way-company, #way-product), then the comparison table */
.way-sec .sec-head .label{display:block}
.way-split{margin-top:8px}
.way-split .pg-text{margin:0 0 16px;max-width:620px}
.way-split .checks{margin:0}
.way-split > div:last-child{position:sticky;top:110px}   /* the short list stays in view while the longer text scrolls */
@media (max-width:900px){.way-split > div:last-child{position:static}}
.way-fit-label{display:block;margin-top:14px}
.wd-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;color:var(--ink-2);font-size:16px;line-height:1.55}
.way-how{margin:56px 0 18px;font-size:22px;letter-spacing:-.03em}
.way-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:28px}
.way-sec + .way-sec{border-top:1px solid var(--line);padding-top:calc(64px + .5 * clamp(90px,15vw,220px))}   /* room after the divider for the ghost word and the heading */
.pg-compare{margin-top:var(--gut);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--outline)}
.pc-row{display:grid;grid-template-columns:200px 1fr 1fr;border-top:1px solid var(--line)}
.pc-row > div{padding:14px 20px;font-size:15px;color:var(--ink-2)}
.pc-row [role=rowheader]{color:var(--ink);font-weight:600}
.pc-head{border-top:0;background:var(--bg-1)}
.pc-head > div{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pg-small{margin-top:14px;font-size:13px}

@media (max-width:640px){.pc-row{grid-template-columns:1fr 1fr}.pc-row [role=rowheader]{grid-column:1/-1;padding-bottom:0}.pc-head [role=columnheader]:first-child{display:none}}
/* contact form scenarios (form.js): one fieldset per step, Back / Continue under each */
.fstep{border:0;padding:0;margin:0;min-width:0}
.fstep[hidden]{display:none}
.fstep legend{padding:0;margin-bottom:16px}
.fstep legend h3{margin:0}
.fstep .chips{gap:8px}
.form-actions.with-back .btn-ghost,.form-actions .btn-ghost{flex:none}
/* careers page: figures strip and partner logo wall (placeholders until the client fills them) */
.pg-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.pg-stats > div{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--outline)}
.pg-stats b{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.04em}
.pg-stats span{font-size:14px;color:var(--ink-2)}
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gut)}
.logo-wall > div{display:grid;place-items:center;min-height:96px;padding:12px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--outline);font-size:13px;text-align:center}
@media (max-width:960px){.pg-stats{grid-template-columns:repeat(2,1fr)}.logo-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.job{grid-template-columns:1fr 36px}.job span:not(.arr){display:none}}
.pg-stats b .ph{font-size:inherit;padding:0 .12em;border-radius:.12em}   /* placeholder figures at full size, so the client sees where the number goes */
/* text column + note card under one section heading: both start and end on the same lines (the heading sits above them) */
.split.pair{align-items:stretch}
.split.pair .checks{margin:0}
.split.pair > .pg-note{align-self:stretch;height:auto}
/* home B10: heading above, then the list (+ button) and the tiles share top and bottom */
.b10-head{margin-bottom:28px}
.b10-pair > div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.split.pair.b10-pair .checks{margin:0 0 28px}
.b10-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:auto}
.b10-pair .tiles{grid-auto-rows:1fr;align-self:stretch}
.b10-pair .tile{min-height:0;gap:14px;padding:18px 20px;justify-content:space-between}   /* icon on top, label on the bottom line */
/* audience pages: "Other ways to work with us" cards at the bottom; the form section above no longer needs extra bottom room */
.pg-form-sec{padding-bottom:64px}
.pg-others{padding-bottom:110px}
.other-link{text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s var(--ease-out)}
.other-link .link{margin-top:auto;font-size:14px;font-weight:500}
.other-link:hover{box-shadow:0 0 0 1px rgba(var(--acc-rgb),.45),var(--shadow);transform:translateY(-2px)}
.menu a[aria-current=page]{opacity:1}
/* "Continue" in the form: label in the middle, arrow on the right edge of the button (the usual .bi sits before the label with a negative margin) */
.btn-next{position:relative;padding-right:52px;padding-left:52px}
.btn-next .bi{position:absolute;right:8px;top:50%;margin:0;transform:translateY(-50%)}
/* pairs: the text column starts with a label at the card's inner top, so the labels and the first list items share their lines */
.split.pair > .pair-text{padding-top:28px;display:flex;flex-direction:column;gap:4px}   /* same inner top and gap as the card */
.split.pair > .pair-text > .label{display:block;margin:0}
.split.pair > .pair-text > .checks,.split.pair > .pg-note > .checks{margin:14px 0 0}