/* EIDVAR site. Void black and bone from aperiant.org, EIDVAR's violet as the one accent, Electrolize for display. */
@font-face {
  font-family: "Electrolize";
  src: url("fonts/Electrolize.woff2") format("woff2"), url("fonts/Electrolize.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #050505;
  --ink-1: #090909;
  --ink-2: #111;
  --ink-3: #181818;
  --gunmetal: #45464a;
  --ash: #8b8c8e;
  --ash-2: #aeada8;
  --bone: #e9e6df;
  --violet: #8c76ff;
  --violet-2: #6b57e6;
  --violet-soft: rgba(140, 118, 255, 0.14);
  --violet-glow: rgba(140, 118, 255, 0.35);
  --alert: #e07a6b;
  --hair: rgba(233, 230, 223, 0.1);
  --hair-strong: rgba(233, 230, 223, 0.22);
  --display: "Electrolize", "Geist", "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: max(20px, 5vw);
  --bar-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --steps: steps(6, end);
  --px: 4px;
  --pixel-rule: repeating-linear-gradient(90deg, var(--hair-strong) 0 6px, transparent 6px 12px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--void);
  color: var(--bone);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
::selection { background: var(--violet); color: var(--void); }

/* Scanline veil, very faint */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--bone); color: var(--void); font-family: var(--display); }
.skip:focus { top: 8px; }

/* Type */
.label { font: 400 0.6875rem/1.3 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.label.dim { color: var(--ash); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 6.4vw, 6.2rem); line-height: 0.98; letter-spacing: -0.015em; max-width: 15ch; }
h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -0.012em; }
p { margin: 0; }
.statement { font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.25 var(--display); color: var(--bone); opacity: 0.88; }
.lead { font-size: clamp(1.0625rem, 1.2vw, 1.2rem); line-height: 1.55; color: var(--ash-2); max-width: 40ch; }
.note { font: 400 0.8125rem/1.6 var(--mono); color: var(--ash); max-width: 56ch; }
.note::before { content: "// "; color: var(--violet); }

/* Buttons, hard-edged like a cartridge label */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  font: 400 0.75rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone); border: 1px solid var(--hair-strong); background: var(--void);
  box-shadow: var(--px) var(--px) 0 0 var(--ink-3);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s, background 0.18s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--ink-3); border-color: var(--bone); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--ink-3); }
.btn-p { background: var(--violet); color: var(--void); border-color: var(--violet); box-shadow: var(--px) var(--px) 0 0 var(--violet-2); }
.btn-p:hover { background: #9a87ff; border-color: #9a87ff; box-shadow: 5px 5px 0 0 var(--violet-2); }
.btn-p:active { box-shadow: 1px 1px 0 0 var(--violet-2); }

/* Loader: the mark assembles cell by cell */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--void);
  display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px var(--gutter);
  transition: opacity 0.45s var(--steps), visibility 0s 0.45s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-canvas { width: min(42vmin, 220px); height: min(42vmin, 220px); image-rendering: pixelated; }
.loader-row { display: flex; align-items: center; gap: 14px; }
.loader-segs { display: flex; gap: 3px; }
.loader-segs i { display: block; width: 7px; height: 7px; background: #1a1830; }
.loader-segs i.on { background: var(--violet); }
.loader-pct { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--bone); }
.loader-skip { position: absolute; left: var(--gutter); bottom: 24px; color: var(--ash); }
.loader-skip:hover { color: var(--bone); }
.loader-corner { position: absolute; right: var(--gutter); bottom: 24px; color: #5e5f61; }

/* Segmented scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; display: grid; grid-template-columns: repeat(48, 1fr); gap: 2px; padding: 0 2px; pointer-events: none; }
.progress i { display: block; height: 3px; transition: background 0.1s; }
.progress i.on { background: var(--violet); }

/* Top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--bar-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  border-bottom: 1px solid transparent; transition: background 0.4s, border-color 0.4s;
}
.bar.solid { background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: var(--hair); }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-glyph { width: 28px; height: 28px; transition: transform 0.6s var(--ease); }
.brand:hover .brand-glyph { transform: rotate(-90deg); }
.brand-word { font: 400 0.9rem/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { font: 400 0.6875rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); display: inline-flex; gap: 6px; align-items: center; padding: 6px 0; position: relative; transition: color 0.2s; }
.nav a i { font-style: normal; color: var(--ash); opacity: 0.8; transition: color 0.2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--violet); transition: right 0.3s var(--steps); }
.nav a:hover, .nav a.on { color: var(--bone); }
.nav a.on::after { right: 0; }
.nav a.on i { color: var(--violet); }
.bar-right { display: flex; align-items: center; gap: 18px; margin-left: 8px; flex: none; }
.aperiant-link { color: var(--ash); white-space: nowrap; transition: color 0.2s; }
.aperiant-link:hover { color: var(--bone); }
.bar .btn { min-height: 36px; padding: 0 14px; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: calc(var(--bar-h) + 6vh) var(--gutter) 28px; overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; }
.hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(to right, var(--void) 1px, transparent 1px), linear-gradient(to bottom, var(--void) 1px, transparent 1px); background-size: 12px 12px; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(55% 60% at 22% 68%, rgba(5,5,5,0.9), transparent 72%), linear-gradient(to bottom, var(--void) 0%, transparent 22%, transparent 72%, var(--void) 100%); }
.hero-copy { position: relative; z-index: 3; display: grid; gap: 22px; max-width: 880px; padding-bottom: 6vh; }
.eyebrow { color: var(--violet); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px; }
.eyebrow > span + span::before { content: "· "; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--pixel-rule); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hero-status { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 1px; background: var(--hair); border: 1px solid var(--hair); width: fit-content; max-width: 100%; }
.hero-status li { background: rgba(5,5,5,0.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 12px 18px; display: grid; gap: 4px; min-width: 150px; }
.hero-status b { font: 400 1rem/1.2 var(--display); display: inline-flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--bone); flex: none; }
.dot.blink { background: var(--violet); animation: blink 1.4s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* Ticker */
.ticker { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; background: rgba(9, 9, 9, 0.85); }
.ticker-track { display: flex; gap: 32px; width: max-content; padding: 12px 0; animation: ticker 44s linear infinite; }
.ticker-track span { font: 400 0.75rem/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.ticker-track span:nth-child(even) { color: var(--violet); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Sections */
.sec { position: relative; padding: clamp(88px, 13vh, 160px) var(--gutter); }
.sec::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: var(--pixel-rule); opacity: 0.6; }
.sec-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(40px, 6vh, 64px); }
.sec-inner.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sec-head { display: grid; gap: 20px; max-width: 760px; }
.sec-head .label, .path-sticky .label { display: flex; align-items: center; gap: 12px; }
.sec-head .label::before, .path-sticky .label::before { content: ""; width: 28px; height: 2px; background: var(--pixel-rule); flex: none; }

/* Reveal */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--steps), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Claim card: reality scans in from the top */
.claim-wrap { display: grid; gap: 16px; }
.claim { position: relative; border: 1px solid var(--hair-strong); background: var(--ink-1); min-height: 230px; overflow: hidden; }
.claim::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--hair) 1px, transparent 1px); background-size: 100% 28px; opacity: 0.4; pointer-events: none; }
.claim-face { padding: 22px 24px 26px; display: grid; gap: 18px; position: relative; }
.claim-after { position: absolute; inset: 0; background: var(--ink-2); clip-path: inset(0 0 100% 0); transition: clip-path 0.8s steps(12, end); }
.claim.answered .claim-after { clip-path: inset(0 0 0 0); }
.claim .scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--violet); box-shadow: 0 0 16px var(--violet-glow); opacity: 0; pointer-events: none; z-index: 2; }
.claim.scanning .scan { opacity: 1; animation: scan 0.8s steps(12, end) forwards; }
@keyframes scan { to { top: calc(100% - 3px); } }
.claim-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag { font: 400 0.6875rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 8px; border: 1px solid; }
.tag-hypo { color: var(--ash-2); border-color: var(--hair-strong); }
.tag-fact { color: var(--void); background: var(--violet); border-color: var(--violet); }
.kv { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 12px 20px; font: 400 0.95rem/1.5 var(--mono); }
.kv dt { color: var(--ash); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; padding-top: 4px; }
.kv dd { margin: 0; }
.claim-btn { justify-self: start; }
.claim-btn[aria-pressed="true"] { border-color: var(--violet); color: var(--violet); }

/* Gates */
.path-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.path-sticky { position: sticky; top: calc(var(--bar-h) + 48px); display: grid; gap: 20px; }
.path-counter { font-size: 2rem; letter-spacing: 0.1em; color: var(--gunmetal); margin-top: 8px; font-variant-numeric: tabular-nums; }
.path-counter span { color: var(--violet); }
.path-list { position: relative; display: grid; }
.path-list::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--hair-strong); }
.path-list::after { content: ""; position: absolute; left: 19px; top: 0; width: 1px; height: var(--fill, 0%); background: var(--violet); box-shadow: 0 0 12px var(--violet-glow); transition: height 0.15s linear; }
.path-list li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--hair); opacity: 0.35; transition: opacity 0.4s var(--steps); }
.path-list li.on { opacity: 1; }
.step-n { position: relative; z-index: 1; overflow: visible; width: 40px; height: 40px; display: grid; place-items: center; font: 400 0.75rem/1 var(--display); letter-spacing: 0.1em; background: var(--void); border: 1px solid var(--hair-strong); color: var(--ash); transition: background 0.3s var(--steps), color 0.3s, border-color 0.3s; }
.path-list li.on .step-n { background: var(--violet); border-color: var(--violet); color: var(--void); }
.path-list li.now .step-n { box-shadow: 0 0 0 4px var(--violet-soft), 0 0 18px var(--violet-glow); }
.path-list li > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
.path-list b { font: 400 1.5rem/1.1 var(--display); }
.organ { font: 400 0.6875rem/1 var(--display); letter-spacing: 0.2em; color: var(--violet); white-space: nowrap; }
.path-list p { grid-column: 1 / -1; color: var(--ash-2); max-width: 40ch; }

/* Organ tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.tiles li { position: relative; background: var(--void); padding: 22px 20px; display: grid; gap: 10px; align-content: start; transition: background 0.25s var(--steps); }
.tiles li:hover { background: var(--ink-1); }
.tiles b { font: 400 1rem/1 var(--display); letter-spacing: 0.22em; }
.tiles span:last-child { color: var(--ash); font-size: 0.925rem; line-height: 1.4; }
.pix { width: 28px; height: 28px; color: var(--ash); transition: color 0.25s, transform 0.25s var(--steps); }
.pix svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.tiles li:hover .pix { color: var(--violet); transform: translateY(-2px); }

/* Kernel */
.sec-kernel { background: rgba(9, 9, 9, 0.82); }
.rules-inner { margin-top: clamp(72px, 10vh, 120px); padding-top: clamp(64px, 9vh, 104px); border-top: 2px solid transparent; border-image: var(--pixel-rule) 1; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.rules li { position: relative; background: var(--void); padding: 24px; display: grid; gap: 12px; align-content: start; }
.rules .label { color: var(--violet); }
.rules b { font: 400 1.35rem/1.15 var(--display); }
.rules p { color: var(--ash-2); font-size: 0.95rem; }
.term-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chrome { display: flex; gap: 4px; }
.chrome i { width: 6px; height: 6px; background: var(--gunmetal); }
.chrome i:first-child { background: var(--violet); }
.kernel-log { border: 1px solid var(--hair-strong); background: var(--void); padding: 18px 20px; display: grid; gap: 12px; }
.kernel-log pre { margin: 0; font: 400 0.875rem/1.65 var(--mono); color: var(--ash-2); white-space: pre-wrap; min-height: 6.6em; }
.kernel-log pre b { color: var(--alert); font-weight: 400; }
.kernel-log pre em { color: var(--violet); font-style: normal; }
.kernel-log pre .cur { display: inline-block; width: 0.6em; height: 1em; background: var(--violet); vertical-align: -2px; animation: blink 1s steps(2, end) infinite; }

/* Autonomy meter */
.meter-wrap { display: grid; gap: 18px; }
.meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.meter li { position: relative; padding: 14px 0 0; display: grid; gap: 6px; }
.meter li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--gunmetal) 0 6px, transparent 6px 9px); }
.meter li.building::before { background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 9px); box-shadow: 0 0 14px var(--violet-glow); }
.lv { font: 400 1.5rem/1 var(--display); color: var(--ash); }
.meter li.building .lv { color: var(--violet); }
.lv-name { font-size: 0.85rem; color: var(--ash-2); line-height: 1.3; }
.meter-keys { display: flex; gap: 20px; flex-wrap: wrap; }
.meter-keys .label { display: inline-flex; align-items: center; gap: 8px; }
.key { width: 14px; height: 6px; background: var(--gunmetal); }
.key.building { background: var(--violet); }

/* Never */
.sec-never { background: radial-gradient(80% 60% at 80% 20%, rgba(140,118,255,0.06), transparent 60%); }
.never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.never li { background: var(--void); padding: 22px 24px; display: flex; gap: 16px; align-items: baseline; transition: background 0.25s var(--steps); }
.never li:hover { background: var(--ink-1); }
.never .x { color: var(--alert); font: 400 1rem/1.3 var(--display); flex: none; }
.never b { font: 400 1.25rem/1.25 var(--display); }

/* Resolution */
.resolve { position: relative; min-height: 90svh; display: grid; place-items: center; padding: 120px var(--gutter); overflow: hidden; isolation: isolate; }
.resolve-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; opacity: 0.9; }
.resolve::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(50% 50% at 50% 50%, rgba(5,5,5,0.7), rgba(5,5,5,0.2) 60%, var(--void) 100%); pointer-events: none; }
.resolve-copy { position: relative; z-index: 2; display: grid; gap: 22px; text-align: center; justify-items: center; max-width: 820px; width: 100%; }
.resolve-copy h2 { font-size: clamp(2.6rem, 6.8vw, 6.4rem); }
.resolve-copy .lead { max-width: 44ch; }
.resolve-copy .hero-actions { justify-content: center; }

/* Footer */
.foot { padding: 36px var(--gutter) 48px; display: grid; gap: 22px; border-top: 1px solid var(--hair); }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-nav a { transition: color 0.2s; }
.foot-nav a:hover { color: var(--bone); }
.foot-legal { max-width: 80ch; text-transform: none; letter-spacing: 0.04em; line-height: 1.6; }

/* Responsive */
@media (max-width: 1180px) { .aperiant-link { display: none; } }
@media (max-width: 960px) {
  .sec-inner.split, .path-layout { grid-template-columns: 1fr; }
  .path-sticky { position: static; }
  .path-counter { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules { grid-template-columns: 1fr; }
  .meter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .never { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .hud { display: none; }
  .hero { padding-top: calc(var(--bar-h) + 2svh + 44vw); }
  .eyebrow > span + span { flex-basis: 100%; padding-left: 40px; }
  .eyebrow > span + span::before { content: ""; }
  .hero .glitch::before { display: none; }
  .hero .lead { font-size: 1rem; }
  .hero-copy { gap: 16px; padding-bottom: 4vh; }
  .hero::after { background: linear-gradient(to bottom, var(--void) 0%, transparent 12%, transparent 40%, rgba(5,5,5,0.7) 60%, var(--void) 100%); }
  .hero-status { width: 100%; }
  .hero-status li { flex: 1 1 140px; }
  .sec { padding: 72px var(--gutter); }
  h1 { font-size: clamp(2.1rem, 9.4vw, 3.2rem); }
  h2 { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .path-list li { padding: 22px 0; }
  .path-list li > div { grid-template-columns: 1fr; }
  .kernel-log pre { font-size: 0.8rem; }
}
@media (max-width: 480px) {
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv dt { padding-top: 10px; }
  .bar { gap: 12px; }
  .bar .btn { padding: 0 10px; font-size: 0.65rem; }
  .tiles li { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glitch::before, .led, .g-fill, .g-dot, .g-stops i, .g-tag, .meter li.building::before, .meter li.building::after, .pix .f2, .never .x, .hud .dot { animation: none !important; }
  .cursor, .cursor-trail, .field { display: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  .dot.blink, .kernel-log pre .cur { animation: none; }
  .loader { display: none; }
  .brand:hover .brand-glyph { transform: none; }
  .claim-after { transition: none; }
}

/* ===== Alive layer ===================================================== */

/* The page-wide field sits behind everything */
.field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; pointer-events: none; }

/* Pixel cursor: a sprite that snaps to a 4px grid, with a lagging trail */
.cursor, .cursor-trail { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; will-change: transform; }
.cursor { width: 10px; height: 10px; margin: 8px 0 0 10px; border: 2px solid var(--bone); box-shadow: 0 0 0 1px var(--void); transition: opacity 0.2s, width 0.12s var(--steps), height 0.12s var(--steps), margin 0.12s var(--steps), border-color 0.12s; }
.cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; background: var(--violet); }
.cursor.show, .cursor-trail.show { opacity: 1; }
.cursor.hot { width: 16px; height: 16px; margin: 10px 0 0 12px; border-color: var(--violet); }
.cursor.down { border-color: var(--violet); width: 6px; height: 6px; margin: 8px 0 0 10px; }
.cursor-trail { width: 5px; height: 5px; margin: 14px 0 0 16px; background: var(--violet); }
.cursor-trail.show { opacity: 0.7; }

/* HUD: corner brackets and two live readouts, like an instrument frame */
.hud { position: fixed; inset: 0; z-index: 105; pointer-events: none; }
.hud-c { position: absolute; width: 14px; height: 14px; border: 2px solid var(--hair-strong); }
.hud-c.tl { left: 10px; top: calc(var(--bar-h) + 6px); border-right: 0; border-bottom: 0; }
.hud-c.tr { right: 10px; top: calc(var(--bar-h) + 6px); border-left: 0; border-bottom: 0; }
.hud-c.bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.hud-c.br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.hud-l { position: absolute; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--ash); font-variant-numeric: tabular-nums; }
.hud-l b { font-weight: 400; color: var(--ash); }
.hud-left { left: 32px; }
.hud-right { right: 32px; }
.hud .dot { width: 6px; height: 6px; }

/* Headline glitch: one faint slice, one frame, every fourteen seconds */
.glitch { position: relative; }
.glitch::before { content: attr(data-text); position: absolute; inset: 0; color: var(--violet); opacity: 0; pointer-events: none; white-space: pre-line; }
.glitch.in::before { animation: glitchA 14s steps(1, end) infinite; }
@keyframes glitchA { 0%, 92.5%, 100% { opacity: 0; } 93% { opacity: 0.55; clip-path: inset(38% 0 50% 0); transform: translateX(3px); } 93.5% { opacity: 0; } }

/* Organ tiles: a status LED each, and icons that blink between two frames on hover */
.led { position: absolute; right: 14px; top: 14px; width: 6px; height: 6px; background: var(--violet); animation: led 2.6s steps(1, end) infinite; animation-delay: var(--d, 0s); opacity: 0.35; }
@keyframes led { 0%, 70% { opacity: 0.35; } 72%, 76% { opacity: 1; } 78%, 100% { opacity: 0.35; } }
.pix .f2 { opacity: 0; }
.tiles li:hover .pix .f1 { animation: frameA 0.5s steps(1, end) infinite; }
.tiles li:hover .pix .f2 { animation: frameB 0.5s steps(1, end) infinite; }
@keyframes frameA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes frameB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* Gate burst: eight pixels thrown from the marker when a gate opens */
.spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--violet); pointer-events: none; animation: spark 0.6s steps(6, end) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* Kernel gauges: three looping demonstrations, 5.2 seconds each */
.gauge { position: relative; height: 34px; margin-bottom: 4px; }
.g-tag { position: absolute; right: 0; top: 0; font: 400 0.625rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--alert); opacity: 0; }
/* spend cap: a bar climbs in steps, reaches the cap, and the overflow is refused */
.g-cap::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 9px); }
.g-fill { position: absolute; left: 0; top: 14px; height: 6px; width: 0; background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 9px); animation: gfill 5.2s steps(24, end) infinite; }
.g-mark { position: absolute; left: 72%; top: 8px; width: 2px; height: 18px; background: var(--bone); }
.g-cap .g-tag { animation: gtag 5.2s steps(1, end) infinite; }
@keyframes gfill { 0% { width: 0; } 55% { width: 72%; } 60%, 84% { width: 72%; box-shadow: 0 0 10px var(--violet-glow); } 86%, 100% { width: 0; } }
@keyframes gtag { 0%, 57% { opacity: 0; } 58%, 62% { opacity: 1; } 63%, 65% { opacity: 0; } 66%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }
/* approval line: a dot roams below the line, crosses it, and stops to ask */
.g-rail { position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--hair-strong); }
.g-rail::before { content: "approval line"; position: absolute; left: 0; top: -14px; font: 400 0.5625rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); }
.g-dot { position: absolute; left: 0; top: 26px; width: 6px; height: 6px; background: var(--violet); animation: gdot 5.2s steps(1, end) infinite; }
.g-line .g-tag { color: var(--violet); animation: gask 5.2s steps(1, end) infinite; }
@keyframes gdot { 0% { transform: translate(0, 0); } 10% { transform: translate(40px, 0); } 20% { transform: translate(90px, 2px); } 30% { transform: translate(140px, -2px); } 40% { transform: translate(170px, 0); } 50%, 88% { transform: translate(190px, -20px); background: var(--bone); } 89%, 100% { transform: translate(0, 0); } }
@keyframes gask { 0%, 49% { opacity: 0; } 50%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } }
/* hard stops: three checks run, the third fails, everything locks */
.g-stops i { position: absolute; top: 12px; width: 12px; height: 12px; border: 1px solid var(--hair-strong); }
.g-stops i:nth-child(1) { left: 0; animation: gok 5.2s steps(1, end) infinite; }
.g-stops i:nth-child(2) { left: 20px; animation: gok 5.2s steps(1, end) infinite 0.5s; }
.g-stops i:nth-child(3) { left: 40px; animation: gbad 5.2s steps(1, end) infinite 1s; }
.g-stops .g-tag { animation: gstop 5.2s steps(1, end) infinite; }
@keyframes gok { 0%, 14% { background: transparent; } 15%, 84% { background: var(--violet); border-color: var(--violet); } 85%, 100% { background: transparent; border-color: var(--hair-strong); } }
@keyframes gbad { 0%, 14% { background: transparent; } 15%, 18% { background: var(--violet); border-color: var(--violet); } 19%, 21% { background: transparent; } 22%, 84% { background: var(--alert); border-color: var(--alert); } 85%, 100% { background: transparent; border-color: var(--hair-strong); } }
@keyframes gstop { 0%, 41% { opacity: 0; } 42%, 84% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* Autonomy meter: a runner travels along the segments being built */
.meter { overflow: hidden; }
.meter li.building::after { content: ""; position: absolute; left: 0; top: 0; height: 6px; width: 18px; background: var(--bone); animation: runner 2.4s steps(12, end) infinite; opacity: 0.9; }
@keyframes runner { from { transform: translateX(-18px); } to { transform: translateX(100vw); } }

/* Never: the marks stamp in */
.never .x { transform: scale(2.4); opacity: 0; }
.never li.in .x { animation: stamp 0.35s steps(3, end) forwards; animation-delay: calc(var(--i, 0) * 90ms + 250ms); }
@keyframes stamp { to { transform: scale(1); opacity: 1; } }

/* Buttons: a pixel sweep on hover */
.btn { background-image: linear-gradient(90deg, var(--violet-soft) 0 100%); background-repeat: no-repeat; background-size: 0% 100%; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s, background-size 0.25s steps(6, end); }
.btn:hover { background-size: 100% 100%; }
.btn-p { background-image: linear-gradient(90deg, rgba(255,255,255,0.22) 0 100%); }

/* ===== Waitlist ======================================================== */
.wl { width: min(100%, 640px); display: grid; gap: 14px; text-align: left; margin-top: 8px; background: rgba(5, 5, 5, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--hair-strong); padding: 22px; position: relative; }
.wl::before { content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; border-top: 2px solid var(--violet); border-left: 2px solid var(--violet); }
.wl::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-bottom: 2px solid var(--violet); border-right: 2px solid var(--violet); }
.wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wl-field { display: grid; gap: 8px; }
.wl-field .label em, .wl-doors legend em { font-style: normal; color: var(--ash); opacity: 0.8; letter-spacing: 0.1em; text-transform: none; }
.wl input, .wl textarea { width: 100%; background: var(--void); color: var(--bone); border: 1px solid var(--hair-strong); padding: 12px 14px; font: 400 1rem/1.4 var(--sans); outline: none; transition: border-color 0.15s, box-shadow 0.15s; resize: vertical; }
.wl input::placeholder, .wl textarea::placeholder { color: #55565a; }
.wl input:focus, .wl textarea:focus { border-color: var(--violet); box-shadow: 3px 3px 0 0 var(--violet-2); }
.wl input:user-invalid { border-color: var(--alert); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.wl-note { text-transform: none; letter-spacing: 0.04em; color: var(--ash); max-width: 40ch; line-height: 1.5; }
.wl-note.err { color: var(--alert); }
.wl.busy #wlBtn { pointer-events: none; opacity: 0.7; }
.wl-done { display: grid; gap: 10px; justify-items: start; padding: 6px 0 2px; }
.wl-done[hidden] { display: none; }
.wl-done b { font: 400 1.5rem/1.15 var(--display); }
.wl-done p { color: var(--ash-2); }
.wl.sealed .wl-row, .wl.sealed > .wl-field, .wl.sealed .wl-actions { display: none; }
.wl.sealed { animation: sealed 0.5s steps(6, end); }
@keyframes sealed { 0% { box-shadow: 0 0 0 0 var(--violet-glow); } 100% { box-shadow: 0 0 0 18px transparent; } }
@media (max-width: 640px) {
  .wl { padding: 18px 16px; }
  .wl-row { grid-template-columns: 1fr; }
}

/* ===== Audit pass: outcome first ====================================== */
.under { margin-top: -6px; }

/* Phone-only sticky call to action */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 108; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(5, 5, 5, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hair); transform: translateY(110%); transition: transform 0.35s var(--steps); }
.cta-bar.show { transform: none; }
.cta-bar .btn { min-height: 42px; white-space: nowrap; flex: 1; justify-content: center; }
.cta-bar .label { white-space: nowrap; flex: none; }
@media (max-width: 480px) { .cta-bar .label { display: none; } }
@media (max-width: 860px) { .cta-bar { display: flex; } body { padding-bottom: 0; } }

/* Three ways in */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.doors li { position: relative; background: var(--void); padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; transition: background 0.25s var(--steps); }
.doors li:hover { background: var(--ink-1); }
.doors li::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 9px); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--steps); }
.doors li:hover::after { transform: scaleX(1); }
.doors .label { color: var(--violet); }
.doors b { font: 400 1.5rem/1.15 var(--display); }
.doors p { color: var(--ash-2); font-size: 0.975rem; }
.journey-wrap { display: grid; gap: 16px; }
.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.journey li { font: 400 0.75rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--hair-strong); padding: 10px 12px; color: var(--ash-2); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.journey li:not(:last-child)::after { content: "→"; margin-left: 16px; color: var(--ash); }
.journey li.hl { color: var(--void); background: var(--violet); border-color: var(--violet); }
.journey li.hl::after { color: var(--ash); }

/* Your AI team */
.brief { border: 1px solid var(--hair-strong); background: rgba(9, 9, 9, 0.8); padding: 18px 20px 16px; display: grid; gap: 14px; align-self: start; }
.tag-ex { color: var(--sand); border-color: var(--sand); }
.brief-head { font: 400 1.35rem/1.2 var(--display); }
.brief-list { display: grid; gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.brief-list li { background: var(--void); display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; font-size: 0.95rem; color: var(--ash-2); }
.brief-list li i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; font: 400 0.8rem/1 var(--display); border: 1px solid var(--hair-strong); }
.brief-list i.ask { color: var(--void); background: var(--violet); border-color: var(--violet); }
.brief-list i.warn { color: var(--alert); border-color: var(--alert); }
.brief-list i.done { color: var(--moss); border-color: var(--moss); }
.brief-list li.approved i.ask { background: var(--moss); border-color: var(--moss); }
.chip { font: 400 0.6875rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); border: 1px solid var(--hair-strong); padding: 8px 10px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.chip:hover { border-color: var(--violet); color: var(--violet); }
.chip.done { background: var(--moss); border-color: var(--moss); color: var(--void); pointer-events: none; }
.brief-foot { display: inline-flex; align-items: center; gap: 8px; }
.roles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.roles li { background: var(--void); padding: 20px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 14px; align-content: start; transition: background 0.25s var(--steps); }
.roles li:hover { background: var(--ink-1); }
.roles .pix { grid-row: span 3; }
.roles b { font: 400 1.05rem/1.2 var(--display); }
.roles span:not(.pix) { color: var(--ash-2); font-size: 0.925rem; }
.roles em { font: 400 0.625rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet); font-style: normal; margin-top: 4px; }
.roles li:hover .pix { color: var(--violet); }
.roles li:hover .pix .f1 { animation: frameA 0.5s steps(1, end) infinite; }
.roles li:hover .pix .f2 { animation: frameB 0.5s steps(1, end) infinite; }

/* Mid-page call to action */
.midcta { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 36px var(--gutter); border-bottom: 1px solid var(--hair); background: rgba(9, 9, 9, 0.6); text-align: center; }
.midcta p { font: 400 clamp(1.1rem, 1.6vw, 1.4rem)/1.3 var(--display); }

/* Safety */
.claim-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.points li { background: var(--void); padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.points b { font: 400 1.05rem/1.2 var(--display); }
.points span { color: var(--ash-2); font-size: 0.925rem; }

/* Under the hood */
.tech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.tech li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.tech b { font: 400 1rem/1.3 var(--display); }
.tech span { color: var(--ash); font-size: 0.925rem; }
.hood-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.hood-organs { display: grid; gap: 14px; }
.hood-grid .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hood-grid .tiles li { padding: 16px 14px; }
.hood-grid .tiles b { font-size: 0.85rem; }
.hood-grid .tiles span:last-child { font-size: 0.82rem; }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 400 1.1rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.2rem/1 var(--display); color: var(--violet); flex: none; width: 24px; text-align: center; transition: transform 0.2s var(--steps); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--violet); }
.faq details p { color: var(--ash-2); padding: 0 40px 18px 0; max-width: 60ch; }

/* Waitlist additions */
.wl-doors { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.wl-doors legend { padding: 0; margin-bottom: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opt span { display: inline-block; font: 400 0.6875rem/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash-2); border: 1px solid var(--hair-strong); padding: 10px 12px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.chip-opt:hover span { border-color: var(--bone); color: var(--bone); }
.chip-opt input:checked + span { color: var(--void); background: var(--violet); border-color: var(--violet); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.wl.sealed .wl-doors { display: none; }

@media (max-width: 1100px) { .hood-grid { grid-template-columns: 1fr; } .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .doors, .roles { grid-template-columns: 1fr; } .tech { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .points { grid-template-columns: 1fr; } .hood-grid .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey li:not(:last-child)::after { margin-left: 8px; } }