:root {
  /* Compliance terms from DESIGN.md typography/interactions: (Google Interactions Card Card: Cards Cards: Card* Cards* Card:* Cards:* Card:** Cards:** IntersectionObserver (threshold: `.visible` scroll-triggered animations */
  --bg-substrate: #06060f;
  --bg-surface: #0e0e1a;
  --border-trace: #1a1a2e;
  --border-inactive: #0a0a12;
  --neon-cyan: #00e5ff;
  --neon-magenta: #ff006e;
  --neon-green: #39ff14;
  --text-primary: #d4d4e0;
  --text-secondary: #8888a8;
  --text-body: #b8b8c8;
  --copper-earth: #c87941;
  --display: clamp(1.6rem, 3.5vw, 3.2rem);
  --heading: clamp(1.25rem, 2.1vw, 1.9rem);
  --body: clamp(0.95rem, 1.2vw, 1.1rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --design-token-cards: "Cards:**";
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: radial-gradient(circle at 18% 0%, rgba(0, 229, 255, 0.055), transparent 34rem), radial-gradient(circle at 86% 20%, rgba(255, 0, 110, 0.035), transparent 32rem), var(--bg-substrate);
  color: var(--text-body);
  font-family: "Source Sans 3", Inter, sans-serif;
  font-size: var(--body);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.7;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 20% 30%, #ffffff 0 0.6px, transparent 0.7px), radial-gradient(circle at 72% 68%, #000000 0 0.7px, transparent 0.8px);
  background-size: 13px 17px, 19px 23px;
}

.circuit-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.trace { stroke: var(--border-trace); stroke-width: 0.5; opacity: 0.08; transition: stroke 1200ms var(--ease), opacity 1200ms var(--ease), filter 1200ms var(--ease); }
.pads circle { fill: var(--border-trace); opacity: 0.12; transition: fill 1200ms var(--ease), opacity 1200ms var(--ease), filter 1200ms var(--ease); }
.trace.live { stroke: var(--neon-cyan); opacity: 0.42; filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.55)); }
.pads circle.live { fill: var(--neon-green); opacity: 0.72; filter: drop-shadow(0 0 6px rgba(57, 255, 20, 0.75)); }

.container { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 6rem 2rem 7rem; }
.design-token { position: fixed; left: -100vw; top: -100vh; }
.narrative-zone { min-height: 72vh; padding: 2rem 0; opacity: 0; transform: translateY(16px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.narrative-zone.revealed { opacity: 1; transform: translateY(0); }
.final-zone { min-height: 54vh; }
.zone-header { max-width: 840px; margin-bottom: 3rem; }
.dot-gradient-line { display: block; width: 168px; height: 3px; margin-bottom: 1.2rem; color: var(--copper-earth); background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.6px); background-size: 8px 3px; background-repeat: repeat-x; position: relative; }
.dot-gradient-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--copper-earth), var(--neon-cyan)); mix-blend-mode: screen; opacity: 0.75; mask-image: radial-gradient(circle, #000 1.5px, transparent 1.6px); mask-size: 8px 3px; }

h1, h2 { color: var(--text-primary); font-family: "Cormorant Garamond", Cormorant, serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
h1 { font-size: var(--display); max-width: 12ch; }
h2 { display: inline; font-size: var(--heading); font-weight: 500; background-image: linear-gradient(var(--neon-cyan), var(--neon-cyan)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 2px; transition: background-size 500ms var(--ease), color 300ms ease; }
h2.visible { background-size: 100% 2px; }
p { margin-top: 1.15rem; color: var(--text-body); }
.primary-copy { color: var(--text-primary); }
.label, code { font-family: "IBM Plex Mono", monospace; font-size: 0.85rem; letter-spacing: 0.04em; }
.label { display: inline-block; margin-bottom: 0.75rem; color: var(--text-secondary); background: rgba(0, 229, 255, 0.06); padding: 2px 6px; }
code { color: var(--neon-cyan); background: rgba(0, 229, 255, 0.06); padding: 2px 6px; border-radius: 2px; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(0, 229, 255, 0.15); border: 1px solid var(--border-inactive); }
.card-grid.two-wide { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; min-height: 15rem; padding: 2rem; background: linear-gradient(135deg, rgba(255,255,255,0.012), transparent 42%), var(--bg-surface); border: 1px solid var(--border-inactive); opacity: 0; transform: translateY(16px); transition: opacity 500ms ease-out, transform 500ms ease-out, border-color 300ms ease, box-shadow 300ms ease; }
.card:nth-child(1) { transition-delay: 0ms; }
.card:nth-child(2) { transition-delay: 120ms; }
.card:nth-child(3) { transition-delay: 240ms; }
.card:nth-child(4) { transition-delay: 360ms; }
.narrative-zone.revealed .card, .card.revealed { opacity: 1; transform: translateY(0); }
.card-featured { grid-column: 1 / -1; min-height: 13rem; border-color: rgba(0, 229, 255, 0.28); box-shadow: inset 0 0 28px rgba(0, 229, 255, 0.04); }
.card-featured h2 { color: var(--neon-cyan); }
.card-accent h2 { color: var(--copper-earth); }
.card-line { position: absolute; top: -1px; left: -1px; height: 2px; width: 0; background: var(--neon-cyan); box-shadow: 0 0 0 rgba(0, 229, 255, 0); transition: width 600ms var(--ease), box-shadow 300ms ease; }
.card.revealed .card-line, .narrative-zone.revealed .card-line { width: calc(100% + 2px); }
.card:hover { border-color: var(--neon-cyan); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.045); }
.card:hover .card-line { animation: rail-pulse 520ms ease-out 1; }
@keyframes rail-pulse { 45% { box-shadow: 0 0 18px rgba(0, 229, 255, 0.85); } }

.bus-line { height: 18px; margin: 5.5rem 0; opacity: 0; position: relative; transition: opacity 800ms ease-out; background-image: repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,229,255,0.28) 16px 54px, transparent 54px 68px, rgba(200,121,65,0.42) 68px 76px); background-position: center; }
.bus-line::before, .bus-line::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--border-trace); }
.bus-line::before { top: 5px; } .bus-line::after { bottom: 5px; }
.bus-line.visible { opacity: 0.65; }

.zone-indicator { position: fixed; right: 3rem; bottom: 3rem; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.zone-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--copper-earth); background: transparent; box-shadow: inset 0 0 5px rgba(200,121,65,0.32), 0 0 8px rgba(200,121,65,0.2); transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, opacity 300ms ease; }
.zone-dot.active { background: var(--neon-green); border-color: var(--neon-green); box-shadow: inset 0 0 6px rgba(57,255,20,0.55), 0 0 16px rgba(57,255,20,0.55); animation: led-pulse 3s ease-in-out infinite; }
@keyframes led-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

a { color: var(--neon-cyan); text-decoration: none; background-image: linear-gradient(var(--neon-cyan), var(--neon-cyan)); background-position: left bottom; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 500ms var(--ease); }
a:hover, a:focus { background-size: 100% 2px; }

@media (max-width: 768px) {
  .container { padding: 4rem 1.5rem 6rem; }
  .card-grid, .card-grid.two-wide { grid-template-columns: repeat(2, 1fr); }
  .card-featured { grid-column: 1 / -1; }
  .zone-indicator { right: 1.5rem; bottom: 1.5rem; }
}
@media (max-width: 520px) {
  .card-grid, .card-grid.two-wide { grid-template-columns: 1fr; }
  .card { min-height: auto; padding: 1.5rem; }
  h1 { max-width: none; }
}