:root {
  color-scheme: dark;
  --black: #050807;
  --ink: #07100b;
  --panel: #0a120d;
  --panel-soft: #0e1812;
  --white: #f7f8f4;
  --muted: #a6afa8;
  --green: #3cff00;
  --mint: #72dfa6;
  --forest: #123b29;
  --burgundy: #5f252a;
  --warning: #ffb86b;
  --line: rgba(247, 248, 244, 0.14);
  --line-strong: rgba(247, 248, 244, 0.28);
  --max: 1440px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 12px;
  --display: Arial Black, Haettenschweiler, "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--body); line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--green); color: var(--black); }

.site-intro { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: var(--black); animation: introExit 1800ms cubic-bezier(.76,0,.24,1) forwards; }
.site-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(60,255,0,.14), transparent 26%), linear-gradient(rgba(247,248,244,.038) 1px, transparent 1px), linear-gradient(90deg, rgba(247,248,244,.038) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; mask-image: radial-gradient(circle, black 0 28%, transparent 76%); animation: introAtmosphere 1800ms ease forwards; }
.site-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, transparent 34%, rgba(60,255,0,.1) 49%, transparent 64%); transform: translateX(-110%); animation: introSweep 1650ms cubic-bezier(.22,1,.36,1) forwards; }
.intro-mark { position: relative; z-index: 2; min-width: min(78vw,560px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(24px,4vw,44px); border: 1px solid rgba(247,248,244,.16); border-radius: 24px; background: rgba(5,8,7,.9); color: var(--white); box-shadow: 0 32px 120px rgba(0,0,0,.58), inset 0 0 70px rgba(60,255,0,.03); animation: introMark 1700ms cubic-bezier(.22,1,.36,1) forwards; }
.intro-mark::before, .intro-mark::after { content: ""; position: absolute; width: 22px; height: 22px; border-color: var(--green); opacity: .72; }
.intro-mark::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.intro-mark::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.intro-kicker, .intro-status { color: #7f8981; font: 800 9px/1 var(--mono); letter-spacing: .24em; }
.intro-avatar { width: clamp(68px,8vw,96px); aspect-ratio: 1; margin: 3px 0 5px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(247,248,244,.55); box-shadow: 0 0 0 6px rgba(60,255,0,.06), 0 16px 44px rgba(0,0,0,.44); }
.intro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.intro-mark strong { font: 900 clamp(29px,5vw,62px)/1 var(--mono); letter-spacing: .14em; text-shadow: 0 0 48px rgba(60,255,0,.14); }
.intro-mark small { color: var(--green); font: 800 10px/1 var(--mono); letter-spacing: .42em; }
.intro-loader { width: min(360px,72vw); height: 2px; margin-top: 12px; overflow: hidden; background: rgba(247,248,244,.12); }
.intro-loader i { display: block; width: 100%; height: 100%; background: var(--green); box-shadow: 0 0 18px rgba(60,255,0,.72); transform: scaleX(0); transform-origin: left; animation: introLoad 1200ms 180ms cubic-bezier(.22,1,.36,1) forwards; }
.intro-scan { position: absolute; z-index: 3; inset: 0 auto 0 -10%; width: 1px; background: var(--green); box-shadow: 0 0 32px 8px rgba(60,255,0,.3); animation: introScan 1450ms cubic-bezier(.22,1,.36,1) forwards; }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; transform: translateY(-160%); background: var(--white); color: var(--black); padding: 10px 14px; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 7, 0.97);
}

.wordmark { display: inline-flex; align-items: center; gap: 11px; width: max-content; line-height: 1; }
.wordmark-avatar { width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; border: 1px solid rgba(247,248,244,.46); border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 4px rgba(60,255,0,.045); transition: transform 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease, border-color 220ms ease; }
.wordmark-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wordmark-copy { display: inline-flex; flex-direction: column; }
.wordmark:hover .wordmark-avatar { transform: translateY(-1px) scale(1.045); border-color: rgba(60,255,0,.72); box-shadow: 0 0 0 5px rgba(60,255,0,.075), 0 10px 30px rgba(0,0,0,.34); }
.wordmark-main { font: 900 17px/1 var(--mono); letter-spacing: 0.16em; color: var(--green); }
.wordmark-sub { margin-top: 6px; font: 700 8px/1 var(--mono); letter-spacing: 0.32em; color: var(--muted); }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 36px); }
.site-nav a, .site-footer nav a { position: relative; color: var(--muted); font-size: 13px; transition: color 160ms ease; }
.site-nav a::after, .site-footer nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--green); transition: right 220ms cubic-bezier(.22,1,.36,1); }
.site-nav a:hover::after, .site-footer nav a:hover::after { right: 0; }
.site-nav a:hover, .site-footer nav a:hover { color: var(--white); }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--black); background: var(--green); border-color: var(--green); box-shadow: 0 0 44px rgba(60, 255, 0, 0.14); }
.button-primary:hover { background: #75ff4a; }
.button-outline { border-color: var(--line-strong); color: var(--white); }
.button-outline:hover { border-color: var(--green); color: var(--green); }
.button-ghost { border-color: var(--line); color: var(--muted); }
.button-ghost:hover { color: var(--white); border-color: var(--line-strong); }
.button-small { min-height: 40px; padding: 10px 14px; font-size: 10px; }
.button-large { min-width: 260px; min-height: 64px; }
.button[aria-disabled="true"], button:disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

.hero {
  position: relative;
  min-height: calc(100svh - 78px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  align-items: center;
  gap: 30px;
  padding: clamp(72px, 10vw, 152px) var(--pad) 112px;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}
.hero::before { content: "404"; position: absolute; right: -0.06em; bottom: -0.3em; z-index: -2; font: 900 clamp(260px, 42vw, 720px)/1 var(--display); color: rgba(247,248,244,0.018); letter-spacing: -0.13em; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 78% 40%, rgba(60,255,0,0.12), transparent 27%), radial-gradient(circle at 10% 70%, rgba(84,36,47,0.18), transparent 26%); }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: 0.27; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 92px 92px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero-copy { max-width: 900px; }
.eyebrow, .kicker, .card-label { font: 800 11px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 11px; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(60,255,0,0.08), 0 0 18px rgba(60,255,0,0.7); }
.hero h1, .section h2 { margin: 24px 0; font-family: var(--display); text-transform: uppercase; letter-spacing: -0.075em; line-height: 0.88; }
.hero h1 { font-size: clamp(68px, 9.2vw, 164px); }
.hero h1 span { display: block; }
.outline-text { color: transparent; -webkit-text-stroke: 1.5px rgba(247,248,244,0.46); text-shadow: none; }
.hero-lede { max-width: 730px; margin: 0; color: #c5cbc6; font-size: clamp(17px, 1.5vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 9px 28px; margin: 36px 0 0; padding: 0; list-style: none; color: var(--muted); font: 700 10px/1.4 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; }
.hero-facts li::before { content: "/"; margin-right: 8px; color: var(--green); }

.hero-product { grid-template-columns: minmax(330px,.72fr) minmax(560px,1.28fr); gap: clamp(28px,4vw,68px); padding-top: clamp(64px,7vw,108px); }
.hero-product > * { min-width: 0; }
.hero-product .hero-copy { max-width: 650px; }
.hero-product h1 { font-size: clamp(64px,6.6vw,118px); }
.hero-demo { min-width: 0; margin: 0; border: 1px solid rgba(247,248,244,.22); background: #020403; color: var(--white); box-shadow: 0 34px 120px rgba(0,0,0,.58), 0 0 80px rgba(60,255,0,.05); overflow: hidden; contain: layout paint; }
.hero-demo, .hero-demo * { cursor: none !important; }
.hero-demo figcaption { padding: 15px 18px; border-top: 1px solid var(--line); color: #879188; font: 700 9px/1.55 var(--mono); text-transform: uppercase; }
.product-proof-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(5,8,7,.18); border-left: 1px solid rgba(5,8,7,.18); }
.product-proof-grid div { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px,3vw,38px); border-right: 1px solid rgba(5,8,7,.18); border-bottom: 1px solid rgba(5,8,7,.18); }
.product-proof-grid strong { font: 900 clamp(46px,6vw,90px)/.9 var(--display); letter-spacing: -.07em; }
.product-proof-grid span { max-width: 180px; color: #59615b; font: 800 10px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.module-pass, .module-open { position: relative; display: inline-flex; max-width: 100%; margin-top: 22px; padding: 8px 10px; border: 1px solid rgba(60,255,0,.42); background: rgba(60,255,0,.05); color: var(--mint); font: 800 8px/1.35 var(--mono); letter-spacing: .07em; white-space: normal; overflow-wrap: anywhere; }
.module-open { border-color: rgba(255,184,107,.5); background: rgba(84,36,47,.22); color: var(--warning); }

.hero-art { min-width: 0; display: grid; place-items: center; }
.portrait-orbit { position: relative; width: min(40vw, 590px); aspect-ratio: 1; display: grid; place-items: center; }
.portrait-frame { width: 73%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 1px solid rgba(247,248,244,0.64); box-shadow: 0 0 0 18px rgba(247,248,244,0.025), 0 36px 120px rgba(0,0,0,0.6); background: var(--panel); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.orbit { position: absolute; inset: 5%; border: 1px solid rgba(60,255,0,0.34); border-radius: 50%; animation: orbitSpin 22s linear infinite; }
.orbit::before { content: ""; position: absolute; width: 12px; height: 12px; top: 11%; left: 13%; border-radius: 50%; background: var(--green); box-shadow: 0 0 24px var(--green); }
.orbit-two { inset: -1%; border-style: dashed; border-color: rgba(247,248,244,0.17); animation-direction: reverse; animation-duration: 36s; }
.orbit-two::before { top: auto; bottom: 20%; left: auto; right: 3%; width: 7px; height: 7px; background: var(--white); box-shadow: none; }
.art-label { position: absolute; padding: 8px 11px; background: var(--black); border: 1px solid var(--line-strong); font: 800 9px/1 var(--mono); letter-spacing: 0.13em; color: var(--muted); }
.art-label-top { top: 8%; right: 2%; }
.art-label-bottom { bottom: 4%; left: 3%; }

.release-rail { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; min-height: 70px; display: grid; grid-template-columns: repeat(10, auto); align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); font-family: var(--mono); }
.release-rail span { color: #6f7971; font-size: 8px; letter-spacing: 0.14em; }
.release-rail strong { font-size: 10px; color: var(--white); }

.section { width: min(100%, var(--max)); margin: 0 auto; padding: clamp(90px, 11vw, 176px) var(--pad); }
.section > *, .faq-section > *, .beta-cta > * { min-width: 0; }
.section h2 { overflow-wrap: anywhere; }
.section-heading { max-width: 880px; margin-bottom: 64px; }
.section h2 { font-size: clamp(48px, 7vw, 108px); }
.section-heading > p:last-child, .section-heading-inline > p, .caption-copy > p, .beta-cta p { max-width: 660px; color: var(--muted); font-size: 17px; }
.text-green { color: var(--green); }
.section-heading-inline { max-width: none; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 60px; align-items: end; }
.section-heading-inline h2 { margin-bottom: 0; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { position: relative; min-width: 0; min-height: 410px; padding: clamp(26px, 4vw, 54px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, rgba(14,24,18,0.72), rgba(5,8,7,0.55)); overflow: hidden; transition: transform 280ms cubic-bezier(.22,1,.36,1), background-color 220ms ease, border-color 220ms ease; }
.feature-card::after { content: ""; position: absolute; inset: auto 12% 0 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: 0; transform: scaleX(.45); transition: opacity 220ms ease, transform 280ms cubic-bezier(.22,1,.36,1); }
.feature-card:hover { z-index: 2; transform: translateY(-5px); border-color: rgba(60,255,0,.28); background: linear-gradient(145deg, rgba(18,59,41,.72), rgba(5,8,7,.68)); }
.feature-card:hover::after { opacity: .85; transform: scaleX(1); }
.feature-card-wide { grid-column: 1 / -1; min-height: 360px; display: grid; grid-template-columns: 0.22fr 1fr; align-items: end; background: linear-gradient(120deg, rgba(60,255,0,0.08), transparent 42%), var(--panel); }
.feature-card-dark { grid-column: 1 / -1; min-height: 330px; background: linear-gradient(105deg, rgba(84,36,47,0.33), transparent 46%), #030504; }
.feature-index { position: absolute; right: 28px; top: 22px; color: rgba(247,248,244,0.16); font: 900 78px/1 var(--display); letter-spacing: -0.08em; }
.feature-card h3, .release-card h3 { position: relative; max-width: 100%; margin: 18px 0 14px; font: 900 clamp(28px, 3vw, 48px)/0.98 var(--display); letter-spacing: -0.045em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.feature-card p:not(.card-label) { position: relative; max-width: 650px; color: var(--muted); }
.feature-card .feature-warning { display: inline-flex; margin-top: 18px; padding: 8px 10px; border: 1px solid rgba(255,184,107,.45); background: rgba(84,36,47,.28); color: var(--warning); font: 800 8px/1.25 var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.tag-list li { padding: 8px 10px; border: 1px solid var(--line); color: var(--mint); font: 700 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.waveform { height: 92px; display: flex; align-items: center; gap: 6px; margin-top: 46px; }
.waveform i { flex: 1; min-width: 3px; height: 12%; background: var(--green); transform-origin: center; animation: wave 1.8s ease-in-out infinite alternate; opacity: 0.8; }
.waveform i:nth-child(3n) { height: 72%; animation-delay: -0.6s; }.waveform i:nth-child(2n) { height: 43%; animation-delay: -1.1s; }.waveform i:nth-child(5n) { height: 94%; }
.stacked-files { position: relative; height: 106px; margin-top: 48px; }
.stacked-files span { position: absolute; bottom: 0; width: 54%; padding: 14px; border: 1px solid var(--line-strong); background: var(--black); color: var(--muted); font: 800 10px/1 var(--mono); }
.stacked-files span:nth-child(2) { left: 20%; bottom: 20px; border-color: rgba(60,255,0,0.4); }.stacked-files span:nth-child(3) { left: 40%; bottom: 40px; color: var(--green); }
.flow-line { display: flex; align-items: center; gap: 20px; margin-top: 40px; color: var(--muted); font: 800 10px/1 var(--mono); letter-spacing: 0.14em; }
.flow-line b { color: var(--green); }

.workflow-section { max-width: none; width: 100%; background: var(--white); color: var(--black); }
.workflow-section .kicker, .workflow-section .section-heading-inline > p { color: #59615b; }
.product-shot { max-width: var(--max); margin: 0 auto; border: 1px solid #242b27; background: #020403; color: var(--white); box-shadow: 0 34px 100px rgba(0,0,0,.24); overflow: hidden; }
.product-shot-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); color: #879188; font: 800 9px/1.3 var(--mono); letter-spacing: .11em; }
.product-shot-bar span { display: flex; align-items: center; gap: 9px; }.product-shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(60,255,0,.8); }.product-shot-bar strong { color: var(--white); text-align: right; }
.product-shot picture, .product-shot img { width: 100%; }.product-shot img { height: auto; background: #000; }
.product-preview-stage { --tour-progress: 0; position: relative; aspect-ratio: 1600 / 980; overflow: hidden; cursor: none; background: #000; isolation: isolate; }
.product-preview-stage::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 35%, rgba(255,255,255,.055) 49%, transparent 63%); opacity: 0; transform: translateX(-85%); }
.hero-demo:hover .product-preview-stage::before { opacity: 1; animation: productSheen 1100ms cubic-bezier(.22,1,.36,1) both; }
.product-preview-stage::after { content: ""; position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green); transform: scaleX(var(--tour-progress)); transform-origin: left; will-change: transform; box-shadow: 0 0 20px rgba(60,255,0,.72); }
.product-tour-video, .product-tour-poster { width: 100%; height: 100%; }
.product-tour-video { display: block; object-fit: cover; pointer-events: none; cursor: none; background: #000; transform: scale(1.004); }
.product-tour-poster { display: none; }
.product-tour-poster img { width: 100%; height: 100%; object-fit: cover; }
.preview-signal { position: absolute; z-index: 6; left: 18px; top: 18px; display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 10px 12px; border: 1px solid rgba(247,248,244,.2); background: rgba(5,8,7,.94); box-shadow: 0 12px 36px rgba(0,0,0,.3); }
.preview-signal div { display: grid; gap: 4px; }.preview-signal small { color: #7f8981; font: 800 7px/1 var(--mono); letter-spacing: .13em; }.preview-signal b { color: var(--white); font: 900 9px/1 var(--mono); letter-spacing: .08em; }
.preview-live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(60,255,0,.09), 0 0 16px rgba(60,255,0,.75); animation: livePulse 1.6s ease-in-out infinite; }
.preview-corner { position: absolute; z-index: 5; width: 34px; height: 34px; pointer-events: none; border-color: rgba(60,255,0,.62); }
.preview-corner-tl { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }.preview-corner-br { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.product-tour-badge { position: absolute; z-index: 6; right: 18px; bottom: 18px; padding: 9px 12px; border: 1px solid rgba(247,248,244,.25); background: rgba(5,8,7,.88); color: var(--white); font: 800 9px/1 var(--mono); letter-spacing: .12em; box-shadow: 0 10px 35px rgba(0,0,0,.35); }
.product-tour-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; background: #050807; }
.product-tour-steps li { position: relative; min-height: 112px; padding: 18px; border-right: 1px solid var(--line); color: #68736b; transition: color 320ms ease, background 320ms ease; }
.product-tour-steps li:last-child { border-right: 0; }
.product-tour-steps li::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 360ms cubic-bezier(.22,1,.36,1); }
.product-tour-steps span { display: block; margin-bottom: 13px; color: #4f5a52; font: 800 8px/1 var(--mono); }
.product-tour-steps b { display: block; color: inherit; font: 850 12px/1.1 var(--display); letter-spacing: -.015em; text-transform: uppercase; }
.product-tour-steps small { display: block; margin-top: 8px; color: #59635c; font: 700 8px/1.45 var(--mono); }
.product-tour-steps li.is-active { background: linear-gradient(180deg, rgba(60,255,0,.12), rgba(60,255,0,.018)); color: var(--white); box-shadow: inset 0 18px 38px rgba(60,255,0,.025); }
.product-tour-steps li.is-active::after { transform: scaleX(1); }
.product-tour-steps li.is-active span { color: var(--green); }
.product-tour-steps li.is-active small { color: #8f9a91; }
.product-shot figcaption { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; padding: 18px; border-top: 1px solid var(--line); color: #c8cec9; font-size: 13px; }
.product-shot figcaption small { color: #778178; font: 700 9px/1.55 var(--mono); text-transform: uppercase; }

.caption-section { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: clamp(50px, 8vw, 130px); align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(120deg, rgba(84,36,47,.22), transparent 40%), var(--black); }
.caption-copy { padding-left: max(0px, calc((100vw - var(--max)) / 2)); }.caption-copy h2 { font-size: clamp(46px, 6vw, 92px); }.module-status { display: flex; align-items: center; gap: 13px; margin-top: 34px; color: var(--mint); font: 800 10px/1.3 var(--mono); letter-spacing: .11em; }.module-status-warning { color: var(--warning); }.module-status-warning .status-dot { background: var(--warning); box-shadow: 0 0 0 5px rgba(255,184,107,.08), 0 0 18px rgba(255,184,107,.58); }
.product-shot-caption { min-width: 0; width: 100%; }

.roadmap-section { max-width: none; width: 100%; background: linear-gradient(145deg, rgba(18,59,41,.25), transparent 42%), var(--black); }
.roadmap-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.roadmap-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.roadmap-card { grid-column: span 2; min-width: 0; min-height: 390px; display: flex; flex-direction: column; padding: clamp(24px,3vw,38px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5,8,7,.58); }
.roadmap-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.roadmap-card .roadmap-index { margin-bottom: 46px; color: rgba(247,248,244,.12); font: 900 clamp(54px,6vw,88px)/.8 var(--display); letter-spacing: -.08em; }
.roadmap-card .release-state { display: inline-flex; width: fit-content; max-width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); color: var(--muted); font: 800 8px/1.35 var(--mono); letter-spacing: .08em; white-space: normal; overflow-wrap: anywhere; }
.roadmap-card .release-state.available { border-color: var(--green); color: var(--green); }
.roadmap-card .release-state.warning, .release-card .release-state.warning { border-color: rgba(255,184,107,.55); background: rgba(84,36,47,.22); color: var(--warning); }
.roadmap-card h3 { max-width: 100%; margin: 22px 0 12px; font: 900 clamp(26px,2.8vw,40px)/.98 var(--display); letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.roadmap-card p { max-width: 100%; margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.roadmap-card small { display: block; max-width: 100%; margin-top: auto; padding-top: 28px; color: #7d8980; font: 800 8px/1.55 var(--mono); letter-spacing: .035em; text-transform: uppercase; overflow-wrap: anywhere; word-break: break-word; }

.release-section { max-width: none; width: 100%; background: #07100b; }
.release-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.release-alert { padding: 16px 18px; border: 1px solid var(--line); color: var(--muted); font: 700 11px/1.5 var(--mono); }
.release-alert.ready { border-color: rgba(60,255,0,.35); color: var(--mint); }.release-alert.error { border-color: rgba(239,68,68,.5); color: #ffb5b5; }
.release-section .section-heading h2 { font-size: clamp(44px,5.8vw,88px); overflow-wrap: normal; word-break: normal; }
.release-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.release-card { min-width: 0; min-height: 500px; display: flex; flex-direction: column; padding: clamp(24px,3vw,42px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5,8,7,.5); }
.release-card.primary { background: linear-gradient(155deg, rgba(60,255,0,.1), transparent 46%), var(--black); }.release-card .release-state { display: inline-flex; width: fit-content; max-width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); color: var(--muted); font: 800 8px/1.35 var(--mono); letter-spacing: .09em; white-space: normal; overflow-wrap: anywhere; }.release-card .release-state.available { border-color: var(--green); color: var(--green); }.release-version { max-width: 100%; margin: 28px 0 6px; font: 900 clamp(60px,7vw,108px)/.9 var(--display); letter-spacing: -.09em; overflow-wrap: anywhere; }.release-platform { max-width: 100%; color: var(--muted); font: 800 10px/1.35 var(--mono); letter-spacing: .1em; overflow-wrap: anywhere; }.release-card dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: 11px 16px; margin: 28px 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; }.release-card dt { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }.release-card dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; font-family: var(--mono); }.release-card ul { min-width: 0; margin: 0 0 28px; padding-left: 18px; color: var(--muted); font-size: 12px; }.release-card li { overflow-wrap: anywhere; }.release-card li + li { margin-top: 8px; }.release-card .button { max-width: 100%; margin-top: auto; white-space: normal; text-align: center; overflow-wrap: anywhere; }.catalog-stamp { max-width: 100%; margin-top: 18px; color: #657068; font: 700 9px/1.4 var(--mono); letter-spacing: .07em; overflow-wrap: anywhere; }
.skeleton { min-height: 500px; background: linear-gradient(100deg, rgba(247,248,244,.02) 20%, rgba(247,248,244,.055) 40%, rgba(247,248,244,.02) 60%); background-size: 220% 100%; animation: shimmer 1.6s infinite; }

.beta-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; border-bottom: 1px solid var(--line); }.beta-cta h2 { margin: 18px 0; font-size: clamp(46px,6vw,92px); }
.faq-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px,8vw,120px); }.faq-section .section-heading { margin: 0; }.faq-section h2 { font-size: clamp(46px,5vw,76px); }
.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; padding: 26px 48px 26px 0; cursor: pointer; list-style: none; font-weight: 750; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 8px; color: var(--green); font: 400 24px/1 var(--mono); }.faq-list details[open] summary::after { content: "−"; }.faq-list p { max-width: 720px; margin: -5px 0 28px; color: var(--muted); }

.site-footer { min-height: 220px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding: 54px var(--pad); border-top: 1px solid var(--line); }.site-footer p { margin: 0; color: #667068; font-size: 12px; text-align: center; }.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }

/* Portal / help */
.subpage { min-height: 100svh; background: radial-gradient(circle at 75% 4%, rgba(60,255,0,.09), transparent 28%), var(--black); }
.subpage-main { width: min(100%, 1180px); min-height: calc(100svh - 78px); margin: 0 auto; padding: clamp(64px,9vw,128px) var(--pad); }
.subpage-hero { max-width: 850px; margin-bottom: 56px; }.subpage-hero h1 { margin: 20px 0; font: 900 clamp(56px,9vw,124px)/.88 var(--display); letter-spacing: -.075em; text-transform: uppercase; }.subpage-hero > p:last-child { max-width: 690px; color: var(--muted); font-size: 18px; }
.portal-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px; align-items: start; }
.panel { padding: clamp(24px,4vw,42px); border: 1px solid var(--line); background: rgba(10,18,13,.82); }.panel + .panel { margin-top: 20px; }.panel h2 { margin: 10px 0 12px; font: 900 clamp(28px,4vw,46px)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; }.panel > p { color: var(--muted); }
.field-label { display: block; margin: 26px 0 8px; color: var(--muted); font: 800 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }.field-row { display: grid; grid-template-columns: 1fr auto; }.field-row input { min-width: 0; min-height: 54px; padding: 13px 15px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 0; background: var(--black); color: var(--white); font-family: var(--mono); }.field-row button { min-width: 110px; border: 1px solid var(--green); border-radius: 0; background: var(--green); color: var(--black); font: 900 10px/1 var(--mono); letter-spacing: .08em; cursor: pointer; }
.form-status { min-height: 24px; margin-top: 13px; color: var(--muted); font-size: 12px; }.form-status.error { color: #ffb5b5; }.form-status.success { color: var(--mint); }
.privacy-note { display: flex; align-items: start; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); color: #738078; font-size: 11px; }.privacy-note b { color: var(--green); }
.platform-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; }.platform-switch button { min-height: 50px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 800 10px/1 var(--mono); letter-spacing: .1em; cursor: pointer; }.platform-switch button + button { border-left: 0; }.platform-switch button[aria-selected="true"] { background: rgba(60,255,0,.08); border-color: var(--green); color: var(--green); }
.download-card { min-height: 430px; display: flex; flex-direction: column; }.download-state { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 800 9px/1 var(--mono); letter-spacing: .1em; }.download-state .status-dot { width: 6px; height: 6px; }.download-title { margin: 22px 0 4px; font: 900 clamp(54px,8vw,92px)/.9 var(--display); letter-spacing: -.08em; }.download-meta { color: var(--muted); font: 700 10px/1.5 var(--mono); }.artifact-table { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 28px 0; padding: 22px 0; border-block: 1px solid var(--line); font-size: 12px; }.artifact-table dt { color: var(--muted); }.artifact-table dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; font-family: var(--mono); }.hash-line { user-select: all; }.download-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }.download-actions .button { flex: 1; }.security-warning { margin-top: 22px; padding: 16px; border-left: 2px solid #f3b147; background: rgba(243,177,71,.06); color: #d8c19b; font-size: 12px; }
.channel-boundary { display: grid; gap: 1px; margin-top: 20px; background: var(--line); }.boundary-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 16px; background: var(--panel); font-size: 12px; }.boundary-row span { color: var(--muted); }.boundary-row b { font-family: var(--mono); text-align: right; }
.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.help-card { min-height: 300px; padding: clamp(24px,4vw,42px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.help-card h2 { margin: 16px 0; font: 900 clamp(26px,3vw,40px)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; }.help-card p, .help-card li { color: var(--muted); }.help-card ol, .help-card ul { padding-left: 20px; }.help-card li + li { margin-top: 10px; }.code-block { display: block; margin-top: 18px; padding: 14px; overflow-x: auto; border: 1px solid var(--line); background: #020403; color: var(--mint); font: 700 11px/1.5 var(--mono); }

.install-guide { width: min(100%, 1120px); }
.install-trust { margin-bottom: 20px; background: linear-gradient(145deg, rgba(60,255,0,.08), transparent 46%), rgba(10,18,13,.9); }
.install-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 20px; }
.install-step { min-height: 310px; display: grid; grid-template-columns: auto 1fr; gap: 24px; margin-top: 0 !important; }
.install-step > span { color: rgba(60,255,0,.24); font: 900 clamp(54px,7vw,82px)/.8 var(--display); letter-spacing: -.08em; }
.install-step h2 { margin-top: 12px; }
.install-step p:last-child { margin-bottom: 0; }
.install-warning { border-color: rgba(243,177,71,.35); background: linear-gradient(145deg, rgba(243,177,71,.08), transparent 54%), rgba(10,18,13,.9); }
.install-confirm { display: flex; align-items: flex-start; gap: 13px; margin: 28px 0; padding: 18px; border: 1px solid var(--line-strong); color: var(--white); font-size: 13px; cursor: pointer; }
.install-confirm input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); }
.install-confirm:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.button[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1); }.reveal[data-delay="1"] { transition-delay: 100ms; }.reveal[data-delay="2"] { transition-delay: 200ms; }.reveal.is-visible { opacity: 1; transform: none; }

@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes wave { from { transform: scaleY(.55); opacity: .45; } to { transform: scaleY(1); opacity: 1; } }
@keyframes shimmer { to { background-position-x: -220%; } }
@keyframes introAtmosphere { 0% { opacity: 0; transform: scale(.92); } 18%, 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes introSweep { 0%, 12% { opacity: 0; transform: translateX(-110%); } 22% { opacity: 1; } 82%, 100% { opacity: 0; transform: translateX(110%); } }
@keyframes introScan { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 76%, 100% { opacity: 0; transform: translateX(109vw); } }
@keyframes introLoad { 0% { transform: scaleX(0); } 72%, 100% { transform: scaleX(1); } }
@keyframes introMark { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 14%, 72% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-8px) scale(1.02); } }
@keyframes introExit { 0%, 88% { visibility: visible; opacity: 1; background: var(--black); } 100% { visibility: hidden; opacity: 0; background: transparent; } }
@keyframes livePulse { 0%, 100% { opacity: .72; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes productSheen { 0%, 56% { transform: translateX(-85%); } 100% { transform: translateX(85%); } }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: auto 1fr; }.site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: visible; flex-wrap: wrap; row-gap: 10px; padding-bottom: 2px; }.site-header > .button { grid-column: 2; grid-row: 1; justify-self: end; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 80px; }.hero-copy { z-index: 2; }.hero-art { position: absolute; right: -12%; top: 13%; z-index: -1; opacity: .3; }.portrait-orbit { width: min(65vw,590px); }.hero-demo { width: 100%; }.release-rail { position: relative; left: auto; right: auto; bottom: auto; grid-column: 1; grid-template-columns: repeat(4,1fr); width: 100%; margin-top: 40px; padding-top: 18px; }.release-rail span:nth-of-type(n+3), .release-rail strong:nth-of-type(n+3) { margin-top: 8px; }
  .caption-section { grid-template-columns: 1fr; }.caption-copy { padding-left: 0; }.product-shot-caption { max-width: var(--max); }
  .roadmap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.roadmap-card, .roadmap-card:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }.roadmap-card:last-child:nth-child(odd) { width: 50%; grid-column: 1 / -1; justify-self: center; }
  .release-grid { grid-template-columns: 1fr 1fr; }
  .faq-section { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .section-heading-inline { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

@media (max-width: 720px) {
  .site-header { min-height: 70px; gap: 14px; padding-block: 12px; }.site-header > .button { padding-inline: 10px; }.site-nav { gap: 20px; }.site-nav a { font-size: 12px; }
  .hero { min-height: calc(100svh - 70px); padding-top: 72px; padding-bottom: 48px; }.hero h1 { font-size: clamp(58px,20vw,98px); }.hero-lede { font-size: 16px; }.hero-actions .button { width: 100%; }.hero-art { top: 25%; right: -34%; }.portrait-orbit { width: 90vw; }.art-label { display: none; }.release-rail { grid-template-columns: 1fr 1fr; gap: 6px 14px; }.release-rail span, .release-rail strong { min-height: 18px; }.release-rail span:nth-of-type(n+3), .release-rail strong:nth-of-type(n+3) { margin: 0; }
  .section { padding-top: 90px; padding-bottom: 90px; }.section-heading-inline { grid-template-columns: 1fr; gap: 18px; align-items: start; }.section h2 { letter-spacing: -.06em; }
  .hero-product h1 { font-size: clamp(55px,17vw,82px); }.hero-product h1 .outline-text { font-size: .68em; }.hero-demo { width: auto; margin-inline: -10px; }.hero-demo figcaption { font-size: 8px; }.product-proof-grid { grid-template-columns: 1fr 1fr; }.product-proof-grid div { min-height: 140px; }
  .feature-grid, .roadmap-grid, .release-grid { grid-template-columns: 1fr; }.roadmap-card:last-child:nth-child(odd) { width: 100%; grid-column: auto; }.feature-card-wide { grid-template-columns: 1fr; }.feature-card, .feature-card-wide, .feature-card-dark { grid-column: auto; min-height: 340px; }.feature-index { font-size: 56px; }
  .product-shot { margin-inline: -10px; }.product-shot-bar { align-items: flex-start; flex-direction: column; padding-block: 13px; }.product-shot-bar strong { text-align: left; }.product-shot figcaption { grid-template-columns: 1fr; gap: 10px; }
  .preview-signal { left: 10px; top: 10px; min-width: 0; padding: 8px 9px; }.preview-signal small { display: none; }.preview-signal b { font-size: 7px; }.product-tour-badge { right: 10px; bottom: 10px; padding: 7px 8px; font-size: 7px; letter-spacing: .08em; }
  .product-tour-steps { grid-template-columns: 1fr 1fr; }.product-tour-steps li { min-height: 104px; }.product-tour-steps li:nth-child(2) { border-right: 0; }.product-tour-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .release-card:last-child { grid-column: auto; }.beta-cta { grid-template-columns: 1fr; gap: 26px; }.beta-cta .button { width: 100%; min-width: 0; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; }.site-footer p { text-align: left; }.site-footer nav { justify-content: flex-start; }
  .portal-layout { grid-template-columns: 1fr; }.field-row { grid-template-columns: 1fr; }.field-row input { border-right: 1px solid var(--line-strong); }.field-row button { min-height: 50px; }
  .help-grid { grid-template-columns: 1fr; }
  .install-guide .subpage-hero h1 { font-size: clamp(42px,14vw,56px); letter-spacing: -.065em; }
  .install-guide .subpage-hero h1 .outline-text { font-size: .78em; line-height: .95; letter-spacing: -.045em; }
  .install-steps { grid-template-columns: 1fr; }
  .install-step { min-height: 0; grid-template-columns: 1fr; }
}

@media (hover: none) {
  .feature-card:hover { transform: none; }
  .hero-demo:hover .product-preview-stage::before { animation: none; opacity: 0; }
}

@media (prefers-reduced-data: reduce) {
  .product-tour-video { display: none; }
  .product-tour-poster { display: block; }
  .product-preview-stage::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .site-intro { display: none; }
  .reveal { opacity: 1; transform: none; }
  .product-preview-stage::before, .product-preview-stage::after { display: none; }
  .product-tour-video { display: none; }
  .product-tour-poster { display: block; }
  .product-tour-steps li { transition: none; }
}