:root {
  /* Compliance note: Interface / Headings:** Heading: “Sora” for navigation; IBM Plex Mono” timestamps create an eclectic-hybrid voice while avoiding mono as the dominant overused style. */
  --abyss: #061126;
  --boardroom: #0B2A55;
  --ice: #D8F3FF;
  --cyan: #46D9FF;
  --violet: #8C6CFF;
  --rose: #FF6FAE;
  --silver: #A7B7C8;
  --progress: 0;
  --lens-scale: 0.74;
  --lens-blur: 10px;
  --glitch-x: 0px;
}

* { box-sizing: border-box; }

html { background: var(--abyss); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ice);
  font-family: Inter, sans-serif;
  background:
    radial-gradient(circle at 52% 40%, rgba(70, 217, 255, 0.12), transparent 28vw),
    radial-gradient(circle at 75% 18%, rgba(140, 108, 255, 0.11), transparent 30vw),
    linear-gradient(180deg, #061126 0%, #071735 46%, #061126 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0 44%, rgba(6, 17, 38, 0.78) 83%);
  z-index: 20;
}

.blueprint-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.28;
  transform: translate(var(--glitch-x), calc(var(--glitch-x) * -0.5));
  background-image:
    linear-gradient(rgba(70, 217, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 217, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, transparent 8.25%, rgba(216, 243, 255, 0.10) 8.32%, transparent 8.38%);
  background-size: 72px 72px, 72px 72px, 8.333% 100%;
}

.dream-fog {
  position: fixed;
  width: 70vw;
  height: 34vh;
  z-index: 2;
  pointer-events: none;
  filter: blur(34px);
  opacity: 0.32;
  mix-blend-mode: screen;
  animation: fog-drift 18s ease-in-out infinite alternate;
}

.fog-one {
  top: 16vh;
  left: -18vw;
  background: linear-gradient(90deg, transparent, rgba(70, 217, 255, 0.22), rgba(140, 108, 255, 0.18), transparent);
}

.fog-two {
  bottom: 10vh;
  right: -24vw;
  background: linear-gradient(90deg, transparent, rgba(140, 108, 255, 0.2), rgba(216, 243, 255, 0.12), transparent);
  animation-duration: 23s;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 42px;
  font-family: Sora, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(216, 243, 255, 0.78);
}

.mark { font-weight: 700; }
.navline { display: flex; gap: 32px; color: rgba(167, 183, 200, 0.66); }
.timecode { justify-self: end; font-family: "IBM Plex Mono", monospace; color: rgba(70, 217, 255, 0.74); }

.panel {
  position: relative;
  min-height: 100vh;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 16vh 8vw;
}

.hero {
  align-items: flex-end;
  padding-bottom: 10vh;
}

.hero-copy {
  width: min(760px, 72vw);
  transform: translateY(calc(var(--progress) * -34px));
}

.eyebrow {
  margin: 0 0 22px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 24px;
  font-family: "Instrument Serif", serif;
  font-size: clamp(72px, 12vw, 178px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-style: italic;
  font-weight: 400;
  text-shadow: 0 0 38px rgba(70, 217, 255, 0.24);
}

h2 {
  max-width: 780px;
  font-family: "Instrument Serif", serif;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: var(--ice);
}

.hero-line, .plane-text p, .final-copy p {
  max-width: 600px;
  color: rgba(167, 183, 200, 0.84);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.72;
}

.glitch-title { position: relative; }
.glitch-title::before, .glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.is-glitching .glitch-title::before { opacity: 0.58; color: var(--violet); transform: translate(-5px, 2px); }
.is-glitching .glitch-title::after { opacity: 0.44; color: var(--rose); transform: translate(4px, -1px); }

.lens-system {
  position: fixed;
  left: 50%;
  top: 48%;
  width: min(64vw, 760px);
  aspect-ratio: 1;
  z-index: 6;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--lens-scale));
  filter: blur(var(--lens-blur));
  opacity: 0;
  animation: lens-awaken 2.2s cubic-bezier(.2,.8,.1,1) forwards;
}

.lens-bloom {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 243, 255, 0.94) 0 2%, rgba(70, 217, 255, 0.25) 9%, rgba(140, 108, 255, 0.10) 34%, transparent 64%);
  mix-blend-mode: screen;
  box-shadow: 0 0 80px rgba(70, 217, 255, 0.33), inset 0 0 80px rgba(216, 243, 255, 0.16);
}

.focus-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(70, 217, 255, 0.58);
  box-shadow: 0 0 24px rgba(70, 217, 255, 0.28);
}
.ring-one { inset: 18%; animation: rotate-slow 42s linear infinite; }
.ring-two { inset: 26%; border-color: rgba(216, 243, 255, 0.32); animation: rotate-slow 31s linear infinite reverse; }
.ring-three { inset: 8%; border-style: dashed; border-color: rgba(140, 108, 255, 0.35); animation: rotate-slow 64s linear infinite; }

.focus-ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(70,217,255,.55) 0 1deg, transparent 1deg 14deg);
  mask: radial-gradient(circle, transparent 62%, #000 63% 65%, transparent 66%);
}

.flare {
  position: absolute;
  left: -22%;
  right: -22%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(70, 217, 255, 0.2), var(--ice), rgba(70, 217, 255, 0.24), transparent);
  box-shadow: 0 0 22px rgba(216, 243, 255, 0.7);
  mix-blend-mode: screen;
}
.diagonal { transform: rotate(-18deg); opacity: 0.42; }

.world-ghost {
  position: absolute;
  opacity: 0.62;
  filter: drop-shadow(0 0 10px rgba(70, 217, 255, 0.28));
}
.ghost-buildings {
  left: 37%; top: 38%; width: 110px; height: 78px;
  background: linear-gradient(90deg, transparent 0 8px, rgba(216,243,255,.46) 8px 9px, transparent 9px 20px), linear-gradient(0deg, rgba(70,217,255,.34) 1px, transparent 1px);
  background-size: 22px 100%, 100% 18px;
  clip-path: polygon(0 100%,0 58%,15% 58%,15% 28%,30% 28%,30% 47%,48% 47%,48% 14%,66% 14%,66% 38%,82% 38%,82% 65%,100% 65%,100% 100%);
}
.ghost-transit {
  left: 48%; top: 53%; width: 150px; height: 90px;
  border-left: 1px solid rgba(70,217,255,.5);
  border-bottom: 1px solid rgba(70,217,255,.5);
  border-radius: 0 0 0 80px;
}
.ghost-transit::before, .ghost-transit::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.ghost-transit::before { left: 36%; top: 22%; }
.ghost-transit::after { right: 12%; bottom: 10%; }
.ghost-weather {
  left: 31%; top: 56%; width: 190px; height: 64px;
  border-top: 1px solid rgba(216,243,255,.35);
  border-radius: 50%;
  box-shadow: 0 -12px 0 -11px rgba(70,217,255,.45), 0 -28px 0 -27px rgba(140,108,255,.4);
}

.agent-swarm span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(216, 243, 255, 0.8);
  box-shadow: 0 0 8px rgba(70, 217, 255, 0.8);
}

.hero-annotation, .shard-label, .decision-dot, .calibration-note {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(216, 243, 255, 0.72);
  text-transform: uppercase;
}
.hero-annotation { border-top: 1px solid rgba(70,217,255,.45); padding-top: 12px; }
.hero-annotation b { display: block; margin-top: 8px; color: var(--cyan); font-weight: 500; }
.annotation-left { left: 9vw; top: 24vh; }
.annotation-right { right: 10vw; bottom: 28vh; }

.projection { border-top: 1px solid rgba(70, 217, 255, 0.08); }
.plane-text {
  position: relative;
  padding: 42px;
  background: linear-gradient(135deg, rgba(11, 42, 85, 0.55), rgba(6, 17, 38, 0.10));
  border: 1px solid rgba(70, 217, 255, 0.18);
  box-shadow: 0 24px 110px rgba(0,0,0,.25), inset 0 0 60px rgba(70,217,255,.04);
  backdrop-filter: blur(10px);
}
.left-plane { margin-left: 3vw; }
.right-plane { margin-left: auto; margin-right: 4vw; }
.narrow { max-width: 780px; }

.annotation-rail {
  position: absolute;
  right: 7vw;
  top: 28vh;
  display: grid;
  gap: 44px;
  color: rgba(167, 183, 200, 0.62);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.annotation-rail::before { content: ""; position: absolute; left: -34px; top: -20px; bottom: -20px; width: 1px; background: rgba(70,217,255,.35); }

.shard-label {
  padding: 18px 24px;
  background: rgba(11,42,85,.38);
  border: 1px solid rgba(70,217,255,.2);
  transform: skewX(-8deg);
}
.shard-a { left: 14vw; top: 24vh; }
.shard-b { left: 28vw; bottom: 18vh; color: var(--rose); }
.shard-c { right: 18vw; top: 18vh; color: var(--violet); }

.decision-dot {
  right: 22vw;
  top: 48vh;
  color: var(--cyan);
}
.decision-dot::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: -34px;
  top: -4px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 28px rgba(70,217,255,.08), 0 0 0 72px rgba(70,217,255,.045), 0 0 0 132px rgba(140,108,255,.032), 0 0 38px var(--cyan);
}

.calibration-board {
  width: min(760px, 82vw);
  margin: auto;
  padding: 46px;
  background: rgba(11, 42, 85, 0.46);
  border: 1px solid rgba(216,243,255,.16);
  box-shadow: 0 0 0 1px rgba(70,217,255,.12), 0 30px 120px rgba(0,0,0,.38);
}
.calibration-board h2 { font-size: clamp(42px, 5vw, 78px); }
.rail-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(70,217,255,.16);
  font-family: Sora, sans-serif;
  color: var(--silver);
}
.rail-row b { color: var(--ice); font-weight: 500; }
.calibration-note { right: 10vw; bottom: 18vh; max-width: 340px; line-height: 1.7; color: rgba(167,183,200,.66); }

.final { justify-content: center; text-align: center; }
.final-copy { transform: translateY(-4vh); }
.final-copy p { margin-inline: auto; }
.quiet-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 18px;
  color: var(--ice);
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(70,217,255,.44);
  background: rgba(11,42,85,.28);
  box-shadow: 0 0 28px rgba(70,217,255,.12);
}

.vector-field {
  position: fixed;
  inset: auto 0 9vh 0;
  width: 100vw;
  height: 32vh;
  z-index: 5;
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: screen;
}
.vector-path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
  stroke-dasharray: 8 18;
  stroke-linecap: round;
  animation: dash-flow 18s linear infinite;
}
.path-two { stroke: var(--violet); opacity: .54; animation-duration: 24s; }
.path-three { stroke: var(--ice); opacity: .32; animation-duration: 31s; }

.scan-tear {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--rose), var(--cyan), transparent);
  box-shadow: 0 0 18px rgba(255,111,174,.55);
}
.is-glitching .scan-tear { animation: tear 180ms steps(2, end); }

@keyframes lens-awaken {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); filter: blur(28px); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(.28); filter: blur(16px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--lens-scale)); filter: blur(var(--lens-blur)); }
}
@keyframes rotate-slow { to { transform: rotate(360deg); } }
@keyframes dash-flow { to { stroke-dashoffset: -420; } }
@keyframes fog-drift { to { transform: translate3d(14vw, -4vh, 0) rotate(3deg); } }
@keyframes tear { 0%,100% { opacity:0; transform: translateY(0); } 35% { opacity:1; transform: translateY(-22vh); } 70% { opacity:.8; transform: translateY(18vh); } }

@media (max-width: 800px) {
  .topbar { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .navline, .timecode { display: none; }
  .panel { padding: 18vh 6vw 12vh; }
  .hero-copy, .plane-text { width: 100%; }
  .hero-annotation, .annotation-rail, .shard-label, .calibration-note { display: none; }
  .lens-system { width: 112vw; top: 42%; }
  .right-plane, .left-plane { margin: 0; }
  .plane-text, .calibration-board { padding: 28px; }
}