/* ══════════════════════════════════════════════════════
   KRIYA AI — Solar System UI
   ══════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --accent:        #f2a14a;
  --accent-dim:    #c55a12;
  --accent-rich:   #9a4715;
  --surface:       #0e0e0e;
  --surface-raised:#141414;
  --surface-card:  #191a1a;
  --surface-hi:    #1f2020;
  --border:        rgba(72,72,72,0.2);
  --border-accent: rgba(242,161,74,0.25);
  --text:          #e7e5e4;
  --text-muted:    #acabaa;
  --text-dim:      #767575;
  --radius:        1.25rem;
  --panel-w:       clamp(380px, 48vw, 680px);
  --easing:        cubic-bezier(0.65,0,0.35,1);
  --easing-out:    cubic-bezier(0.22,1,0.36,1);

  /* orbit geometry — driven by JS */
  --orbit-angle: 0deg;
  --orbit-r: 220px;   /* half of ring diameter */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--surface);
  color: var(--text);
  overflow-x: hidden;
  /* we control scroll ourselves for the stage */
}
h1,h2,h3,h4,h5 { font-family: 'Manrope', sans-serif; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════ */
#topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 0 2rem;
  background: rgba(14,14,14,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.nav-icon { color: var(--accent); font-size: 1.4rem; }
.nav-wordmark {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: -.02em;
}
.nav-links {
  display: flex;
  gap: .25rem;
}
.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: .45rem .9rem;
  border-radius: 6px;
  transition: color .25s, background .25s;
}
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--accent); background: rgba(242,161,74,.08); }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.icon-btn {
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.icon-btn:hover { color: var(--accent); background: rgba(242,161,74,.08); }
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.35rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-rich));
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: transform .3s var(--easing), box-shadow .3s var(--easing), opacity .2s;
  box-shadow: 0 4px 20px rgba(242,161,74,.25);
}
.cta-btn:hover { transform: scale(1.04); box-shadow: 0 6px 30px rgba(242,161,74,.4); }
.cta-btn:active { transform: scale(.97); }
.outline-btn {
  background: transparent;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  box-shadow: none;
}
.outline-btn:hover { background: rgba(242,161,74,.06); box-shadow: none; }

/* hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: .3s;
}

/* ── Mobile drawer ── */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
  gap: 1rem;
  transform: translateX(100%);
  transition: transform .55s var(--easing);
}
#mobile-menu.open { transform: translateX(0); }
.mobile-close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  color: var(--text-muted);
  font-size: 1.4rem;
}
.mobile-nav { display: flex; flex-direction: column; gap: .5rem; }
.mobile-link {
  font-family: 'Manrope', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -.03em;
  padding: .4rem 0;
  transition: color .2s;
}
.mobile-link.active, .mobile-link:hover { color: var(--accent); }
.mobile-cta { margin-top: auto; width: 100%; padding: 1rem; font-size: .85rem; }
#mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
#mobile-overlay.visible { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════════
   SOLAR STAGE  — fixed, full viewport
   ══════════════════════════════════════════════════════ */
#solar-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* children opt-in */
}

/* Starfield canvas */
#starfield {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

/* Nebula atmosphere */
.nebula {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(90px);
  will-change: transform;
}
.nebula-a {
  width: 34vw; height: 34vw;
  left: -6vw; bottom: 8vh;
  background: radial-gradient(circle, rgba(154,71,21,.35) 0%, transparent 72%);
}
.nebula-b {
  width: 28vw; height: 28vw;
  right: -4vw; top: 10vh;
  background: radial-gradient(circle, rgba(242,161,74,.25) 0%, transparent 70%);
}
.nebula-c {
  width: 22vw; height: 22vw;
  left: 38%; top: -6vh;
  background: radial-gradient(circle, rgba(198,198,198,.07) 0%, transparent 70%);
}

/* ── Solar System ── */
#solar-system {
  position: relative;
  width: var(--ss-size, min(80vmin, 620px));
  height: var(--ss-size, min(80vmin, 620px));
  /* Stronger perspective = more dramatic depth foreshortening */
  perspective: 650px;
  perspective-origin: 50% 38%;
  transition: transform .65s var(--easing-out);
}

/* When panel opens: shift solar system to left half of screen */
body.panel-open #solar-system {
  transform: translateX(-22vw) scale(0.82);
}

/* Alternate layout: odd sections open on the left, solar system shifts right. */
body.panel-left-active #solar-system {
  transform: translateX(clamp(34rem, 42vw, 46rem)) scale(0.74);
}

/* ── Orbit plane — 3D tilted container ── */
.orbit-plane {
  position: absolute;
  inset: 0;
  /* tilt is set via JS: rotateX(-70deg) rotateZ(angle) */
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
  /* Higher z-index than sun so planets always paint in front of it */
  z-index: 3;
}

/* orbit-track diameters = 2 × r × 100%
   r values: 0.40, 0.52, 0.64, 0.76  →  diameters: 80%, 104%, 128%, 152% */
.orbit-track {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(242,161,74,.10);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit-track-1 { width: 117%; height:  90%; border-color: rgba(220,60,20,.22); }
.orbit-track-2 { width: 169%; height: 130%; border-color: rgba(168,216,234,.16); }
.orbit-track-3 { width: 221%; height: 170%; border-color: rgba(56,160,104,.12); }
.orbit-track-4 { width: 273%; height: 210%; border-color: rgba(136,72,200,.10); }

/* Planet wrappers — positioned by JS in orbit-plane local space */
.planet-wrapper {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-origin: 0 0;
  pointer-events: auto;
  transform-style: preserve-3d;
}

/* Billboard — counter-rotated by JS to always face the viewer.
   Net transform: orbitPlane(rotX(-70) rotZ(θ)) × billboard(rotZ(-θ) rotX(70)) = identity
   This makes the planet appear as a perfect circle regardless of orbit tilt. */
.planet-billboard {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Each planet sits at its orbital position, centred on wrapper's origin. */
.planet {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  /* base size — overridden per-planet below */
  width: clamp(44px, 6.5vmin, 68px);
  height: clamp(44px, 6.5vmin, 68px);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform .7s var(--easing-out),
    box-shadow .7s var(--easing-out),
    opacity .5s var(--easing);
  will-change: transform;
}

/* Per-planet sizes — graded largest (inner) to smallest (outer) */
#planet-product,
#planet-use-cases,
#planet-pricing,
#planet-faq {
  width: clamp(46px, 5.8vmin, 66px);
  height: clamp(46px, 5.8vmin, 66px);
}
.planet-core {
  position: absolute; inset: 0;
  border-radius: 9999px;
}
.planet-atmosphere {
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity .6s var(--easing);
}
.planet:hover .planet-atmosphere,
.planet.is-active .planet-atmosphere { opacity: 1; }

/* Per-planet 3D sphere shading — off-centre light source at ~32% 28% */
.planet-product .planet-core {
  background: radial-gradient(
    circle at 32% 28%,
    #ffb8a0 0%, #e85030 20%, #b82010 45%, #780800 70%, #3a0200 88%, #180000 100%
  );
  box-shadow:
    inset -9px -9px 22px rgba(0,0,0,.82),
    inset 5px 4px 10px rgba(255,150,100,.14),
    0 0 22px rgba(220,60,20,.55), 0 0 50px rgba(220,60,20,.2);
}
.planet-product .planet-atmosphere {
  background: radial-gradient(circle, rgba(220,60,20,.22) 0%, transparent 70%);
}

.planet-use-cases .planet-core {
  background: radial-gradient(
    circle at 32% 28%,
    #e8f8ff 0%, #a8dff0 20%, #50a8c8 45%, #1a6080 70%, #083048 88%, #021018 100%
  );
  box-shadow:
    inset -9px -9px 22px rgba(0,0,0,.82),
    inset 5px 4px 10px rgba(200,240,255,.14),
    0 0 22px rgba(80,168,200,.5), 0 0 50px rgba(80,168,200,.2);
}
.planet-use-cases .planet-atmosphere {
  background: radial-gradient(circle, rgba(80,168,200,.2) 0%, transparent 70%);
}

.planet-pricing .planet-core {
  background: radial-gradient(
    circle at 32% 28%,
    #e0ffec 0%, #80d4a0 20%, #38a068 45%, #0e5a38 70%, #042a1a 88%, #010e08 100%
  );
  box-shadow:
    inset -9px -9px 22px rgba(0,0,0,.82),
    inset 5px 4px 10px rgba(180,255,210,.12),
    0 0 22px rgba(56,160,104,.5), 0 0 50px rgba(56,160,104,.2);
}
.planet-pricing .planet-atmosphere {
  background: radial-gradient(circle, rgba(56,160,104,.2) 0%, transparent 70%);
}

.planet-faq .planet-core {
  background: radial-gradient(
    circle at 32% 28%,
    #f5eeff 0%, #c8a0e8 20%, #8848c8 45%, #502080 70%, #260c48 88%, #0d0318 100%
  );
  box-shadow:
    inset -9px -9px 22px rgba(0,0,0,.82),
    inset 5px 4px 10px rgba(220,190,255,.14),
    0 0 22px rgba(136,72,200,.5), 0 0 50px rgba(136,72,200,.2);
}
.planet-faq .planet-atmosphere {
  background: radial-gradient(circle, rgba(136,72,200,.22) 0%, transparent 70%);
}

/* Planet label — counter-rotates to stay readable */
.planet-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) rotate(var(--label-counter-rotate, 0deg));
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.planet:hover .planet-label,
.planet.is-active .planet-label { opacity: 1; color: var(--accent); }

/* Active planet — subtle zoom only; keep smaller than sun */
.planet.is-active {
  transform: translate(-50%, -50%);
  z-index: 10;
}
.planet-product.is-active  { box-shadow: 0 0 60px rgba(220,60,20,.60), 0 0 120px rgba(180,20,0,.30); }
.planet-use-cases.is-active { box-shadow: 0 0 60px rgba(168,216,234,.45), 0 0 120px rgba(74,144,164,.25); }
.planet-pricing.is-active { box-shadow: 0 0 60px rgba(181,234,204,.45), 0 0 120px rgba(58,143,96,.25); }
.planet-faq.is-active { box-shadow: 0 0 60px rgba(212,184,240,.45), 0 0 120px rgba(123,79,181,.25); }

/* Non-active planets dim */
.planet.is-inactive {
  opacity: .35;
  transform: translate(-50%, -50%);
}

/* ── Sun ── */
#sun {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* below orbit-plane (z:3) so planets paint in front of sun */
  pointer-events: none;
}
.sun-body {
  /* Bigger sun */
  width: clamp(90px, 13vmin, 148px);
  height: clamp(90px, 13vmin, 148px);
  border-radius: 9999px;
  /* 3D sphere — light source top-left */
  background: radial-gradient(circle at 35% 30%,
    #fffcd0 0%,
    #ffe880 10%,
    #ffcc44 25%,
    #f2a14a 42%,
    #c55a12 62%,
    #7a2e00 80%,
    #3a1000 92%,
    #1a0500 100%
  );
  box-shadow:
    inset -25px -25px 55px rgba(0,0,0,.45),
    inset 10px 8px 28px rgba(255,245,150,.1),
    0 0 0 1px rgba(242,161,74,.2),
    0 0 50px rgba(242,161,74,.95),
    0 0 120px rgba(242,161,74,.55),
    0 0 260px rgba(154,71,21,.35),
    0 0 400px rgba(154,71,21,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  animation: sun-pulse 4s ease-in-out infinite;
}
.sun-corona {
  position: absolute;
  inset: -20px;
  border-radius: 9999px;
  background: radial-gradient(circle,
    rgba(242,161,74,.18) 30%,
    rgba(242,161,74,.05) 60%,
    transparent 80%
  );
  animation: corona-breathe 6s ease-in-out infinite;
  z-index: 1;
}
.sun-flare {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(242,161,74,.3) 0%, transparent 70%);
  animation: flare-spin 12s linear infinite;
  z-index: 0;
}
.sun-flare-1 { width: 160%; height: 30%; top: 35%; left: -30%; animation-duration: 12s; }
.sun-flare-2 { width: 30%; height: 160%; top: -30%; left: 35%; animation-duration: 18s; animation-direction: reverse; }
.sun-label-wrap { text-align: center; position: relative; z-index: 3; }
.sun-you {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(.55rem, 1.4vmin, .9rem);
  color: #fff;
  letter-spacing: .04em;
  line-height: 1;
}
.sun-sub {
  display: block;
  font-size: clamp(.4rem, .9vmin, .6rem);
  color: rgba(255,255,255,.6);
  letter-spacing: .05em;
  margin-top: 2px;
}

@keyframes sun-pulse {
  0%,100% { box-shadow:
    inset -25px -25px 55px rgba(0,0,0,.45),
    inset 10px 8px 28px rgba(255,245,150,.1),
    0 0 0 1px rgba(242,161,74,.2),
    0 0 50px rgba(242,161,74,.95),
    0 0 120px rgba(242,161,74,.55),
    0 0 260px rgba(154,71,21,.35);
  }
  50% { box-shadow:
    inset -25px -25px 55px rgba(0,0,0,.45),
    inset 10px 8px 28px rgba(255,245,150,.1),
    0 0 0 1px rgba(242,161,74,.25),
    0 0 70px rgba(242,161,74,1),
    0 0 160px rgba(242,161,74,.65),
    0 0 340px rgba(154,71,21,.45);
  }
}
@keyframes corona-breathe {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
@keyframes flare-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Scroll hint ── */
#scroll-hint {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
  transition: opacity .5s;
}
.scroll-hint-text {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-dim);
}
.scroll-hint-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: hint-bob 1.8s ease-in-out infinite;
}
@keyframes hint-bob {
  0%,100% { opacity: .3; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.15); }
}
#scroll-hint.hidden { opacity: 0; }

/* ── Planet index dots ── */
#planet-index {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  pointer-events: auto;
}
.index-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--text-dim);
  transition: background .3s, transform .3s, height .3s;
}
.index-dot.active {
  background: var(--accent);
  height: 18px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════════
   SCROLL SPACER — makes page scrollable so solar system can rotate
   ══════════════════════════════════════════════════════ */
#scroll-spacer {
  /* 5 "screens" of scroll — 4 planets + 1 intro  */
  height: 500vh;
  position: relative;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════
   SECTION PANELS
   ══════════════════════════════════════════════════════ */
.section-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* panel slides in from right */
}
.panel-inner {
  position: relative;
  width: var(--panel-w);
  height: 100vh;
  background: rgba(19,19,19,.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .65s var(--easing-out);
  overflow: hidden;
}
.section-panel.open .panel-inner { transform: translateX(0); pointer-events: auto; }

body.panel-left-active .section-panel {
  justify-content: flex-start;
}

body.panel-left-active .panel-inner {
  border-left: none;
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
}

body.panel-left-active .section-panel.open .panel-inner {
  transform: translateX(0);
}

body.panel-left-active .panel-close {
  left: 1.2rem;
  right: auto;
}

.panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 5rem 2.5rem 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-accent) transparent;
}
.panel-scroll::-webkit-scrollbar { width: 4px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 4px; }
.panel-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  z-index: 10;
  color: var(--text-muted);
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
  pointer-events: auto;
}
.panel-close:hover { color: var(--accent); background: rgba(242,161,74,.08); }

/* Panel typography */
.panel-eyebrow {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: .75rem;
}
.panel-heading {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 1rem;
}
.panel-lead {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 300;
}
.panel-sub-heading {
  font-family: 'Manrope', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  letter-spacing: -.02em;
}

/* ── Stats ── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .75rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem .5rem;
  text-align: center;
}
.stat-value {
  font-family: 'Manrope', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
}
.stat-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-top: .25rem;
}

/* ── Pillars ── */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.pillar-wide { grid-column: span 2; }
.pillar-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color .3s;
}
.pillar-card:hover { border-color: var(--border-accent); }
.pillar-icon {
  font-size: 1.6rem;
  color: var(--accent);
  display: block;
  margin-bottom: .6rem;
}
.pillar-title {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.pillar-body {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}

/* ── Steps ── */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.step-card {
  background: var(--surface-hi);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  position: relative;
}
.step-number {
  font-family: 'Manrope', sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(118,117,117,.25);
  line-height: 1;
  display: block;
  margin-bottom: .3rem;
}
.step-title {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.step-body {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 300;
}

/* ── Use Cases ── */
.use-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.use-case-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  transition: border-color .3s;
}
.use-case-card:hover { border-color: var(--border-accent); }
.uc-tag {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: .45rem;
}
.uc-title {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .35rem;
  line-height: 1.3;
}
.uc-body {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}
.friction-block {
  border-left: 3px solid var(--border-accent);
  padding-left: 1.25rem;
  margin-top: .5rem;
}
.friction-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--accent);
  display: block;
  margin-bottom: .4rem;
}
.friction-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .5rem;
  line-height: 1.3;
}
.friction-body {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-weight: 300;
}

/* ── Pricing ── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .5rem;
}
.price-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
  overflow: hidden;
}
.price-card-featured {
  border-color: rgba(242,161,74,.4);
  box-shadow: 0 0 40px rgba(242,161,74,.1);
}
.featured-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--accent);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .25rem .7rem;
  border-bottom-left-radius: 8px;
}
.price-tier-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-muted);
}
.price-tier-label.accent { color: var(--accent); }
.price-amount {
  font-family: 'Manrope', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.price-period { font-size: .85rem; font-weight: 400; color: var(--text-muted); }
.price-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.6; }
.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.price-features li {
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-muted);
}
.check-icon { font-size: 1rem !important; color: var(--accent); }
.price-btn { width: 100%; padding: .75rem; font-size: .7rem; }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .3s;
}
.faq-item:hover { border-color: var(--border-accent); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  text-align: left;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  transition: color .2s;
}
.faq-item.is-open .faq-trigger { color: var(--accent); }
.faq-icon {
  font-size: 1.1rem !important;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .35s, color .3s;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s var(--easing), opacity .35s, padding .3s;
}
.faq-item.is-open .faq-answer {
  max-height: 200px;
  opacity: 1;
  padding: 0 1.1rem 1rem;
}
.faq-answer p { font-size: .78rem; color: var(--text-muted); line-height: 1.7; font-weight: 300; }

/* ══════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════ */
#cta-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  overflow: hidden;
  /* pushed below the scroll spacer */
}
.cta-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  pointer-events: none;
}
.cta-glow-a {
  width: 40vw; height: 40vw;
  left: -10vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(154,71,21,.3) 0%, transparent 70%);
}
.cta-glow-b {
  width: 35vw; height: 35vw;
  right: -8vw; top: -8vw;
  background: radial-gradient(circle, rgba(242,161,74,.2) 0%, transparent 70%);
}
.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding: 4rem 2rem;
}
.cta-heading {
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  background: linear-gradient(to right, #f0dcc5, #f2a14a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: .75rem 0 1rem;
}
.cta-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 2.5rem;
}
.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-primary { padding: .85rem 2.2rem; font-size: .78rem; }

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
#site-footer {
  position: relative;
  z-index: 10;
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 4rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: .85rem;
}
.footer-logo .material-symbols-outlined { font-size: 1.2rem; }
.footer-tagline {
  font-size: .72rem;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 220px;
  margin-bottom: 1.25rem;
}
.footer-socials { display: flex; gap: .85rem; }
.footer-social-icon {
  font-size: 1.1rem !important;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s;
}
.footer-social-icon:hover { color: var(--accent); }
.footer-col {}
.footer-col-title {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  transition: color .2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bar {
  border-top: 1px solid var(--border);
  padding: 1.25rem 2rem;
  text-align: center;
}
.footer-bar p {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════ */
html.theme-light {
  --surface:       #faf4ed;
  --surface-raised:#f4ebe0;
  --surface-card:  #ede2d5;
  --surface-hi:    #e6d6c4;
  --border:        rgba(154,71,21,.15);
  --border-accent: rgba(197,90,18,.35);
  --text:          #22160d;
  --text-muted:    #7a5a45;
  --text-dim:      #a07050;
  --accent:        #c55a12;
  --accent-dim:    #9a3d0a;
  --accent-rich:   #7a2e05;
}
html.theme-light .cta-heading {
  background: linear-gradient(to right, #4d2c16, #c55a12);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.theme-light .sun-body {
  background: radial-gradient(circle at 35% 30%,
    #fffff0 0%, #fff8c0 10%, #ffe880 25%,
    #f2a14a 42%, #c55a12 62%, #7a2e05 80%, #3a1200 100%);
}
html.theme-light #topnav { background: rgba(250,244,237,.85); }
html.theme-light .panel-inner { background: rgba(244,235,224,.9); }
html.theme-light #mobile-menu { background: var(--surface); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  #nav-cta { display: none; }
  .hamburger { display: flex; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  .stat-row { grid-template-columns: 1fr 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-wide { grid-column: span 1; }
  .steps-grid { grid-template-columns: 1fr; }
  .use-case-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  :root { --panel-w: 92vw; }
  .panel-scroll { padding: 4.5rem 1.25rem 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  #planet-index { right: .75rem; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sun-body, .sun-corona, .sun-flare, .scroll-hint-line { animation: none !important; }
  .orbit-ring, .planet { transition: none !important; }
}