:root {
  --bg: #050506;                           /* design-system ground */
  --ink: #f5f5f6;
  --ink-soft: #a6a8b0;
  --ink-mute: #8b8d96;
  --line: #2e3138;
  --on-ink: #0a0a0c;                       /* text on a filled (ink) button */
  --ghost: rgba(255, 255, 255, .05);
  --track: rgba(255, 255, 255, .18);
  --track-hover: rgba(255, 255, 255, .5);
  --callout: #fff;
  --callout-halo: rgba(0, 0, 0, .9);
  --cta-glow: rgba(157, 140, 255, .7);
  --cta-ring: rgba(255, 255, 255, .4);
  --vignette: rgba(0, 0, 0, .62);
  --panel: #0c0d0f;                        /* surface */
  --panel-soft: #16181c;                   /* surface raised */
  --panel-line: #1f2126;                   /* border */
  --ink-dim: #8b8d96;                      /* second line of section titles — opaque: the titles' outline stroke would show through an alpha colour */
  --chip: #16181c;
  --fill: #050506;                         /* section surfaces below the hero… */
  --fill-alt: #fcfcfd;                     /* …alternating with the light ground: the dark page flips to white for every other section */
  --pink: #ff8fc0;
  --violet: #9d8cff;
  --cyan: #7fdcff;
  --gutter: clamp(20px, 4.4vw, 72px);
  --orbit-w: clamp(504px, 52vw, 900px);
  --orbit-right: 1vw;
  --font-display: Michroma, Geist, "Helvetica Neue", Arial, sans-serif;   /* matches the RocX wordmark */
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fill);                 /* same as the sections, so sub-pixel seams between them never show another colour */
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.2vw, 30px) var(--gutter);
}
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: clamp(28px, 2.5vw, 36px); width: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 999px; font-family: var(--font-body); font-weight: 500; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn-ghost {
  height: 44px; padding: 0 22px; font-size: 14.5px;
  border: 1px solid var(--line);
  background: var(--ghost);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-primary {
  height: clamp(54px, 4.4vw, 66px); padding: 0 clamp(26px, 2.4vw, 38px); font-size: clamp(15.5px, 1.2vw, 18px);
  background: var(--ink); color: var(--on-ink);
  box-shadow: 0 0 0 1px var(--cta-ring), 0 14px 50px -12px var(--cta-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--cta-ring), 0 22px 64px -10px var(--cta-glow); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(15px, 1.15vw, 17px); color: var(--ink-soft);
  transition: color .25s ease;
}
.link-arrow svg { width: 1.2em; height: 1.2em; transition: transform .25s ease; }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover svg { transform: translateX(4px); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 999px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: max(100svh, 720px);
  display: flex; align-items: center;
  padding: 120px var(--gutter) 96px;
}

/* Sky: lives in the hero only; every section below is a plain filled surface */
.space, .nebula, .stars, .vignette { position: absolute; inset: 0; }
.space { pointer-events: none; }
/* the hero's sky dissolves into the first section's fill instead of ending on a hard line */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vh, 180px); pointer-events: none; background: linear-gradient(180deg, transparent, var(--fill)); }
.nebula { background: var(--bg); }   /* shown until the canvas sky (app.js) has painted */
.stars { width: 100%; height: 100%; }
.vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 62%, var(--vignette) 100%); }

/* ---------- Orbit ---------- */
.orbit {
  position: absolute;
  right: var(--orbit-right); top: 46%;
  width: var(--orbit-w); height: calc(var(--orbit-w) * .8);
  margin-top: calc(var(--orbit-w) * -.4);
  z-index: 1;                             /* own stacking context: planet z-indexes stay below the copy */
  pointer-events: none;
}
.planet[data-planet="0"] { --aura: 96 176 255; }     /* PoA — electric blue */
.planet[data-planet="1"] { --aura: 255 120 214; }    /* Explore — magenta */
.planet[data-planet="2"] { --aura: 158 128 255; }    /* Defi — violet */

/* planet videos carry a real alpha channel (see tools/alpha), so they composite like any image */
.planet {
  position: absolute; left: 50%; top: 50%;
  width: 66%; aspect-ratio: 1; margin: -33% 0 0 -33%;
  will-change: transform, filter;
  transform: translate3d(0, 0, 0) scale(.42);
}
.planet video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Dark version: a faint halo in the planet's own light, so it seems to illuminate the dust around it, and a
     deep shadow pooled beneath that dims the nebula and stars behind — together they seat the planet in the
     scene instead of leaving it pasted on top. Both follow the silhouette and scale/fade with the planet. */
  filter: drop-shadow(0 0 44px rgb(var(--aura) / .17))
          drop-shadow(0 26px 44px rgb(0 0 0 / .45));
}

/* ---------- Copy ---------- */
.hero-copy { position: relative; z-index: 3; max-width: min(760px, 58vw); }
.eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 36px);
  font-size: clamp(11.5px, .95vw, 14px); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute);
}
h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.1vw, 68px); line-height: 1.2; letter-spacing: -.015em;
  /* Michroma ships a single weight — an outline in the text colour gives a true-to-form bold */
  -webkit-text-stroke: .04em currentColor; paint-order: stroke fill;
}
h1 .line { display: block; white-space: nowrap; }
.lede {
  margin: clamp(26px, 3vw, 46px) 0 0;
  font-size: clamp(16px, 1.32vw, 20px); line-height: 1.75; color: var(--ink-soft);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 2.6vw, 40px); margin-top: clamp(32px, 3.4vw, 52px); }

/* ---------- Planet callouts ---------- */
/* app.js pins each callout to a point on its planet's surface and sets the line geometry */
.callout {
  position: absolute; left: 50%; top: 50%; z-index: 300; width: 0; height: 0;
  color: var(--ink); opacity: 0; transition: opacity .25s ease;
}
.callout.is-on { opacity: 1; }
.callout-dot {
  position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--callout); box-shadow: 0 0 10px var(--callout);
  transform: scale(0);
}
.callout-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--callout);
  opacity: 0;
}
.callout-line { position: absolute; left: 0; top: 0; overflow: visible; }
.callout-line polyline { stroke: var(--callout); opacity: .85; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.callout-text {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
  font-family: var(--font-mono); font-size: clamp(11px, .92vw, 13.5px); letter-spacing: .06em;
  text-shadow: 0 0 12px var(--callout-halo), 0 0 4px var(--callout-halo);
}
.callout.is-on .callout-dot { animation: dot-in .35s cubic-bezier(.2,.8,.3,1.4) forwards, blink 1.5s steps(1, end) .9s infinite; }
.callout.is-on .callout-dot::after { animation: ping 1.5s ease-out .9s infinite; }
.callout.is-on .callout-line polyline { animation: draw .55s cubic-bezier(.6,0,.2,1) .2s forwards; }
.callout.is-on .callout-text { animation: flicker .7s steps(1, end) .65s forwards, text-blink 4.5s steps(1, end) 2.4s infinite; }
/* light version: the label starts on a dark planet and ends on a pale sky, so it has to read on both */
@keyframes dot-in { to { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 55% { opacity: .2; } }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(4.2); opacity: 0; } }
@keyframes flicker { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .15; } 40% { opacity: 1; } 52% { opacity: .4; } 64%, 100% { opacity: 1; } }
@keyframes text-blink { 0%, 100% { opacity: 1; } 2% { opacity: .25; } 4% { opacity: 1; } 6% { opacity: .5; } 8% { opacity: 1; } }

/* ---------- Planet nav ---------- */
.focus-dots {
  position: absolute; z-index: 3;
  right: calc(var(--orbit-w) / 2 + var(--orbit-right)); bottom: clamp(28px, 5vh, 56px);
  transform: translateX(50%);
  display: flex; gap: 8px;
}
.focus-dots button {
  width: 28px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.focus-dots button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px;
  background: var(--track); transition: background-color .4s ease;
}
.focus-dots button:hover::before { background: var(--track-hover); }
.focus-dots button.is-active::before { background: var(--ink); }

/* ---------- Entrance ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.eyebrow, h1 .line, .lede, .actions { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
h1 .line:nth-child(1) { animation-delay: .08s; }
h1 .line:nth-child(2) { animation-delay: .18s; }
.lede { animation-delay: .3s; }
.actions { animation-delay: .4s; }
.focus-dots { animation: fade 1.6s ease .2s both; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* stacked: planets on top, focus caption under them, then the copy */
  :root { --orbit-w: min(104vw, 612px); }
  .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 76px; padding-bottom: 48px; min-height: 100svh; }
  .orbit {
    position: relative; right: auto; top: auto; flex: none;
    height: calc(var(--orbit-w) * .74);
    margin: 0 0 0 calc(50% - var(--orbit-w) / 2);
  }
  .orbit > * { top: 38%; }
  .focus-dots { position: relative; right: auto; bottom: auto; transform: none; order: 1; justify-content: center; margin: 0 0 clamp(28px, 6vw, 48px); }
  .hero-copy { max-width: none; order: 2; }
  h1 { font-size: clamp(27px, 7.9vw, 60px); }
  .lede br { display: none; }
}
@media (max-width: 520px) {
  .btn-primary { width: 100%; }
  .actions { gap: 22px; }
  .btn-ghost { height: 40px; padding: 0 18px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow, h1 .line, .lede, .actions, .focus-dots { animation: none; }
  .callout.is-on .callout-dot { animation: none; transform: scale(1); }
  .callout.is-on .callout-dot::after { animation: none; }
  .callout.is-on .callout-line polyline { animation: none; stroke-dashoffset: 0; }
  .callout.is-on .callout-text { animation: none; opacity: 1; }
}


/* =====================================================================
   Sections below the hero
   ===================================================================== */
html { scroll-behavior: smooth; }
main { overflow-x: clip; }
.manifesto, .section { position: relative; background: var(--fill); }
.alt { background: var(--fill-alt); }
/* Every other section flips to the light ground, so its whole token set flips with it — text,
   surfaces, borders, chips — and the planet art takes the light-mode treatment. */
.alt {
  --panel: #ffffff; --panel-soft: #f4f4f6; --panel-line: #e4e4e7; --line: #d1d1d6; --chip: #f4f4f6;
  --ink: #0a0a0c; --ink-soft: #4e4e57; --ink-mute: #696973; --ink-dim: #696973; --on-ink: #f5f5f6;
  --ghost: #ffffff; --track: #d1d1d6; --track-hover: #8b8d96;
  color: var(--ink);                       /* colour is inherited from body, so re-apply it where the tokens flip */
}

.kicker {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(11px, .88vw, 13px); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute);
}
.section { position: relative; padding: clamp(72px, 9vw, 150px) var(--gutter); }
.section > *, .manifesto > *, .last-step > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.section h2, .last-step h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.9vw, 46px); line-height: 1.25; letter-spacing: -.015em;
  -webkit-text-stroke: .035em currentColor; paint-order: stroke fill;
}
.section h2 span, .last-step h2 span { color: var(--ink-dim); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.4vw, 68px);
}
.section-note { margin: 0; max-width: 34ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: var(--ink-soft); }
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: clamp(20px, 2vw, 30px); }

/* reveal on scroll — only when JS is there to reveal it again */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Manifesto ---------- */
.manifesto { padding: clamp(120px, 15vw, 260px) var(--gutter) clamp(110px, 13vw, 220px); text-align: center; }
.manifesto-text { margin: 0 auto; font-family: var(--font-display); font-size: clamp(17px, 2.15vw, 34px); line-height: 1.55; letter-spacing: -.01em; color: var(--ink-mute); }
.manifesto-text strong { font-weight: 400; color: var(--ink); -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }
.manifesto-index { margin: clamp(28px, 3vw, 44px) auto 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- 01 Worlds ---------- */
.world-selector { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(20px, 2.4vw, 40px); align-items: stretch; }
.world-tabs { display: flex; flex-direction: column; gap: 10px; }
.world-tabs button {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px); border-radius: 20px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink-mute); background: transparent; border: 1px solid var(--panel-line);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.world-tabs button span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.world-tabs button b { font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: -.01em; }
.world-tabs button svg { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.world-tabs button:hover { color: var(--ink); background: var(--panel-soft); }
.world-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel); border-color: var(--line); }
.world-tabs button[aria-selected="true"] svg { opacity: 1; transform: none; }
.world-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 56px); padding: clamp(24px, 3.2vw, 56px); min-height: clamp(420px, 36vw, 540px); }
.world-panel[hidden] { display: none; }
.world-panel:not([hidden]) { animation: panel-in .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }
.world-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.world-art img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 44px rgb(var(--aura) / .2)) drop-shadow(0 26px 40px rgb(0 0 0 / .45));
  animation: bob 9s ease-in-out infinite;
}
  filter: contrast(.9) brightness(.97) saturate(.95) drop-shadow(0 0 30px rgb(var(--aura) / .5)) drop-shadow(0 28px 32px rgb(40 48 120 / .28));
}
@keyframes bob { 0%, 100% { transform: translateY(-1.5%) rotate(-1.2deg); } 50% { transform: translateY(1.5%) rotate(1.2deg); } }
.world-orbit { position: absolute; inset: 6% -4%; border-radius: 50%; border: 1px solid var(--panel-line); transform: rotate(-16deg) scaleY(.34); }
.world-copy h3 { margin: 0 0 18px; font-size: clamp(22px, 2.1vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.world-copy > p:not(.kicker) { margin: 0; font-size: clamp(15px, 1.12vw, 17px); line-height: 1.75; color: var(--ink-soft); max-width: 46ch; }
.world-copy ul { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.world-copy li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: var(--ink-soft); background: var(--chip); border: 1px solid var(--panel-line); }

/* ---------- 02 Active Energy ---------- */
.energy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.energy-copy > p:not(.kicker) { margin: clamp(20px, 2.2vw, 32px) 0 clamp(24px, 2.4vw, 36px); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.75; color: var(--ink-soft); max-width: 48ch; }
.energy-map { position: relative; aspect-ratio: 1.12; width: 100%; max-width: 640px; margin-left: auto; }
/* the AE token: a rendered coin with its own arcs of light reaching out to the four corners, shot against black and
   screen-blended onto the dark section so the frame disappears; the four cards sit where the arcs point */
.ae-film { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); mix-blend-mode: screen; object-fit: cover; }
.ae-node {
  position: absolute; width: 38%; padding: clamp(12px, 1.3vw, 20px); border-radius: 20px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--panel-line);
}
.ae-node svg { grid-row: span 2; width: clamp(34px, 3vw, 44px); height: clamp(34px, 3vw, 44px); padding: 9px; border-radius: 50%; background: var(--chip); color: var(--ink); }
.ae-node b { font-size: clamp(14px, 1.15vw, 17px); font-weight: 600; }
.ae-node span { font-size: clamp(11.5px, .9vw, 13.5px); color: var(--ink-mute); }
.ae-node--defi { left: 0; top: 4%; } .ae-node--poa { right: 0; top: 4%; }
.ae-node--explore { left: 0; bottom: 4%; } .ae-node--referral { right: 0; bottom: 4%; }
.energy-principles { list-style: none; margin-top: clamp(40px, 5vw, 76px); margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--panel-line); }
.energy-principles li { padding: clamp(18px, 2vw, 28px) 0; font-family: var(--font-mono); font-size: clamp(12px, .95vw, 14.5px); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.energy-principles li:nth-child(2) { justify-content: center; }
.energy-principles li:nth-child(3) { justify-content: flex-end; }
.energy-principles li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--violet) 55%, var(--cyan)); }

/* ---------- 03 Networks ---------- */
/* networks: symbol + wordmark, streaming past on a loop (two copies of the row; the track slides one row's width) */
.network-marquee { overflow: hidden; max-width: none; margin: clamp(8px, 1.2vw, 20px) calc(-1 * var(--gutter)) 0;   /* full bleed: the stream runs edge to edge */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.network-track { display: flex; width: max-content; gap: clamp(48px, 6vw, 110px); padding: 14px 0; animation: marquee 34s linear infinite; }
.network-marquee:hover .network-track { animation-play-state: paused; }
.network-track a { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; color: var(--ink); transition: opacity .25s ease; }
.network-track a:hover { opacity: .7; }
.network-track img { width: clamp(34px, 2.8vw, 42px); height: clamp(34px, 2.8vw, 42px); object-fit: contain; }
/* official lockups (symbol + wordmark as each chain ships it), scaled to a shared cap height: --w = its width/height ratio */
.network-track img.lockup { --h: clamp(30px, 2.5vw, 38px); height: var(--h); width: calc(var(--h) * var(--w)); }
.network-track img.lockup[alt="Arbitrum"] { --h: clamp(36px, 3vw, 46px); }   /* its wordmark is set small inside the lockup */
.network-track b { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.01em; }
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(48px, 6vw, 110px) / 2)); } }
.network-note { margin-top: 20px; margin-bottom: 0; font-size: 13px; color: var(--ink-mute); }

/* ---------- 04 Community ---------- */
.community-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center; gap: 24px; padding: clamp(28px, 4.4vw, 80px); }
.community-card h2 { font-size: clamp(21px, 2.15vw, 34px); }
.community-copy > p:not(.kicker) { margin: clamp(18px, 2vw, 28px) 0 clamp(26px, 2.6vw, 40px); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.7; color: var(--ink-soft); }
.community-links { display: flex; flex-wrap: wrap; gap: 12px; }
.community-links .btn { height: 50px; padding: 0 22px; font-size: 15px; gap: 10px; }
.community-links .btn svg { width: 16px; height: 16px; }
.community-planet { position: absolute; right: -4%; top: 50%; width: clamp(300px, 36%, 560px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
/* the three planets take turns: one is shown at a time, cross-fading to the next (app.js) */
.community-planet video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; filter: drop-shadow(0 0 44px rgb(var(--aura) / .2)) drop-shadow(0 26px 44px rgb(0 0 0 / .45)); }
.community-planet video.is-on { opacity: 1; }
.community-card { min-height: clamp(320px, 30vw, 460px); }

/* ---------- FAQ ---------- */
.faq { padding-inline: max(var(--gutter), calc((100% - 1320px) / 2)); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq > * { max-width: none; margin: 0; }
.faq-head h2 { margin-bottom: clamp(20px, 2.2vw, 32px); }
.faq-list { border-top: 1px solid var(--panel-line); }
.faq-list details { border-bottom: 1px solid var(--panel-line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(20px, 2vw, 30px) 0; font-size: clamp(16px, 1.35vw, 21px); font-weight: 500; letter-spacing: -.015em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: none; width: 22px; height: 22px; color: var(--ink-mute); transition: transform .35s ease; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 48px clamp(22px, 2.2vw, 32px) 0; font-size: clamp(15px, 1.12vw, 17px); line-height: 1.8; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Last step ---------- */
/* A moonscape with the astronaut walking along the bottom, on a seamless loop (see tools/video). Each version
   has its own film (app.js swaps the source with the theme):
     dark  — shot against black and screen-blended, so black = "nothing there" and it melts into the dark fill
     light — a full daylight scene; its top is feathered away so the page colour flows into its periwinkle sky.
             The backdrop gradient repeats the film's own colours, so the feathered top and sides have
             something matching to dissolve into. */
.last-step {
  --scene: linear-gradient(180deg, var(--fill) 0%, #050506 26%, #05061a 100%);   /* continues the FAQ's dark ground above it and falls into night */
  /* The film is pinned to the bottom, so the astronaut's head sits at a known height above it (≈42.5% of the
     film's height). The copy is hung just above that, and the section is only as tall as it needs to be for
     the copy plus some sky — instead of showing the film's whole empty sky between button and helmet. */
  --film-w: max(100vw, 1180px);
  --film-h: calc(var(--film-w) * .5625);
  --head: calc(var(--film-h) * .425);
  --gap: clamp(26px, 3.2vw, 56px);         /* button ↔ helmet */
  position: relative; overflow: hidden; text-align: center; isolation: isolate;
  min-height: calc(var(--head) + var(--gap) + clamp(250px, 21vw, 380px));
  padding: 0 var(--gutter);
  background: var(--scene);
}
.last-step > * { max-width: none; }
.last-step-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: calc(var(--head) + var(--gap)); }
/* one statement, one colour, one line — sized so it still fits a phone without wrapping (28 characters of a wide face) */
.last-step h2 { font-size: clamp(14px, 4.6vw, 52px); white-space: nowrap; margin: 0 auto clamp(28px, 3.2vw, 48px); }
.cta-scene { position: absolute; inset: 0; pointer-events: none; }   /* no z-index: a stacking context here would cut the film's screen blend off from the backdrop */
.cta-film {
  position: absolute; left: 50%; bottom: 0; width: var(--film-w); aspect-ratio: 16 / 9; height: auto;
  transform: translateX(-50%); object-fit: cover;
  mix-blend-mode: screen;
  /* soften the frame's own edges so it never reads as a rectangle on very wide or very tall windows */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent 12%, #000 40%);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent 12%, #000 40%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- Footer ---------- */
.site-footer { padding: clamp(36px, 4vw, 64px) var(--gutter) clamp(28px, 3vw, 44px); background: var(--panel); }
.footer-top, .footer-bottom { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; }
.footer-top { justify-content: space-between; padding-bottom: clamp(24px, 2.6vw, 40px); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.badge { padding: 4px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line); }
.footer-tagline { margin: 0; font-family: var(--font-display); font-size: clamp(12px, 1vw, 15px); letter-spacing: .02em; color: var(--ink-mute); }
.footer-links { display: flex; gap: clamp(18px, 2vw, 32px); }
.footer-links a, .footer-bottom a { font-size: 14.5px; color: var(--ink-soft); transition: color .25s ease; }
.footer-links a:hover, .footer-bottom a:hover { color: var(--ink); }
.footer-bottom { padding-top: clamp(20px, 2.2vw, 30px); font-size: 13.5px; color: var(--ink-mute); }
.footer-bottom a { font-size: 13.5px; }
.back-top { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.back-top svg { width: 16px; height: 16px; transform: rotate(-90deg); }

/* ---------- Sections: responsive ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 960px) {
  .world-selector { grid-template-columns: 1fr; }
  .world-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .world-tabs button { flex: 1 1 0; min-width: 0; grid-template-columns: auto 1fr; gap: 10px; padding: 14px 14px; border-radius: 16px; }
  .world-tabs button b { font-size: clamp(13px, 3.6vw, 18px); }
  .world-tabs button svg { display: none; }
  .world-panel { grid-template-columns: 1fr; min-height: 0; }
  .world-art { max-width: 340px; margin: 0 auto; width: 100%; }
  .world-copy h3 br { display: none; }
  .world-copy h3 { white-space: nowrap; font-size: clamp(16px, calc((100vw - 96px) / 15.8), 26px); }   /* the longest title is 30 characters */
  .energy-grid, .faq, .community-card { grid-template-columns: 1fr; }
  .energy-map { margin: 0 auto; }
  .community-planet { position: relative; right: auto; top: auto; transform: none; width: min(70%, 360px); margin: 8px auto 0; }
  .energy-principles { grid-template-columns: 1fr; }
  .energy-principles li { padding: 14px 0; }
  .energy-principles li:nth-child(2), .energy-principles li:nth-child(3) { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .ae-node { width: 46%; padding: 10px; column-gap: 8px; }
  .ae-node svg { width: 30px; height: 30px; padding: 7px; }
  .ae-film { width: 70%; }
  .faq-list details p { padding-right: 0; }
  .back-top { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .world-art img, .world-panel:not([hidden]) { animation: none; }
}