@font-face {
  font-family: "Jost";
  src: url("/fonts/Jost-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Nebula";
  src: url("/fonts/Nebula.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --bone: #f5f3ee;
  --teal: #0d8a87;
  --glow: #0fdbd5;
  --orange: #ff5c00;
  --ink: #1c1b29;
  --ink-soft: rgba(28, 27, 41, 0.65);
  --line: rgba(28, 27, 41, 0.15);
  --reveal-x: 58%;
  --reveal-y: 42%;
  --reveal-size: 132px;
  --glitch-shift: 7px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bone);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bone);
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: white;
  background: var(--ink);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: center;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  padding: clamp(86px, 11vh, 112px) clamp(34px, 5.4vw, 92px) clamp(90px, 13vh, 112px);
  background:
    linear-gradient(100deg, rgba(245, 243, 238, 0.99) 0%, rgba(245, 243, 238, 0.97) 38%, rgba(245, 243, 238, 0.68) 51%, rgba(245, 243, 238, 0.06) 78%),
    var(--bone);
}

.hero-environment {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-environment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.46) 50%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 6%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.46) 50%, #000 76%);
}

.hero-environment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245,243,238,.36), transparent 22%, transparent 75%, rgba(245,243,238,.56));
}

.rocket-scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.nebula-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; }
html.preview-effects-off .nebula-flow { opacity: 0; }
.distant-rocket, .rocket-trail, .rocket-trail-soft { opacity: 0; }
.pipeline-head small { display: block; margin-top: 4px; color: #656673; font: 500 8px/1.2 "Jost",sans-serif; letter-spacing: .08em; }
.pipeline-job { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 1px 0 6px; font: 500 10px/1.3 "Jost",sans-serif; }
.job-engine { color: #176360; font-weight: 650; flex-shrink: 0; }
.job-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555764; }
.job-status { margin-left: auto; flex-shrink: 0; color: #9e3c0a; font: 600 8px/1 ui-monospace,monospace; letter-spacing: .06em; }
.job-status[data-state="ready"] { color: #176360; }
.job-progress { display: block; width: 100%; height: 1px; background: rgba(13,138,135,.15); }
.job-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--teal),var(--glow)); transform: scaleX(.04); transform-origin: left; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(13, 138, 135, 0.15) 0.75px, transparent 0.75px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, black, transparent 42%);
  opacity: 0.5;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  contain: strict;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.visual-island__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.preview-effects-off .hero__canvas {
  opacity: 0;
}

.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 3.4vw, 48px) clamp(28px, 5.4vw, 92px);
}

.brand {
  display: block;
  width: clamp(126px, 11vw, 172px);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 42px);
}

.nav-links a {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-links a:hover {
  color: var(--teal);
}

.nav-links .nav-cta {
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}

.atmosphere,
.orb,
.grid-plane {
  position: absolute;
  pointer-events: none;
}

.atmosphere {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.orb {
  border-radius: 50%;
  filter: blur(80px);
}

.orb-teal {
  top: 7%;
  right: 19%;
  width: min(30vw, 480px);
  aspect-ratio: 1;
  background: rgba(15, 219, 213, 0.18);
}

.orb-orange {
  right: -7%;
  bottom: -21%;
  width: min(27vw, 430px);
  aspect-ratio: 1;
  background: rgba(255, 92, 0, 0.1);
}

.grid-plane {
  right: -3%;
  bottom: -12%;
  width: 64vw;
  height: 40vh;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(13, 138, 135, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 138, 135, 0.3) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(520px) rotateX(67deg) rotateZ(-4deg);
  transform-origin: center bottom;
  mask-image: radial-gradient(ellipse, black, transparent 70%);
}

.hero-copy {
  position: relative;
  z-index: 10;
  width: min(100%, 570px);
  padding-top: 0;
  text-align: left;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 clamp(13px, 2vh, 20px);
  color: var(--teal);
  font-size: clamp(0.68rem, 0.75vw, 0.82rem);
  font-weight: 670;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.engine-flip {
  min-width: 7.7em;
  color: var(--orange);
  font-weight: 760;
  transition: opacity 150ms ease, transform 150ms ease;
}

.engine-flip.is-switching {
  opacity: 0;
  transform: translateY(4px);
}

.eyebrow-static {
  color: var(--teal);
}

.eyebrow-mark {
  width: 26px;
  height: 1px;
  background: var(--teal);
  box-shadow: 8px 0 12px var(--glow);
}

h1 {
  max-width: 9.8em;
  margin: 0;
  font-family: "Nebula", "Jost", sans-serif;
  font-size: clamp(2.85rem, 4.1vw, 3.45rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-align: left;
  text-transform: uppercase;
}

.title-line {
  display: block;
  white-space: nowrap;
}

h1 em {
  position: relative;
  display: inline-block;
  color: var(--teal);
  font-style: normal;
}

h1 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.08em;
  left: 0.08em;
  height: 0.04em;
  min-height: 3px;
  background: linear-gradient(90deg, var(--orange), rgba(255, 92, 0, 0));
  transform: scaleX(0.83);
  transform-origin: left;
}

.hero-intro {
  max-width: 56ch;
  margin: clamp(16px, 2.6vh, 25px) 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.86rem, 1.02vw, 1rem);
  font-weight: 400;
  line-height: 1.45;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(17px, 2.7vh, 26px);
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hero-trust {
  margin: 12px 0 0;
  color: rgba(28, 27, 41, 0.5);
  font-size: 0.72rem;
  line-height: 1.35;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  padding: 0 24px;
  color: white;
  background: var(--ink);
  border: 1px solid var(--ink);
}

.button-primary:hover {
  background: var(--teal);
  border-color: var(--teal);
}

.button-quiet {
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.button-quiet:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: rgba(28, 27, 41, 0.48);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.signal-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
}

.signal-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px rgba(255, 92, 0, 0.55);
}

.signal-wave {
  display: inline-flex;
  height: 14px;
  align-items: center;
  gap: 2px;
  margin-left: 3px;
}

.signal-wave i {
  display: block;
  width: 1px;
  height: 45%;
  background: var(--teal);
  animation: signal-wave 1.4s ease-in-out infinite alternate;
}

.signal-wave i:nth-child(2) { height: 90%; animation-delay: -0.5s; }
.signal-wave i:nth-child(3) { height: 60%; animation-delay: -0.85s; }
.signal-wave i:nth-child(4) { height: 100%; animation-delay: -0.25s; }
.signal-wave i:nth-child(5) { height: 35%; animation-delay: -0.7s; }

html.preview-effects-off .signal-wave i {
  animation-play-state: paused;
}

.visual-column {
  position: absolute;
  top: auto;
  bottom: -2px;
  right: clamp(-110px, -6vw, -40px);
  z-index: 3;
  width: max(68vw, 137svh);
  transform: none;
}

.art-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  cursor: crosshair;
  touch-action: pan-y;
}

.art-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.figure-layer,
.glitch-slice {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

.human-layer {
  z-index: 1;
  transition: opacity 120ms ease;
  will-change: mask-image, opacity;
}

.ai-layer {
  z-index: 2;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y), #000 0 58%, rgba(0, 0, 0, 0.9) 70%, transparent 100%);
  mask-image: radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y), #000 0 58%, rgba(0, 0, 0, 0.9) 70%, transparent 100%);
  transition: opacity 190ms ease;
  will-change: mask-position, opacity;
}

.background-layer {
  display: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 82%, transparent), radial-gradient(ellipse 74% 73% at 68% 49%, #000 54%, rgba(0, 0, 0, 0.84) 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 82%, transparent), radial-gradient(ellipse 74% 73% at 68% 49%, #000 54%, rgba(0, 0, 0, 0.84) 66%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.camera-layer {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.art-stage.is-pointing:not(.is-full-reveal) .human-layer {
  -webkit-mask-image: radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y), transparent 0 58%, rgba(0, 0, 0, 0.1) 70%, #000 100%);
  mask-image: radial-gradient(circle var(--reveal-size) at var(--reveal-x) var(--reveal-y), transparent 0 58%, rgba(0, 0, 0, 0.1) 70%, #000 100%);
}

.art-stage.is-pointing .ai-layer,
.art-stage.is-full-reveal .ai-layer {
  opacity: 1;
}

.art-stage.is-full-reveal .ai-layer {
  -webkit-mask-image: none;
  mask-image: none;
}

.art-stage.is-full-reveal .human-layer {
  opacity: 0;
}

.art-stage.is-camera-flash .human-layer,
.art-stage.is-camera-flash .ai-layer {
  opacity: 0 !important;
  transition: none !important;
}

.art-stage.is-camera-flash .camera-layer {
  opacity: 1;
}

.art-stage.is-camera-flash .reveal-ring {
  opacity: 0 !important;
}

.reveal-ring {
  position: absolute;
  top: var(--reveal-y);
  left: var(--reveal-x);
  z-index: 6;
  display: grid;
  width: calc(var(--reveal-size) * 1.68);
  aspect-ratio: 1;
  place-items: end center;
  border: 1px solid rgba(15, 219, 213, 0.45);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: inset 0 0 28px rgba(15, 219, 213, 0.07), 0 0 25px rgba(15, 219, 213, 0.1);
}

.reveal-ring::before,
.reveal-ring::after {
  content: "";
  position: absolute;
  background: var(--glow);
}

.reveal-ring::before {
  top: -5px;
  left: 50%;
  width: 1px;
  height: 10px;
}

.reveal-ring::after {
  top: 50%;
  right: -5px;
  width: 10px;
  height: 1px;
}

.reveal-ring span {
  margin-bottom: -22px;
  color: var(--teal);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
}

.art-stage.is-pointing:not(.is-full-reveal) .reveal-ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.edge-vignette {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bone) 0%, rgba(245, 243, 238, 0.94) 8%, rgba(245, 243, 238, 0.42) 23%, transparent 42%),
    linear-gradient(0deg, rgba(245, 243, 238, 0.3), transparent 18%);
}

.static-field {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(15, 219, 213, 0.32) 3px, transparent 4px),
    linear-gradient(90deg, transparent 18%, rgba(255, 255, 255, 0.4) 50%, transparent 77%);
}

.glitch-slice {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: url("assets/figure-human.webp") center / cover no-repeat;
  will-change: transform, opacity;
}

.art-stage.is-full-reveal .glitch-slice {
  background-image: url("assets/figure-ai.webp");
}

.art-stage.is-camera-flash .glitch-slice {
  background-image: url("assets/figure-camera.webp");
}

.slice-1 { --slice-shift: 9px; --slice-delay: 0ms; --slice-duration: 220ms; clip-path: inset(9% 0 87% 0); filter: drop-shadow(4px 0 rgba(15, 219, 213, 0.46)); }
.slice-2 { --slice-shift: -6px; --slice-delay: 18ms; --slice-duration: 260ms; clip-path: inset(18% 0 78% 0); filter: drop-shadow(-3px 0 rgba(255, 92, 0, 0.28)); }
.slice-3 { --slice-shift: 13px; --slice-delay: 34ms; --slice-duration: 190ms; clip-path: inset(29% 0 68% 0); filter: drop-shadow(5px 0 rgba(15, 219, 213, 0.35)); }
.slice-4 { --slice-shift: -10px; --slice-delay: 8ms; --slice-duration: 280ms; clip-path: inset(40% 0 55% 0); filter: drop-shadow(-5px 0 rgba(28, 27, 41, 0.2)); }
.slice-5 { --slice-shift: 7px; --slice-delay: 48ms; --slice-duration: 235ms; clip-path: inset(52% 0 44% 0); filter: drop-shadow(3px 0 rgba(255, 255, 255, 0.42)); }
.slice-6 { --slice-shift: -13px; --slice-delay: 26ms; --slice-duration: 205ms; clip-path: inset(65% 0 31% 0); filter: drop-shadow(-4px 0 rgba(15, 219, 213, 0.4)); }
.slice-7 { --slice-shift: 11px; --slice-delay: 58ms; --slice-duration: 245ms; clip-path: inset(76% 0 20% 0); filter: drop-shadow(4px 0 rgba(255, 92, 0, 0.24)); }
.slice-8 { --slice-shift: -7px; --slice-delay: 13ms; --slice-duration: 270ms; clip-path: inset(88% 0 8% 0); filter: drop-shadow(-3px 0 rgba(15, 219, 213, 0.32)); }

.compression-field {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.compression-field i {
  position: absolute;
  display: block;
  width: 3.5%;
  height: 2.2%;
  opacity: 0;
  background: rgba(15, 219, 213, 0.36);
}

.compression-field i:nth-child(1) { top: 17%; left: 64%; width: 7%; }
.compression-field i:nth-child(2) { top: 22%; left: 79%; background: rgba(245, 243, 238, 0.58); }
.compression-field i:nth-child(3) { top: 31%; left: 56%; width: 5%; background: rgba(28, 27, 41, 0.25); }
.compression-field i:nth-child(4) { top: 35%; left: 69%; height: 3.6%; }
.compression-field i:nth-child(5) { top: 42%; left: 83%; width: 6%; background: rgba(245, 243, 238, 0.5); }
.compression-field i:nth-child(6) { top: 49%; left: 61%; background: rgba(255, 92, 0, 0.22); }
.compression-field i:nth-child(7) { top: 57%; left: 72%; width: 8%; height: 2.8%; background: rgba(28, 27, 41, 0.2); }
.compression-field i:nth-child(8) { top: 64%; left: 89%; }
.compression-field i:nth-child(9) { top: 71%; left: 52%; width: 6%; background: rgba(245, 243, 238, 0.62); }
.compression-field i:nth-child(10) { top: 78%; left: 68%; background: rgba(15, 219, 213, 0.28); }
.compression-field i:nth-child(11) { top: 83%; left: 81%; width: 5.5%; background: rgba(28, 27, 41, 0.19); }
.compression-field i:nth-child(12) { top: 89%; left: 59%; width: 7%; height: 1.8%; }

.art-stage.is-glitching .static-field {
  animation: static-hit var(--burst-duration, 300ms) steps(4, end) both;
}

.art-stage.is-glitching .glitch-slice {
  animation: slice-hit calc(var(--burst-duration, 300ms) * 0.86) steps(2, end) var(--slice-delay) both;
}

.art-stage.is-glitching .compression-field {
  animation: compression-field-hit var(--burst-duration, 300ms) steps(3, end) 20ms both;
}

.art-stage.is-glitching .compression-field i {
  animation: macroblock-hit calc(var(--burst-duration, 300ms) * 0.9) steps(2, end) both;
}

.art-stage.is-glitching .compression-field i:nth-child(3n + 1) { animation-delay: 16ms; }
.art-stage.is-glitching .compression-field i:nth-child(3n + 2) { animation-delay: 72ms; }
.art-stage.is-glitching .compression-field i:nth-child(3n) { animation-delay: 118ms; }

.art-caption {
  position: absolute;
  bottom: 102px;
  right: 12%;
  display: flex;
  width: min(340px, 40%);
  align-items: center;
  gap: 12px;
  margin: 9px 12% 0 auto;
  color: rgba(28, 27, 41, 0.48);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
}

.caption-track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}

.caption-track i {
  position: absolute;
  top: -2px;
  left: 52%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--glow);
}

.pipeline {
  position: absolute;
  bottom: 20px;
  left: clamp(28px, 5.4vw, 92px);
  z-index: 18;
  display: flex;
  width: auto;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  right: min(470px, 37vw);
  overflow: hidden;
  padding: 7px 12px;
  border: 1px solid rgba(28, 27, 41, 0.12);
  border-radius: 14px;
  background: rgba(245, 243, 238, 0.79);
  box-shadow: 0 14px 40px rgba(28, 27, 41, 0.07);
  backdrop-filter: blur(14px);
}

.pipeline::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--orange), var(--glow), var(--teal));
}

.pipeline-head,
.pipeline-stats {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  color: rgba(28, 27, 41, 0.58);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pipeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 92, 0, 0.5);
}

.pipeline-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

.pipeline-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: pipeline-scroll 38s linear infinite;
}

.pipeline:hover .pipeline-track,
.pipeline:focus-within .pipeline-track,
html.preview-effects-off .pipeline-track {
  animation-play-state: paused;
}

.pipeline-track li {
  padding: 5px 8px;
  border: 1px solid rgba(28, 27, 41, 0.1);
  border-radius: 999px;
  color: rgba(28, 27, 41, 0.68);
  background: rgba(255, 255, 255, 0.42);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.58rem;
  white-space: nowrap;
}

.pipeline-track b,
.pipeline-stats b {
  color: var(--teal);
}

.pipeline-stats {
  gap: 9px;
  letter-spacing: 0.03em;
  text-transform: none;
}

@keyframes pipeline-scroll {
  to { transform: translateX(-50%); }
}

.review-panel {
  position: absolute;
  right: clamp(20px, 2.4vw, 40px);
  bottom: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(28, 27, 41, 0.13);
  border-radius: 999px;
  background: rgba(245, 243, 238, 0.82);
  box-shadow: 0 14px 42px rgba(28, 27, 41, 0.08);
  backdrop-filter: blur(14px);
}

.concept-tag,
.review-control {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--line);
  color: rgba(28, 27, 41, 0.58);
  background: transparent;
  font: 640 0.58rem/1 "Jost", sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.concept-tag {
  display: inline-flex;
  align-items: center;
  color: var(--teal);
}

.review-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.review-control:last-child {
  border-right: 0;
}

.review-control:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
}

.control-dot {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.review-control[aria-pressed="true"] .dot-reveal,
.review-control[aria-pressed="true"] .dot-effects {
  border-color: var(--teal);
  background: var(--glow);
  box-shadow: 0 0 7px rgba(15, 219, 213, 0.58);
}

.review-control:not(:disabled):active .dot-test {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 7px rgba(255, 92, 0, 0.48);
}

.review-control:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.preview-note {
  position: absolute;
  right: clamp(20px, 2.4vw, 40px);
  bottom: 74px;
  left: auto;
  z-index: 10;
  margin: 0;
  color: rgba(28, 27, 41, 0.37);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes signal-wave {
  to { transform: scaleY(0.45); opacity: 0.45; }
}

@keyframes static-hit {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: 0.36; transform: translateX(var(--glitch-shift)); }
  40% { opacity: 0.12; transform: translateX(-4px); }
  68% { opacity: 0.28; transform: translateX(2px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes slice-hit {
  0%, 100% { opacity: 0; transform: translateX(0); }
  18% { opacity: 0.72; transform: translateX(calc(var(--slice-shift) * var(--glitch-strength, 1))); }
  38% { opacity: 0.5; transform: translateX(calc(var(--slice-shift) * var(--glitch-strength, 1) * -0.45)); }
  58% { opacity: 0.62; transform: translateX(calc(var(--slice-shift) * var(--glitch-strength, 1) * 0.7)); }
  78% { opacity: 0.3; transform: translateX(calc(var(--slice-shift) * -0.3)); }
}

@keyframes compression-field-hit {
  0%, 100% { opacity: 0; }
  15%, 76% { opacity: 0.78; }
}

@keyframes macroblock-hit {
  0%, 100% { opacity: 0; transform: translateX(0) scaleX(1); }
  22%, 64% { opacity: 0.62; transform: translateX(var(--glitch-shift)) scaleX(1.18); }
  78% { opacity: 0.24; transform: translateX(-3px) scaleX(0.92); }
}

/* Readable activity panel; labels are never masked or horizontally clipped. */
.hero { padding-bottom: 175px; }
.pipeline { display: block; left: clamp(28px,5.4vw,92px); right: clamp(28px,5.4vw,92px); bottom: 20px; padding: 13px 18px 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.66); background: linear-gradient(122deg,rgba(255,255,255,.49),rgba(245,250,249,.18) 52%,rgba(217,244,239,.27)); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), 0 8px 35px rgba(34,64,71,.09), 0 1px 4px rgba(34,64,71,.04); }
.pipeline::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 1px solid rgba(255,255,255,.7); pointer-events: none; background: linear-gradient(112deg,rgba(255,255,255,.16),transparent 24%,transparent 74%,rgba(255,255,255,.12)); }
.pipeline-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.pipeline-head { font-size: 10px; gap: 10px; letter-spacing: .1em; color: #42464f; }
.pipeline-head small { display: inline; margin: 0 0 0 5px; font-size: 9px; color: #62636d; text-transform: none; letter-spacing: .01em; }
.pipeline-connected { display: flex; gap: 7px; align-items: center; color: #525c63; font: 500 10px/1.2 "Jost",sans-serif; white-space: nowrap; }
.pipeline-connected i { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 7px var(--glow); }
.data-packets { display: flex; align-items: center; gap: 4px; height: 13px; margin-left: auto; }
.data-packets i { width: 2px; height: 4px; background: var(--teal); animation: packet-flow 1.8s ease-in-out infinite; }
.data-packets i:nth-child(3n) { height: 11px; animation-delay: -.4s; }
.data-packets i:nth-child(4n) { height: 7px; animation-delay: -.8s; }
.data-packets i:nth-child(5n) { height: 13px; animation-delay: -1.2s; }
.pipeline-lanes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.pipeline-lane { min-width: 0; }
.pipeline-lane + .pipeline-lane { padding-left: 22px; border-left: 1px solid var(--line); }
.pipeline-job { padding: 0 0 3px; font-size: 11px; gap: 8px; flex-wrap: wrap; }
.job-engine { flex-shrink: 1; }
.job-status { font-size: 8px; }
.job-action { display: block; color: #60636c; font: 400 11px/1.4 "Jost",sans-serif; white-space: normal; overflow: visible; text-overflow: clip; min-height: 1.4em; }
.job-progress { margin-top: 8px; }
.pipeline-events { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(28,27,41,.08); color: #52666b; font: 400 9px/1.2 ui-monospace,monospace; min-height: 19px; }
.event-cursor { color: var(--teal); }
.event-caret { animation: event-cursor 1.2s steps(1,end) infinite; }
.event-next { margin-left: auto; color: #666773; }
.review-panel { bottom: 166px; background: rgba(245,249,246,.38); border-color: rgba(255,255,255,.67); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 8px 25px rgba(34,64,71,.08); }
.preview-note { bottom: 216px; }
html.preview-effects-off .data-packets i, html.preview-effects-off .event-caret { animation-play-state: paused; }
@keyframes packet-flow { 50% { opacity: .25; transform: scaleY(.45); } }
@keyframes event-cursor { 50% { opacity: 0; } }

@media (max-width: 980px) {
  :root { --reveal-size: 104px; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    height: auto;
    padding: 94px 24px 42px;
    overflow-x: hidden;
    overflow-y: visible;
    background: var(--bone);
  }

  .site-nav {
    padding: 24px;
  }

  .nav-links > a:first-child {
    display: none;
  }

  .hero-copy {
    order: 1;
    width: 100%;
    max-width: 620px;
    padding-top: 18px;
  }

  h1 {
    max-width: 9.8em;
    font-size: clamp(2.8rem, 8vw, 3.5rem);
    line-height: 0.86;
  }

  .hero-intro {
    max-width: 580px;
  }

  .visual-column {
    order: 2;
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: calc(100% + 48px);
    margin: 24px -24px 0;
    transform: none;
  }

  .art-frame {
    clip-path: none;
  }

  .edge-vignette {
    background:
      linear-gradient(90deg, var(--bone), transparent 17%, transparent 84%, rgba(245, 243, 238, 0.15)),
      linear-gradient(0deg, rgba(245, 243, 238, 0.25), transparent 20%);
  }

  .art-caption {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(58%, 300px);
    margin-right: 24px;
  }

  .signal-line {
    margin-top: 12px;
  }

  .pipeline {
    order: 3;
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
  }

  .review-panel {
    order: 4;
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 20;
    width: max-content;
    max-width: 100%;
    margin: 24px 0 0 auto;
  }

  .preview-note {
    order: 5;
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    margin-top: 14px;
    text-align: right;
  }

  .grid-plane {
    width: 100vw;
  }

  .hero-environment img {
    opacity: .52;
    object-position: 68% 50%;
    mask-image: linear-gradient(180deg, transparent 28%, #000 65%);
    -webkit-mask-image: linear-gradient(180deg, transparent 28%, #000 65%);
  }

  .nebula-flow { display: none; }
}

@media (min-width: 981px) and (max-height: 650px) {
  .hero { height: auto; min-height: 650px; }
}

@media (max-width: 520px) {
  .pipeline-lanes { grid-template-columns: 1fr; gap: 12px; }
  .pipeline-lane + .pipeline-lane { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pipeline-head { flex-wrap: wrap; gap: 5px; }
  .pipeline-head small { flex-basis: 100%; margin-left: 11px; }
  .pipeline-connected { display: none; }
  .event-next { display: none; }
  .pipeline-events { font-size: 8px; min-height: 27px; }
  .hero {
    padding-top: 90px;
  }

  .brand {
    width: 122px;
  }

  .nav-links .nav-cta {
    font-size: 0.62rem;
  }

  .eyebrow {
    align-items: flex-start;
    max-width: 310px;
    font-size: 0.6rem;
  }

  .engine-flip {
    min-width: 7.2em;
  }

  h1 {
    font-size: clamp(1.9rem, 9.4vw, 2.7rem);
  }

  .eyebrow-mark {
    margin-top: 0.48em;
  }

  .hero-intro {
    margin-top: 18px;
    font-size: 0.9rem;
    line-height: 1.48;
  }

  .hero-actions {
    align-items: stretch;
  }

  .button-primary {
    width: 100%;
  }

  .visual-column {
    margin-top: 24px;
  }

  .signal-line {
    flex-wrap: wrap;
  }

  .review-panel {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 14px;
  }

  .concept-tag,
  .review-control {
    flex: 1;
    min-width: 50%;
    justify-content: center;
    padding: 0 8px;
    white-space: nowrap;
  }

  .concept-tag,
  .review-control:nth-of-type(1) {
    border-bottom: 1px solid var(--line);
  }

  .pipeline-stats {
    display: none;
  }

  .control-label {
    font-size: 0.53rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.rocket-scene{display:none}.flight-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}