/* Auto-generated by scripts/build-css.py — do not edit directly */

/* ── css/tokens/variables.css ── */
/* ==========================================================================
   Design Tokens
   Single source of truth for theming. Maps 1:1 to Astro global styles.
   ========================================================================== */

:root {
  /* ── Color Palette ───────────────────────────────────────────────────── */
  --color-bg-deep: #050608;
  --color-bg-panel: #11151c;
  --color-bg-panel-hover: #161b24;
  --color-bg-glass: rgba(17, 21, 28, 0.72);
  --color-bg-glass-strong: rgba(17, 21, 28, 0.92);

  --color-text-primary: #ececec;
  --color-text-secondary: rgba(236, 236, 236, 0.72);
  --color-text-muted: rgba(236, 236, 236, 0.48);

  --color-gold: #c9a75a;
  --color-gold-light: #dfc88a;
  --color-gold-dark: #a8893f;
  --color-gold-dim: rgba(201, 167, 90, 0.24);
  --color-gold-glow: rgba(201, 167, 90, 0.25);
  --color-gold-glow-strong: rgba(201, 167, 90, 0.3);

  --color-blue: #2a7bff;
  --color-blue-dim: rgba(42, 123, 255, 0.18);
  --color-blue-glow: rgba(42, 123, 255, 0.2);

  --color-purple: #5a43c6;
  --color-purple-dim: rgba(90, 67, 198, 0.18);
  --color-purple-glow: rgba(90, 67, 198, 0.12);

  --color-border: rgba(236, 236, 236, 0.08);
  --color-border-strong: rgba(236, 236, 236, 0.16);
  --color-overlay-light: rgba(255, 255, 255, 0.04);
  --color-bg-deep-rgb: 5, 6, 8;
  --color-overlay-hero-top: rgba(var(--color-bg-deep-rgb), 0.3);
  --color-overlay-hero-mid: rgba(var(--color-bg-deep-rgb), 0.85);
  --color-genesis-purple-overlay: rgba(90, 67, 198, 0.15);
  --color-genesis-blue-overlay: rgba(42, 123, 255, 0.12);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-4xl: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --text-hero: clamp(3rem, 2rem + 5vw, 6.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0.02em;
  --tracking-nav: 0.04em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(5rem, 8vw, 9rem);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max: 72rem;
  --container-wide: 90rem;
  --container-gutter: var(--space-xl);
  --container-gutter-tablet: var(--space-lg);
  --container-gutter-phone: var(--space-md);
  --nav-height: 4.5rem;
  --nav-height-scrolled: 4rem;
  --nav-height-tablet: 3.75rem;
  --nav-logo-size: 2.25rem;
  --nav-logo-scale-default: 1;
  --nav-logo-scale-scrolled: 0.88;
  --nav-scroll-threshold: 40;
  --nav-glass-bg: rgba(10, 12, 16, 0.62);
  --nav-glass-border: rgba(236, 236, 236, 0.06);
  --nav-link-underline-height: 2px;
  --nav-link-glow: 0 0 18px rgba(201, 167, 90, 0.45);
  --nav-link-glow-strong: 0 0 28px rgba(201, 167, 90, 0.55);
  --transition-nav: 520ms cubic-bezier(0.22, 1, 0.36, 1);
  --hero-logo-size-min: 4.5rem;
  --hero-logo-size-fluid: clamp(5rem, 12vw, 8rem);

  /* Content max-widths */
  --width-prose: 48rem;
  --width-section-header: 42rem;
  --width-about-content: 75rem;
  --width-hero-content: 52rem;
  --width-genesis-content: 56rem;
  --width-hero-actions: 20rem;

  /* ── Effects ─────────────────────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow-gold: 0 0 40px rgba(201, 167, 90, 0.15);
  --shadow-glow-blue: 0 0 60px rgba(42, 123, 255, 0.12);
  --shadow-glow-purple: 0 0 60px rgba(90, 67, 198, 0.12);

  --blur-glass: 20px;
  --blur-nav: 24px;
  --blur-button: 8px;

  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
  --z-base: 1;
  --z-elevated: 10;
  --z-nav: 100;
  --z-overlay: 200;

  /* ── Component Tokens ────────────────────────────────────────────────── */
  --btn-padding-y: 0.875rem;
  --btn-padding-x: 1.75rem;
  --btn-padding-y-lg: 1.125rem;
  --btn-padding-x-lg: 2.5rem;

  --card-padding: var(--space-2xl);
  --card-padding-tablet: var(--space-xl);
  --card-body-padding: var(--space-lg) var(--space-xl) var(--space-xl);
  --card-media-ratio: 16 / 9;
  --card-icon-size: 3rem;
  --card-icon-size-compact: 2.25rem;
  --card-icon-svg: 1.5rem;

  --social-link-size: 2.5rem;
  --social-icon-size: 1.125rem;

  --divider-width: 4rem;
  --divider-height: 2px;
  --scroll-line-height: 3rem;

  /* ── Animation Delays (reveal stagger) ───────────────────────────────── */
  --reveal-delay-1: 100ms;
  --reveal-delay-2: 200ms;
  --reveal-delay-3: 300ms;
  --reveal-delay-4: 400ms;
  --reveal-delay-5: 500ms;

  /* Hero entrance delays */
  --hero-delay-logo: 0.2s;
  --hero-delay-headline: 0.4s;
  --hero-delay-subheadline: 0.55s;
  --hero-delay-mission: 0.7s;
  --hero-delay-actions: 0.85s;
  --hero-delay-scroll: 1.4s;
}

/* ── css/tokens/image-assets.css ── */
/* ==========================================================================
   Responsive image asset URLs
   Standard tier (mobile / laptop / tablet) by default; PC tier at 1280px+.
   Generated paths match scripts/build-image-variants.py output.
   ========================================================================== */

:root {
  --img-hero-planet: url("/assets/images/standard/hero-planet.webp");
  --img-simulation-network: url("/assets/images/standard/simulation-network.webp");
  --img-community-bg: url("/assets/images/standard/community-bg.webp");
  --img-news-1: url("/assets/images/standard/news/news-1.webp");
  --img-news-2: url("/assets/images/standard/news/news-2.webp");
  --img-news-3: url("/assets/images/standard/news/news-3.webp");
  --img-deep-ecology: url("/assets/images/standard/deep/ecology.webp");
  --img-deep-colonies: url("/assets/images/standard/deep/colonies.webp");
  --img-deep-characters: url("/assets/images/standard/deep/characters.webp");
  --img-deep-economy: url("/assets/images/standard/deep/economy.webp");
  --img-deep-history: url("/assets/images/standard/deep/history.webp");
  --img-deep-story: url("/assets/images/standard/deep/story.webp");
  --img-engine-hero-bg: url("/assets/images/standard/engine/hero-bg.webp");
  --img-engine-diagram-bg: url("/assets/images/standard/engine/diagram-bg.webp");
}

@media (min-width: 1280px) {
  :root {
    --img-hero-planet: url("/assets/images/pc/hero-planet.webp");
    --img-simulation-network: url("/assets/images/pc/simulation-network.webp");
    --img-community-bg: url("/assets/images/pc/community-bg.webp");
    --img-news-1: url("/assets/images/pc/news/news-1.webp");
    --img-news-2: url("/assets/images/pc/news/news-2.webp");
    --img-news-3: url("/assets/images/pc/news/news-3.webp");
    --img-deep-ecology: url("/assets/images/pc/deep/ecology.webp");
    --img-deep-colonies: url("/assets/images/pc/deep/colonies.webp");
    --img-deep-characters: url("/assets/images/pc/deep/characters.webp");
    --img-deep-economy: url("/assets/images/pc/deep/economy.webp");
    --img-deep-history: url("/assets/images/pc/deep/history.webp");
    --img-deep-story: url("/assets/images/pc/deep/story.webp");
    --img-engine-hero-bg: url("/assets/images/pc/engine/hero-bg.webp");
    --img-engine-diagram-bg: url("/assets/images/pc/engine/diagram-bg.webp");
  }
}

/* ── css/base/reset.css ── */
/* ==========================================================================
   Modern CSS Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-weight: inherit;
}

p {
  overflow-wrap: break-word;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

/* ── css/base/global.css ── */
/* ==========================================================================
   Global — Document-level styles and shared typography patterns
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-deep);
  overflow-x: hidden;
}

/* Shared display-font section titles */
.section__title,
.about__title,
.engine__title,
.news__title,
.community__title,
.timeline__title,
.genesis__title,
.hero__headline {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
}

/* Shared eyebrow label pattern */
.section__eyebrow,
.genesis__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

/* Shared secondary body copy */
.section__subtitle,
.about__text,
.about__lead,
.feature-card__description,
.hero__mission-line,
.genesis__subtitle,
.genesis__body,
.community__subtitle,
.news-card__date {
  color: var(--color-text-secondary);
}

/* Reset list styling for semantic lists used as content groups */
.hero__mission {
  list-style: none;
}

/* Consistent keyboard focus for text links site-wide */
a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ── css/base/motion.css ── */
/* ==========================================================================
   Motion — Tokens, utilities, shared keyframes
   Single source for timing, easing, and reduced-motion behavior
   ========================================================================== */

:root {
  --motion-duration-instant: 0.01ms;
  --motion-duration-fast: 180ms;
  --motion-duration-base: 320ms;
  --motion-duration-slow: 600ms;
  --motion-duration-cinematic: 1200ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reveal-distance: 2rem;
}

/* GPU-friendly transform hint */
.motion-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Shared keyframes — prefer these over duplicating in section files */
@keyframes motionFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motionFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motionFloat {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--motion-duration-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-duration-instant) !important;
  }

  .reveal,
  .reveal--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .feature-card:hover .feature-card__icon {
    animation: none;
  }

  .hero__planet-body {
    animation: none;
  }

  .hero__scroll,
  .hero.is-scroll-visible .hero__scroll {
    animation: none;
  }

  .feature-card--glass:hover::after {
    animation: none;
  }

  .timeline.is-visible .timeline__milestone.is-future .timeline__dot {
    animation: none;
  }

  .engine__simulation-line.is-active {
    animation: none;
    stroke-dasharray: none;
  }

  .engine__simulation-node.is-active .engine__simulation-node-ring {
    animation: none;
  }

  .engine-page-hero.is-scroll-visible .engine-page-hero__scroll {
    animation: none;
  }

  .engine-page-hero.is-content-visible .engine-page-hero__title,
  .engine-page-hero.is-content-visible .engine-page-hero__subtitle,
  .engine-page-hero.is-content-visible .engine-page-hero__intro {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: rgba(236, 236, 236, 0.3);
    --color-text-secondary: rgba(236, 236, 236, 0.9);
  }

  .btn--secondary,
  .engine__cta-link,
  .community__btn {
    border-color: var(--color-text-primary);
  }
}

/* ── css/layout/containers.css ── */
/* ==========================================================================
   Layout — Containers and page shell
   ========================================================================== */

.container {
  width: min(100% - var(--container-gutter) * 2, var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - var(--container-gutter) * 2, var(--container-wide));
  margin-inline: auto;
}

/* Shared nav/footer horizontal alignment width */
.nav__inner {
  width: min(100% - var(--container-gutter) * 2, var(--container-wide));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-section);
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* Subtle gold rule between major homepage chapters */
.section:not(.hero):not(.about) {
  box-shadow: inset 0 1px 0 rgba(201, 167, 90, 0.07);
}

/* Above-the-fold + scroll handoff sections skip content-visibility */
.hero,
.about,
.genesis,
.footer,
.engine-page-hero {
  content-visibility: visible;
}

.engine,
.philosophy,
.timeline,
.news,
.community {
  contain-intrinsic-size: auto 640px;
}

.philosophy {
  contain-intrinsic-size: auto 420px;
}

.timeline {
  contain-intrinsic-size: auto 360px;
}

/* ── css/layout/grid.css ── */
/* ==========================================================================
   Layout — Grid and flex utilities
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── css/utilities/accessibility.css ── */
/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-gold);
  color: var(--color-bg-deep);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

/* Respect nav height for in-page anchor targets */
html {
  scroll-padding-top: var(--nav-height);
}

section[id] {
  scroll-margin-top: var(--nav-height);
}

/* Placeholder links — no navigation until pages ship */
a.link--placeholder,
a.link--placeholder:hover,
a.link--placeholder:focus-visible {
  cursor: default;
  text-decoration: none;
}

/* ── css/utilities/patterns.css ── */
/* ==========================================================================
   Animated underline — shared pattern (non-nav usage)
   Nav links styled in components/nav.css
   ========================================================================== */

.u-link-underline {
  position: relative;
  padding-block: var(--space-xs);
  transition:
    color var(--transition-fast),
    text-shadow var(--transition-base);
}

.u-link-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--nav-link-underline-height, 1px);
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
  box-shadow: 0 0 12px var(--color-gold-glow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-nav, var(--transition-base));
}

.u-link-underline:hover,
.u-link-underline.is-active,
.u-link-underline[aria-current="location"] {
  color: var(--color-text-primary);
  text-shadow: var(--nav-link-glow, none);
}

.u-link-underline:hover::after,
.u-link-underline.is-active::after,
.u-link-underline[aria-current="location"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Gold gradient divider */
.u-divider-gold {
  width: var(--divider-width);
  height: var(--divider-height);
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

/* Glass surfaces */
.u-glass {
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

.u-glass--strong {
  background: var(--color-bg-glass-strong);
}

/* Full-bleed absolute background layer */
.u-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Centered content column */
.u-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* Visually hidden but available to screen readers */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── css/components/section-header.css ── */
/* ==========================================================================
   Component — Section Header
   ========================================================================== */

.section__header {
  margin-bottom: var(--space-3xl);
  max-width: var(--width-section-header);
}

.section__eyebrow {
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-gold);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.section__subtitle {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* ── css/components/nav.css ── */
/* ==========================================================================
   Component — Navigation (AAA studio grade)
   Transparent → glass on scroll · gold underline · full-screen mobile
   ========================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  transition:
    height var(--transition-nav),
    background var(--transition-nav),
    backdrop-filter var(--transition-nav),
    -webkit-backdrop-filter var(--transition-nav),
    border-color var(--transition-nav),
    box-shadow var(--transition-nav);
}

.nav--transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

.nav--glass {
  height: var(--nav-height-scrolled);
  background: var(--nav-glass-bg);
  backdrop-filter: blur(var(--blur-nav)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(160%);
  border-bottom: 1px solid var(--nav-glass-border);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.nav--menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.nav__inner {
  position: relative;
  z-index: calc(var(--z-nav) + 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ── Logo ──────────────────────────────────────────────────────────────── */

.nav__logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
}

.nav__logo-link:hover {
  opacity: 0.92;
}

.nav__logo-link:focus-visible {
  outline-offset: 4px;
}

.nav__logo-icon {
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  transform: scale(var(--nav-logo-scale-default));
  transform-origin: center;
  transition:
    transform var(--transition-nav),
    filter var(--transition-nav);
  filter: drop-shadow(0 0 0 transparent);
}

.nav--scrolled .nav__logo-icon {
  transform: scale(var(--nav-logo-scale-scrolled));
  filter: drop-shadow(0 0 14px var(--color-gold-glow));
}

.nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  transition: opacity var(--transition-nav);
}

.nav__logo-text span {
  color: var(--color-gold);
}

/* ── Desktop links ───────────────────────────────────────────────────── */

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.nav__links li {
  display: flex;
}

.nav__link {
  position: relative;
  padding-block: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition:
    color var(--transition-base),
    text-shadow var(--transition-base);
}

/* Gold animated underline */
.nav__link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: var(--nav-link-underline-height);
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
  border-radius: 1px;
  box-shadow: 0 0 10px var(--color-gold-glow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-nav);
}

.nav__link:hover {
  color: var(--color-text-primary);
  text-shadow: var(--nav-link-glow);
}

.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  box-shadow: var(--nav-link-glow);
}

/* Active section — persistent underline + glow */
.nav__link--active,
.nav__link[aria-current="location"] {
  color: var(--color-gold-light);
  text-shadow: var(--nav-link-glow-strong);
}

.nav__link--active::after,
.nav__link[aria-current="location"]::after {
  transform: scaleX(1);
  transform-origin: left;
  box-shadow: var(--nav-link-glow-strong);
}

/* ── Hamburger toggle ──────────────────────────────────────────────────── */

.nav__toggle {
  display: none;
  position: relative;
  z-index: calc(var(--z-nav) + 3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.nav__toggle:hover {
  border-color: var(--color-border);
  background: var(--color-overlay-light);
}

.nav__toggle-bar {
  display: block;
  width: 1.375rem;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition:
    transform var(--transition-nav),
    opacity var(--transition-fast),
    background var(--transition-fast);
}

.nav--menu-open .nav__toggle-bar {
  background: var(--color-gold);
}

.nav--menu-open .nav__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav--menu-open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav--menu-open .nav__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Mobile full-screen overlay ────────────────────────────────────────── */

.nav__mobile-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--container-gutter);
  background: rgba(5, 6, 8, 0.94);
  backdrop-filter: blur(var(--blur-nav)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-nav),
    visibility var(--transition-nav);
}

.nav--menu-open .nav__mobile-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 20rem;
}

.nav__mobile-link {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-base),
    background var(--transition-base),
    text-shadow var(--transition-base),
    transform var(--transition-base);
}

.nav__mobile-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, var(--color-gold-light), var(--color-gold));
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: var(--nav-link-glow);
  transition: height var(--transition-nav);
}

.nav__mobile-link:hover {
  color: var(--color-text-primary);
  background: var(--color-overlay-light);
  text-shadow: var(--nav-link-glow);
  transform: translateX(4px);
}

.nav__mobile-link:hover::before {
  height: 60%;
}

.nav__mobile-link--active,
.nav__mobile-link[aria-current="location"] {
  color: var(--color-gold-light);
  text-shadow: var(--nav-link-glow-strong);
}

.nav__mobile-link--active::before,
.nav__mobile-link[aria-current="location"]::before {
  height: 70%;
}

/* Staggered entrance when menu opens */
.nav--menu-open .nav__mobile-link {
  animation: navMobileLinkIn 600ms var(--ease-out-expo) both;
}

.nav--menu-open .nav__mobile-links li:nth-child(1) .nav__mobile-link { animation-delay: 80ms; }
.nav--menu-open .nav__mobile-links li:nth-child(2) .nav__mobile-link { animation-delay: 160ms; }
.nav--menu-open .nav__mobile-links li:nth-child(3) .nav__mobile-link { animation-delay: 240ms; }

@keyframes navMobileLinkIn {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav--menu-open .nav__mobile-link {
    animation: none;
  }

  .nav__mobile-link:hover {
    transform: none;
  }
}

/* ── css/components/button.css ── */
/* ==========================================================================
   Component — Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-bg-deep);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-glow-gold);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  box-shadow: 0 0 50px var(--color-gold-glow-strong);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  backdrop-filter: blur(var(--blur-button));
}

.btn--secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: var(--color-gold-dim);
}

.btn--large {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--text-base);
}

.btn__icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  flex-shrink: 0;
}

/* ── css/components/hero-buttons.css ── */
/* ==========================================================================
   Hero CTA buttons — metallic primary + glass secondary
   ========================================================================== */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.hero__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.9375rem 1.875rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
  will-change: transform;
}

.hero__btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.hero__btn-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.hero__btn:hover .hero__btn-arrow,
.hero__btn:focus-visible .hero__btn-arrow {
  transform: translateX(4px);
}

/* Primary — gold metallic + shine sweep */
.hero__btn--primary {
  color: var(--color-bg-deep);
  background: linear-gradient(
    145deg,
    var(--color-gold-light) 0%,
    var(--color-gold) 45%,
    var(--color-gold-dark) 100%
  );
  border-color: var(--color-gold);
  box-shadow:
    0 4px 24px rgba(201, 167, 90, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero__btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
}

.hero__btn--primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 32px rgba(201, 167, 90, 0.45),
    0 0 40px rgba(201, 167, 90, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero__btn--primary:hover::after {
  animation: heroBtnShine 0.75s var(--ease-out-expo);
}

@keyframes heroBtnShine {
  to { left: 160%; }
}

/* Secondary — glass + gold border */
.hero__btn--glass {
  color: var(--color-text-primary);
  background: rgba(17, 21, 28, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(201, 167, 90, 0.45);
}

.hero__btn--glass:hover {
  transform: translateY(-3px);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  background: rgba(201, 167, 90, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.hero__btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* ── css/components/feature-card.css ── */
/* ==========================================================================
   Component — Feature Card
   ========================================================================== */

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Image-first media cards (Living World Engine showcase) */
.feature-card--media {
  padding: 0;
  min-height: 22rem;
}

.feature-card__media {
  position: relative;
  z-index: var(--z-base);
  margin: 0;
  aspect-ratio: var(--card-media-ratio, 16 / 9);
  overflow: hidden;
  border-bottom: 1px solid rgba(42, 123, 255, 0.12);
}

.feature-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

.feature-card--media:hover .feature-card__media img {
  transform: scale(1.04);
}

.feature-card__body {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  padding: var(--card-body-padding, var(--space-lg) var(--space-xl) var(--space-xl));
}

.feature-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Hover gradient overlay */
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--card-accent, var(--color-gold-dim)) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Top accent line */
.feature-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--card-accent-color, var(--color-gold)), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-soft), var(--card-glow, var(--shadow-glow-gold));
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover::after {
  transform: scaleX(1);
}

/* Accent variants via custom properties */
.feature-card--gold {
  --card-accent: rgba(201, 167, 90, 0.08);
  --card-accent-color: var(--color-gold);
  --card-glow: var(--shadow-glow-gold);
}

.feature-card--blue {
  --card-accent: var(--color-blue-dim);
  --card-accent-color: var(--color-blue);
  --card-glow: var(--shadow-glow-blue);
}

.feature-card--purple {
  --card-accent: var(--color-purple-dim);
  --card-accent-color: var(--color-purple);
  --card-glow: var(--shadow-glow-purple);
}

.feature-card__icon {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-overlay-light);
  border: 1px solid var(--color-border);
  color: var(--card-accent-color, var(--color-gold));
}

.feature-card--media .feature-card__icon {
  width: var(--card-icon-size-compact, 2.25rem);
  height: var(--card-icon-size-compact, 2.25rem);
  margin-bottom: 0;
}

.feature-card__icon svg,
.feature-card__icon img {
  width: var(--card-icon-svg);
  height: var(--card-icon-svg);
  object-fit: contain;
}

.feature-card__title {
  position: relative;
  z-index: var(--z-base);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
  color: var(--color-gold);
}

.feature-card--media .feature-card__title {
  margin-bottom: 0;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feature-card__description {
  position: relative;
  z-index: var(--z-base);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Glass control-panel variant (Engine showcase) */
.feature-card--glass {
  background: rgba(12, 16, 24, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(42, 123, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.35);
}

.feature-card--glass::before {
  background: linear-gradient(
    135deg,
    rgba(42, 123, 255, 0.1) 0%,
    transparent 55%
  );
}

.feature-card--glass:hover {
  transform: translateY(-8px);
  border-color: rgba(42, 123, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(42, 123, 255, 0.12);
}

.feature-card--glass:hover::after {
  background: linear-gradient(90deg, var(--color-blue), var(--color-purple), transparent);
  animation: featureCardBorderSweep 2.8s ease-in-out infinite;
}

.feature-card--glass .feature-card__icon {
  background: rgba(42, 123, 255, 0.08);
  border-color: rgba(42, 123, 255, 0.2);
  box-shadow: 0 0 20px rgba(42, 123, 255, 0.08);
  overflow: hidden;
}

.feature-card--glass.feature-card--media .feature-card__media {
  border-bottom-color: rgba(42, 123, 255, 0.18);
}

@keyframes featureCardBorderSweep {
  0%,
  100% { opacity: 0.7; transform: scaleX(0.85); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Glass panel utility component */
.glass-panel {
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── css/components/news-card.css ── */
/* ==========================================================================
   Component — News Card
   ========================================================================== */

.news-card {
  height: 100%;
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: rgba(12, 16, 24, 0.55);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.news-card__link:hover,
.news-card__link:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(201, 167, 90, 0.35);
  box-shadow: var(--shadow-soft), 0 0 32px rgba(201, 167, 90, 0.08);
}

.news-card__link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.news-card__media {
  aspect-ratio: 16 / 9;
  background-color: #080b12;
  background-size: cover;
  background-position: center;
}

.news-card__media--engine {
  background-image: var(--img-news-1);
  background-position: center 45%;
}

.news-card__media--genesis {
  background-image: var(--img-news-2);
  background-position: center 40%;
}

.news-card__media--studio {
  background-image: var(--img-news-3);
  background-position: center 35%;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-sm);
  padding: var(--space-xl);
}

.news-card__category {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.news-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

.news-card__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.news-card__more {
  margin-top: auto;
  padding-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.news-card__link:hover .news-card__more,
.news-card__link:focus-visible .news-card__more {
  color: var(--color-gold-light);
}

/* ── css/components/reveal.css ── */
/* ==========================================================================
   Component — Scroll Reveal
   Uses motion tokens from base/motion.css
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-reveal-distance), 0);
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-emphasis),
    transform var(--motion-duration-slow) var(--motion-ease-emphasis);
  will-change: opacity, transform;
}

.reveal--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal--delay-1 { transition-delay: var(--reveal-delay-1); }
.reveal--delay-2 { transition-delay: var(--reveal-delay-2); }
.reveal--delay-3 { transition-delay: var(--reveal-delay-3); }
.reveal--delay-4 { transition-delay: var(--reveal-delay-4); }
.reveal--delay-5 { transition-delay: var(--reveal-delay-5); }

/* ── css/sections/hero.css ── */
/* ==========================================================================
   Section — Cinematic Hero
   Full-viewport opening scene · left-aligned desktop · layered depth
   ========================================================================== */

.hero {
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
  --hero-scroll-y: 0px;
  --hero-scroll-progress: 0;
  --hero-scene-scroll: 0px;
  --hero-planet-scroll: 0px;
  --hero-content-scroll: 0px;

  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-3xl);
  overflow: clip;
  content-visibility: visible;
  isolation: isolate;
}

/* ── Scene layers (depth stack) ────────────────────────────────────────── */

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, var(--hero-scene-scroll), 0);
  transition: opacity 1.2s var(--ease-out-expo);
  will-change: transform;
}

.hero.is-bg-visible .hero__scene {
  opacity: 1;
}

/* Layer 1 — deep space */
.hero__layer--space {
  position: absolute;
  inset: 0;
  background: var(--color-bg-deep);
}

/* Layer 3 — nebula (CSS for performance) */
.hero__layer--nebula {
  position: absolute;
  inset: -20%;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 45% at 72% 38%, rgba(90, 67, 198, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 55%, rgba(42, 123, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 35% 30% at 60% 70%, rgba(90, 67, 198, 0.06) 0%, transparent 45%);
  transform: translate3d(calc(var(--hero-parallax-x) * 0.3), calc(var(--hero-parallax-y) * 0.3), 0);
  transition: opacity 1.4s var(--ease-out-expo) 0.4s;
  will-change: transform;
}

.hero.is-nebula-visible .hero__layer--nebula {
  opacity: 1;
}

/* Layer 2, 5, 6 — canvas (stars, dust, shooting stars) */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate3d(calc(var(--hero-parallax-x) * 0.5), calc(var(--hero-parallax-y) * 0.5), 0);
  will-change: transform;
}

/* Layer 4 — planet */
.hero__planet {
  position: absolute;
  right: 4%;
  top: 50%;
  width: clamp(16rem, 35vw, 32rem);
  height: clamp(16rem, 35vw, 32rem);
  opacity: 0;
  transform:
    translate3d(
      var(--hero-parallax-x),
      calc(-50% + var(--hero-parallax-y) + var(--hero-planet-scroll)),
      0
    )
    rotate(var(--hero-planet-rotate, 0deg));
  transition: opacity 1.6s var(--ease-out-expo);
  will-change: transform;
  pointer-events: none;
}

.hero.is-planet-visible .hero__planet {
  opacity: 1;
}

.hero__planet-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: heroPlanetSpin 240s linear infinite;
  background:
    var(--img-hero-planet) 68% 50% / cover no-repeat,
    radial-gradient(circle at 32% 28%, rgba(80, 120, 180, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 65% 70%, rgba(0, 0, 0, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, #141c2e 0%, #0a0e16 55%, #050608 100%);
  box-shadow:
    inset -2rem -2rem 4rem rgba(0, 0, 0, 0.85),
    inset 1rem 1rem 2rem rgba(42, 123, 255, 0.08);
}

.hero__planet-atmosphere {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 58%,
    rgba(42, 123, 255, 0.12) 72%,
    rgba(42, 123, 255, 0.45) 82%,
    rgba(42, 123, 255, 0.08) 88%,
    transparent 100%
  );
  filter: blur(1px);
}

.hero__planet-shadow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* Vignette for depth + text legibility */
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(5, 6, 8, 0.92) 0%, rgba(5, 6, 8, 0.55) 42%, transparent 68%),
    linear-gradient(to bottom, rgba(5, 6, 8, 0.35) 0%, transparent 30%, rgba(5, 6, 8, 0.85) 100%);
  pointer-events: none;
  opacity: calc(1 - var(--hero-scroll-progress) * 0.45);
  transition: opacity 0.2s linear;
}

/* ── Content (foreground) ──────────────────────────────────────────────── */

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - var(--container-gutter) * 2, var(--container-wide));
  margin-inline: auto;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 38rem;
  transform: translate3d(var(--hero-parallax-x), calc(var(--hero-parallax-y) + var(--hero-content-scroll)), 0);
  will-change: transform;
}

/* Logo */
.hero__logo {
  width: clamp(3.5rem, 7vw, 5rem);
  height: auto;
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(1.25rem) scale(0.92);
  filter: drop-shadow(0 0 24px var(--color-gold-glow));
}

.hero.is-logo-visible .hero__logo {
  animation: heroLogoIn 1s var(--ease-out-expo) forwards;
}

/* Headline — two lines, word-by-word */
.hero__headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.hero__headline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}

.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.75rem);
}

.hero.is-headline-visible .hero__word {
  animation: heroWordIn 0.85s var(--ease-out-expo) forwards;
}

.hero.is-headline-visible .hero__headline-row:nth-child(1) .hero__word:nth-child(1) {
  animation-delay: 0s;
}

.hero.is-headline-visible .hero__headline-row:nth-child(1) .hero__word:nth-child(2) {
  animation-delay: 0.12s;
}

.hero.is-headline-visible .hero__headline-row:nth-child(2) .hero__word {
  animation-delay: 0.24s;
}

.hero__headline-accent {
  background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subheading */
.hero__subheadline {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0;
  transform: translateY(1.25rem);
}

.hero.is-subheadline-visible .hero__subheadline {
  animation: heroFadeUp 0.9s var(--ease-out-expo) forwards;
}

/* Mission lines */
.hero__mission {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.hero__mission-line {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-secondary);
  opacity: 0;
  transform: translateY(1rem);
}

.hero.is-mission-visible .hero__mission-line:nth-child(1) {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0s forwards;
}

.hero.is-mission-visible .hero__mission-line:nth-child(2) {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.15s forwards;
}

.hero.is-mission-visible .hero__mission-line:nth-child(3) {
  animation: heroFadeUp 0.8s var(--ease-out-expo) 0.3s forwards;
}

/* Buttons entrance */
.hero__actions {
  opacity: 0;
  transform: translateY(1.5rem);
}

.hero.is-actions-visible .hero__actions {
  animation: heroFadeUp 0.9s var(--ease-out-expo) forwards;
}

/* ── Scroll indicator ────────────────────────────────────────────────────── */

.hero__scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: color var(--transition-fast);
}

.hero__scroll:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  color: var(--color-gold);
}

.hero__scroll:hover {
  color: var(--color-gold);
}

.hero__scroll-line {
  width: 1px;
  height: var(--scroll-line-height);
  background: linear-gradient(to bottom, var(--color-gold), transparent);
}

.hero.is-scroll-visible .hero__scroll {
  animation: heroScrollFloat 3s ease-in-out infinite, heroFadeIn 1s ease 0s forwards;
}

.hero.is-scroll-visible .hero__scroll-line {
  animation: heroScrollPulse 2.4s ease-in-out infinite;
}

/* Fade scroll cue once the user begins scrolling into the page */
.hero.is-scrolling .hero__scroll {
  opacity: clamp(0, calc(1 - var(--hero-scroll-progress) * 2.5), 1);
  animation: none;
}

.hero.is-scrolling .hero__scroll-line {
  animation: none;
}

/* Drop compositor hints once the hero has fully left the viewport */
.hero.is-past-viewport .hero__scene,
.hero.is-past-viewport .hero__content,
.hero.is-past-viewport .hero__planet,
.hero.is-past-viewport .hero__canvas,
.hero.is-past-viewport .hero__layer--nebula {
  will-change: auto;
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

@keyframes heroLogoIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroScrollFloat {
  0%,
  100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes heroScrollPulse {
  0%,
  100% { opacity: 0.35; transform: scaleY(0.65); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

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

/* ── Reduced motion: show everything immediately ───────────────────────── */

.hero.is-reduced-motion .hero__scene,
.hero.is-reduced-motion .hero__layer--nebula,
.hero.is-reduced-motion .hero__planet {
  opacity: 1;
  transition: none;
}

.hero.is-reduced-motion .hero__logo,
.hero.is-reduced-motion .hero__word,
.hero.is-reduced-motion .hero__subheadline,
.hero.is-reduced-motion .hero__mission-line,
.hero.is-reduced-motion .hero__actions,
.hero.is-reduced-motion .hero__scroll {
  opacity: 1;
  transform: none;
  animation: none;
}

.hero.is-reduced-motion .hero__content,
.hero.is-reduced-motion .hero__scene,
.hero.is-reduced-motion .hero__planet,
.hero.is-reduced-motion .hero__canvas {
  transform: none;
}

.hero.is-reduced-motion .hero__vignette {
  opacity: 1;
  transition: none;
}

.hero.is-reduced-motion .hero__scroll {
  transform: translateX(-50%);
}

/* ── css/sections/about.css ── */
/* ==========================================================================
   Section — About (Studio Identity)
   Minimal confidence · descends from cinematic hero
   ========================================================================== */

.about {
  background: var(--color-bg-deep);
  content-visibility: visible;
  padding-block-start: calc(var(--space-section) + var(--space-xl));
}

.about__hero-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(6rem, 12vw, 10rem);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 6, 8, 0.45) 45%,
    var(--color-bg-deep) 100%
  );
  pointer-events: none;
}

/* Align with other wide sections (engine, genesis) — no custom max-width override */
.about__container {
  margin-inline: auto;
}

.about__split {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: center;
}

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 42rem;
  padding-inline-end: clamp(var(--space-md), 2vw, var(--space-xl));
}

.about__figure {
  margin: 0;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.about__figure picture {
  display: block;
  width: 100%;
}

.about__image {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(42, 123, 255, 0.15);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  object-position: 58% center;
  aspect-ratio: 5 / 3;
}

.about__header {
  margin-bottom: var(--space-2xl);
}

.about__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.about__divider {
  width: clamp(3rem, 8vw, 5rem);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    rgba(201, 167, 90, 0.35) 55%,
    transparent 100%
  );
  opacity: 0.85;
}

.about__lead {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.about__lead strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-light);
}

.about__text {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

@media (max-width: 48rem) {
  .about__split {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .about__inner {
    align-items: center;
    text-align: center;
    max-width: 100%;
    padding-inline: 0;
  }

  .about__divider {
    margin-inline: auto;
  }

  .about__figure {
    width: 100%;
  }
}

/* ── css/sections/engine.css ── */
/* ==========================================================================
   Section — Living World Engine
   Homepage showcase · glass control panels
   ========================================================================== */

.engine {
  background:
    radial-gradient(ellipse 60% 40% at 20% 50%, var(--color-purple-dim) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 60%, var(--color-blue-dim) 0%, transparent 55%),
    var(--color-bg-deep);
}

.engine__header {
  margin-bottom: var(--space-4xl);
  max-width: 36rem;
}

.engine__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.engine__subtitle {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.engine__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

.engine__grid .feature-card--media {
  min-height: 24rem;
}

.engine__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4xl);
}

.engine__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.9375rem 1.875rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  background: rgba(17, 21, 28, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 167, 90, 0.45);
  border-radius: var(--radius-sm);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
}

.engine__cta-link:hover,
.engine__cta-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 32px rgba(42, 123, 255, 0.12);
}

.engine__cta-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.engine__cta-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.engine__cta-link:hover .engine__cta-arrow,
.engine__cta-link:focus-visible .engine__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 48rem) {
  .engine__header {
    text-align: center;
    margin-inline: auto;
  }
}

/* ── css/sections/simulation-viz.css ── */
/* ==========================================================================
   Engine — Simulation Visualization
   Interconnected systems diagram
   ========================================================================== */

.engine__simulation {
  margin-top: var(--space-4xl);
  padding: var(--space-2xl) var(--space-lg);
  border: 1px solid rgba(42, 123, 255, 0.1);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(to bottom, rgba(5, 6, 8, 0.88), rgba(5, 6, 8, 0.94)),
    var(--img-simulation-network) center / cover no-repeat;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.engine__simulation-svg {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
  overflow: visible;
}

.engine__simulation-line {
  fill: none;
  stroke: url(#sim-flow-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.35;
  transition: opacity var(--transition-base);
}

.engine__simulation-line.is-active {
  opacity: 0.85;
  stroke-dasharray: 8 12;
  animation: simulationFlow 1.2s linear infinite;
}

.engine__simulation-node {
  cursor: default;
}

.engine__simulation-node-ring {
  fill: rgba(12, 16, 24, 0.9);
  stroke: rgba(42, 123, 255, 0.25);
  stroke-width: 1.5;
  transition:
    stroke var(--transition-base),
    filter var(--transition-base);
}

.engine__simulation-node.is-active .engine__simulation-node-ring {
  stroke: var(--color-blue);
  filter: drop-shadow(0 0 12px rgba(42, 123, 255, 0.55));
  animation: simulationNodePulse 1.6s ease-in-out infinite;
}

.engine__simulation-node.is-adjacent .engine__simulation-node-ring {
  stroke: rgba(90, 67, 198, 0.65);
  filter: drop-shadow(0 0 8px rgba(90, 67, 198, 0.35));
}

.engine__simulation-node-dot {
  fill: var(--color-blue);
  opacity: 0.65;
  transition: opacity var(--transition-base);
}

.engine__simulation-node.is-active .engine__simulation-node-dot {
  opacity: 1;
}

.engine__simulation-node-label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-text-secondary);
  text-anchor: middle;
  transition: fill var(--transition-base);
}

.engine__simulation-node.is-active .engine__simulation-node-label {
  fill: var(--color-gold-light);
}

.engine__simulation-node.is-adjacent .engine__simulation-node-label {
  fill: var(--color-text-primary);
}

@keyframes simulationFlow {
  to { stroke-dashoffset: -40; }
}

@keyframes simulationNodePulse {
  0%,
  100% { transform: scale(1); transform-origin: center; }
  50% { transform: scale(1.06); transform-origin: center; }
}

@media (max-width: 48rem) {
  .engine__simulation {
    padding: var(--space-xl) var(--space-md);
  }
}

/* ── css/sections/genesis.css ── */
/* ==========================================================================
   Section — Dark Matter: Genesis
   Cinematic split layout · Steam capsule energy
   ========================================================================== */

.genesis {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.genesis__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: center;
}

/* ── Key art ───────────────────────────────────────────────────────────── */

.genesis__art {
  margin: 0;
  min-width: 0;
}

.genesis__art-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1024 / 539;
  border-radius: calc(var(--radius-xl) + 2px);
  padding: 2px;
  background: linear-gradient(
    145deg,
    rgba(201, 167, 90, 0.45) 0%,
    rgba(42, 123, 255, 0.28) 50%,
    rgba(90, 67, 198, 0.2) 100%
  );
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(42, 123, 255, 0.06);
}

.genesis__art-frame::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: var(--radius-xl);
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(5, 6, 8, 0.35) 0%,
    transparent 35%
  );
}

.genesis__art-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.genesis__art-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  border-radius: var(--radius-xl);
}

/* ── Content panel ─────────────────────────────────────────────────────── */

.genesis__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 34rem;
  padding-inline: clamp(var(--space-md), 3vw, var(--space-xl));
}

.genesis__eyebrow {
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue);
}

.genesis__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.genesis__subtitle {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.genesis__body {
  margin-top: var(--space-xl);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.genesis__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.genesis__btn {
  min-width: 11rem;
}

.genesis__btn-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.genesis__btn--learn:hover .genesis__btn-arrow,
.genesis__btn--learn:focus-visible .genesis__btn-arrow {
  transform: translateX(4px);
}

@media (max-width: 64rem) {
  .genesis__split {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .genesis__panel {
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding-inline: var(--space-lg);
  }

  .genesis__art {
    padding-inline: var(--space-md);
  }

  .genesis__actions {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .genesis__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .genesis__btn {
    width: 100%;
  }
}

/* ── css/sections/philosophy.css ── */
/* ==========================================================================
   Section — Studio Philosophy
   Full-width inspirational statement
   ========================================================================== */

.philosophy {
  padding-block: clamp(6rem, 12vw, 10rem);
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(90, 67, 198, 0.08) 0%, transparent 65%),
    var(--color-bg-deep);
}

.philosophy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.philosophy__quote {
  margin: 0;
  border: none;
}

.philosophy__line {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.philosophy__credit {
  margin-top: var(--space-3xl);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ── css/sections/timeline.css ── */
/* ==========================================================================
   Section — Development Timeline
   ========================================================================== */

.timeline {
  background: var(--color-bg-deep);
}

.timeline__title {
  margin-bottom: var(--space-4xl);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-primary);
}

.timeline__track {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline__track::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    rgba(42, 123, 255, 0.45) 50%,
    rgba(201, 167, 90, 0.15) 100%
  );
  z-index: 0;
}

.timeline__milestone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
  text-align: center;
}

.timeline__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--color-bg-deep);
  border: 2px solid rgba(236, 236, 236, 0.2);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.timeline__label {
  font-family: var(--font-display);
  font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.timeline__milestone.is-complete .timeline__dot {
  border-color: var(--color-gold);
  background: rgba(201, 167, 90, 0.25);
}

.timeline__milestone.is-complete .timeline__label {
  color: var(--color-text-secondary);
}

.timeline__milestone.is-current .timeline__dot {
  border-color: var(--color-blue);
  background: rgba(42, 123, 255, 0.35);
  box-shadow: 0 0 20px rgba(42, 123, 255, 0.55);
  transform: scale(1.15);
}

.timeline__milestone.is-current .timeline__label {
  color: var(--color-gold-light);
}

.timeline__milestone.is-future .timeline__dot {
  border-color: rgba(201, 167, 90, 0.2);
}

.timeline__milestone.is-future .timeline__label {
  color: rgba(236, 236, 236, 0.35);
}

.timeline.is-visible .timeline__milestone.is-future .timeline__dot {
  animation: timelineFutureGlow 3s ease-in-out infinite;
}

.timeline.is-visible .timeline__milestone.is-future:nth-child(4) .timeline__dot {
  animation-delay: 0s;
}

.timeline.is-visible .timeline__milestone.is-future:nth-child(5) .timeline__dot {
  animation-delay: 0.6s;
}

.timeline.is-visible .timeline__milestone.is-future:nth-child(6) .timeline__dot {
  animation-delay: 1.2s;
}

@keyframes timelineFutureGlow {
  0%,
  100% { box-shadow: 0 0 0 rgba(201, 167, 90, 0); }
  50% { box-shadow: 0 0 16px rgba(201, 167, 90, 0.25); }
}

@media (max-width: 48rem) {
  .timeline__track {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl);
    padding-left: var(--space-lg);
  }

  .timeline__track::before {
    top: 0;
    bottom: 0;
    left: 0.65rem;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      var(--color-gold) 0%,
      rgba(42, 123, 255, 0.45) 50%,
      rgba(201, 167, 90, 0.15) 100%
    );
  }

  .timeline__milestone {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-lg);
  }
}

/* ── css/sections/news.css ── */
/* ==========================================================================
   Section — Latest News
   ========================================================================== */

.news {
  background:
    radial-gradient(ellipse 50% 35% at 80% 20%, var(--color-blue-dim) 0%, transparent 55%),
    var(--color-bg-deep);
}

.news__header {
  margin-bottom: var(--space-3xl);
}

.news__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.news__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4xl);
}

.news__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gold);
  transition: color var(--transition-base);
}

.news__cta-link:hover,
.news__cta-link:focus-visible {
  color: var(--color-gold-light);
}

.news__cta-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.news__cta-arrow {
  display: inline-block;
  transition: transform var(--transition-base);
}

.news__cta-link:hover .news__cta-arrow,
.news__cta-link:focus-visible .news__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 64rem) {
  .news__grid {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-inline: auto;
  }
}

/* ── css/sections/community.css ── */
/* ==========================================================================
   Section — Community
   ========================================================================== */

.community {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(5, 6, 8, 0.78), rgba(5, 6, 8, 0.92)),
    var(--img-community-bg) center 60% / cover no-repeat;
}

.community__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

.community__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.community__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.community__subtitle {
  margin-top: var(--space-lg);
  max-width: 32rem;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.community__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  max-width: 48rem;
}

.community__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-width: 9.5rem;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  background: rgba(17, 21, 28, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    color var(--transition-base);
}

.community__btn:hover,
.community__btn:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.community__btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.community__btn--discord:hover,
.community__btn--discord:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(88, 101, 242, 0.2);
}

.community__btn--github:hover,
.community__btn--github:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(236, 236, 236, 0.08);
}

.community__btn--x:hover,
.community__btn--x:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(236, 236, 236, 0.1);
}

.community__btn--steam:hover,
.community__btn--steam:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(42, 123, 255, 0.15);
}

.community__btn--newsletter:hover,
.community__btn--newsletter:focus-visible {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 24px rgba(201, 167, 90, 0.15);
}

.community__btn-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

@media (max-width: 30rem) {
  .community__actions {
    flex-direction: column;
    width: 100%;
    max-width: 18rem;
  }

  .community__btn {
    width: 100%;
  }
}

/* ── css/sections/engine-page-hero.css ── */
/* ==========================================================================
   Engine Page — Hero (~70vh control-room aesthetic)
   ========================================================================== */

.engine-page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70vh;
  min-height: 70dvh;
  padding-block: calc(var(--nav-height) + var(--space-2xl)) var(--space-3xl);
  overflow: hidden;
  isolation: isolate;
}

.engine-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, rgba(5, 6, 8, 0.92) 0%, rgba(5, 6, 8, 0.72) 42%, rgba(5, 6, 8, 0.45) 100%),
    var(--img-engine-hero-bg) 65% center / cover no-repeat,
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(42, 123, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 20% 70%, rgba(90, 67, 198, 0.08) 0%, transparent 50%),
    var(--color-bg-deep);
  opacity: 0;
  transition: opacity 1s var(--motion-ease-emphasis);
}

.engine-page-hero.is-ready .engine-page-hero__bg {
  opacity: 1;
}

.engine-page-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  pointer-events: none;
}

.engine-page-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - var(--container-gutter) * 2, var(--container-wide));
  margin-inline: auto;
  max-width: 44rem;
}

.engine-page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.75rem + 3vw, 4rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}

.engine-page-hero.is-content-visible .engine-page-hero__title {
  animation: motionFadeUp 0.9s var(--motion-ease-emphasis) forwards;
}

.engine-page-hero__subtitle {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

.engine-page-hero.is-content-visible .engine-page-hero__subtitle {
  animation: motionFadeUp 0.9s var(--motion-ease-emphasis) 0.12s forwards;
}

.engine-page-hero__intro {
  margin-top: var(--space-xl);
  max-width: 36rem;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

.engine-page-hero.is-content-visible .engine-page-hero__intro {
  animation: motionFadeUp 0.9s var(--motion-ease-emphasis) 0.24s forwards;
}

.engine-page-hero__scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-50%);
}

.engine-page-hero__scroll-line {
  width: 1px;
  height: var(--scroll-line-height);
  background: linear-gradient(to bottom, var(--color-gold), transparent);
}

.engine-page-hero.is-scroll-visible .engine-page-hero__scroll {
  animation: heroScrollFloat 3s ease-in-out infinite, motionFadeIn 0.8s ease forwards;
}

/* ==========================================================================
   Engine Page — Philosophy intro
   ========================================================================== */

.engine-page-intro {
  background: var(--color-bg-deep);
  text-align: center;
}

.engine-page-intro__text {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.engine-page-intro__text strong {
  color: var(--color-gold-light);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 48rem) {
  .engine-page-hero__inner {
    text-align: center;
    margin-inline: auto;
  }
}

/* ── css/sections/engine-diagram-page.css ── */
/* ==========================================================================
   Engine Page — Interactive diagram
   ========================================================================== */

.engine-diagram {
  position: relative;
  padding: var(--space-3xl) var(--space-lg);
  border: 1px solid rgba(42, 123, 255, 0.12);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(to bottom, rgba(5, 6, 8, 0.82), rgba(5, 6, 8, 0.9)),
    var(--img-engine-diagram-bg) center / cover no-repeat,
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(42, 123, 255, 0.06) 0%, transparent 70%),
    rgba(8, 10, 14, 0.75);
  overflow-x: auto;
}

.engine-diagram__svg {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
}

.engine-diagram__line {
  fill: none;
  stroke: url(#engine-diagram-gradient);
  stroke-width: 1.5;
  opacity: 0.3;
  transition: opacity var(--transition-base);
}

.engine-diagram__line.is-active {
  opacity: 0.85;
  stroke-dasharray: 6 10;
  animation: simulationFlow 1.2s linear infinite;
}

.engine-diagram__node {
  cursor: pointer;
  outline: none;
}

.engine-diagram__ring {
  fill: rgba(10, 14, 22, 0.95);
  stroke: rgba(42, 123, 255, 0.3);
  stroke-width: 1.5;
  transition: stroke var(--transition-base), filter var(--transition-base);
}

.engine-diagram__node.is-active .engine-diagram__ring {
  stroke: var(--color-blue);
  filter: drop-shadow(0 0 14px rgba(42, 123, 255, 0.55));
}

.engine-diagram__node.is-adjacent .engine-diagram__ring {
  stroke: rgba(90, 67, 198, 0.65);
}

.engine-diagram__dot {
  fill: var(--color-blue);
  pointer-events: none;
}

.engine-diagram__label {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--color-text-secondary);
  text-anchor: middle;
  pointer-events: none;
}

.engine-diagram__node.is-active .engine-diagram__label {
  fill: var(--color-gold-light);
}

.engine-diagram__tooltip {
  margin-top: var(--space-xl);
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  min-height: 3rem;
}

.engine-diagram__tooltip[hidden] {
  display: none;
}

.engine-diagram-section {
  background: var(--color-bg-deep);
}

.engine-diagram-section__title {
  margin-bottom: var(--space-2xl);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}

/* ── css/sections/engine-deep-dive.css ── */
/* ==========================================================================
   Engine Page — Deep-dive system sections
   ========================================================================== */

.engine-deep-dive {
  background: var(--color-bg-deep);
}

.engine-deep-dive__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-2xl), 4vw, var(--space-4xl));
  align-items: center;
  padding-block: var(--space-3xl);
  border-top: 1px solid rgba(201, 167, 90, 0.06);
}

.engine-deep-dive__block--reverse .engine-deep-dive__visual {
  order: 2;
}

.engine-deep-dive__block--reverse .engine-deep-dive__content {
  order: 1;
}

.engine-deep-dive__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgba(42, 123, 255, 0.1);
  border: 1px solid rgba(42, 123, 255, 0.25);
  color: var(--color-blue);
}

.engine-deep-dive__icon svg,
.engine-deep-dive__icon img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.engine-deep-dive__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.engine-deep-dive__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.engine-deep-dive__callout {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-left: 2px solid var(--color-gold);
  background: rgba(201, 167, 90, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.engine-deep-dive__callout-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.engine-deep-dive__callout-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.engine-deep-dive__visual {
  min-height: 14rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(42, 123, 255, 0.15);
  background-color: #080b12;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.engine-deep-dive__visual--ecology {
  background-image: var(--img-deep-ecology);
  background-position: center;
}

.engine-deep-dive__visual--colonies {
  background-image: var(--img-deep-colonies);
  background-position: center 40%;
}

.engine-deep-dive__visual--characters {
  background-image: var(--img-deep-characters);
  background-position: center;
}

.engine-deep-dive__visual--economy {
  background-image: var(--img-deep-economy);
  background-position: center 35%;
}

.engine-deep-dive__visual--history {
  background-image: var(--img-deep-history);
  background-position: center 55%;
}

.engine-deep-dive__visual--story {
  background-image: var(--img-deep-story);
  background-position: center 45%;
}

.engine-deep-dive__visual-mark {
  display: none;
}

@media (max-width: 64rem) {
  .engine-deep-dive__block,
  .engine-deep-dive__block--reverse {
    grid-template-columns: 1fr;
  }

  .engine-deep-dive__block--reverse .engine-deep-dive__visual,
  .engine-deep-dive__block--reverse .engine-deep-dive__content {
    order: unset;
  }
}

/* ── css/sections/engine-pillars.css ── */
/* ==========================================================================
   Engine Page — Technical pillars + Genesis CTA
   ========================================================================== */

.engine-pillars {
  background:
    radial-gradient(ellipse 50% 40% at 30% 50%, var(--color-purple-dim) 0%, transparent 60%),
    var(--color-bg-deep);
}

.engine-pillars__title {
  margin-bottom: var(--space-3xl);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}

.engine-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.engine-pillar {
  padding: var(--space-2xl);
  background: rgba(12, 16, 24, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(42, 123, 255, 0.12);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.engine-pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(42, 123, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(42, 123, 255, 0.08);
}

.engine-pillar__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.engine-pillar__text {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.engine-page-cta {
  text-align: center;
  background: var(--color-bg-deep);
}

.engine-page-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.engine-page-cta__text {
  margin-top: var(--space-lg);
  max-width: 32rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.engine-page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

@media (max-width: 64rem) {
  .engine-pillars__grid {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
  }
}

@media (max-width: 30rem) {
  .engine-page-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── css/sections/footer.css ── */
/* ==========================================================================
   Section — Premium Footer
   ========================================================================== */

.footer {
  padding-block: var(--space-4xl) var(--space-2xl);
  border-top: 1px solid rgba(201, 167, 90, 0.12);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(90, 67, 198, 0.06) 0%, transparent 60%),
    var(--color-bg-deep);
  content-visibility: visible;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: start;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.footer__tagline {
  margin-top: var(--space-md);
  max-width: 20rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.footer__column-title {
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--color-gold-light);
}

.footer__links a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.footer__divider {
  height: 1px;
  margin-block: var(--space-3xl);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 167, 90, 0.35) 20%,
    rgba(201, 167, 90, 0.35) 80%,
    transparent 100%
  );
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer__social {
  display: flex;
  gap: var(--space-md);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--social-link-size);
  height: var(--social-link-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.footer__social-link img {
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold-dim);
  background: var(--color-gold-dim);
}

.footer__social-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.footer__back-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.footer__back-top:hover,
.footer__back-top:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold-dim);
  transform: translateY(-2px);
}

.footer__back-top:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.footer__back-top-arrow {
  transition: transform var(--transition-fast);
}

.footer__back-top:hover .footer__back-top-arrow,
.footer__back-top:focus-visible .footer__back-top-arrow {
  transform: translateY(-2px);
}

@media (max-width: 64rem) {
  .footer__top {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 30rem) {
  .footer__columns {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ── css/animations.css ── */
/* ==========================================================================
   Animations — Component motion hooks (keyframes live in base/motion.css)
   ========================================================================== */

.feature-card {
  will-change: transform;
}

.feature-card:hover .feature-card__icon {
  animation: motionFloat 2s ease-in-out infinite;
}

.genesis__panel:hover .genesis__title {
  text-shadow: 0 0 48px var(--color-blue-glow);
  transition: text-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

/* ── css/responsive.css ── */
/* ==========================================================================
   Responsive — Breakpoint overrides only (no duplicate component rules)
   ========================================================================== */

@media (max-width: 64rem) {
  .engine__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav__links {
    gap: var(--space-xl);
  }
}

@media (max-width: 48rem) {
  :root {
    --nav-height: var(--nav-height-tablet);
    --container-gutter: var(--container-gutter-tablet);
    --card-padding: var(--card-padding-tablet);
  }

  .nav__links {
    display: none;
  }

  .nav__toggle {
    display: flex;
  }

  .hero__content {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  .hero__headline-row {
    justify-content: center;
  }

  .hero__actions {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--width-hero-actions);
  }

  .hero__btn {
    width: 100%;
  }

  .hero__planet {
    width: clamp(14rem, 50vw, 22rem);
    right: 2%;
    opacity: 0.5;
  }

  .hero.is-planet-visible .hero__planet {
    opacity: 0.5;
  }

  .hero__headline {
    letter-spacing: var(--tracking-wide);
  }

  .section__header {
    margin-bottom: var(--space-2xl);
  }

  .engine__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .genesis {
    padding-block: var(--space-4xl);
  }

  .genesis__subtitle {
    font-size: var(--text-xl);
  }

  .footer__social {
    gap: var(--space-md);
  }
}

@media (min-width: 90rem) {
  .hero__inner {
    padding-left: var(--space-2xl);
  }

  .hero__content {
    max-width: 44rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --container-gutter: var(--container-gutter-phone);
  }

  .nav__logo-text {
    display: none;
  }

  .hero {
    padding-block: calc(var(--nav-height) + var(--space-xl)) var(--space-2xl);
  }

  .hero__logo {
    width: var(--hero-logo-size-min);
    margin-bottom: var(--space-lg);
  }

  .hero__scroll {
    display: none;
  }

  .hero__mission-line {
    font-size: var(--text-base);
  }

  .about__text {
    font-size: var(--text-lg);
  }

  .section__title {
    font-size: var(--text-2xl);
  }

  .btn--large {
    padding: var(--space-md) 1.75rem;
    font-size: var(--text-sm);
  }
}