/* ══════════════════════════════════════════════════════════════
   NovaOps · SOLAR SYSTEM v2.0
   Gen Z Premium · Glassmorphism · Neon · Cinematic
   Linear × ElevenLabs × SpaceX
   ══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS V2 ─────────────────────────────────────── */
:root {
  /* Neon palette layered on top of brand */
  --neon-cyan:   #67E8F9;
  --neon-violet: #A78BFA;
  --neon-blue:   #60A5FA;
  --neon-pink:   #F472B6;
  --neon-amber:  #FBBF24;
  --neon-flame:  #FF8A3D;

  /* Planet identity colors */
  --p-sun:     #FFB800;
  --p-mercury: #4B8BF4;   /* Launchpad */
  --p-venus:   #A78BFA;   /* Nova OS */
  --p-earth:   #67E8F9;   /* Pricing */
  --p-mars:    #F472B6;   /* CTA */

  /* Glass */
  --glass-bg:     rgba(16, 13, 38, 0.55);
  --glass-bg-2:   rgba(16, 13, 38, 0.78);
  --glass-bdr:    rgba(167, 139, 250, 0.22);
  --glass-bdr-2:  rgba(103, 232, 249, 0.28);
  --glass-blur:   24px;

  /* Motion */
  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-in:      cubic-bezier(.5, 0, .75, 0);
  --ease-bounce:  cubic-bezier(.34, 1.56, .64, 1);
  --ease-warp:    cubic-bezier(.86, 0, .07, 1);

  /* Type */
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

/* ── 2. GLASS NAV V2 ─────────────────────────────────────────── */
.site-nav {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-bdr) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 32px rgba(0,0,0,0.45);
  transition: padding .35s var(--ease-out), background .3s var(--ease-out);
}
.site-nav.scrolled {
  background: var(--glass-bg-2) !important;
  padding-block: .35rem;
}

/* Nav inner gets a glow track */
.site-nav .nav-inner {
  position: relative;
}
.site-nav .nav-inner::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(103,232,249,.5) 20%,
    rgba(167,139,250,.6) 50%,
    rgba(244,114,182,.5) 80%,
    transparent);
  opacity: .55;
}

/* Brand mark — animated dot becomes a tiny planet */
.nav-brand .os-dot {
  width: 12px !important;
  height: 12px !important;
  background: radial-gradient(circle at 30% 30%, #fff, var(--neon-violet) 50%, var(--neon-blue)) !important;
  box-shadow:
    0 0 14px rgba(167,139,250,.6),
    0 0 30px rgba(103,232,249,.25);
  animation: solarPlanetSpin 8s linear infinite;
  position: relative;
}
@keyframes solarPlanetSpin {
  0%   { transform: rotate(0deg); filter: hue-rotate(0deg); }
  100% { transform: rotate(360deg); filter: hue-rotate(35deg); }
}
.nav-brand .os-name {
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff, var(--neon-cyan) 60%, var(--neon-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -.02em !important;
}

/* Nav links — Gen Z chip style with magnetic underline */
.site-nav .nav-links a {
  position: relative;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  padding: .55rem .9rem !important;
  border-radius: 999px;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
  z-index: 1;
}
.site-nav .nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(103,232,249,.12), rgba(167,139,250,.18));
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  z-index: -1;
}
.site-nav .nav-links a:hover { color: #fff !important; }
.site-nav .nav-links a:hover::before { opacity: 1; }
.site-nav .nav-links a.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(103,232,249,.18), rgba(167,139,250,.22)) !important;
  box-shadow: 0 0 0 1px rgba(167,139,250,.35), 0 6px 20px rgba(167,139,250,.2);
}

/* Orbital rocket that rides the nav */
.nav-orbital {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 14px rgba(167,139,250,.6));
  transition: left .55s var(--ease-out), top .55s var(--ease-out), transform .35s var(--ease-out), opacity .35s ease;
  opacity: 0;
}
.nav-orbital.show { opacity: 1; }
.nav-orbital svg { width: 100%; height: 100%; transform: rotate(90deg); }

/* Dropdown — glass */
.site-nav .nav-drop {
  background: var(--glass-bg-2) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-bdr) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  border-radius: 16px !important;
}

/* Nav CTA buttons — premium glass */
.site-nav .nav-ctas .btn-outline {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(8px);
}
.site-nav .nav-ctas .btn-primary {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-violet)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 8px 24px rgba(167,139,250,.4),
    0 0 40px rgba(103,232,249,.15);
  position: relative;
  overflow: hidden;
}
.site-nav .nav-ctas .btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.4), transparent 30%);
  animation: solarSweep 4s linear infinite;
  pointer-events: none;
}
@keyframes solarSweep { to { transform: rotate(360deg); } }

/* ── 3. WARP TRANSITION OVERLAY ──────────────────────────────── */
.warp-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 0%, #000 70%);
}
.warp-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.warp-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.warp-overlay .warp-rocket {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 30px rgba(103,232,249,.8));
  z-index: 2;
  opacity: 0;
}
.warp-overlay.active .warp-rocket { opacity: 1; animation: warpRocket 1.1s var(--ease-warp) forwards; }
@keyframes warpRocket {
  0%   { transform: translate(-50%, 60vh) scale(.4) rotate(-10deg); }
  40%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { transform: translate(-50%, -120vh) scale(.6) rotate(5deg); opacity: 0; }
}

.warp-overlay .warp-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(167,139,250,.35), transparent 50%);
  opacity: 0;
}
.warp-overlay.active .warp-flash { animation: warpFlash 1.1s ease forwards; }
@keyframes warpFlash {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
}

/* ── 4. SOLAR SCENE — HOMEPAGE ───────────────────────────────── */
.solar-scene {
  position: relative;
  isolation: isolate;
}

/* Each planet stage = full-viewport section */
.planet-stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(80px, 10vh, 140px) 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.planet-stage > .container { position: relative; z-index: 5; width: 100%; padding-top: clamp(2.5rem, 5vh, 4.5rem); }

/* The planet itself */
.planet {
  position: absolute;
  border-radius: 50%;
  filter: blur(.5px);
  box-shadow:
    inset -30px -30px 80px rgba(0,0,0,.65),
    0 0 80px rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 1;
}

/* Sun — Hero */
.planet-sun {
  width: clamp(360px, 65vw, 720px);
  height: clamp(360px, 65vw, 720px);
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 30%, #FFE08A 0%, #FFB800 35%, #FF6B2C 65%, #B0341B 100%);
  box-shadow:
    inset -40px -40px 100px rgba(0,0,0,.4),
    0 0 120px rgba(255,184,0,.45),
    0 0 240px rgba(255,107,44,.25);
  animation: sunBreathe 9s var(--ease-out) infinite;
}
@keyframes sunBreathe {
  0%, 100% { transform: translateY(-50%) scale(1); filter: blur(.5px) brightness(1); }
  50%      { transform: translateY(-50%) scale(1.03); filter: blur(.5px) brightness(1.1); }
}
.planet-sun::after {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 48%, rgba(255,184,0,.25) 50%, transparent 56%);
  animation: sunCorona 12s linear infinite;
}
@keyframes sunCorona { to { transform: rotate(360deg); } }

/* Mercury — Launchpad (cool blue cratered) */
.planet-mercury {
  width: clamp(280px, 50vw, 540px);
  height: clamp(280px, 50vw, 540px);
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 35% 30%, #6BA8FF 0%, #4B8BF4 30%, #1E40AF 70%, #0B1E55 100%);
  box-shadow:
    inset -30px -30px 80px rgba(0,0,0,.6),
    0 0 100px rgba(75,139,244,.4);
  animation: planetSpin 60s linear infinite;
}
.planet-mercury::before {
  /* craters */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 35%, rgba(255,255,255,.06) 0%, transparent 6%),
    radial-gradient(circle at 65% 60%, rgba(0,0,0,.22) 0%, transparent 5%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.18) 0%, transparent 4%),
    radial-gradient(circle at 40% 75%, rgba(0,0,0,.20) 0%, transparent 5%);
}

/* Venus — Nova OS (violet swirl) */
.planet-venus {
  width: clamp(320px, 55vw, 600px);
  height: clamp(320px, 55vw, 600px);
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 30%, #D4B5FF 0%, #A78BFA 35%, #7C3AED 70%, #2E1065 100%);
  box-shadow:
    inset -28px -28px 80px rgba(0,0,0,.55),
    0 0 110px rgba(167,139,250,.4);
  animation: planetSpin 80s linear infinite reverse;
}
.planet-venus::before {
  /* swirling clouds */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.08) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 40%, rgba(255,255,255,.06) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,.15) 0%, transparent 40%);
  animation: cloudDrift 22s linear infinite;
}
@keyframes cloudDrift { to { transform: rotate(360deg); } }

/* Earth — Pricing (cyan ocean + continents) */
.planet-earth {
  width: clamp(300px, 52vw, 580px);
  height: clamp(300px, 52vw, 580px);
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 30% 30%, #A0F0FF 0%, #67E8F9 30%, #0E7490 70%, #042F3E 100%);
  box-shadow:
    inset -28px -28px 80px rgba(0,0,0,.55),
    0 0 110px rgba(103,232,249,.4);
  animation: planetSpin 90s linear infinite;
}
.planet-earth::before {
  /* continents */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 18% 12% at 30% 40%, rgba(74,222,128,.55) 0%, transparent 60%),
    radial-gradient(ellipse 14% 22% at 65% 55%, rgba(74,222,128,.45) 0%, transparent 60%),
    radial-gradient(ellipse 10% 8%  at 45% 70%, rgba(74,222,128,.4)  0%, transparent 60%),
    radial-gradient(ellipse 8%  6%  at 75% 30%, rgba(74,222,128,.35) 0%, transparent 60%);
}
.planet-earth::after {
  /* atmosphere ring */
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 49%, rgba(103,232,249,.35) 50%, transparent 54%);
}

/* Mars — Final CTA (pink/red rust) */
.planet-mars {
  width: clamp(280px, 48vw, 520px);
  height: clamp(280px, 48vw, 520px);
  right: 50%;
  transform: translate(50%, -50%);
  top: 50%;
  background:
    radial-gradient(circle at 35% 30%, #FFB5C5 0%, #F472B6 30%, #BE185D 65%, #4A0526 100%);
  box-shadow:
    inset -28px -28px 80px rgba(0,0,0,.55),
    0 0 130px rgba(244,114,182,.45);
  animation: planetSpin 70s linear infinite;
}

@keyframes planetSpin {
  to { background-position: -100% 0; }
}

/* Planet rings (Saturn-style decoration around any planet) */
.planet-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.18);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%) rotate3d(1, .3, 0, 75deg);
  animation: ringSpin 45s linear infinite;
}
@keyframes ringSpin { to { transform: translate(-50%,-50%) rotate3d(1,.3,0,75deg) rotate(360deg); } }

/* ── 5. STAGE LABELS (top of each planet stage, in flow above content) ── */
.stage-label {
  position: absolute;
  top: clamp(96px, 13vh, 132px);
  left: clamp(20px, 4vw, 60px);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .9rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-bdr);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  z-index: 6;
}
.stage-label .stage-num {
  font-family: var(--font-mono);
  color: var(--neon-cyan);
  font-weight: 700;
}
.stage-label .stage-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  animation: stageDot 2s ease infinite;
}
@keyframes stageDot { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── 6. HOMEPAGE HERO (Sun stage) ────────────────────────────── */
.stage-hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,184,0,.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(167,139,250,.12) 0%, transparent 70%);
}
.stage-hero .hero-eyebrow-v2 {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.15rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-bdr-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: 2rem;
  box-shadow: 0 0 0 1px rgba(103,232,249,.1) inset, 0 8px 28px rgba(103,232,249,.12);
}
.stage-hero .hero-eyebrow-v2 .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 12px #4ADE80;
  animation: stageDot 1.8s ease infinite;
}

.stage-hero .hero-h1-v2 {
  font-size: clamp(2.6rem, 7vw, 5.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  line-height: .98 !important;
  margin-bottom: 1.25rem;
}
.stage-hero .hero-h1-v2 .line-1 {
  display: block;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage-hero .hero-h1-v2 .line-2 {
  display: block;
  background: linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-violet) 50%, var(--neon-pink) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradFlow 8s ease infinite;
}
@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.stage-hero .hero-lead-v2 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: rgba(255,255,255,.72);
  max-width: 580px;
  line-height: 1.55;
  margin: 0 0 2.5rem;
}

/* CTA cluster */
.stage-hero .cta-cluster {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.cta-primary-v2 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.85rem;
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-violet));
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 12px 32px rgba(167,139,250,.45),
    0 0 60px rgba(103,232,249,.18);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.cta-primary-v2::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.5) 12%, transparent 25%);
  animation: solarSweep 4s linear infinite;
  pointer-events: none;
}
.cta-primary-v2:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 18px 50px rgba(167,139,250,.55),
    0 0 80px rgba(103,232,249,.25);
}
.cta-primary-v2 .arrow {
  display: inline-block;
  transition: transform .35s var(--ease-out);
}
.cta-primary-v2:hover .arrow { transform: translateX(4px); }

.cta-secondary-v2 {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.65rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  text-decoration: none;
  transition: all .3s var(--ease-out);
}
.cta-secondary-v2:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
}

/* Hero stat row — glass chips */
.stat-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 700px;
  margin-top: .5rem;
}
.stat-chip {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-bdr);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  position: relative;
  overflow: hidden;
}
.stat-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: .5;
}
.stat-chip .num {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
  font-feature-settings: "tnum";
}
.stat-chip .label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: .5rem;
}

/* ── 7. SCROLL ROCKET (flies between stages) ─────────────────── */
.scroll-rocket {
  position: fixed;
  width: 80px;
  height: 80px;
  z-index: 50;
  pointer-events: none;
  filter: drop-shadow(0 8px 30px rgba(167,139,250,.6));
  transition: transform .6s var(--ease-out), opacity .35s ease;
  will-change: transform;
}
.scroll-rocket .rocket-flame {
  transform-origin: 50% 0%;
  animation: rocketFlame .12s steps(2) infinite;
}
@keyframes rocketFlame {
  0%   { transform: scaleY(1)   scaleX(1); opacity: 1; }
  50%  { transform: scaleY(1.2) scaleX(.88); opacity: .9; }
  100% { transform: scaleY(.95) scaleX(1.06); opacity: 1; }
}

/* trail particle */
.rocket-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-cyan), transparent 70%);
  pointer-events: none;
  z-index: 49;
  opacity: .9;
}

/* ── 8. PRODUCT SPLIT V2 ─────────────────────────────────────── */
.product-split-v2 {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 2rem;
  margin-top: 3.5rem;
}
.product-orbit-card {
  position: relative;
  padding: 2.5rem;
  border-radius: 28px;
  background: var(--glass-bg-2);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-bdr);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .35s ease;
}
.product-orbit-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--card-glow, var(--neon-violet)), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .5;
  z-index: 0;
}
.product-orbit-card::after {
  /* orbital glow blob */
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow, rgba(167,139,250,.35)), transparent 60%);
  bottom: -120px;
  right: -120px;
  filter: blur(40px);
  z-index: -1;
  transition: transform .8s var(--ease-out);
}
.product-orbit-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-glow, var(--neon-violet));
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px var(--card-glow, var(--neon-violet)) inset;
}
.product-orbit-card:hover::after { transform: scale(1.2); }

.product-orbit-card.lp { --card-glow: rgba(75,139,244,.55); }
.product-orbit-card.nv { --card-glow: rgba(167,139,250,.55); }

.product-orbit-card .card-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.product-orbit-card.lp .card-eyebrow { color: var(--neon-blue); }
.product-orbit-card.nv .card-eyebrow { color: var(--neon-violet); }
.product-orbit-card .card-eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.product-orbit-card h3 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 .8rem;
}
.product-orbit-card .desc {
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.75rem;
}
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: all .25s var(--ease-out);
}
.tool-chip:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}

.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  transition: all .3s var(--ease-out);
}
.product-orbit-card.lp .product-card-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--neon-blue), #2563EB);
  box-shadow: 0 8px 24px rgba(75,139,244,.4);
}
.product-orbit-card.nv .product-card-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--neon-violet), #7C3AED);
  box-shadow: 0 8px 24px rgba(167,139,250,.4);
}
.product-card-cta:hover { transform: translateY(-2px); }
.product-card-cta .arrow { transition: transform .3s var(--ease-out); }
.product-card-cta:hover .arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .product-split-v2 { grid-template-columns: 1fr; }
}

/* ── 9. PRICING ORBIT V2 (Earth stage) ───────────────────────── */
.pricing-orbit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.price-orb {
  position: relative;
  padding: 1.75rem 1.4rem;
  background: var(--glass-bg-2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-bdr);
  border-radius: 22px;
  text-align: center;
  transition: all .4s var(--ease-out);
  overflow: hidden;
}
.price-orb::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}
.price-orb:hover {
  transform: translateY(-6px);
  border-color: var(--neon-cyan);
  box-shadow: 0 20px 50px rgba(103,232,249,.18);
}
.price-orb.popular {
  border-color: var(--neon-violet);
  background: linear-gradient(180deg, rgba(167,139,250,.12), var(--glass-bg-2) 60%);
  transform: scale(1.04);
  box-shadow: 0 20px 60px rgba(167,139,250,.28);
}
.price-orb.popular::after {
  content: 'MOST POPULAR';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--neon-violet), var(--neon-pink));
  color: #fff;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  padding: .25rem .75rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(167,139,250,.5);
}
.price-orb .name {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}
.price-orb .price {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  margin: .55rem 0 .35rem;
  line-height: 1;
}
.price-orb .price span {
  font-size: .92rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
}
.price-orb .tagline {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .pricing-orbit { grid-template-columns: repeat(2, 1fr); }
  .price-orb.popular { transform: none; }
}
@media (max-width: 520px) {
  .pricing-orbit { grid-template-columns: 1fr; }
}

/* ── 10. JOURNEY ORBIT (5 steps as planets in a row) ─────────── */
.journey-orbit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 3rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.journey-orbit::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan) 15%, var(--neon-violet) 50%, var(--neon-pink) 85%, transparent);
  z-index: 0;
}
.journey-orb {
  position: relative;
  text-align: center;
  z-index: 1;
}
.journey-orb-planet {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: var(--glass-bg-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-bdr);
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.journey-orb:hover .journey-orb-planet {
  transform: scale(1.1);
  box-shadow: 0 12px 36px rgba(167,139,250,.4);
}
.journey-orb-planet::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(167,139,250,.3);
  animation: ringSpin 30s linear infinite;
  pointer-events: none;
}
.journey-orb .label {
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  margin-bottom: .25rem;
}
.journey-orb .sub {
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin-bottom: .5rem;
}
.journey-orb .plan-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(75,139,244,.15);
  color: var(--neon-blue);
  border: 1px solid rgba(75,139,244,.3);
}
.journey-orb .plan-tag.nv { background: rgba(167,139,250,.15); color: var(--neon-violet); border-color: rgba(167,139,250,.3); }
.journey-orb .plan-tag.free { background: rgba(74,222,128,.15); color: #4ADE80; border-color: rgba(74,222,128,.3); }

@media (max-width: 720px) {
  .journey-orbit { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .journey-orbit::before { display: none; }
}

/* ── 11. CONNECT FLOW V2 ─────────────────────────────────────── */
.connect-orbit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 3rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.connect-orb-card {
  padding: 2rem;
  background: var(--glass-bg-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-bdr);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.connect-orb-card.lp { border-top: 2px solid var(--neon-blue); }
.connect-orb-card.nv { border-top: 2px solid var(--neon-violet); }

.connect-arrow-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-width: 140px;
}
.connect-arrow-v2 .pulse-line {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-violet));
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.connect-arrow-v2 .pulse-line::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: rgba(255,255,255,.7);
  filter: blur(2px);
  animation: pulseRun 2s linear infinite;
}
@keyframes pulseRun { to { left: 130%; } }
.connect-arrow-v2 .pulse-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .connect-orbit { grid-template-columns: 1fr; gap: 1rem; }
  .connect-arrow-v2 { transform: rotate(90deg); margin: .5rem 0; }
}

/* ── 12. TESTIMONIAL CARDS V2 ────────────────────────────────── */
.testi-orbit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.testi-orb-card {
  padding: 1.75rem;
  background: var(--glass-bg-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-bdr);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ease-out);
}
.testi-orb-card:hover {
  transform: translateY(-4px);
  border-color: var(--neon-cyan);
  box-shadow: 0 14px 40px rgba(103,232,249,.18);
}
.testi-orb-card .stars {
  color: var(--neon-amber);
  letter-spacing: .15em;
  font-size: .9rem;
  margin-bottom: .75rem;
}
.testi-orb-card blockquote {
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0 0 1.25rem;
  font-style: normal;
}
.testi-orb-card .author {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.testi-orb-card .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; color: #fff;
}
@media (max-width: 900px) { .testi-orbit { grid-template-columns: 1fr; } }

/* Stats row inside testimonial section */
.results-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.result-chip {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-bdr);
  border-radius: 16px;
}
.result-chip .num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.result-chip .label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: .65rem;
}
@media (max-width: 600px) { .results-rail { grid-template-columns: 1fr; } }

/* ── 13. SECTION HEADERS V2 ──────────────────────────────────── */
.stage-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}
.stage-header .eyebrow-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: 1rem;
  font-weight: 600;
}
.stage-header h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  margin-bottom: .75rem;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage-header h2 .grad {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-violet), var(--neon-pink));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradFlow 8s ease infinite;
}
.stage-header .sub {
  color: rgba(255,255,255,.65);
  font-size: 1.05rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── 14. FINAL CTA STAGE (Mars) ──────────────────────────────── */
.stage-final-cta {
  text-align: center;
}
.stage-final-cta h2 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 1.25rem;
}
.stage-final-cta .lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.72);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.5;
}

/* ── 15. SCROLL HINT ─────────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  z-index: 4;
  pointer-events: none;
}
.scroll-hint .mouse {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  position: relative;
}
.scroll-hint .mouse::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: var(--neon-cyan);
  border-radius: 2px;
  animation: scrollDown 1.6s ease infinite;
}
@keyframes scrollDown {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  60%  { transform: translate(-50%, 12px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* ── 16. NAV ROCKET CLICK ANIMATION ──────────────────────────── */
.click-rocket {
  position: fixed;
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 99998;
  filter: drop-shadow(0 0 16px rgba(103,232,249,.8));
}
.click-rocket.fly {
  animation: clickRocketFly 1s var(--ease-warp) forwards;
}
@keyframes clickRocketFly {
  0%   { transform: translate(-50%, -50%) scale(.5) rotate(-20deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -120vh) scale(.3) rotate(15deg); opacity: 0; }
}

/* ── 17. PAGE-IN ANIMATION (after warp) ─────────────────────── */
.page-arriving { opacity: 0; transform: translateY(40px); }
.page-arriving.arrived {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

/* ── 18. SUBPAGE PLANET HEADERS ─────────────────────────────── */
.subpage-hero {
  position: relative;
  padding: clamp(120px, 18vh, 200px) 1.75rem clamp(60px, 10vh, 100px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.subpage-hero::before {
  /* default planet glow */
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--page-glow, var(--neon-violet)) 0%, transparent 60%);
  opacity: .25;
  filter: blur(60px);
  bottom: -300px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.subpage-hero > * { position: relative; z-index: 2; }

/* ── 19. EXISTING ELEMENT OVERRIDES ──────────────────────────── */
/* Make existing sections sit on transparent background so cosmos shows */
section.section, section.section-dark { background: transparent !important; border: none !important; }

/* Keep readability by giving content cards a glass treatment */
.tool-card, .feature-card, .industry-card, .pricing-card, .step, .out-card {
  background: var(--glass-bg-2) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-bdr) !important;
}

/* Buttons: amplified shadow */
.btn-primary {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-violet)) !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(167,139,250,.4), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}

/* Light theme — ease the glass */
html[data-color-scheme="light"] {
  --glass-bg:    rgba(255,255,255,.65);
  --glass-bg-2:  rgba(255,255,255,.85);
  --glass-bdr:   rgba(0,0,0,.08);
  --glass-bdr-2: rgba(75,139,244,.25);
}
html[data-color-scheme="light"] .stage-hero .hero-h1-v2 .line-1 {
  background: linear-gradient(180deg, #0B0A18 0%, rgba(11,10,24,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-color-scheme="light"] .stage-header h2 {
  background: linear-gradient(180deg, #0B0A18 0%, rgba(11,10,24,.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── 20. REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .planet, .planet-sun, .planet-mercury, .planet-venus, .planet-earth, .planet-mars,
  .nav-orbital, .scroll-rocket, .warp-overlay, .click-rocket {
    animation: none !important;
    transition: none !important;
  }
  .scroll-rocket, .nav-orbital, .warp-overlay { display: none !important; }
}

/* ── 21. RESPONSIVE TWEAKS ──────────────────────────────────── */
@media (max-width: 720px) {
  .stage-hero .hero-h1-v2 { font-size: clamp(2rem, 9vw, 3.4rem) !important; }
  .stat-rail { grid-template-columns: repeat(2, 1fr); }
  .scroll-rocket { width: 50px; height: 50px; }
  .planet-sun, .planet-mercury, .planet-venus, .planet-earth { right: -25%; left: auto; opacity: .55; }
  .planet-mars { width: 280px; height: 280px; }
  /* Stage labels: park at top, smaller, never collide with content */
  .stage-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 1.25rem 0 !important;
    font-size: .58rem;
    padding: .35rem .8rem;
    align-self: flex-start;
  }
  .planet-stage {
    flex-direction: column;
    padding-top: clamp(110px, 18vh, 160px);
  }
  .planet-stage > .container { padding-top: 0; }
  .hero-eyebrow-v2 { margin-top: 0; }
}