/* ============================================================
   LANDING ZONE — night-mode outreach command center
   Type:  Michroma (aerospace labels) / Saira (display+body)
          IBM Plex Mono (telemetry & data)
   ============================================================ */

:root {
  --bg-0: #05030d;
  --bg-1: #080516;
  --bg-2: #100824;
  --deep: #1b0b3a;
  --panel: #100a20;
  --panel-2: #17102e;
  --line: rgba(168, 85, 247, 0.22);
  --line-bright: rgba(168, 85, 247, 0.5);

  --text: #f0ecfb;
  --muted: #c4b5fd;   /* soft lavender */
  --dim: #b6b0d2;     /* muted lavender-gray — lightened so it holds AA even on translucent panels */

  /* light-mode app frame (the real product UI is light) */
  --app-bg: #ffffff;
  --app-surface: #f9fafb;
  --app-line: #e5e7eb;
  --app-text: #111827;
  --app-dim: #6b7280;
  --app-accent: #2563eb;
  --app-accent-soft: #eff6ff;
  --app-green: #16a34a;
  --app-amber: #d97706;

  --accent: #a855f7;  /* bright accent purple */
  --violet: #8b5cf6;  /* electric purple */
  --magenta: #d946ef;
  --amber: #ffb454;
  --green: #4fe3a4;   /* reserved: live-status dot + panel traffic lights only */
  --red: #ff6a7a;

  --glow: 0 0 24px rgba(139, 92, 246, 0.45);
  --radius: 10px;
  --nav-h: 64px;

  --font-display: "Saira", sans-serif;
  --font-label: "Michroma", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(139, 92, 246, 0.3); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- starfield canvas ---------- */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

main, .nav, .footer, .mobile-menu { position: relative; z-index: 1; }

/* ---------- shared atoms ---------- */
.container {
  width: min(1180px, 92vw);
  margin: 0 auto;
}
.container-narrow { width: min(820px, 92vw); }

.section { padding: clamp(90px, 12vh, 150px) 0; position: relative; }
/* tighter rhythm for mid-page feature sections — less empty vertical space */
.section-tight { padding: clamp(56px, 8vh, 96px) 0; }
/* banded background — visual separation between long dark sections */
.band {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.seq-label {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.seq-label::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.7;
}

.section-h2 {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.section-sub {
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 28px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 11px 22px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

.btn-primary {
  /* lava-lamp surface: palindromic stops + linear pan, fuchsia core —
     same deep-violet↔fuchsia travel as the hero headline */
  background: linear-gradient(110deg,
    #7c3aed 0%, #a855f7 25%, #e879f9 50%, #a855f7 75%, #7c3aed 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4), var(--glow);
  animation: ctaLava 7s linear infinite, ctaPulse 3.6s ease-in-out infinite;
}
@keyframes ctaLava {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.45), 0 0 24px rgba(168, 85, 247, 0.5); }
  50% { box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.6), 0 0 50px rgba(168, 85, 247, 0.75); }
}
.btn-primary:hover {
  transform: translateY(-2px);
  /* keep the lava flowing; drop only the pulse so the strong hover glow can lock in
     (a running box-shadow animation would override the hover shadow) */
  animation: ctaLava 7s linear infinite;
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.75), 0 0 54px rgba(168, 85, 247, 0.8);
}

.btn-outline {
  border-color: var(--line-bright);
  color: var(--text);
  background: rgba(22, 13, 44, 0.45);
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.18);
  transform: translateY(-2px);
}

.btn-ghost { color: var(--muted); padding: 11px 14px; }
.btn-ghost:hover { color: var(--text); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.link-arrow:hover { text-shadow: 0 0 12px rgba(139, 92, 246, 0.6); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(9, 5, 22, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* deep pages have no hero behind the nav — keep it solid from the top */
.nav-solid {
  background: rgba(9, 5, 22, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  height: var(--nav-h);
  width: min(1280px, 94vw);
  margin: 0 auto;
  /* three-zone layout: equal 1fr side columns keep the center nav
     truly centered in the viewport, independent of brand/CTA widths */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
}
.brand-mark { color: var(--accent); display: grid; place-items: center; }
.brand-word {
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: 0.22em;
}

.nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 26px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s ease;
}
.nav-links a:hover::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { right: 0; opacity: 0.6; }

.nav-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 22px; }

.nav-burger {
  grid-column: 3;
  justify-self: end;
  display: none;
  background: none;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 49;
  background: rgba(5, 3, 13, 0.97);
  backdrop-filter: blur(10px);
  padding: 34px 6vw;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 22px; }
.mobile-menu a {
  font-size: 19px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.mobile-menu a.btn { border-bottom: none; justify-content: center; margin-top: 8px; color: #fff; }

/* ---------- HUD frame ---------- */
.hud-frame { position: absolute; inset: 22px; pointer-events: none; z-index: 3; }
.hud-c {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(168, 85, 247, 0.65);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
}
.hud-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hud-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hud-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hud-br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* Full-viewport hero: the cockpit video covers the entire 100svh (uncropped
     top), while the content group stays top-aligned in the upper third via
     justify-content:flex-start + the header-clearing top padding. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + clamp(48px, 10vh, 108px)) 6vw clamp(64px, 10vh, 120px);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* CSS night-sky fallback — visible if video missing or reduced motion */
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 78% 20%, rgba(217, 70, 239, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 18% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #03050b 0%, #060b18 55%, #0a1226 100%);
}

/* faint HUD grid over the media */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, black 30%, transparent 75%);
}

/* keeps text readable over any video — darkens the TEXT ZONE, not the whole frame */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    /* focused dark pool over the headline / sub / CTA band */
    radial-gradient(ellipse 64% 54% at 50% 45%,
      rgba(3, 2, 10, 0.84) 0%,
      rgba(4, 2, 12, 0.62) 34%,
      rgba(5, 3, 13, 0.22) 62%,
      transparent 100%),
    /* vertical wash: nav legibility up top, clean blend into the page below.
       The 34%–62% mid-band stays transparent so the video reads at the edges */
    linear-gradient(180deg,
      rgba(5, 3, 13, 0.82) 0%,
      rgba(5, 3, 13, 0.24) 16%,
      transparent 34%,
      transparent 62%,
      var(--bg-0) 100%);
}

.hero-content { position: relative; z-index: 2; max-width: 880px; }
/* soft violet "instrument glow" pooled behind the headline — depth, not a hard panel */
.hero-content::before {
  content: "";
  position: absolute;
  inset: -16% -10% -24%;
  z-index: -1;
  background: radial-gradient(ellipse 62% 54% at 50% 40%,
    rgba(124, 58, 237, 0.24) 0%,
    rgba(139, 92, 246, 0.09) 42%,
    transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

.hero-h1 {
  font-size: clamp(42px, 7.6vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
  /* dark shadow carries contrast over the video; the violet bloom adds the premium glow */
  text-shadow:
    0 2px 26px rgba(2, 1, 8, 0.9),
    0 0 72px rgba(124, 58, 237, 0.42);
}
.hero-h1 em {
  font-style: normal;
  font-weight: 700;
  /* lava-lamp gradient, same structure as the live landingzone.co hero:
     PALINDROMIC stops (A·B·C·B·A) with the HOT, lightest color at the center,
     panned at constant (linear) speed over a 200% strip. The symmetric ramp
     makes the ping-pong read as one continuous flow, and the bright core
     guarantees the middle of the word is never dark at any phase.
     Colors are lifted for the dark bg (the live site's deep violet would
     vanish here). Reduced motion freezes the first frame. */
  /* deep violet ends ↔ fuchsia core: dramatic value travel, no white, no rose */
  background: linear-gradient(90deg,
    #7c3aed 0%, #a855f7 25%, #e879f9 50%, #a855f7 75%, #7c3aed 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* CRITICAL: text-shadow paints OVER background-clip:text fills (the ink is
     transparent), so the h1's inherited dark shadow was washing the gradient
     out. Kill it and do contrast + bloom with drop-shadow, which renders
     behind the glyph silhouette. */
  text-shadow: none;
  /* dark edge only — no glow halo behind the word */
  filter: drop-shadow(0 2px 6px rgba(2, 1, 8, 0.9));
  animation: heroGradient 7s linear infinite;
}
@keyframes heroGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  /* weight 400 (body is 300): thicker strokes read whiter over the video */
  font-weight: 400;
  color: #fff;
  max-width: 640px;
  margin: 0 auto 10px;
  text-shadow:
    0 1px 4px rgba(2, 1, 8, 0.95),
    0 2px 20px rgba(2, 1, 8, 0.85);
}
.hero-sub2 {
  font-size: 15px;
  font-weight: 400;
  /* near-white (not lavender) so it stays readable over the video */
  color: var(--text);
  margin-bottom: 38px;
  text-shadow:
    0 1px 4px rgba(2, 1, 8, 0.95),
    0 2px 16px rgba(2, 1, 8, 0.85);
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

/* ============================================================
   WALKTHROUGH (sticky cinematic)
   ============================================================ */
.walkthrough {
  position: relative;
  /* 6 stages — JS maps scroll progress to stages. ~60vh of scroll per stage:
     short enough to feel quick, long enough that stages don't flash past */
  height: 456vh;
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
}

.wt-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-rail {
  position: absolute;
  left: clamp(14px, 3.4vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 30px;
  list-style: none;
}
/* each rail item is a real <button> — keyboard-operable (Enter/Space for free) */
.wt-rail button {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.4;
  transition: opacity 0.4s ease;
  cursor: pointer;
  padding: 2px;
}
.wt-rail button.active,
.wt-rail button[aria-current="step"] { opacity: 1; }
.wt-rail button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
  opacity: 1;
}
.wt-rail b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  width: 28px; height: 28px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  flex-shrink: 0;
}
.wt-rail button.active b,
.wt-rail button[aria-current="step"] b {
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.45);
}
.wt-rail span {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
}

.wt-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(168, 85, 247, 0.1);
  z-index: 5;
}
.wt-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.7);
}

/* stages */
.wt-stage {
  position: absolute;
  inset: 0;
  display: grid;
  /* visual column is intentionally the dominant object on desktop */
  grid-template-columns: minmax(290px, 400px) minmax(440px, 720px);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  justify-content: center;
  /* extra left padding clears the numbered progress rail (labels included) */
  padding: 0 clamp(40px, 6vw, 96px) 0 clamp(120px, 15.5vw, 236px);
  /* Crossfade handoff model (fixes overlapping transition text):
     - idle stages are snapped invisible with NO transition (fast multi-stage
       scroll jumps never leave several stages mid-fade)
     - the single outgoing stage (.is-exiting, set by JS) fades out FAST and
       sits BELOW on z-index
     - the incoming stage (.is-active) fades in slightly DELAYED on top, so
       two stages' copy is never simultaneously legible */
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: translateY(7vh) scale(0.975);
  will-change: opacity, transform;
  z-index: 1;
}
.wt-stage.is-exiting {
  transition: opacity 0.22s ease, transform 0.4s ease;
  opacity: 0;
}
.wt-stage.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  z-index: 2;
  transition:
    opacity 0.45s ease 0.14s,
    transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) 0.14s;
}
.wt-stage.is-before {
  opacity: 0;
  transform: translateY(-7vh) scale(1.02);
}

.stage-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  margin-bottom: 18px;
}
.wt-copy h3 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.tick-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 15.5px;
}
.tick-list li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-size: 12px;
  top: 3px;
}

/* ---------- product panels (mock UI) ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid rgba(168, 85, 247, 0.6);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(217, 70, 239, 0.16),
    0 0 30px rgba(168, 85, 247, 0.28),
    0 0 90px rgba(139, 92, 246, 0.18);
}

/* violet/magenta bloom behind each walkthrough mockup — instrument-panel backlighting */
.wt-visual { position: relative; }
.wt-visual::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(ellipse 72% 68% at 58% 52%,
    rgba(124, 58, 237, 0.42) 0%,
    rgba(217, 70, 239, 0.18) 44%,
    transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}

.panel-3d {
  transform: perspective(1700px) rotateY(-9deg) rotateX(3deg);
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.wt-stage.is-active .panel-3d:hover {
  transform: perspective(1700px) rotateY(-3deg) rotateX(1deg) scale(1.015);
}
/* glassy screen reflection across the top-left of the mockup */
.panel-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 16%,
    transparent 40%);
  pointer-events: none;
  z-index: 3;
}

/* ---------- stage activation motion (light app frames) ----------
   nav press + page load inside the frame. .is-active re-toggles per stage,
   so these replay on every stage change. Killed by the reduced-motion clamp. */
.wt-stage.is-active .afs-item.is-active {
  animation: sidePress 0.55s ease 0.1s backwards;
}
@keyframes sidePress {
  0% { filter: brightness(1.35); transform: translateX(3px); }
  100% { filter: none; transform: none; }
}
.wt-stage.is-active .app-frame-main,
.wt-stage.is-active .app-shot img {
  animation: pageIn 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) 0.22s backwards;
}
@keyframes pageIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(4, 2, 10, 0.65);
}
.panel-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.2);
}
.panel-bar i:first-child { background: rgba(255, 106, 122, 0.5); }
.panel-bar i:nth-child(2) { background: rgba(255, 180, 84, 0.5); }
.panel-bar i:nth-child(3) { background: rgba(79, 227, 164, 0.5); }
.panel-bar span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-left: 8px;
}

/* ============================================================
   LIGHT APP FRAME — the real product UI is light-mode.
   Two content types live under a dark cockpit .panel-bar bezel:
   1) .app-shot  — a real product screenshot <img> (drop-in ready)
   2) .app-frame — a hand-built light mock (sidebar + main) used only
      where no screenshot exists yet; same aspect ratio, swap-ready.
   ============================================================ */
.app-shot {
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: var(--app-bg);
}
.app-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.app-frame {
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-display);
  font-weight: 400;
  text-align: left;
}
.app-frame-side {
  flex: 0 0 124px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 0 10px;
  border-right: 1px solid var(--app-line);
  background: var(--app-bg);
}
.afs-item {
  font-size: 11px;
  color: var(--app-dim);
  padding: 6px 14px;
  white-space: nowrap;
}
.afs-item.is-active {
  color: var(--app-accent);
  background: var(--app-accent-soft);
  box-shadow: inset 2px 0 0 var(--app-accent);
  font-weight: 600;
}
.afs-group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-dim);
  padding: 12px 14px 4px;
  white-space: nowrap;
}

.app-frame-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--app-surface);
  overflow: hidden;
}
.af-title { font-size: 14px; font-weight: 600; color: var(--app-text); }
.af-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.af-input {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--app-dim);
  background: var(--app-bg);
  white-space: nowrap;
  overflow: hidden;
}
.af-btn {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--app-accent);
  border-radius: 6px;
  padding: 6px 14px;
  white-space: nowrap;
}
.af-btn.ghost { color: var(--app-accent); background: var(--app-accent-soft); }
.af-table {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-bg);
}
.af-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--app-line);
  font-size: 11.5px;
  color: var(--app-text);
}
.af-row:last-child { border-bottom: none; }
.af-row.head {
  background: var(--app-surface);
  color: var(--app-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.af-row b { font-weight: 600; }
.af-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-row .sub { color: var(--app-dim); font-size: 10.5px; }
.af-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}
.af-badge.ok { color: var(--app-green); background: rgba(22, 163, 74, 0.1); }
.af-badge.warn { color: var(--app-amber); background: rgba(217, 119, 6, 0.12); }
.af-badge.dim { color: var(--app-dim); background: var(--app-surface); border: 1px solid var(--app-line); }
.af-badge.info { color: var(--app-accent); background: var(--app-accent-soft); }
.af-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.af-stat {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--app-bg);
}
.af-stat b { display: block; font-size: 17px; font-weight: 600; color: var(--app-text); line-height: 1.2; }
.af-stat span { font-size: 10px; color: var(--app-dim); }
.af-note { font-size: 10.5px; color: var(--app-dim); }

/* ============================================================
   NEW MARKETING SECTION SHELLS
   ============================================================ */
/* two entry paths */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.path-card {
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: var(--radius);
  padding: 30px 28px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.6), rgba(16, 10, 32, 0.35));
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 20px rgba(168, 85, 247, 0.22);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.path-card:hover {
  border-color: rgba(217, 70, 239, 0.7);
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.45), 0 0 34px rgba(168, 85, 247, 0.32);
}
.path-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid var(--line-bright);
  background: rgba(139, 92, 246, 0.08);
  border-radius: 100px;
  padding: 4px 13px;
  margin-bottom: 16px;
}
.path-card h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.path-card p { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.path-card ul { display: grid; gap: 8px; margin-bottom: 18px; }
.path-card ul li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14px;
}
.path-card ul li::before { content: "▸"; position: absolute; left: 2px; top: 2px; color: var(--accent); font-size: 11px; }

/* channels */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.channel-card {
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.5), transparent);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.14);
}
.channel-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.channel-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.channel-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 12px;
}
.channel-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(79, 227, 164, 0.7);
}
.channel-soon {
  margin-top: 30px;
  border: 1px dashed rgba(255, 180, 84, 0.4);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  background: rgba(255, 180, 84, 0.03);
}
.channel-soon h3 {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.channel-soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.channel-soon h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.channel-soon p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* status pills — amber for anything not fully live */
.status-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--amber);
  border: 1px solid rgba(255, 180, 84, 0.45);
  background: rgba(255, 180, 84, 0.08);
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

/* docs / learning-center cards */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.docs-card {
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.5), rgba(16, 10, 32, 0.3));
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.14);
  display: block;
}
.docs-card:hover {
  border-color: rgba(217, 70, 239, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.28);
}
.docs-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.docs-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }

/* ============================================================
   START-TRIAL FLOW (public signup: /start-trial)
   ============================================================ */
.st-shell {
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 0 90px;
}
.st-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 34px;
}
.st-steps li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
}
.st-steps li[aria-current="step"] {
  color: var(--accent);
  border-color: var(--line-bright);
  background: rgba(139, 92, 246, 0.08);
}
.st-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(16, 10, 32, 0.55);
  padding: clamp(24px, 4vw, 36px);
}
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-label {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
}
.form-input {
  width: 100%;
  background: var(--bg-1);
  color: var(--text);
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
}
.form-input::placeholder { color: var(--dim); }
.form-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-hint { font-size: 12px; color: var(--dim); }

.banner {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid;
}
.banner-error { color: #ffb3bc; border-color: rgba(255, 106, 122, 0.45); background: rgba(255, 106, 122, 0.08); }
.banner-info { color: var(--amber); border-color: rgba(255, 180, 84, 0.4); background: rgba(255, 180, 84, 0.07); }
.banner a { color: var(--accent); }
.banner[hidden] { display: none; }

.mock-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--amber);
  border: 1px dashed rgba(255, 180, 84, 0.5);
  border-radius: 7px;
  padding: 8px 14px;
  margin-bottom: 18px;
  text-align: center;
}
.mock-banner[hidden] { display: none; }

/* plan selection */
.st-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 8px 0 20px;
}
.st-plan {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.55), rgba(16, 10, 32, 0.35));
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.st-plan[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 26px rgba(168, 85, 247, 0.3);
}
.st-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.st-plan h3 { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-plan .st-price { font-size: 30px; font-weight: 600; margin: 8px 0 12px; }
.st-plan .st-price span { font-size: 14px; font-weight: 300; color: var(--dim); }
.st-plan ul { display: grid; gap: 7px; }
.st-plan li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--muted);
}
.st-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-size: 12px; }
.st-flag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  padding: 3px 10px;
  border-radius: 100px;
}

.st-billing-note {
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(139, 92, 246, 0.07);
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.st-billing-note b { color: var(--text); }

.st-terms-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--muted);
  margin: 18px 0;
  cursor: pointer;
}
.st-terms-check input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* confirmation states */
.st-state { text-align: center; padding: 20px 0; }
.st-state .spinner {
  width: 26px; height: 26px;
  border: 3px solid rgba(168, 85, 247, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: stSpin 0.9s linear infinite;
}
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-state h2 { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.st-state p { color: var(--muted); font-size: 15px; max-width: 480px; margin: 0 auto 10px; }
.st-state[hidden] { display: none; }
.st-ok-dot {
  width: 44px; height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green);
  border: 1px solid rgba(79, 227, 164, 0.5);
  background: rgba(79, 227, 164, 0.08);
  font-size: 20px;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .st-state .spinner { animation: none; }
}

/* trial disclosure */
.trial-terms {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(16, 10, 32, 0.5);
  padding: 26px 28px 22px;
  margin: 40px auto 0;
  max-width: 780px;
}
.trial-terms h3 {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.trial-terms ul { display: grid; gap: 9px; }
.trial-terms li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.trial-terms li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-size: 12px; }
.trial-terms p { font-size: 13px; color: var(--dim); margin-top: 14px; }
.trial-terms a { color: var(--accent); }

/* ============================================================
   FRAMEWORK — Discover / Engage / Close
   ============================================================ */
.fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 50px;
  position: relative;
}
.fw-grid::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
}

.fw-card {
  background: linear-gradient(180deg, rgba(24, 14, 48, 0.7), rgba(16, 10, 32, 0.45));
  /* outline glow is on by default — hover only intensifies it */
  border: 1px solid rgba(168, 85, 247, 0.55);
  border-radius: var(--radius);
  padding: 34px 30px;
  position: relative;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(168, 85, 247, 0.26),
    inset 0 0 22px rgba(139, 92, 246, 0.07);
}
/* ambient violet/magenta glow pooled beneath each card — instrument-panel lighting */
.fw-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 82%;
  height: 70px;
  background: radial-gradient(ellipse at center,
    rgba(139, 92, 246, 0.40) 0%,
    rgba(217, 70, 239, 0.14) 45%,
    transparent 72%);
  filter: blur(26px);
  opacity: 0.7;
  z-index: -1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.fw-card:hover {
  border-color: rgba(217, 70, 239, 0.75);
  transform: translateY(-6px);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(168, 85, 247, 0.4),
    inset 0 0 26px rgba(139, 92, 246, 0.1);
}
.fw-card:hover::after { opacity: 1; }
.fw-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--bg-1);
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.fw-card h3 {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 12px;
}
.fw-card p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.fw-points li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.fw-points li::before { content: "+ "; color: var(--accent); }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 50px;
}
.cap-card {
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.55), rgba(16, 10, 32, 0.35));
  border: 1px solid rgba(168, 85, 247, 0.48);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(168, 85, 247, 0.22);
}
.cap-card:hover {
  border-color: rgba(217, 70, 239, 0.7);
  /* downward-offset violet shadow reads as a soft glow pooling under the card;
     box-shadow renders behind the 3D-tilted card, where a pseudo-element can't */
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.48),
    0 14px 36px rgba(168, 85, 247, 0.35);
}
.cap-ico {
  font-style: normal;
  font-size: 19px;
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.05);
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
}
.cap-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 7px; }
.cap-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ============================================================
   INTELLIGENCE
   ============================================================ */
.intelligence {
  background:
    radial-gradient(ellipse 55% 70% at 85% 50%, rgba(139, 92, 246, 0.12) 0%, transparent 70%),
    var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intel-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 540px);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.intel-table table {
  width: 100%;
  border-collapse: collapse;
}
.intel-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.intel-table tr:last-child td { border-bottom: none; }
.intel-table tr:hover td { background: rgba(139, 92, 246, 0.03); }
.intel-table td:last-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.intel-table td b { color: var(--accent); font-size: 15px; }

/* ============================================================
   COMPLIANCE
   ============================================================ */
.comp-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(300px, 1fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.comp-checks { padding: 10px 0; }
.comp-checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}
.comp-checks li:last-child { border-bottom: none; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124, 58, 237, 0.16) 0%, transparent 70%),
    var(--bg-0);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(290px, 480px));
  gap: 24px;
  justify-content: center;
  margin-top: 54px;
}
.price-card {
  position: relative;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.65), rgba(16, 10, 32, 0.45));
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 14px;
  padding: 38px 34px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 26px rgba(168, 85, 247, 0.18);
}
.price-featured {
  border-color: rgba(217, 70, 239, 0.65);
  box-shadow: 0 0 54px rgba(168, 85, 247, 0.28), 0 30px 70px rgba(0, 0, 0, 0.45);
}
.price-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.22em;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: #fff;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.price-head { margin-bottom: 24px; }
.price-card h3 {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.price-amount {
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.price-amount span {
  font-size: 17px;
  font-weight: 300;
  color: var(--dim);
}
.price-card .tick-list { flex: 1; margin-bottom: 26px; }
.price-card .tick-list li { font-size: 14.5px; margin-bottom: 11px; }
.price-note {
  font-size: 12.5px;
  color: var(--dim);
  text-align: center;
  margin-top: 14px;
}

/* credit packs */
.packs {
  margin: 60px auto 0;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 10, 32, 0.4);
  padding: 28px 30px;
}
.packs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.packs-head .seq-label { margin-bottom: 0; }
.packs-note { font-size: 13px; color: var(--dim); }
.packs-table { margin-bottom: 18px; }
.packs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}
.packs-row span:not(:first-child) { text-align: right; }
.packs-header {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim);
  align-items: end;
}
.pro-price { color: var(--accent); }

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 50px;
}
.uc-card {
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.5), transparent);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.16);
}
.uc-card:hover {
  border-color: rgba(217, 70, 239, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}
.uc-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent);
}
.uc-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { margin-top: 44px; }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-bottom: 12px;
  background: rgba(16, 10, 32, 0.4);
  transition: border-color 0.3s ease;
}
.faq-list details[open] { border-color: var(--line-bright); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 22px;
  font-size: 16.5px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  flex-shrink: 0;
  width: 11px; height: 11px;
  position: relative;
}
.faq-list summary i::before,
.faq-list summary i::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.25s ease;
}
.faq-list summary i::before { left: 0; right: 0; top: 5px; height: 1.5px; }
.faq-list summary i::after { top: 0; bottom: 0; left: 5px; width: 1.5px; }
.faq-list details[open] summary i::after { transform: scaleY(0); }
.faq-list details p {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 15px;
}
.faq-list details a { color: var(--accent); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 65% 80% at 50% 100%, rgba(124, 58, 237, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 50% 110%, rgba(217, 70, 239, 0.14) 0%, transparent 60%),
    var(--bg-0);
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(110px, 16vh, 180px) 0;
}
.final-h2 {
  font-size: clamp(32px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.final-cta .section-sub { margin: 0 auto 36px; }
.final-cta .hero-ctas { margin-bottom: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 70px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 54px;
}
.footer-brand p {
  color: var(--dim);
  font-size: 14px;
  margin-top: 12px;
}
.footer nav h3 {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--dim);
  margin-bottom: 18px;
}
.footer nav { display: flex; flex-direction: column; gap: 11px; }
.footer nav a {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.footer nav a:hover { color: var(--accent); }

.footer-legal { border-top: 1px solid var(--line); padding-top: 28px; }
.footer-disclaimer {
  font-size: 13.5px;
  color: var(--dim);
  max-width: 780px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13px;
  color: var(--dim);
}
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--muted); }

/* ============================================================
   REVEAL ANIMATION (scroll-in)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.reveal[data-r="2"] { transition-delay: 0.08s; }
.reveal[data-r="3"] { transition-delay: 0.16s; }
.reveal[data-r="4"] { transition-delay: 0.24s; }
.reveal[data-r="5"] { transition-delay: 0.32s; }
.reveal[data-r="6"] { transition-delay: 0.4s; }
.reveal[data-r="7"] { transition-delay: 0.48s; }
.reveal[data-r="8"] { transition-delay: 0.56s; }
.reveal[data-r="9"] { transition-delay: 0.64s; }
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   DEEP PAGES — pricing / intelligence / compliance
   Reusable doc components, on the same mission-control system.
   ============================================================ */
.page-intro { padding-top: calc(var(--nav-h) + 64px); }
.lede {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--muted);
  max-width: 700px;
  line-height: 1.62;
  margin-bottom: 10px;
}
.lede a { color: var(--accent); }

.doc-section { margin-top: clamp(54px, 8vw, 92px); }
.doc-section > .seq-label { margin-bottom: 14px; }
.doc-h2 {
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin-bottom: 14px;
}
.doc-p {
  color: var(--muted);
  max-width: 740px;
  margin-bottom: 14px;
}
.doc-p a { color: var(--accent); }
.doc-p:last-child { margin-bottom: 0; }

/* generic card deck (intelligence actions, compliance controls, plan features) */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.info-card {
  position: relative;
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.5), rgba(16, 10, 32, 0.3));
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.16);
}
.info-card:hover {
  border-color: rgba(217, 70, 239, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), 0 0 30px rgba(168, 85, 247, 0.28);
}
.info-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--line-bright);
  background: rgba(139, 92, 246, 0.08);
  border-radius: 5px;
  padding: 4px 10px;
  margin-bottom: 13px;
}
.info-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 9px; }
.info-card p { color: var(--muted); font-size: 14px; line-height: 1.56; }

/* two-up comparison (e.g. when credits ARE / AREN'T used) */
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.split-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  background: rgba(16, 10, 32, 0.4);
}
.split-card h3 {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.split-card.is-yes h3 { color: var(--muted); }
.split-card.is-no h3 { color: var(--dim); }
.split-card ul { display: grid; gap: 11px; }
.split-card li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 14.5px;
}
.split-card.is-yes li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); }
.split-card.is-no li::before { content: "—"; position: absolute; left: 2px; color: var(--dim); }
.split-card.is-no li { color: var(--dim); }

/* workflow stepper */
.steps { display: grid; gap: 14px; margin-top: 32px; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 10, 32, 0.4);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  width: 46px; height: 46px;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.step h3 { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.step p { color: var(--muted); font-size: 14px; }

/* callout — also the visual model for future in-app "i" knowledge-base cards */
.callout {
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(139, 92, 246, 0.06);
  padding: 22px 24px;
  margin-top: 30px;
}
.callout h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.callout p { color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.callout p:last-child { margin-bottom: 0; }
.callout a { color: var(--accent); }

/* legal disclaimer block */
.disclaimer {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(11, 7, 22, 0.5);
  padding: 24px 26px;
  margin-top: 34px;
}
.disclaimer h3 {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--amber);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.disclaimer p { font-size: 13px; color: var(--dim); line-height: 1.7; max-width: 840px; }
.disclaimer p + p { margin-top: 12px; }

/* page-level closing CTA */
.page-cta {
  text-align: center;
  margin-top: clamp(60px, 9vw, 100px);
  padding: clamp(42px, 6vw, 66px) 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 60% 90% at 50% 130%, rgba(124, 58, 237, 0.2), transparent 70%),
    rgba(16, 10, 32, 0.4);
}
.page-cta h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.page-cta p { color: var(--muted); margin: 0 auto 26px; max-width: 540px; }

/* billing note row under pricing plans */
.price-meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.price-meta b { color: var(--muted); font-weight: 500; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1360px) {
  /* numbered circles only — text labels would graze the stage copy */
  .wt-rail span { display: none; }
}

@media (max-width: 1020px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }

  /* stacked walkthrough — the sticky cinema is desktop-only.
     clip the mockup glow bleed so it never forces horizontal scroll */
  .walkthrough { height: auto; padding: 70px 0 10px; overflow-x: clip; }
  .wt-sticky { position: static; height: auto; overflow: visible; display: block; }
  .wt-stage,
  .wt-stage.is-exiting {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 6vw;
    margin: 0 auto 80px;
    max-width: 640px;
  }
  .wt-rail, .wt-progress { display: none; }
  .wt-copy h3 { font-size: 26px; margin-bottom: 14px; }
  .panel-3d { transform: none; }

  .fw-grid { grid-template-columns: 1fr; }
  .fw-grid::before { display: none; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .intel-layout, .comp-layout { grid-template-columns: 1fr; }
  .comp-visual { order: 2; }
  .price-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .cap-grid { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: 1fr; }
  /* phone panels are too narrow for the app rail — frame content carries the story */
  .app-frame-side { display: none; }
  .af-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hud-frame { inset: 12px; }
}

/* ============================================================
   REDUCED MOTION — collapse cinema into plain stacked sections
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-video { display: none; }

  .walkthrough { height: auto; padding: 60px 0; overflow-x: clip; }
  .wt-sticky { position: static; height: auto; overflow: visible; display: block; }
  .wt-stage,
  .wt-stage.is-exiting {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    margin-bottom: 70px;
    padding: 0 6vw;
  }
  .wt-rail, .wt-progress { display: none; }
  .panel-3d { transform: none; }
}

/* JS-disabled fallback: same stacked layout */
.no-js .walkthrough { height: auto; padding: 60px 0; overflow-x: clip; }
.no-js .wt-sticky { position: static; height: auto; overflow: visible; display: block; }
.no-js .wt-stage, .no-js .wt-stage.is-exiting { position: static; opacity: 1; transform: none; margin-bottom: 70px; pointer-events: auto; }
.no-js .wt-rail, .no-js .wt-progress { display: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================
   CAMPAIGN OUTCOMES (homepage §2b) — planning projection console.
   One mission parameter (5,000 touchpoints) branches into two
   channel readouts. Numbers are telemetry: IBM Plex Mono, ranges
   first-class. Estimates only — the disclosure is part of the design.
   ============================================================ */

.co-anchor { margin-top: 50px; text-align: center; }
.co-anchor-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(46px, 6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 0 32px rgba(139, 92, 246, 0.35);
}
.co-anchor-label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

/* schematic stem + crossbar branching the parameter into both cards */
.co-branch {
  display: block;
  position: relative;
  height: 40px;
  margin-top: 18px;
}
.co-branch::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 20px;
  background: var(--line-bright);
}
.co-branch::after {
  content: "";
  position: absolute;
  left: 25%; right: 25%; top: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.co-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(290px, 480px));
  gap: 24px;
  justify-content: center;
}
.co-card {
  background: linear-gradient(180deg, rgba(22, 13, 44, 0.55), rgba(16, 10, 32, 0.35));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
}
.co-card-title {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.co-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(168, 85, 247, 0.14);
}
.co-val {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
}
.co-key {
  font-size: 14px;
  color: var(--dim);
  text-align: right;
}
.co-copy {
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--dim);
  line-height: 1.65;
}
.co-disclosure {
  margin: 28px auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 12.5px;
  color: var(--dim);
  opacity: 0.75;
}

@media (max-width: 880px) {
  .co-grid { grid-template-columns: minmax(0, 480px); }
  .co-branch { display: none; }
  .co-anchor { margin-bottom: 30px; }
}