/* =====================================================================
   Radon landing page
   Tokens follow the Radon visual design book (pages 26-31, 43) and the
   landing brief: violet is the body, cyan is movement, white is for edges.
   ===================================================================== */

:root {
  --void: #060607;
  --graphite: #101012;
  --slate: #19191D;
  --slate-2: #232328;
  --violet: #652CD1;
  --violet-400: #7d4cd9;
  --violet-300: #966ee0;
  --violet-200: #ae90e8;
  --violet-700: #441e8e;
  --violet-900: #24104a;
  --cyan: #4CC0D3;
  --cyan-300: #8ad6e2;
  --cyan-700: #2996a8;
  --paper: #F2F2F2;
  --fog: #BBBBBB;
  --mute: #8d8d95;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --amber: #E9A94B;
  --danger: #F07C7E;

  --f-head: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Encode Sans Expanded', 'Segoe UI', system-ui, sans-serif;
  --f-code: ui-monospace, 'Cascadia Code', Consolas, 'SFMono-Regular', monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --hdr: 72px;
  --r-win: 18px;
  --r-btn: 10px;
  /* button system: two sizes, one gap between neighbouring buttons */
  --btn-h: 48px; --btn-px: 22px; --btn-fs: 15.5px;
  --btn-h-sm: 40px; --btn-px-sm: 16px; --btn-fs-sm: 14px;
  --btn-gap: 12px;
  --r-chip: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font: 400 16.5px/1.65 var(--f-body);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; margin: 0; letter-spacing: -.012em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg use { pointer-events: none; }
::selection { background: rgba(101, 44, 209, .55); color: #fff; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--violet); color: #fff; border-radius: var(--r-btn); font-family: var(--f-head); text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.anchor { position: absolute; top: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }

/* line icons from the sprite */
svg:has(> use[href^="#i-"]) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg:has(> use[href="#i-play"]) { fill: currentColor; stroke: none; }

/* the "port": a small rounded bar, borrowed from the arms of the Radon mark */
.port {
  display: inline-block; flex: none;
  width: 11px; height: 7px; border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(76, 192, 211, .12), 0 0 14px rgba(76, 192, 211, .6);
}

/* ---------- buttons and links ---------- */
.btn {
  --bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: var(--bg);
  font: 600 var(--btn-fs)/1 var(--f-head); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn-primary {
  --bg: var(--violet);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px -12px rgba(101, 44, 209, .9);
}
.btn-primary:hover { --bg: #7440de; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 36px -10px rgba(101, 44, 209, 1), 0 0 0 1px rgba(174, 144, 232, .35); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { color: var(--paper); border-color: var(--line-2); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: rgba(76, 192, 211, .55); background: rgba(76, 192, 211, .06); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-sm { min-height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.btn-wide { width: 100%; }

.link-out {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15.5px/1 var(--f-head); color: var(--fog); text-decoration: none;
  padding: 14px 4px; transition: color .2s;
}
.link-out svg { width: 16px; height: 16px; }
.link-out:hover { color: var(--paper); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--hdr);
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.hdr.is-scrolled, .hdr.menu-open {
  background: rgba(6, 6, 7, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.hdr-in {
  height: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; gap: 22px;
}
.hdr-brand { display: block; flex: none; }
.hdr-brand .lockup { height: 27px; width: auto; fill: #fff; }
.endorse {
  font: 500 12.5px/1.2 var(--f-head); color: var(--mute); text-decoration: none;
  padding: 6px 0 6px 18px; border-left: 1px solid var(--line-2); white-space: nowrap;
  transition: color .2s;
}
.endorse:hover { color: var(--paper); }
.nav { display: flex; gap: 4px; margin-inline: auto; }
.nav a {
  font: 500 15px/1 var(--f-head); color: var(--fog); text-decoration: none;
  padding: 10px 12px; border-radius: 8px; transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--paper); background: rgba(255, 255, 255, .04); }
.nav a.is-current { color: var(--paper); }
.hdr-act { display: flex; align-items: center; gap: var(--btn-gap); }
.menu-btn {
  display: none; width: var(--btn-h-sm); height: var(--btn-h-sm); place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-btn); background: transparent; cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu {
  position: absolute; top: var(--hdr); left: 0; right: 0;
  display: flex; flex-direction: column; padding: 8px var(--gut) 24px;
  background: rgba(6, 6, 7, .97); border-bottom: 1px solid var(--line);
}
.menu[hidden] { display: none; }
.menu a { font: 500 20px/1 var(--f-head); color: var(--paper); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); }
.menu a.menu-signin { color: var(--fog); font-size: 17px; border-bottom: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: max(700px, 100svh);
  display: flex; align-items: center;
  padding: calc(var(--hdr) + 40px) 0 96px;
  overflow: hidden;
}
.hero-gl {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s var(--ease);
}
.hero.gl-on .hero-gl { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(6, 6, 7, .9) 26%, rgba(6, 6, 7, .45) 44%, rgba(6, 6, 7, 0) 58%),
    linear-gradient(0deg, var(--void) 0%, rgba(6, 6, 7, 0) 16%);
}
.hero-grid { display: grid; grid-template-columns: 45fr 55fr; align-items: center; gap: 24px; }
.hero-copy { position: relative; max-width: 600px; }
.kicker {
  display: flex; align-items: center; gap: 12px;
  font: 500 15px/1.4 var(--f-head); color: var(--cyan-300);
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(42px, 5.5vw, 80px);
  line-height: .98; letter-spacing: -.028em; font-weight: 600;
  max-width: 11ch;
  text-wrap: balance;
}
.lead {
  margin-top: 28px; max-width: 54ch;
  font-size: 17.5px; line-height: 1.68; color: var(--fog); font-weight: 300;
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--btn-gap); margin-top: 38px; }
.proof {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.proof a {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 14.5px/1.3 var(--f-head); color: var(--fog); text-decoration: none;
  transition: color .2s;
}
.proof a:hover { color: var(--paper); }
.proof .port { width: 9px; height: 6px; }

.hero-stage { position: relative; aspect-ratio: 640 / 520; width: 100%; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s var(--ease); }
.hero.gl-on .poster { opacity: 0; }

.flow-chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(16, 16, 18, .94);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  white-space: nowrap;
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .4s;
}
.chip-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(101, 44, 209, .22); color: var(--violet-200); }
.chip-ic svg { width: 18px; height: 18px; }
.chip-t { display: flex; flex-direction: column; gap: 3px; }
.chip-t small { font: 500 12px/1 var(--f-head); color: var(--mute); }
.chip-t b { font: 600 14.5px/1.1 var(--f-head); color: var(--paper); }
.chip-out .chip-ic { background: rgba(76, 192, 211, .16); color: var(--cyan); }
.chip-in { left: 0; top: 64%; }
.chip-out { right: 0; top: 18%; }
.hero.gl-on .flow-chip { opacity: 0; transform: translate(-50%, -50%) translateY(8px); left: 0; top: 0; right: auto; }
.hero.gl-on .flow-chip.is-on { opacity: 1; transform: translate(-50%, -50%); }
.hero.gl-on .chip-out.is-on { border-color: rgba(76, 192, 211, .45); }


/* ---------- brand intro (hero-3d.js drives it; head script decides whether it plays) ---------- */
.intro-brand { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.intro .intro-brand, .intro-out .intro-brand { display: block; }
.ib-lock { position: absolute; left: 0; top: 0; width: 0; height: 0; filter: drop-shadow(0 0 16px rgba(76, 192, 211, .35)); }
.ib-word {
  position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff;
  clip-path: inset(0 var(--clip, 51%) 0 0);
  transform-origin: 0 0;
}
.ib-head {
  position: absolute; top: 46%; height: 34%; width: 3px; border-radius: 2px;
  left: calc(100% - var(--clip, 51%)); transform: translateX(-50%);
  background: #e9fbff; box-shadow: 0 0 10px 2px rgba(76, 192, 211, .9), 0 0 34px 8px rgba(76, 192, 211, .45);
  opacity: var(--head, 0);
}
.ib-tag {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 10px);
  font: 500 clamp(16px, 1.6vw, 22px)/1 var(--f-head); letter-spacing: .04em; color: var(--cyan-300); white-space: nowrap;
  opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.ib-tag.is-on { opacity: 1; transform: translate(-50%, 0); }
.intro-flip .ib-lock { filter: none; transition: filter .8s; }
.intro-flip .ib-word { transition: transform 1.05s cubic-bezier(.7, 0, .2, 1); }
.intro-flip .ib-tag { opacity: 0; transform: translate(-50%, -8px); transition-duration: .4s; }

.hdr, .hero-copy > *, .hero-shade { transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .3s, border-color .3s; }
.intro .hdr { opacity: 0; transform: translateY(-10px); }
.intro .hero-copy > * { opacity: 0; transform: translateY(26px); }
.intro .hero-shade, .intro .poster, .intro .flow-chip { opacity: 0; }
/* the copy waits for the symbol to clear the text column, then rises line by line */
.intro .hero-copy > :nth-child(1) { transition-delay: .4s; }
.intro .hero-copy > :nth-child(2) { transition-delay: .48s; }
.intro .hero-copy > :nth-child(3) { transition-delay: .56s; }
.intro .hero-copy > :nth-child(4) { transition-delay: .64s; }
.intro .hero-copy > :nth-child(5) { transition-delay: .72s; }
.intro .hdr-brand { transition: opacity .25s; }
.intro.intro-out .hdr, .intro.intro-out .hero-copy > * { opacity: 1; transform: none; }
.intro.intro-out .hero-shade { opacity: 1; }
.intro.intro-out .hdr-brand { opacity: 0; }
.intro.intro-out.intro-land .hdr-brand { opacity: 1; }

/* product windows tilt up into place as they scroll in (where the browser supports scroll timelines) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wt-window, .xp-ui > .app, .how-vis > .app, .pn-scroll, .dp-vis, .form-card {
      animation: tiltIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
      transform-origin: 50% 100%;
    }
    @keyframes tiltIn {
      from { transform: perspective(1600px) rotateX(26deg) translateY(70px) scale(.93); opacity: .25; }
      to { transform: none; opacity: 1; }
    }
  }
}

/* pointer tilt on product windows (desktop only); one transform per element, no repaint */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-tilt] { transform: perspective(1600px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg)); transition: transform .7s var(--ease); }
  [data-tilt].is-tilting { transition-duration: .2s; will-change: transform; }
}

/* sections pause their CSS loops while they are off-screen */
.is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(96px, 11vw, 160px); }
.sec-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 68px); }
.sec-head h2 { font-size: clamp(31px, 3.5vw, 48px); line-height: 1.05; text-wrap: balance; }
.sec-head p { margin-top: 20px; max-width: 62ch; font-size: 17.5px; color: var(--fog); font-weight: 300; }
.fine { margin-top: 18px; font-size: 13.5px; color: var(--mute); }

/* brand flow line that carries the hero's output into the walkthrough */
.handoff { position: absolute; top: 0; left: 0; width: 100%; height: 120px; fill: none; }
.handoff path {
  stroke: var(--cyan); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .45;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  transition: stroke-dashoffset 2.4s var(--ease);
}
.sec-product.in-view .handoff path { stroke-dashoffset: 0; }

/* ---------- app windows (illustrative interfaces) ---------- */
.app {
  position: relative;
  background: linear-gradient(180deg, #141418 0%, #0d0d10 100%);
  border: 1px solid var(--line-2); border-radius: var(--r-win);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(101, 44, 209, .06), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.app-bar {
  display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font: 500 13.5px/1 var(--f-head); color: var(--fog);
  white-space: nowrap;
}
.dots { display: flex; gap: 7px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #2c2c33; }
.app-title { color: var(--paper); }
.app-crumb { color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.app-pill { margin-left: auto; padding: 5px 10px; border-radius: 6px; background: rgba(76, 192, 211, .12); color: var(--cyan); font-size: 12px; }
.app-pill.dev { background: rgba(150, 110, 224, .15); color: var(--violet-200); }
.pane { background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.pane-h { display: flex; align-items: center; gap: 9px; font: 600 14px/1.2 var(--f-head); color: var(--paper); margin-bottom: 12px; }
.pane-h svg { width: 17px; height: 17px; color: var(--violet-200); }
.pane-h span { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--cyan-300); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--mute); font-family: var(--f-code); font-size: 12.5px; }
.kv dd { margin: 0; color: var(--paper); }
.ok-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: rgba(76, 192, 211, .13); color: var(--cyan); font: 600 12px/1 var(--f-head); }
.ok-tag svg { width: 13px; height: 13px; stroke-width: 2.4; }
.fake-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line-2); font: 600 12.5px/1 var(--f-head); color: var(--fog);
}
.fake-btn.primary { background: var(--violet); border-color: transparent; color: #fff; }
.fake-btn.sm { padding: 6px 10px; font-size: 12px; }
.fake-btn svg { width: 13px; height: 13px; }

/* ---------- flow canvas: nodes and step-curve edges, scaled as one image ---------- */
.fc {
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: var(--cw) / var(--ch);
  --fk: calc(860 / var(--cw));
}
.fc-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.fc-edges .e { stroke: rgba(255, 255, 255, .2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fc-edges .ef {
  stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 10 260; stroke-dashoffset: 270; opacity: 0;
}
.fc.is-live .fc-edges .ef { opacity: 1; animation: edgeFlow 2.4s linear infinite; }
@keyframes edgeFlow { to { stroke-dashoffset: 0; } }

.fc-zone {
  position: absolute;
  left: calc(var(--x) / var(--cw) * 100%); top: calc(var(--y) / var(--ch) * 100%);
  width: calc(var(--w) / var(--cw) * 100%); height: calc(var(--h) / var(--ch) * 100%);
  border: 1px dashed rgba(76, 192, 211, .45); border-radius: calc(1.4cqw * var(--fk));
  background: rgba(76, 192, 211, .035);
}
.fc-zone span { position: absolute; left: calc(1.2cqw * var(--fk)); top: calc(-.9cqw * var(--fk)); padding: 0 calc(.6cqw * var(--fk)); background: #111114; font: 500 calc(1.15cqw * var(--fk))/1.4 var(--f-head); color: var(--cyan-300); }

.fn {
  position: absolute;
  left: calc(var(--x) / var(--cw) * 100%); top: calc(var(--y) / var(--ch) * 100%);
  width: calc(160 / var(--cw) * 100%); height: calc(58 / var(--ch) * 100%);
  display: flex; align-items: center; gap: calc(.9cqw * var(--fk)); padding: 0 calc(1cqw * var(--fk));
  background: #18181d; border: 1px solid var(--line-2); border-radius: calc(1.15cqw * var(--fk));
  box-shadow: 0 calc(1cqw * var(--fk)) calc(2.4cqw * var(--fk)) calc(-1cqw * var(--fk)) rgba(0, 0, 0, .8);
  transition: border-color .4s, box-shadow .4s, opacity .4s, transform .4s var(--ease);
}
.fn::before, .fn::after {
  content: ''; position: absolute; top: 50%;
  width: calc(.8cqw * var(--fk)); height: calc(1.25cqw * var(--fk)); margin-top: calc(-.625cqw * var(--fk)); border-radius: calc(.25cqw * var(--fk));
  background: #2b2b33; border: 1px solid var(--line-2);
  transition: background-color .4s, box-shadow .4s;
}
.fn::before { left: calc(-.45cqw * var(--fk)); }
.fn::after { right: calc(-.45cqw * var(--fk)); }
.fn-ic { flex: none; display: grid; place-items: center; width: calc(3.5cqw * var(--fk)); height: calc(3.5cqw * var(--fk)); border-radius: calc(.8cqw * var(--fk)); background: rgba(101, 44, 209, .2); color: var(--violet-200); }
.fn-ic svg { width: calc(2cqw * var(--fk)); height: calc(2cqw * var(--fk)); }
.fn-t { display: flex; flex-direction: column; gap: calc(.25cqw * var(--fk)); min-width: 0; }
.fn-t b { font: 600 calc(1.55cqw * var(--fk))/1.15 var(--f-head); color: var(--paper); white-space: nowrap; }
.fn-t small { font: 400 calc(1.2cqw * var(--fk))/1.2 var(--f-body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-badge { position: absolute; right: calc(-.9cqw * var(--fk)); top: calc(-.9cqw * var(--fk)); display: grid; place-items: center; width: calc(2.4cqw * var(--fk)); height: calc(2.4cqw * var(--fk)); border-radius: 50%; background: var(--cyan); color: #06262b; }
.fn-badge svg { width: calc(1.35cqw * var(--fk)); height: calc(1.35cqw * var(--fk)); stroke-width: 2.4; }
.fn-agent { border-color: rgba(150, 110, 224, .55); box-shadow: 0 0 0 1px rgba(101, 44, 209, .25), 0 0 calc(3cqw * var(--fk)) calc(-.6cqw * var(--fk)) rgba(101, 44, 209, .7); }
.fn-agent .fn-ic { background: var(--violet); color: #fff; }
.fn.is-lit { border-color: rgba(76, 192, 211, .7); box-shadow: 0 0 0 1px rgba(76, 192, 211, .25), 0 0 calc(2.6cqw * var(--fk)) calc(-.6cqw * var(--fk)) rgba(76, 192, 211, .7); }
.fn.is-lit::before, .fn.is-lit::after { background: var(--cyan); box-shadow: 0 0 calc(1cqw * var(--fk)) rgba(76, 192, 211, .8); }
.fn-new { border: 1px dashed var(--violet-300); background: rgba(101, 44, 209, .08); animation: proposed 2.6s ease-in-out infinite; }
@keyframes proposed { 50% { box-shadow: 0 0 0 calc(.5cqw * var(--fk)) rgba(150, 110, 224, .12); } }
.fn-test {
  position: absolute; left: calc(1cqw * var(--fk)); bottom: calc(-2.6cqw * var(--fk));
  display: inline-flex; align-items: center; gap: calc(.5cqw * var(--fk));
  padding: calc(.35cqw * var(--fk)) calc(.8cqw * var(--fk)); border-radius: calc(.6cqw * var(--fk));
  background: rgba(76, 192, 211, .14); color: var(--cyan-300);
  font: 500 calc(1.05cqw * var(--fk))/1 var(--f-code);
  opacity: 0; transform: translateY(calc(-.6cqw * var(--fk))); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fn-test::before { content: ''; width: calc(.7cqw * var(--fk)); height: calc(.7cqw * var(--fk)); border-radius: 50%; background: var(--cyan); }

/* ---------- 2 product overview: walkthrough ---------- */
.wt-window { border-radius: 22px; }
.wt-stage { position: relative; aspect-ratio: 860 / 440; container-type: inline-size; background: radial-gradient(120% 90% at 50% 0%, rgba(101, 44, 209, .09), transparent 60%); }
.wt-scene {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 4cqw 5cqw;
  opacity: 0; visibility: hidden; transform: scale(.985);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s;
}
.wt-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s; }
.wt-caption {
  min-height: 64px; padding: 18px 24px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-top: 1px solid var(--line); background: rgba(0, 0, 0, .35);
  font: 500 16.5px/1.45 var(--f-head); color: var(--paper);
}
.wt-controls { display: flex; align-items: flex-start; gap: 18px; margin-top: 22px; }
.wt-chapters { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wt-chapters button {
  width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 10px 0 6px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 14.5px/1.3 var(--f-head); color: var(--mute); transition: color .2s;
}
.wt-chapters button:hover, .wt-chapters .is-on button { color: var(--paper); }
.wt-chapters .bar { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wt-chapters .bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--violet), var(--cyan)); border-radius: inherit; }
.wt-chapters .is-done .bar i { --p: 1; }
.wt-chapters b { font-weight: inherit; }

/* scene: chat */
.chatbox {
  width: min(100%, 50cqw); padding: 2cqw;
  border: 1px solid var(--line-2); border-radius: 2cqw; background: #111115;
  display: flex; flex-direction: column; gap: 1.6cqw;
  box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .9);
}
.cb-head { display: flex; align-items: center; gap: 1.2cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid var(--line); }
.cb-head span:last-child { display: flex; flex-direction: column; gap: .3cqw; }
.cb-head b { font: 600 1.7cqw/1.1 var(--f-head); }
.cb-head small { font-size: 1.25cqw; color: var(--mute); }
.cb-av { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 1cqw; background: var(--slate-2); font: 600 1.7cqw/1 var(--f-head); color: var(--cyan-300); }
.cb-msg { max-width: 88%; padding: 1.3cqw 1.6cqw; border-radius: 1.4cqw; font-size: 1.55cqw; line-height: 1.5; }
.cb-msg.me { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: .4cqw; }
.cb-msg.ai { align-self: flex-start; background: var(--slate-2); color: var(--paper); border-bottom-left-radius: .4cqw; }
.cb-typing { display: flex; gap: .6cqw; padding: 1.3cqw 1.6cqw; border-radius: 1.4cqw; background: var(--slate-2); align-self: flex-start; }
.cb-typing i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--fog); animation: typing 1.2s infinite; }
.cb-typing i:nth-child(2) { animation-delay: .15s; }
.cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-.3cqw); } }
.is-on .cb-msg.me { animation: rise .5s var(--ease) .2s both; }
.is-on .cb-typing { animation: rise .45s var(--ease) 1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2cqw); } }

/* scene: flow */
.sc-flow { padding: 3cqw 3.5cqw 4cqw; }
.sc-flow .fc { width: 100%; }
.sc-flow .fn { opacity: .35; }
.sc-flow.is-on .fn { animation: nodeOn .5s var(--ease) calc(var(--k) * .65s + .3s) both; }
@keyframes nodeOn {
  from { opacity: .35; }
  to { opacity: 1; border-color: rgba(76, 192, 211, .7); box-shadow: 0 0 0 1px rgba(76, 192, 211, .25), 0 0 2.6cqw -.6cqw rgba(76, 192, 211, .7); }
}
.sc-flow .fc-zone { opacity: 0; transition: opacity .5s .6s; }
.sc-flow.is-on .fc-zone { opacity: 1; }

/* scene: agent */
.sc-agent { grid-template-columns: 1fr 1.15fr; gap: 2.4cqw; place-items: start stretch; align-content: center; }
.sc-agent .pane, .sc-result .pane { padding: 1.8cqw 2cqw; border-radius: 1.4cqw; }
.sc-agent .pane-h, .sc-result .pane-h { font-size: 1.6cqw; margin-bottom: 1.2cqw; gap: .9cqw; }
.sc-agent .pane-h svg, .sc-result .pane-h svg { width: 1.9cqw; height: 1.9cqw; }
.sc-agent .pane-h span, .sc-result .pane-h span { font-size: 1.2cqw; }
.sc-agent .kv, .sc-result .kv { font-size: 1.45cqw; gap: .6cqw 1.8cqw; }
.sc-agent .kv dt, .sc-result .kv dt { font-size: 1.3cqw; }
.ag-ctx { display: flex; flex-direction: column; gap: 1.6cqw; }
.quote { font-size: 1.45cqw; color: var(--fog); line-height: 1.55; border-left: 2px solid var(--cyan-700); padding-left: 1.2cqw; }
.model-pick { display: flex; align-items: center; flex-wrap: wrap; gap: .8cqw; margin-bottom: 1.4cqw; }
.mp-l { font: 500 1.25cqw/1 var(--f-head); color: var(--mute); margin-right: .4cqw; }
.mp { display: inline-flex; align-items: center; gap: .6cqw; padding: .7cqw 1.1cqw; border-radius: .8cqw; border: 1px solid var(--line-2); font: 500 1.3cqw/1 var(--f-head); color: var(--mute); }
.mp i { width: 1cqw; height: 1cqw; border-radius: 50%; border: 1px solid currentColor; }
.mp.on { border-color: var(--cyan); color: var(--paper); background: rgba(76, 192, 211, .08); }
.mp.on i { background: var(--cyan); border-color: var(--cyan); }
.ag-think { font-size: 1.4cqw; color: var(--fog); font-style: italic; margin-bottom: 1.2cqw; line-height: 1.5; }
.call { margin: 0; padding: 1.4cqw 1.6cqw; border-radius: 1cqw; background: #0a0a0c; border: 1px solid var(--line); font: 1.3cqw/1.55 var(--f-code); color: var(--fog); white-space: pre; overflow: hidden; }
.c-fn { color: var(--cyan); }
.c-s { color: var(--violet-200); }
.is-on.sc-agent .ag-ctx .pane:nth-child(1) { animation: rise .5s var(--ease) .15s both; }
.is-on.sc-agent .ag-ctx .pane:nth-child(2) { animation: rise .5s var(--ease) .5s both; }
.is-on.sc-agent .ag-run { animation: rise .5s var(--ease) 1s both; }
.is-on.sc-agent .call { animation: rise .5s var(--ease) 2.3s both; }

/* scene: result */
.sc-result { grid-template-columns: 1fr 1.1fr; gap: 3cqw; }
.crm-id { font: 600 2.2cqw/1.1 var(--f-head); margin-bottom: 1.4cqw; }
.crm .pane-h .ok-tag { margin-left: auto; font-size: 1.2cqw; padding: .5cqw .9cqw; }
.crm .ok-tag svg { width: 1.3cqw; height: 1.3cqw; }
.chatbox.small { width: 100%; }
.is-on.sc-result .crm { animation: rise .5s var(--ease) .15s both; }
.is-on.sc-result .cb-msg.ai { animation: rise .5s var(--ease) .9s both; }
.is-on.sc-result .cb-msg.me { animation: none; }

/* scene: trace and the shared trace list */
.trace { width: 100%; }
.sc-trace .trace { width: min(100%, 66cqw); }
.tr-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--f-head); }
.tr-head b { font-size: 16px; }
.tr-head small { margin-left: auto; color: var(--mute); font-size: 12.5px; }
.tr-steps li {
  display: grid; grid-template-columns: 20px minmax(110px, auto) 1fr auto; align-items: center; gap: 4px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.tr-steps li > svg { width: 17px; height: 17px; color: var(--cyan); stroke-width: 2.2; }
.tr-steps b { font: 600 14px/1.2 var(--f-head); }
.tr-steps span { color: var(--mute); font-size: 13px; }
.tr-steps time { color: var(--mute); font: 12px/1 var(--f-code); }
.tr-steps .out { grid-column: 2 / -1; margin: 6px 0 2px; padding: 10px 12px; border-radius: 8px; background: #0a0a0c; border: 1px solid var(--line); font: 12.5px/1.5 var(--f-code); color: var(--cyan-300); white-space: pre-wrap; }
.sc-trace .tr-head b { font-size: 1.8cqw; }
.sc-trace .tr-head small, .sc-trace .tr-head .ok-tag { font-size: 1.25cqw; }
.sc-trace .tr-steps li { font-size: 1.45cqw; padding: 1cqw 0; grid-template-columns: 2cqw 15cqw 1fr auto; gap: .4cqw 1.6cqw; }
.sc-trace .tr-steps li > svg { width: 1.8cqw; height: 1.8cqw; }
.sc-trace .tr-steps b { font-size: 1.5cqw; }
.sc-trace .tr-steps span { font-size: 1.35cqw; }
.sc-trace .tr-steps time { font-size: 1.2cqw; }
.sc-trace .tr-steps .out { font-size: 1.3cqw; padding: 1cqw 1.2cqw; }
.is-on.sc-trace .tr-steps li { animation: rise .4s var(--ease) calc(var(--k) * .2s + .15s) both; }

.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 56px; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(90deg, rgba(101, 44, 209, .14), rgba(101, 44, 209, 0) 70%);
}
.cta-band p { color: var(--fog); max-width: 60ch; }
.cta-band b { color: var(--paper); font-family: var(--f-head); font-weight: 600; font-size: 18px; margin-right: 6px; }

/* ---------- 3 why radon: four lanes ---------- */
.lanes { border-bottom: 1px solid var(--line); }
.lane {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; align-items: center; gap: 24px 48px;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.lane-viz { width: 100%; height: auto; overflow: visible; }
.lv-line { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.4; }
.lv-line.lv-dim, .lv-node.lv-dim { opacity: .45; }
.lv-pulse { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 18 520; stroke-dashoffset: 18; opacity: 0; }
.lane.in-view .lv-pulse { animation: lanePulse 2.6s var(--ease) .3s 1 both; }
.lane:hover .lv-pulse { animation: lanePulse 1.8s var(--ease) infinite; }
@keyframes lanePulse { 0% { stroke-dashoffset: 18; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -520; opacity: 0; } }
.lv-wall { stroke: rgba(76, 192, 211, .55); stroke-width: 1.2; stroke-dasharray: 4 5; }
.lv-port { fill: #17171c; stroke: var(--cyan); stroke-width: 1.2; }
.lv-ic { color: var(--cyan); }
.lv-node { fill: #1b1b21; stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; }
.lv-live { fill: rgba(76, 192, 211, .14); stroke: var(--cyan); stroke-width: 1.2; }
.lv-badge { fill: #0d2a2f; stroke: var(--cyan); stroke-width: 1; }
.lv-badge-dot { fill: var(--cyan); }
.lv-badge-t { font: 600 10.5px var(--f-head); fill: var(--cyan-300); }
.lv-block { fill: rgba(101, 44, 209, .25); stroke: var(--violet-300); stroke-width: 1.2; }
.lv-copy { fill: none; stroke: var(--violet-300); stroke-width: 1.2; stroke-dasharray: 3 4; }
.lv-t { font: 500 11.5px var(--f-head); fill: var(--fog); stroke: none; }
.lv-tl { fill: var(--paper); text-anchor: middle; font-weight: 600; }
.lane-text h3 { font-size: 23px; line-height: 1.2; margin-bottom: 8px; }
.lane-text p { color: var(--fog); max-width: 58ch; }
.lane-proof {
  display: inline-flex; align-items: center; gap: 10px; justify-self: end;
  font: 500 15px/1.3 var(--f-head); color: var(--cyan-300); text-decoration: none;
  padding: 10px 0; border-bottom: 1px solid rgba(76, 192, 211, .35);
  transition: color .2s, border-color .2s; white-space: nowrap;
}
.lane-proof::before { content: ''; width: 9px; height: 6px; border-radius: 2px; background: var(--cyan); }
.lane-proof:hover { color: var(--paper); border-color: var(--paper); }

/* ---------- 4 studio and mini ---------- */
.sec-xp { background: linear-gradient(180deg, var(--void) 0%, var(--graphite) 18%, var(--graphite) 82%, var(--void) 100%); }
.switch { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(0, 0, 0, .3); margin-bottom: 44px; }
.sw {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-width: 190px; padding: 12px 20px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
  font: 600 17px/1 var(--f-head); color: var(--fog); transition: background-color .25s, color .25s, box-shadow .25s;
}
.sw small { font: 400 13px/1 var(--f-body); color: var(--mute); }
.sw:hover { color: var(--paper); }
.sw[aria-selected="true"] { background: var(--slate-2); color: var(--paper); box-shadow: inset 0 -2px 0 var(--violet-300), 0 10px 30px -14px rgba(101, 44, 209, .8); }
.sw[aria-selected="true"] small { color: var(--cyan-300); }
/* copy above, the interface full width below: the product gets the room it needs to be read */
.xp { display: block; }
.xp-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.xp-copy > h3, .xp-copy > .xp-lead, .xp-copy > .xp-act { grid-column: 1; }
.xp-copy > .xp-list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.xp-ui { margin-top: 52px; }
.xp + .xp { margin-top: 80px; }
.js .xp + .xp { margin-top: 0; }
.xp[hidden] { display: none; }
.xp.is-entering .xp-copy, .xp.is-entering .xp-ui { animation: rise .55s var(--ease) both; }
.xp.is-entering .xp-ui { animation-delay: .08s; }
.xp-copy h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.xp-lead { margin-top: 16px; color: var(--fog); font-size: 17px; font-weight: 300; }
.xp-list { margin-top: 26px; display: flex; flex-direction: column; }
.xp-list li { padding: 14px 0 14px 24px; border-top: 1px solid var(--line); position: relative; color: var(--fog); font-size: 15.5px; }
.xp-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 9px; height: 6px; border-radius: 2px; background: var(--violet-300); }
.xp-list b { color: var(--paper); font-family: var(--f-head); font-weight: 600; font-size: 16.5px; margin-right: 4px; }
.xp-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--btn-gap); margin-top: 30px; }
.xp-ui { margin: 0; }

.studio { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.st-lib { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.st-h { font: 600 12px/1 var(--f-head); color: var(--mute); padding: 0 8px 10px; }
.st-lib span { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 8px; font: 500 13px/1 var(--f-head); color: var(--fog); }
.st-lib span svg { width: 16px; height: 16px; color: var(--violet-200); }
.st-lib span.on { background: rgba(101, 44, 209, .16); color: var(--paper); }
.st-main {
  position: relative; padding: 22px 26px 22px;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px;
}
.st-assist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; margin-top: 8px; }
.st-prompt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #121216; font-size: 13.5px; color: var(--paper); line-height: 1.4; }
.st-mark { flex: none; width: 22px; height: 18px; fill: var(--violet-200); }
.st-plan { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(150, 110, 224, .5); background: rgba(36, 16, 74, .55); font-size: 13px; color: var(--fog); }
.st-plan-h { font: 600 13px/1 var(--f-head); color: var(--violet-200); margin-bottom: 8px; }
.st-plan ol { list-style: decimal; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.st-plan em { font-style: normal; color: var(--paper); }
.st-plan-act { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }

.mini { display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; min-height: 400px; }
.mi-side, .mi-tasks { padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.mi-side { border-right: 1px solid var(--line); }
.mi-tasks { border-left: 1px solid var(--line); }
.mi-agent { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.mi-agent i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c); font: 600 13px/1 var(--f-head); font-style: normal; color: #fff; }
.mi-agent b { font: 500 13px/1.2 var(--f-head); color: var(--fog); }
.mi-agent.on { background: rgba(101, 44, 209, .16); }
.mi-agent.on b { color: var(--paper); }
.mi-chat { padding: 22px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.mi-chat .cb-msg { font-size: 14px; padding: 13px 15px; border-radius: 14px; max-width: 92%; }
.mi-chat .cb-msg.me { border-bottom-right-radius: 4px; }
.mi-chat .cb-msg.ai { border-bottom-left-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mi-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mi-files span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .22); font: 500 12px/1 var(--f-head); }
.mi-files svg { width: 13px; height: 13px; }
.mi-task { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.mi-task svg { width: 17px; height: 17px; color: var(--mute); grid-row: span 2; }
.mi-task b { font: 500 13px/1.3 var(--f-head); color: var(--fog); }
.mi-task small { font-size: 11.5px; color: var(--mute); }
.mi-task.new { border-color: rgba(76, 192, 211, .5); background: rgba(76, 192, 211, .06); }
.mi-task.new svg { color: var(--cyan); }
.mi-task.new b { color: var(--paper); }

/* ---------- 5 how it works ---------- */
.how-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.steps { counter-reset: none; }
.step { min-height: 46vh; padding: 28px 0 28px 0; border-top: 1px solid var(--line); opacity: .42; transition: opacity .4s var(--ease); }
.step:last-child { min-height: 0; padding-bottom: 0; }
.step.is-on { opacity: 1; }
.step-n { display: block; font: 600 14px/1 var(--f-head); color: var(--cyan); margin-bottom: 14px; }
.step h3 { font-size: 26px; margin-bottom: 10px; }
.step p { color: var(--fog); max-width: 46ch; }
.how-vis { position: sticky; top: calc(var(--hdr) + 40px); }
.hv-env { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.hv-env span { padding: 5px 10px; border-radius: 6px; font-size: 12px; color: var(--mute); transition: background-color .4s, color .4s; }
.how-vis .e-dev { background: rgba(150, 110, 224, .18); color: var(--violet-200); }
.how-vis[data-stage="4"] .e-dev { background: none; color: var(--mute); }
.how-vis[data-stage="4"] .e-prod { background: rgba(76, 192, 211, .16); color: var(--cyan); }
.hv-body { padding: 26px 22px 18px; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 18px 18px; }
.hv-scroll { padding-bottom: 2.6%; }
.hv-foot { position: relative; height: 54px; margin-top: 10px; }
.hv-f {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35);
  font: 500 14px/1.3 var(--f-head); color: var(--paper);
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hv-f svg { width: 17px; height: 17px; color: var(--cyan); flex: none; }
.hv-f .st-mark { width: 20px; height: 17px; fill: var(--violet-200); }
.hv-ep { margin-left: auto; font: 12.5px/1 var(--f-code); color: var(--cyan-300); }
.how-vis[data-stage="1"] .hv-f1, .how-vis[data-stage="2"] .hv-f2, .how-vis[data-stage="3"] .hv-f3, .how-vis[data-stage="4"] .hv-f4 { opacity: 1; transform: none; }
.how-vis .fc-zone, .how-vis .fn-badge { opacity: 0; transition: opacity .5s var(--ease); }
.how-vis .fc-edges .e { opacity: .35; transition: opacity .5s; }
.how-vis:not([data-stage="1"]) .fc-zone, .how-vis:not([data-stage="1"]) .fn-badge { opacity: 1; }
.how-vis:not([data-stage="1"]) .fc-edges .e { opacity: 1; }
.how-vis[data-stage="2"] .hv-model { color: var(--cyan-300); }
.how-vis[data-stage="3"] .fn-test, .how-vis[data-stage="4"] .fn-test { opacity: 1; transform: none; }
.how-vis[data-stage="4"] .fn::before, .how-vis[data-stage="4"] .fn::after { background: var(--cyan); }
.how-vis[data-stage="1"] .fn { animation: placeIn .5s var(--ease) both; }
.how-vis[data-stage="1"] .fn:nth-of-type(3) { animation-delay: .06s; }
.how-vis[data-stage="1"] .fn:nth-of-type(4) { animation-delay: .12s; }
.how-vis[data-stage="1"] .fn:nth-of-type(5) { animation-delay: .18s; }
.how-vis[data-stage="1"] .fn:nth-of-type(6) { animation-delay: .24s; }
.how-vis[data-stage="1"] .fn:nth-of-type(7) { animation-delay: .3s; }
@keyframes placeIn { from { opacity: 0; transform: translateY(1cqw) scale(.97); } }
.swipe-hint { display: none; }
.swipe-hint.phone { display: none !important; margin-top: 10px; font-size: 13px; color: var(--mute); }

/* ---------- 6 use cases ---------- */
.cases { border-bottom: 1px solid var(--line); }
.case { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.case-h { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.case-h h3 { font-size: 23px; line-height: 1.2; }
.tag { padding: 5px 10px; border-radius: 6px; font: 600 12.5px/1 var(--f-head); background: rgba(101, 44, 209, .2); color: var(--violet-200); }
.tag-mini { background: rgba(76, 192, 211, .14); color: var(--cyan-300); }
.case-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; position: relative; }
.io { position: relative; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.io p { font-size: 15px; color: var(--paper); line-height: 1.5; }
.io-k { display: block; font: 600 12.5px/1 var(--f-head); color: var(--mute); margin-bottom: 10px; }
.io-out { border-color: rgba(76, 192, 211, .4); background: rgba(76, 192, 211, .05); }
.io-out .io-k { color: var(--cyan-300); }
.case-steps { counter-reset: cs; position: relative; padding: 4px 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.case-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--line-2), rgba(76, 192, 211, .5)); z-index: -1; }
.case-steps li { counter-increment: cs; display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: 8px; background: var(--void); font-size: 14px; color: var(--fog); line-height: 1.4; }
.case-steps li::before { content: counter(cs); flex: none; font: 600 12px/1 var(--f-head); color: var(--violet-200); }
.also { margin-top: 30px; color: var(--fog); font-size: 15.5px; }
.also b { color: var(--paper); font-family: var(--f-head); font-weight: 600; margin-right: 6px; }

/* ---------- isometric 3D diagrams: plain CSS 3D, a few dozen faces, no extra WebGL ----------
   A world plane (--W x --D scene px) is tilted by --rx/--rz. Boxes are a top face plus the two faces
   the camera sees; labels counter-rotate so they always face the reader. --rise lifts everything in. */
@property --rx { syntax: '<angle>'; inherits: true; initial-value: 56deg; }
@property --rz { syntax: '<angle>'; inherits: true; initial-value: -40deg; }
@property --rise { syntax: '<number>'; inherits: true; initial-value: 1; }

.iso3d { position: relative; overflow: hidden; aspect-ratio: 16 / 10; --rise: 0; transition: --rise 1.1s var(--ease) .25s; contain: layout paint; }
.iso3d.in-view { --rise: 1; }
.iso-fit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 2600px; transform: translate(var(--ix, 0px), var(--iy, 40px)) scale(var(--k, .8)); }
.iso {
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  --rx: 20deg; --rz: -8deg;
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
  transition: --rx 1.3s var(--ease), --rz 1.3s var(--ease);
}
.iso3d.in-view .iso { --rx: var(--px-rx, 56deg); --rz: var(--px-rz, -40deg); }
.iso3d.is-live .iso { transition-duration: .7s; }
.iso-plane { position: absolute; left: calc(var(--W) * -.5px); top: calc(var(--D) * -.5px); width: calc(var(--W) * 1px); height: calc(var(--D) * 1px); transform-style: preserve-3d; }

.box {
  --h: 24; --z: 0; --c: #26262e;
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px); height: calc(var(--d) * 1px);
  transform-style: preserve-3d; transform: translateZ(calc(var(--z) * var(--rise) * 1px));
}
.box > .t {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: var(--r, 6px); background: var(--top, var(--c));
  transform: translateZ(calc(var(--h) * var(--rise) * 1px));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 22px 26px -22px rgba(255, 255, 255, .3);
  transition: box-shadow .45s var(--ease), background-color .45s;
}
.box > .s { position: absolute; left: 0; top: 100%; width: 100%; height: calc(var(--h) * var(--rise) * 1px); transform-origin: 50% 0; transform: rotateX(90deg); background: var(--cs, color-mix(in srgb, var(--c) 70%, #000)); }
.box > .w { position: absolute; right: 100%; top: 0; width: calc(var(--h) * var(--rise) * 1px); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background: var(--cw, color-mix(in srgb, var(--c) 48%, #000)); }
.box > .t > svg { width: 34%; max-width: 40px; height: auto; aspect-ratio: 1; color: rgba(255, 255, 255, .85); stroke-width: 1.6; }
.box.plate > .t { border-radius: 14px; background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px), linear-gradient(135deg, color-mix(in srgb, var(--c) 100%, #fff 6%), var(--c)); background-size: 22px 22px, 100% 100%; }
.box.glass > .t { background: rgba(76, 192, 211, .14); box-shadow: inset 0 0 0 1px rgba(76, 192, 211, .6); }
.box.glass > .s, .box.glass > .w { background: rgba(76, 192, 211, .09); }
.box.wall > .t { background: rgba(76, 192, 211, .5); box-shadow: none; }
.box.wall > .w { background: linear-gradient(90deg, rgba(76, 192, 211, .05), rgba(76, 192, 211, .2)); box-shadow: inset 0 0 0 1px rgba(76, 192, 211, .45); }
.box.wall > .s { background: rgba(76, 192, 211, .25); }
.box.lit > .t { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 26px 2px rgba(76, 192, 211, .55); }

.iso-routes {
  position: absolute; left: 0; top: 0; width: calc(var(--W) * 1px); height: calc(var(--D) * 1px); overflow: visible; fill: none;
  transform: translateZ(calc(var(--rz-z, 20) * var(--rise) * 1px));
}
.iso-routes .r { stroke: rgba(255, 255, 255, .28); stroke-width: 2; stroke-linecap: round; }
.iso-routes .r.dim { stroke: rgba(255, 255, 255, .14); }
.iso-routes .r.flow { stroke: var(--cyan); stroke-dasharray: 6 9; stroke-width: 2.4; opacity: .75; }
.iso-dot { opacity: 0; transition: opacity .3s; }
.iso-dot .halo { fill: rgba(76, 192, 211, .28); }
.iso-dot .core { fill: #dff9ff; }

/* labels that face the reader; font never drops below ~11px on screen */
.bb { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--z, 0) * var(--rise) * 1px)); }
.bb > span {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(-50%, -100%) translateY(calc(var(--lift, 14) * -1px));
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .55em .85em; border-radius: .7em; white-space: nowrap;
  background: rgba(14, 14, 18, .92); border: 1px solid var(--line-2);
  font: 600 calc(max(15, 11.5 / var(--k, 1)) * 1px)/1.2 var(--f-head); letter-spacing: .005em; color: #fff;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; backface-visibility: hidden;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9);
  opacity: calc(var(--rise) * var(--on, 1)); transition: opacity .4s, border-color .4s, box-shadow .4s;
}
.bb > span small { font: 400 .76em/1.25 var(--f-body); letter-spacing: 0; color: var(--fog); }
/* side labels sit next to their block, where nothing stands behind them */
.bb.side-l > span, .bb.side-r > span { align-items: flex-start; }
.bb.side-l > span { transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(calc(-100% - 18px), -50%); }
.bb.side-r > span { transform: rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))) translate(18px, -50%); }
.bb.side-l > span::after, .bb.side-r > span::after { top: 50%; width: 18px; height: 1px; }
.bb.side-l > span::after { left: 100%; }
.bb.side-r > span::after { left: auto; right: 100%; }
.bb > span::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--lift, 14) * 1px); background: rgba(255, 255, 255, .3); }
.bb.zone > span { background: none; border: 0; padding: 0; font-size: calc(max(16, 12 / var(--k, 1)) * 1px); color: var(--fog); flex-direction: row; gap: .45em; }
.bb.zone > span::after, .bb.zone.side-r > span::after { display: none; }
.bb.zone svg { width: 1.1em; height: 1.1em; }
.bb.lit > span { border-color: var(--cyan); box-shadow: 0 0 22px -4px rgba(76, 192, 211, .8); }
.bb.rec > span { --on: 0; font-family: var(--f-code); font-weight: 500; color: var(--cyan-300); border-color: rgba(76, 192, 211, .55); }
.bb.warn > span { --on: 0; color: var(--amber); border-color: rgba(233, 169, 75, .6); background: rgba(40, 28, 10, .92); }

/* ---------- 7 connections ---------- */
.pn { margin: 0 0 72px; }
.pn-scroll { border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(70% 90% at 70% 45%, rgba(76, 192, 211, .07), transparent 65%), radial-gradient(60% 80% at 25% 55%, rgba(101, 44, 209, .08), transparent 65%), var(--graphite); }
.pn3d { aspect-ratio: 16 / 9; --iy: 8px; }
.pn3d:not([data-step="0"]) .iso-dot { opacity: 1; }
.pn3d[data-step="1"] .pn-req > .t, .pn3d[data-step="4"] .pn-req > .t,
.pn3d[data-step="2"] .pn-conn > .t, .pn3d[data-step="3"] .pn-api > .t { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 30px 4px rgba(76, 192, 211, .55); }
.pn3d[data-step="2"] .pn-pipe > .t { background: rgba(76, 192, 211, .3); }
.pn3d[data-step="1"] .pn-l-req > span, .pn3d[data-step="4"] .pn-l-req > span, .pn3d[data-step="2"] .pn-l-conn > span,
.pn3d[data-step="2"] .pn-l-tun > span, .pn3d[data-step="3"] .pn-l-api > span { border-color: var(--cyan); box-shadow: 0 0 22px -4px rgba(76, 192, 211, .8); }
.pn3d[data-step="4"] .bb.rec > span { --on: 1; }
.pn-l-tun > span { color: var(--cyan-300); }
.pn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 22px; counter-reset: ps; }
.pn-steps li { counter-increment: ps; position: relative; padding-top: 16px; border-top: 2px solid var(--line); font-size: 14.5px; color: var(--mute); line-height: 1.5; transition: color .4s, border-color .4s; }
.pn-steps li::before { content: counter(ps); display: block; font: 600 13px/1 var(--f-head); color: var(--mute); margin-bottom: 8px; transition: color .4s; }
.pn-steps li.is-on { color: var(--paper); border-color: var(--cyan); }
.pn-steps li.is-on::before { color: var(--cyan); }

.conn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.conn-grid li { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.conn-grid li > svg { width: 24px; height: 24px; color: var(--cyan); margin-bottom: 16px; }
.conn-grid h3 { font-size: 19px; margin-bottom: 8px; }
.conn-grid p { color: var(--fog); font-size: 15px; }

/* ---------- 8 enterprise: data path ---------- */
.sec-ent { background: linear-gradient(180deg, var(--void) 0%, var(--graphite) 14%, var(--graphite) 86%, var(--void) 100%); }
.dp { display: flex; flex-direction: column; gap: 12px; }
/* the switches live in the frame, directly above the scene they change */
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.seg { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { float: left; padding: 0; font: 500 14px/1 var(--f-head); color: var(--fog); }
.seg-track { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, #121216, #0b0b0e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.seg-track label { position: relative; cursor: pointer; }
.seg-track input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-track span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 8px; font: 600 14px/1 var(--f-head); letter-spacing: .01em; color: var(--fog); white-space: nowrap; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.seg-track label:hover span { color: var(--paper); background: rgba(255, 255, 255, .04); }
.seg-track input:checked + span {
  color: #fff;
  background: linear-gradient(135deg, #7440de 0%, var(--violet) 55%, #5525af 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -8px rgba(101, 44, 209, .95);
}
.seg-track input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dp-vis { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: radial-gradient(70% 90% at 35% 50%, rgba(101, 44, 209, .09), transparent 65%), var(--void); }
.dp3d { aspect-ratio: 2 / 1; max-height: max(340px, calc(100svh - 290px)); --ix: 64px; --iy: -6px; }
.dp3d .r.flow { animation: none; }
.dp3d.is-playing .r.flow { animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -30; } }
.dp .iso-routes .dp-ml-prov, .dp .iso-routes .dp-cross { opacity: 0; transition: opacity .4s; }
.dp[data-model="provider"] .iso-routes .dp-ml-prov, .dp[data-model="provider"] .iso-routes .dp-cross { opacity: 1; }
.dp[data-model="provider"] .iso-routes .dp-ml-local { opacity: 0; }
.dp[data-model="provider"] .dp-ml-prov { stroke: var(--amber); }
.dp-cross { fill: var(--void); stroke: var(--amber); stroke-width: 2.5; }
.dp-model3 { --z: 18; left: 480px; top: 220px; transition: left .9s var(--ease), transform .9s var(--ease); }
.dp[data-model="provider"] .dp-model3 { --z: 10; left: 790px; --c: #8a5a1f; }
.dp-model-l { --x: 540; --y: 260; --z: 52; transition: left .9s var(--ease), transform .9s var(--ease); }
.dp[data-model="provider"] .dp-model-l { --x: 850; --z: 44; }
.dp[data-model="provider"] .dp-model-l > span { border-color: rgba(233, 169, 75, .6); }
.dp-out > .t { transition: box-shadow .4s; }
.dp[data-model="provider"] .dp-out > .t { box-shadow: inset 0 0 0 1px rgba(233, 169, 75, .55), 0 0 40px -6px rgba(233, 169, 75, .35); }
.dp-out-l > span { color: var(--mute); }
.dp[data-model="provider"] .dp-out-l > span { --on: 0; }
.dp-shield > .t { background: rgba(101, 44, 209, .22); box-shadow: inset 0 0 0 2px var(--violet-200), 0 0 34px 4px rgba(150, 110, 224, .55); }
.dp-shield { --cs: rgba(150, 110, 224, .5); --cw: rgba(150, 110, 224, .35); }
.dp[data-runtime="self"] .dp-run3 > .t { box-shadow: inset 0 0 0 2px var(--violet-200), inset 0 22px 26px -22px rgba(255, 255, 255, .3); }
.dp[data-runtime="self"] .dp-run-l > span { border-color: var(--violet-300); box-shadow: 0 0 22px -4px rgba(150, 110, 224, .9); }
/* local model: the gate is sealed, the outside plate goes dark, a cyan badge confirms */
.dp-gate > .t, .dp-gate > .s, .dp-gate > .w { transition: opacity .45s; }
.dp-gate > .w { background: linear-gradient(90deg, rgba(76, 192, 211, .25), rgba(76, 192, 211, .55)); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 24px rgba(76, 192, 211, .6); }
.dp[data-model="provider"] .dp-gate > .t, .dp[data-model="provider"] .dp-gate > .s, .dp[data-model="provider"] .dp-gate > .w { opacity: 0; }
.dp-out { --c: #111113; }
.dp[data-model="provider"] .dp-out { --c: #2b1f0c; }
.dp[data-model="local"] .dp-model3 > .t { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 26px 2px rgba(76, 192, 211, .5); }
.dp[data-model="provider"] .dp-model3 > .t { box-shadow: inset 0 0 0 2px var(--amber), 0 0 26px 2px rgba(233, 169, 75, .5); }
.dp-shield > .t, .dp-shield > .s, .dp-shield > .w { opacity: 0; transition: opacity .4s; }
.dp[data-runtime="self"] .dp-shield > .t, .dp[data-runtime="self"] .dp-shield > .s, .dp[data-runtime="self"] .dp-shield > .w { opacity: 1; }
.dp-run-l b { font-weight: 600; }
.dp-scene { position: relative; }
.dp-status {
  position: absolute; z-index: 2; right: 16px; top: 16px; margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px;
  font: 600 13.5px/1 var(--f-head); color: var(--cyan-300);
  background: rgba(8, 30, 34, .9); border: 1px solid rgba(76, 192, 211, .5);
  transition: color .3s, border-color .3s, background-color .3s;
}
.dp-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.dp-status .st-warn { display: none; }
.dp[data-model="provider"] .dp-status { color: var(--amber); background: rgba(40, 28, 10, .92); border-color: rgba(233, 169, 75, .55); }
.dp[data-model="provider"] .dp-status .st-ok { display: none; }
.dp[data-model="provider"] .dp-status .st-warn { display: inline; }
.dp-read { min-height: 4.6em; margin: 0; padding: 16px 20px 18px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--fog); line-height: 1.6; }
.dp-read::before { content: ''; display: inline-block; width: 9px; height: 6px; margin-right: 10px; border-radius: 2px; background: var(--cyan); vertical-align: middle; transition: background-color .3s; }
.dp[data-model="provider"] .dp-read::before { background: var(--amber); }
.dp-note { margin-top: 30px; padding: 18px 22px; border-radius: 12px; border: 1px solid rgba(233, 169, 75, .3); background: rgba(233, 169, 75, .05); color: var(--fog); font-size: 15.5px; }
.dp-note b { color: var(--paper); font-family: var(--f-head); font-weight: 600; }
.roles { margin-top: 88px; }
.roles-h { font-size: 24px; margin-bottom: 26px; }
.role-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.role { padding: 24px 24px 26px 0; }
.role + .role { padding-left: 24px; border-left: 1px solid var(--line); }
.role dt { font: 600 19px/1.2 var(--f-head); display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.role dt span { font: 500 13px/1.2 var(--f-head); color: var(--cyan-300); }
.role dd { margin: 0; color: var(--fog); font-size: 14.5px; }
.roles-rule { margin-top: 10px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 600 17px/1.4 var(--f-head); color: var(--paper); }
.roles-org { display: flex; gap: 14px; margin-top: 22px; color: var(--fog); font-size: 15px; max-width: 80ch; }
.roles-org svg { flex: none; width: 22px; height: 22px; color: var(--violet-200); margin-top: 2px; }

/* ---------- 9 product evidence ---------- */
.ev-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.ev-tab {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: none; cursor: pointer;
  font: 600 15px/1 var(--f-head); color: var(--fog); transition: color .2s, border-color .2s, background-color .2s;
}
.ev-tab svg { width: 18px; height: 18px; }
.ev-tab:hover { color: var(--paper); border-color: rgba(255, 255, 255, .3); }
.ev-tab[aria-selected="true"] { color: var(--paper); border-color: var(--violet-300); background: rgba(101, 44, 209, .16); }
.ev-tab[aria-selected="true"] svg { color: var(--cyan); }
.ev-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ev-panel + .ev-panel { margin-top: 72px; }
.js .ev-panel + .ev-panel { margin-top: 0; }
.ev-panel[hidden] { display: none; }
.ev-copy h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin-bottom: 16px; }
.ev-copy p { color: var(--fog); }
.ev-ui .trace, .dep { padding: 18px 22px 20px; }

.rec .rec-st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; font: 600 12px/1 var(--f-head); }
.rec .rec-st svg { width: 13px; height: 13px; stroke-width: 2.2; }
.rec-st1 { background: rgba(233, 169, 75, .14); color: var(--amber); }
.rec-st2 { background: rgba(76, 192, 211, .13); color: var(--cyan); display: none !important; }
.rec-step { --st: var(--amber); }
.rec-step > svg.ic-alert { color: var(--amber); }
.rec-step > svg.ic-ok, .rec-step .rec-b { display: none; }
.rec-step .rec-a { color: var(--amber); }
.rec-step .out { color: var(--fog); }
.rec .tr-steps li { opacity: 1; }
.rec-after { opacity: .3 !important; }
.rec-after > svg { color: var(--mute) !important; }
.rec[data-phase="0"] .rec-step, .rec[data-phase="0"] .rec-after { opacity: .25 !important; }
.rec[data-phase="0"] .rec-step .out, .rec[data-phase="1"] .rec-step .out { opacity: 0; }
.rec .rec-step .out { transition: opacity .5s; }
.rec[data-phase="3"] .rec-st1 { display: none; }
.rec[data-phase="3"] .rec-st2 { display: inline-flex !important; }
.rec[data-phase="3"] .rec-step > svg.ic-alert, .rec[data-phase="3"] .rec-step .rec-a { display: none; }
.rec[data-phase="3"] .rec-step > svg.ic-ok, .rec[data-phase="3"] .rec-step .rec-b { display: block; }
.rec[data-phase="3"] .rec-step .rec-b { color: var(--cyan-300); }
.rec[data-phase="3"] .rec-after { opacity: 1 !important; }
.rec[data-phase="3"] .rec-after > svg { color: var(--cyan) !important; }

.dep-envs { display: inline-flex; padding: 3px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); margin-bottom: 16px; }
.dep-envs span { padding: 7px 13px; border-radius: 7px; font: 600 13px/1 var(--f-head); color: var(--mute); }
.dep-envs .on { background: rgba(76, 192, 211, .15); color: var(--cyan); }
.dep-list li { display: grid; grid-template-columns: 96px 1fr auto; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.dep-list b { font: 600 14.5px/1.2 var(--f-head); grid-row: span 2; }
.dep-list span { font-size: 14px; color: var(--fog); }
.dep-list small { font-size: 12.5px; color: var(--mute); grid-column: 2; }
.dep-list .live, .dep-list .fake-btn { grid-column: 3; grid-row: 1 / span 2; }
.live { font: 600 12px/1 var(--f-head); font-style: normal; padding: 5px 10px; border-radius: 6px; background: rgba(76, 192, 211, .14); color: var(--cyan); }
.dep-cur { position: relative; }
.dep-cur::before { content: ''; position: absolute; left: -22px; top: 14px; bottom: 14px; width: 2px; background: var(--cyan); border-radius: 2px; }

.reuse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.rb-body { padding: 18px 20px 20px; }
.rb-name { display: flex; align-items: center; gap: 10px; font: 600 17px/1.2 var(--f-head); margin-bottom: 14px; }
.rb-name svg { width: 20px; height: 20px; color: var(--violet-200); }
.rb-steps { counter-reset: rb; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.rb-steps li { counter-increment: rb; display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(101, 44, 209, .1); border: 1px solid rgba(150, 110, 224, .25); font: 500 13.5px/1.2 var(--f-head); }
.rb-steps li::before { content: counter(rb); color: var(--violet-200); }
.rb-used { font-size: 13px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rb-used span { padding: 5px 9px; border-radius: 6px; border: 1px solid rgba(76, 192, 211, .4); color: var(--cyan-300); font: 500 12.5px/1 var(--f-head); }
.code { margin: 0; padding: 18px 20px; font: 13px/1.7 var(--f-code); color: var(--fog); white-space: pre; overflow-x: auto; }
.code .k { color: var(--violet-200); }
.code .f { color: var(--cyan); }
.code .s { color: #c9b8f0; }
.code .n { color: var(--amber); }
.io-chip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 12px; font: 500 14px/1.3 var(--f-head); color: var(--fog); }
.io-chip svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }

/* ---------- 10 faq ---------- */
.sec-faq { background: var(--graphite); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--hdr) + 40px); margin-bottom: 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 600 19px/1.35 var(--f-head); color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--cyan), var(--cyan)) center / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) center / 2px 14px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #fff; }
.faq details p { padding: 0 48px 24px 0; color: var(--fog); max-width: 66ch; }
.faq details[open] p { animation: rise .35s var(--ease) both; }

/* ---------- 11 demo form ---------- */
.sec-demo { overflow: hidden; }
.sec-demo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 70% at 85% 30%, rgba(101, 44, 209, .22), transparent 70%), radial-gradient(40% 50% at 70% 90%, rgba(76, 192, 211, .08), transparent 70%);
}
.demo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.demo-copy h2 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.024em; text-wrap: balance; }
.demo-lead { margin-top: 22px; color: var(--fog); font-size: 18px; font-weight: 300; max-width: 46ch; }
.next { margin-top: 44px; counter-reset: nx; display: flex; flex-direction: column; }
.next li { counter-increment: nx; display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; padding: 16px 0; border-top: 1px solid var(--line); }
.next li::before { content: counter(nx); grid-row: span 2; font: 600 14px/1.5 var(--f-head); color: var(--cyan); }
.next b { font: 600 16.5px/1.4 var(--f-head); }
.next span { color: var(--fog); font-size: 15px; }
.form-card { position: relative; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-2); border-radius: 22px; background: linear-gradient(180deg, #16161a, #101013); box-shadow: 0 40px 100px -50px rgba(101, 44, 209, .7); }
.form { display: flex; flex-direction: column; gap: 18px; }
.f-row.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font: 600 14.5px/1.3 var(--f-head); color: var(--paper); padding: 0; }
.opt { font-weight: 500; color: var(--mute); margin-left: 6px; font-size: 13px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 10px;
  background: #0a0a0c; color: var(--paper); font: 400 15.5px/1.5 var(--f-body);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 52px; }
.field ::placeholder { color: #75757d; }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .26); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(76, 192, 211, .2); }
.field.has-err input, .field.has-err textarea { border-color: var(--danger); }
.f-err { min-height: 0; font-size: 13.5px; color: var(--danger); }
.f-err:empty { display: none; }
.f-choice { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.f-choice legend { margin-bottom: 8px; width: 100%; }
.f-choice label { position: relative; cursor: pointer; }
.f-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-choice label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 10px; font: 600 14.5px/1 var(--f-head); color: var(--fog); transition: border-color .2s, background-color .2s, color .2s; }
.f-choice label:hover span { border-color: rgba(255, 255, 255, .3); color: var(--paper); }
.f-choice input:checked + span { border-color: var(--cyan); background: rgba(76, 192, 211, .08); color: var(--paper); }
.f-choice input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.f-privacy { font-size: 13.5px; color: var(--mute); line-height: 1.55; }
.f-submit { display: flex; flex-direction: column; gap: 12px; }
.b-busy { display: none; }
.form.is-busy .b-idle { display: none; }
.form.is-busy .b-busy { display: inline-flex; align-items: center; gap: 10px; }
.form.is-busy .b-busy::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.form.is-busy button[type="submit"] { cursor: progress; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }
.f-status { font-size: 14.5px; line-height: 1.5; }
.f-status:empty { display: none; }
.f-status.is-err { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(240, 124, 126, .45); background: rgba(240, 124, 126, .07); color: #f5b3b4; }
.form-done { text-align: left; padding: 12px 4px; }
.form-done:focus { outline: none; }
.fd-mark { width: 64px; height: 53px; fill: var(--cyan); margin-bottom: 22px; filter: drop-shadow(0 0 18px rgba(76, 192, 211, .5)); }
.form-done h3 { font-size: 28px; margin-bottom: 12px; }
.form-done p { color: var(--fog); font-size: 17px; max-width: 44ch; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.ftr-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1.6fr; gap: 40px; }
.ftr-brand .lockup { height: 30px; width: auto; fill: #fff; margin-bottom: 18px; }
.ftr-brand p, .ftr-parent p { color: var(--mute); font-size: 14.5px; max-width: 40ch; }
.ftr-nav, .ftr-act { display: flex; flex-direction: column; gap: 4px; }
.ftr-nav a, .ftr-act a { font: 500 15px/1 var(--f-head); color: var(--fog); text-decoration: none; padding: 8px 0; }
.ftr-nav a:hover, .ftr-act a:hover { color: var(--paper); }
.ftr-parent { display: flex; gap: 20px; align-items: flex-start; }
.ftr-parent .rf img { width: 54px; height: auto; }
.ftr-parent p a { color: var(--fog); }
.ftr-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }

/* ---------- motion preferences ---------- */
.motion-paused .fc-edges .ef,
.motion-paused .fn-new,
.motion-paused .cb-typing i,
.motion-paused .lv-pulse { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .handoff path { stroke-dashoffset: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav a { padding: 10px 9px; font-size: 14.5px; }
  .endorse { display: none; }
  .lane { grid-template-columns: 220px minmax(0, 1fr); }
  .lane-proof { grid-column: 2; justify-self: start; }
  .role-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .role:nth-child(3) { padding-left: 0; border-left: 0; }
  .role:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ftr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reuse { grid-template-columns: minmax(0, 1fr); }
  /* keep the flow readable: a scrollable crop instead of a shrunken canvas */
  .hv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-scroll .fc { min-width: 680px; }
  .swipe-hint { display: block; margin-top: 10px; font-size: 13px; color: var(--mute); }
}

@media (max-width: 960px) {
  :root { --hdr: 64px; }
  .nav, .signin { display: none; }
  .menu-btn { display: grid; }
  .hdr-act { margin-left: auto; gap: var(--btn-gap); }
  .hero { min-height: 0; padding-top: calc(var(--hdr) + 36px); padding-bottom: 72px; align-items: flex-start; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-shade { background: linear-gradient(180deg, var(--void) 0%, rgba(6, 6, 7, .88) 38%, rgba(6, 6, 7, 0) 62%), linear-gradient(0deg, var(--void) 0%, rgba(6, 6, 7, 0) 14%); }
  .hero-stage { max-width: 560px; justify-self: center; }
  .wt-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .wt-chapters b { font-size: 12.5px; }
  .how-grid, .ev-panel, .faq-grid, .demo-grid, .dp, .xp-copy { grid-template-columns: minmax(0, 1fr); }
  .xp-copy > .xp-list { grid-column: 1; grid-row: auto; margin-top: 26px; }
  .xp-ui { margin-top: 36px; }
  .how-vis { position: relative; top: 0; order: -1; }
  .step { min-height: 0; opacity: 1; }
  .hv-scroll, .pn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hv-scroll .fc { min-width: 640px; }
  .pn3d { min-width: 620px; }
  .swipe-hint { display: block; margin-top: 10px; font-size: 13px; color: var(--mute); }
  .case { grid-template-columns: minmax(0, 1fr); }
  .conn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .faq-grid .sec-head { position: static; }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .st-lib { display: none; }
  .mini { grid-template-columns: 150px minmax(0, 1fr); }
  .mi-tasks { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hdr-brand .lockup { height: 23px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 44px); }
  .lead { font-size: 16.5px; }
  .cta-row .btn, .xp-act .btn, .cta-band .btn { flex: 1 1 100%; }
  .proof { flex-direction: column; gap: 14px; }
  .flow-chip { padding: 8px 12px 8px 8px; }
  .chip-t b { font-size: 13px; }
  .chip-ic { width: 28px; height: 28px; }
  .wt-stage { aspect-ratio: 860 / 560; }
  .wt-caption { font-size: 15px; min-height: 84px; padding: 14px 16px; }
  .wt-controls { flex-direction: column; gap: 10px; }
  .wt-chapters b { display: none; }
  .wt-chapters .is-on b { display: block; position: absolute; }
  .wt-chapters li { position: relative; }
  .sc-agent { grid-template-columns: minmax(0, 1fr); gap: 1.6cqw; padding: 3cqw; }
  .ag-ctx .pane:nth-child(2) { display: none; }
  .sc-agent .pane-h, .sc-result .pane-h { font-size: 2.6cqw; }
  .sc-agent .kv, .sc-result .kv, .quote, .ag-think { font-size: 2.4cqw; }
  .sc-agent .kv dt, .sc-result .kv dt { font-size: 2.2cqw; }
  .call { font-size: 2.2cqw; }
  .mp, .mp-l { font-size: 2.1cqw; }
  .sc-result { grid-template-columns: minmax(0, 1fr); gap: 2cqw; }
  .sc-result .chatbox.small { display: none; }
  .crm-id { font-size: 3.4cqw; }
  .chatbox { width: 100%; }
  .cb-msg { font-size: 2.9cqw; }
  .cb-head b { font-size: 2.8cqw; }
  .cb-head small { font-size: 2.2cqw; }
  .cb-av { width: 6cqw; height: 6cqw; font-size: 2.6cqw; }
  .sc-trace .tr-steps li { grid-template-columns: 3cqw 26cqw 1fr; font-size: 2.6cqw; }
  .sc-trace .tr-steps time { display: none; }
  .sc-trace .tr-steps b { font-size: 2.6cqw; }
  .sc-trace .tr-steps span, .sc-trace .tr-steps .out { font-size: 2.3cqw; }
  .sc-trace .tr-steps li > svg { width: 2.8cqw; height: 2.8cqw; }
  .sc-trace .tr-head b { font-size: 3cqw; }
  .sc-trace .trace { width: 100%; }
  .sc-flow { padding: 2cqw; overflow-x: auto; place-items: start; }
  .sc-flow .fc { min-width: 640px; }
  .cta-band { padding: 22px; }
  .lane { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lane-viz { max-width: 260px; }
  .lane-proof { grid-column: 1; }
  .switch { display: flex; }
  .sw { min-width: 0; flex: 1; padding: 12px 14px; }
  .mini { grid-template-columns: minmax(0, 1fr); }
  .mi-side { display: none; }
  .st-main { padding-bottom: 20px; overflow-x: auto; }
  .st-main .fc { min-width: 600px; }
  .st-assist { position: static; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .case-io { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .case-steps { padding: 6px 0 6px 18px; }
  .case-steps::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--line-2), rgba(76, 192, 211, .5)); }
  .conn-grid, .pn-steps { grid-template-columns: minmax(0, 1fr); }
  .seg { flex-wrap: wrap; }
  .swipe-hint.phone { display: block !important; }
  .dp-scene { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dp3d { min-width: 620px; }
  .role-list { grid-template-columns: minmax(0, 1fr); }
  .role, .role + .role { padding: 20px 0; border-left: 0; }
  .role + .role { border-top: 1px solid var(--line); }
  .reuse { grid-template-columns: minmax(0, 1fr); }
  .f-row.two { grid-template-columns: minmax(0, 1fr); }
  .ftr-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-steps li { grid-template-columns: 20px 1fr; }
  .tr-steps li > span { grid-column: 2; }
  .tr-steps time { display: none; }
  .dep-list li { grid-template-columns: 1fr auto; }
  .dep-list b { grid-row: auto; }
  .dep-list small { grid-column: 1; }
  .dep-list .live, .dep-list .fake-btn { grid-column: 2; grid-row: 1 / span 3; }
}