/* ============================================
   DORFLEBEN — ROLEPLAY AUF FIVEM
   ============================================ */

:root {
  /* === DORFLEBEN — LANDLEBEN / WALD-GRUEN PALETTE ===
     Tiefes Wald-Nachtgruen → frisches Marken-Gruen → Sand/Creme.
     Markenfarben aus server.cfg: #4CAF50 / #40741d / #fbd9a1. */
  --bg: #081206;
  --bg-2: #0e2410;
  --bg-3: #164018;

  /* Marken-Akzente (ehemals „neon", jetzt Gruen/Creme) */
  --pink: #4caf50;
  --pink-hot: #3d9440;
  --magenta: #40741d;
  --purple: #40741d;
  --violet: #2f5715;
  --cyan: #fbd9a1;
  --teal: #7ed957;
  --orange: #e0a040;
  --sunset: #f0c674;
  --yellow: #fbd9a1;

  /* Chrome / metallic accents — used for headings, button rims, marquee */
  --chrome-1: #f2f7ef;
  --chrome-2: #cfe0c5;
  --chrome-3: #6d8468;

  --text: #f2f7ef;
  --text-dim: #d5e6cb;
  --text-mute: #9ab595;
  --border: rgba(120, 200, 130, 0.22);
  --card: rgba(76, 175, 80, 0.05);
  --card-border: rgba(76, 175, 80, 0.2);

  /* === DORFLEBEN GRADIENTS === */
  --gradient-vice: linear-gradient(135deg, #40741d 0%, #4caf50 45%, #fbd9a1 100%);
  --gradient-sunset: linear-gradient(180deg, #fbd9a1 0%, #f0c674 18%, #4caf50 42%, #40741d 68%, #0e2410 92%, #081206 100%);
  --gradient-hot: linear-gradient(135deg, #4caf50 0%, #40741d 45%, #7ed957 100%);
  --gradient-chrome: linear-gradient(180deg, #f2f7ef 0%, #cfe0c5 35%, #4caf50 55%, #40741d 78%, #2a4d14 100%);
  --gradient-horizon: linear-gradient(90deg, #fbd9a1 0%, #4caf50 50%, #40741d 100%);

  /* Grid line color for the horizon decoration */
  --grid-line: rgba(76, 175, 80, 0.45);
  --grid-line-soft: rgba(76, 175, 80, 0.18);

  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-mono: 'Syncopate', monospace;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ============= A11Y: FOCUS + SKIP-LINK ============= */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.nav-cta:focus-visible,
.lang-btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(76, 175, 80, 0.4);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10001;
  padding: 10px 18px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 100px;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Anchor targets shouldn't hide behind the fixed nav */
section[id] { scroll-margin-top: 80px; }

/* ============= UTILS ============= */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { position: relative; padding: 140px 0; overflow: hidden; }

.gradient-text {
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Retrowave neon halo — a soft magenta bloom on the glyph silhouette. */
  filter:
    drop-shadow(0 0 18px rgba(64, 116, 29, 0.55))
    drop-shadow(0 0 38px rgba(76, 175, 80, 0.30));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 24px;
  font-weight: 700;
}
.eyebrow.center { justify-content: center; }
.eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 2s infinite;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.section-lead {
  max-width: 640px;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.7;
}

.section-head { text-align: center; margin: 0 auto 80px; }
.section-head .eyebrow { justify-content: center; }
.section-head .section-lead { margin: 0 auto; }

.section-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(180px, 28vw, 420px);
  font-weight: 900;
  color: rgba(76, 175, 80, 0.03);
  letter-spacing: 0.05em;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* ============= GRAIN & SCANLINES ============= */
/* Note: mix-blend-mode and large fixed overlays are expensive — kept lightweight */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: auto;
}

/* Retrowave CRT scanlines — faint horizontal stripes across the whole viewport.
   Cheap because it's a fixed background-image, no JS, no compositor cost. */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(64, 116, 29, 0.045) 0px,
      rgba(64, 116, 29, 0.045) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* ============= CURSOR GLOW ============= */
.cursor-glow {
  position: fixed;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,175,80,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: transform;
}

/* ============= SCROLL PROGRESS ============= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--gradient-vice);
  z-index: 10000;
  box-shadow: 0 0 12px var(--pink);
  transition: width 0.1s;
}

/* ============= NAVIGATION ============= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all 0.4s;
}
.nav.scrolled {
  background: rgba(10, 4, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ============= MOBILE NAV TOGGLE ============= */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: all 0.3s;
}
.nav-toggle:hover {
  border-color: var(--pink);
  background: rgba(76, 175, 80, 0.08);
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ============= LANGUAGE SELECTOR ============= */
.lang-selector {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}
.lang-btn:hover {
  border-color: var(--pink);
  background: rgba(76, 175, 80, 0.08);
}
.lang-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.lang-btn .chev {
  width: 12px;
  height: 12px;
  transition: transform 0.3s;
}
.lang-btn.open .chev {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  padding: 8px;
  background: rgba(15, 6, 28, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(.22,.61,.36,1);
  z-index: 200;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6), 0 0 40px rgba(76, 175, 80, 0.15);
  max-height: 360px;
  overflow-y: auto;
}
.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  transition: all 0.2s;
}
.lang-option:hover {
  background: rgba(76, 175, 80, 0.1);
  color: var(--text);
}
.lang-option.active {
  background: rgba(76, 175, 80, 0.15);
  color: var(--pink);
}
.lang-flag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  width: 30px;
  text-align: center;
  padding: 4px 0;
  background: rgba(76, 175, 80, 0.15);
  border-radius: 4px;
}
.lang-option.active .lang-flag {
  background: var(--pink);
  color: #fff;
}
.lang-name {
  flex: 1;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.logo-mark {
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
  font-size: 1.2em;
}
.logo-text { color: var(--text); }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
}
.nav-links-cta { display: none; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  position: relative;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--pink);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  padding: 10px 22px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-cta:hover {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
  transform: translateY(-1px);
}
.nav-cta span { transition: transform 0.3s; }
.nav-cta:hover span { transform: translateX(4px); }

/* ============= ROCKSTAR-VI HERO (pinned trailer + centered wordmark) ============= */
.zoom-stage {
  position: relative;
  height: 200vh; /* total: 100vh pin + 100vh exit runway */
  background: var(--bg);
}
.zoom-canvas {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* Fallback gradient moved onto .vc-scene's background — no separate element needed */

/* Hero scene — sunset gradient is the scene's own background so it shows the
   moment the page renders, with no z-index gymnastics. Video paints over it once decoded. */
.vc-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 75%, rgba(255, 122, 24, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 110% 80% at 50% 100%, rgba(138, 43, 226, 0.5) 0%, transparent 65%),
    linear-gradient(180deg, #1a0a35 0%, #2d0a4a 20%, #6b1d6e 50%, #4caf50 78%, #e0a040 100%);
}
.vc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Visible from the start — the gradient fallback shows through the empty box
     until the first frame is decoded, so there is never a dead-black window. */
  opacity: 1;
  filter: saturate(1.18) brightness(1.02) contrast(1.06);
  transform: scale(1.06);
  will-change: filter;
}
.vc-scene.has-video .vc-video { opacity: 1; }

/* Always-on cinematic vignette: keeps the wordmark + CTAs readable on any frame */
.vc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 75% at 50% 50%, transparent 18%, rgba(10, 4, 20, 0.6) 75%, rgba(10, 4, 20, 0.85) 100%),
    linear-gradient(180deg, rgba(10, 4, 20, 0.55) 0%, transparent 22%, transparent 55%, rgba(10, 4, 20, 0.92) 100%);
}

/* When the real video plays, fade the stylized gradient backdrop to a subtle tint */
.vc-scene.has-video .vc-sky { opacity: 0.25; mix-blend-mode: screen; }
.vc-scene.has-video .vc-grid,
.vc-scene.has-video .vc-city,
.vc-scene.has-video .vc-palms-back { opacity: 0.18; }
.vc-scene.has-video .vc-palms-front { opacity: 0.4; }
.vc-scene.has-video .vc-sun { opacity: 0.45; mix-blend-mode: screen; }
.vc-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 75%, rgba(255, 122, 24, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 110% 80% at 50% 100%, rgba(138, 43, 226, 0.5) 0%, transparent 65%),
    linear-gradient(180deg, #1a0a35 0%, #2d0a4a 20%, #6b1d6e 50%, #4caf50 78%, #e0a040 100%);
}
.vc-sun {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 800px; height: 800px;
  margin-left: -400px;
  background: radial-gradient(circle, #ffd700 0%, #e0a040 25%, #4caf50 45%, transparent 70%);
  border-radius: 50%;
  opacity: 0.85;
  will-change: transform;
  transform: translateZ(0);
}
.vc-grid {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background-image:
    linear-gradient(90deg, rgba(76, 175, 80, 0.4) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(76, 175, 80, 0.4) 1px, transparent 1px);
  background-size: 80px 60px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom;
  mask: linear-gradient(0deg, #000 0%, transparent 80%);
  -webkit-mask: linear-gradient(0deg, #000 0%, transparent 80%);
  opacity: 0.5;
}
.vc-city {
  position: absolute;
  bottom: 8%;
  left: 0; right: 0;
  height: 180px;
  background:
    linear-gradient(to top, var(--bg) 0%, transparent 70%) bottom/100% 100% no-repeat,
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      #1a0a35 20px 60px,
      transparent 60px 80px,
      #14082a 80px 130px,
      transparent 130px 150px,
      #1a0a35 150px 200px
    );
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  opacity: 0.85;
  will-change: transform;
}
.vc-city::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 8px at 30px 40%, #ffd700, transparent),
    radial-gradient(2px 6px at 90px 50%, #4caf50, transparent),
    radial-gradient(1px 5px at 150px 60%, #7ed957, transparent),
    radial-gradient(2px 7px at 220px 45%, #ffd700, transparent),
    radial-gradient(1px 6px at 280px 55%, #e0a040, transparent),
    radial-gradient(2px 8px at 350px 40%, #7ed957, transparent),
    radial-gradient(1px 5px at 420px 55%, #4caf50, transparent);
  background-size: 480px 100%;
  opacity: 0.85;
}
.vc-palms {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  color: #0a0414;
  pointer-events: none;
  will-change: transform;
}
.vc-palms svg { width: 100%; height: 100%; }
.vc-palms-back { opacity: 0.55; height: 45%; color: #14082a; }
.vc-palms-front { opacity: 1; }

/* Letter-cutout mask removed — Rockstar-VI clean: full-bleed video + centered wordmark only */

/* === Rockstar-VI hero: eyebrow strap (top) + centered wordmark stack === */
.hero-strap {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 4;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease 0.30s, transform 0.7s cubic-bezier(.22,.61,.36,1) 0.30s;
}
.zoom-canvas.intro-ready .hero-strap {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hero-stack {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  gap: 28px;
  pointer-events: none;
  /* Stack is visible from t=0; the dramatic intro lives on the individual
     children so we can stagger each piece independently. JS still animates
     opacity/translateY on scroll-out via inline styles. */
}
.hero-stack > * { pointer-events: auto; }

/* ===== HERO WORDMARK — refined "monogram" presentation ===== */
.hero-wordmark {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(200px, 38vw, 580px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 0;
  text-shadow: 0 14px 70px rgba(0, 0, 0, 0.7);
}

/* Monogram variant — much smaller, with flanking hairlines + masked-edge logo */
.hero-wordmark--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 28px);
  font-size: clamp(140px, 19vw, 280px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
  padding: 0 clamp(16px, 4vw, 36px);
}

.hero-mono-rule {
  flex: 0 1 clamp(60px, 11vw, 140px);
  height: 1px;
  align-self: center;
  pointer-events: none;
  /* Initial intro state — collapsed in from the centre */
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1) 0.60s,
              transform 1.1s cubic-bezier(.16,1,.3,1) 0.60s;
}
.hero-mono-rule--left  {
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
}
.hero-mono-rule--right {
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
}
.zoom-canvas.intro-ready .hero-mono-rule { opacity: 1; transform: scaleX(1); }

.hero-mono-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.hero-wordmark .logo-mark {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.hero-wordmark--mono .logo-mark {
  /* Force a strict 1:1 square box — the PNG ships at 1007×1006 but any
     surrounding flex/scale could nudge it; pin width=height and let
     object-fit handle the inside so the logo can never go elliptical. */
  width: 1em;
  height: 1em;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  margin: 0;
  vertical-align: middle;
  /* Soft circular fade — uses circle (not ellipse) so the halo is always
     round regardless of the box dimensions, and the visible "6" reads
     sharp at the centre while its outer edge dissolves into the bg. */
  -webkit-mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,0.92) 45%,
    rgba(0,0,0,0.6) 65%,
    rgba(0,0,0,0.15) 85%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 28%,
    rgba(0,0,0,0.92) 45%,
    rgba(0,0,0,0.6) 65%,
    rgba(0,0,0,0.15) 85%,
    rgba(0,0,0,0) 100%);
  /* Initial intro state — softly faded in, no scale slam */
  opacity: 0;
  transform: scale(1.06);
  filter: blur(8px) drop-shadow(0 0 30px rgba(76, 175, 80, 0));
  transition:
    opacity 1.1s cubic-bezier(.16,1,.3,1) 0.20s,
    transform 1.3s cubic-bezier(.16,1,.3,1) 0.20s,
    filter 1.0s cubic-bezier(.16,1,.3,1) 0.20s;
}
.zoom-canvas.intro-ready .hero-wordmark--mono .logo-mark {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) drop-shadow(0 0 26px rgba(76, 175, 80, 0.32));
  animation: hero-mark-pulse-soft 7s ease-in-out 2s infinite;
}

/* Subtle soft halo behind the logo that reinforces the fade — keeps the
   monogram visually anchored without looking pasted on top. */
.hero-mono-frame::before {
  content: '';
  position: absolute;
  inset: -22% -22%;
  background: radial-gradient(ellipse at center,
    rgba(76, 175, 80, 0.18) 0%,
    rgba(255, 122, 24, 0.10) 30%,
    transparent 65%);
  filter: blur(22px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 1.2s ease 0.4s, transform 1.4s cubic-bezier(.16,1,.3,1) 0.4s;
}
.zoom-canvas.intro-ready .hero-mono-frame::before {
  opacity: 1;
  transform: scale(1);
}

@keyframes hero-mark-pulse-soft {
  0%, 100% { filter: blur(0) drop-shadow(0 0 26px rgba(76, 175, 80, 0.32)); }
  50%      { filter: blur(0) drop-shadow(0 0 44px rgba(76, 175, 80, 0.55)); }
}

/* Legacy text-RP styles kept harmless in case the span is reintroduced */
.hero-wordmark .logo-text {
  display: inline-block;
  will-change: transform, opacity, filter;
  color: #fff;
  font-weight: 700;
}

/* Cascade reveal — each piece below the wordmark eases in one after another */
.hero-sub,
.hero-launch,
.hero-actions,
.hero-scarcity {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.zoom-canvas.intro-ready .hero-sub      { opacity: 1; transform: translateY(0); transition-delay: 1.00s; }
.zoom-canvas.intro-ready .hero-launch   { opacity: 1; transform: translateY(0); transition-delay: 1.15s; }
.zoom-canvas.intro-ready .hero-actions  { opacity: 1; transform: translateY(0); transition-delay: 1.30s; }
.zoom-canvas.intro-ready .hero-scarcity { opacity: 1; transform: translateY(0); transition-delay: 1.45s; }

.hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  margin: -8px 0 0;
  padding-left: 0.42em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero-launch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: rgba(10, 4, 20, 0.6);
  border: 1px solid var(--pink);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.22);
}
.hero-launch-strong {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-launch-sep { color: var(--text-mute); font-size: 14px; line-height: 1; }
.hero-launch-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1;
}

@media (max-width: 768px) {
  .hero-wordmark { font-size: clamp(120px, 36vw, 260px); }
  .hero-sub { font-size: 11px; letter-spacing: 0.32em; }
  .hero-launch { flex-wrap: wrap; justify-content: center; padding: 8px 14px; gap: 8px; }
  .hero-launch-strong { font-size: 17px; }
  .hero-launch-sep { display: none; }
  .hero-strap { top: 80px; }
}

/* Common hero pieces (eyebrow, sub, actions, meta) */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: rgba(10, 4, 20, 0.55);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: #fff;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 2s infinite;
}

.title-sub {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: 0.4em;
  color: var(--text);
  text-transform: uppercase;
  padding: 8px 20px;
  background: rgba(10, 4, 20, 0.5);
  border: 1px solid var(--border);
  border-radius: 100px;
  backdrop-filter: blur(8px);
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-meta {
  display: flex;
  gap: clamp(24px, 6vw, 80px);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-meta > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-meta strong {
  font-family: var(--font-display);
  font-size: 32px;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-meta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

.zoom-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-mute);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.zoom-scroll.show { opacity: 1; }
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--pink), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -20px; left: 0;
  width: 100%; height: 20px;
  background: var(--pink);
  animation: scrollDown 2s infinite;
}

/* ============= BUTTONS ============= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 100px;
  transition: all 0.4s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.3s; }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
  background: var(--gradient-hot);
  color: #fff;
  box-shadow:
    0 10px 30px -8px rgba(76, 175, 80, 0.6),
    0 0 60px rgba(76, 175, 80, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e0a040, #4caf50);
  opacity: 0;
  transition: opacity 0.4s;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px -8px rgba(76, 175, 80, 0.8),
    0 0 80px rgba(76, 175, 80, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:hover::before { opacity: 1; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--pink);
  color: var(--pink);
}
.play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--pink);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  padding-left: 2px;
}

.btn-lg { padding: 20px 40px; font-size: 15px; }

/* Disabled button with tooltip */
.btn-disabled {
  position: relative;
  cursor: not-allowed;
  opacity: 0.72;
  filter: grayscale(0.2);
}
.btn-disabled:hover { transform: none; }
.btn-disabled .play-icon { background: var(--text-mute); }
.btn-disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  padding: 10px 16px;
  background: rgba(10, 4, 20, 0.95);
  border: 1px solid var(--pink);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 10px 30px -10px rgba(76, 175, 80, 0.6), 0 0 20px rgba(76, 175, 80, 0.3);
  z-index: 5;
}
.btn-disabled::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(10, 4, 20, 0.95);
  border-right: 1px solid var(--pink);
  border-bottom: 1px solid var(--pink);
  transform: translateX(-50%) rotate(45deg) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 5;
}
.btn-disabled:hover::after,
.btn-disabled:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.btn-disabled:hover::before,
.btn-disabled:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* ============= ABOUT ============= */
.about { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.about-text p {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 520px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.badge {
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text);
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.3s;
}
.badge:hover {
  background: rgba(76, 175, 80, 0.2);
  transform: translateY(-2px);
}

.visual-card {
  position: relative;
  padding: 40px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(138, 43, 226, 0.05) 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.visual-card-glow {
  position: absolute;
  top: -50%; right: -30%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.visual-card-content { position: relative; z-index: 1; }

.visual-stat-num {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.visual-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1.6;
}
.visual-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 32px 0;
}
.visual-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.visual-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
}
.visual-row span:first-child { color: #4ade80; }
.visual-row span:nth-child(2) { color: var(--text); flex: 1; padding: 0 16px; }
.visual-row span:last-child { color: var(--text-dim); }

/* ============= FEATURES ============= */
.features { background: var(--bg-2); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.feature-card {
  position: relative;
  padding: 40px 32px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: var(--gradient-vice);
  border-radius: 22px;
  opacity: 0;
  z-index: -1;
  filter: blur(20px);
  transition: opacity 0.5s;
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--pink);
  background: rgba(76, 175, 80, 0.04);
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after { opacity: 0.3; }

.feature-icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(138, 43, 226, 0.1));
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 24px;
  color: var(--pink);
  transition: all 0.4s;
}
.feature-icon svg { width: 28px; height: 28px; }
.feature-card:hover .feature-icon {
  background: var(--gradient-hot);
  border-color: transparent;
  color: #fff;
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 10px 30px -10px var(--pink);
}

.feature-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.feature-card p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.feature-corner {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 1px;
}

/* ============= ROADMAP ============= */
.roadmap {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 25%, var(--bg-2) 75%, var(--bg) 100%);
  padding: 140px 0 100px;
  overflow: visible;
}

.roadmap-track {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 0;
  z-index: 2;
}

.roadmap-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(180px, 28vw, 320px);
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.rm-line-path {
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
  transition: stroke-dashoffset 2.2s cubic-bezier(.22,.61,.36,1);
}
.roadmap-track.line-in .rm-line-path { stroke-dashoffset: 0; }

.milestone {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
  column-gap: 36px;
  padding: 40px 0;
  min-height: 320px;
}

.milestone-visual {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.milestone-visual::before {
  content: '';
  position: absolute;
  inset: 12%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.18), transparent 70%);
  z-index: -1;
  border-radius: 50%;
}
.ms-art {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(76, 175, 80, 0.35));
}

/* ===== Cinema stages (full-bleed pinned video sections, Rockstar-VI style) ===== */
.milestone-stage {
  /* Reset the alternating grid layout */
  display: block;
  padding: 0;
  min-height: 0;
  position: relative;
  /* Total runway: 100vh pin + 180vh of scroll-through — Rockstar-VI cadence,
     tight enough that content keeps changing instead of the user scrolling
     through a long dead zone. */
  height: 280vh;
  /* Break out of the .container max-width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 60px;
  margin-bottom: 60px;
  z-index: 4; /* float above the snake line in the roadmap-track */
}
/* Tall stages never reach 15% intersection ratio, so the generic .reveal fade-in
   can leave them stuck at opacity:0. Always-visible override: */
.milestone-stage.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.ms-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  will-change: opacity;
}

.ms-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.05) brightness(0.78);
  /* Visible from the start — the pin's dark background covers the time until the first frame decodes */
  opacity: 1;
  will-change: transform;
}

.ms-stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(10, 4, 20, 0.78) 0%, rgba(10, 4, 20, 0.4) 45%, rgba(10, 4, 20, 0.15) 100%),
    linear-gradient(to bottom, rgba(10, 4, 20, 0.55) 0%, transparent 28%, transparent 70%, rgba(10, 4, 20, 0.85) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(10, 4, 20, 0.45) 100%);
}

.ms-stage-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.ms-stage-text .container {
  position: relative;
  width: 100%;
  max-width: 760px;
}
.ms-stage-text .container > *,
.ms-stage-text .container .ms-stage-cta { pointer-events: auto; }

/* Alternating positions — left / right (Rockstar-style rhythm) */
.ms-stage-text--left .container {
  margin: 0;
  padding-left: 7vw;
}
.ms-stage-text--right .container {
  margin-left: auto;
  margin-right: 0;
  padding-right: 7vw;
  text-align: right;
}
.ms-stage-text--right .milestone-meta { justify-content: flex-end; }

@media (max-width: 768px) {
  /* On mobile collapse the alternation — always left aligned for legibility */
  .ms-stage-text--right .container { text-align: left; padding-left: 6vw; padding-right: 6vw; margin-left: 0; }
  .ms-stage-text--right .milestone-meta { justify-content: flex-start; }
  .ms-stage-text--left .container { padding-left: 6vw; padding-right: 6vw; }
}

.ms-stage-number {
  font-family: var(--font-display);
  font-size: clamp(140px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(76, 175, 80, 0.55);
  text-stroke: 1.5px rgba(76, 175, 80, 0.55);
  margin-bottom: -0.15em;
  margin-left: -0.05em;
  filter: drop-shadow(0 6px 24px rgba(76, 175, 80, 0.25));
  user-select: none;
}

.ms-stage-text .milestone-chapter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 18px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.ms-stage-text h3 {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
  max-width: 16ch;
}

.ms-stage-text p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin-bottom: 36px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.ms-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 88px);
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  line-height: 0.92;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

.ms-stage-text h3 .gradient-text {
  display: inline-block;
  filter: drop-shadow(0 8px 30px rgba(76, 175, 80, 0.45));
}

.ms-stage-cta {
  margin-top: 36px;
  pointer-events: auto;
  align-self: flex-start;
}

.ms-stage-text .milestone-meta {
  gap: 48px;
  margin-top: 8px;
  opacity: 0;
  will-change: transform, opacity;
}
.ms-stage-text .ms-stage-cta {
  opacity: 0;
  will-change: transform, opacity;
}
.ms-stage-text .milestone-meta strong {
  font-size: 38px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}
.ms-stage-text .milestone-meta span {
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .milestone-stage { height: 240vh; }
  .ms-stage-overlay {
    background:
      linear-gradient(to bottom, rgba(10, 4, 20, 0.6) 0%, rgba(10, 4, 20, 0.35) 35%, rgba(10, 4, 20, 0.85) 100%);
  }
  .ms-stage-number { font-size: 120px; }
  .ms-stage-text .milestone-meta { gap: 24px; }
  .ms-stage-text .milestone-meta strong { font-size: 28px; }
}

/* Hide the snake line behind cinema stages — visually cleaner */
.roadmap-track:has(.milestone-stage) .roadmap-line { z-index: 0; }

/* ===== HERO SCARCITY BAR ===== */
.hero-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 8px 18px;
  background: rgba(10, 4, 20, 0.6);
  border: 1px solid rgba(76, 175, 80, 0.5);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #fff;
  text-transform: uppercase;
}
.hero-scarcity-dot {
  width: 8px; height: 8px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 1.8s infinite;
}

/* ===== STATS: scarcity stat with progress bar ===== */
.stat-urgent {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(255, 122, 24, 0.05));
  border-color: rgba(76, 175, 80, 0.4);
}
.stat-denom {
  font-size: 0.45em;
  color: var(--text-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  margin-left: 6px;
}
.stat-bar {
  margin-top: 14px;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.stat-bar span {
  display: block;
  height: 100%;
  background: var(--gradient-hot);
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.6);
  animation: barFill 1.8s cubic-bezier(.22,.61,.36,1) forwards;
  transform-origin: left;
}
@keyframes barFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ===== COUNTDOWN SECTION ===== */
.countdown {
  position: relative;
  text-align: center;
  padding: 160px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(76, 175, 80, 0.08), transparent 70%),
    var(--bg);
}
.countdown-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.countdown-glow {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
}
.countdown-glow-1 { top: 5%; left: 8%; background: var(--pink); }
.countdown-glow-2 { bottom: 5%; right: 8%; background: var(--purple); }
.countdown-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.countdown-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.005em;
  margin-bottom: 36px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.countdown-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 28px);
  margin-bottom: 36px;
  font-variant-numeric: tabular-nums;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: clamp(80px, 13vw, 160px);
  padding: 18px 12px;
  background: linear-gradient(180deg, rgba(76, 175, 80, 0.05), rgba(10, 4, 20, 0.6));
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.countdown-unit strong {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 110px);
  line-height: 1;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.countdown-unit span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.countdown-sep {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 90px);
  line-height: 1;
  color: var(--text-mute);
  padding-top: 8px;
  animation: pulse 1s infinite;
}
.countdown-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 36px;
}

/* ===== Final CTA — extra-large hero button ===== */
.btn-xl {
  padding: 24px 48px;
  font-size: 16px;
  letter-spacing: 1px;
}
.btn-xl svg { width: 22px; height: 22px; }

.cta-trust {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .countdown { padding: 100px 0; }
  .countdown-sep { font-size: 36px; padding-top: 4px; }
  .countdown-unit { min-width: 70px; padding: 12px 8px; }
  .countdown-clock { gap: 8px; }
}

.milestone-marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%),
    var(--gradient-hot);
  font-family: var(--font-display);
  font-size: 30px;
  color: #fff;
  position: relative;
  box-shadow:
    0 0 0 5px var(--bg),
    0 0 0 6px var(--pink),
    0 0 28px rgba(76, 175, 80, 0.55),
    0 10px 30px -8px rgba(76, 175, 80, 0.6);
  z-index: 3;
}
.milestone-marker::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--pink);
  border-radius: 50%;
  opacity: 0.35;
  animation: markerPulse 3s ease infinite;
  pointer-events: none;
}
@keyframes markerPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0; }
}

.milestone-content {
  grid-column: 3;
  grid-row: 1;
}
.milestone-chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.milestone-content h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  line-height: 1;
  text-transform: uppercase;
}
.milestone-content p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 480px;
}

.milestone-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.milestone-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.milestone-meta strong {
  font-family: var(--font-display);
  font-size: 28px;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.milestone-meta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* Alternating: right variant (visual right, content left) */
.milestone-right .milestone-visual { grid-column: 3; }
.milestone-right .milestone-content { grid-column: 1; text-align: right; }
.milestone-right .milestone-content p { margin-left: auto; margin-right: 0; }
.milestone-right .milestone-meta { justify-content: flex-end; }

/* Wide milestone — Worlds */
.milestone-wide .milestone-content p { max-width: 560px; }

.world-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
  max-width: 520px;
}
.milestone-right.milestone-wide .world-pills { margin-left: auto; }

.world-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(20, 8, 42, 0.6);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1), border-color 0.3s, background 0.3s;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.world-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.3s;
}
.world-pill[data-art="1"]::before { background: radial-gradient(ellipse at 30% 100%, #e0a040, transparent 60%), linear-gradient(135deg, #6d28d9, #1a0a35); }
.world-pill[data-art="2"]::before { background: radial-gradient(ellipse at 50% 100%, #7ed957, transparent 60%), linear-gradient(135deg, #1a0a35, #14082a); }
.world-pill[data-art="3"]::before { background: radial-gradient(ellipse at 80% 80%, #4caf50, transparent 60%), linear-gradient(135deg, #14082a, #0a0414); }
.world-pill[data-art="4"]::before { background: radial-gradient(ellipse at 40% 60%, #ffd700, transparent 50%), linear-gradient(135deg, #6d28d9, #14082a); }
.world-pill:hover {
  transform: translateY(-3px);
  border-color: var(--pink);
}
.world-pill:hover::before { opacity: 0.35; }
.world-pill-badge {
  width: fit-content;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--pink);
  border-radius: 100px;
  color: var(--pink);
}
.world-pill-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.world-pill-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.world-pill-meta strong { color: var(--text); font-weight: 700; }
.dot-live {
  width: 7px; height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
  display: inline-block;
}

@media (max-width: 880px) {
  .roadmap { padding: 80px 0 60px; }
  .roadmap-track { padding: 20px 0; }
  .roadmap-line { display: none; }
  .milestone {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 12px;
    padding: 28px 0;
    min-height: 0;
    border-left: 2px dashed rgba(76, 175, 80, 0.25);
    margin-left: 28px;
    padding-left: 28px;
  }
  .milestone-visual {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 200px;
    margin: 0 0 12px 0;
  }
  .milestone-marker {
    grid-column: 1;
    grid-row: 2;
    width: 56px;
    height: 56px;
    font-size: 22px;
    margin-left: -56px;
    box-shadow:
      0 0 0 4px var(--bg-2),
      0 0 0 5px var(--pink),
      0 0 20px rgba(76, 175, 80, 0.45);
  }
  .milestone-content {
    grid-column: 2;
    grid-row: 2;
    text-align: left !important;
  }
  .milestone-content p { max-width: 100%; margin-right: 0 !important; margin-left: 0 !important; }
  .milestone-meta { justify-content: flex-start !important; gap: 20px; }
  .milestone-right .milestone-visual,
  .milestone-right .milestone-content { grid-column: 2 !important; text-align: left !important; }
  .milestone-right .world-pills { margin-left: 0; }
  .world-pills { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============= MARQUEE ============= */
.marquee {
  position: relative;
  padding: 36px 0;
  background: linear-gradient(90deg, var(--pink) 0%, var(--purple) 100%);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transform: rotate(-1deg);
  margin: 40px 0;
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 0.04em;
  color: #fff;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span:nth-child(even) {
  color: rgba(255,255,255,0.4);
  font-size: 36px;
  align-self: center;
}

/* ============= SERVERS ============= */
.servers { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }

.server-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

.server-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(.22,.61,.36,1);
}
.server-card:hover {
  transform: translateY(-8px);
  border-color: var(--pink);
  box-shadow: 0 30px 60px -20px rgba(76, 175, 80, 0.3);
}

.server-img {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.server-img-1 {
  background:
    radial-gradient(ellipse at 30% 100%, #e0a040 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, #4caf50 0%, transparent 60%),
    linear-gradient(135deg, #6d28d9, #1a0a35);
}
.server-img-2 {
  background:
    radial-gradient(ellipse at 50% 100%, #7ed957 0%, transparent 60%),
    radial-gradient(ellipse at 20% 30%, #4caf50 0%, transparent 50%),
    linear-gradient(135deg, #1a0a35, #14082a);
}
.server-img-3 {
  background:
    radial-gradient(ellipse at 80% 80%, #4caf50 0%, transparent 60%),
    linear-gradient(135deg, #14082a, #0a0414);
}
.server-img-4 {
  background:
    radial-gradient(ellipse at 40% 60%, #ffd700 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, #e0a040 0%, transparent 60%),
    linear-gradient(135deg, #6d28d9, #14082a);
}
.server-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 9px),
    linear-gradient(180deg, transparent 60%, rgba(10, 4, 20, 0.8) 100%);
}
.server-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #ffd700, transparent),
    radial-gradient(2px 2px at 60% 70%, #7ed957, transparent),
    radial-gradient(1px 1px at 80% 20%, #fff, transparent),
    radial-gradient(2px 2px at 30% 80%, #4caf50, transparent);
  opacity: 0.8;
}

.server-badge {
  position: absolute;
  top: 20px; left: 20px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--pink);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--pink);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.server-body { padding: 32px; }

.server-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.server-meta span:first-child { color: #4ade80; }
.server-meta span:last-child { color: var(--text-mute); }

.server-card h3 {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.server-card p {
  color: var(--text-dim);
  margin-bottom: 24px;
  line-height: 1.6;
}
.server-stats {
  display: flex;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.server-stats strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  margin-right: 6px;
}

/* ============= PAGE HEADER (rules.html, etc.) ============= */
.page-header {
  position: relative;
  padding: 180px 0 90px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.page-header-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-header-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  filter: brightness(0.5) saturate(1.1);
}
.page-header-bg.has-video .page-header-video { opacity: 1; }
.page-header-bg.has-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 20, 0.5) 0%, rgba(10, 4, 20, 0.9) 100%);
}
.page-header-glow {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.32;
}
.page-header-glow-1 { top: -10%; left: 8%; background: var(--pink); }
.page-header-glow-2 { bottom: -20%; right: 8%; background: var(--purple); }

.page-header .container { position: relative; z-index: 2; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  transition: all 0.3s;
}
.back-link:hover {
  color: var(--text);
  border-color: var(--pink);
  background: rgba(76, 175, 80, 0.08);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.page-lead {
  max-width: 620px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* Active nav item (current page) */
.nav-links a.active {
  color: var(--pink);
}
.nav-links a.active::after {
  width: 100% !important;
  background: var(--pink);
}

/* Rules page-specific layout tweaks */
.page-rules .section.rules { padding-top: 60px; }

.rules-footnote {
  margin-top: 60px;
  text-align: center;
  padding: 40px 24px;
  background: rgba(20, 8, 42, 0.45);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.rules-footnote p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ============= RULES ============= */
.rules {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
  padding: 140px 0;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}

.rule-card {
  position: relative;
  padding: 28px 26px;
  background: rgba(20, 8, 42, 0.45);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), border-color 0.3s, background 0.3s;
  overflow: hidden;
}
.rule-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.rule-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-vice);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.rule-card:hover {
  transform: translateY(-4px);
  border-color: var(--pink);
  background: rgba(76, 175, 80, 0.04);
}
.rule-card:hover::before { opacity: 1; }
.rule-card:hover::after { transform: scaleX(1); }

.rule-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 14px;
  padding: 4px 12px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.rule-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  text-transform: uppercase;
  line-height: 1;
}
.rule-card p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rules-grid { grid-template-columns: 1fr; }
}

/* ============= STATS ============= */
.stats {
  background: var(--bg);
  padding: 100px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat {
  padding: 40px 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  transition: all 0.4s;
}
.stat:hover {
  background: rgba(76, 175, 80, 0.05);
  border-color: var(--pink);
  transform: translateY(-4px);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ============= CTA ============= */
.cta {
  position: relative;
  text-align: center;
  padding: 180px 0;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  filter: brightness(0.55) saturate(1.15);
}
.cta-bg.has-video .cta-video { opacity: 1; }
.cta-bg.has-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 4, 20, 0.55) 0%, rgba(10, 4, 20, 0.85) 100%);
  pointer-events: none;
}
.cta-glow {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
}
.cta-glow-1 {
  top: 10%; left: 10%;
  background: var(--pink);
}
.cta-glow-2 {
  bottom: 10%; right: 10%;
  background: var(--purple);
  animation-delay: -5s;
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.cta-inner p {
  font-size: 18px;
  color: var(--text-dim);
  margin-bottom: 48px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============= FOOTER ============= */
.footer {
  background: #050208;
  padding: 80px 0 40px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand p {
  color: var(--text-mute);
  margin-top: 12px;
  font-size: 14px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 12px;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--pink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--card-border);
  font-size: 12px;
  color: var(--text-mute);
  flex-wrap: wrap;
  gap: 16px;
}

/* ============= REVEAL ON SCROLL ============= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============= ANIMATIONS ============= */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroChar {
  from { opacity: 0; transform: translateY(120px) rotateX(-30deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes scrollDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes glowFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.15); }
}

@keyframes cityLights {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: 100px 0; }
  .feature-grid, .server-grid, .stats-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .container { padding: 0 20px; }
  .marquee-track { font-size: 32px; gap: 32px; }
  .marquee-track span:nth-child(even) { font-size: 24px; }
  .visual-stat-num { font-size: 80px; }
  .cursor-glow { display: none; }
  .zoom-stage { height: 200vh; }
  .zoom-top { top: 90px; }
  .zoom-bottom { bottom: 80px; }
  .hero-meta strong { font-size: 24px; }
  .lang-menu { right: 0; min-width: 180px; }

  /* Mobile nav drawer */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(82vw, 340px);
    flex-direction: column;
    gap: 0;
    padding: 96px 28px 32px;
    background: rgba(10, 4, 20, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
    z-index: 99;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 16px 0;
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.02em;
    color: var(--text);
    border-bottom: 1px solid var(--card-border);
    text-transform: uppercase;
  }
  .nav-links a:hover { color: var(--pink); }
  .nav-links a::after { display: none; }
  .nav-links-cta { display: block; margin-top: 24px; }
  .nav-links-cta a {
    display: inline-flex;
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 16px 30px;
  }

  body.nav-open { overflow: hidden; }
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 98;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }

  /* Hide the nav CTA on small screens to keep header tidy — it lives in the menu */
  .nav-right .nav-cta { display: none; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }
}

/* ============= PERFORMANCE: skip offscreen rendering ============= */
.section.stats,
.section.rules,
.section.cta,
.footer { content-visibility: auto; contain-intrinsic-size: 800px; }

/* ============= REDUCED MOTION ============= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .cursor-glow { display: none; }
  .grain, .scanlines { display: none; }
  /* Keep hero readable when JS-driven zoom is disabled */
  .zoom-stage { height: 100vh; }
  .zoom-top, .zoom-bottom, .zoom-scroll { opacity: 1 !important; transform: translateX(-50%) !important; }
  .vc-sun, .vc-city, .vc-palms { transform: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   STATUS PAGE — live network status, server + API health board
   ============================================================ */

.page-status .section { padding: 80px 0; }
.page-status .page-header { padding-bottom: 60px; }

/* Pulsing live dot used in pills and group tags */
.status-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  background: var(--cyan);
  box-shadow: 0 0 12px currentColor;
}
.status-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: status-pulse 2s ease-out infinite;
}
.status-pulse-dot--ok      { background: #38f3a8; color: #38f3a8; }
.status-pulse-dot--standby { background: var(--orange); color: var(--orange); }
.status-pulse-dot--warn    { background: #ffd700; color: #ffd700; }
.status-pulse-dot--down    { background: var(--pink-hot); color: var(--pink-hot); }
@keyframes status-pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ===== Overall status banner ===== */
.status-banner-section { padding: 20px 0 40px; }
.status-banner {
  position: relative;
  padding: 32px 36px;
  background:
    radial-gradient(ellipse at top left, rgba(56, 243, 168, 0.10) 0%, transparent 55%),
    rgba(20, 8, 42, 0.55);
  border: 1px solid rgba(56, 243, 168, 0.28);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.status-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(56, 243, 168, 0.45), transparent 30%) top/100% 1px no-repeat;
  pointer-events: none;
}
.status-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.status-banner-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.status-banner-time strong { color: var(--text); font-weight: 700; }
.status-time-sep { color: var(--text-mute); }
.status-banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.status-banner-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #38f3a8 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 6px;
}
.status-banner-stat .status-banner-unit {
  font-size: 0.55em;
  margin-left: 2px;
  letter-spacing: 0;
}
.status-banner-stat span:not(.status-banner-unit) {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ===== Status pills ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.02);
}
.status-pill-ok      { color: #38f3a8; background: rgba(56, 243, 168, 0.10); }
.status-pill-standby { color: var(--orange); background: rgba(255, 122, 24, 0.12); }
.status-pill-warn    { color: #ffd700; background: rgba(255, 215, 0, 0.10); }
.status-pill-down    { color: var(--pink-hot); background: rgba(255, 0, 128, 0.10); }

/* ===== Groups ===== */
.status-group { margin-bottom: 56px; }
.status-group:last-of-type { margin-bottom: 24px; }
.status-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}
.status-group-head h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text);
}
.status-group-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.status-group-tag-ok      { color: #38f3a8; }
.status-group-tag-standby { color: var(--orange); }

/* ===== Service rows ===== */
.status-list { display: flex; flex-direction: column; gap: 10px; }
.status-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 2fr) auto auto;
  align-items: center;
  gap: 28px;
  padding: 18px 22px;
  background: rgba(20, 8, 42, 0.42);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.status-row:hover {
  border-color: rgba(56, 243, 168, 0.25);
  background: rgba(20, 8, 42, 0.6);
  transform: translateY(-1px);
}

.status-row-name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.status-row-name h4 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--text);
  text-transform: uppercase;
}
.status-row-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  word-break: break-word;
}
.status-row-meta em {
  color: var(--pink);
  font-style: normal;
  font-weight: 700;
}

/* Service status dot (the little circle at the start of each row) */
.status-row-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 10px currentColor;
}
.status-row-dot-ok      { background: #38f3a8; color: #38f3a8; }
.status-row-dot-standby { background: var(--orange); color: var(--orange); }
.status-row-dot-warn    { background: #ffd700; color: #ffd700; }
.status-row-dot-down    { background: var(--pink-hot); color: var(--pink-hot); }

/* 90-day uptime bars */
.status-row-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: 34px;
  min-width: 180px;
  padding: 2px 0;
}
.status-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 1.5px;
  transition: transform 0.2s, filter 0.2s;
  cursor: help;
}
.status-bar--ok      { background: linear-gradient(180deg, #4cffb8 0%, #1fbf83 100%); }
.status-bar--standby { background: linear-gradient(180deg, #ffb050 0%, #e0a040 100%); }
.status-bar--warn    { background: linear-gradient(180deg, #ffe066 0%, #d4a800 100%); }
.status-bar--down    { background: linear-gradient(180deg, #6fd36f 0%, #c4006a 100%); }
.status-bar:hover {
  transform: scaleY(1.15);
  filter: brightness(1.25);
}

.status-row-numbers {
  text-align: right;
  white-space: nowrap;
}
.status-row-numbers strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 4px;
}
.status-row-numbers span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}

.status-row-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 130px;
}
.status-row-ping {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Legend */
.status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 36px;
  padding: 18px 22px;
  background: rgba(20, 8, 42, 0.35);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.status-legend-spacer { flex: 1; }
.status-legend-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ===== Incident history — empty state ===== */
.status-history { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%); }
.status-history-empty {
  text-align: center;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 56px 36px;
  background: rgba(20, 8, 42, 0.5);
  border: 1px solid rgba(56, 243, 168, 0.25);
  border-radius: 20px;
}
.status-history-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56, 243, 168, 0.12);
  border: 1px solid rgba(56, 243, 168, 0.4);
  color: #38f3a8;
  box-shadow: 0 0 40px rgba(56, 243, 168, 0.25);
}
.status-history-icon svg { width: 32px; height: 32px; }
.status-history-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  margin-bottom: 14px;
}
.status-history-empty p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 28px;
}
.status-history-meta {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
}
.status-history-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.status-history-meta span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ===== Subscribe band ===== */
.status-subscribe { padding-top: 0; }
.status-subscribe-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 36px;
  padding: 40px 44px;
  background:
    radial-gradient(ellipse at right, rgba(76, 175, 80, 0.15) 0%, transparent 60%),
    rgba(20, 8, 42, 0.55);
  border: 1px solid var(--card-border);
  border-radius: 20px;
}
.status-subscribe-card h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 14px 0 12px;
}
.status-subscribe-card p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
  max-width: 440px;
}
.status-subscribe-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.status-subscribe-actions .btn { justify-content: center; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .status-row {
    grid-template-columns: 1.4fr 1fr auto;
    grid-template-areas:
      "name   status status"
      "bars   bars   numbers";
    gap: 16px 20px;
  }
  .status-row-name    { grid-area: name; }
  .status-row-bars    { grid-area: bars; min-width: 0; }
  .status-row-numbers { grid-area: numbers; text-align: right; }
  .status-row-status  { grid-area: status; flex-direction: row; align-items: center; min-width: 0; }
}
@media (max-width: 768px) {
  .status-banner { padding: 24px 22px; }
  .status-banner-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .status-banner-head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .status-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "status"
      "bars"
      "numbers";
    gap: 14px;
    padding: 18px;
  }
  .status-row-status  { justify-content: space-between; width: 100%; }
  .status-row-numbers { text-align: left; }
  .status-row-bars    { width: 100%; }

  .status-subscribe-card {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 22px;
  }
  .status-subscribe-actions .btn { width: 100%; }

  .status-history-meta { gap: 28px; }
}

/* ============================================================
   INDEX — Worlds (Chapter 4) STANDBY pre-launch state
   ============================================================ */
.world-prelaunch-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 122, 24, 0.08);
  border: 1px solid rgba(255, 122, 24, 0.30);
  border-radius: 100px;
}
.world-prelaunch-note strong {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 2px;
}
.world-prelaunch-dot {
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--orange);
  animation: pulse 1.6s infinite;
}
.milestone-right.milestone-wide .world-prelaunch-note { margin-left: auto; }

.dot-standby {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--orange);
}
.world-pill--standby {
  border-color: rgba(255, 122, 24, 0.30);
}
.world-pill--standby .world-pill-meta strong { color: var(--orange); }
.world-pill--standby:hover {
  border-color: var(--orange);
}

/* ============================================================
   INDEX — Hero disclaimer + launch prefix
   ============================================================ */
.hero-launch-prefix {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  padding-right: 4px;
  line-height: 1;
}
.hero-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 14px auto 0;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(10, 4, 20, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.hero-disclaimer svg { flex: none; color: var(--orange); }
.hero-disclaimer a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.hero-disclaimer a:hover { color: #fff; }
.zoom-canvas .hero-disclaimer {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.zoom-canvas.intro-ready .hero-disclaimer {
  opacity: 1; transform: translateY(0); transition-delay: 1.60s;
}

@media (max-width: 768px) {
  .hero-disclaimer { font-size: 10px; letter-spacing: 0.5px; padding: 8px 12px; }
}

/* ============================================================
   STATUS PAGE — POMPOUS / TACTICAL UPGRADES
   ============================================================ */

/* Video bg + grid + scan over the page header */
.page-header-status { padding-top: 200px; }
.page-header-status .page-header-bg .page-header-video {
  opacity: 1;
  filter: brightness(0.40) saturate(1.30) contrast(1.06) hue-rotate(-8deg);
}
.page-header-status .page-header-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,229,255,0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(10,4,20,0.55) 0%, rgba(10,4,20,0.88) 75%, var(--bg) 100%);
  pointer-events: none;
}
.page-header-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(56,243,168,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,243,168,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  opacity: 0.55;
  pointer-events: none;
}
.page-header-scan {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,229,255,0.10) 45%, transparent 95%);
  height: 240px;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: hud-scan 6s linear infinite;
}
@keyframes hud-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(700px); opacity: 0; }
}

/* Title glitch — RGB split layer */
.status-title-glitch { position: relative; }
.status-title-glitch::before,
.status-title-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}
.status-title-glitch::before {
  color: rgba(255, 0, 128, 0.55);
  transform: translate(2px, 0);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
  animation: hud-glitch-a 6s infinite steps(1);
}
.status-title-glitch::after {
  color: rgba(126, 217, 87, 0.55);
  transform: translate(-2px, 0);
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
  animation: hud-glitch-b 6.5s infinite steps(1);
}
@keyframes hud-glitch-a {
  0%, 92%, 100% { transform: translate(2px, 0); }
  93% { transform: translate(-4px, 1px); }
  95% { transform: translate(3px, -1px); }
  97% { transform: translate(-2px, 0); }
}
@keyframes hud-glitch-b {
  0%, 90%, 100% { transform: translate(-2px, 0); }
  91% { transform: translate(5px, -1px); }
  93% { transform: translate(-3px, 2px); }
  96% { transform: translate(2px, 0); }
}

/* Boot-style command line under the page title */
.status-bootline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #c8f3df;
  background: rgba(10,4,20,0.55);
  border: 1px solid rgba(56,243,168,0.25);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase;
}
.status-bootline-prompt { color: var(--cyan); font-weight: 700; }
.status-bootline-text   { transition: opacity 0.22s ease; }
.status-bootline-cursor {
  width: 8px;
  height: 14px;
  background: #38f3a8;
  box-shadow: 0 0 10px rgba(56,243,168,0.7);
  animation: hud-blink 1s steps(2) infinite;
}
@keyframes hud-blink { 50% { opacity: 0; } }

/* Floating HUD: tactical radar + telemetry card */
.status-hud {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 280px;
  pointer-events: none;
}
.status-hud-radar {
  position: relative;
  padding: 12px;
  background: rgba(8, 22, 18, 0.7);
  border: 1px solid rgba(56,243,168,0.30);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45), inset 0 0 30px rgba(56,243,168,0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.status-hud-radar svg {
  display: block;
  width: 100%; aspect-ratio: 1;
}
.status-hud-sweep { transform-origin: 50% 50%; animation: hud-sweep 3.4s linear infinite; }
@keyframes hud-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.status-hud-ping { filter: drop-shadow(0 0 4px #38f3a8); animation: hud-ping 2.6s ease-in-out infinite; }
.status-hud-ping--a { animation-delay: 0s; }
.status-hud-ping--b { animation-delay: 0.6s; }
.status-hud-ping--c { animation-delay: 1.2s; }
.status-hud-ping--d { animation-delay: 1.8s; }
@keyframes hud-ping {
  0%, 100% { opacity: 0.2; transform: scale(0.7); transform-origin: center; }
  10%      { opacity: 1;   transform: scale(1.6); }
  40%      { opacity: 0.6; transform: scale(1); }
}
.status-hud-radar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.status-hud-radar-label strong {
  color: #38f3a8;
  font-weight: 700;
  letter-spacing: 3px;
}
.status-hud-radar-label strong span { color: var(--text-mute); margin: 0 2px; }

.status-hud-card {
  padding: 14px 16px;
  background: rgba(8, 22, 18, 0.7);
  border: 1px solid rgba(56,243,168,0.25);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.status-hud-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(56,243,168,0.12);
}
.status-hud-card-row:last-of-type { border-bottom: 0; }
.status-hud-card-key { color: var(--text-mute); }
.status-hud-card-val { color: #c8f3df; font-weight: 700; }
.status-hud-tick {
  display: inline-block;
  width: 6px; height: 6px;
  background: #38f3a8;
  border-radius: 50%;
  box-shadow: 0 0 8px #38f3a8;
  margin-right: 4px;
  vertical-align: middle;
}
.status-hud-spark {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(56,243,168,0.12);
}
.status-hud-spark svg {
  display: block;
  width: 100%; height: 36px;
  margin-bottom: 4px;
}
.status-hud-spark span {
  display: block;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--text-mute);
  text-align: right;
}

@media (max-width: 1024px) {
  .status-hud { display: none; }
}

/* ===== Tactical strip ===== */
.status-tactical {
  position: relative;
  padding: 0 0 60px;
  margin-top: -30px;
  z-index: 2;
}
.status-tactical-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas:
    "term gauges"
    "term nodes";
  gap: 18px;
}
.status-term   { grid-area: term;   }
.status-gauges { grid-area: gauges; }
.status-nodes  { grid-area: nodes;  }

@media (max-width: 1024px) {
  .status-tactical-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "gauges"
      "term"
      "nodes";
  }
}

/* Terminal */
.status-term {
  position: relative;
  background: linear-gradient(180deg, rgba(8,22,18,0.85) 0%, rgba(6,4,18,0.85) 100%);
  border: 1px solid rgba(56,243,168,0.22);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.4), inset 0 0 50px rgba(56,243,168,0.05);
}
.status-term::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(56,243,168,0.03) 2px, rgba(56,243,168,0.03) 3px);
  pointer-events: none;
  mix-blend-mode: screen;
}
.status-term-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(56,243,168,0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.status-term-lights { display: inline-flex; gap: 6px; }
.status-term-lights span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff5f56;
}
.status-term-lights span:nth-child(2) { background: #ffbd2e; }
.status-term-lights span:nth-child(3) { background: #38f3a8; }
.status-term-title { color: #c8f3df; }
.status-term-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38f3a8;
}
.status-term-body {
  height: 320px;
  padding: 12px 16px 16px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: #b4d8c8;
  scroll-behavior: smooth;
  mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.status-term-line {
  display: grid;
  grid-template-columns: 88px 50px 110px 1fr;
  gap: 10px;
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  animation: term-pop 0.4s ease;
}
@keyframes term-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.status-term-time { color: var(--text-mute); }
.status-term-lvl  { color: #38f3a8; font-weight: 700; }
.status-term-line--debug .status-term-lvl { color: #ffd700; }
.status-term-line--warn  .status-term-lvl { color: #e0a040; }
.status-term-svc  { color: var(--cyan); }
.status-term-msg  { color: #d8f1e5; text-overflow: ellipsis; overflow: hidden; }

/* Gauges */
.status-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: rgba(20, 8, 42, 0.55);
  border: 1px solid var(--card-border);
  border-radius: 16px;
}
.status-gauge {
  padding: 12px 10px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(56,243,168,0.12);
  border-radius: 12px;
  text-align: center;
}
.status-gauge svg { display: block; width: 100%; height: auto; }
.status-gauge-fill {
  transition: stroke-dasharray 1s cubic-bezier(.22,.61,.36,1);
  filter: drop-shadow(0 0 4px rgba(56,243,168,0.45));
}
.status-gauge-readout {
  margin-top: 2px;
  font-family: var(--font-mono);
}
.status-gauge-readout strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.status-gauge-readout span {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Node grid */
.status-nodes {
  padding: 18px;
  background: rgba(20, 8, 42, 0.55);
  border: 1px solid var(--card-border);
  border-radius: 16px;
}
.status-nodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.status-nodes-title { color: #c8f3df; }
.status-nodes-key   { color: var(--text-mute); display: inline-flex; align-items: center; gap: 4px; }
.status-nodes-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 2px;
  vertical-align: middle;
}
.status-nodes-dot--ok      { background: #38f3a8; box-shadow: 0 0 6px #38f3a8; }
.status-nodes-dot--standby { background: var(--orange); box-shadow: 0 0 6px var(--orange); }

.status-nodes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.status-nodes-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(56,243,168,0.18);
  box-shadow: inset 0 0 0 1px rgba(56,243,168,0.35);
  animation: node-flicker 2.4s ease-in-out infinite;
}
.status-nodes-cell--standby {
  background: rgba(255,122,24,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,122,24,0.4);
  animation-name: node-standby;
}
@keyframes node-flicker {
  0%, 100% { background: rgba(56,243,168,0.18); box-shadow: inset 0 0 0 1px rgba(56,243,168,0.35); }
  50%      { background: rgba(56,243,168,0.45); box-shadow: inset 0 0 0 1px rgba(56,243,168,0.7), 0 0 6px rgba(56,243,168,0.35); }
}
@keyframes node-standby {
  0%, 100% { background: rgba(255,122,24,0.15); box-shadow: inset 0 0 0 1px rgba(255,122,24,0.35); }
  50%      { background: rgba(255,122,24,0.35); box-shadow: inset 0 0 0 1px rgba(255,122,24,0.6), 0 0 6px rgba(255,122,24,0.3); }
}
.status-nodes-foot {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
}

/* Existing banner/rows polish so they don't feel quiet next to the new HUD */
.page-status .status-banner {
  border-color: rgba(56,243,168,0.40);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(56,243,168,0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.page-status .status-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(56,243,168,0.22) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: banner-sweep 4.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes banner-sweep {
  0%, 12%  { background-position: 200% 0; opacity: 0; }
  35%      { opacity: 0.7; }
  60%      { background-position: -120% 0; opacity: 0; }
  100%     { background-position: -120% 0; opacity: 0; }
}

.page-status .status-row { position: relative; overflow: hidden; }
.page-status .status-row::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -120px;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(56,243,168,0.10), transparent);
  pointer-events: none;
  transition: transform 0.7s ease;
}
.page-status .status-row:hover::before { transform: translateX(calc(100% + 200px)); }

/* Reduced motion overrides for the noisy HUD bits */
@media (prefers-reduced-motion: reduce) {
  .page-header-scan,
  .status-hud-sweep,
  .status-hud-ping,
  .status-nodes-cell,
  .status-bootline-cursor,
  .status-title-glitch::before,
  .status-title-glitch::after,
  .page-status .status-banner::after { animation: none !important; }
}

@media (max-width: 768px) {
  .status-bootline { font-size: 10px; padding: 7px 12px; }
  .status-tactical { padding-bottom: 40px; }
  .status-gauges { grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 8px; }
  .status-term-body { height: 240px; font-size: 11px; }
  .status-term-line { grid-template-columns: 74px 44px 90px 1fr; gap: 8px; }
  .status-nodes-grid { grid-template-columns: repeat(8, 1fr); }
  .status-nodes-foot { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   MIAMI HEAT — RETROWAVE DECORATIONS
   Pure-CSS horizon grid, synthwave neon sun, chrome marquee,
   neon button rims. Applied via pseudo-elements to existing
   sections so no HTML restructure is needed.
   ============================================================ */

/* The classic perspective grid receding to the horizon. */
.retro-horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 220%;
  height: 55%;
  transform: translateX(-50%) perspective(420px) rotateX(60deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right,
      transparent 0,
      var(--grid-line) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      transparent 0,
      var(--grid-line) 1px,
      transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 100%);
  pointer-events: none;
  opacity: 0.85;
  animation: retro-grid-scroll 5.5s linear infinite;
}
@keyframes retro-grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 64px; }
}

/* Synthwave sun: bright disc with horizontal cut-outs. The disc itself is a
   hot pink → orange → yellow gradient; the cuts are produced by stacking
   the radial gradient with a repeating linear mask. */
.retro-sun {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: clamp(220px, 28vw, 420px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%,
      #fff6c4 0%,
      #fbd9a1 15%,
      #f0c674 38%,
      #4caf50 65%,
      #40741d 95%);
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 60%, transparent 100%),
    linear-gradient(to bottom,
      #000 0,
      #000 calc(50% - 2px),
      transparent calc(50% - 2px),
      transparent calc(50% + 2px),
      #000 calc(50% + 2px),
      #000 calc(50% + 14px),
      transparent calc(50% + 14px),
      transparent calc(50% + 22px),
      #000 calc(50% + 22px),
      #000 calc(50% + 38px),
      transparent calc(50% + 38px),
      transparent calc(50% + 50px),
      #000 calc(50% + 50px),
      #000 calc(50% + 72px),
      transparent calc(50% + 72px),
      transparent calc(50% + 88px),
      #000 calc(50% + 88px),
      #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(circle at 50% 50%, #000 60%, transparent 100%),
    linear-gradient(to bottom,
      #000 0,
      #000 calc(50% - 2px),
      transparent calc(50% - 2px),
      transparent calc(50% + 2px),
      #000 calc(50% + 2px),
      #000 calc(50% + 14px),
      transparent calc(50% + 14px),
      transparent calc(50% + 22px),
      #000 calc(50% + 22px),
      #000 calc(50% + 38px),
      transparent calc(50% + 38px),
      transparent calc(50% + 50px),
      #000 calc(50% + 50px),
      #000 calc(50% + 72px),
      transparent calc(50% + 72px),
      transparent calc(50% + 88px),
      #000 calc(50% + 88px),
      #000 100%);
          mask-composite: intersect;
  filter: drop-shadow(0 0 60px rgba(76, 175, 80, 0.55))
          drop-shadow(0 0 120px rgba(255, 140, 66, 0.35));
  pointer-events: none;
  animation: retro-sun-glow 4.5s ease-in-out infinite;
}
@keyframes retro-sun-glow {
  0%, 100% { filter: drop-shadow(0 0 60px rgba(76, 175, 80, 0.55))
                     drop-shadow(0 0 120px rgba(255, 140, 66, 0.35)); }
  50%      { filter: drop-shadow(0 0 90px rgba(76, 175, 80, 0.85))
                     drop-shadow(0 0 160px rgba(255, 140, 66, 0.55)); }
}

/* Bright horizon line where the grid meets the sun — the iconic neon stripe. */
.retro-horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45%;
  height: 2px;
  background: var(--gradient-horizon);
  box-shadow:
    0 0 10px rgba(251, 217, 161, 0.7),
    0 0 22px rgba(76, 175, 80, 0.55),
    0 0 40px rgba(76, 175, 80, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* === COUNTDOWN — uses the hero trailer as its background, same treatment
   as the cinematic top section. Sun/grid decorations removed. === */
.countdown {
  background: #081206 !important;
}
/* full-bleed trailer */
.countdown-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* same neon-graded look as the hero */
  filter: brightness(0.50) saturate(1.25) hue-rotate(-6deg);
  z-index: 0;
}
/* dark gradient grade so the countdown digits stay punchy and readable */
.countdown-bg-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8, 2, 26, 0.45) 0%, rgba(8, 2, 26, 0.85) 70%),
    linear-gradient(180deg, rgba(8, 2, 26, 0.75) 0%, rgba(20, 6, 58, 0.55) 45%, rgba(8, 2, 26, 0.90) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Keep the existing pink/cyan glows but lift them above the video */
.countdown-bg .countdown-glow { z-index: 2; }
.countdown-glow-1 {
  background: var(--pink) !important;
  width: 520px !important;
  height: 520px !important;
  filter: blur(70px) !important;
  opacity: 0.35 !important;
  top: 5% !important;
  left: 8% !important;
  bottom: auto !important;
  right: auto !important;
  border-radius: 50% !important;
}
.countdown-glow-2 {
  background: var(--cyan) !important;
  width: 480px !important;
  height: 480px !important;
  filter: blur(70px) !important;
  opacity: 0.25 !important;
  bottom: 5% !important;
  right: 8% !important;
  top: auto !important;
  left: auto !important;
  border-radius: 50% !important;
}
/* Content stays above */
.countdown .container,
.countdown-inner { position: relative; z-index: 3; }

/* === Synthwave background grade for the CTA section === */
.cta {
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(64, 116, 29, 0.18), transparent 65%),
    linear-gradient(180deg, #081206 0%, #1a0640 50%, #081206 100%);
}
.cta::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 200%; height: 45%;
  transform: translateX(-50%) perspective(380px) rotateX(60deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right,  transparent 0, var(--grid-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, transparent 0, var(--grid-line-soft) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  animation: retro-grid-scroll 8s linear infinite;
}
.cta .container { position: relative; z-index: 2; }

/* === STATUS-PAGE HEADER — replace the tactical grid with the retro horizon === */
.page-header-status .page-header-grid {
  /* The old square grid is fine, but lay a perspective horizon underneath it */
  opacity: 0.4;
}
.page-header-status .page-header-bg::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -10%;
  width: 220%; height: 55%;
  transform: translateX(-50%) perspective(420px) rotateX(60deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, transparent 0, rgba(76, 175, 80, 0.32) 1px, transparent 1px),
    linear-gradient(to bottom, transparent 0, rgba(251, 217, 161, 0.28) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  animation: retro-grid-scroll 7s linear infinite;
}

/* MARQUEE intentionally NOT overridden here — uses the original simple
   pink→purple gradient strip with white text (defined earlier in the file). */

/* === BUTTON: punch up the neon rim & glow === */
.btn-primary {
  background: var(--gradient-hot) !important;
  box-shadow:
    0 10px 30px -8px rgba(64, 116, 29, 0.7),
    0 0 60px rgba(76, 175, 80, 0.35),
    0 0 0 1px rgba(255, 245, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.btn-primary:hover {
  box-shadow:
    0 16px 44px -8px rgba(64, 116, 29, 0.95),
    0 0 90px rgba(76, 175, 80, 0.55),
    0 0 0 1px rgba(255, 245, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* === EYEBROW dot pulses as a neon firefly === */
.eyebrow .dot {
  box-shadow:
    0 0 8px rgba(76, 175, 80, 0.9),
    0 0 16px rgba(64, 116, 29, 0.5);
}

/* === SECTION-BG-TEXT (giant background word like JOURNEY) gets retro glow === */
.section-bg-text {
  color: rgba(76, 175, 80, 0.04) !important;
  text-shadow:
    0 0 25px rgba(64, 116, 29, 0.10),
    0 0 60px rgba(76, 175, 80, 0.10);
}

/* === Cursor glow in hot magenta === */
.cursor-glow {
  background: radial-gradient(circle, rgba(64, 116, 29, 0.22) 0%, transparent 70%) !important;
}

/* === Hero scroll indicator: tighter neon line === */
.zoom-scroll .scroll-line {
  background: linear-gradient(to bottom, var(--magenta), var(--cyan)) !important;
  box-shadow: 0 0 8px rgba(64, 116, 29, 0.6);
}

/* === Body background gets a soft purple horizon glow at top + bottom === */
body {
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(76, 175, 80, 0.15), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(76, 175, 80, 0.10), transparent 70%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Reduced-motion: kill the animated grid/sun pulse */
@media (prefers-reduced-motion: reduce) {
  .scanlines,
  .cta::after,
  .page-header-status .page-header-bg::before,
  .retro-horizon,
  .retro-sun,
  .countdown-video { animation: none !important; }
  .countdown-video { display: none; }
}

@media (max-width: 768px) {
  .scanlines { background-size: 100% 4px; opacity: 0.4; }
  .cta::after { width: 280%; height: 38%; }
  .countdown-glow-1, .countdown-glow-2 { width: 360px !important; height: 360px !important; }
}

/* ============================================================
   DORFLEBEN — zusaetzliche Sektionen. Reuse existing palette/vars.
   ============================================================ */

/* ===== ANNOUNCEMENT BAR ===== */
:root { --announce-h: 46px; }
.announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  background: linear-gradient(90deg, #40741d 0%, #4caf50 50%, #e0a040 100%);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 24px -8px rgba(76, 175, 80, 0.6);
}
.announce-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--announce-h);
}
.announce-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  flex-shrink: 0;
}
.announce-live-dot {
  width: 8px; height: 8px;
  background: #38f3a8;
  border-radius: 50%;
  box-shadow: 0 0 10px #38f3a8;
  animation: pulse 1.4s infinite;
}
.announce-text { flex: 1; line-height: 1.35; }
.announce-text strong { font-weight: 700; }
.announce-sub { opacity: 0.85; }
.announce-cta {
  flex-shrink: 0;
  font-weight: 700;
  padding: 7px 16px;
  background: #fff;
  color: #14062a;
  border-radius: 100px;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.announce-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5); }
.announce-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.announce-close:hover { background: rgba(0, 0, 0, 0.45); }
body.announce-open .nav { top: var(--announce-h); }
.announce.hide { display: none; }

@media (max-width: 720px) {
  .announce-sub { display: none; }
  .announce-text { font-size: 12px; }
  .announce-live { display: none; }
}

/* ===== NAV LOGO (image wordmark) ===== */
.nav-logo--img {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(76, 175, 80, 0.4));
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-brand .nav-logo-img { height: 34px; }
.footer-brand .nav-logo-text { font-size: 24px; }
@media (max-width: 520px) { .nav-logo-text { display: none; } }

/* ===== HERO: Dorfleben logo + headline + live pill ===== */
.hero-wordmark--dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-shadow: none;
}
.hero-dorf-logo {
  width: clamp(260px, 44vw, 600px);
  height: auto;
  filter: drop-shadow(0 18px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 50px rgba(76, 175, 80, 0.35));
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1) 0.15s, transform 1.3s cubic-bezier(.16,1,.3,1) 0.15s;
}
.zoom-canvas.intro-ready .hero-dorf-logo {
  opacity: 1;
  transform: scale(1);
  animation: hero-dorf-float 8s ease-in-out 2s infinite;
}
@keyframes hero-dorf-float {
  0%, 100% { filter: drop-shadow(0 18px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 50px rgba(76,175,80,0.35)); }
  50%      { filter: drop-shadow(0 18px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 72px rgba(76,175,80,0.55)); }
}

.hero-headline, .hero-live {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}

.hero-headline {
  max-width: 720px;
  margin: 6px auto 0;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.hero-headline strong {
  font-weight: 700;
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-headline, .hero-live {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.zoom-canvas.intro-ready .hero-headline { opacity: 1; transform: none; transition-delay: 1.05s; }
.zoom-canvas.intro-ready .hero-live     { opacity: 1; transform: none; transition-delay: 1.20s; }

.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: rgba(10, 4, 20, 0.6);
  border: 1px solid rgba(56, 243, 168, 0.5);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}
.hero-live-dot {
  width: 9px; height: 9px;
  background: #38f3a8;
  border-radius: 50%;
  box-shadow: 0 0 12px #38f3a8;
  animation: pulse 1.5s infinite;
}
.hero-live-count {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #38f3a8;
  line-height: 1;
}

/* ===== TRANSFER SECTION ===== */
.transfer { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.transfer .section-lead { text-align: center; }
.transfer .section-lead strong { color: var(--pink); }

.transfer-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin: 64px 0 48px;
  flex-wrap: wrap;
}
.transfer-step {
  flex: 1 1 280px;
  max-width: 340px;
  padding: 32px 26px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  text-align: center;
  position: relative;
  transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.transfer-step:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: 0 20px 50px -20px rgba(76,175,80,0.5); }
.transfer-step--snapshot { border-color: rgba(255, 214, 10, 0.4); background: linear-gradient(160deg, rgba(255,214,10,0.06), rgba(255,107,53,0.04)); }
.transfer-step--goal { border-color: rgba(126, 217, 87, 0.4); background: linear-gradient(160deg, rgba(0,229,255,0.06), rgba(76,175,80,0.05)); }
.transfer-step-num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-mute);
}
.transfer-step-icon {
  width: 96px; height: 96px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
}
.transfer-step-icon svg { width: 48px; height: 48px; }
.transfer-step-badge, .transfer-step-vi {
  width: 96px; height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
}
.transfer-step-vi { width: 110px; }
.transfer-step h3 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.transfer-step p { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.transfer-arrow {
  display: flex;
  align-items: center;
  color: var(--pink);
  flex: 0 0 auto;
}
.transfer-arrow svg { width: 48px; height: 24px; filter: drop-shadow(0 0 8px rgba(76,175,80,0.6)); }

.transfer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}
.transfer-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.transfer-check { color: #38f3a8; font-weight: 700; }
.transfer-chip--founder {
  border-color: var(--yellow);
  background: rgba(255, 214, 10, 0.1);
}
.transfer-chip--founder .transfer-check { color: var(--yellow); }

.transfer-warn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 24px;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: 16px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}
.transfer-warn svg { color: var(--pink); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 880px) {
  .transfer-arrow { transform: rotate(90deg); margin: -4px 0; }
  .transfer-flow { gap: 8px; }
}

/* ===== DORFLEBEN SHOWCASE ===== */
.dorfleben { background: var(--bg-2); }
.dorf-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.dorf-visual { display: flex; justify-content: center; }
.dorf-badge-wrap { position: relative; max-width: 420px; }
.dorf-badge-wrap::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(124, 200, 80, 0.28), transparent 65%);
  z-index: -1;
  filter: blur(30px);
}
.dorf-badge {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.55));
  animation: hero-dorf-float 9s ease-in-out infinite;
}
.dorf-live-tag {
  position: absolute;
  top: 8%; right: -6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(8, 2, 26, 0.9);
  border: 1px solid #38f3a8;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #38f3a8;
  box-shadow: 0 0 24px rgba(56, 243, 168, 0.4);
}
.dorf-live-dot { width: 8px; height: 8px; background: #38f3a8; border-radius: 50%; box-shadow: 0 0 10px #38f3a8; animation: pulse 1.4s infinite; }

.dorf-text .section-title { text-align: left; }
.dorf-claim {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 4px 0 18px;
  max-width: 560px;
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dorf-text > p { color: var(--text-dim); font-size: 17px; line-height: 1.75; margin-bottom: 18px; max-width: 560px; }
.dorf-features { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 4px; }
.dorf-features .transfer-chip { font-size: 13px; padding: 9px 16px; }
.dorf-stats { display: flex; gap: 40px; margin: 28px 0; flex-wrap: wrap; }
.dorf-stat { display: flex; flex-direction: column; gap: 4px; }
.dorf-stat strong {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  background: var(--gradient-vice);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dorf-stat span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--text-mute); text-transform: uppercase; }

.dorf-connect {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0 28px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--card-border);
  border-radius: 14px;
}
.dorf-connect-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--text-mute); text-transform: uppercase; }
.dorf-connect-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s;
}
.dorf-connect-code:hover { background: rgba(76, 175, 80, 0.2); border-color: var(--pink); }
.dorf-connect-code.copied { border-color: #38f3a8; color: #38f3a8; }
.dorf-connect-code svg { opacity: 0.7; }

@media (max-width: 860px) {
  .dorf-grid { grid-template-columns: 1fr; gap: 36px; }
  .dorf-text .section-title, .dorf-text > p { text-align: center; margin-left: auto; margin-right: auto; }
  .dorf-stats, .dorf-actions, .dorf-features { justify-content: center; }
  .dorf-connect { justify-content: center; }
}

/* ===== LIVE PROOF: activity feed + scarcity ===== */
.liveproof { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); }
.liveproof-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}
.activity, .scarcity-card {
  background: rgba(8, 2, 26, 0.6);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 26px;
}
.activity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 320px;
  overflow: hidden;
  position: relative;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
}
.activity-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
  animation: activity-in 0.45s ease;
}
@keyframes activity-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.activity-line-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.activity-line strong { color: var(--text); font-weight: 600; }
.activity-line .activity-when { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); white-space: nowrap; }

.scarcity-card { display: flex; flex-direction: column; }
.scarcity-head { margin-bottom: 14px; }
.scarcity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 214, 10, 0.12);
  border: 1px solid rgba(255, 214, 10, 0.4);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--yellow);
}
.scarcity-card h3 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 12px; }
.scarcity-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.65; margin-bottom: 22px; }
.scarcity-meter { margin-bottom: 10px; }
.scarcity-meter-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}
.scarcity-meter-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--pink), var(--magenta));
  border-radius: 100px;
  box-shadow: 0 0 14px rgba(76, 175, 80, 0.7);
  transition: width 1.4s cubic-bezier(.22,.61,.36,1);
}
.scarcity-meter-labels { display: flex; align-items: baseline; gap: 8px; }
.scarcity-meter-labels strong { font-family: var(--font-display); font-size: 26px; }
.scarcity-meter-labels span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--text-mute); text-transform: uppercase; }
.scarcity-recent { font-family: var(--font-mono); font-size: 12px; color: #38f3a8; margin-bottom: 22px; }
.scarcity-cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 820px) {
  .liveproof-grid { grid-template-columns: 1fr; }
  .activity-feed { height: 260px; }
}

/* ===== STICKY BOTTOM CTA ===== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.sticky-cta.show { transform: translateY(0); pointer-events: auto; }
.sticky-cta-inner {
  max-width: 980px;
  margin: 0 auto 14px;
  padding: 12px 16px 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(10, 4, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(76, 175, 80, 0.18);
}
.sticky-cta-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #38f3a8;
  flex-shrink: 0;
}
.sticky-cta-live .hero-live-count { font-size: 18px; }
.sticky-cta-text { flex: 1; font-size: 14.5px; color: var(--text-dim); }
.sticky-cta-btn { flex-shrink: 0; }
@media (max-width: 680px) {
  .sticky-cta-inner { margin: 0 8px 8px; border-radius: 16px; gap: 12px; padding: 10px 12px; }
  .sticky-cta-text { display: none; }
  .sticky-cta-btn { margin-left: auto; }
}

/* Respect reduced motion for the new animated bits */
@media (prefers-reduced-motion: reduce) {
  .dorf-badge, .hero-dorf-logo, .announce-live-dot, .hero-live-dot, .dorf-live-dot { animation: none !important; }
  .activity-line { animation: none !important; }
}

/* ===== REGELWERK — category headings ===== */
.rule-cat {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 64px 0 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rules-grid + .rule-cat { margin-top: 72px; }
.rule-cat-num {
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--gradient-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: 1px solid var(--card-border);
}
.page-rules .rules .container > .rule-cat:first-of-type { margin-top: 8px; }

/* Easter egg — rendered as generated content so it stays out of the DOM text:
   visible but impossible to find via Ctrl+F or to select/copy. */
.egg-frucht { display: inline-block; }
.egg-frucht::after {
  content: "ananas";
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-mute);
  opacity: 0.14;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ===== PREMIUM-CUT: calmer hero trust line + a touch more breathing room ===== */
.hero-trust {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 2px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.zoom-canvas.intro-ready .hero-trust { opacity: 1; transform: none; transition-delay: 1.25s; }

/* A bit more vertical rhythm now that there are fewer, stronger sections */
.transfer-list { margin-bottom: 0; }
.dorf-claim { margin-top: 6px; }

/* ============= WEB PANEL (panel.dorfleben.gg) ============= */
.wp-sec { position: relative; overflow: hidden; }
.wp-bg { position: absolute; inset: 0; pointer-events: none; }
.wp-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .4; }
.wp-orb-1 { width: 520px; height: 520px; background: var(--pink, #4caf50); top: -160px; right: -120px; }
.wp-orb-2 { width: 480px; height: 480px; background: var(--cyan, #fbd9a1); bottom: -180px; left: -120px; opacity: .25; }
.wp-grid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; position: relative; z-index: 2; margin-top: 20px; }
.wp-phone { justify-self: center; width: 300px; height: 600px; border-radius: 46px; padding: 14px;
  background: linear-gradient(160deg, #16121f, #0a0710); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -20px rgba(76,175,80,.5), inset 0 0 0 6px #05030a; animation: wpFloat 6s ease-in-out infinite; }
@keyframes wpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.wp-phone-screen { height: 100%; border-radius: 34px; overflow: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(76,175,80,.25), transparent 60%), linear-gradient(180deg, #0e0a18, #07050d); }
.wp-pstatus { display: flex; justify-content: space-between; font-size: 12px; color: #cbb8d8; font-family: var(--font-mono, monospace); }
.wp-pcard { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px; }
.wp-pava { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, rgba(76,175,80,.3), rgba(0,255,245,.2)); }
.wp-pname { font-weight: 700; color: #fff; }
.wp-pjob { font-size: 12px; color: #b9a9c8; }
.wp-pmoney { display: flex; flex-direction: column; gap: 8px; }
.wp-pm { display: flex; justify-content: space-between; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 11px 14px; font-size: 14px; color: #c9bcd6; }
.wp-pm b { color: #fff; } .wp-pm b.g { color: #7CFF9B; } .wp-pm b.y { color: #fbd9a1; }
.wp-papps { margin-top: auto; display: flex; justify-content: space-around; font-size: 26px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; }
.wp-feats { display: flex; flex-direction: column; gap: 20px; }
.wp-feat { display: flex; gap: 16px; align-items: flex-start; }
.wp-fic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: linear-gradient(135deg, rgba(76,175,80,.18), rgba(76,175,80,.14)); border: 1px solid rgba(255,255,255,.12); }
.wp-feat h3 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 24px; letter-spacing: .02em; margin: 0 0 4px; text-transform: uppercase; }
.wp-feat p { margin: 0; color: var(--text-dim, #b9b0cf); font-size: 15px; line-height: 1.55; }
.wp-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; position: relative; z-index: 2; }
.wp-cta-note { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 2px; color: var(--text-dim, #b9b0cf); text-transform: uppercase; }
@media (max-width: 900px) { .wp-grid { grid-template-columns: 1fr; gap: 40px; } .wp-phone { width: 260px; height: 520px; } }

/* ============= NAV: Mein-Panel-Button (auffaellig, cyan-glow) ============= */
.nav-links-panel .panel-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 100px; font-weight: 800; font-size: 12.5px; letter-spacing: .03em; color: #04141a; background: linear-gradient(135deg, #fbd9a1, #36a3ff); box-shadow: 0 0 0 0 rgba(0,255,245,.5); animation: panelGlow 2.4s ease-in-out infinite; transition: transform .15s ease, filter .2s ease; }
.nav-links-panel .panel-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.panel-btn-ic { font-size: 15px; }
.panel-btn-badge { background: rgba(4,20,26,.22); font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 6px; letter-spacing: .12em; }
@keyframes panelGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(0,255,245,0); } 50% { box-shadow: 0 0 20px 1px rgba(0,255,245,.55); } }

/* ============= FEATURES-SEKTION ============= */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; }
@media (max-width: 1024px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-card { position: relative; padding: 28px 26px; border-radius: 20px; background: var(--card, rgba(255,255,255,.035)); border: 1px solid var(--card-border, rgba(255,255,255,.09)); overflow: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s; }
.feat-card:hover { transform: translateY(-6px); border-color: var(--pink, #4caf50); }
.feat-card::after { content: ''; position: absolute; inset: -2px; background: var(--gradient-vice, linear-gradient(135deg, #40741d, #fbd9a1)); opacity: 0; filter: blur(24px); z-index: -1; transition: opacity .4s ease; }
.feat-card:hover::after { opacity: .22; }
.feat-ic { width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px; border-radius: 16px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(76,175,80,.16), rgba(0,255,245,.12)); border: 1px solid rgba(255,255,255,.12); }
.feat-card h3 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 23px; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 9px; }
.feat-card p { margin: 0; color: var(--text-dim, #b9b0cf); font-size: 14.5px; line-height: 1.6; }

/* Featureliste aus features.json: Gruppen (Tiers) + Badges + Hot-Hervorhebung */
.feat-groups { display: flex; flex-direction: column; gap: 38px; }
.feat-group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.feat-group-title { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 30px; letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.feat-group-sub { color: var(--text-dim, #b9b0cf); font-size: 14.5px; }
.feat-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 9px; }
.feat-card-top h3 { margin: 0; }
.feat-badge { font-family: var(--font-body, 'Space Grotesk', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #fff; background: var(--gradient-vice, linear-gradient(135deg, #40741d, #fbd9a1)); white-space: nowrap; }
.feat-card--hot { border-color: rgba(76,175,80,.4); }
.feat-card--hot::after { opacity: .14; }
.feat-card--hot .feat-ic { background: linear-gradient(135deg, rgba(76,175,80,.3), rgba(0,255,245,.22)); border-color: rgba(76,175,80,.45); }

/* ============================================================================
   STATSBACK – limitierte Willkommens-Aktion (Hero-Band)
   ========================================================================== */
.nav-statsback { color: var(--yellow, #fbd9a1) !important; font-weight: 700; }
.section.statsback { position: relative; }
.sb-card {
  position: relative; max-width: 940px; margin: 0 auto; text-align: center;
  padding: clamp(28px, 5vw, 56px); border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(76,175,80,.16), transparent 60%),
    linear-gradient(160deg, rgba(76,175,80,.10), rgba(8,2,26,.6) 55%, rgba(0,255,245,.06));
  border: 1px solid rgba(76,175,80,.28);
  box-shadow: 0 30px 90px rgba(76,175,80,.18);
}
.sb-flag-band {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  padding: 7px 18px; border-radius: 999px; font-family: var(--font-mono, 'Syncopate', monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #14040c;
  background: linear-gradient(135deg, #fbd9a1, #f0c674); box-shadow: 0 0 28px rgba(255,140,66,.45);
}
.sb-flag-dot { width: 8px; height: 8px; border-radius: 50%; background: #14040c; animation: pulse 1.4s infinite; }
.sb-title { margin: 6px 0 14px; line-height: .94; }
.sb-lead { max-width: 680px; margin: 0 auto 26px; color: var(--text-dim, #e1d5ff); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }
.sb-countdown { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 28px; }
.sb-countdown .countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 12px 8px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(76,175,80,.22); }
.sb-countdown .countdown-unit strong { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: clamp(30px, 5vw, 46px); line-height: 1;
  background: var(--gradient-hot, linear-gradient(135deg, #40741d, #e0a040)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-countdown .countdown-unit span { margin-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute, #9b8ed1); }
.sb-countdown .countdown-sep { font-size: 28px; color: rgba(76,175,80,.5); font-weight: 700; }
.sb-cd-end { margin: -10px auto 26px; font-family: var(--font-mono, 'Syncopate', monospace); font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: .06em; color: var(--text-dim, #e1d5ff); opacity: .92; }
.sb-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 34px; }
.sb-cta-sub { font-size: 13px; color: var(--text-mute, #9b8ed1); }
.sb-steps { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.sb-step { flex: 1; min-width: 200px; max-width: 260px; text-align: left; padding: 20px; border-radius: 18px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.sb-step-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%;
  font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 18px; color: #14040c; background: var(--yellow, #fbd9a1); }
.sb-step strong { display: block; margin-bottom: 6px; font-size: 16px; }
.sb-step span { color: var(--text-mute, #9b8ed1); font-size: 13.5px; line-height: 1.5; }
.sb-step-arrow { display: flex; align-items: center; font-size: 24px; color: rgba(76,175,80,.55); }
.sb-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sb-chip { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-dim, #e1d5ff);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.sb-faq { max-width: 760px; margin: 40px auto 0; }
.sb-faq-title { text-align: center; font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 30px; letter-spacing: .02em; margin-bottom: 18px; }
.sb-faq-item { padding: 16px 20px; margin-bottom: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.sb-faq-item summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 28px; }
.sb-faq-item summary::-webkit-details-marker { display: none; }
.sb-faq-item summary::after { content: '+'; position: absolute; right: 4px; top: -2px; font-size: 22px; color: var(--pink, #4caf50); transition: transform .2s; }
.sb-faq-item[open] summary::after { transform: rotate(45deg); }
.sb-faq-item p { margin: 12px 0 0; color: var(--text-dim, #e1d5ff); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 720px) {
  .sb-step-arrow { display: none; }
  .sb-step { max-width: none; }
}