/* ============================================================
   COSMIC HARBOR — OrbitDock Marketing Site
   Deep space observatory meets mission control HUD.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   Design Tokens
   ============================================================ */

:root {
  /* Brand */
  --accent: #54AEE5;
  --accent-glow: #59CCFA;
  --accent-muted: #338099;

  /* Backgrounds — 4-tier depth */
  --bg-code: #0A0A0D;
  --bg-primary: #0C0B0F;
  --bg-secondary: #121115;
  --bg-tertiary: #18171C;
  --bg-panel: #0E0E12;

  /* Text hierarchy */
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.60);
  --text-tertiary: rgba(255,255,255,0.42);
  --text-quaternary: rgba(255,255,255,0.28);

  /* Status */
  --status-working: #54AEE5;
  --status-permission: #F28C6B;
  --status-question: #BF80F2;
  --status-reply: #73B2FF;
  --status-ended: #6B6673;

  /* Feedback */
  --feedback-positive: #59D18C;
  --feedback-caution: #F2BF4D;
  --feedback-warning: #FF994D;
  --feedback-negative: #F26673;

  /* Model */
  --model-opus: #B373F2;
  --model-sonnet: #66A5FF;
  --model-haiku: #4DD9CC;

  /* Surface */
  --surface-hover: rgba(84,174,229,0.06);
  --surface-border: rgba(84,174,229,0.08);
  --surface-selected: rgba(84,174,229,0.10);
  --surface-active: rgba(84,174,229,0.18);
  --surface-elevated: rgba(255,255,255,0.03);

  /* Shadows & Glow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.3);
  --glow-accent: 0 0 24px rgba(84,174,229,0.2);
  --glow-accent-strong: 0 0 40px rgba(84,174,229,0.3);

  /* Fonts */
  --font-display: 'Manrope', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Instrument Sans', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-glow);
}

img { max-width: 100%; height: auto; }

/* ============================================================
   Background Layers — Fixed star field + nebula + grid
   ============================================================ */

/* Star field — single canvas with stars, nebula, and grid painted once.
   One GPU layer instead of 4+ DOM elements. */
.star-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   Page Content Layer
   ============================================================ */

.page-content {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Navigation — HUD-style bar
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(12,11,15,0.7);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid var(--surface-border);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.nav-brand:hover { color: var(--text-primary); }

.nav-brand svg {
  width: 30px;
  height: 30px;
}

.nav-links {
  display: none;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(12,11,15,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--surface-border);
  padding: var(--space-lg);
  gap: var(--space-lg);
  list-style: none;
}

.nav-links.open { display: flex; }

.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s ease;
}

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

.nav-links a.active {
  color: var(--accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px 16px;
  background: rgba(84,174,229,0.12);
  border: 1px solid rgba(84,174,229,0.25);
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.nav-cta:hover {
  background: rgba(84,174,229,0.2);
  border-color: rgba(84,174,229,0.4);
  color: var(--accent-glow) !important;
  box-shadow: var(--glow-accent);
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-sm);
}

.nav-toggle svg { width: 24px; height: 24px; }

@media (min-width: 769px) {
  .nav-toggle { display: none; }

  .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 0;
  }
}

/* ============================================================
   Hero — Orbital station viewport
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px var(--space-lg) 40px;
  text-align: center;
  overflow: hidden;
}

@media (min-width: 769px) {
  .hero {
    padding: 100px var(--space-xl) 60px;
  }
}

/* Radial glow behind the hero content */
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 900px;
  height: 900px;
  background:
    radial-gradient(ellipse 70% 60%, rgba(12,11,15,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100%, rgba(84,174,229,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80%, rgba(179,115,242,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* ---- Orbital rings ---- */

.orbit-viz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  contain: layout style;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.08);
}

/* Ring 1 — innermost, fastest */
.orbit-ring-1 {
  width: min(460px, 85vw);
  height: min(200px, 38vw);
  transform: rotate(-18deg);
}

.orbit-ring-1 .ring-line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.06);
}

/* Ring 2 — medium */
.orbit-ring-2 {
  width: min(680px, 90vw);
  height: min(300px, 42vw);
  border-color: rgba(179,115,242,0.06);
  transform: rotate(12deg);
}

/* Ring 3 — outermost, slowest */
.orbit-ring-3 {
  width: min(920px, 95vw);
  height: min(400px, 48vw);
  border-color: rgba(242,140,107,0.04);
  transform: rotate(-6deg);
}

/* Spacecraft dots orbiting on the rings */
.craft {
  position: absolute;
  border-radius: 50%;
}

.craft-1 {
  width: 5px;
  height: 5px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 30px rgba(84,174,229,0.3);
  top: -2.5px;
  left: 50%;
  margin-left: -2.5px;
}

.craft-2 {
  width: 4px;
  height: 4px;
  background: var(--model-opus);
  box-shadow: 0 0 8px var(--model-opus), 0 0 24px rgba(179,115,242,0.3);
  bottom: -2px;
  right: 20%;
  margin-right: -2px;
}

.craft-3 {
  width: 4px;
  height: 4px;
  background: var(--status-permission);
  box-shadow: 0 0 8px var(--status-permission), 0 0 24px rgba(242,140,107,0.3);
  top: -2px;
  left: 30%;
}

.craft-4 {
  width: 3px;
  height: 3px;
  background: var(--model-haiku);
  box-shadow: 0 0 8px var(--model-haiku), 0 0 20px rgba(77,217,204,0.3);
  bottom: -1.5px;
  left: 40%;
}

.craft-5 {
  width: 3px;
  height: 3px;
  background: var(--feedback-positive);
  box-shadow: 0 0 6px var(--feedback-positive);
  top: -1.5px;
  right: 25%;
}

/* Central station glow */
.orbit-station {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 20px var(--accent),
    0 0 60px rgba(84,174,229,0.3),
    0 0 120px rgba(84,174,229,0.1);
}

.orbit-station::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.15);
}

.orbit-station::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.06);
}

/* ---- Hero content ---- */

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  background: rgba(84,174,229,0.06);
  border: 1px solid rgba(84,174,229,0.15);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2xl);
}

.hero-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--feedback-positive);
  box-shadow: 0 0 6px var(--feedback-positive);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin: 0 auto var(--space-xl);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  text-wrap: balance;
}

.hero h1 .gradient {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-glow) 25%,
    var(--model-opus) 55%,
    var(--status-permission) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: clamp(16px, 2.2vw, 19px);
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto var(--space-3xl);
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 13px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-decoration: none;
  position: relative;
}

.btn-primary {
  background: var(--accent);
  color: #0C0B0F;
  box-shadow: 0 0 20px rgba(84,174,229,0.2);
}

.btn-primary:hover {
  background: var(--accent-glow);
  color: #0C0B0F;
  box-shadow: var(--glow-accent-strong);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.1);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* ============================================================
   Status Beacons — expanding ring animations
   ============================================================ */


/* ============================================================
   Section Dividers — star-chart markers
   ============================================================ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--surface-border), transparent);
}

.section-divider .marker {
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(84,174,229,0.4);
  flex-shrink: 0;
}

/* ============================================================
   Sections
   ============================================================ */

.section {
  padding: 60px var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .section {
    padding: 100px var(--space-xl);
  }
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

.section-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: var(--space-3xl);
}

.section-centered {
  text-align: center;
}

.section-centered .section-label {
  justify-content: center;
}

.section-centered .section-label::before {
  display: none;
}

.section-centered .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   HUD Panels — corner-bracket cards
   ============================================================ */

.hud-panel {
  position: relative;
  background: rgba(18,17,21,0.85);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
}

/* Corner brackets using background gradients on pseudo-element */
.hud-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 1;
  background:
    /* top-left */
    linear-gradient(var(--accent), var(--accent)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 1.5px 28px no-repeat,
    /* top-right */
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 1.5px 28px no-repeat,
    /* bottom-left */
    linear-gradient(var(--accent), var(--accent)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 1.5px 28px no-repeat,
    /* bottom-right */
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 1.5px 28px no-repeat;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.hud-panel:hover::before {
  opacity: 0.8;
}

.hud-panel:hover {
  border-color: rgba(84,174,229,0.15);
  box-shadow: 0 0 40px rgba(84,174,229,0.05);
}

/* Variant: colored brackets */
.hud-panel.hud-purple::before {
  background:
    linear-gradient(var(--model-opus), var(--model-opus)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 0 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 100% 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 0 100% / 1.5px 28px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--model-opus), var(--model-opus)) 100% 100% / 1.5px 28px no-repeat;
}

.hud-panel.hud-green::before {
  background:
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 0 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 100% 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 0 100% / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-positive), var(--feedback-positive)) 100% 100% / 1.5px 28px no-repeat;
}

.hud-panel.hud-orange::before {
  background:
    linear-gradient(var(--status-permission), var(--status-permission)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 0 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 100% 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 0 100% / 1.5px 28px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--status-permission), var(--status-permission)) 100% 100% / 1.5px 28px no-repeat;
}

.hud-panel.hud-teal::before {
  background:
    linear-gradient(var(--model-haiku), var(--model-haiku)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 0 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 100% 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 0 100% / 1.5px 28px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--model-haiku), var(--model-haiku)) 100% 100% / 1.5px 28px no-repeat;
}

.hud-panel.hud-yellow::before {
  background:
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 0 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 0 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 100% 0 / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 100% 0 / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 0 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 0 100% / 1.5px 28px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 100% 100% / 28px 1.5px no-repeat,
    linear-gradient(var(--feedback-caution), var(--feedback-caution)) 100% 100% / 1.5px 28px no-repeat;
}

/* ============================================================
   Bento Grid — dashboard showcase
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.bento-card {
  padding: var(--space-2xl);
  overflow: hidden;
}

@media (min-width: 769px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-card.wide { grid-column: span 2; }
}

.bento-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.bento-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 480px;
}

/* ============================================================
   Terminal / Mock UI — mission control console
   ============================================================ */

.terminal {
  margin-top: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Scan line — static accent line at top of terminal */
.terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(84,174,229,0.15) 50%, transparent 90%);
  pointer-events: none;
  z-index: 2;
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--surface-border);
}

.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-quaternary);
}

.terminal-dot:nth-child(1) { background: #F26673; }
.terminal-dot:nth-child(2) { background: #F2BF4D; }
.terminal-dot:nth-child(3) { background: #59D18C; }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
  margin-left: auto;
}

.terminal-body {
  padding: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
  overflow-x: auto;
}

/* Session rows in the terminal */
.session-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.015);
  transition: background 0.15s ease;
}

.session-row:hover {
  background: rgba(255,255,255,0.03);
}

.session-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.session-dot.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.3;
}

.session-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  flex: 1;
  color: var(--text-primary);
}

.session-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
}

/* Trail / engine glow on active sessions */
.session-row.attention {
  border-left: 2px solid var(--status-permission);
  box-shadow: inset 3px 0 12px rgba(242,140,107,0.06);
}

.session-row.working-row {
  border-left: 2px solid var(--status-working);
  box-shadow: inset 3px 0 12px rgba(84,174,229,0.06);
}

/* ============================================================
   Command line in terminal
   ============================================================ */

.cmd-line {
  padding: 3px 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: nowrap;
}

.cmd-line .prompt { color: var(--feedback-positive); }
.cmd-line .cmd { color: var(--text-primary); }
.cmd-line .flag { color: var(--accent); }
.cmd-line .path { color: var(--feedback-caution); }
.cmd-line .comment { color: var(--text-quaternary); font-style: italic; }

/* ============================================================
   Feature Grid
   ============================================================ */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 601px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 901px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  padding: var(--space-2xl);
  text-align: center;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-xl);
  font-size: 20px;
  position: relative;
}

.feature-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover .feature-icon::after {
  opacity: 1;
}

.feature-icon.blue {
  background: rgba(84,174,229,0.1);
  color: var(--accent);
}
.feature-icon.blue::after { box-shadow: 0 0 20px rgba(84,174,229,0.2); }

.feature-icon.purple {
  background: rgba(179,115,242,0.1);
  color: var(--model-opus);
}
.feature-icon.purple::after { box-shadow: 0 0 20px rgba(179,115,242,0.2); }

.feature-icon.green {
  background: rgba(89,209,140,0.1);
  color: var(--feedback-positive);
}
.feature-icon.green::after { box-shadow: 0 0 20px rgba(89,209,140,0.2); }

.feature-icon.orange {
  background: rgba(242,140,107,0.1);
  color: var(--status-permission);
}
.feature-icon.orange::after { box-shadow: 0 0 20px rgba(242,140,107,0.2); }

.feature-icon.teal {
  background: rgba(77,217,204,0.1);
  color: var(--model-haiku);
}
.feature-icon.teal::after { box-shadow: 0 0 20px rgba(77,217,204,0.2); }

.feature-icon.yellow {
  background: rgba(242,191,77,0.1);
  color: var(--feedback-caution);
}
.feature-icon.yellow::after { box-shadow: 0 0 20px rgba(242,191,77,0.2); }

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ============================================================
   Platforms — orbital dock visualization
   ============================================================ */

.platform-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 769px) {
  .platform-grid { grid-template-columns: repeat(3, 1fr); }
}

.platform-card {
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.platform-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.platform-icon svg {
  width: 36px;
  height: 36px;
}

/* Orbital ring around platform icons */
.platform-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.12);
}

.platform-icon::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  top: -6px;
  left: 50%;
  margin-left: -2px;
}

.platform-card:nth-child(2) .platform-icon::after {
  background: var(--model-opus);
  box-shadow: 0 0 6px var(--model-opus);
}

.platform-card:nth-child(3) .platform-icon::before,
.platform-card:nth-child(3) .platform-icon::after {
  animation-duration: 12s;
}

.platform-card:nth-child(3) .platform-icon::after {
  background: var(--feedback-positive);
  box-shadow: 0 0 6px var(--feedback-positive);
}

.platform-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.platform-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 260px;
  margin: 0 auto;
}

/* ============================================================
   Hero Screenshot — floating macOS app frame
   ============================================================ */

.hero-screenshot {
  margin-top: 48px;
  width: 100%;
  max-width: 960px;
  position: relative;
  z-index: 2;
  perspective: 1200px;
}

@media (min-width: 601px) {
  .hero-screenshot {
    margin-top: 80px;
  }
}

.hero-screenshot-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transform: rotateX(2deg);
  transition: transform 0.5s var(--ease-out);
}

.hero-screenshot:hover .hero-screenshot-img {
  transform: rotateX(0deg);
}

/* ============================================================
   Device Frames — iOS
   ============================================================ */

/* Phone frame */
.phone-frame {
  width: 280px;
  flex-shrink: 0;
  border-radius: 44px;
  border: 3px solid rgba(255,255,255,0.1);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.5),
    0 0 1px rgba(255,255,255,0.1),
    0 0 60px rgba(179,115,242,0.05);
  position: relative;
}

.phone-screen {
  aspect-ratio: 9 / 19.5;
  position: relative;
  overflow: hidden;
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Native App Showcase — macOS + iOS side by side
   ============================================================ */

/* Mobile-first: column layout, centered */
.app-showcase {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: var(--space-3xl);
}

.app-showcase-text {
  flex: 1;
  min-width: 0;
}

.app-showcase-text .section-label {
  justify-content: center;
}

.app-showcase-text .section-sub {
  margin-left: auto;
  margin-right: auto;
}

.app-showcase-devices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  width: 100%;
}

.showcase-mac-screenshot {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  border-radius: 8px;
}

.app-showcase .phone-frame {
  width: 220px;
  border-radius: 36px;
  margin-top: 0;
}

/* Feature list under the showcase */
.showcase-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  align-items: center;
}

.showcase-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.showcase-feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Tablet: devices side-by-side */
@media (min-width: 601px) {
  .app-showcase-devices {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .app-showcase .phone-frame {
    margin-top: 0;
  }
}

/* Desktop: row layout, text left-aligned */
@media (min-width: 901px) {
  .app-showcase {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-4xl);
  }

  .app-showcase-text .section-label {
    justify-content: flex-start;
  }

  .app-showcase-text .section-sub {
    margin-left: 0;
    margin-right: 0;
  }

  .app-showcase-devices {
    flex-shrink: 0;
    width: auto;
  }

  .showcase-mac-screenshot {
    max-width: none;
    width: 420px;
  }

  .showcase-features {
    align-items: flex-start;
  }
}

/* ============================================================
   Install Section — Launch Sequence
   ============================================================ */

.install-terminal {
  max-width: 680px;
  margin: 0 auto;
}

.install-terminal .terminal {
  border: 1px solid rgba(84,174,229,0.12);
}

.install-terminal .terminal::after {
  /* Override scan line with green for "go" */
  background: linear-gradient(90deg, transparent 10%, rgba(89,209,140,0.3) 50%, transparent 90%);
  box-shadow: 0 0 12px rgba(89,209,140,0.15);
}

/* ============================================================
   CTA Banner — Cosmic finale
   ============================================================ */

.cta-banner {
  text-align: center;
  padding: 80px var(--space-lg);
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) {
  .cta-banner {
    padding: 120px var(--space-xl);
  }
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background:
    radial-gradient(ellipse 100% 100%, rgba(84,174,229,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80%, rgba(179,115,242,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
  position: relative;
}

.cta-banner p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-3xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.cta-banner .hero-actions {
  position: relative;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--surface-border);
  padding: 32px var(--space-lg);
}

@media (min-width: 769px) {
  .site-footer {
    padding: 40px var(--space-xl);
  }
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

@media (min-width: 601px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-brand a {
  color: var(--text-quaternary);
  text-decoration: none;
}

.footer-brand a:hover {
  color: var(--text-secondary);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
}

@media (min-width: 601px) {
  .footer-links {
    gap: var(--space-xl);
    justify-content: flex-end;
  }
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-links a:hover {
  color: var(--text-secondary);
}

/* ============================================================
   Scroll Reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.35s; }

/* ============================================================
   Prose / Legal pages
   ============================================================ */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 100px var(--space-lg) 60px;
}

@media (min-width: 769px) {
  .prose {
    padding: 130px var(--space-xl) 80px;
  }
}

.prose h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-sm);
}

.prose .last-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3xl);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.prose p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.prose ul, .prose ol {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.prose li { margin-bottom: var(--space-sm); }

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(84,174,229,0.3);
}

.prose a:hover {
  text-decoration-color: var(--accent);
}

.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prose code {
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============================================================
   About page
   ============================================================ */

.about-hero {
  padding: 100px var(--space-lg) 40px;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .about-hero {
    padding: 150px var(--space-xl) 60px;
  }
}

.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2xl);
}

.about-hero p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

/* ============================================================
   Support page
   ============================================================ */

.support-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 var(--space-lg);
}

@media (min-width: 601px) {
  .support-options {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--space-xl);
  }
}

.support-card {
  padding: var(--space-2xl);
  text-align: center;
}

.support-card .icon {
  font-size: 28px;
  margin-bottom: var(--space-lg);
}

.support-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.support-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   Grain Overlay — analog warmth
   ============================================================ */

/* Grain overlay removed — mix-blend-mode: overlay at 0.025 opacity
   was imperceptible but forced a full-page compositing layer. */

/* ============================================================
   Mini Diff — code review bento card
   ============================================================ */

.mini-diff {
  margin-top: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}

.diff-file {
  padding: 8px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-tertiary);
  font-size: 11px;
}

.diff-lines {
  padding: 6px 0;
}

.diff-line {
  padding: 1px 14px;
  display: flex;
  gap: 10px;
}

.diff-line.removed {
  background: rgba(77,31,31,0.25);
}

.diff-line.added {
  background: rgba(31,66,38,0.25);
}

.diff-prefix {
  flex-shrink: 0;
  width: 12px;
  user-select: none;
}

.diff-line.removed .diff-prefix { color: #FF8080; }
.diff-line.added .diff-prefix { color: #66F280; }
.diff-line.context .diff-prefix { color: var(--text-quaternary); }

.diff-line .code {
  color: var(--text-secondary);
}

.diff-line.removed .code { color: rgba(255,128,128,0.8); }
.diff-line.added .code { color: rgba(102,242,128,0.8); }

.diff-comment-inline {
  margin: 6px 14px 10px;
  padding: 8px 12px;
  background: rgba(179,115,242,0.06);
  border-left: 2px solid var(--model-opus);
  border-radius: 0 2px 2px 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.diff-comment-inline .author {
  color: var(--model-opus);
  font-weight: 600;
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   Mock Approval — approval triage bento card
   ============================================================ */

.mock-approval {
  margin-top: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.approval-header {
  padding: 8px 14px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

.approval-tool {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: 1px solid var(--surface-border);
}

.approval-tool-icon {
  color: var(--feedback-positive);
  flex-shrink: 0;
  margin-top: 1px;
}

.approval-tool-cmd {
  color: var(--text-primary);
  word-break: break-all;
}

.approval-risk {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 2px;
}

.risk-badge.normal {
  background: rgba(84,174,229,0.12);
  color: var(--accent);
}

.risk-badge.high {
  background: rgba(242,102,115,0.12);
  color: var(--feedback-negative);
}

.approval-keys {
  display: flex;
  gap: 6px;
}

.key-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-quaternary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.key-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.key-hint.approve kbd {
  border-color: rgba(89,209,140,0.25);
  color: var(--feedback-positive);
}

.key-hint.deny kbd {
  border-color: rgba(242,102,115,0.25);
  color: var(--feedback-negative);
}

/* ============================================================
   Mock Servers — multi-server bento card
   ============================================================ */

.mock-servers {
  margin-top: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.mock-server-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: 1px solid var(--surface-border);
}

.mock-server-row:last-child {
  border-bottom: none;
}

.server-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.server-status.online {
  background: var(--feedback-positive);
  box-shadow: 0 0 8px var(--feedback-positive);
}

.server-name {
  color: var(--text-primary);
  font-weight: 700;
}

.server-detail {
  color: var(--text-tertiary);
  font-size: 11px;
  margin-left: auto;
}

/* ============================================================
   Mock Mission — mission control bento card
   ============================================================ */

.mock-mission {
  margin-top: var(--space-xl);
  background: var(--bg-code);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  overflow: hidden;
}

.mission-stats {
  display: flex;
  border-bottom: 1px solid var(--surface-border);
}

.mission-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--surface-border);
}

.mission-stat:last-child {
  border-right: none;
}

.mission-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.mission-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mission-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.mission-agent-name {
  color: var(--text-primary);
}

.mission-steer {
  margin-left: auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   Blinking Cursor
   ============================================================ */

.cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--feedback-positive);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  opacity: 0.8;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ============================================================
   Section Atmosphere — gradient washes between sections
   ============================================================ */

.section-atmosphere {
  position: relative;
  pointer-events: none;
  height: 200px;
  margin-top: -100px;
  margin-bottom: -100px;
}

.section-atmosphere.cyan {
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(84,174,229,0.03) 0%, transparent 70%);
}

.section-atmosphere.purple {
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(179,115,242,0.025) 0%, transparent 70%);
}

.section-atmosphere.warm {
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(242,140,107,0.02) 0%, transparent 70%);
}

/* ============================================================
   CTA Orbital Ring
   ============================================================ */

.cta-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(84,174,229,0.06);
  transform: rotate(-18deg);
  pointer-events: none;
}

.cta-orbit .craft {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 30px rgba(84,174,229,0.2);
  top: -2px;
  left: 50%;
  margin-left: -2px;
}

.cta-orbit-2 {
  width: 380px;
  height: 180px;
  border-color: rgba(179,115,242,0.04);
  transform: rotate(12deg);
}

.cta-orbit-2 .craft {
  background: var(--model-opus);
  box-shadow: 0 0 8px var(--model-opus), 0 0 20px rgba(179,115,242,0.2);
}

/* ============================================================
   Feature card color-matched hover glow
   ============================================================ */

.feature-card:hover.hud-panel { box-shadow: none; }
.feature-card .hud-panel:hover { box-shadow: none; }

.hud-panel.feature-card:hover {
  box-shadow: 0 0 40px rgba(84,174,229,0.06);
}

.hud-panel.hud-purple.feature-card:hover {
  box-shadow: 0 0 40px rgba(179,115,242,0.06);
}

.hud-panel.hud-green.feature-card:hover {
  box-shadow: 0 0 40px rgba(89,209,140,0.06);
}

.hud-panel.hud-orange.feature-card:hover {
  box-shadow: 0 0 40px rgba(242,140,107,0.06);
}

.hud-panel.hud-teal.feature-card:hover {
  box-shadow: 0 0 40px rgba(77,217,204,0.06);
}

.hud-panel.hud-yellow.feature-card:hover {
  box-shadow: 0 0 40px rgba(242,191,77,0.06);
}

/* ============================================================
   Reduced Motion
   ============================================================ */

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

  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}