/* ======================================================================
   VARIANT — MOBILE MMO
   Lords Mobile / Rise of Kingdoms / Call of Dragons store-page glossy.
   Royal blue, glowing gold, thick beveled buttons, soft drop shadows.
   Russo One display + Manrope body. Bright, playful, "tap-to-play" energy.
   ====================================================================== */

:root {
  --font-display: "Russo One", "Bebas Neue", sans-serif;
  --font-sub:     "Bebas Neue", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;

  --bg-0:    #0a1326;
  --bg-1:    #121a2e;
  --bg-2:    #1a2238;
  --line:    #2a3550;
  /* Warm-dark surface for cards/plates so they sit next to the hero's
     fireplace warmth instead of fighting it with bright royal blue. */
  --surface:    #161a23;
  --surface-2:  #1f2532;
  --brass:      #8a6a2a;
  --brass-soft: #6b5224;
  --ink:     #e8edff;
  --ink-soft:#a7b4d8;
  --dim:     #6c7aa3;

  --gold:    #f0c041;
  --gold-2:  #ffe278;
  --gold-dk: #a07a18;
  --royal:   #3a6cff;
  --royal-2: #6190ff;
  --royal-dk:#1a3a9c;
  --crimson: #e63955;
  --emerald: #2dd1a0;
}

body {
  font-family: var(--font-body);
  font-size: 1rem; color: var(--ink);
  background: linear-gradient(180deg, var(--bg-0), #050a18);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 55%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 55%);
}

/* ---------- NAV ---------- */
.site-nav {
  background: linear-gradient(180deg, rgba(10,19,38,.95), rgba(10,19,38,.55) 70%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
}
.brand-mark { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 60%, transparent)); }
.brand-wordmark {
  font-family: var(--font-display); letter-spacing: .04em;
  font-size: 1.15rem; color: var(--ink); text-transform: uppercase;
}
.brand-wordmark em {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-primary a {
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  color: var(--ink-soft); padding: .5rem 0; transition: color .2s;
}
.nav-primary a:hover { color: var(--gold-2); }

.style-switcher {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.4);
}
.style-switcher button, .style-switcher a {
  color: var(--ink-soft); font-family: var(--font-sub); font-size: .8rem;
  letter-spacing: .14em; border-radius: 999px;
}
.style-switcher button, .style-switcher a:hover { color: var(--ink); }
.style-switcher button[aria-selected="true"], .style-switcher a[aria-selected="true"] {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk));
  color: #1a1408; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 16px color-mix(in srgb, var(--gold) 50%, transparent);
}

.cta-discord {
  font-family: var(--font-display); letter-spacing: .04em; font-size: .85rem;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk));
  color: #1a1408; border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--gold-2) 70%, white 30%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 4px 0 var(--gold-dk),
    0 12px 28px rgba(240, 192, 65, .35);
}
.cta-discord:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 6px 0 var(--gold-dk),
    0 16px 36px rgba(240, 192, 65, .55);
}
.cta-discord:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 var(--gold-dk), 0 8px 20px rgba(240, 192, 65, .30); }

/* ---------- HERO ---------- */
.hero-bg-image { filter: contrast(1.05) saturate(1.18) brightness(1.02); }
/* 3D scene is already atmospheric; we only need a thin top/bottom fade so the
   nav and content bands read against the busiest parts of the scene. */
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(10,19,38,.32) 0%, rgba(10,19,38,0) 18%, rgba(10,19,38,0) 60%, rgba(10,19,38,.70) 100%);
}
.hero-vignette { background: none; }
.hero-frame { display: none; }

.hero-eyebrow-top {
  font-family: var(--font-sub); color: var(--gold-2); font-size: .85rem; letter-spacing: .25em;
  background: rgba(0,0,0,.45); padding: .55rem 1.2rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  backdrop-filter: blur(8px);
}
.eyebrow-rule { display: none; }

.btn { font-family: var(--font-display); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 14px; padding: 1.1rem 1.8rem; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk));
  color: #1a1408;
  border: 2px solid color-mix(in srgb, var(--gold-2) 70%, white 30%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(120, 80, 0, .4),
    0 5px 0 var(--gold-dk),
    0 14px 36px rgba(240, 192, 65, .5);
  position: relative;
}
.btn-primary::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  border-radius: 10px 10px 0 0; pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(120, 80, 0, .4), 0 7px 0 var(--gold-dk), 0 18px 44px rgba(240, 192, 65, .65); }
.btn-primary:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120, 80, 0, .4), 0 0 0 var(--gold-dk), 0 8px 24px rgba(240, 192, 65, .4); }

.btn-secondary {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 50%, var(--bg-0));
  color: var(--ink); border: 2px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.4), 0 4px 0 var(--bg-0), 0 8px 18px rgba(0,0,0,.4);
}
.btn-secondary:hover { transform: translateY(-2px); border-color: var(--royal-2); }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--ink); border: 2px solid var(--line); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: var(--gold-2); }

.hero-stats { padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--royal) 35%, transparent); }
.hero-stats strong {
  font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats strong small { font-size: .55em; }
.hero-stats span { font-family: var(--font-sub); font-size: .78rem; color: var(--ink-soft); letter-spacing: .14em; }

.hero-scroll { color: var(--gold-2); font-family: var(--font-sub); font-size: .75rem; letter-spacing: .2em; }

/* ---------- SECTIONS ---------- */
.kicker { font-family: var(--font-sub); font-size: .9rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-2); }
.section-head h2 {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.2rem); line-height: 1;
  color: var(--ink); letter-spacing: -.005em; text-transform: uppercase;
}
.section-head h2 em {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ornament { color: var(--royal-2); }

.who { background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.who .lead { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.7; color: var(--ink); font-weight: 500; }
.who p { font-family: var(--font-body); color: var(--ink-soft); line-height: 1.7; }
.who strong {
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}
.who em { font-style: italic; color: var(--ink); }

/* ---------- TOOLKIT — glossy gem panels ---------- */
.toolkit { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1) 60%, var(--bg-0));
  border: 2px solid var(--line);
  border-radius: 18px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  border-radius: 12px 12px 0 0; pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.4), 0 16px 40px rgba(240, 192, 65, .25); }
.card-num {
  font-family: var(--font-display); font-size: 1.3rem;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-glyph {
  width: 48px; height: 48px;
  background: linear-gradient(180deg, var(--royal-2), var(--royal-dk));
  border-radius: 12px; padding: 9px;
  border: 1px solid color-mix(in srgb, var(--royal-2) 80%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px rgba(58, 108, 255, .35);
  color: white;
}
.card h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.card p { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink-soft); flex: 1; }
.card p em { font-style: italic; color: var(--ink); }

.badge {
  font-family: var(--font-sub); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px; align-self: flex-start;
}
.badge-soon    { background: linear-gradient(180deg, var(--royal-2), var(--royal-dk)); color: white; box-shadow: 0 2px 8px rgba(58, 108, 255, .35); }
.badge-mvp     { background: linear-gradient(180deg, var(--emerald), color-mix(in srgb, var(--emerald) 50%, black)); color: white; box-shadow: 0 2px 8px rgba(45, 209, 160, .4); }
.badge-roadmap { background: linear-gradient(180deg, var(--crimson), color-mix(in srgb, var(--crimson) 60%, black)); color: white; box-shadow: 0 2px 8px rgba(230, 57, 85, .35); }

/* ---------- PLATES ---------- */
/* Plate images are AI-generated and very saturated; tone them so they sit
   next to the dim fireplace hero instead of blasting greens/blues. */
.plate-bg { filter: contrast(1.02) saturate(.72) brightness(.78); }
.plate-overlay-left  { background: linear-gradient(90deg, rgba(10,19,38,.92) 0%, rgba(10,19,38,.7) 30%, rgba(10,19,38,.2) 60%, transparent 100%); }
.plate-overlay-right { background: linear-gradient(270deg, rgba(10,19,38,.92) 0%, rgba(10,19,38,.7) 30%, rgba(10,19,38,.2) 60%, transparent 100%); }
.plate .kicker { color: var(--gold-2); }
.plate-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1;
  color: var(--ink); text-shadow: 0 4px 24px rgba(0,0,0,.85);
}
.plate-lead { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--ink); text-shadow: 0 2px 16px rgba(0,0,0,.8); }
.plate-tag { font-family: var(--font-sub); font-size: .85rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-2); margin-top: 1rem; }

.plate-quote {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--ink);
  text-shadow: 0 4px 24px rgba(0,0,0,.85);
  border-right: 4px solid var(--gold-2); padding-right: 1.5rem;
}
.plate-quote em {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal;
}
.plate cite { display: block; font-family: var(--font-sub); font-size: .85rem; letter-spacing: .14em; color: var(--gold); margin-top: 1rem; text-transform: uppercase; }

/* ---------- ROADMAP ---------- */
.roadmap { background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.timeline { padding-left: 0; }
.timeline li {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--line); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.4);
}
.milestone {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .04em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1408; padding: .5rem .9rem; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--gold-dk);
}
.timeline h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.timeline p { font-family: var(--font-body); color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin-top: .25rem; }
.when { font-family: var(--font-sub); font-size: .85rem; color: var(--gold-2); letter-spacing: .14em; }

/* ---------- STATS ---------- */
.stats { background: var(--bg-1); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.dashboard {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--line); padding: 1.5rem; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.4);
}
.dash-card {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.dash-card .label { font-family: var(--font-sub); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: .55rem; }
.dash-card .value {
  font-family: var(--font-display); font-size: 2.2rem; line-height: 1; display: block;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dash-card .value small { font-size: .55em; }
.delta { display: block; margin-top: .35rem; font-family: var(--font-body); font-weight: 500; font-size: .82rem; }
.delta.up { color: var(--emerald); } .delta.neutral { color: var(--ink-soft); }
.dash-card.chart .sparkline { color: var(--gold); margin-top: 1rem; }
.dash-card.list ul { margin-top: .75rem; font-size: .9rem; font-family: var(--font-body); font-weight: 500; }
.dash-card.list li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.dash-card.list li:last-child { border-bottom: none; }
.dash-card.list em { color: var(--ink-soft); font-style: normal; font-weight: 400; font-size: .82rem; }

/* ---------- CTA FINAL ---------- */
.cta-overlay {
  background:
    linear-gradient(180deg, rgba(10,19,38,.85) 0%, rgba(10,19,38,.5) 40%, rgba(10,19,38,.95) 100%),
    radial-gradient(ellipse at center, transparent 25%, rgba(58, 108, 255, .35) 100%);
}
.cta-bg { filter: contrast(1.05) saturate(1.18) brightness(1.05); }
.cta-final .kicker { color: var(--gold-2); }
.cta-final h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.7rem, 7vw, 6rem); line-height: 1;
  color: var(--ink); text-shadow: 0 4px 30px rgba(0,0,0,.85);
}
.cta-final h2 em {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-final p { font-family: var(--font-body); font-weight: 500; font-size: 1.15rem; color: var(--ink); text-shadow: 0 2px 16px rgba(0,0,0,.8); }
.cta-final p strong { color: var(--gold-2); font-family: var(--font-display); font-weight: 400; }

/* ---------- FOOTER ---------- */
.site-footer { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.footer-mark { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 50%, transparent)); }
.footer-wordmark { font-family: var(--font-display); letter-spacing: .04em; color: var(--ink); text-transform: uppercase; }
.footer-brand small { font-family: var(--font-body); color: var(--ink-soft); }
.footer-col h4 { font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-2); margin-bottom: .75rem; }
.footer-col a { font-family: var(--font-body); color: var(--ink-soft); font-size: .95rem; padding: .25rem 0; font-weight: 500; }
.footer-col a:hover { color: var(--gold-2); }
.footer-bar { border-top: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-body); font-size: .85rem; }
/* ---------- MORE SOUL — Campaign map ---------- */
.campaign-path { color: var(--gold-2); }
.node-banner {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .14em;
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk));
  color: #1a1408;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--gold-dk), 0 8px 16px rgba(240, 192, 65, .35);
}
.node {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--line);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.45);
  color: var(--ink);
}
.node:hover { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(240, 192, 65, .25); }
.node-icon {
  background: radial-gradient(circle at 30% 25%, var(--royal-2), var(--royal-dk) 75%);
  border-radius: 50%; padding: 12px;
  border: 2px solid color-mix(in srgb, var(--royal-2) 70%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(58, 108, 255, .4);
  color: var(--gold-2);
}
.node-meta h3 { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.node-desc { color: var(--ink-soft); }
.node-when { font-family: var(--font-sub); color: var(--gold-2); }

/* ---------- MORE SOUL — Herd pinboard ---------- */
.herd { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.officer {
  /* Warm-dark surface that sits next to the fireplace hero instead of
     punching the page with royal blue. */
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.5);
  color: var(--ink);
}
.officer:hover { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(240, 192, 65, .22); }
.who-line h3 { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.uid { color: var(--ink-soft); }
/* Role chips: unified gold/brass family. Only R5 gets the bright gold; every
   other role uses a muted brass — distinction by label, not by saturation. */
.role-r5        { background: linear-gradient(180deg, var(--gold-2), var(--gold-dk)); color: #1a1408; box-shadow: 0 2px 6px rgba(240, 192, 65, .35); }
.role-r4        { background: linear-gradient(180deg, var(--brass), var(--brass-soft)); color: #f3e6c2; box-shadow: 0 2px 6px rgba(138, 106, 42, .35); }
.role-diplomat,
.role-scout,
.role-recruiter { background: linear-gradient(180deg, var(--brass), var(--brass-soft)); color: #f3e6c2; box-shadow: 0 2px 6px rgba(138, 106, 42, .35); }
.power { color: var(--gold-2); }
.officer-quote { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }

/* ---------- MORE SOUL — Campfire ---------- */
.campfire { background: linear-gradient(180deg, var(--bg-0), var(--bg-1)); border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); }
.campfire .kicker { color: var(--gold-2); }
.campfire-text h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; color: var(--ink);
}
.campfire-text h2 em {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.campfire-quote .quote-mark { color: var(--gold); }
.campfire-quote p { font-family: var(--font-body); color: var(--ink); }
.campfire-quote strong { color: var(--gold-2); font-weight: 700; }
.campfire-quote em { color: var(--gold-2); }
.campfire-cite { color: var(--ink-soft); }
.campfire-meta strong { color: var(--gold-2); }
.campfire-meta span { color: var(--ink-soft); }
.campfire-art { border: 2px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.6); }

/* ====================================================================
   ASSEMBLED LAYOUT — rarity-color tinting on toolkit cards
   Inspired by in-game item tooltips (orange=legendary, purple=epic, etc.)
   Only paints the border + accent — preserves the Quick mosaic layout.
   ==================================================================== */

.card.rarity-common    { --r: var(--rarity-common); }
.card.rarity-uncommon  { --r: var(--rarity-uncommon); }
.card.rarity-rare      { --r: var(--rarity-rare); }
.card.rarity-epic      { --r: var(--rarity-epic); }
.card.rarity-legendary { --r: var(--rarity-legendary); }

.card[class*="rarity-"] {
  border-color: color-mix(in srgb, var(--r) 55%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 -3px 0 rgba(0,0,0,.4),
              0 8px 24px color-mix(in srgb, var(--r) 18%, rgba(0,0,0,.45));
  position: relative;
}
.card[class*="rarity-"]::before {
  content: ""; position: absolute; top: 14px; right: 16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--r);
  box-shadow: 0 0 12px var(--r), inset 0 1px 0 rgba(255,255,255,.5);
  pointer-events: none; z-index: 2;
}
.card[class*="rarity-"] .card-num { color: var(--r); }
.card[class*="rarity-"] .card-glyph { color: var(--r); }
.card[class*="rarity-"]:hover {
  border-color: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              inset 0 -3px 0 rgba(0,0,0,.4),
              0 16px 38px color-mix(in srgb, var(--r) 35%, transparent);
  transform: translateY(-3px);
}

/* Hero card keeps its premium treatment but with legendary glow */
.card.card-hero[class*="rarity-"] {
  border-color: color-mix(in srgb, var(--r) 65%, var(--line));
}
.card.card-hero[class*="rarity-"]::before {
  width: 11px; height: 11px; top: 18px; right: 20px;
  box-shadow: 0 0 18px var(--r), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ====================================================================
   v12 polish
   ==================================================================== */

/* Fix anchor jumps under fixed nav */
html { scroll-padding-top: 90px; }

/* Aba's avatar — real face crop instead of letter */
.avatar-photo {
  padding: 0 !important;
  background: linear-gradient(135deg, #f0c041, #a07a18) !important;
  border: 2px solid var(--gold-2) !important;
  box-shadow: 0 0 14px rgba(240, 192, 65, .4), inset 0 0 0 2px rgba(0,0,0,.25) !important;
  overflow: hidden;
}
.avatar-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  display: block;
}
.officer-with-photo {
  border-color: color-mix(in srgb, var(--gold) 65%, var(--line)) !important;
}
.officer-with-photo .who-line h3 {
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* MVP node active "you are here" — pulses, larger, brighter */
.node-active {
  z-index: 3;
}
.node-active .node-banner {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk)) !important;
  color: #1a1408 !important;
  font-size: 1.05rem !important;
  padding: .55rem 1.1rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 24px color-mix(in srgb, var(--gold) 65%, transparent), 0 6px 18px rgba(0,0,0,.4) !important;
  animation: mvp-pulse 2.4s ease-in-out infinite;
}
.node-active .node-icon {
  border-color: var(--gold-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 28px color-mix(in srgb, var(--gold) 60%, transparent) !important;
  transform: scale(1.08);
  color: var(--gold-2);
}
.node-active .node-meta h3 {
  color: var(--gold-2) !important;
}
@keyframes mvp-pulse {
  0%, 100% { transform: translateY(0);  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 24px color-mix(in srgb, var(--gold) 65%, transparent), 0 6px 18px rgba(0,0,0,.4); }
  50%      { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 38px color-mix(in srgb, var(--gold) 90%, transparent), 0 8px 22px rgba(0,0,0,.4); }
}
@media (prefers-reduced-motion: reduce) { .node-active .node-banner { animation: none; } }

/* Footer "(soon)" pseudo-links — visually distinct from real links */
.footer-soon {
  font-family: var(--font-body); color: var(--ink-soft); font-size: .9rem;
  padding: .25rem 0; opacity: .55; cursor: not-allowed;
  display: inline-flex; align-items: baseline; gap: .35em;
}
.footer-soon small {
  font-size: .72em; color: var(--gold-2); opacity: .7; text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}

/* Larger Aba signature in Manifesto — more handwritten character */
.who-signature {
  font-family: "Caveat", cursive !important;
  font-size: 2.2rem !important;
  color: var(--gold-2) !important;
  transform: rotate(-4deg);
  margin-top: 1.5rem !important;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* Hero secondary button — make it ghost vs primary's bevel */
.btn.btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(6px);
}
.btn.btn-secondary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--gold-2) !important;
  color: var(--gold-2) !important;
}

/* ============================================================
   PACKAGE C — Per-section temperature overlays
   Each section gets its own ambient "room" via a pseudo-element
   layer.  Overlays sit BEHIND content (z-index:0) and never
   capture pointer events.  Cards already have position:relative
   so they layer naturally above.
   ============================================================ */

.who.who-asym,
.toolkit,
.roadmap,
.herd,
.stats {
  position: relative;
  isolation: isolate; /* keep blend/stacking local to the section */
  overflow: hidden;   /* clip the soft radial glows at edges */
}

.who.who-asym > *,
.toolkit > *,
.roadmap > *,
.herd > *,
.stats > * {
  position: relative;
  z-index: 1;
}

/* Manifesto — warm ember/copper, hearth-side */
.who.who-asym::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%,
      rgba(240, 130, 50, .07) 0%,
      rgba(240, 130, 50, .035) 35%,
      transparent 70%);
}

/* Toolkit — cool steel/forge wash */
.toolkit::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(80, 130, 220, .055) 0%,
      rgba(80, 130, 220, .02)  55%,
      transparent 100%);
}

/* Roadmap — wilderness, muted forest from below */
.roadmap::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 95%,
      rgba(80, 140, 100, .06) 0%,
      rgba(80, 140, 100, .03) 40%,
      transparent 75%);
}

/* Herd — warm copper torch from center */
.herd::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 65% 70% at 50% 45%,
      rgba(220, 140, 80, .065) 0%,
      rgba(220, 140, 80, .03)  45%,
      transparent 78%);
}

/* Stats — burning fortress, deep crimson (NOT pink) */
.stats::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,
      rgba(180, 40, 40, .09) 0%,
      rgba(140, 30, 30, .045) 40%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(120, 25, 25, .03) 0%,
      transparent 50%,
      rgba(120, 25, 25, .04) 100%);
}

/* ============================================================
   PACKAGE D — Heading reveal on scroll (scroll-driven anim)
   Browsers without animation-timeline simply show the heading
   in its final state — no flash of invisible text because the
   keyframes only run when the timeline is supported.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes hoof-rise {
      from { opacity: 0; transform: translate3d(0, 24px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes hoof-rise-soft {
      from { opacity: 0; transform: translate3d(0, 18px, 0); letter-spacing: .35em; }
      to   { opacity: 1; transform: translate3d(0, 0, 0);    letter-spacing: .25em; }
    }

    @keyframes hoof-rise-dramatic {
      from { opacity: 0; transform: translate3d(0, 36px, 0) scale(.985); filter: blur(4px); }
      to   { opacity: 1; transform: translate3d(0, 0,  0) scale(1);     filter: blur(0); }
    }

    .section-head .kicker {
      animation: hoof-rise-soft .8s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .section-head h2 {
      animation: hoof-rise .9s cubic-bezier(.2,.7,.2,1) both;
      animation-delay: .1s; /* stagger after the kicker */
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    /* Manifesto title — slower, more cinematic reveal */
    .who-asym-headline .manifesto-title {
      animation: hoof-rise-dramatic 1.2s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
  }
}

/* Explicit safety net for reduced motion — make sure nothing
   ever stays invisible if a UA partially supports the timeline. */
@media (prefers-reduced-motion: reduce) {
  .section-head .kicker,
  .section-head h2,
  .who-asym-headline .manifesto-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ====================================================================
   v14 — DRAMA crank
   Stronger atmospheric overlays + CTA shimmer + signature handwriting
   + card 3D-tilt + ambient glow on key elements.
   ==================================================================== */

/* Crank atmosphere overlay opacities — was subtle, now visible */
.who.who-asym::before {
  background: radial-gradient(ellipse at 20% 25%, rgba(240, 130, 50, .18) 0%, rgba(240, 130, 50, .05) 35%, transparent 70%) !important;
}
.toolkit::before {
  background: linear-gradient(180deg, rgba(80, 130, 220, .10) 0%, rgba(40, 100, 200, .05) 100%) !important;
}
.roadmap::before {
  background: radial-gradient(ellipse at 50% 100%, rgba(80, 180, 100, .12) 0%, rgba(60, 140, 80, .04) 40%, transparent 75%) !important;
}
.herd::before {
  background: radial-gradient(ellipse at 50% 30%, rgba(220, 140, 80, .15) 0%, rgba(200, 110, 60, .05) 40%, transparent 75%) !important;
}
.stats::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200, 50, 50, .22) 0%, rgba(150, 30, 30, .08) 40%, transparent 75%),
    linear-gradient(180deg, rgba(60, 10, 10, .15) 0%, transparent 50%) !important;
}

/* Hero CTA — continuous gold sweep shimmer */
.btn.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 180, .55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: btn-shimmer 3.5s infinite;
  pointer-events: none;
}
@keyframes btn-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .btn.btn-primary::before { display: none; } }

/* Signature — animated as if being written */
.who-signature {
  position: relative;
  background: linear-gradient(90deg, var(--gold-2) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: sig-write 2s ease-out forwards;
  animation-delay: 0.3s;
  text-shadow: none !important;
}
@keyframes sig-write {
  to { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .who-signature { background-position: 0% 0; animation: none; }
}

/* Toolkit cards — 3D tilt on hover via :has, plus brighter rarity glow */
.card[class*="rarity-"] {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .35s;
  transform-style: preserve-3d;
}
.card[class*="rarity-"]:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),
              inset 0 -3px 0 rgba(0,0,0,.4),
              0 24px 50px color-mix(in srgb, var(--r) 50%, transparent),
              0 0 60px color-mix(in srgb, var(--r) 25%, transparent);
}
.card[class*="rarity-"]::before {
  /* gem dot — pulse stronger */
  width: 12px !important; height: 12px !important;
  animation: gem-pulse 2.4s ease-in-out infinite;
}
@keyframes gem-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .card[class*="rarity-"]::before { animation: none; }
  .card[class*="rarity-"]:hover { transform: translateY(-3px); }
}

/* Logo nav — subtle breathing glow */
.brand-mark {
  animation: logo-breathe 4s ease-in-out infinite;
}
@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 50%, transparent)); }
  50%      { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gold) 80%, transparent)) drop-shadow(0 0 4px var(--gold-2)); }
}

/* Hero stats numbers — ambient glow on the count-up values */
.hero-stats strong {
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 40%, transparent);
}

/* Last KvK 12.4M — big number gets slow pulsing radial glow behind */
.who-power-figure, .last-kvk-figure, .stats h2 + * strong, .stats .figure {
  text-shadow: 0 0 36px rgba(240, 192, 65, .45), 0 0 8px rgba(255, 220, 100, .3);
}

/* Scroll-cue arrow at hero bottom — pulse harder */
.hero-scroll {
  animation: scroll-cue 1.6s ease-in-out infinite;
}
@keyframes scroll-cue {
  0%, 100% { opacity: .55; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(4px); }
}

/* ====================================================================
   v15 — Cinematic video plate (seamless full-bleed)
   ==================================================================== */
.video-plate {
  position: relative;
  width: 100%;
  /* Full-bleed cinematic — keep 16:9 aspect-ish, but cap on tall screens */
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  overflow: hidden;
  background: var(--bg-0);
  isolation: isolate;
  z-index: 2;
}
.video-plate-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
/* Top + bottom dark gradients fade video into surrounding bg-0 sections */
.video-plate-fade-top {
  position: absolute; inset: 0 0 auto 0;
  height: 22%;
  background: linear-gradient(180deg, var(--bg-0) 0%, rgba(10,19,38,.55) 50%, transparent 100%);
  z-index: 1; pointer-events: none;
}
.video-plate-fade-bottom {
  position: absolute; inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(0deg, var(--bg-0) 0%, rgba(10,19,38,.55) 50%, transparent 100%);
  z-index: 1; pointer-events: none;
}

/* Mobile — keep aspect, just shorter */
@media (max-width: 600px) {
  .video-plate { max-height: 70vh; aspect-ratio: 4 / 5; }
  .video-plate-fade-top, .video-plate-fade-bottom { height: 18%; }
}

/* Reduced-motion — pause video for accessibility */
@media (prefers-reduced-motion: reduce) {
  .video-plate-bg { display: none; }
  .video-plate { background: linear-gradient(180deg, var(--bg-0), var(--bg-1), var(--bg-0)); min-height: 200px; }
}


/* ====================================================================
   v22 — Language switcher (EN/RU) — gold-pill segmented control
   ==================================================================== */
.lang-switch {
  display: inline-flex; align-items: center; gap: 0;
  padding: 3px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.4);
}
.lang-switch button {
  padding: .35rem .75rem;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: color .18s, background .18s, box-shadow .18s;
  cursor: pointer;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 50%, var(--gold-dk));
  color: #1a1408;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              0 0 14px color-mix(in srgb, var(--gold) 50%, transparent);
}

/* Brand without logo image — keep just wordmark */
.brand.brand-text-only {
  padding-left: .25rem;
}
.brand-text-only .brand-wordmark {
  font-size: 1.15rem;
}

/* Footer — when logo removed, brand col looks lighter */
.footer-brand {
  /* No image now — just text stack */
}

/* Mobile — keep lang-switch visible but smaller */
@media (max-width: 600px) {
  .lang-switch button { padding: .3rem .55rem; font-size: .68rem; letter-spacing: .08em; }
}

/* ====================================================================
   v27 — Pinboard layout for 11 officers (was 6)
   12-col grid: distribute as 4-4-4 / 4-4-4 / 4-4-4 / 6-6 (last row 2 wide)
   ==================================================================== */
.pinboard > .officer:nth-child(n+7) {
  grid-column: span 4;
  transform: rotate(var(--rot, 0deg)) translateY(0);
}
.pinboard > .officer:nth-child(n+7):hover {
  transform: rotate(0) translateY(-6px);
}
/* Cards 7-9: vary rotations slightly via per-instance --rot */
.pinboard > .officer:nth-child(8) { transform: rotate(var(--rot)) translateY(.6rem); }
.pinboard > .officer:nth-child(8):hover { transform: rotate(0) translateY(calc(.6rem - 6px)); }
.pinboard > .officer:nth-child(9) { transform: rotate(var(--rot)) translateY(-.4rem); }
.pinboard > .officer:nth-child(9):hover { transform: rotate(0) translateY(calc(-.4rem - 6px)); }

/* Last row — only 2 cards left (10 and 11). Balance them as 6+6 across 12 col grid. */
.pinboard > .officer:nth-child(10),
.pinboard > .officer:nth-child(11) {
  grid-column: span 6;
}
.pinboard > .officer:nth-child(10) { transform: rotate(var(--rot)) translateY(.5rem); }
.pinboard > .officer:nth-child(10):hover { transform: rotate(0) translateY(calc(.5rem - 6px)); }
.pinboard > .officer:nth-child(11) { transform: rotate(var(--rot)) translateY(-.5rem); }
.pinboard > .officer:nth-child(11):hover { transform: rotate(0) translateY(calc(-.5rem - 6px)); }

/* Mobile: stack cleanly */
@media (max-width: 720px) {
  .pinboard > .officer,
  .pinboard > .officer:nth-child(n) {
    grid-column: span 12;
    transform: none !important;
  }
}