:root {
  --font-display: "Avenir Next Condensed", "Bahnschrift Condensed", "Franklin Gothic Demi Cond", sans-serif;
  --font-body: "Avenir Next", "Segoe UI", "Tahoma", sans-serif;

  --bg-void: #010203;
  --bg-deep: #05070b;
  --bg-panel: rgb(8 12 18 / 76%);
  --bg-panel-strong: rgb(9 14 21 / 90%);
  --bg-rail: rgb(12 18 27 / 72%);
  --bg-warm: rgb(31 21 15 / 78%);
  --line-soft: rgb(167 186 210 / 16%);
  --line-strong: rgb(203 215 232 / 34%);
  --line-hot: rgb(239 191 121 / 36%);
  --text-main: #eef3f8;
  --text-muted: #adbac9;
  --text-low: #758395;
  --accent-cold: #dbe7fb;
  --accent-steel: #88a7c7;
  --accent-hot: #efbf79;
  --accent-danger: #f1a18b;

  --section-width: min(1180px, calc(100vw - 3rem));
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-deep: 0 28px 76px rgb(0 0 0 / 46%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 14% 18%, #101820 0%, #05080f 34%, #010203 74%),
    radial-gradient(circle at 82% 76%, rgb(49 63 78 / 14%) 0%, rgb(6 8 12 / 0%) 36%),
    linear-gradient(180deg, #090d14 0%, #03050a 48%, #010203 100%);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
dl,
ul {
  margin: 0;
}

#spaceCanvas,
.nebula-layer,
.veil-layer,
.scanline-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#spaceCanvas {
  z-index: -30;
}

.nebula-layer {
  transform: translate3d(0, 0, 0);
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  mix-blend-mode: screen;
  opacity: 0.13;
}

.nebula-back {
  z-index: -24;
  transform: translate3d(var(--nebula-back-x, 0px), var(--nebula-back-y, 0px), 0) scale(1.08);
}

.nebula-mid {
  z-index: -22;
  transform: translate3d(var(--nebula-mid-x, 0px), var(--nebula-mid-y, 0px), 0) scale(1.03);
}

.nebula-front {
  z-index: -19;
  transform: translate3d(var(--nebula-front-x, 0px), var(--nebula-front-y, 0px), 0);
}

.nb1 {
  top: -20%;
  left: -12%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgb(42 58 82 / 32%) 0%, rgb(6 9 14 / 0%) 72%);
}

.nb2 {
  top: 22%;
  right: -18%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgb(37 54 77 / 28%) 0%, rgb(6 9 14 / 0%) 74%);
}

.nb3 {
  bottom: -25%;
  left: 22%;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(circle, rgb(56 45 38 / 18%) 0%, rgb(7 10 14 / 0%) 74%);
}

.nm1 {
  top: -10%;
  left: 24%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle, rgb(53 75 106 / 28%) 0%, rgb(6 9 14 / 0%) 70%);
}

.nm2 {
  top: 38%;
  right: -10%;
  width: 35vw;
  height: 35vw;
  background: radial-gradient(circle, rgb(52 72 94 / 24%) 0%, rgb(6 9 14 / 0%) 72%);
}

.nm3 {
  bottom: -18%;
  left: -6%;
  width: 32vw;
  height: 32vw;
  background: radial-gradient(circle, rgb(56 46 39 / 16%) 0%, rgb(7 10 14 / 0%) 72%);
}

.nf1 {
  top: 16%;
  left: 44%;
  width: 23vw;
  height: 23vw;
  background: radial-gradient(circle, rgb(57 78 108 / 16%) 0%, rgb(5 7 12 / 0%) 68%);
}

.nf2 {
  bottom: -8%;
  right: 8%;
  width: 26vw;
  height: 26vw;
  background: radial-gradient(circle, rgb(65 50 41 / 14%) 0%, rgb(5 7 12 / 0%) 70%);
}

.veil-layer {
  z-index: -18;
  transform: translate3d(var(--veil-x, 0px), var(--veil-y, 0px), 0);
  opacity: 0.42;
  background:
    radial-gradient(circle at 20% 16%, rgb(75 98 132 / 11%) 0%, rgb(75 98 132 / 0%) 36%),
    radial-gradient(circle at 76% 76%, rgb(67 78 94 / 9%) 0%, rgb(67 78 94 / 0%) 34%);
}

.scanline-layer {
  z-index: 40;
  opacity: 0.05;
  background-image: repeating-linear-gradient(
    0deg,
    rgb(223 232 246 / 3%) 0px,
    rgb(223 232 246 / 3%) 1px,
    rgb(0 0 0 / 0%) 2px,
    rgb(0 0 0 / 0%) 4px
  );
}

.site-header,
main,
.site-footer {
  width: var(--section-width);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 1rem 0 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(160 180 208 / 20%);
  background: linear-gradient(180deg, rgb(4 8 13 / 84%), rgb(4 8 13 / 70%) 72%, rgb(4 8 13 / 0%));
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.34rem;
  font-weight: 700;
  color: var(--accent-cold);
}

.brand-sub {
  color: var(--text-low);
  font-size: 0.66rem;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.45rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  padding: 0.18rem 0;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18rem;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.85;
  background: linear-gradient(90deg, rgb(219 233 255 / 82%), rgb(239 192 124 / 56%));
  transition: transform 220ms ease, opacity 220ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--text-main);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.hero {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 1.6rem;
  padding: 5rem 0 3rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  align-items: end;
}

.hero-copy-block {
  max-width: 780px;
}

.hero-copy-block-wide {
  max-width: 920px;
}

.alpha-note {
  display: grid;
  gap: 0.45rem;
  max-width: 760px;
  margin-top: 0.9rem;
  padding: 0.95rem 1rem;
  border-left: 2px solid rgb(239 192 124 / 58%);
  background: linear-gradient(90deg, rgb(24 18 13 / 56%), rgb(24 18 13 / 10%));
}

.alpha-note-label {
  color: var(--accent-hot);
  font-size: 0.72rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.alpha-note p,
.alpha-note-compact p {
  color: var(--text-muted);
}

.alpha-note-compact {
  margin-top: 1rem;
  max-width: 58ch;
  padding: 1rem 1.05rem;
  border-left-width: 3px;
  background: linear-gradient(90deg, rgb(33 22 15 / 72%), rgb(33 22 15 / 16%));
}

.eyebrow,
.kicker,
.panel-kicker,
.join-lead,
.hero-band-label,
.panel-label,
.loop-index,
.pressure-label {
  font-size: 0.72rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.eyebrow,
.kicker,
.join-lead,
.hero-band-label,
.loop-index {
  color: var(--text-muted);
}

.panel-kicker,
.panel-label,
.pressure-label {
  color: var(--accent-hot);
}

.hero h1,
.section-head h2,
.loop-step h3,
.stakes-feature h3,
.world-narrative h3,
.enter-copy h3 {
  font-family: var(--font-display);
}

.hero h1 {
  margin-top: 0.6rem;
  font-size: clamp(3.25rem, 8.8vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.03rem;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
  color: var(--accent-cold);
  font-size: 0.8em;
  margin-top: 0.45rem;
}

.hero-copy {
  margin-top: 1.15rem;
  max-width: 31ch;
  font-size: clamp(1.1rem, 1.9vw, 1.36rem);
  color: var(--text-main);
}

.hero-support,
.section-copy,
.loop-step p,
.stakes-feature p,
.world-narrative p,
.signal-row p,
.pressure-item p,
.enter-copy p {
  color: var(--text-muted);
}

.hero-support {
  margin-top: 1rem;
  max-width: 60ch;
  font-size: 1rem;
}

.hero-actions,
.enter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero-actions {
  padding-top: 1.3rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.78rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}

.btn-solid {
  color: #0b1524;
  background: linear-gradient(135deg, #f8f2e6 0%, #efc07c 100%);
  box-shadow: 0 12px 28px rgb(239 192 124 / 22%);
}

.btn-ghost {
  color: var(--accent-cold);
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgb(12 20 33 / 62%) 0%, rgb(7 11 18 / 72%) 100%);
}

.stakes-feature,
.world-narrative,
.enter-shell,
.loop-step,
.pressure-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep);
}

.stakes-feature::before,
.world-narrative::before,
.enter-shell::before,
.loop-step::before,
.pressure-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgb(217 230 252 / 10%), rgb(217 230 252 / 0%) 42%, rgb(239 192 124 / 8%) 100%);
}

.hero-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hero-band > div {
  position: relative;
  padding: 1rem 1.15rem 1rem 1.35rem;
  border-left: 1px solid rgb(239 192 124 / 18%);
  background: linear-gradient(90deg, rgb(12 17 26 / 72%), rgb(7 10 15 / 18%));
}

.hero-band > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 2px;
  height: calc(100% - 1.8rem);
  background: linear-gradient(180deg, rgb(239 192 124 / 56%), rgb(239 192 124 / 0%));
}

.hero-band p {
  margin-top: 0.35rem;
  color: var(--text-main);
}

.content-block {
  position: relative;
  margin-top: 5.6rem;
}

.content-block::before {
  content: "";
  position: absolute;
  top: -1.8rem;
  left: 0;
  width: min(220px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, rgb(189 204 227 / 36%), rgb(189 204 227 / 0%));
}

.section-head {
  max-width: 900px;
  margin-bottom: 2rem;
}

.section-head h2 {
  margin-top: 0.35rem;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.02rem;
}

.section-copy {
  margin-top: 0.9rem;
  max-width: 72ch;
  font-size: 1rem;
}

.loop-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem 1.6rem;
  align-items: stretch;
  position: relative;
  padding-top: 1.25rem;
}

.loop-flow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(239 192 124 / 0%), rgb(239 192 124 / 42%) 12%, rgb(239 192 124 / 42%) 88%, rgb(239 192 124 / 0%));
}

.loop-step {
  min-width: 0;
  min-height: 100%;
  padding: 0.85rem 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
}

.loop-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(239 192 124 / 82%);
  box-shadow: 0 0 0 6px rgb(239 192 124 / 8%);
}

.loop-step::before {
  display: none;
}

.loop-step h3,
.stakes-feature h3,
.world-narrative h3,
.enter-copy h3 {
  position: relative;
  z-index: 1;
  margin-top: 0.55rem;
  font-size: 1.34rem;
  letter-spacing: 0.02rem;
}

.loop-step p,
.stakes-feature p,
.world-narrative p,
.signal-row p,
.pressure-item p,
.enter-copy p {
  position: relative;
  z-index: 1;
  margin-top: 0.68rem;
}

.loop-index {
  display: inline-block;
  margin-bottom: 0.25rem;
}

.stakes-layout,
.world-layout {
  display: grid;
  gap: 1.25rem;
}

.stakes-layout {
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
}

.stakes-feature {
  padding: 1.45rem;
  background:
    linear-gradient(180deg, rgb(13 18 28 / 92%) 0%, rgb(7 10 16 / 92%) 100%),
    linear-gradient(135deg, rgb(143 170 201 / 8%), rgb(239 192 124 / 8%));
}

.stakes-feature.major {
  min-height: 100%;
  padding: 1.75rem;
}

.stakes-rail {
  display: grid;
  gap: 1.25rem;
}

.world-layout {
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
}

.world-narrative {
  padding: 1.6rem;
  background:
    linear-gradient(180deg, rgb(12 16 24 / 92%) 0%, rgb(6 9 14 / 86%) 100%),
    linear-gradient(135deg, rgb(222 234 255 / 5%), rgb(239 192 124 / 4%));
}

.world-signals {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.signal-row {
  position: relative;
  padding: 1.2rem 1.3rem 1.2rem 1.5rem;
  border-left: 1px solid rgb(239 192 124 / 18%);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(90deg, rgb(14 20 29 / 78%), rgb(6 10 15 / 20%));
}

.signal-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 2px;
  height: calc(100% - 2rem);
  background: linear-gradient(180deg, rgb(239 192 124 / 62%), rgb(239 192 124 / 0%));
}

.signal-row span {
  display: inline-block;
  color: var(--accent-cold);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03rem;
}

.pressure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pressure-item {
  padding: 1.4rem;
  background:
    linear-gradient(180deg, rgb(10 14 21 / 74%) 0%, rgb(5 8 13 / 82%) 100%),
    linear-gradient(150deg, rgb(219 233 255 / 8%), rgb(219 233 255 / 0%) 42%, rgb(239 192 124 / 6%) 100%);
}

.pressure-label {
  display: inline-block;
}

.enter-block {
  margin-bottom: 4.8rem;
}

.enter-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.6rem;
  background:
    linear-gradient(180deg, rgb(12 16 24 / 92%) 0%, rgb(6 9 14 / 86%) 100%),
    linear-gradient(135deg, rgb(222 234 255 / 5%), rgb(239 192 124 / 4%));
}

.enter-copy {
  max-width: 60ch;
}

.site-footer {
  margin-bottom: 2.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--text-low);
  font-size: 0.74rem;
  letter-spacing: 0.09rem;
  text-transform: uppercase;
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 580ms ease, transform 580ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1120px) {
  .stakes-layout,
  .world-layout,
  .enter-shell {
    grid-template-columns: 1fr;
  }

  .hero-band,
  .pressure-grid {
    grid-template-columns: 1fr 1fr;
  }

  .loop-step:not(:last-child)::after {
    left: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --section-width: min(1180px, calc(100vw - 1.5rem));
  }

  .site-header {
    padding: 0.8rem 0 0.75rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
  }

  .main-nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.95rem;
    font-size: 0.68rem;
    letter-spacing: 0.08rem;
  }

  .hero {
    min-height: auto;
    padding-top: 3.8rem;
  }

  .hero-band,
  .pressure-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(2.65rem, 18vw, 4.1rem);
  }

  .stakes-feature,
  .world-narrative,
  .enter-shell,
  .loop-step,
  .pressure-item,
  .signal-row {
    padding: 1.15rem;
  }

  .loop-step {
    padding: 0.85rem 0 0;
  }

  .content-block {
    margin-top: 3.5rem;
  }

  .hero-band > div {
    padding-left: 1.15rem;
  }

  .hero-actions,
  .enter-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .scanline-layer,
  .veil-layer {
    display: none;
  }
}