@import url('assets/colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas-black);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }

/* ============================================================================
   NAV (same DNA as about.css)
   ============================================================================ */
.nav {
  position: sticky; top: 16px; z-index: 50;
  width: min(1240px, calc(100% - 48px));
  margin: 16px auto 0;
  padding: 12px 14px 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(11,11,21,0.55);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--border-hairline-dark);
  border-radius: 999px;
}
.nav .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.28em; text-transform: uppercase;
}
.nav .brand .mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4FD5FF 0%, #A32EED 55%, #F9914E 100%);
  box-shadow: 0 0 12px rgba(163,46,237,0.55);
}
.nav .links {
  display: flex; gap: 24px; font-size: 13px; font-weight: 500; color: var(--fg2);
}
.nav .links a { text-decoration: none; transition: color 160ms var(--ease-out-soft); }
.nav .links a:hover { color: var(--fg1); }
.nav .links a.current { color: var(--fg1); }
.nav .links a.current::after {
  content: ''; display: block; height: 2px; margin-top: 4px;
  background: var(--gradient-spectrum); border-radius: 999px;
}
.nav .cta {
  background: var(--fg1); color: var(--canvas-ink);
  font-size: 13px; font-weight: 700; padding: 9px 18px;
  border-radius: 999px; border: 0; cursor: pointer;
  transition: box-shadow 240ms var(--ease-out-soft);
}
.nav .cta:hover { box-shadow: 0 0 0 4px rgba(255,255,255,0.12); }

/* ============================================================================
   GLOBAL CHROME
   ============================================================================ */
.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 48px; position: relative; }
.wrap-narrow { width: min(820px, 100%); margin: 0 auto; padding: 0 48px; position: relative; }
.section { padding: 140px 0; position: relative; }
.section--tight { padding: 96px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--fg3);
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gradient-spectrum);
}
.eyebrow .num {
  font-family: var(--font-display);
  font-size: 12px; color: var(--fg3); letter-spacing: 0.18em;
}
.eyebrow .num::after { content: '·'; margin: 0 12px; color: var(--brand-purple); }
.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.02;
  letter-spacing: -0.025em; margin: 0 0 28px;
}
.h2 .grad {
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lede {
  font-size: 19px; line-height: 1.6; color: var(--fg2);
  max-width: 720px; margin: 0 0 56px; font-weight: 300;
}
.divider {
  height: 2px; width: 64px; border-radius: 999px;
  background: var(--gradient-spectrum); margin-bottom: 28px;
}

/* ============================================================================
   HERO — uses hex-sigil (Crystal archetype = Architecture)
   ============================================================================ */
.hero { position: relative; padding: 140px 0 100px; min-height: calc(100vh - 40px); display: block; overflow: hidden; }
.hero .halo {
  position: absolute; inset: -20% -10% 0 -10%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(163, 46, 237, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(60, 194, 221, 0.12) 0%, transparent 55%);
  pointer-events: none;
}
.hero .stars {
  position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 4px 4px;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative; z-index: 1;
  min-height: 70vh;
}
.hero .greek {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg3); margin-bottom: 28px;
  display: flex; align-items: center; gap: 16px;
}
.hero .greek::before {
  content: ''; width: 36px; height: 1px;
  background: linear-gradient(90deg, var(--brand-purple), transparent);
}
.hero h1,
.hero .hero-headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 6.6vw, 104px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 32px;
}

/* Cycling word at the end of the headline */
.hero-cycler {
  position: relative;
  display: inline-block;
  min-width: 5ch;
  padding-bottom: 0.30em;
  overflow: visible;
}
.hero-cycler-word {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  padding-bottom: 0.24em;
  background: linear-gradient(90deg, var(--phase-1) 0%, var(--phase-2) 50%, var(--phase-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 760ms var(--ease-out-soft), transform 760ms var(--ease-out-soft);
  filter: drop-shadow(0 0 20px rgba(167, 57, 226, 0.25));
}
.hero-cycler-word[data-active] {
  opacity: 1;
  transform: translateY(0);
}
/* The first word stays in flow to reserve space; replicas are absolutely positioned over it */
.hero-cycler-word[data-id="0"] {
  position: relative;
  visibility: visible;
}
.hero-cycler-word[data-id="0"]:not([data-active]) {
  /* Keep the first word in the flow but invisible so others can render in its place */
  visibility: hidden;
  opacity: 0;
}

.hero .sub,
.hero .hero-sub {
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--fg2);
  max-width: 560px; margin: 0 0 32px; font-weight: 300;
}
.hero .sub strong,
.hero .hero-sub strong { color: var(--fg1); font-weight: 500; }

/* Sigil hint text under the sub */
.hero-hint {
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3);
}
.hero-hint-line {
  width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--phase-1), var(--phase-2), var(--phase-3));
  opacity: 0.6;
}

/* Stage layout — center the sigil on its own column */
.sigil-stage {
  position: relative; justify-self: center;
  width: clamp(380px, 44vw, 620px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.sigil-stage .ring {
  position: absolute; inset: 0;
  border: 1px solid rgba(167, 57, 226, 0.18);
  border-radius: 50%;
}
.sigil-stage .ring.r2 { inset: 10%; border-color: rgba(60, 194, 221, 0.18); }
.sigil-stage .ring.r3 { inset: 22%; border-color: rgba(245, 140, 86, 0.18); border-style: dashed; }
.sigil-stage svg.hex {
  position: relative; width: 70%; height: 70%;
  filter:
    drop-shadow(0 0 18px rgba(60, 194, 221, 0.25))
    drop-shadow(0 0 22px rgba(167, 57, 226, 0.35))
    drop-shadow(0 0 18px rgba(245, 140, 86, 0.20));
  animation: hex-rotate 60s linear infinite;
}
.sigil-stage .core-orb {
  position: absolute;
  width: 22%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    rgba(255,255,255,0.92) 0%,
    var(--phase-1) 22%,
    var(--phase-2) 52%,
    var(--phase-3) 88%,
    color-mix(in srgb, var(--phase-3) 70%, #000) 100%);
  box-shadow:
    0 0 28px rgba(60, 194, 221, 0.32),
    0 0 60px rgba(167, 57, 226, 0.42),
    0 0 80px rgba(245, 140, 86, 0.38);
  z-index: 2;
  animation: breathe 5.4s ease-in-out infinite;
}

/* === 7 INTERACTIVE NODES === */
.sigil-stage .node {
  position: absolute;
  top: 50%; left: 50%;
  --radius: 36cqw;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle)));
  width: 32px; height: 32px;
  display: grid; place-items: center;
  text-decoration: none;
  color: inherit;
  z-index: 3;
  transition: transform 320ms var(--ease-out-soft);
}
.sigil-stage { container-type: inline-size; }
.sigil-stage .node-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0 var(--c), 0 0 10px var(--c);
  transition: box-shadow 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft);
}
.sigil-stage .node-label {
  position: absolute;
  white-space: nowrap;
  /* Anchor the label outward, away from the center, based on angle */
  left: 50%; top: 50%;
  transform-origin: 0 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(-26px)
    rotate(calc(-1 * var(--angle)));
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg1);
  background: rgba(11, 11, 21, 0.92);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border-hairline-dark));
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-out-soft), transform 240ms var(--ease-out-soft);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 16px color-mix(in srgb, var(--c) 22%, transparent);
}
.sigil-stage .node:hover .node-dot,
.sigil-stage .node:focus-visible .node-dot {
  transform: scale(1.5);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c);
}
.sigil-stage .node:hover .node-label,
.sigil-stage .node:focus-visible .node-label {
  opacity: 1;
}
.sigil-stage .node:focus { outline: none; }

@keyframes hex-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
}
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.1); }
}

/* ============================================================================
   STRATEGIC ESSENCE STRIP (between hero and story)
   ============================================================================ */
.essence-strip {
  padding: 28px 0;
  border-top: 1px solid var(--border-hairline-dark);
  border-bottom: 1px solid var(--border-hairline-dark);
  background: rgba(255,255,255,0.015);
  text-align: center;
}
.essence-strip .inner {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.005em;
  color: var(--fg1);
  display: inline-flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  justify-content: center;
}
.essence-strip .inner em {
  font-style: normal;
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.essence-strip .inner .sep { color: var(--brand-purple); font-size: 10px; }

/* ============================================================================
   ORIGIN — five-beat narrative (scroll-revealed, light text density)
   ============================================================================ */
.origin {
  position: relative;
  padding: 160px 0;
  background: var(--canvas-black);
  border-top: 1px solid var(--border-hairline-dark);
}
.origin .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 12% 18%, rgba(60, 194, 221, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 82%, rgba(245, 140, 86, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.origin > .wrap-narrow {
  position: relative; z-index: 1;
  max-width: 920px;
}

/* Header */
.origin-head {
  text-align: center;
  margin: 0 auto 96px;
}
.origin-head .divider { margin: 0 auto 28px; }
.origin-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 28px;
}
.origin-eyebrow-num {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.22em; color: var(--brand-purple);
}
.origin-eyebrow-sep { color: var(--brand-purple); }
.origin-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--fg1);
}
.origin-title-grad {
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.origin-sub {
  margin: 28px auto 0;
  max-width: 480px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.04em;
  color: var(--fg3);
}

/* The beat reel — vertical timeline */
.origin-beats {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 96px;
  position: relative;
}
/* Connector rail running down the left edge */
.origin-beats::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 18px; bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--act-1) 8%,
    var(--act-3) 28%,
    var(--act-4) 50%,
    var(--act-6) 72%,
    var(--act-7) 92%,
    transparent 100%);
  opacity: 0.35;
}

/* Each beat — number + label on a meta column, content alongside.
   Scrollytelling: only the focused beat shows its body; others collapse to just the meta. */
.beat {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 48px;
  align-items: start;
  min-height: 96px;
  cursor: pointer;
  outline: none;
}
.beat:focus-visible .beat-num::before {
  box-shadow: 0 0 0 4px var(--canvas-black), 0 0 0 6px color-mix(in srgb, var(--c) 40%, transparent), 0 0 18px var(--c);
}

.beat-meta {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  padding-top: 6px;
}
.beat-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 48px; line-height: 0.85; letter-spacing: -0.04em;
  color: var(--c);
  position: relative; z-index: 1;
  padding-left: 48px;
  opacity: 0.55;
  transition: opacity 480ms var(--ease-out-soft);
}
.beat[data-focus] .beat-num { opacity: 1; }
.beat-num::before {
  content: '';
  position: absolute;
  left: 17px; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--canvas-black);
  border: 2px solid var(--c);
  transform: translateY(-50%) scale(0.85);
  box-shadow: 0 0 0 4px var(--canvas-black), 0 0 6px transparent;
  transition: background 480ms var(--ease-out-soft), transform 480ms var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft);
}
.beat[data-focus] .beat-num::before {
  background: var(--c);
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 4px var(--canvas-black), 0 0 18px var(--c);
}
.beat-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
  padding-left: 48px;
  transition: color 480ms var(--ease-out-soft);
}
.beat[data-focus] .beat-label { color: var(--c); }

/* Body — collapses when not focused. grid-template-rows trick for smooth height. */
.beat-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-out-soft);
}
.beat[data-focus] .beat-body { grid-template-rows: 1fr; }

.beat-content {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 18px;
  max-width: 600px;
  opacity: 0;
  transform: translateY(8px);
  /* Exit: fast, no delay. Entry: slower, delayed (handled in [data-focus] rule). */
  transition:
    opacity 280ms var(--ease-out-soft) 0ms,
    transform 360ms var(--ease-out-soft) 0ms;
}
.beat[data-focus] .beat-content {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 380ms var(--ease-out-soft) 200ms,
    transform 480ms var(--ease-out-soft) 200ms;
}
.beat-statement {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--fg1);
  text-wrap: pretty;
}
.beat-statement em {
  font-style: normal;
  color: var(--c);
}
/* Special: the question beat reads larger and italic-feel */
.beat-question {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  color: var(--fg1);
  padding-left: 20px;
  border-left: 2px solid var(--c);
}
.beat-question em {
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, white 0%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.beat-detail {
  margin: 0;
  font-size: 16px; line-height: 1.65;
  color: var(--fg2);
  font-weight: 300;
  max-width: 560px;
  text-wrap: pretty;
}
.beat-detail strong {
  color: var(--fg1);
  font-weight: 500;
}
.beat-detail em {
  font-style: normal;
  color: var(--fg1);
  font-weight: 500;
}

/* Chips on beat 4 — single row, compact */
.beat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 8px;
  max-width: 100%;
}
.beat-chip {
  font-family: var(--font-display); font-weight: 400;
  font-size: 12px; letter-spacing: -0.005em;
  color: var(--fg1);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border-hairline-dark));
  background: color-mix(in srgb, var(--c) 5%, transparent);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .beat-chips { flex-wrap: wrap; }
}

/* Beat 5 — the invitation, the crescendo */
.beat-final {
  margin-top: 24px;
}
.beat-final-statement {
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  color: var(--fg1);
}
.beat-final-statement .grad-spectrum {
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  filter: drop-shadow(0 0 20px rgba(167, 57, 226, 0.30));
}

/* Bridge into Strategic Direction */
.origin-bridge {
  margin: 120px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.origin-bridge-rule {
  width: 1px; height: 64px;
  background: linear-gradient(180deg, transparent, var(--brand-purple), transparent);
  opacity: 0.6;
}
.origin-bridge-text {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
}
.origin-bridge-arrow {
  color: var(--brand-purple);
  font-size: 20px;
  animation: origin-arrow-pulse 2.4s ease-in-out infinite;
}
@keyframes origin-arrow-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
  .origin { padding: 110px 0; }
  .origin-head { margin-bottom: 64px; }
  .origin-beats { gap: 64px; }
  .origin-beats::before { left: 13px; }
  .beat { grid-template-columns: 1fr; gap: 14px; }
  .beat-meta { flex-direction: row; align-items: center; gap: 18px; }
  .beat-num { font-size: 36px; padding-left: 38px; }
  .beat-num::before { left: 9px; width: 12px; height: 12px; }
  .beat-label { padding-left: 0; }
  .beat-question { padding-left: 16px; }
  .origin-bridge { margin-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .beat,
  .beat-body,
  .beat-content,
  .beat-num,
  .beat-num::before,
  .beat-label,
  .origin-bridge-arrow { transition: none !important; animation: none !important; opacity: 1; transform: none; }
  .beat-body { grid-template-rows: 1fr !important; }
  .beat-content { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   STRATEGIC DIRECTION — triadic axis (interactive focus + ambient cards)
   ============================================================================ */
.direction-axis {
  position: relative;
  padding: 160px 0;
  border-top: 1px solid var(--border-hairline-dark);
  background: var(--canvas-black);
}
.direction-axis .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 35% at 20% 0%, rgba(60, 194, 221, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(167, 57, 226, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 80% 0%, rgba(245, 140, 86, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.direction-axis > .wrap { position: relative; z-index: 1; }
.direction-axis .dx-head { text-align: center; margin-bottom: 64px; }
.direction-axis .dx-head .eyebrow { justify-content: center; display: inline-flex; }
.direction-axis .dx-head .h2 { margin: 0 auto; max-width: 880px; }
.direction-axis .dx-caption {
  margin: 24px auto 0;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}

/* The axis with rail and 3 cards */
.dx-axis {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

/* Connecting horizontal rail */
.dx-rail {
  position: relative;
  height: 40px;
  margin-bottom: 12px;
}
.dx-rail-line {
  position: absolute;
  top: 50%; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--phase-1) 14%,
    var(--phase-2) 50%,
    var(--phase-3) 86%,
    transparent 100%);
  opacity: 0.4;
  transform: translateY(-50%);
}
.dx-rail-tick {
  position: absolute;
  top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--canvas-black);
  border: 1.5px solid var(--fg3);
  transform: translate(-50%, -50%);
  transition: border-color 280ms var(--ease-out-soft);
}
.dx-rail-tick[data-pos="1"] { left: 16.66%; }
.dx-rail-tick[data-pos="2"] { left: 50%; }
.dx-rail-tick[data-pos="3"] { left: 83.34%; }
.dx-axis[data-active="1"] .dx-rail-tick[data-pos="1"] { border-color: var(--phase-1); }
.dx-axis[data-active="2"] .dx-rail-tick[data-pos="2"] { border-color: var(--phase-2); }
.dx-axis[data-active="3"] .dx-rail-tick[data-pos="3"] { border-color: var(--phase-3); }

/* The moving puck */
.dx-rail-puck {
  position: absolute;
  top: 50%; left: 16.66%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--canvas-black);
  border: 2px solid var(--phase-1);
  transform: translate(-50%, -50%);
  transition: left 480ms var(--ease-out-soft), border-color 480ms var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft);
  z-index: 2;
}
.dx-rail-puck::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--phase-1);
  box-shadow: 0 0 14px var(--phase-1);
  transition: background 480ms var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft);
}
.dx-axis[data-active="2"] .dx-rail-puck { left: 50%; border-color: var(--phase-2); }
.dx-axis[data-active="2"] .dx-rail-puck::before { background: var(--phase-2); box-shadow: 0 0 14px var(--phase-2); }
.dx-axis[data-active="3"] .dx-rail-puck { left: 83.34%; border-color: var(--phase-3); }
.dx-axis[data-active="3"] .dx-rail-puck::before { background: var(--phase-3); box-shadow: 0 0 14px var(--phase-3); }

/* The 3-card row — columns expand/compress on focus.
   Stability strategy: only one property animates the layout (grid-template-columns);
   inside each card NOTHING animates layout (no display: none, no font-size changes).
   Statement uses opacity only; the inner content sits at a fixed min-width so text
   never re-wraps during the column transition. */
.dx-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  transition: grid-template-columns 560ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns;
}
.dx-axis[data-active="1"] .dx-row { grid-template-columns: 2.2fr 1fr 1fr; }
.dx-axis[data-active="2"] .dx-row { grid-template-columns: 1fr 2.2fr 1fr; }
.dx-axis[data-active="3"] .dx-row { grid-template-columns: 1fr 1fr 2.2fr; }

/* Each card */
.dx-card {
  appearance: none;
  background: transparent;
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;             /* allow column to size below content's intrinsic width */
  overflow: hidden;          /* clip the inner pre-laid content when narrow */
  position: relative;

  padding: 36px 32px 28px;
  min-height: 360px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);

  /* Container queries would help, but instead we use a stable inner layout: */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;

  transition:
    border-color 480ms var(--ease-out-soft),
    background 480ms var(--ease-out-soft),
    box-shadow 480ms var(--ease-out-soft);
  contain: layout style;     /* isolate each card's reflows from neighbors */
}
.dx-card:focus { outline: none; }
.dx-card:focus-visible {
  border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
}

/* Stable inner content frame — fixed min-width so text-wrap stays constant
   regardless of how narrow or wide the outer card becomes during animation */
.dx-card > * {
  min-width: 0;
}
.dx-card .dx-card-head,
.dx-card .dx-statement,
.dx-card .dx-footer {
  width: 100%;
  min-width: 280px;          /* internal layout always uses ≥280px for wrapping */
  max-width: 540px;
}

/* Top accent line per card */
.dx-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c);
  opacity: 0;
  transition: opacity 480ms var(--ease-out-soft), box-shadow 480ms var(--ease-out-soft);
}
.dx-card[data-active]::before { opacity: 1; box-shadow: 0 0 14px var(--c); }

/* Giant Roman numeral watermark — opacity only, never scale or size change */
.dx-numeral {
  position: absolute;
  right: 16px; bottom: 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 132px; line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--c);
  opacity: 0.10;
  pointer-events: none;
  transition: opacity 480ms var(--ease-out-soft);
}
.dx-card[data-active] .dx-numeral { opacity: 0.24; }

/* Header — sizes never change between states */
.dx-card-head {
  display: flex; align-items: baseline; gap: 14px;
  position: relative; z-index: 1;
}
.dx-card-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c);
  white-space: nowrap;
}
.dx-card-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: -0.015em;
  color: var(--fg1);
  white-space: nowrap;
}
.dx-card-tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  flex-shrink: 0;
}

/* Statement — always in the layout; only opacity changes (no display: none) */
.dx-statement {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--fg1);
  position: relative; z-index: 1;
  text-wrap: pretty;
  opacity: 0;
  transition: opacity 320ms var(--ease-out-soft) 0ms;
}
.dx-card[data-active] .dx-statement {
  opacity: 1;
  transition-delay: 280ms;   /* waits for the column expansion before fading in */
}
.dx-statement em {
  font-style: normal;
  color: var(--c);
  font-weight: 500;
}

/* Footer caption — fades like statement to keep ambient cards minimal */
.dx-footer {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3);
  position: relative; z-index: 1;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline-dark);
  opacity: 0.35;
  transition: opacity 320ms var(--ease-out-soft), color 480ms var(--ease-out-soft);
}
.dx-card[data-active] .dx-footer {
  color: var(--c);
  opacity: 1;
  transition-delay: 280ms;
}

/* Active card background tint */
.dx-card[data-active] {
  border-color: color-mix(in srgb, var(--c) 40%, var(--border-hairline-dark));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 7%, transparent) 0%,
    rgba(255,255,255,0.015) 100%);
  box-shadow: 0 0 60px color-mix(in srgb, var(--c) 14%, transparent);
}

/* Hover hint for ambient cards */
.dx-card:not([data-active]):hover {
  border-color: color-mix(in srgb, var(--c) 30%, var(--border-hairline-dark));
}

/* Responsive: stack on small screens, no column animation */
@media (max-width: 900px) {
  .direction-axis { padding: 110px 0; }
  .dx-rail { display: none; }
  .dx-row,
  .dx-axis[data-active="1"] .dx-row,
  .dx-axis[data-active="2"] .dx-row,
  .dx-axis[data-active="3"] .dx-row {
    grid-template-columns: 1fr;
    gap: 12px;
    transition: none;
  }
  .dx-card { min-height: 0; padding: 28px 22px 22px; overflow: visible; }
  .dx-card .dx-card-head,
  .dx-card .dx-statement,
  .dx-card .dx-footer { min-width: 0; max-width: 100%; }
  .dx-statement,
  .dx-footer { opacity: 1; }
  .dx-numeral { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .dx-row { transition: none; }
  .dx-card,
  .dx-card::before,
  .dx-statement,
  .dx-footer,
  .dx-numeral,
  .dx-rail-puck { transition: none !important; }
}

/* ============================================================================
   METANOIA ECOSYSTEM — featured card + 6 minimal grid cards
   ============================================================================ */
.ecosystem {
  position: relative;
  padding: 160px 0;
  border-top: 1px solid var(--border-hairline-dark);
  background: var(--canvas-black);
}
.ecosystem .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(60, 194, 221, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(245, 140, 86, 0.04) 0%, transparent 60%);
  pointer-events: none;
}
.ecosystem > .wrap { position: relative; z-index: 1; }
.ecosystem .es-head { text-align: center; margin-bottom: 56px; }
.ecosystem .es-head .eyebrow { justify-content: center; display: inline-flex; }
.ecosystem .es-head .h2 { margin: 0 auto; max-width: 880px; }
.ecosystem .es-head .lede { margin: 24px auto 0; text-align: center; max-width: 680px; font-size: 17px; }

/* -------- Featured card (Metanoia OS) -------- */
.es-featured {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto 56px;
  padding: 28px 36px 28px 40px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 20px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 6%, transparent) 0%,
    rgba(255,255,255,0.015) 100%);
  overflow: hidden;
  transition: border-color 240ms var(--ease-out-soft), transform 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft);
}
.es-featured::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c);
  box-shadow: 0 0 14px var(--c);
}
.es-featured:hover {
  border-color: var(--c);
  transform: translateY(-2px);
  box-shadow: 0 0 50px color-mix(in srgb, var(--c) 18%, transparent);
}

/* ============================================================================
   MATURITY SPINE — bidirectional indicator between featured and grid
   ============================================================================ */
.es-spine {
  max-width: 1080px;
  margin: 24px auto 36px;
  display: grid;
  gap: 14px;
}
.es-spine-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.es-spine-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
}
.es-spine-tag {
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg3);
  transition: color 320ms var(--ease-out-soft);
}
.es-spine-tag[data-active] { color: var(--fg1); }

.es-spine-track {
  position: relative;
  height: 64px;
  padding: 0 4px;
}
.es-spine-rail {
  position: absolute;
  left: 0; right: 0; top: 18px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--act-2) 8%,
    var(--act-4) 30%,
    var(--act-5) 50%,
    var(--act-6) 70%,
    var(--act-1) 96%,
    transparent 100%);
  opacity: 0.35;
}

/* Stage labels — now ALL below the rail, like Design/Build/Beta */
.es-spine-stage {
  position: absolute;
  top: 36px;
  left: var(--pos);
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
  white-space: nowrap;
}
/* Concept & Live keep their phase color */
.es-spine-stage-l { color: var(--act-1); transform: translateX(0); left: 0; }
.es-spine-stage-r { color: var(--act-1); transform: translateX(-100%); left: auto; right: 0; }

/* Gridline ticks (no labels — labels are shared with stage labels above) */
.es-spine-grid {
  position: absolute;
  left: var(--pos); top: 18px;
  transform: translate(-50%, -50%);
  width: 1px; height: 10px;
  background: rgba(255,255,255,0.10);
}
/* Accent ticks for Concept & Live — match the colored stage labels */
.es-spine-grid-accent {
  background: var(--act-1);
  opacity: 0.55;
  box-shadow: 0 0 6px var(--act-1);
}

/* Dots — anchored on the rail */
.es-spine-dot {
  appearance: none; background: transparent; border: 0;
  position: absolute;
  left: var(--pos); top: 18px;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  padding: 0;
  cursor: pointer;
  font: inherit; color: inherit;
  display: grid; place-items: center;
  transition: transform 320ms var(--ease-out-soft);
}
.es-spine-dot:focus { outline: none; }
.es-spine-dot:focus-visible { transform: translate(-50%, -50%) scale(1.15); }

.es-spine-dot-inner {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--canvas-black);
  border: 2px solid var(--c);
  transition:
    background 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft),
    transform 320ms var(--ease-out-soft);
}
.es-spine-dot:hover .es-spine-dot-inner,
.es-spine-dot:focus-visible .es-spine-dot-inner {
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 12px var(--c);
}

/* Pulsing ring on the Live dot */
.es-spine-dot-live .es-spine-dot-inner {
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.es-spine-dot-pulse {
  position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--c);
  animation: es-spine-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes es-spine-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* Floating label that appears on hover */
.es-spine-dot-label {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 500;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg1);
  background: rgba(11, 11, 21, 0.92);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border-hairline-dark));
  padding: 7px 12px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-out-soft), transform 240ms var(--ease-out-soft);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 18px color-mix(in srgb, var(--c) 20%, transparent);
  z-index: 2;
}
.es-spine-dot-live .es-spine-dot-label {
  /* Right-most dot would clip; anchor right */
  left: auto; right: 50%;
  transform: translate(50%, 4px);
}
.es-spine-dot:hover .es-spine-dot-label,
.es-spine-dot:focus-visible .es-spine-dot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.es-spine-dot-live:hover .es-spine-dot-label,
.es-spine-dot-live:focus-visible .es-spine-dot-label {
  transform: translate(50%, 0);
}

/* ===== Bidirectional highlight ===== */
/* When section has a hovered prod, dim everything else */
.ecosystem[data-hovered] .es-card,
.ecosystem[data-hovered] .es-featured {
  opacity: 0.4;
  filter: saturate(0.7);
  transition: opacity 280ms var(--ease-out-soft), filter 280ms var(--ease-out-soft), border-color 280ms var(--ease-out-soft), transform 280ms var(--ease-out-soft);
}
.ecosystem[data-hovered] .es-spine-dot .es-spine-dot-inner {
  opacity: 0.45;
}
/* Active item — full strength */
.ecosystem[data-hovered-prod="1"] .es-featured,
.ecosystem[data-hovered-prod="2"] [data-prod="2"]:not(.es-spine-dot),
.ecosystem[data-hovered-prod="3"] [data-prod="3"]:not(.es-spine-dot),
.ecosystem[data-hovered-prod="4"] [data-prod="4"]:not(.es-spine-dot),
.ecosystem[data-hovered-prod="5"] [data-prod="5"]:not(.es-spine-dot),
.ecosystem[data-hovered-prod="6"] [data-prod="6"]:not(.es-spine-dot),
.ecosystem[data-hovered-prod="7"] [data-prod="7"]:not(.es-spine-dot) {
  opacity: 1;
  filter: none;
  border-color: var(--c);
  transform: translateY(-2px);
  box-shadow: 0 0 50px color-mix(in srgb, var(--c) 22%, transparent);
}
/* Active dot — full strength + scaled */
.ecosystem[data-hovered-prod="1"] .es-spine-dot[data-prod="1"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="2"] .es-spine-dot[data-prod="2"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="3"] .es-spine-dot[data-prod="3"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="4"] .es-spine-dot[data-prod="4"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="5"] .es-spine-dot[data-prod="5"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="6"] .es-spine-dot[data-prod="6"] .es-spine-dot-inner,
.ecosystem[data-hovered-prod="7"] .es-spine-dot[data-prod="7"] .es-spine-dot-inner {
  opacity: 1;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c);
  transform: scale(1.15);
}

@media (max-width: 720px) {
  .es-spine { margin: 16px auto 24px; }
  .es-spine-track { height: 44px; }
  .es-spine-grid-lbl { font-size: 8px; letter-spacing: 0.16em; }
  .es-spine-stage { font-size: 9px; letter-spacing: 0.22em; }
  .es-spine-dot { width: 22px; height: 22px; }
  .es-spine-dot-label { font-size: 10px; letter-spacing: 0.14em; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .es-spine-dot-pulse { animation: none; }
}
.esf-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.es-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.es-badge-live {
  border: 1px solid var(--c);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.es-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0 var(--c);
  animation: es-pulse 2.2s ease-out infinite;
}
@keyframes es-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 0%, transparent); }
}
.esf-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 48px; line-height: 0.85; letter-spacing: -0.04em;
  color: var(--c);
  opacity: 0.4;
}
.esf-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.esf-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--fg1);
}
.esf-desc {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: var(--fg2); font-weight: 300;
}
.esf-cta {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg1); font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 240ms var(--ease-out-soft), border-color 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft);
}
.esf-cta:hover {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 25%, transparent);
}
.esf-cta span { display: inline-block; margin-left: 6px; transition: transform 240ms var(--ease-out-soft); }
.esf-cta:hover span { transform: translateX(3px); }

/* -------- In Development label -------- */
.es-dev-label {
  max-width: 1080px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.es-tag-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-hairline-dark) 50%, transparent);
}
.es-tag {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}

/* -------- 6 minimal grid cards -------- */
.es-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.es-card {
  position: relative;
  padding: 24px 22px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  transition: border-color 240ms var(--ease-out-soft), transform 240ms var(--ease-out-soft);
}
.es-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--c);
  opacity: 0.55;
  transition: opacity 240ms var(--ease-out-soft), box-shadow 240ms var(--ease-out-soft);
}
.es-card:hover {
  border-color: var(--c);
  transform: translateY(-3px);
}
.es-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px var(--c);
}
.es-card .esc-head {
  display: flex; align-items: center; justify-content: space-between;
}
.es-card .esc-num {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c); font-weight: 600;
}
.es-card .esc-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; letter-spacing: -0.015em; line-height: 1.15;
  color: var(--fg1);
}
.es-card .esc-desc {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--fg2); font-weight: 300;
}

/* Minimal bridge to Approach */
.es-bridge-min {
  margin: 96px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4; letter-spacing: -0.015em;
  color: var(--fg2);
}
.es-bridge-min em {
  font-style: normal; color: var(--fg1); font-weight: 400;
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================================
   OUR APPROACH · 7 PILLARS — interactive "temple" (minimal copy, full layout)
   ============================================================================ */
.approach {
  position: relative;
  padding: 160px 0;
  border-top: 1px solid var(--border-hairline-dark);
  background: var(--canvas-black);
}
.approach::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(167,57,226,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.approach > .wrap { position: relative; z-index: 1; }
.approach .ap-head { text-align: center; margin-bottom: 64px; }
.approach .ap-head .eyebrow { justify-content: center; display: inline-flex; }
.approach .ap-head .h2 { margin: 0 auto; max-width: 880px; }
.approach .ap-head .lede { margin: 24px auto 0; text-align: center; max-width: 720px; font-size: 17px; }

/* Pillars Room — interactive horizontal temple */
.pillars-room {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

/* Stage above the pillars where active detail renders */
.pillar-stage {
  position: relative;
  min-height: 200px;
  margin-bottom: 56px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  padding: 36px 40px;
  overflow: hidden;
}
.pillar-stage::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-spectrum);
  opacity: 0.85;
}

.stage-panel {
  display: none;
  grid-template-columns: 96px 1fr;
  gap: 36px;
  align-items: start;
  animation: stage-fade-in 320ms var(--ease-out-soft) both;
}
.stage-panel[data-active] { display: grid; }
@keyframes stage-fade-in {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.stage-panel .stage-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 84px; line-height: 0.85; letter-spacing: -0.04em;
  color: var(--c, var(--act-1));
  opacity: 0.85;
}
.stage-panel[data-id="1"] { --c: var(--act-1); }
.stage-panel[data-id="2"] { --c: var(--act-2); }
.stage-panel[data-id="3"] { --c: var(--act-3); }
.stage-panel[data-id="4"] { --c: var(--act-4); }
.stage-panel[data-id="5"] { --c: var(--act-5); }
.stage-panel[data-id="6"] { --c: var(--act-6); }
.stage-panel[data-id="7"] { --c: var(--act-7); }

.stage-panel .stage-text { display: grid; gap: 12px; max-width: 720px; }
.stage-panel .stage-name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1; letter-spacing: -0.02em;
  color: var(--fg1);
}
.stage-panel .stage-lead {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--c);
}
.stage-panel .stage-detail {
  margin: 0;
  font-size: 16px; line-height: 1.6; color: var(--fg2);
  font-weight: 300;
  text-wrap: balance;
  /* Lock to exactly 2 lines — keeps every pillar visually consistent */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.6 * 16px);
}
.stage-panel .stage-detail em {
  font-style: normal; color: var(--fg1); font-weight: 500;
}

/* The pillars row */
.pillars-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
  align-items: end;
}
.pillar-col {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit; color: inherit;
  display: grid;
  grid-template-rows: 6px 1fr 6px;
  height: 280px;
  position: relative;
  transition: transform 320ms var(--ease-out-soft);
}
.pillar-col:focus { outline: none; }
.pillar-col:focus-visible .shaft {
  box-shadow: 0 0 0 2px var(--c), 0 0 24px var(--c);
}

.pillar-col .cap,
.pillar-col .base {
  background: var(--c);
  opacity: 0.6;
  border-radius: 2px;
  transition: opacity 320ms var(--ease-out-soft);
}

.pillar-col .shaft {
  position: relative;
  border-radius: 4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 50%,
    rgba(255,255,255,0.05) 100%);
  border: 1px solid var(--border-hairline-dark);
  border-top: 0; border-bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 18px 0;
  overflow: hidden;
  transition:
    background 320ms var(--ease-out-soft),
    border-color 320ms var(--ease-out-soft),
    box-shadow 320ms var(--ease-out-soft);
}
.pillar-col .shaft::before {
  content: '';
  position: absolute;
  left: 50%; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--c) 50%, transparent 100%);
  opacity: 0.25;
  transform: translateX(-50%);
  transition: opacity 320ms var(--ease-out-soft);
}

.pillar-col .hname {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg2);
  transition: color 320ms var(--ease-out-soft), letter-spacing 320ms var(--ease-out-soft);
  text-align: center;
  padding: 0 4px;
}
.pillar-col .hnum {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--fg3);
  transition: color 320ms var(--ease-out-soft);
}

.pillar-col:hover,
.pillar-col[data-active] {
  transform: translateY(-6px);
}
.pillar-col:hover .cap,
.pillar-col:hover .base,
.pillar-col[data-active] .cap,
.pillar-col[data-active] .base {
  opacity: 1;
  box-shadow: 0 0 12px var(--c);
}
.pillar-col:hover .shaft,
.pillar-col[data-active] .shaft {
  border-color: var(--c);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 12%, transparent) 0%,
    color-mix(in srgb, var(--c) 4%, transparent) 50%,
    color-mix(in srgb, var(--c) 12%, transparent) 100%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c) 22%, transparent);
}
.pillar-col:hover .shaft::before,
.pillar-col[data-active] .shaft::before { opacity: 0.65; }
.pillar-col:hover .hname,
.pillar-col[data-active] .hname { color: var(--fg1); letter-spacing: 0.08em; }
.pillar-col:hover .hnum,
.pillar-col[data-active] .hnum { color: var(--c); }

.pillars-floor {
  margin-top: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--act-1) 8%, var(--act-2) 22%, var(--act-3) 36%,
    var(--act-4) 50%,
    var(--act-5) 64%, var(--act-6) 78%, var(--act-7) 92%,
    transparent 100%);
  opacity: 0.5;
}
.approach {
  position: relative;
  padding: 160px 0;
  border-top: 1px solid var(--border-hairline-dark);
  background: var(--canvas-black);
}
.approach::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(167,57,226,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.approach > .wrap { position: relative; z-index: 1; }
.approach .ap-head { text-align: center; margin-bottom: 80px; }
.approach .ap-head .eyebrow { justify-content: center; display: inline-flex; }
.approach .ap-head .h2 { margin-left: auto; margin-right: auto; max-width: 920px; }
.approach .ap-head .lede { margin-left: auto; margin-right: auto; text-align: center; }

/* ============================================================================
   OUR VALUES · 7 DECISION ANCHORS — interactive compass
   ============================================================================ */
.anchors {
  position: relative;
  padding: 140px 0 160px;
  background: var(--canvas-black);
  border-top: 1px solid var(--border-hairline-dark);
}
.anchors .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(60, 194, 221, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(245, 140, 86, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.anchors > .wrap { position: relative; z-index: 1; }
.anchors .ap-head { text-align: center; margin-bottom: 80px; }
.anchors .ap-head .eyebrow { justify-content: center; display: inline-flex; }
.anchors .ap-head .h2 { margin-left: auto; margin-right: auto; max-width: 920px; }
.anchors .ap-head .lede {
  margin-left: auto; margin-right: auto; text-align: center; max-width: 800px;
}
.anchors .ap-head .lede em { font-weight: 500; }

/* ---- Compass container ---- */
.anchors-compass {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  --active-c: var(--act-1);
  container-type: inline-size;
}
.anchors-compass .compass-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: ring-rotate 80s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Center stage ---- */
.compass-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(260px, 42%, 340px);
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.compass-center::before {
  /* Subtle glow halo behind the active stage, tinted by active color */
  content: '';
  position: absolute; inset: -40px;
  background: radial-gradient(circle, var(--active-c) 0%, transparent 65%);
  opacity: 0.18;
  filter: blur(40px);
  z-index: -1;
  border-radius: 50%;
  transition: opacity 320ms var(--ease-out-soft);
}

.cv-panel {
  display: none;
  animation: cv-fade 320ms var(--ease-out-soft) both;
}
.cv-panel[data-active] { display: block; }
@keyframes cv-fade {
  from { transform: scale(0.98); }
  to   { transform: scale(1); }
}
.cv-panel[data-id="1"] { --c: var(--act-1); }
.cv-panel[data-id="2"] { --c: var(--act-2); }
.cv-panel[data-id="3"] { --c: var(--act-3); }
.cv-panel[data-id="4"] { --c: var(--act-4); }
.cv-panel[data-id="5"] { --c: var(--act-5); }
.cv-panel[data-id="6"] { --c: var(--act-6); }
.cv-panel[data-id="7"] { --c: var(--act-7); }

.cv-panel .cv-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c); font-weight: 600;
  margin-bottom: 16px;
}
.cv-panel .cv-name {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1; letter-spacing: -0.025em;
  color: var(--fg1);
}
.cv-panel .cv-statement {
  margin: 0 0 28px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 18px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--fg2);
}
.cv-panel .cv-statement em {
  font-style: normal; color: var(--c); font-weight: 500;
}
.cv-panel .cv-question-block {
  padding-top: 20px;
  border-top: 1px solid var(--border-hairline-dark);
  display: grid; gap: 8px;
}
.cv-panel .cv-q-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}
.cv-panel .cv-question {
  margin: 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--fg1); font-weight: 300;
}

/* ---- Anchor nodes around the ring ---- */
.anchor-node {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit; color: inherit;

  position: absolute;
  top: 50%; left: 50%;
  --radius: 38cqw;
  /* rotate around center → translate outward → counter-rotate so content stays upright */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle)));

  display: grid;
  justify-items: center;
  gap: 6px;
  transition: transform 320ms var(--ease-out-soft);
  z-index: 3;
}
.anchor-node:focus { outline: none; }

.anchor-node .an-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--canvas-black);
  border: 2px solid var(--c);
  transition: background 320ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft);
}
.anchor-node .an-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg2);
  transition: color 320ms var(--ease-out-soft);
}
.anchor-node .an-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg3);
  transition: color 320ms var(--ease-out-soft);
}

.anchor-node:hover,
.anchor-node[data-active] {
  /* push outward 8px on hover */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * var(--radius) - 8px))
    rotate(calc(-1 * var(--angle)));
}
.anchor-node:hover .an-dot,
.anchor-node[data-active] .an-dot {
  background: var(--c);
  transform: scale(1.15);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent),
    0 0 18px var(--c);
}
.anchor-node:hover .an-name,
.anchor-node[data-active] .an-name { color: var(--fg1); }
.anchor-node:hover .an-num,
.anchor-node[data-active] .an-num  { color: var(--c); }
.anchor-node:focus-visible .an-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 18px var(--c);
}

/* ============================================================================
   VALUES STAGE — wheel ↔ radar share the SAME circular container
   ============================================================================ */
.values-stage { position: relative; max-width: 1120px; margin: 0 auto; }
.values-mode-toggle {
  display: inline-flex;
  margin: 0 auto 48px;
  padding: 4px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  position: relative;
  left: 50%; transform: translateX(-50%);
}
.vm-btn {
  appearance: none; border: 0;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg3);
  background: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 200ms var(--ease-out-soft), background 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft);
}
.vm-btn:hover { color: var(--fg1); }
.vm-btn[data-active] {
  color: var(--canvas-ink);
  background: var(--fg1);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.vm-btn .vm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg3);
  transition: background 200ms var(--ease-out-soft), box-shadow 200ms var(--ease-out-soft);
}
.vm-btn[data-target-mode="wheel"]   .vm-dot { background: var(--act-1); }
.vm-btn[data-target-mode="radar"]   .vm-dot { background: var(--act-7); }
.vm-btn[data-active] .vm-dot { box-shadow: 0 0 10px currentColor; }

/* ============================================================================
   Shared compass container — both wheel and radar render inside this circle
   ============================================================================ */
/* Note: .anchors-compass base sizing rules are inherited from above */

/* RADAR CHART — overlays compass at same viewBox geometry */
.radar-chart {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none; /* container catches; only .rp-hit catches via re-enable */
  transition: opacity 360ms var(--ease-out-soft);
}
.radar-chart .radar-points { pointer-events: auto; }
.radar-chart .rp { cursor: pointer; }
.radar-poly { transition: opacity 360ms var(--ease-out-soft); }
.radar-poly-self { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.18)); }
.radar-poly-user { filter: drop-shadow(0 0 18px rgba(167, 57, 226, 0.45)); }
.radar-points .rp-self { fill: var(--c, #D6DCE6); filter: drop-shadow(0 0 6px var(--c, rgba(214, 220, 230, 0.55))); transition: r 240ms var(--ease-out-soft); }
.radar-points .rp-user { fill: var(--c, #A739E2); filter: drop-shadow(0 0 8px var(--c, #A739E2)); transition: r 240ms var(--ease-out-soft); }
.radar-points .rp-hit  { fill: transparent; }
.radar-points .rp:hover .rp-self,
.radar-points .rp:focus-within .rp-self,
.radar-points .rp:hover .rp-user,
.radar-points .rp:focus-within .rp-user { r: 7; }

.radar-labels text {
  fill: var(--fg2);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* TOOLTIP — anchored inside compass */
.radar-tooltip {
  position: absolute;
  pointer-events: none;
  min-width: 200px;
  padding: 14px 16px;
  background: rgba(11, 11, 21, 0.95);
  border: 1px solid rgba(167, 57, 226, 0.35);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 24px rgba(167,57,226,0.18);
  backdrop-filter: blur(12px);
  z-index: 10;
}
.radar-tooltip[hidden] { display: none; }
.radar-tooltip .tt-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--fg1);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline-dark);
}
.radar-tooltip .tt-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px; align-items: center;
  font-size: 12px; padding: 4px 0;
}
.radar-tooltip .tt-dot { width: 8px; height: 8px; border-radius: 50%; }
.radar-tooltip .tt-row-self .tt-dot { background: #D6DCE6; box-shadow: 0 0 8px rgba(214, 220, 230, 0.55); }
.radar-tooltip .tt-row-user .tt-dot { background: #A739E2; box-shadow: 0 0 8px #A739E2; }
.radar-tooltip .tt-label { color: var(--fg3); letter-spacing: 0.04em; }
.radar-tooltip .tt-score { font-family: var(--font-display); color: var(--fg1); font-size: 13px; font-weight: 600; }

/* ============================================================================
   Mode visibility — same circle, different occupants
   ============================================================================ */
/* WHEEL MODE (default) */
.values-stage[data-mode="wheel"] .radar-chart,
.values-stage[data-mode="wheel"] .radar-tooltip,
.values-stage[data-mode="wheel"] .radar-legend,
.values-stage[data-mode="wheel"] .radar-extras,
.values-stage[data-mode="wheel"] .radar-microcopy { display: none; }

/* RADAR MODE — hide compass interactives but keep the shared dashed ring */
.values-stage[data-mode="radar"] .compass-center,
.values-stage[data-mode="radar"] .anchor-node { display: none; }
.values-stage[data-mode="radar"] .compass-ring { opacity: 0.55; }

/* ============================================================================
   Radar extras — laid out as a row below the shared compass
   ============================================================================ */
.radar-extras {
  margin: 24px auto 0;
  max-width: 720px;
  display: block;
}

.rank-card {
  position: relative;
  padding: 28px 32px 28px;
  border: 1px solid rgba(167, 57, 226, 0.30);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(167, 57, 226, 0.08) 0%, rgba(255,255,255,0.015) 100%);
  overflow: hidden;
}
.rank-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-spectrum);
}

.rk-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-hairline-dark);
}
.rk-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
  white-space: nowrap;
}
.rk-meta {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: flex-end;
}
.rk-meta-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px;
}
.rk-meta-k {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}
.rk-meta-v {
  font-family: var(--font-display);
  font-size: 13px; color: var(--fg1);
}
.rk-meta-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg3); opacity: 0.5;
}
.rk-meta-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--act-1);
  font-weight: 600;
}
.rm-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--act-1);
  box-shadow: 0 0 0 0 rgba(60, 194, 221, 0.6);
  animation: rm-pulse 2s ease-out infinite;
}
@keyframes rm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(60, 194, 221, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(60, 194, 221, 0); }
}

.rk-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}
.rk-rank { display: flex; align-items: baseline; gap: 4px; line-height: 0.85; }
.rk-rank-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 96px; letter-spacing: -0.05em;
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rk-rank-sep,
.rk-rank-max { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.02em; color: var(--fg3); }
.rk-info { display: grid; gap: 6px; }
.rk-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.015em; color: var(--fg1); }
.rk-score { font-size: 13px; color: var(--fg2); }
.rk-score strong { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--fg1); }
.rk-note { font-size: 11.5px; color: var(--fg3); letter-spacing: 0.02em; }

/* ============================================================================
   Minimal inline legend (just below the chart, no card chrome)
   ============================================================================ */
.radar-legend {
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  background: transparent;
  border: 0;
  padding: 0;
}
.radar-legend .lg-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fg2);
}
.radar-legend .lg-swatch {
  display: inline-block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
}
.radar-legend .lg-self {
  background: rgba(220, 226, 236, 0.7);
  box-shadow: 0 0 6px rgba(220, 226, 236, 0.35);
}
.radar-legend .lg-user {
  background: repeating-linear-gradient(
    90deg,
    #3CC2DD 0 5px,
    transparent 5px 8px,
    #A739E2 8px 13px,
    transparent 13px 16px,
    #F58C56 16px 21px,
    transparent 21px 24px,
    #3CC2DD 24px 29px,
    transparent 29px 32px,
    #A739E2 32px 37px,
    transparent 37px 40px
  );
  box-shadow: 0 0 8px rgba(167, 57, 226, 0.4);
}

.rank-card {
  position: relative;
  padding: 28px 32px 28px;
  border: 1px solid rgba(167, 57, 226, 0.30);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(167, 57, 226, 0.08) 0%, rgba(255,255,255,0.015) 100%);
  overflow: hidden;
}

.radar-legend {
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  background: transparent;
  border: 0;
  padding: 0;
}
.radar-legend .lg-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fg2);
}
.radar-legend .lg-swatch {
  display: inline-block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
}
.radar-legend .lg-self {
  background: rgba(220, 226, 236, 0.7);
  box-shadow: 0 0 6px rgba(220, 226, 236, 0.35);
}
.radar-legend .lg-user {
  background: repeating-linear-gradient(
    90deg,
    #3CC2DD 0 5px,
    transparent 5px 8px,
    #A739E2 8px 13px,
    transparent 13px 16px,
    #F58C56 16px 21px,
    transparent 21px 24px,
    #3CC2DD 24px 29px,
    transparent 29px 32px,
    #A739E2 32px 37px,
    transparent 37px 40px
  );
  box-shadow: 0 0 8px rgba(167, 57, 226, 0.4);
}

.radar-meta {
  display: none;
}

.radar-microcopy {
  margin: 48px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5; letter-spacing: -0.005em;
  color: var(--fg2);
}
.radar-microcopy em {
  font-style: normal;
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================================
   PROMISE — three interactive pledges (tabs + cross-fade panels)
   ============================================================================ */
.promise {
  position: relative;
  padding: 140px 0;
  border-top: 1px solid var(--border-hairline-dark);
}
.promise .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(60,194,221,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(245,140,86,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.promise > .wrap { position: relative; z-index: 1; }

.promise-head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 64px;
}
.promise-head .eyebrow { justify-content: center; display: inline-flex; }
.promise-head .h2 { margin: 0 auto; }

.promise-stage {
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- Tabs ---- */
.promise-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.pp-tab {
  appearance: none;
  border: 1px solid var(--border-hairline-dark);
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
  padding: 20px 24px;
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: center;
  transition:
    transform 280ms var(--ease-out-soft),
    border-color 280ms var(--ease-out-soft),
    background 280ms var(--ease-out-soft),
    box-shadow 280ms var(--ease-out-soft);
  position: relative;
  overflow: hidden;
}
.pp-tab::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c);
  opacity: 0;
  transition: opacity 280ms var(--ease-out-soft);
}
.pp-tab:hover { transform: translateY(-2px); border-color: var(--c); }
.pp-tab[data-active] {
  background: color-mix(in srgb, var(--c) 6%, transparent);
  border-color: var(--c);
  box-shadow: 0 0 32px color-mix(in srgb, var(--c) 18%, transparent);
}
.pp-tab[data-active]::before { opacity: 1; box-shadow: 0 0 12px var(--c); }
.pp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }

.pp-tab-num {
  grid-row: 1 / 3;
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--c);
  opacity: 0.55;
  transition: opacity 280ms var(--ease-out-soft);
}
.pp-tab[data-active] .pp-tab-num { opacity: 1; }
.pp-tab-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; letter-spacing: -0.015em; line-height: 1.1;
  color: var(--fg1);
}
.pp-tab-sub {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}

/* ---- Panel stage ---- */
.promise-panels {
  position: relative;
  border: 1px solid var(--border-hairline-dark);
  border-radius: 24px;
  background: rgba(255,255,255,0.02);
  padding: 56px 56px;
  overflow: hidden;
}
.promise-panels::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gradient-spectrum);
  opacity: 0.85;
}
.pp-panel {
  display: none;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
  animation: pp-fade-in 320ms var(--ease-out-soft) both;
}
.pp-panel[data-active] { display: grid; }
@keyframes pp-fade-in {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

.pp-lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--fg1);
}
.pp-lead em {
  font-style: normal;
  background: linear-gradient(90deg, var(--c) 0%, var(--c) 70%, color-mix(in srgb, var(--c) 60%, white) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pp-body { display: grid; gap: 28px; }
.pp-intro {
  margin: 0;
  font-size: 17px; line-height: 1.6; color: var(--fg2);
  font-weight: 300;
}
.pp-intro em {
  font-style: normal; font-weight: 500;
  color: var(--c);
}

.pp-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pp-chip {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: -0.005em;
  color: var(--fg1);
  padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 8%, transparent);
}

.pp-pledges {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.pp-pledges li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 19px; letter-spacing: -0.01em;
  color: var(--fg1);
  padding: 14px 20px;
  border: 1px solid var(--border-hairline-dark);
  border-left: 3px solid var(--c);
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,0.015);
}
.pp-pledges li em {
  font-style: normal;
  color: var(--c);
}
.pp-pledges .pp-x {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c);
  color: var(--c);
  font-family: var(--font-display);
  font-size: 18px; line-height: 1;
  flex-shrink: 0;
}

.pp-becoming {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
.pp-becoming li {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 16px; line-height: 1.55; color: var(--fg2);
  font-weight: 300;
}
.pp-becoming li em {
  font-style: normal;
  font-weight: 500;
  color: var(--c);
}
.pp-becoming .pp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  flex-shrink: 0;
  position: relative; top: 6px;
}

.pp-footnote {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-hairline-dark);
  font-size: 14px; line-height: 1.6; color: var(--fg3);
  font-style: italic;
}
.pp-footnote em {
  font-style: normal;
  color: var(--fg1);
  font-weight: 500;
}

/* ============================================================================
   MANIFESTO — cinematic reel of stanza frames
   ============================================================================ */
.manifesto {
  position: relative;
  padding: 200px 0 220px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--border-hairline-dark);
}
.manifesto .mountains {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 78%;
  background:
    url('assets/mountains-warm.png') bottom center / cover no-repeat;
  opacity: 0.35;
  z-index: 0;
  mix-blend-mode: screen;
  animation: mf-mountains-drift 26s ease-in-out infinite alternate;
}
@keyframes mf-mountains-drift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-8px); }
}
.manifesto .fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--canvas-black) 0%, transparent 28%, var(--canvas-black) 96%);
  z-index: 1;
}
.manifesto .halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(167, 57, 226, 0.14) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.manifesto > .wrap {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto;
}
.manifesto-head { margin-bottom: 64px; }
.manifesto-head .eyebrow { justify-content: center; display: inline-flex; }

/* ---- Reel container ---- */
.manifesto-reel {
  position: relative;
  min-height: 480px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.manifesto-reel:focus { outline: none; }

/* ---- Per-frame radial tints (cinematic color shifts) ---- */
.mf-tints {
  position: absolute; inset: -60px;
  pointer-events: none;
  z-index: 0;
}
.mf-tint {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out-soft);
  filter: blur(40px);
}
.mf-tint[data-active] { opacity: 1; }
.mf-tint[data-id="1"] {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(167, 57, 226, 0.22) 0%, transparent 60%);
}
.mf-tint[data-id="2"] {
  background:
    radial-gradient(ellipse 40% 30% at 30% 40%, rgba(60, 194, 221, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 70% 60%, rgba(167, 57, 226, 0.18) 0%, transparent 60%);
}
.mf-tint[data-id="3"] {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(245, 140, 86, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 70%, rgba(167, 57, 226, 0.18) 0%, transparent 60%);
}
.mf-tint[data-id="4"] {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(167, 57, 226, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 80% 30%, rgba(60, 194, 221, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 35% 25% at 20% 80%, rgba(245, 140, 86, 0.14) 0%, transparent 65%);
}

/* ---- Frames ---- */
.mf-frames {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.mf-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 900ms var(--ease-out-soft),
    transform 900ms var(--ease-out-soft);
  pointer-events: none;
  padding: 0 16px;
}
.mf-frame[data-active] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mf-frame > * { grid-column: 1; }

.mf-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms var(--ease-out-soft) 200ms, transform 700ms var(--ease-out-soft) 200ms;
  align-self: start;
  display: inline-flex; align-items: center; gap: 12px;
}
.mf-label::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gradient-spectrum);
  opacity: 0.7;
}
.mf-frame[data-active] .mf-label { opacity: 0.9; transform: translateY(0); }

/* ============================================================================
   MANIFESTO — choreographed sequences (slow, tension-building reveals)
   ============================================================================ */

/* ============ SEQUENCE I — two halves, pivot reveals ============ */
.mf-1 .mf-1-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  text-align: left;
}
.mf-1 .mf-1-half {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.015em; line-height: 1.25;
  color: var(--fg1);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1100ms var(--ease-out-soft);
}
.mf-1 .mf-1-half em {
  font-style: normal;
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(167, 57, 226, 0.25));
}
.mf-1 .mf-1-b { text-align: right; }
.mf-1 .mf-1-pivot {
  width: 1px; height: 80px;
  background: linear-gradient(180deg, transparent, var(--brand-purple), transparent);
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
}
.mf-1[data-active] .mf-1-a     { transition-delay: 500ms;  opacity: 1; transform: translateY(0); }
.mf-1[data-active] .mf-1-pivot { transition-delay: 2200ms; opacity: 0.7; transform: scaleY(1); }
.mf-1[data-active] .mf-1-b     { transition-delay: 3400ms; opacity: 1; transform: translateY(0); }
/* Exit */
.mf-1[data-leaving] .mf-1-a,
.mf-1[data-leaving] .mf-1-b     { opacity: 0; transform: translateY(-10px); transition-delay: 0ms; transition-duration: 700ms; }
.mf-1[data-leaving] .mf-1-pivot { opacity: 0; transform: scaleY(0); transition-delay: 0ms; transition-duration: 700ms; }

/* ============ SEQUENCE II — top + spaced trio + close ============ */
.mf-2 { gap: 22px; }
.mf-2 .mf-2-top {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: -0.02em; line-height: 1;
  color: var(--fg1);
  opacity: 0; transform: translateY(12px);
  transition: opacity 1000ms var(--ease-out-soft), transform 1000ms var(--ease-out-soft);
}
.mf-2 .mf-2-trio {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px 64px;
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.025em; line-height: 1;
}
.mf-2 .mf-2-w {
  font-size: clamp(30px, 4vw, 58px);
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(167, 57, 226, 0.28));
  opacity: 0; transform: translateY(18px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1100ms var(--ease-out-soft);
}
.mf-2 .mf-2-close {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.015em; line-height: 1.2;
  color: var(--fg2);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1100ms var(--ease-out-soft);
}
.mf-2 .mf-2-together {
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(167, 57, 226, 0.30));
  opacity: 0;
  transition: opacity 1100ms var(--ease-out-soft);
}
.mf-2[data-active] .mf-2-top      { transition-delay: 400ms;   opacity: 1; transform: translateY(0); }
.mf-2[data-active] .mf-2-w1       { transition-delay: 1500ms;  opacity: 1; transform: translateY(0); }
.mf-2[data-active] .mf-2-w2       { transition-delay: 2400ms;  opacity: 1; transform: translateY(0); }
.mf-2[data-active] .mf-2-w3       { transition-delay: 3300ms;  opacity: 1; transform: translateY(0); }
.mf-2[data-active] .mf-2-close    { transition-delay: 4800ms;  opacity: 1; transform: translateY(0); }
.mf-2[data-active] .mf-2-together { transition-delay: 6400ms;  opacity: 1; }
.mf-2[data-leaving] .mf-2-top,
.mf-2[data-leaving] .mf-2-w,
.mf-2[data-leaving] .mf-2-close,
.mf-2[data-leaving] .mf-2-together { opacity: 0; transform: translateY(-10px); transition-delay: 0ms; transition-duration: 650ms; }

/* ============ SEQUENCE III — top + spaced pills + footer ============ */
.mf-3 { gap: 26px; }
.mf-3 .mf-3-top {
  margin: 0;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 14px 26px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--fg1);
}
.mf-3 .mf-3-a, .mf-3 .mf-3-b {
  opacity: 0; transform: translateY(12px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1100ms var(--ease-out-soft);
}
.mf-3 .mf-3-b em {
  font-style: normal;
  background: var(--gradient-phases);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mf-3 .mf-3-sep {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-purple), transparent);
  opacity: 0;
  transition: opacity 800ms var(--ease-out-soft);
  align-self: center;
}
.mf-3 .mf-3-small {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg3);
  opacity: 0; transform: translateY(8px);
  transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
}
.mf-3 .mf-3-triple {
  margin: 0;
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 18px;
}
.mf-3 .mf-3-pill {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--fg1);
  padding: 10px 22px;
  border: 1px solid var(--border-hairline-dark);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.025);
  opacity: 0; transform: translateY(10px);
  transition: opacity 950ms var(--ease-out-soft), transform 950ms var(--ease-out-soft), border-color 950ms var(--ease-out-soft);
}
.mf-3 .mf-3-tools {
  margin: 12px 0 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: -0.015em; line-height: 1.2;
  color: var(--fg2);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1100ms var(--ease-out-soft);
}
.mf-3[data-active] .mf-3-a      { transition-delay: 400ms;   opacity: 1; transform: translateY(0); }
.mf-3[data-active] .mf-3-sep    { transition-delay: 1500ms;  opacity: 0.6; }
.mf-3[data-active] .mf-3-b      { transition-delay: 2100ms;  opacity: 1; transform: translateY(0); }
.mf-3[data-active] .mf-3-small  { transition-delay: 3800ms;  opacity: 0.85; transform: translateY(0); }
.mf-3[data-active] .mf-3-pill   { transition-delay: 4500ms;  opacity: 1; transform: translateY(0); }
.mf-3[data-active] .mf-3-p1     { transition-delay: 4500ms;  border-color: color-mix(in srgb, var(--phase-1) 45%, var(--border-hairline-dark)); }
.mf-3[data-active] .mf-3-p2     { transition-delay: 5300ms;  border-color: color-mix(in srgb, var(--phase-2) 45%, var(--border-hairline-dark)); }
.mf-3[data-active] .mf-3-p3     { transition-delay: 6100ms;  border-color: color-mix(in srgb, var(--phase-3) 45%, var(--border-hairline-dark)); }
.mf-3[data-active] .mf-3-tools  { transition-delay: 7400ms;  opacity: 1; transform: translateY(0); }
.mf-3[data-leaving] .mf-3-a,
.mf-3[data-leaving] .mf-3-b,
.mf-3[data-leaving] .mf-3-sep,
.mf-3[data-leaving] .mf-3-small,
.mf-3[data-leaving] .mf-3-pill,
.mf-3[data-leaving] .mf-3-tools { opacity: 0; transform: translateY(-10px); transition-delay: 0ms; transition-duration: 650ms; }

/* ============ SEQUENCE IV — payoff line first, then logo + separator together ============ */
.mf-4 { gap: 28px; align-items: center; }
.mf-4 .mf-4-logo {
  display: block;
  width: clamp(280px, 44vw, 600px);
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: drop-shadow(0 0 36px rgba(167, 57, 226, 0.40));
  transition: opacity 2200ms var(--ease-out-soft), transform 2200ms var(--ease-out-soft);
}
.mf-4 .mf-4-rule {
  display: block;
  height: 1px;
  width: 0;
  max-width: clamp(280px, 44vw, 600px);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--phase-1) 18%,
    var(--phase-2) 50%,
    var(--phase-3) 82%,
    transparent 100%);
  box-shadow: 0 0 18px rgba(167, 57, 226, 0.45);
  opacity: 0;
  transform-origin: 50% 50%;
  transition: width 2200ms var(--ease-out-soft), opacity 1400ms var(--ease-out-soft);
}
.mf-4 .mf-4-line {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--fg1);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1500ms var(--ease-out-soft), transform 1500ms var(--ease-out-soft);
}
.mf-4 .mf-4-grad {
  background: var(--gradient-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(167, 57, 226, 0.35));
}
.mf-4[data-active] .mf-4-line { transition-delay: 800ms;  opacity: 1; transform: translateY(0); }
.mf-4[data-active] .mf-4-rule { transition-delay: 3800ms; opacity: 0.9; width: 100%; }
.mf-4[data-active] .mf-4-logo { transition-delay: 3800ms; opacity: 1; transform: translateY(0) scale(1); }
.mf-4[data-leaving] .mf-4-logo,
.mf-4[data-leaving] .mf-4-rule,
.mf-4[data-leaving] .mf-4-line { opacity: 0; transition-delay: 0ms; transition-duration: 700ms; }
.mf-4[data-leaving] .mf-4-rule { width: 0; }

/* ---- Controls (dots) ---- */
.mf-controls {
  position: relative;
  z-index: 2;
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mf-dot {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  width: 32px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mf-dot .mf-fill {
  display: block;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.20);
  position: relative;
  overflow: hidden;
  transition: width 360ms var(--ease-out-soft), background 360ms var(--ease-out-soft);
}
.mf-dot[data-active] .mf-fill {
  width: 56px;
  background: rgba(255, 255, 255, 0.20);
}
.mf-dot[data-active] .mf-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-spectrum);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  animation: mf-progress 6.5s linear forwards;
}
@keyframes mf-progress {
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-dot[data-active] .mf-fill::after { animation: none; transform: scaleX(1); }
  .mountains, .mf-frame, .mf-line, .mf-label, .mf-tint { transition: none !important; animation: none !important; }
  .mf-frame, .mf-line, .mf-label { opacity: 1; transform: none; }
}

.mf-dot:focus-visible .mf-fill {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.mf-hint {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
  opacity: 0.65;
  display: inline-flex; align-items: center; gap: 12px;
  justify-content: center;
}
.mf-hint .mf-sep { color: var(--brand-purple); }

/* ---- Sig ---- */
.manifesto-foot {
  position: relative; z-index: 2;
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline-dark);
  max-width: 360px; margin-left: auto; margin-right: auto;
}
.manifesto-foot .sig {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg3);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1000px) {
  .nav .links { display: none; }
  .hero .grid { grid-template-columns: 1fr; gap: 48px; }
  .sigil-stage { width: 360px; }
  .story .layout { grid-template-columns: 1fr; gap: 32px; }
  .story .aside { position: static; }
  .dc-grid { grid-template-columns: 1fr; gap: 16px; }
  .direction-cards { padding: 120px 0; }
  .direction-cards .dc-head { margin-bottom: 56px; }
  .approach { padding: 120px 0; }
  .ecosystem { padding: 110px 0; }
  .es-feature { grid-template-columns: 1fr; gap: 14px; border-radius: 24px; padding: 24px 22px; }
  .es-feature-cta { justify-self: start; }
  .es-row-btn { grid-template-columns: 36px 14px 1fr 20px; gap: 14px; padding: 18px 2px; }
  .es-row-panel p { padding: 0 12px 18px 50px; }
  .es-bridge-min { margin-top: 64px; }
  .approach { padding: 110px 0; }
  .pillars-row { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .pillar-col { height: 220px; }
  .pillar-col .hname { font-size: 10px; letter-spacing: 0.02em; }
  .pillar-col .hnum { font-size: 11px; }
  .pillar-stage { padding: 24px 22px; min-height: auto; }
  .stage-panel { grid-template-columns: 1fr; gap: 16px; }
  .stage-panel .stage-num { font-size: 56px; }
  .stage-panel .stage-name { font-size: 28px; }
  .stage-panel .stage-detail { -webkit-line-clamp: 3; }
  /* Compass collapses to a vertical list on mobile */
  .anchors-compass { aspect-ratio: auto; height: auto; padding: 0; max-width: 480px; }
  .anchors-compass .compass-ring { display: none; }
  .compass-center {
    position: static; transform: none;
    width: 100%; max-width: none;
    padding: 24px;
    border: 1px solid var(--border-hairline-dark);
    border-radius: 20px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 16px;
  }
  .anchor-node {
    position: static !important;
    transform: none !important;
    grid-template-columns: 22px 1fr auto;
    grid-template-rows: auto;
    justify-items: stretch; align-items: center;
    text-align: left;
    padding: 14px 18px;
    border: 1px solid var(--border-hairline-dark);
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 8px;
    gap: 14px;
  }
  .anchor-node:hover,
  .anchor-node[data-active] {
    transform: none !important;
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 8%, transparent);
  }
  .anchor-node .an-name { letter-spacing: 0.1em; }
  .values-mode-toggle { width: max-content; }
  .vm-btn { padding: 9px 16px; font-size: 11px; letter-spacing: 0.18em; }
  .radar-extras { margin-top: 20px; }
  .rk-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rk-meta { justify-content: flex-start; }
  .rk-body { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .rk-rank-num { font-size: 72px; }
  .promise-tabs { grid-template-columns: 1fr; gap: 8px; }
  .pp-tab { padding: 14px 18px; }
  .pp-tab-num { font-size: 28px; }
  .pp-tab-title { font-size: 17px; }
  .promise-panels { padding: 32px 24px; }
  .pp-panel { grid-template-columns: 1fr; gap: 28px; }
  .pp-lead { font-size: 32px; }
  .radar-legend { gap: 20px; margin-top: 20px; }
  .radar-labels text { font-size: 12px; }
  .anchors { padding: 100px 0; }
  .promise .grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto { padding: 140px 0 160px; }
  .manifesto-reel { min-height: 420px; }
  .mf-frames { min-height: 280px; }
  .manifesto-foot { margin-top: 64px; }
  .footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .wrap, .wrap-narrow { padding: 0 24px; }
  .section { padding: 96px 0; }
  .hero { padding: 80px 0 60px; }
}


/* ============================================================================
   UNIVERSAL STAGE BACKGROUND — applies across all sections
   ============================================================================ */

/* The body's solid base color stays as the deepest layer. */
body {
  position: relative;
  /* Stage layers sit behind content via z-index */
}

/* Fixed full-viewport layer behind everything */
.stage-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Solid baseline canvas */
  background: var(--canvas-black);
}

/* Ensure all page content sits above the stage */
.v3-about > nav,
.v3-about > header,
.v3-about > section,
.v3-about > footer,
.v3-about > main {
  position: relative;
  z-index: 1;
}

/* Three phase halos — large soft radial blooms that crossfade by scroll position */
.stage-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  transition: opacity 1100ms var(--ease-out-soft), transform 1600ms var(--ease-out-soft);
  will-change: opacity, transform;
}
.stage-halo-1 {
  /* Phase I · Cyan — anchored top-left, breathes outward */
  top: -10%; left: -8%;
  width: 80vmin; height: 80vmin;
  background: radial-gradient(circle, rgba(60, 194, 221, 0.30) 0%, transparent 60%);
  opacity: 0;
}
.stage-halo-2 {
  /* Phase II · Purple — anchored center, the brand's gravitational core */
  top: 18%; left: 28%;
  width: 90vmin; height: 90vmin;
  background: radial-gradient(circle, rgba(167, 57, 226, 0.30) 0%, transparent 60%);
  opacity: 0;
}
.stage-halo-3 {
  /* Phase III · Orange — anchored bottom-right */
  bottom: -10%; right: -8%;
  width: 80vmin; height: 80vmin;
  background: radial-gradient(circle, rgba(245, 140, 86, 0.30) 0%, transparent 60%);
  opacity: 0;
}

/* Phase-driven crossfade — based on which section is currently in view */
.stage-bg[data-phase="1"] .stage-halo-1 { opacity: 0.90; transform: scale(1.04); }
.stage-bg[data-phase="1"] .stage-halo-2 { opacity: 0.35; }
.stage-bg[data-phase="1"] .stage-halo-3 { opacity: 0.05; }

.stage-bg[data-phase="2"] .stage-halo-1 { opacity: 0.30; }
.stage-bg[data-phase="2"] .stage-halo-2 { opacity: 0.95; transform: scale(1.06); }
.stage-bg[data-phase="2"] .stage-halo-3 { opacity: 0.30; }

.stage-bg[data-phase="3"] .stage-halo-1 { opacity: 0.05; }
.stage-bg[data-phase="3"] .stage-halo-2 { opacity: 0.35; }
.stage-bg[data-phase="3"] .stage-halo-3 { opacity: 0.90; transform: scale(1.04); }

/* Universal dotted starfield — same as the hero used to have */
.stage-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.085) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.45;
}

/* Edge vignette to soften the corners and give content a focused stage */
.stage-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 40%, rgba(11, 11, 21, 0.45) 100%);
}

/* === Section overrides — remove individual backgrounds and top borders === */
.hero,
.origin,
.direction-axis,
.ecosystem,
.approach,
.anchors,
.promise,
.manifesto,
.footer {
  background: transparent !important;
  border-top: 0 !important;
}

/* The hero ran its own .halo, .stars, .gradient washes — clear those */
.hero::before { display: none !important; }

/* The manifesto is special — keep its mountain imagery as a hero treatment,
   but drop the canvas-black background; mountains + fade still apply */
.manifesto .mountains { z-index: 0; }
.manifesto .fade { background: none !important; }

/* Each section's internal ::before haloes (radial washes) are now redundant
   — but we keep them off only if they're full-section overlays. The ones used
   for accent halos inside cards/cards-grids stay. */
.direction-axis .halo,
.anchors .halo,
.ecosystem .halo,
.story .halo,
.origin .halo,
.promise .halo,
.approach .halo,
.manifesto .halo { display: none; }

/* Footer transparent so the bottom of the page reads as one continuous floor */
.footer { background: transparent !important; }

/* ============================================================================
   FOOTER — full layout
   ============================================================================ */
.footer {
  position: relative;
  padding: 96px 0 32px;
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer > .wrap {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0 48px;
}
.footer .grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.footer .brand-block {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 360px;
}
.footer .brand-block .wordmark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg1);
}
.footer .brand-block .wordmark .mark {
  width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(255,255,255,0.95) 0%,
      var(--phase-1) 22%,
      var(--phase-2) 52%,
      var(--phase-3) 100%);
  box-shadow:
    0 0 14px rgba(167, 57, 226, 0.45),
    0 0 22px rgba(245, 140, 86, 0.25);
}
.footer .brand-block p {
  margin: 0;
  font-size: 14px; line-height: 1.65;
  color: var(--fg3); font-weight: 300;
  max-width: 360px;
}
.footer h5 {
  margin: 0 0 18px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg2);
}
.footer a {
  display: block;
  text-decoration: none;
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.85;
  color: var(--fg3);
  transition: color 200ms var(--ease-out-soft);
}
.footer a:hover { color: var(--fg1); }

.footer .bottom {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg3);
}
.footer .bottom div { font-weight: 500; }

@media (max-width: 900px) {
  .footer { padding: 64px 0 32px; }
  .footer > .wrap { padding: 0 24px; }
  .footer .grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer .brand-block { grid-column: span 2; }
  .footer .bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}



/* ============================================================================
   SECTION DIVIDER — short, thin, light-gray glow with dot tips
   ============================================================================ */
.section-divider {
  position: relative;
  width: 96px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.20) 25%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.20) 75%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.10);
  z-index: 1;
}

/* ============================================================================
   SMOOTH SCROLL + UNIVERSAL REVEAL ANIMATION
   ============================================================================ */
html {
  scroll-behavior: smooth;
}
section[data-phase],
header[data-phase] {
  scroll-margin-top: 24px;
}

/* Reveal-on-scroll: any element marked .reveal animates in once it intersects the viewport */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal[data-revealed] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger child reveals when wrapped in [data-reveal-stagger] */
[data-reveal-stagger] > .reveal { transition-delay: 0ms; }
[data-reveal-stagger] > .reveal:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger] > .reveal:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger] > .reveal:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger] > .reveal:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger] > .reveal:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger] > .reveal:nth-child(7) { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}