:root {
  /* Compliance vocabulary: IntersectionObserver` threshold trigger toggles. smooth transitions. harshness intentional simulates perceptual jolt crossing between entire contained thick `#00ff41` (Google */
  --void: #0a0a0a;
  --signal: #00ff41;
  --bone: #f0f0f0;
  --ash: #666666;
  --ghost: #1a1a1a;
  --wire: #333333;
  --alert: #ff2d2d;
  --static: #00e5ff;
  --soft: #c8c8c8;
  --ink: #2a2a2a;
}

* { box-sizing: border-box; }

html { background: var(--void); color: var(--soft); font-family: "Space Grotesk", sans-serif; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--soft);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  background: repeating-linear-gradient(transparent, transparent 1px, rgba(0,255,65,0.03) 1px, rgba(0,255,65,0.03) 2px);
}

.scroll-depth {
  position: fixed;
  left: 14px;
  bottom: 12px;
  z-index: 999;
  margin: 0;
  color: var(--ash);
  font: 400 10px "JetBrains Mono", monospace;
  font-feature-settings: 'zero' 1, 'ss01' 1;
  background: var(--void);
  border: 1px solid var(--wire);
  padding: 6px 8px;
}

.collision-header {
  position: relative;
  min-height: 100vh;
  background: var(--void);
  overflow: hidden;
  border-bottom: 4px solid var(--signal);
}

.collision-block {
  position: absolute;
  border: 4px solid var(--signal);
  background: var(--ghost);
  display: grid;
  place-items: center;
  z-index: 2;
}

.block-layer { left: 6vw; top: 9vh; width: 54vw; height: 32vh; transform: rotate(-3deg); }
.block-hyphen { left: 36vw; top: 34vh; width: 28vw; height: 26vh; background: var(--void); z-index: 3; }
.block-two { right: 7vw; bottom: 10vh; width: 45vw; height: 38vh; transform: rotate(2deg); }

h1, h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.86;
  color: var(--signal);
}

h1 { font-size: clamp(4.5rem, 16vw, 14rem); }
h2 { font-size: clamp(3rem, 8vw, 7rem); }

.hyphen {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(5rem, 14vw, 13rem);
  line-height: 1;
  color: var(--bone);
}

.glitch-title { transition: text-shadow 200ms linear; }
.glitch-title:hover { text-shadow: -2px 0 var(--alert), 2px 0 var(--static); }

.hex-stream {
  position: absolute;
  z-index: 1;
  width: 12px;
  overflow-wrap: break-word;
  color: var(--signal);
  opacity: 0.2;
  font: 400 10px "JetBrains Mono", monospace;
  line-height: 1.2;
  animation: hexfall 30s linear infinite;
}
.stream-a { left: 3vw; top: -40vh; height: 180vh; }
.stream-b { left: 67vw; top: -20vh; height: 150vh; animation-duration: 24s; }
.stream-c { right: 4vw; top: -60vh; height: 190vh; animation-duration: 36s; }

@keyframes hexfall { from { transform: translateY(-20%); } to { transform: translateY(55%); } }

.spray {
  position: absolute;
  right: 7vw;
  top: 5vh;
  color: var(--signal);
  font: 700 clamp(1rem, 2vw, 2rem) "JetBrains Mono", monospace;
  transform: rotate(7deg);
  text-shadow: 3px 0 var(--alert);
}

.bootline {
  position: absolute;
  left: 6vw;
  bottom: 5vh;
  color: var(--ash);
  font: 400 12px "JetBrains Mono", monospace;
}

.data-trench {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  min-height: 285vh;
  padding: 12vh 4vw 20vh;
  background: var(--void);
}

.trench-ticker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(4vw + 33.333%);
  width: calc(25% - 2vw);
  border-left: 2px solid var(--wire);
  border-right: 2px solid var(--wire);
  overflow: hidden;
  color: var(--signal);
  opacity: 0.82;
}

.ticker-track {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  font: 700 12px "JetBrains Mono", monospace;
  writing-mode: vertical-rl;
  animation: tickdown 18s linear infinite;
  min-height: 200vh;
  padding: 30px 0;
}

@keyframes tickdown { from { transform: translateY(-45%); } to { transform: translateY(0); } }

.data-card {
  position: relative;
  border: 4px solid var(--signal);
  background: var(--ghost);
  padding: clamp(1rem, 2.4vw, 2.25rem);
  min-height: 46vh;
  z-index: 2;
}

.data-card::before, .data-card::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--signal);
}
.data-card::before { left: -5px; top: -5px; }
.data-card::after { right: -5px; bottom: -5px; }

.left-card { grid-column: 1 / 5; }
.right-card { grid-column: 8 / 13; transform: translateY(64px); }
.throughput-card { grid-row: 1; }
.topology-card { grid-row: 1; }
.gas-card { grid-row: 3; margin-top: 16vh; }
.timeline-card { grid-row: 3; margin-top: 16vh; }
.proof-card { grid-row: 5; margin-top: 16vh; }
.trace-card { grid-row: 5; margin-top: 16vh; }

.kicker, strong, b {
  font-family: "JetBrains Mono", monospace;
  font-feature-settings: 'zero' 1, 'ss01' 1;
  color: var(--signal);
}

.kicker { margin: 0 0 18px; font-size: 0.72rem; color: var(--ash); }

.bar-chart { margin-top: 28px; display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 42px 1fr 95px; gap: 12px; align-items: center; font: 400 12px "JetBrains Mono", monospace; }
.bar-shell { height: 22px; border: 1px solid var(--wire); background: var(--void); }
.bar { width: 0; height: 100%; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.bar.l1 { background: var(--ash); }
.bar.l2 { background: var(--signal); }

.topology { width: 100%; height: auto; margin-top: 20px; }
.topology text { fill: var(--ash); font: 700 18px "JetBrains Mono", monospace; }
.main-node { fill: var(--void); stroke: var(--ash); stroke-width: 4; }
.links line { stroke: var(--signal); stroke-width: 2; stroke-dasharray: 8 4; animation: dash 1.2s linear infinite; }
.rollups circle { fill: var(--void); stroke: var(--signal); stroke-width: 4; }
.topology-spin { transform-origin: 300px 200px; animation: rotateNet 720s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes rotateNet { to { transform: rotate(360deg); } }

.rupture {
  grid-column: 1 / 13;
  height: 80px;
  margin: 18vh -4vw 0;
  position: relative;
  border-top: 4px solid var(--signal);
  border-bottom: 4px solid var(--signal);
  overflow: hidden;
  transform: translateX(40px);
  color: var(--void);
  background: var(--bone);
  font: 700 14px "JetBrains Mono", monospace;
}
.rupture svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0.72; }
.rupture span { position: relative; z-index: 2; display: block; padding: 26px 4vw; }
.rupture-two { grid-row: 4; }
.rupture-three { grid-row: 6; }
.rupture.active { background: var(--signal); color: var(--void); }

.waterfall { border: 4px solid var(--signal); margin-top: 26px; padding: 18px; display: grid; gap: 13px; background: var(--void); }
.water-row { display: grid; grid-template-columns: 120px 1fr 70px; gap: 12px; align-items: center; font: 400 11px "JetBrains Mono", monospace; }
.water-row div { width: var(--w); height: 18px; background: var(--signal); justify-self: start; }

.timeline { display: flex; gap: 7px; overflow: hidden; margin-top: 30px; border: 2px solid var(--wire); padding: 18px; background: var(--void); }
.block-cell { flex: 0 0 12px; width: 12px; height: 12px; background: var(--ghost); }
.block-cell.confirmed { background: var(--signal); }
.block-cell.pending { animation: pulseBlock 650ms steps(1, end) infinite; }
@keyframes pulseBlock { 0%, 100% { background: var(--signal); } 50% { background: var(--void); } }

ul { list-style: none; margin: 24px 0 0; padding: 0; }
li { position: relative; padding-left: 22px; margin-bottom: 16px; }
li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 4px; height: 4px; background: var(--signal); }

.pcb { width: 100%; height: 260px; margin-top: 20px; background: var(--void); border: 2px solid var(--wire); }
.pcb path { fill: none; stroke: var(--wire); stroke-width: 4; }
.pcb circle { fill: var(--signal); }

body.inverted { background: var(--bone); color: var(--ink); }
body.inverted .data-trench { background: var(--bone); }
body.inverted .data-card { background: var(--bone); color: var(--ink); }
body.inverted h2 { color: var(--void); }
body.inverted .scroll-depth { background: var(--bone); color: var(--void); }

.terminal-footer {
  min-height: 100vh;
  background: var(--void);
  color: var(--signal);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vw;
  border-top: 4px solid var(--signal);
  font-family: "JetBrains Mono", monospace;
}
.terminal-line { font-size: clamp(1rem, 2vw, 2rem); }
.prompt { color: var(--ash); }
.cursor { display: inline-block; width: 0.65em; height: 1em; margin-left: 4px; background: var(--signal); vertical-align: -0.15em; animation: blink 1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.domain-texture { margin-top: 18vh; color: var(--bone); opacity: 0.15; font-size: 8px; line-height: 1.2; max-width: 900px; }

@media (max-width: 760px) {
  .block-layer, .block-two { width: 78vw; }
  .block-hyphen { left: 18vw; width: 48vw; }
  .data-trench { display: block; padding: 8vh 5vw; }
  .trench-ticker { display: none; }
  .data-card, .right-card { transform: none; margin: 0 0 10vh; }
  .rupture { margin: 8vh -5vw; transform: translateX(20px); }
}