:root {
  color-scheme: dark;
  --dark: #04060B;
  --dark2: #0A0E18;
  --dark3: #0F172A;
  --panel: rgba(10, 14, 24, 0.55);
  --panel-solid: #0A0E18;
  --green: #4ADE80;
  --green-hot: #6BF09A;
  --green2: #10B981;
  --blue: #38BDF8;
  --purple: #8B5CF6;
  --amber: #F59E0B;
  --danger: #F87171;
  --border: #1A2438;
  --border-hot: #243353;
  --text: #E2E8F0;
  --text-soft: #94A3B8;
  --text-muted: #64748B;
  --white: #F8FAFC;
  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shell: min(1200px, calc(100% - 32px));
  --shell-wide: min(1380px, calc(100% - 32px));
  --radius: 4px;
  --radius-lg: 8px;
  --field-x: 0px;
  --field-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scroll-progress: 0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--dark);
  touch-action: pan-y;
}

body {
  min-width: 320px;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  touch-action: pan-y;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Color-glow layer sits BEHIND the starfield canvas so the moving stars show through. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 14% 12%, rgba(56, 189, 248, 0.14), transparent 70%),
    radial-gradient(900px 600px at 92% 20%, rgba(74, 222, 128, 0.1), transparent 70%),
    radial-gradient(1200px 800px at 50% 110%, rgba(139, 92, 246, 0.16), transparent 70%),
    var(--dark);
}

body.menu-open { overflow: hidden; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  transform: translateY(-140%);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  padding: 10px 14px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* ==== Backdrop / starfield ==== */
#space-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background: var(--dark);
}

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.065) 1px, transparent 1px),
    linear-gradient(rgba(226, 232, 240, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(4, 6, 11, 0.05), rgba(4, 6, 11, 0.86) 78%, var(--dark));
  background-size: 80px 80px, 80px 80px, 320px 320px, 320px 320px, auto;
  background-position: var(--field-x) var(--field-y), var(--field-x) var(--field-y), 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
  transition: background-position 220ms ease-out;
}

.site-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 11, 0.9), transparent 14%, transparent 86%, rgba(4, 6, 11, 0.9)),
    linear-gradient(180deg, transparent 0, rgba(4, 6, 11, 0.26) 58%, var(--dark) 100%);
}

.scan-sweep { display: none; }
.cursor-reticle { display: none; }

/* ==== Custom cursor reticle ==== */
.cursor-reticle {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--cursor-x), var(--cursor-y));
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 220ms ease, width 180ms ease, height 180ms ease;
}
body.cursor-on .cursor-reticle { opacity: 1; }
body.cursor-target .cursor-reticle { width: 64px; height: 64px; }

.cursor-reticle .reticle-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(74, 222, 128, 0.85);
  border-radius: 50%;
}
.cursor-reticle .reticle-ring::before,
.cursor-reticle .reticle-ring::after {
  content: "";
  position: absolute;
  background: rgba(74, 222, 128, 0.85);
}
.cursor-reticle .reticle-ring::before {
  left: 50%; top: -6px; width: 1px; height: 6px; transform: translateX(-50%);
}
.cursor-reticle .reticle-ring::after {
  left: 50%; bottom: -6px; width: 1px; height: 6px; transform: translateX(-50%);
}
.cursor-reticle .reticle-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  background: var(--green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.9);
}
@media (pointer: coarse) { .cursor-reticle { display: none; } }

/* ==== Mission ticker bar ==== */
.mission-bar { display: none; }
.mission-bar + * { /* nothing — placeholder */ }
.legacy-mission-bar-style {
  position: sticky;
  top: 0;
  z-index: 95;
  border-bottom: 1px solid rgba(74, 222, 128, 0.18);
  background: linear-gradient(180deg, rgba(4, 6, 11, 0.96), rgba(4, 6, 11, 0.82));
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.mission-bar-shell {
  width: var(--shell-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 26px;
  padding: 4px 0;
}

.mb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green); font-weight: 700;
}
.mb-tag i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
  animation: pulseLed 1.6s ease-in-out infinite;
}

.mb-tape {
  overflow: hidden;
  position: relative;
  display: flex;
  gap: 36px;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  animation: tapeRoll 38s linear infinite;
}
.mb-tape span { display: inline-flex; align-items: center; gap: 8px; }
.mb-tape span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.6);
}

.mb-clock {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--white); font-weight: 600;
}
.mb-clock i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  animation: pulseLed 1.2s ease-in-out infinite;
}

@keyframes tapeRoll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulseLed {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* ==== Header ==== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid rgba(30, 42, 61, 0.9);
  background:
    linear-gradient(90deg, rgba(74, 222, 128, 0.06), transparent 28%, rgba(56, 189, 248, 0.04) 72%, rgba(74, 222, 128, 0.06)),
    rgba(4, 6, 11, 0.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.32);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-header::before {
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.78), rgba(56, 189, 248, 0.45), transparent);
}

.site-header::after {
  top: 0; bottom: 0; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.12), transparent);
  transform: translateX(-130%);
  animation: headerSweep 6.5s linear infinite;
}

.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: rgba(30, 42, 61, 0.4);
  overflow: hidden;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform-origin: 0 50%;
  transform: scaleX(calc(var(--scroll-progress) / 100));
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.6);
  transition: transform 90ms linear;
}

.nav-shell {
  position: relative;
  z-index: 1;
  width: var(--shell-wide);
  min-height: 70px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.brand img {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.4));
}
.brand-mark { display: grid; gap: 0; }
.brand-name {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 14px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.site-nav a:hover,
.site-nav a.active {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.06);
  color: var(--white);
}

.site-nav a.nav-cta,
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta.active {
  border-color: rgba(74, 222, 128, 0.55);
  background: var(--green);
  color: #031008;
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.32);
}

/* ==== Buttons ==== */
.button {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: var(--radius);
  background: var(--green);
  color: #031008;
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.2);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 220ms ease,
              background 220ms ease;
  will-change: transform;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 600ms ease;
}
.button:hover::before { transform: translateX(110%); }

.button:hover {
  background: var(--green-hot);
  box-shadow: 0 0 38px rgba(74, 222, 128, 0.34);
}

.button .btn-pre {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  opacity: 0.78;
  white-space: nowrap;
}
.button .btn-label { white-space: nowrap; }
.button .btn-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.button:hover .btn-arrow { transform: translateX(4px); }

.button.big { min-height: 60px; padding: 0 26px; font-size: 0.92rem; }

.button.secondary {
  background: rgba(10, 14, 24, 0.62);
  color: var(--white);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: none;
}
.button.secondary:hover {
  border-color: rgba(74, 222, 128, 0.55);
  background: rgba(74, 222, 128, 0.08);
}

.button.ghost {
  background: transparent;
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.38);
  box-shadow: none;
}
.button.ghost:hover {
  background: rgba(74, 222, 128, 0.06);
  color: var(--green-hot);
}

.magnetic { transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(10, 14, 24, 0.88);
  color: var(--white);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute; left: 0;
}
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top:  7px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(7px)  rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ==== Layout primitives ==== */
.section,
.hero {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
}

.section { padding: 72px 0 48px; }
.section.module { padding: 100px 0 60px; }
.section.compact { padding: 64px 0; }

@media (max-width: 900px) {
  .section { padding: 56px 0 36px; }
  .section.compact { padding: 44px 0; }
}

@media (max-width: 720px) {
  .section { padding: 48px 0 28px; }
}

/* ==== HERO ==== */
.hero {
  min-height: calc(100svh - 96px);
  padding: 60px 0 88px;
  isolation: isolate;
}

.hero-frame {
  position: absolute;
  inset: 22px 0 130px;
  pointer-events: none;
  border: 1px solid rgba(74, 222, 128, 0.12);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.02), transparent 30%, transparent 70%, rgba(56, 189, 248, 0.025));
}

.frame-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--green);
  pointer-events: none;
}
.frame-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.frame-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.frame-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, 0.86fr);
  gap: 56px;
  align-items: center;
  padding: 60px 32px 40px;
}

.hero-copy {
  display: grid;
  gap: 22px;
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.9);
  animation: pulseLed 1.4s ease-in-out infinite;
}

.mission-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mission-readout span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: var(--radius);
  background: rgba(4, 6, 11, 0.64);
  color: var(--text-soft);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mission-readout span:first-child {
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.5);
}

.display-h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6.2vw, 5.6rem);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
  text-shadow: 0 0 32px rgba(74, 222, 128, 0.16), 0 22px 60px rgba(0, 0, 0, 0.5);
}
.display-h1 .cursor {
  display: inline-block;
  width: 0.5ch;
  background: var(--green);
  margin-left: 2px;
  animation: blinkCursor 0.9s steps(2) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

.lead {
  margin: 0;
  max-width: 680px;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.72;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.trust-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.status-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.85);
  animation: pulseLed 1.6s ease-in-out infinite;
}

.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.proof-strip span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.5);
  color: var(--text-soft);
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.proof-strip span:hover {
  border-color: rgba(74, 222, 128, 0.46);
  color: var(--white);
  background: rgba(74, 222, 128, 0.08);
}

/* ==== Hero panel (right) ==== */
.hero-panel {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-lg);
  transform: perspective(1200px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform 200ms ease-out;
}

.panel-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(56, 189, 248, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(10, 14, 24, 0.5)),
    rgba(10, 14, 24, 0.55);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.44), 0 0 60px rgba(74, 222, 128, 0.12);
}

.panel-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.4;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 92%);
}

.panel-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-id { display: inline-flex; align-items: center; gap: 10px; color: var(--text-soft); }
.panel-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.9);
  animation: pulseLed 1.4s ease-in-out infinite;
}
.panel-meta {
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0.18em;
}

.telemetry-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  background: var(--border);
}

.telemetry-row {
  display: grid;
  grid-template-columns: 1fr auto 90px;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  background: rgba(10, 14, 24, 0.7);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
}
.telemetry-row .t-label {
  color: var(--text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.telemetry-row .t-value {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.telemetry-row .t-bar {
  position: relative;
  height: 4px;
  background: rgba(30, 42, 61, 0.86);
  border-radius: 2px;
  overflow: hidden;
}
.telemetry-row .t-bar i {
  display: block;
  height: 100%;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, var(--green), var(--blue));
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
  animation: barFlick 4s ease-in-out infinite;
}
@keyframes barFlick {
  0%, 96%, 100% { filter: brightness(1); }
  98%           { filter: brightness(1.6); }
}

.orbit-map {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 260px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring-a { width: 240px; height: 240px; animation: ringSpin 22s linear infinite; }
.ring-b { width: 340px; height: 170px; transform: translate(-50%, -50%) rotate(-18deg); animation: ringSpin 30s linear infinite reverse; border-color: rgba(74, 222, 128, 0.22); }
.ring-c { width: 180px; height: 340px; transform: translate(-50%, -50%) rotate(22deg); animation: ringSpin 40s linear infinite; border-color: rgba(56, 189, 248, 0.18); }
@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.ring-b { animation-name: ringSpinB; }
.ring-c { animation-name: ringSpinC; }
@keyframes ringSpinB { from { transform: translate(-50%, -50%) rotate(-18deg); } to { transform: translate(-50%, -50%) rotate(-378deg); } }
@keyframes ringSpinC { from { transform: translate(-50%, -50%) rotate(22deg); }  to { transform: translate(-50%, -50%) rotate(382deg); } }

.command-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px; height: 124px;
  display: grid; place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.18), transparent 60%),
    rgba(4, 6, 11, 0.86);
  box-shadow: inset 0 0 36px rgba(74, 222, 128, 0.18), 0 0 38px rgba(74, 222, 128, 0.22);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  transform: translate(-50%, -50%);
}
.command-core span {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.orbit-sat {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 18px rgba(74, 222, 128, 0.6);
}
.sat-1 { transform: translate(-50%, -50%); animation: satOrbit 8s linear infinite; --orbitR: 120px; }
.sat-2 { transform: translate(-50%, -50%); animation: satOrbit 14s linear infinite reverse; --orbitR: 90px; background: var(--green); box-shadow: 0 0 14px rgba(74, 222, 128, 0.9); }
.sat-3 { transform: translate(-50%, -50%); animation: satOrbit 20s linear infinite; --orbitR: 158px; background: var(--blue); box-shadow: 0 0 14px rgba(56, 189, 248, 0.9); }
@keyframes satOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbitR)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbitR)) rotate(-360deg); }
}

.node {
  position: absolute;
  z-index: 2;
  min-width: 134px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius);
  background: rgba(4, 6, 11, 0.86);
  padding: 9px 11px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  transition: border-color 200ms ease, background 200ms ease, transform 220ms ease;
}
.node:hover { border-color: rgba(74, 222, 128, 0.45); background: rgba(4, 6, 11, 0.94); transform: translateY(-2px); }
.node strong {
  display: block;
  color: var(--white);
  font-size: 0.78rem;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.node small {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.node::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
  animation: pulseLed 1.6s ease-in-out infinite;
}

.node-a { left: 14px;  top: 18px; }
.node-b { right: 14px; top: 26px; }
.node-c { left: 18px;  bottom: 18px; }
.node-d { right: 18px; bottom: 18px; }

.panel-foot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.pf-cell {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}
.pf-cell:last-child { border-right: 0; }
.pf-cell span {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pf-cell strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.hero-ground {
  position: relative;
  z-index: 2;
  margin-top: 38px;
  padding: 24px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px dashed rgba(74, 222, 128, 0.12);
}

.ground-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ground-ticker i {
  width: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--green));
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cue-line {
  position: relative;
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.6), transparent);
  overflow: hidden;
}
.cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: -50%;
  width: 1px; height: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0%   { top: -50%; }
  100% { top: 100%; }
}

/* ==== Section heads ==== */
.section-head {
  display: grid;
  gap: 14px;
  margin-bottom: 38px;
  max-width: 920px;
}

.section-head h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.3vw, 2.65rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.section-head p {
  margin: 0;
  max-width: 780px;
  color: var(--text-soft);
  font-size: 1rem;
}

.section-rule {
  width: min(280px, 100%);
  height: 1px;
  background: linear-gradient(90deg, var(--green), rgba(74, 222, 128, 0));
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}

.section-kicker {
  margin: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kicker-bracket { display: none; }

/* ==== HUD GRID (the Gap) ==== */
.hud-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}
.hud-stack { display: grid; gap: 18px; }

.hud-card {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: end;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 40%),
    rgba(10, 14, 24, 0.55);
  padding: 28px;
  min-height: 240px;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.hud-card.large { min-height: 510px; }

.hud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.3;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
}

.hud-card::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 22px; height: 22px;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-bottom: 0; border-left: 0;
  pointer-events: none;
}

.hud-card:hover {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(74, 222, 128, 0.12);
}

.hud-card .scan-line {
  position: absolute;
  left: 0; right: 0; top: -30%;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(74, 222, 128, 0.12), transparent);
  transform: translateY(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.hud-card:hover .scan-line {
  opacity: 1;
  animation: scanCard 1.6s ease-in-out infinite;
}
@keyframes scanCard {
  0%   { transform: translateY(0); }
  100% { transform: translateY(620px); }
}

.hud-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hud-id { color: var(--text-muted); }
.hud-sev {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 700;
}
.hud-sev.sev-high { color: var(--danger); }
.hud-sev.sev-mid  { color: var(--amber); }

.hud-card .card-num {
  position: relative;
  z-index: 1;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.hud-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.18;
}
.hud-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.hud-card-foot {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  margin-top: auto;
}
.metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  text-transform: uppercase;
}
.metric i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

/* ==== Lanes ==== */
.lane-deck {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 18px;
}
.lane-stack { display: grid; gap: 18px; }

.lane-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 30%),
    rgba(10, 14, 24, 0.55);
  padding: 26px;
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.lane-card.feature {
  min-height: 480px;
  align-content: end;
  background:
    radial-gradient(700px 400px at 0% 100%, rgba(74, 222, 128, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 26%),
    rgba(10, 14, 24, 0.62);
  border-color: rgba(74, 222, 128, 0.36);
}

.lane-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}

.lane-card:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.46), 0 0 38px rgba(74, 222, 128, 0.14);
}

.lane-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lane-led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.9);
  animation: pulseLed 1.6s ease-in-out infinite;
}

.lane-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.18;
  max-width: 540px;
}
.lane-card.feature h3 {
  font-size: 1.6rem;
}
.lane-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 540px;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.lane-specs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 6px;
  border: 1px solid var(--border);
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lane-specs.compact {
  grid-template-columns: repeat(2, 1fr);
}
.lane-specs span {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: rgba(4, 6, 11, 0.78);
}
.lane-specs strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.lane-specs small {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ==== Fleet ==== */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fleet-card {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  padding: 24px;
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.fleet-card:hover {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(74, 222, 128, 0.12);
}
.fleet-card.elara:hover {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(139, 92, 246, 0.18);
}
.fleet-card.jupiter:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(56, 189, 248, 0.16);
}

.fleet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.45;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
}

.fleet-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fleet-id { color: var(--text-muted); }
.fleet-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 700;
}
.fleet-status.purple { color: var(--purple); }
.fleet-status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: pulseLed 1.4s ease-in-out infinite;
}

.fleet-vis {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(74, 222, 128, 0.12), transparent 60%),
    rgba(4, 6, 11, 0.74);
  overflow: hidden;
}
.fleet-vis .vis-core {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: 50%;
  background: rgba(4, 6, 11, 0.86);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 18px rgba(74, 222, 128, 0.2), 0 0 22px rgba(74, 222, 128, 0.22);
}
.fleet-card.jupiter .vis-core { border-color: rgba(56, 189, 248, 0.55); box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.2), 0 0 22px rgba(56, 189, 248, 0.22); }
.fleet-card.elara .vis-core { border-color: rgba(139, 92, 246, 0.55); box-shadow: inset 0 0 18px rgba(139, 92, 246, 0.2), 0 0 22px rgba(139, 92, 246, 0.22); }

.tradeos-vis .vis-ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tradeos-vis .r1 { width: 90px; height: 90px; animation: ringSpinA 14s linear infinite; }
.tradeos-vis .r2 { width: 130px; height: 130px; animation: ringSpinA 22s linear infinite reverse; border-style: dashed; }
.tradeos-vis .r3 { width: 170px; height: 170px; animation: ringSpinA 30s linear infinite; opacity: 0.6; }
@keyframes ringSpinA {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.jupiter-vis .vis-orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringSpinA 18s linear infinite;
}
.jupiter-vis .vis-moon {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.9);
  transform: translate(-50%, -50%);
  animation: moonOrbit 12s linear infinite;
  --orbitR: 75px;
}
@keyframes moonOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbitR)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbitR)) rotate(-360deg); }
}

.elara-vis .vis-wave {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: pulseWave 3s ease-out infinite;
}
.elara-vis .w1 { animation-delay: 0s; }
.elara-vis .w2 { animation-delay: 1s; }
.elara-vis .w3 { animation-delay: 2s; }
@keyframes pulseWave {
  0%   { width: 60px; height: 60px; opacity: 0; }
  20%  { opacity: 0.5; }
  100% { width: 180px; height: 180px; opacity: 0; }
}

.fleet-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.fleet-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.fleet-specs {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fleet-specs li {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(4, 6, 11, 0.7);
}
.fleet-specs span {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fleet-specs strong {
  color: var(--white);
  font-weight: 600;
  font-size: 0.85rem;
}

.fleet-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 0;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid rgba(74, 222, 128, 0.2);
  transition: color 200ms ease, padding 200ms ease;
}
.fleet-card.jupiter .fleet-cta { color: var(--blue); border-top-color: rgba(56, 189, 248, 0.24); }
.fleet-card.elara .fleet-cta   { color: var(--purple); border-top-color: rgba(139, 92, 246, 0.32); }
.fleet-cta span { transition: transform 220ms ease; display: inline-block; }
.fleet-cta:hover span { transform: translateX(4px); }

/* ==== Mission profiles (pricing) ==== */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.profile-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  padding: 22px;
  overflow: hidden;
  transition: border-color 220ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  cursor: pointer;
}

.profile-card.highlight {
  border-color: rgba(74, 222, 128, 0.5);
  background:
    radial-gradient(500px 320px at 0% 0%, rgba(74, 222, 128, 0.16), transparent 70%),
    rgba(10, 14, 24, 0.55);
}

.profile-card::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-bottom: 0; border-left: 0;
  pointer-events: none;
}

.profile-card:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(74, 222, 128, 0.14);
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-3px);
}

.profile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.profile-flag {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
  color: var(--green);
  font-weight: 700;
}
.profile-flag.rise {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.08);
  color: var(--blue);
}

.profile-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}

.profile-price {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
}
.profile-price span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.profile-price small {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
}

.profile-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.profile-arrow {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.profile-card:hover .profile-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ==== Mission log ==== */
.log-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.log-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.log-card:hover {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 32px rgba(74, 222, 128, 0.1);
}

.log-id {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(4, 6, 11, 0.88);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 2px;
}

.log-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  filter: saturate(0.86) contrast(1.08);
}

.log-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.log-body h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}
.log-body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.tag-row span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: var(--text-muted);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==== Sequence (How it works) ==== */
.sequence-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
}

.sequence-rail::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.4), rgba(56, 189, 248, 0.4), rgba(139, 92, 246, 0.4), transparent);
  z-index: 0;
}

.seq-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.62);
  padding: 24px 22px;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}
.seq-stage:hover {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), 0 0 32px rgba(74, 222, 128, 0.12);
}

.seq-num {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(74, 222, 128, 0.45);
  background: rgba(4, 6, 11, 0.8);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 2px;
}
.seq-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.seq-stage h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.seq-stage p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
}

/* ==== Launch panel (final CTA) ==== */
.launch-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  align-items: center;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 380px at 0% 100%, rgba(74, 222, 128, 0.16), transparent 70%),
    radial-gradient(500px 360px at 100% 0%, rgba(56, 189, 248, 0.12), transparent 70%),
    rgba(10, 14, 24, 0.7);
  padding: 36px 38px;
  overflow: hidden;
}

.lp-frame {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px dashed rgba(74, 222, 128, 0.18);
  border-radius: var(--radius-lg);
}

.launch-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.45;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.7), transparent 80%);
}

.lp-copy { position: relative; z-index: 1; display: grid; gap: 12px; }
.lp-copy h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: 0;
}
.lp-copy p { margin: 0; color: var(--text-soft); }

.lp-cta {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  justify-items: end;
  align-items: center;
}
.lp-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lp-foot i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.85);
  animation: pulseLed 1.4s ease-in-out infinite;
}

/* ==== Reveal animation ==== */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==== Footer ==== */
.site-footer {
  position: relative;
  margin-top: 60px;
  border-top: 1px solid rgba(74, 222, 128, 0.24);
  background:
    linear-gradient(180deg, rgba(10, 14, 24, 0.9), rgba(4, 6, 11, 0.98)),
    var(--dark);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.72), rgba(56, 189, 248, 0.38), transparent);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(74, 222, 128, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(74, 222, 128, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 78%);
}

.footer-shell {
  position: relative;
  z-index: 1;
  width: var(--shell-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(30px, 5vw, 64px);
  padding: 46px 0 28px;
}
.footer-brand { display: grid; align-content: start; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
}
.footer-logo img {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.32));
}
.footer-logo span { display: grid; gap: 4px; }
.footer-logo strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.footer-logo small {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
}
.footer-brand p {
  max-width: 500px;
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.footer-social a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.5);
  padding: 0 12px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease, transform 200ms ease;
}
.footer-social a:hover {
  border-color: rgba(74, 222, 128, 0.58);
  background: rgba(74, 222, 128, 0.09);
  color: var(--green);
  transform: translateY(-1px);
}
.footer-social svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.footer-nav div {
  border-left: 1px solid rgba(30, 42, 61, 0.86);
  padding-left: 18px;
}
.footer-nav h2 {
  margin: 0 0 12px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}
.footer-nav a {
  display: block;
  padding: 5px 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.35;
  transition: color 200ms ease, transform 200ms ease;
}
.footer-nav a:hover {
  color: var(--white);
  transform: translateX(2px);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  width: var(--shell-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(30, 42, 61, 0.88);
  padding: 16px 0 22px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==== keyframes ==== */
@keyframes headerSweep { to { transform: translateX(420%); } }

/* ==== Responsive ==== */
@media (max-width: 1100px) {
  .hero-grid,
  .lane-deck,
  .hud-grid {
    grid-template-columns: 1fr;
  }
  .hud-card.large { min-height: 320px; }
  .fleet-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .log-grid { grid-template-columns: 1fr; }
  .sequence-rail { grid-template-columns: 1fr; }
  .sequence-rail::before { display: none; }
  .launch-panel { grid-template-columns: 1fr; }
  .lp-cta { justify-items: start; }
  .panel-shell { min-height: 560px; }
}

@media (max-width: 1040px) {
  .nav-shell { min-height: 64px; }
  .site-nav {
    position: fixed;
    inset: 100px 0 auto 0;
    display: grid;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: rgba(4, 6, 11, 0.97);
    padding: 16px;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a,
  .site-nav .nav-cta {
    width: 100%;
    justify-content: center;
  }
  .menu-toggle { display: inline-flex; }
  .display-h1 { font-size: clamp(2.6rem, 8vw, 3.6rem); }
  .section-head h2 { font-size: 1.8rem; }
  .mission-bar-shell { grid-template-columns: auto 1fr auto; gap: 14px; }
  .mb-clock { font-size: 0.62rem; }
  .footer-shell { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 22px, 1200px); --shell-wide: min(100% - 22px, 1380px); }
  .section.module { padding: 70px 0 30px; }
  .hero { padding: 40px 0 64px; }
  .hero-grid { padding: 36px 16px 20px; gap: 36px; }
  .panel-shell { min-height: 540px; }
  .display-h1 { font-size: 2.2rem; line-height: 1.02; }
  .lead { font-size: 0.98rem; }
  .profile-grid { grid-template-columns: 1fr; }
  .hero-ground { padding: 0 16px; flex-wrap: wrap; gap: 18px; }
  .footer-nav { grid-template-columns: 1fr; }
  .footer-nav div { border-left: 0; border-top: 1px solid rgba(30, 42, 61, 0.86); padding: 16px 0 0; }
  .footer-bottom { display: grid; }
  .mission-bar-shell { grid-template-columns: auto auto; justify-content: space-between; }
  .mission-bar-shell .mb-tape { display: none; }
  .mb-tag, .mb-clock { font-size: 0.6rem; letter-spacing: 0.06em; }
  .launch-panel { padding: 24px; }
  .lp-cta { justify-items: start; }
  .lane-card.feature { min-height: 380px; }
  .cursor-reticle { display: none; }
}

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

/* ==== Page-hero (shared) ==== */
.page-hero {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
  padding: 86px 32px 64px;
  isolation: isolate;
  display: grid;
  gap: 18px;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 22px 0 22px;
  pointer-events: none;
  border: 1px solid rgba(74, 222, 128, 0.12);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.02), transparent 30%, transparent 70%, rgba(56, 189, 248, 0.025));
  z-index: -1;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 22px 0 22px;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 80%);
  z-index: -1;
}
.page-hero > .frame-corner.tl { top: 22px; left: 0; }
.page-hero > .frame-corner.tr { top: 22px; right: 0; }
.page-hero > .frame-corner.bl { bottom: 22px; left: 0; }
.page-hero > .frame-corner.br { bottom: 22px; right: 0; }

.page-hero h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.14), 0 18px 50px rgba(0, 0, 0, 0.42);
}
.page-hero .lead { margin: 0; max-width: 760px; color: var(--text); font-size: 1.05rem; line-height: 1.72; }
.page-hero .cta-row { margin-top: 6px; }

/* Product hero (tradeos/elara/jupiter) — split layout with visualization */
.product-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  align-items: center;
  gap: 40px;
  min-height: 520px;
}
.product-hero .product-vis {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(74, 222, 128, 0.26);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(74, 222, 128, 0.1), transparent 70%),
    rgba(10, 14, 24, 0.55);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.product-hero .pv-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.product-hero .pv-top strong { color: var(--green); font-weight: 700; }
.product-hero .pv-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  background: rgba(4, 6, 11, 0.72);
}
.product-hero .pv-foot div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
}
.product-hero .pv-foot div:last-child { border-right: 0; }
.product-hero .pv-foot span {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.product-hero .pv-foot strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.product-hero.elara .product-vis { border-color: rgba(139, 92, 246, 0.4); background: radial-gradient(closest-side at 50% 50%, rgba(139, 92, 246, 0.14), transparent 70%), rgba(10, 14, 24, 0.55); }
.product-hero.elara .pv-top strong { color: var(--purple); }
.product-hero.elara .pv-foot span { color: var(--purple); }
.product-hero.jupiter .product-vis { border-color: rgba(56, 189, 248, 0.4); background: radial-gradient(closest-side at 50% 50%, rgba(56, 189, 248, 0.14), transparent 70%), rgba(10, 14, 24, 0.55); }
.product-hero.jupiter .pv-top strong { color: var(--blue); }
.product-hero.jupiter .pv-foot span { color: var(--blue); }

@media (max-width: 1100px) {
  .product-hero { grid-template-columns: 1fr; }
  .product-hero .product-vis { min-height: 320px; }
  .page-hero { padding: 70px 16px 50px; }
}
.split { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: 34px; align-items: start; }
.copy-stack { display: grid; gap: 16px; }
.copy-stack p { margin: 0; color: var(--text-soft); }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feature-panel, .route-card, .term-panel, .capability {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  display: grid; gap: 12px; align-content: start; padding: 20px;
}
.feature-panel h3, .route-card h3, .term-panel h3, .capability h3 {
  margin: 0; color: var(--white); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.02em;
}
.feature-panel p, .route-card p, .term-panel p, .capability p {
  margin: 0; color: var(--text-soft); font-size: 0.94rem;
}
.capability-grid,
.price-grid,
.proof-grid,
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.section-header { display: grid; gap: 12px; margin-bottom: 34px; }
.section-header h2 {
  margin: 0;
  max-width: 860px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}
.section-header p {
  margin: 0;
  max-width: 780px;
  color: var(--text-soft);
  font-size: 1rem;
}

.price-card,
.proof-card,
.step-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  padding: 22px;
  transition: border-color 220ms ease, transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
}
.price-card:hover,
.proof-card:hover,
.step-card:hover {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), 0 0 32px rgba(74, 222, 128, 0.12);
  transform: translateY(-2px);
}
.price-card.highlight {
  border-color: rgba(74, 222, 128, 0.45);
  background:
    radial-gradient(500px 320px at 0% 0%, rgba(74, 222, 128, 0.14), transparent 70%),
    rgba(10, 14, 24, 0.55);
}
.price-card::after,
.step-card::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 14px; height: 14px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-bottom: 0; border-left: 0;
  pointer-events: none;
}
.price-card h3, .proof-card h3, .step-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.02em;
}
.price-card p, .proof-card p, .step-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.price-card .price,
.step-card .card-num {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.price-card .price small {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
}
.step-card .card-num { font-size: 1.85rem; }
.step-card { min-height: 210px; }

.proof-card {
  padding: 0;
  overflow: hidden;
  min-height: 260px;
}
.proof-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  filter: saturate(0.86) contrast(1.06);
}
.proof-card-body { display: grid; gap: 10px; padding: 18px; }

a.proof-card { color: inherit; }

.labs-grid { grid-auto-flow: dense; }
.labs-grid .proof-card img { height: 190px; }
.labs-grid .lab-feature { grid-column: span 2; }
.labs-grid .lab-feature img { height: 250px; }

.lane-system {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 18px;
}
.lane-list { display: grid; gap: 18px; }
.lane-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 30%),
    rgba(10, 14, 24, 0.55);
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
  overflow: hidden;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.lane-card.feature {
  min-height: 420px;
  align-content: end;
  border-color: rgba(74, 222, 128, 0.36);
  background:
    radial-gradient(700px 380px at 0% 100%, rgba(74, 222, 128, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 26%),
    rgba(10, 14, 24, 0.62);
}
.lane-card:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.46), 0 0 36px rgba(74, 222, 128, 0.12);
}
.lane-card .lane-meta {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lane-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.18;
}
.lane-card.feature h3 { font-size: 1.55rem; }
.lane-card p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }

.gap-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}
.gap-card {
  position: relative;
  min-height: 240px;
  display: grid;
  gap: 14px;
  align-content: end;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 40%),
    rgba(10, 14, 24, 0.55);
  padding: 24px;
}
.gap-card.large { min-height: 480px; }
.gap-card .card-num {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.gap-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.gap-card p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }

.split {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 28px;
  align-items: start;
}

.pricing-note {
  border: 1px solid rgba(74, 222, 128, 0.26);
  border-radius: var(--radius-lg);
  background: rgba(74, 222, 128, 0.06);
  padding: 20px 22px;
}
.pricing-note p { margin: 0; color: var(--text); }

.blog-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}

@media (max-width: 1100px) {
  .capability-grid,
  .price-grid,
  .proof-grid,
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lane-system, .gap-grid, .split, .blog-grid { grid-template-columns: 1fr; }
  .labs-grid .lab-feature { grid-column: span 1; }
}

@media (max-width: 720px) {
  .capability-grid,
  .price-grid,
  .proof-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.form-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  padding: 24px;
}
.project-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--text-soft); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(4, 6, 11, 0.72); color: var(--white); padding: 12px 13px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.quiz { display: grid; gap: 16px; }
.quiz-question { border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(10, 14, 24, 0.55); padding: 18px; }
.quiz-question h2 { margin: 0 0 14px; color: var(--white); font-size: 1.1rem; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice {
  min-height: 88px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(4, 6, 11, 0.68); color: var(--text);
  padding: 12px; text-align: center;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.choice:hover, .choice.active {
  border-color: rgba(74, 222, 128, 0.52);
  background: rgba(74, 222, 128, 0.08);
  color: var(--white);
}
.quiz-result {
  border: 1px solid rgba(74, 222, 128, 0.36);
  border-radius: var(--radius-lg);
  background: rgba(74, 222, 128, 0.07);
  padding: 22px;
}
.quiz-result[hidden] { display: none; }
.quiz-result h2 { margin: 0 0 8px; color: var(--white); font-family: var(--font-display); }
.quiz-result p { margin: 0 0 16px; color: var(--text-soft); }
.cta-panel {
  border: 1px solid rgba(74, 222, 128, 0.26);
  border-radius: var(--radius-lg);
  background: rgba(74, 222, 128, 0.06);
  padding: 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.cta-panel h2 { margin: 0; color: var(--white); font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.cta-panel p { margin: 0; color: var(--text); }
.jupiter-band,
.elara-band,
.tradeos-band {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(74, 222, 128, 0.08), rgba(10, 14, 24, 0.5)),
    rgba(10, 14, 24, 0.55);
  padding: 30px;
}
.tradeos-band {
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(74, 222, 128, 0.08), rgba(10, 14, 24, 0.74)),
    rgba(10, 14, 24, 0.55);
}
.elara-band {
  border-color: rgba(139, 92, 246, 0.32);
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(10, 14, 24, 0.74)),
    rgba(10, 14, 24, 0.55);
}
.elara-band .section-kicker, .elara-accent { color: var(--purple); }
.jupiter-system { display: grid; gap: 10px; }
.system-row {
  display: grid;
  grid-template-columns: 118px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(10, 14, 24, 0.55);
}
.system-row span:first-child {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.system-row strong { color: var(--white); }
.system-row small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blog-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; }
.blog-card {
  position: relative;
  min-height: 270px;
  display: grid; align-content: end; gap: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  padding: 22px;
}
.blog-card.featured { min-height: 520px; }
.blog-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.9) contrast(1.06);
}
.blog-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 11, 0.18), rgba(4, 6, 11, 0.92) 70%);
}
.blog-card > *:not(img) { position: relative; z-index: 1; }
.blog-card h2, .blog-card h3 {
  margin: 0;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1.16;
}
.blog-card.featured h2 {
  max-width: 640px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  letter-spacing: 0;
}
.blog-card p { margin: 0; max-width: 650px; color: var(--text-soft); }
.article-shell { width: min(880px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0 90px; }
.article-header { display: grid; gap: 18px; padding-bottom: 34px; border-bottom: 1px solid var(--border); }
.article-header h1 { margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(2.45rem, 5vw, 4.2rem); line-height: 1; letter-spacing: 0; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.article-meta span { border: 1px solid rgba(74, 222, 128, 0.24); border-radius: 999px; color: var(--text-soft); padding: 6px 10px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.article-body { display: grid; gap: 22px; padding-top: 34px; }
.article-body h2 { margin: 18px 0 0; color: var(--white); font-family: var(--font-display); font-size: 1.8rem; line-height: 1.12; letter-spacing: 0; }
.article-body p, .article-body li { color: var(--text); font-size: 1.05rem; line-height: 1.78; }
.article-body p, .article-body ul { margin: 0; }
.article-callout {
  border: 1px solid rgba(74, 222, 128, 0.28);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(74, 222, 128, 0.06);
  padding: 18px 20px;
}
.article-callout p { color: var(--white); }

/* ==== Glass surfaces (let starfield bleed through cards) ==== */
.hud-card,
.lane-card,
.fleet-card,
.profile-card,
.log-card,
.seq-stage,
.panel-shell,
.price-card,
.proof-card,
.step-card,
.gap-card,
.feature-panel,
.route-card,
.term-panel,
.capability,
.form-panel,
.quiz-question,
.blog-card,
.system-row,
.jupiter-band,
.elara-band,
.tradeos-band,
.product-vis,
.launch-panel,
.cta-panel,
.pricing-note {
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
}

/* Stronger backdrop on heavier panels */
.panel-shell,
.lane-card.feature,
.launch-panel,
.jupiter-band,
.tradeos-band,
.elara-band {
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

/* Soften the global backdrop so the starfield is more visible */
.site-backdrop {
  opacity: 0.7;
}
.site-backdrop::after {
  opacity: 0.7;
}

/* Mobile collapses for shared product/CTA bands */
@media (max-width: 900px) {
  .jupiter-band,
  .tradeos-band,
  .elara-band {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px;
  }
  .cta-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cta-panel .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .jupiter-band,
  .tradeos-band,
  .elara-band {
    padding: 20px;
  }
  .jupiter-system .system-row {
    grid-template-columns: 88px 1fr auto;
    gap: 10px;
    padding: 10px;
  }
  .section-kicker { font-size: 0.68rem; letter-spacing: 0.14em; }
  .button.big { font-size: 0.78rem; padding: 0 18px; min-height: 52px; }
}

/* ==== Transmission Log (blog index) ==== */
.transmission-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  position: relative;
}
.transmission-log::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.45), rgba(56, 189, 248, 0.32), rgba(139, 92, 246, 0.32));
  z-index: 0;
}

.transmission {
  position: relative;
  z-index: 1;
}

.transmission .tx-anchor {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1.4fr) minmax(220px, 0.9fr);
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 30%),
    rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  color: inherit;
  overflow: hidden;
  transition: border-color 240ms ease, transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 240ms ease;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
}

.transmission .tx-anchor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(74, 222, 128, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
}

.transmission .tx-anchor::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-bottom: 0; border-left: 0;
  pointer-events: none;
}

.transmission .tx-anchor:hover {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 36px rgba(74, 222, 128, 0.14);
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-2px);
}

.transmission .tx-meta {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px 18px 22px 32px;
  border-right: 1px solid var(--border);
  background: rgba(4, 6, 11, 0.4);
}
.transmission .tx-meta::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.9), 0 0 0 4px rgba(4, 6, 11, 0.9);
  animation: pulseLed 1.6s ease-in-out infinite;
  z-index: 2;
}
.transmission .tx-id {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.transmission .tx-date {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.transmission .tx-tag {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.08);
  border-radius: 999px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.transmission .tx-tag-direction {
  color: var(--blue);
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.08);
}
.transmission .tx-tag-active {
  color: var(--green-hot);
  border-color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.12);
}

.transmission .tx-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px 24px;
}
.transmission .tx-body h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.transmission .tx-body p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.transmission .tx-vis {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-left: 1px solid var(--border);
  min-height: 160px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(74, 222, 128, 0.1), transparent 70%),
    rgba(4, 6, 11, 0.5);
}
.transmission .tx-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  filter: saturate(0.88) contrast(1.05);
  position: absolute;
  inset: 0;
}
.transmission .tx-scan {
  position: absolute;
  left: 0; right: 0; top: -30%;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(74, 222, 128, 0.14), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.transmission .tx-anchor:hover .tx-scan {
  opacity: 1;
  animation: scanCard 1.8s ease-in-out infinite;
}

.tx-vis-grid {
  background:
    linear-gradient(rgba(74, 222, 128, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, 0.08) 1px, transparent 1px),
    radial-gradient(closest-side at 50% 50%, rgba(56, 189, 248, 0.16), transparent 70%),
    rgba(4, 6, 11, 0.6);
  background-size: 30px 30px, 30px 30px, auto, auto;
}
.tx-vis-grid .grid-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 60%);
  animation: gridPulse 3s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.grid-core {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74, 222, 128, 0.55);
  border-radius: 50%;
  background: rgba(4, 6, 11, 0.8);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 18px rgba(74, 222, 128, 0.2), 0 0 22px rgba(74, 222, 128, 0.22);
}
.tx-vis-grid .grid-core {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.2), 0 0 22px rgba(56, 189, 248, 0.22);
}

.tx-vis-orbit { background: radial-gradient(closest-side at 50% 50%, rgba(74, 222, 128, 0.16), transparent 70%), rgba(4, 6, 11, 0.6); }
.orbit-ring-mini {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringSpinA 14s linear infinite;
}
.orbit-ring-mini.r2 {
  width: 70px; height: 70px;
  border-style: dashed;
  animation-duration: 8s;
  animation-direction: reverse;
}

.transmission .tx-arrow {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  background: rgba(4, 6, 11, 0.7);
  border: 1px solid rgba(74, 222, 128, 0.4);
  padding: 6px 10px;
  border-radius: var(--radius);
}
.transmission .tx-anchor:hover .tx-arrow {
  opacity: 1;
  transform: translateY(0);
}
.transmission .tx-arrow-icon {
  display: inline-block;
  transition: transform 220ms ease;
}
.transmission .tx-anchor:hover .tx-arrow-icon { transform: translateX(4px); }

@media (max-width: 1040px) {
  .transmission .tx-anchor { grid-template-columns: 160px minmax(0, 1fr); }
  .transmission .tx-vis { grid-column: 1 / -1; min-height: 130px; border-left: 0; border-top: 1px solid var(--border); }
  .transmission .tx-arrow { position: static; opacity: 1; transform: none; margin: 0 18px 18px auto; width: fit-content; }
}

@media (max-width: 720px) {
  .transmission-log::before { left: 12px; }
  .transmission .tx-anchor { grid-template-columns: 1fr; }
  .transmission .tx-meta {
    grid-template-columns: auto auto 1fr;
    align-content: start;
    gap: 12px;
    padding: 16px 16px 16px 30px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .transmission .tx-meta::before { left: 12px; top: 50%; }
  .transmission .tx-tag { justify-self: end; }
  .transmission .tx-body { padding: 18px; }
  .transmission .tx-vis { min-height: 140px; }
  .transmission .tx-arrow { margin: 0 18px 18px; }
}

/* ==== Mobile balance pass ==== */
@media (max-width: 900px) {
  .system-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label status" "value value";
    gap: 6px 12px;
    padding: 14px 16px;
  }
  .system-row span:first-child { grid-area: label; }
  .system-row small { grid-area: status; text-align: right; }
  .system-row strong { grid-area: value; }
}

@media (max-width: 720px) {
  /* Page hero gets clearer breathing room */
  .page-hero {
    padding: 78px 18px 56px;
    gap: 16px;
  }
  .page-hero h1 { font-size: clamp(1.95rem, 7.5vw, 2.4rem); line-height: 1.05; }
  .page-hero .lead { font-size: 0.96rem; line-height: 1.6; }
  .page-hero::before, .page-hero::after { inset: 14px 0 14px; }
  .page-hero .frame-corner.tl { top: 14px; }
  .page-hero .frame-corner.tr { top: 14px; }
  .page-hero .frame-corner.bl { bottom: 14px; }
  .page-hero .frame-corner.br { bottom: 14px; }

  /* HUD/lane/fleet/profile/log/seq cards reduce padding for balance */
  .hud-card { padding: 22px; min-height: auto; gap: 14px; }
  .hud-card.large { min-height: auto; }
  .hud-card h3 { font-size: 1.15rem; }
  .hud-card p { font-size: 0.92rem; }
  .hud-card .card-num { font-size: 2rem; }

  .lane-card { padding: 22px; gap: 12px; }
  .lane-card.feature { min-height: auto; padding: 24px 22px; }
  .lane-card h3 { font-size: 1.15rem; }
  .lane-card.feature h3 { font-size: 1.35rem; }
  .lane-card p { font-size: 0.92rem; }
  .lane-specs { grid-template-columns: 1fr 1fr; }
  .lane-specs.compact { grid-template-columns: 1fr 1fr; }

  .fleet-card { padding: 20px; gap: 14px; }
  .fleet-card h3 { font-size: 1.4rem; }
  .fleet-card p { font-size: 0.92rem; }
  .fleet-vis { height: 140px; }

  .profile-card { padding: 20px; gap: 10px; }
  .profile-card h3 { font-size: 1.08rem; }
  .profile-card p { font-size: 0.88rem; }
  .profile-price { font-size: 1.5rem; }

  .log-card .log-body { padding: 16px; }
  .log-card img { height: 150px; }

  .seq-stage { padding: 20px; gap: 10px; }
  .seq-stage h3 { font-size: 1.15rem; }
  .seq-stage p { font-size: 0.92rem; }

  /* Hero panel sized nicely on mobile */
  .panel-shell { min-height: 540px; }
  .telemetry-row { padding: 11px 14px; grid-template-columns: 1fr auto 70px; gap: 10px; }
  .telemetry-row .t-value { font-size: 0.95rem; }
  .pf-cell { padding: 12px 12px; }

  /* Section spacing */
  .section.module { padding: 56px 0 24px; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 1.55rem; line-height: 1.12; }

  /* CTA panel polish */
  .launch-panel { padding: 22px; gap: 18px; }
  .lp-copy h2 { font-size: 1.45rem; }

  /* Footer-padding tweak */
  .footer-shell { padding: 36px 0 22px; }

  /* Transmission log compact */
  .transmission .tx-meta { padding: 14px 16px 14px 28px; gap: 8px 12px; }
  .transmission .tx-id { font-size: 0.74rem; }
  .transmission .tx-body { padding: 16px; gap: 8px; }
  .transmission .tx-body h3 { font-size: 1.08rem; line-height: 1.2; }
  .transmission .tx-body p { font-size: 0.9rem; }
  .transmission .tx-vis { min-height: 130px; }
  .transmission .tx-meta::before { width: 9px; height: 9px; left: 10px; }

  /* Mission readout pills wrap nicely */
  .mission-readout span { font-size: 0.6rem; padding: 0 9px; min-height: 28px; }

  /* Hero copy spacing */
  .hero-copy { gap: 18px; }
  .display-h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .proof-strip span { font-size: 0.64rem; min-height: 30px; padding: 0 10px; }

  /* Tighter body text */
  .lead { font-size: 0.98rem; line-height: 1.6; max-width: 100%; }
}

@media (max-width: 420px) {
  .display-h1 { font-size: 1.95rem; }
  .section-head h2 { font-size: 1.35rem; }
  .button.big { font-size: 0.74rem; }
  .button { padding: 0 14px; min-height: 44px; }
  .button .btn-pre { font-size: 0.6rem; }
}

/* ========================================================
   SIMPLIFICATION OVERRIDES — keep cinematic moments, drop noise
   ======================================================== */

/* Kill per-card animated scan-lines */
.hud-card .scan-line,
.transmission .tx-scan,
.transmission .tx-anchor:hover .tx-scan,
.hud-card:hover .scan-line { display: none !important; animation: none !important; }

/* Kill 3D tilt everywhere except the homepage telemetry panel */
.hud-card,
.lane-card,
.fleet-card,
.profile-card,
.log-card,
.seq-stage,
.transmission .tx-anchor {
  transform: none !important;
}
.hud-card:hover,
.lane-card:hover,
.fleet-card:hover,
.profile-card:hover,
.log-card:hover,
.seq-stage:hover,
.transmission .tx-anchor:hover {
  transform: translateY(-2px) !important;
}

/* Soften hover glow */
.hud-card:hover,
.lane-card:hover,
.fleet-card:hover,
.profile-card:hover,
.log-card:hover,
.seq-stage:hover,
.transmission .tx-anchor:hover,
.price-card:hover,
.proof-card:hover,
.step-card:hover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4) !important;
}

/* Drop most of the pulsing dot LEDs — keep only on the brand mission readout,
   panel header LED, status dots in the hero. Quiet the rest. */
.node::before,
.fleet-status i,
.lane-led,
.metric i,
.fleet-specs span::before { animation: none !important; }

/* Calm the transmission-log beacon (no pulse, just a static dot) */
.transmission .tx-meta::before { animation: none !important; box-shadow: 0 0 0 4px rgba(4, 6, 11, 0.9) !important; }

/* Kill bracket pseudo elements site-wide in case any older selector still injects them */
.section-kicker::before,
.section-kicker::after { content: none !important; }

/* Remove the hero-ground bottom ticker entirely — keep the SCROLL cue area */
.hero-ground .ground-ticker { display: none; }

/* Quiet the eyebrow dot pulse so it's just a static dot */
.eyebrow .dot { animation: none !important; }

/* Remove the animated card corner tick on price/step/profile cards
   (those tiny green right-angle brackets in the top-right of every card) */
.price-card::after,
.step-card::after,
.profile-card::after,
.hud-card::after,
.transmission .tx-anchor::after { display: none !important; }

/* Make card borders calmer — single thin border, no extra grid overlay
   inside the card. Cards still get the body backdrop showing through. */
.hud-card::before,
.lane-card::after,
.fleet-card::before,
.transmission .tx-anchor::before,
.profile-card::before,
.launch-panel::after { display: none !important; }

/* Slow + quiet the orbit map (homepage hero) — keep but less hyper */
.orbit-sat { animation-duration: 18s !important; }
.sat-2 { animation-duration: 26s !important; }
.sat-3 { animation-duration: 36s !important; }
.orbit-ring { animation-duration: 60s !important; }

/* Drop the header sweep animation across the nav */
.site-header::after { display: none; }

/* Reset section-kicker font weight slightly so it doesn't shout */
.section-kicker { font-weight: 600; }
.section-kicker .kicker-bracket { display: none; }

/* Soften the hero panel border-glow */
.panel-shell { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.36) !important; }

/* Final flash sweep on buttons — too much. Disable. */
.button::before { display: none !important; }

/* Disable the in-panel grid overlay so the starfield reads through cleanly */
.panel-shell::before { opacity: 0.18 !important; }

/* ========================================================
   FOUNDER PANEL — Julian on the homepage hero
   ======================================================== */
.founder-panel {
  position: relative;
  min-height: 580px;
  display: grid;
  place-items: end center;
  isolation: isolate;
  z-index: 2;
  overflow: visible;
}
.founder-panel::after {
  display: none;
}

.founder-glow {
  display: none;
}
@keyframes founderGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) rotate(-7deg) scale(1);    opacity: 0.82; }
  50%      { transform: translate(-50%, -50%) rotate(-3deg) scale(1.06); opacity: 0.94; }
}
@keyframes glowPulse {
  0%, 100% { transform: rotate(-7deg) scale(1);    opacity: 0.82; }
  50%      { transform: rotate(-3deg) scale(1.06); opacity: 0.94; }
}

.founder-orbit {
  position: absolute;
  z-index: 1;
  inset: 4% 2% 2% 2%;
  border-radius: 50%;
  pointer-events: none;
}
.founder-orbit .orbit-line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-top-color: rgba(74, 222, 128, 0.62);
  border-right-color: rgba(139, 92, 246, 0.42);
  transform: rotate(-12deg);
  animation: orbitSpin 60s linear infinite;
}
@keyframes orbitSpin { to { transform: rotate(348deg); } }

.founder-orbit .orbit-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(4, 6, 11, 0.78);
  border: 1px solid rgba(74, 222, 128, 0.32);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.founder-orbit .orbit-node i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.9);
}
.node-build { top: 6%;  left: -4%; }
.node-rise  { top: 46%; right: -14%; border-color: rgba(139, 92, 246, 0.45); }
.node-rise i { background: var(--purple); box-shadow: 0 0 10px rgba(139, 92, 246, 0.9); }
.node-scale { bottom: 4%; left: 14%; border-color: rgba(56, 189, 248, 0.4); }
.node-scale i { background: var(--blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.9); }

.founder-portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 680px;
  object-fit: contain;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.founder-annotation {
  position: absolute;
  z-index: 4;
  top: 32%;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.founder-annotation .anno-line {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.85), rgba(139, 92, 246, 0.1));
  position: relative;
}
.founder-annotation .anno-line::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.9);
}
.founder-annotation .anno-label {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.founder-annotation .anno-label small {
  color: var(--purple);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.founder-annotation .anno-label strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Founder proof line: one clear beat at a time */
.hero-proof {
  position: relative;
  margin-top: 8px;
  border-top: 1px dashed rgba(74, 222, 128, 0.18);
  padding-top: 20px;
  max-width: 560px;
  min-height: 112px;
  overflow: hidden;
}
.hero-proof::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.65), transparent);
  pointer-events: none;
}
.hero-proof-track {
  position: relative;
  min-height: 92px;
}
.hero-proof-item {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  opacity: 0;
  transform: translateY(12px);
  animation: proofCycle 12s ease-in-out infinite;
}
.hero-proof-item:nth-child(2) { animation-delay: 4s; }
.hero-proof-item:nth-child(3) { animation-delay: 8s; }
@keyframes proofCycle {
  0%, 100% { opacity: 0; transform: translateY(12px); }
  7%, 26% { opacity: 1; transform: translateY(0); }
  34% { opacity: 0; transform: translateY(-12px); }
}
.hero-proof-item span {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-proof-item strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.hero-proof-item small {
  color: var(--text-soft);
  font-size: 0.92rem;
}

@media (max-width: 1100px) {
  .founder-panel { min-height: 500px; }
  .founder-portrait { max-height: 560px; }
  .founder-annotation { top: 24%; right: 6px; }
}

@media (max-width: 720px) {
  .founder-panel {
    display: grid;
    place-items: center;
    min-height: auto;
    gap: 18px;
    padding-top: 4px;
  }
  .founder-portrait {
    order: 2;
    max-height: 520px;
    max-width: 320px;
    width: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .founder-annotation { display: none; }
  /* Recenter the orbit ring + glow around the portrait area only */
  .founder-glow {
    top: 58%;
    width: min(520px, 118%);
    height: 520px;
  }
  .founder-orbit {
    inset: auto 2% 0 2%;
    height: 520px;
  }
  .hero-proof {
    min-height: 104px;
    padding-top: 18px;
  }
  .hero-proof-track { min-height: 82px; }
  .hero-proof-item strong { font-size: clamp(1.35rem, 7vw, 1.85rem); }
  .hero-proof-item small { font-size: 0.82rem; }
  .node-build { top: 2%; left: -2%; }
  .node-rise  { top: 44%; right: -4px; }
  .node-scale { bottom: 2%; left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-proof {
    min-height: auto;
    overflow: visible;
  }
  .hero-proof-track {
    display: grid;
    gap: 14px;
    min-height: auto;
  }
  .hero-proof-item {
    position: static;
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ========================================================
   FROM JULIAN — homepage pull-quote panel (purple zone)
   ======================================================== */
.founder-note {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: stretch;
  border: 1px solid rgba(139, 92, 246, 0.36);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(800px 480px at 0% 0%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(168, 85, 247, 0.1), transparent 70%),
    rgba(10, 14, 24, 0.62);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  padding: 38px;
  overflow: hidden;
}
.founder-note .fn-glow {
  position: absolute;
  inset: -30%;
  z-index: 0;
  background: radial-gradient(closest-side at 25% 50%, rgba(139, 92, 246, 0.32), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.founder-note .fn-portrait {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  align-self: end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 360px;
}
.founder-note .fn-portrait img {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 60px rgba(139, 92, 246, 0.32));
}
.home-founder-note {
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.05fr);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 34px 0;
}
.home-founder-note .fn-glow {
  display: none;
}
.home-founder-note .fn-portrait {
  align-self: stretch;
  place-items: center;
  min-height: 460px;
  overflow: visible;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-founder-note .fn-portrait::before {
  display: none;
}
.home-founder-note .fn-portrait::after {
  display: none;
}
.home-founder-note .fn-portrait img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 118%;
  height: clamp(500px, 62vw, 680px);
  max-height: 92%;
  object-fit: contain;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.founder-note .fn-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  align-content: center;
}
.founder-note .fn-body .section-kicker { color: var(--purple); }
.founder-note .fn-body h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.founder-note .fn-quote {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.7;
}
.founder-note .fn-quote em {
  color: var(--purple);
  font-style: italic;
  font-weight: 600;
}
.founder-principle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--radius);
  background: rgba(139, 92, 246, 0.18);
}
.founder-principle div {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: rgba(4, 6, 11, 0.72);
}
.founder-principle span {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.founder-principle p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}
.founder-principle strong {
  grid-column: 1 / -1;
  padding: 12px 14px;
  color: var(--white);
  background: rgba(4, 6, 11, 0.82);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.founder-note .fn-sign {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.founder-note .fn-signature {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
}
.founder-note .fn-role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .founder-note { grid-template-columns: 1fr; padding: 26px; gap: 24px; }
  .founder-note .fn-portrait { min-height: 240px; }
  .founder-note .fn-portrait img { max-width: 200px; }
  .home-founder-note .fn-portrait {
    min-height: 340px;
    aspect-ratio: 4 / 5;
  }
  .home-founder-note .fn-portrait img {
    width: min(88%, 310px);
    max-width: 310px;
    height: auto;
  }
  .founder-principle { grid-template-columns: 1fr; }
}

/* ========================================================
   ABOUT PAGE
   ======================================================== */
.about-hero {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
  padding: 86px 24px 64px;
}
.about-hero .ah-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 48px;
  align-items: center;
}
.about-hero .ah-copy { display: grid; gap: 22px; }
.about-hero .ah-copy h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  text-wrap: balance;
  letter-spacing: 0;
}
.about-hero .ah-copy .lead {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.72;
}
.about-hero .ah-meta {
  list-style: none;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed rgba(139, 92, 246, 0.28);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.about-hero .ah-meta li { display: grid; gap: 4px; }
.about-hero .ah-meta span {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about-hero .ah-meta strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.about-hero .ah-portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  isolation: isolate;
}
.about-hero .ah-portrait::after {
  display: none;
}
.about-hero .ah-glow {
  display: none;
}
.about-hero .ah-portrait img {
  position: relative;
  z-index: 1;
  max-height: 620px;
  width: auto;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Story */
.about-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.story-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.06), transparent 30%),
    rgba(10, 14, 24, 0.62);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  padding: 24px;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.story-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), 0 0 32px rgba(139, 92, 246, 0.18);
  transform: translateY(-2px);
}
.story-card .story-step {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.story-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: 0.02em;
}
.story-card p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }

/* Principles */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.principle {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  padding: 22px 24px;
  transition: border-color 240ms ease, transform 240ms ease;
}
.principle:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}
.principle .p-num {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
}
.principle h3 {
  grid-column: 2;
  margin: 0 0 8px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.principle p {
  grid-column: 2;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Stack grid */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.stack-card {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  padding: 22px;
  transition: border-color 240ms ease, transform 240ms ease;
}
.stack-card:hover { transform: translateY(-2px); }
.stack-card.tradeos:hover { border-color: rgba(74, 222, 128, 0.5); }
.stack-card.elara:hover { border-color: rgba(139, 92, 246, 0.55); }
.stack-card.jupiter:hover { border-color: rgba(56, 189, 248, 0.5); }
.stack-card .sc-meta {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.stack-card.elara .sc-meta { color: var(--purple); }
.stack-card.jupiter .sc-meta { color: var(--blue); }
.stack-card h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}
.stack-card p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.stack-card .stack-cta {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(74, 222, 128, 0.18);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stack-card.elara .stack-cta { color: var(--purple); border-top-color: rgba(139, 92, 246, 0.28); }
.stack-card.jupiter .stack-cta { color: var(--blue); border-top-color: rgba(56, 189, 248, 0.28); }

/* Founder contact block */
.founder-contact {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 380px at 100% 0%, rgba(139, 92, 246, 0.2), transparent 70%),
    rgba(10, 14, 24, 0.62);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  padding: 36px;
  overflow: hidden;
}
.founder-contact .fc-portrait img {
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 28px rgba(139, 92, 246, 0.32);
}
.founder-contact .fc-body { display: grid; gap: 14px; }
.founder-contact h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: 0.02em;
}
.founder-contact .section-kicker { color: var(--purple); }
.founder-contact p { margin: 0; color: var(--text-soft); }
.founder-contact .fc-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
}
.founder-contact .fc-channel {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(4, 6, 11, 0.6);
  transition: background 200ms ease;
}
.founder-contact .fc-channel:hover { background: rgba(139, 92, 246, 0.12); }
.founder-contact .fc-channel span {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.founder-contact .fc-channel strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (max-width: 1100px) {
  .about-hero .ah-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-hero .ah-portrait { min-height: 460px; }
  .about-hero .ah-portrait img { max-height: 460px; }
  .about-story { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: 1fr; }
  .founder-contact { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
  .founder-contact .fc-channels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-hero { padding: 56px 16px 36px; }
  .about-hero .ah-meta { grid-template-columns: 1fr; gap: 10px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle { grid-template-columns: 44px 1fr; padding: 18px; }
}

/* ========================================================
   START PAGE — From Julian inline card + form polish
   ======================================================== */
.from-julian-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(139, 92, 246, 0.18), transparent 70%),
    rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  padding: 16px 18px;
  margin-top: 14px;
}
.from-julian-card img {
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.32);
}
.from-julian-card .fjc-body { display: grid; gap: 4px; }
.from-julian-card p {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
}
.from-julian-card .fjc-sign {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.form-header .form-meta { color: var(--text-soft); font-weight: 700; }
.form-header .form-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-weight: 700;
}
.form-header .form-route i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.85);
}

.form-fineprint {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ========================================================
   FOUNDER NOTE — color variants for product pages
   ======================================================== */
.founder-note.tradeos {
  border-color: rgba(74, 222, 128, 0.36);
  background:
    radial-gradient(800px 480px at 0% 0%, rgba(74, 222, 128, 0.16), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(74, 222, 128, 0.08), transparent 70%),
    rgba(10, 14, 24, 0.62);
}
.founder-note.tradeos .fn-glow {
  background: radial-gradient(closest-side at 25% 50%, rgba(74, 222, 128, 0.32), transparent 70%);
}
.founder-note.tradeos .fn-portrait img {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 60px rgba(74, 222, 128, 0.3));
}
.founder-note.tradeos .fn-body .section-kicker { color: var(--green); }
.founder-note.tradeos .fn-quote em { color: var(--green); }
.founder-note.tradeos .fn-role { color: var(--green); }

.founder-note.elara {
  /* purple is already the default — slightly stronger glow */
  border-color: rgba(139, 92, 246, 0.45);
}

.founder-note.jupiter {
  border-color: rgba(56, 189, 248, 0.36);
  background:
    radial-gradient(800px 480px at 0% 0%, rgba(56, 189, 248, 0.16), transparent 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(56, 189, 248, 0.08), transparent 70%),
    rgba(10, 14, 24, 0.62);
}
.founder-note.jupiter .fn-glow {
  background: radial-gradient(closest-side at 25% 50%, rgba(56, 189, 248, 0.32), transparent 70%);
}
.founder-note.jupiter .fn-portrait img {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 60px rgba(56, 189, 248, 0.3));
}
.founder-note.jupiter .fn-body .section-kicker { color: var(--blue); }
.founder-note.jupiter .fn-quote em { color: var(--blue); }
.founder-note.jupiter .fn-role { color: var(--blue); }

/* ========================================================
   FOOTER SIGNATURE — small founder line in the footer brand area
   ======================================================== */
.footer-signature {
  display: inline-grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: var(--radius);
  background:
    radial-gradient(300px 120px at 0% 50%, rgba(139, 92, 246, 0.18), transparent 70%),
    rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  width: fit-content;
}
.footer-signature img {
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.32);
}
.footer-signature div { display: grid; gap: 2px; }
.footer-signature strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.footer-signature small {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

/* ========================================================
   ARTICLE BYLINE — blog post header with author
   ======================================================== */
.article-byline {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  margin: 6px 0;
  padding: 12px 14px;
  border-left: 2px solid var(--purple);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent 60%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-byline img {
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.32);
}
.article-byline div { display: grid; gap: 2px; }
.article-byline strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.article-byline span {
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ========================================================
   TRUSTED BY — infinite-scroll marquee under the hero
   ======================================================== */
.trusted-strip {
  position: relative;
  width: var(--shell-wide);
  margin: 0 auto;
  padding: 26px 0 36px;
  display: grid;
  gap: 16px;
  border-top: 1px dashed rgba(139, 92, 246, 0.16);
  border-bottom: 1px dashed rgba(139, 92, 246, 0.16);
}

.trusted-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.trusted-label .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.78);
}

.trust-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.trust-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: trustRoll 32s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }

@keyframes trustRoll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.trust-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
  flex: 0 0 auto;
}
/* Color-vary the chip dots to feel like a real client roster */
.trust-chip:nth-child(2n)::before { background: var(--purple); box-shadow: 0 0 10px rgba(139, 92, 246, 0.78); }
.trust-chip:nth-child(3n)::before { background: var(--blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.78); }
.trust-chip:hover {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.1);
}

@media (max-width: 720px) {
  .trust-chip { font-size: 0.92rem; padding: 10px 16px; }
  .trust-track { gap: 10px; animation-duration: 28s; }
  .trusted-label { font-size: 0.62rem; letter-spacing: 0.16em; }
  .trusted-strip { padding: 20px 16px 28px; }
}

/* ========================================================
   REVIEW CARD — featured Google review
   ======================================================== */
.review-card {
  position: relative;
  display: grid;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(720px 380px at 0% 0%, rgba(139, 92, 246, 0.16), transparent 70%),
    radial-gradient(600px 320px at 100% 100%, rgba(74, 222, 128, 0.06), transparent 70%),
    rgba(10, 14, 24, 0.6);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  padding: 32px 38px;
  overflow: hidden;
}

.review-source-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(139, 92, 246, 0.2);
}

.review-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.review-source-tag .g-icon {
  width: 18px; height: 18px;
  display: block;
}

.review-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.08);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--amber);
}
.review-meta-pill .stars {
  color: var(--amber);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}
.review-meta-pill .rating-text { color: var(--white); }

.review-quote {
  position: relative;
  margin: 0;
  padding: 0 0 0 40px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.review-quote .quote-mark {
  position: absolute;
  left: 0;
  top: -16px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--purple);
  line-height: 1;
  opacity: 0.55;
}
.review-quote p { margin: 0; }

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px dashed rgba(139, 92, 246, 0.2);
}
.reviewer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.r-avatar {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.6);
  background: rgba(4, 6, 11, 0.7);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.34);
}
.r-meta { display: grid; gap: 2px; }
.r-meta strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.r-meta span {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.review-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 12px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--radius);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.review-link:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.65);
  transform: translateY(-1px);
}
.review-link .btn-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.review-link:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .review-card { padding: 24px; gap: 18px; }
  .review-quote { padding-left: 28px; font-size: 1rem; line-height: 1.55; }
  .review-quote .quote-mark { font-size: 3.4rem; top: -10px; }
  .review-source-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .review-footer { flex-direction: column; align-items: flex-start; }
  .review-link { width: 100%; justify-content: space-between; }
}

/* ========================================================
   ARTICLE SIGN-OFF + founder-portrait blog tile
   ======================================================== */
.article-sign {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(139, 92, 246, 0.28);
  color: var(--purple);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tx-vis-founder {
  background:
    radial-gradient(closest-side at 50% 55%, rgba(139, 92, 246, 0.45), rgba(139, 92, 246, 0.1) 60%, transparent 80%),
    rgba(4, 6, 11, 0.5);
}
.tx-vis-founder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  opacity: 0.92;
  filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.32));
}