:root {
  --bg-dark: #02040d;
  --bg-deep: #06091a;
  --bg-panel: rgba(8, 14, 35, 0.62);
  --bg-panel-strong: rgba(5, 11, 28, 0.84);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.58);
  --border-light: rgba(255, 255, 255, 0.24);
  --border-bright: rgba(255, 255, 255, 0.48);
  --accent-cyan: #3fefff;
  --accent-blue: #5e8dff;
  --accent-violet: #9a5cff;
  --accent-magenta: #ff4fd8;
  --accent-teal: #31d7c6;
  --shadow-glow: 0 0 34px rgba(63, 239, 255, 0.22), 0 0 54px rgba(255, 79, 216, 0.12);
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.38);
  --radius: 8px;
  --radius-small: 4px;
  --section-gap: clamp(4.75rem, 12vw, 8.5rem);
  --container: 1180px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --nav-height: 72px;
  --nova-x: 50vw;
  --nova-y: 50vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1.25rem);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text-primary);
  background:
    linear-gradient(128deg, rgba(31, 72, 174, 0.2), transparent 34%),
    linear-gradient(236deg, rgba(255, 79, 216, 0.17), transparent 37%),
    linear-gradient(180deg, var(--bg-dark) 0%, #030817 40%, #050513 100%);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after,
.cosmic-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  content: "";
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(63, 239, 255, 0.08), transparent 23%, rgba(154, 92, 255, 0.1) 72%, transparent),
    linear-gradient(145deg, transparent 0 22%, rgba(255, 79, 216, 0.09) 44%, transparent 67%),
    linear-gradient(24deg, rgba(49, 215, 198, 0.09), transparent 42%);
  filter: saturate(1.08);
}

body::after {
  content: "";
  z-index: -3;
  opacity: 0.7;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(63, 239, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 76%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 82%, rgba(255, 79, 216, 0.76) 0 1px, transparent 2px);
  background-size: 140px 140px, 210px 210px, 170px 170px, 260px 260px;
  animation: starDrift 42s linear infinite;
}

.cosmic-field {
  z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 82%);
  opacity: 0.28;
}

.page-supernova {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.page-supernova::before,
.page-supernova::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: var(--nova-x) var(--nova-y);
  will-change: opacity, transform, filter;
}

.page-supernova::before {
  background:
    radial-gradient(circle at var(--nova-x) var(--nova-y), rgba(255, 255, 255, 1) 0 2.2vmin, rgba(226, 255, 255, 0.98) 2.4vmin 7vmin, rgba(63, 239, 255, 0.75) 13vmin, rgba(255, 79, 216, 0.46) 28vmin, rgba(94, 141, 255, 0.24) 48vmin, transparent 82vmin),
    radial-gradient(circle at var(--nova-x) var(--nova-y), rgba(255, 255, 255, 0.5), transparent 115vmin);
}

.page-supernova::after {
  background:
    conic-gradient(from -18deg at var(--nova-x) var(--nova-y),
      transparent 0deg 7deg,
      rgba(255, 255, 255, 0.98) 8deg 10deg,
      rgba(63, 239, 255, 0.58) 11deg,
      transparent 15deg 35deg,
      rgba(255, 79, 216, 0.76) 36deg 38deg,
      transparent 42deg 78deg,
      rgba(255, 255, 255, 0.88) 80deg 82deg,
      transparent 87deg 126deg,
      rgba(63, 239, 255, 0.72) 128deg 130deg,
      transparent 135deg 176deg,
      rgba(255, 255, 255, 0.94) 178deg 180deg,
      transparent 185deg 222deg,
      rgba(255, 79, 216, 0.68) 224deg 227deg,
      transparent 232deg 286deg,
      rgba(63, 239, 255, 0.72) 288deg 291deg,
      transparent 296deg 333deg,
      rgba(255, 255, 255, 0.86) 335deg 337deg,
      transparent 342deg 360deg);
  filter: blur(0.7px);
}

.page-supernova.is-active {
  opacity: 1;
  animation: pageSupernovaWhiteout 1200ms ease-out;
}

.page-supernova.is-active::before {
  animation: pageSupernovaFlash 1200ms ease-out;
}

.page-supernova.is-active::after {
  animation: pageSupernovaRays 1200ms cubic-bezier(0.08, 0.72, 0.2, 1);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

p,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}

p {
  margin: 0;
  color: var(--text-secondary);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  max-width: 10ch;
  font-size: 2.85rem;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(63, 239, 255, 0.28);
}

h2 {
  font-size: 1.9rem;
  font-weight: 760;
  text-transform: uppercase;
}

h3 {
  font-size: 1.05rem;
  font-weight: 740;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-small);
  background: var(--bg-panel-strong);
  color: var(--text-primary);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 4, 13, 0.48);
  backdrop-filter: blur(18px);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(2, 4, 13, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

.site-nav {
  width: min(100%, var(--container));
  min-height: var(--nav-height);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-mark {
  display: grid;
  gap: 0.08rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 800;
}

.brand-mark span,
.brand-mark small,
.eyebrow,
.volume-label,
.topic-number {
  letter-spacing: 0;
}

.brand-mark span {
  font-size: 0.92rem;
  line-height: 1.1;
}

.brand-mark small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.nav-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
}

.nav-toggle-line {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-header.is-open .nav-toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .nav-toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-links {
  position: absolute;
  top: calc(100% + 1px);
  left: var(--pad-x);
  right: var(--pad-x);
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: rgba(4, 8, 24, 0.95);
  box-shadow: var(--shadow-panel);
  transform: translateY(-0.8rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.site-header.is-open .nav-links {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.nav-links a {
  padding: 0.78rem 0.85rem;
  border-radius: var(--radius-small);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 700;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.hero {
  position: relative;
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-height) + 3rem) var(--pad-x) 4rem;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2, 4, 13, 0.9) 0%, rgba(2, 4, 13, 0.66) 48%, rgba(2, 4, 13, 0.38) 100%),
    linear-gradient(180deg, rgba(2, 4, 13, 0.38) 0%, rgba(2, 4, 13, 0.22) 48%, rgba(2, 4, 13, 0.96) 100%),
    url("assets/images/hero-space-background.png") 64% center / cover no-repeat;
  opacity: 1;
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.02);
  animation: heroSpaceDrift 28s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(to top, var(--bg-dark), transparent);
}

.hero-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.72;
}

.hero-lines span {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 239, 255, 0.68), rgba(255, 79, 216, 0.36), transparent);
  transform: rotate(-11deg);
  animation: scanLine 9s ease-in-out infinite;
}

.hero-lines span:nth-child(1) {
  top: 24%;
}

.hero-lines span:nth-child(2) {
  top: 52%;
  animation-delay: -3s;
}

.hero-lines span:nth-child(3) {
  top: 76%;
  animation-delay: -6s;
}

.hero-inner,
.section-shell {
  width: min(100%, var(--container));
  margin: 0 auto;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.25rem, 7vw, 5rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 330px;
  padding: 0.9rem 0;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: -0.7rem -0.85rem;
  z-index: -1;
  border-left: 1px solid rgba(63, 239, 255, 0.34);
  background: linear-gradient(90deg, rgba(2, 4, 13, 0.36), rgba(2, 4, 13, 0.08));
  box-shadow: -18px 0 38px rgba(2, 4, 13, 0.42);
  backdrop-filter: blur(3px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
}

.hero-subtitle {
  max-width: 700px;
  margin-top: 1.1rem;
  color: var(--text-primary);
  font-size: 1.12rem;
  font-weight: 680;
}

.hero-copy p:not(.eyebrow):not(.hero-subtitle):not(.hero-note) {
  max-width: 650px;
  margin-top: 1rem;
  font-size: 1rem;
}

.hero-note {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 1.55rem;
  padding: 0.82rem 1.05rem;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-primary);
  box-shadow: var(--shadow-glow);
  font-size: 0.9rem;
  font-weight: 820;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button::after {
  content: "";
  width: 28px;
  height: 1px;
  margin-left: 0.85rem;
  background: currentColor;
  opacity: 0.72;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 28px rgba(63, 239, 255, 0.34), 0 0 48px rgba(255, 79, 216, 0.22);
}

.button:active {
  transform: translateY(0) scale(0.99);
}

.hero-archive {
  position: absolute;
  right: -7.5rem;
  bottom: -5rem;
  z-index: 1;
  width: min(100%, 470px);
  min-height: 250px;
  display: grid;
  place-items: center;
  justify-self: center;
  opacity: 0.38;
  pointer-events: none;
}

.cosmic-vortex {
  position: relative;
  width: min(70vw, 320px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  isolation: isolate;
  pointer-events: auto;
  filter: drop-shadow(0 0 26px rgba(63, 239, 255, 0.2)) drop-shadow(0 0 46px rgba(255, 79, 216, 0.16));
  touch-action: manipulation;
  transition: transform 180ms ease, filter 180ms ease;
}

.cosmic-vortex:hover,
.cosmic-vortex:focus-visible {
  transform: scale(1.025);
  filter: drop-shadow(0 0 34px rgba(63, 239, 255, 0.3)) drop-shadow(0 0 60px rgba(255, 79, 216, 0.24));
}

.cosmic-vortex:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.42);
  outline-offset: 10px;
  border-radius: 50%;
}

.cosmic-vortex:active {
  transform: scale(0.985);
}

.cosmic-vortex::before,
.cosmic-vortex::after,
.vortex-halo,
.vortex-cloud,
.vortex-core,
.supernova-flare,
.supernova-wave,
.vortex-beam,
.vortex-particle {
  content: "";
  position: absolute;
  pointer-events: none;
}

.cosmic-vortex::before {
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, rgba(255, 255, 255, 0.95) 0 2%, transparent 10%),
    radial-gradient(circle at 34% 62%, rgba(63, 239, 255, 0.5), transparent 24%),
    radial-gradient(circle at 68% 35%, rgba(255, 79, 216, 0.38), transparent 26%),
    radial-gradient(circle at 70% 72%, rgba(49, 215, 198, 0.34), transparent 28%),
    radial-gradient(circle, rgba(94, 141, 255, 0.16), transparent 62%);
  filter: blur(5px) saturate(1.3);
  opacity: 0.88;
  animation: vortexBreathe 7s ease-in-out infinite;
}

.cosmic-vortex::after {
  inset: 13%;
  border-radius: 44% 56% 52% 48%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    conic-gradient(from 40deg, transparent 0 12%, rgba(63, 239, 255, 0.24) 16%, transparent 24% 42%, rgba(255, 79, 216, 0.22) 48%, transparent 58% 78%, rgba(49, 215, 198, 0.22) 84%, transparent 100%);
  box-shadow: inset 0 0 44px rgba(63, 239, 255, 0.12), 0 0 48px rgba(154, 92, 255, 0.2);
  mix-blend-mode: screen;
  animation: vortexTurn 22s linear infinite;
}

.vortex-cloud {
  inset: 18%;
  border-radius: 43% 57% 50% 50%;
  background:
    radial-gradient(circle at 30% 46%, rgba(255, 255, 255, 0.7) 0 4%, transparent 18%),
    radial-gradient(circle at 42% 35%, rgba(94, 141, 255, 0.75), transparent 26%),
    radial-gradient(circle at 66% 45%, rgba(154, 92, 255, 0.62), transparent 29%),
    radial-gradient(circle at 58% 70%, rgba(63, 239, 255, 0.44), transparent 28%);
  filter: blur(10px);
  opacity: 0.84;
  transform: rotate(-12deg);
  animation: cloudMorph 9s ease-in-out infinite alternate;
}

.vortex-core {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 12%, rgba(63, 239, 255, 0.95) 13% 26%, rgba(154, 92, 255, 0.45) 38%, transparent 72%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.76), 0 0 58px rgba(63, 239, 255, 0.58), 0 0 88px rgba(255, 79, 216, 0.3);
  animation: corePulse 3.8s ease-in-out infinite;
}

.supernova-flare {
  z-index: 8;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 16%, rgba(63, 239, 255, 0.92) 24%, rgba(255, 79, 216, 0.52) 46%, transparent 72%);
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.74), 0 0 78px rgba(63, 239, 255, 0.62), 0 0 118px rgba(255, 79, 216, 0.38);
  opacity: 0;
  transform: scale(0.45);
}

.supernova-wave {
  z-index: 7;
  inset: 36%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.34), 0 0 48px rgba(63, 239, 255, 0.34), inset 0 0 26px rgba(255, 79, 216, 0.2);
}

.cosmic-vortex.is-supernova {
  animation: supernovaShake 760ms ease-out;
}

.cosmic-vortex.is-supernova::before {
  animation: supernovaBloom 980ms ease-out, vortexBreathe 7s ease-in-out infinite 980ms;
}

.cosmic-vortex.is-supernova::after {
  animation: supernovaSpin 980ms ease-out, vortexTurn 22s linear infinite 980ms;
}

.cosmic-vortex.is-supernova .vortex-core {
  animation: supernovaCore 980ms ease-out, corePulse 3.8s ease-in-out infinite 980ms;
}

.cosmic-vortex.is-supernova .vortex-cloud {
  animation: supernovaCloud 980ms ease-out, cloudMorph 9s ease-in-out infinite alternate 980ms;
}

.cosmic-vortex.is-supernova .supernova-flare {
  animation: supernovaFlare 980ms ease-out;
}

.cosmic-vortex.is-supernova .wave-one {
  animation: supernovaWave 980ms ease-out;
}

.cosmic-vortex.is-supernova .wave-two {
  animation: supernovaWave 980ms ease-out 90ms;
}

.cosmic-vortex.is-supernova .wave-three {
  animation: supernovaWave 980ms ease-out 180ms;
}

.cosmic-vortex.is-supernova .vortex-beam {
  left: -82vw;
  right: -82vw;
  z-index: 9;
  height: 2px;
  animation: supernovaBeam 1200ms ease-out, beamShimmer 5.5s ease-in-out infinite 1200ms;
}

.cosmic-vortex.is-supernova .vortex-particle {
  animation: supernovaParticle 980ms cubic-bezier(0.12, 0.72, 0.24, 1), particleDrift 7.5s ease-in-out infinite 980ms;
}

.cosmic-vortex.is-supernova .particle-two {
  animation-delay: 35ms, 980ms;
}

.cosmic-vortex.is-supernova .particle-three {
  animation-delay: 70ms, 980ms;
}

.cosmic-vortex.is-supernova .particle-four {
  animation-delay: 105ms, 980ms;
}

.cosmic-vortex.is-supernova .particle-five {
  animation-delay: 140ms, 980ms;
}

.cosmic-vortex.is-supernova .particle-six {
  animation-delay: 175ms, 980ms;
}

.vortex-halo {
  inset: 16%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.vortex-halo-one {
  transform: rotateX(64deg) rotateZ(-18deg);
  box-shadow: 0 0 24px rgba(63, 239, 255, 0.18);
  animation: haloFloatOne 8s ease-in-out infinite;
}

.vortex-halo-two {
  inset: 25%;
  border-color: rgba(255, 79, 216, 0.22);
  transform: rotateX(58deg) rotateZ(54deg);
  animation: haloFloatTwo 10s ease-in-out infinite;
}

.vortex-beam {
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 239, 255, 0.85), rgba(255, 255, 255, 0.7), rgba(255, 79, 216, 0.72), transparent);
  opacity: 0.56;
  transform-origin: 50% 50%;
  animation: beamShimmer 5.5s ease-in-out infinite;
}

.vortex-beam-one {
  transform: rotate(-18deg);
}

.vortex-beam-two {
  transform: rotate(42deg);
  animation-delay: -2.6s;
}

.vortex-particle {
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(63, 239, 255, 0.75);
  animation: particleDrift 7.5s ease-in-out infinite;
}

.particle-one {
  top: 18%;
  left: 24%;
  --burst-x: -92px;
  --burst-y: -86px;
}

.particle-two {
  top: 30%;
  right: 14%;
  animation-delay: -1.4s;
  --burst-x: 110px;
  --burst-y: -56px;
}

.particle-three {
  right: 25%;
  bottom: 19%;
  animation-delay: -2.8s;
  --burst-x: 88px;
  --burst-y: 88px;
}

.particle-four {
  left: 16%;
  bottom: 27%;
  animation-delay: -4.1s;
  --burst-x: -106px;
  --burst-y: 72px;
}

.particle-five {
  top: 50%;
  left: 4%;
  animation-delay: -5s;
  --burst-x: -132px;
  --burst-y: 0;
}

.particle-six {
  top: 12%;
  left: 58%;
  animation-delay: -6.2s;
  --burst-x: 36px;
  --burst-y: -118px;
}

.section {
  position: relative;
  padding: var(--section-gap) var(--pad-x);
}

.intro-section {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.section-heading {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.section-heading-wide {
  max-width: 860px;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

.two-column,
.library-layout {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
}

.archive-panel,
.topic-card,
.book-card,
.progress-module,
.reader-grid,
.global-readers-panel,
.review-card,
.final-shell {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
}

.archive-panel {
  position: relative;
  padding: clamp(1.2rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
  overflow: hidden;
}

.archive-panel::before,
.topic-card::before,
.book-card::before,
.progress-module::before,
.global-readers-panel::before,
.review-card::before,
.final-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(63, 239, 255, 0.16), transparent 24%, transparent 76%, rgba(255, 79, 216, 0.16)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%);
  pointer-events: none;
}

.archive-panel p {
  position: relative;
}

.topics-section {
  background: linear-gradient(180deg, transparent, rgba(6, 9, 26, 0.64), transparent);
}

.topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.topic-card {
  position: relative;
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1.05rem;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.topic-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.38);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
}

.topic-number {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-small);
  color: var(--accent-cyan);
  background: rgba(3, 8, 26, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
}

.topic-card h3,
.topic-card p,
.book-card > *,
.progress-module > *,
.final-shell > * {
  position: relative;
}

.topic-detail {
  color: var(--text-muted);
  font-size: 0.93rem;
}

@media (max-width: 559px) {
  .topic-grid {
    gap: 0.65rem;
  }

  .topic-card.is-accordion {
    min-height: 0;
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    cursor: pointer;
  }

  .topic-card.is-accordion:hover {
    transform: none;
  }

  .topic-card.is-accordion .topic-number {
    grid-column: 1;
    grid-row: 1;
  }

  .topic-card.is-accordion h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    line-height: 1.3;
  }

  .topic-card.is-accordion::after {
    content: "\2193";
    position: relative;
    z-index: 1;
    grid-column: 3;
    grid-row: 1;
    color: var(--accent-cyan);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
  }

  .topic-card.is-accordion.is-open::after {
    content: "\2191";
  }

  .topic-card.is-accordion > p {
    grid-column: 1 / -1;
    margin: 0;
  }

  .topic-card.is-accordion:not(.is-open) > p {
    display: none;
  }
}

.volumes-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 4, 13, 0.84) 0%, rgba(2, 4, 13, 0.54) 48%, rgba(2, 4, 13, 0.78) 100%),
    linear-gradient(180deg, rgba(2, 4, 13, 0.62) 0%, rgba(2, 4, 13, 0.34) 48%, rgba(2, 4, 13, 0.82) 100%),
    url("assets/images/volumes-section-background.png") center center / cover no-repeat;
}

.volumes-section > .section-shell {
  position: relative;
  z-index: 1;
}

.book-track {
  display: flex;
  gap: 1rem;
  margin: 0 calc(var(--pad-x) * -1);
  padding: 0 var(--pad-x) 1.15rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08);
}

.book-card {
  position: relative;
  flex: 0 0 min(78vw, 290px);
  scroll-snap-align: center;
  display: grid;
  gap: 0.95rem;
  padding: 0.8rem;
  overflow: hidden;
}

.cover-shell {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.34), 0 0 30px rgba(154, 92, 255, 0.2);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.cover-shell img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 5px;
}

.book-card:hover .cover-shell {
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.42), 0 0 34px rgba(63, 239, 255, 0.24);
}

.book-copy {
  display: grid;
  gap: 0.55rem;
}

.volume-label {
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.book-copy p:not(.volume-label) {
  font-size: 0.9rem;
}

.centered-action {
  display: flex;
  justify-content: center;
}

.global-readers-section {
  padding-top: clamp(2.2rem, 6vw, 4rem);
  padding-bottom: clamp(2.2rem, 6vw, 4rem);
}

.global-readers-panel {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: clamp(1rem, 4vw, 1.6rem);
  overflow: hidden;
}

.global-readers-panel h2 {
  font-size: 1.45rem;
}

.global-readers-panel p:not(.eyebrow) {
  margin-top: 0.55rem;
}

.flag-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.flag-strip .flag-tile {
  min-width: 2.45rem;
  min-height: 2.45rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 18px rgba(63, 239, 255, 0.12);
  line-height: 1;
}

.flag-strip img {
  width: 2.05rem;
  aspect-ratio: 3 / 2;
  height: auto;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.24);
}

.reviews-section {
  padding-top: clamp(2.6rem, 7vw, 4.8rem);
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.review-card {
  position: relative;
  min-height: 232px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.review-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: var(--shadow-panel), 0 0 32px rgba(63, 239, 255, 0.14);
}

.review-card > * {
  position: relative;
}

.review-stars {
  color: rgba(63, 239, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1;
}

.review-card blockquote {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.review-card blockquote p {
  font-size: 0.95rem;
}

.review-card figcaption {
  display: grid;
  gap: 0.18rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.review-card figcaption strong {
  color: var(--text-primary);
  font-size: 0.92rem;
}

.review-card figcaption span {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.journey-section {
  background:
    linear-gradient(180deg, transparent, rgba(3, 8, 24, 0.72) 36%, rgba(3, 8, 24, 0.72) 68%, transparent);
}

.timeline {
  position: relative;
  display: grid;
  gap: 0.7rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: timeline;
}

.timeline li {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.8rem 0.75rem 3.25rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-primary);
  font-weight: 760;
}

.timeline li::before {
  counter-increment: timeline;
  content: counter(timeline, decimal-leading-zero);
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-small);
  color: var(--accent-cyan);
  background: rgba(2, 4, 13, 0.86);
  font-size: 0.72rem;
  transform: translateY(-50%);
}

.timeline li::after {
  content: "";
  position: absolute;
  left: 1.63rem;
  bottom: -0.72rem;
  width: 1px;
  height: 0.72rem;
  background: linear-gradient(var(--accent-cyan), var(--accent-magenta));
}

.timeline li:last-child::after {
  display: none;
}

.library-layout {
  align-items: center;
}

.progress-module {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.1rem, 5vw, 2rem);
  overflow: hidden;
}

.progress-stat {
  display: grid;
  gap: 0.2rem;
}

.progress-stat strong {
  color: var(--text-primary);
  font-size: 3.8rem;
  line-height: 0.9;
}

.progress-stat span {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 800;
}

.progress-stat-muted strong {
  color: rgba(255, 255, 255, 0.52);
}

.progress-track {
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-track span {
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue), var(--accent-magenta));
  box-shadow: 0 0 24px rgba(63, 239, 255, 0.42);
}

.reader-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  padding: 0.9rem;
}

.reader-grid span {
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-small);
  padding: 0.7rem 0.75rem;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-secondary);
  font-weight: 650;
}

.final-section {
  min-height: 72svh;
  display: grid;
  align-items: center;
  padding-bottom: clamp(5rem, 13vw, 9rem);
}

.final-shell {
  position: relative;
  max-width: 880px;
  padding: clamp(1.35rem, 6vw, 3rem);
  overflow: hidden;
}

.final-shell h2 {
  margin-top: 0.2rem;
}

.final-shell p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 1rem;
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(2, 4, 13, 0.78);
}

.footer-inner {
  display: grid;
  gap: 0.55rem;
  padding: 1.4rem var(--pad-x) 1.6rem;
}

.footer-inner strong {
  font-size: 0.95rem;
}

.footer-inner p,
.footer-inner small {
  color: var(--text-muted);
}

.footer-inner small {
  font-size: 0.82rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  margin-top: 0.35rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text-primary);
}

.footer-cookie-settings {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 180ms ease;
}

.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
  color: var(--text-primary);
}

.cookie-consent {
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 1rem;
  z-index: 220;
  display: none;
  pointer-events: none;
}

.cookie-consent.is-visible {
  display: block;
}

.cookie-consent__panel {
  width: min(100%, 760px);
  margin-left: auto;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(5, 11, 28, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54), 0 0 42px rgba(63, 239, 255, 0.14), 0 0 58px rgba(255, 79, 216, 0.1);
  backdrop-filter: blur(20px);
  pointer-events: auto;
}

.cookie-consent__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.cookie-consent h2 {
  margin-top: 0.45rem;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: none;
}

.cookie-consent p {
  margin-top: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.cookie-consent a {
  color: var(--text-primary);
  font-weight: 750;
  text-decoration: none;
}

.cookie-consent a:hover,
.cookie-consent a:focus-visible {
  color: var(--accent-cyan);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cookie-action {
  min-height: 42px;
  padding: 0.68rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.cookie-action:hover,
.cookie-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 24px rgba(63, 239, 255, 0.22);
}

.cookie-action--primary {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.13);
}

.cookie-action[data-cookie-save] {
  display: none;
}

.cookie-consent.is-settings .cookie-action[data-cookie-save] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cookie-preferences {
  display: none;
  gap: 0.7rem;
  margin-top: 1rem;
}

.cookie-consent.is-settings .cookie-preferences {
  display: grid;
}

.cookie-choice {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.045);
}

.cookie-choice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-choice strong {
  color: var(--text-primary);
}

.cookie-choice small {
  color: var(--text-muted);
}

.cookie-lock {
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 850;
  white-space: nowrap;
}

.cookie-switch {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
}

.cookie-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-switch span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cookie-switch span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  transition: transform 180ms ease;
}

.cookie-switch input:checked + span {
  border-color: rgba(63, 239, 255, 0.68);
  background: rgba(63, 239, 255, 0.24);
  box-shadow: 0 0 18px rgba(63, 239, 255, 0.18);
}

.cookie-switch input:checked + span::before {
  transform: translateX(22px);
}

.legal-page-body .site-header {
  background: rgba(2, 4, 13, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
}

.legal-page-body .site-nav {
  gap: 0.55rem;
}

.legal-page-body .brand-mark {
  min-width: 0;
}

.legal-main {
  min-height: 100svh;
  padding: calc(var(--nav-height) + 3.25rem) var(--pad-x) var(--section-gap);
}

.legal-shell {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.legal-hero {
  display: grid;
  gap: 1.4rem;
}

.legal-hero h1 {
  max-width: 13ch;
}

.legal-intro {
  max-width: 720px;
  color: var(--text-secondary);
  font-size: 1rem;
}

.legal-panel {
  position: relative;
  display: grid;
  gap: 1.45rem;
  min-width: 0;
  margin-top: 1rem;
  padding: clamp(1.05rem, 4vw, 2rem);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.legal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(63, 239, 255, 0.14), transparent 28%, transparent 72%, rgba(255, 79, 216, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%);
  pointer-events: none;
}

.legal-block,
.contact-card {
  position: relative;
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.legal-block h2,
.contact-card h2 {
  color: var(--text-primary);
  font-size: 1.04rem;
  line-height: 1.25;
  text-transform: none;
}

.legal-block p,
.legal-block li,
.contact-card p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.legal-block ul {
  display: grid;
  gap: 0.3rem;
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.legal-address {
  font-style: normal;
}

.legal-home-button {
  flex: 0 0 auto;
  margin-top: 0;
  min-height: 42px;
  padding: 0.66rem 0.76rem;
  font-size: 0.74rem;
  white-space: nowrap;
}

.legal-home-button::after {
  display: none;
}

.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.contact-card {
  min-height: 110px;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.045);
}

.legal-email {
  color: var(--text-primary);
  font-weight: 760;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.legal-email:hover,
.legal-email:focus-visible {
  color: var(--accent-cyan);
}

.js-enabled .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.js-enabled .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

@media (min-width: 560px) {
  .hero-copy {
    max-width: 520px;
  }

  h1 {
    font-size: 3.35rem;
  }

  h2 {
    font-size: 2.35rem;
  }

  .hero-subtitle {
    font-size: 1.22rem;
  }

  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .legal-page-body .site-nav {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    min-height: auto;
    padding-block: 0.75rem;
  }

  .legal-home-button {
    width: auto;
    max-width: 100%;
    min-height: 40px;
    margin: 0;
  }

  .legal-main {
    padding-top: 9.5rem;
  }
}

@media (max-width: 560px) {
  .cookie-consent {
    left: 0;
    right: 0;
    bottom: 0;
  }

  .cookie-consent__panel {
    width: 100%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-action {
    width: 100%;
  }
}

@media (max-width: 759px) {
  .hero-copy {
    pointer-events: none;
  }

  .hero-copy .button {
    pointer-events: auto;
  }
}

@media (min-width: 760px) {
  .hero-copy {
    max-width: 680px;
  }

  h1 {
    font-size: 4.7rem;
  }

  h2 {
    font-size: 3.15rem;
  }

  h3 {
    font-size: 1.15rem;
  }

  .hero-subtitle {
    font-size: 1.42rem;
  }

  .hero-copy p:not(.eyebrow):not(.hero-subtitle):not(.hero-note) {
    font-size: 1.08rem;
  }

  .progress-stat strong {
    font-size: 5.2rem;
  }

  .nav-toggle {
    display: none;
  }

  .nav-links {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav-links a {
    padding: 0.55rem 0.58rem;
  }

  .legal-hero h1 {
    max-width: 15ch;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.72fr);
    align-items: center;
  }

  .hero-archive {
    position: static;
    width: min(100%, 470px);
    min-height: 320px;
    opacity: 1;
  }

  .cosmic-vortex {
    width: min(78vw, 410px);
  }

  .two-column,
  .library-layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    align-items: start;
  }

  .library-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline li::after {
    display: none;
  }
}

@media (min-width: 980px) {
  .hero {
    padding-bottom: 3.5rem;
  }

  .hero::before {
    background:
      linear-gradient(90deg, rgba(2, 4, 13, 0.88) 0%, rgba(2, 4, 13, 0.56) 42%, rgba(2, 4, 13, 0.22) 100%),
      linear-gradient(180deg, rgba(2, 4, 13, 0.28) 0%, rgba(2, 4, 13, 0.16) 48%, rgba(2, 4, 13, 0.98) 100%),
      url("assets/images/hero-space-background.png") center center / cover no-repeat;
  }

  .topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .book-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .book-card {
    min-width: 0;
    padding: 0.68rem;
  }

  .book-card:nth-child(2),
  .book-card:nth-child(4) {
    margin-top: 1.6rem;
  }

  .book-card:nth-child(3) {
    margin-top: 0.35rem;
  }

  .centered-action {
    margin-top: 2.2rem;
  }

  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .timeline li {
    min-height: 76px;
  }

  .global-readers-panel {
    grid-template-columns: minmax(0, 0.74fr) minmax(420px, 1fr);
    align-items: center;
  }

  .global-readers-panel h2 {
    font-size: 1.8rem;
  }

  .flag-strip {
    justify-content: flex-end;
  }

  .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  h1 {
    font-size: 6.3rem;
  }

  h2 {
    font-size: 4.1rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .hero-subtitle {
    font-size: 1.6rem;
  }

  .cosmic-vortex {
    width: min(32vw, 470px);
  }

  .progress-stat strong {
    font-size: 6rem;
  }

  .topic-card {
    padding: 1.2rem;
  }

  .book-track {
    gap: 1rem;
  }
}

@media (max-width: 380px) {
  .brand-mark span {
    font-size: 0.82rem;
  }

  .brand-mark small {
    font-size: 0.62rem;
  }

  .button {
    width: 100%;
    padding-inline: 0.75rem;
  }

  .button::after {
    width: 20px;
  }

  .legal-page-body .site-nav {
    padding-inline: 0.75rem;
  }

  .legal-page-body .brand-mark span {
    font-size: 0.74rem;
  }

  .legal-page-body .brand-mark small {
    font-size: 0.56rem;
  }

  .legal-home-button {
    width: auto;
    min-height: 40px;
    padding-inline: 0.62rem;
    font-size: 0.7rem;
  }

  .flag-strip .flag-tile {
    min-width: 2.2rem;
    min-height: 2.2rem;
  }

  .flag-strip img {
    width: 1.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .js-enabled .reveal {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroSpaceDrift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.055) translate3d(-0.5%, -0.35%, 0);
  }
}

@keyframes starDrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 140px 220px, -210px 180px, 170px -160px, -260px -220px;
  }
}

@keyframes scanLine {
  0%,
  100% {
    opacity: 0.18;
    transform: translateY(-18px) rotate(-11deg);
  }
  50% {
    opacity: 0.72;
    transform: translateY(18px) rotate(-11deg);
  }
}

@keyframes vortexBreathe {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(0.96) rotate(-2deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) rotate(2deg);
  }
}

@keyframes supernovaShake {
  0%,
  100% {
    transform: scale(1);
  }
  18% {
    transform: scale(0.94);
  }
  36% {
    transform: scale(1.1);
  }
  62% {
    transform: scale(1.02);
  }
}

@keyframes pageSupernovaWhiteout {
  0% {
    background-color: rgba(255, 255, 255, 0.48);
  }
  18% {
    background-color: rgba(255, 255, 255, 0.68);
  }
  36% {
    background-color: rgba(226, 255, 255, 0.38);
  }
  62% {
    background-color: rgba(154, 220, 255, 0.16);
  }
  100% {
    background-color: rgba(255, 255, 255, 0);
  }
}

@keyframes pageSupernovaFlash {
  0% {
    opacity: 0;
    transform: none;
    filter: blur(0) brightness(1);
  }
  16% {
    opacity: 0.98;
    transform: none;
    filter: blur(0) brightness(1.95);
  }
  32% {
    opacity: 0.72;
    transform: none;
    filter: blur(4px) brightness(1.48);
  }
  58% {
    opacity: 0.26;
    transform: none;
    filter: blur(10px) brightness(1.18);
  }
  100% {
    opacity: 0;
    transform: none;
    filter: blur(18px) brightness(1);
  }
}

@keyframes pageSupernovaRays {
  0% {
    opacity: 0;
    transform: rotate(-6deg);
    filter: blur(0) brightness(1);
  }
  14% {
    opacity: 1;
    transform: rotate(-1deg);
    filter: blur(0.2px) brightness(1.8);
  }
  44% {
    opacity: 0.72;
    transform: rotate(2deg);
    filter: blur(1px) brightness(1.25);
  }
  100% {
    opacity: 0;
    transform: rotate(8deg);
    filter: blur(2px) brightness(1);
  }
}

@keyframes supernovaBloom {
  0% {
    opacity: 0.74;
    transform: scale(0.82) rotate(-6deg);
    filter: blur(5px) saturate(1.2);
  }
  24% {
    opacity: 1;
    transform: scale(1.28) rotate(5deg);
    filter: blur(1px) saturate(1.8);
  }
  100% {
    opacity: 0.86;
    transform: scale(1) rotate(0);
    filter: blur(5px) saturate(1.3);
  }
}

@keyframes supernovaSpin {
  0% {
    opacity: 0.8;
    transform: scale(0.9) rotate(0deg);
  }
  32% {
    opacity: 1;
    transform: scale(1.22) rotate(118deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}

@keyframes supernovaCore {
  0% {
    opacity: 0.86;
    transform: scale(0.9);
  }
  22% {
    opacity: 1;
    transform: scale(1.8);
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.95), 0 0 98px rgba(63, 239, 255, 0.9), 0 0 152px rgba(255, 79, 216, 0.56);
  }
  100% {
    opacity: 0.94;
    transform: scale(1);
  }
}

@keyframes supernovaCloud {
  0% {
    opacity: 0.72;
    transform: rotate(-12deg) scale(0.9);
    filter: blur(10px) saturate(1.1);
  }
  34% {
    opacity: 1;
    transform: rotate(18deg) scale(1.36);
    filter: blur(7px) saturate(1.7);
  }
  100% {
    opacity: 0.84;
    transform: rotate(0deg) scale(1);
    filter: blur(10px) saturate(1.1);
  }
}

@keyframes supernovaFlare {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  18% {
    opacity: 1;
    transform: scale(1.48);
  }
  48% {
    opacity: 0.72;
    transform: scale(2.15);
  }
  100% {
    opacity: 0;
    transform: scale(3.1);
  }
}

@keyframes supernovaWave {
  0% {
    opacity: 0;
    transform: scale(0.36);
  }
  18% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(4.35);
  }
}

@keyframes supernovaBeam {
  0%,
  100% {
    opacity: 0.22;
    filter: blur(0);
  }
  26% {
    opacity: 1;
    filter: blur(1px);
    box-shadow: 0 0 26px rgba(255, 255, 255, 0.7), 0 0 64px rgba(63, 239, 255, 0.56);
  }
}

@keyframes supernovaParticle {
  0% {
    opacity: 0.4;
    transform: translate3d(0, 0, 0) scale(0.74);
  }
  28% {
    opacity: 1;
    transform: translate3d(calc(var(--burst-x) * 0.86), calc(var(--burst-y) * 0.86), 0) scale(1.65);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--burst-x), var(--burst-y), 0) scale(0.25);
  }
}

@keyframes vortexTurn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cloudMorph {
  0% {
    border-radius: 43% 57% 50% 50%;
    transform: rotate(-14deg) scale(0.95);
  }
  100% {
    border-radius: 57% 43% 46% 54%;
    transform: rotate(12deg) scale(1.08);
  }
}

@keyframes corePulse {
  0%,
  100% {
    opacity: 0.86;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes haloFloatOne {
  0%,
  100% {
    transform: rotateX(64deg) rotateZ(-18deg) translateY(0);
  }
  50% {
    transform: rotateX(64deg) rotateZ(8deg) translateY(-8px);
  }
}

@keyframes haloFloatTwo {
  0%,
  100% {
    transform: rotateX(58deg) rotateZ(54deg) translateY(0);
  }
  50% {
    transform: rotateX(58deg) rotateZ(24deg) translateY(8px);
  }
}

@keyframes beamShimmer {
  0%,
  100% {
    opacity: 0.2;
    filter: blur(0);
  }
  50% {
    opacity: 0.74;
    filter: blur(1px);
  }
}

@keyframes particleDrift {
  0%,
  100% {
    opacity: 0.28;
    transform: translate3d(0, 0, 0) scale(0.72);
  }
  50% {
    opacity: 1;
    transform: translate3d(10px, -14px, 0) scale(1.15);
  }
}