/* ==========================================================================
   Veins of Aldûn — Crowdfunding site styles
   Tokens, type scale, layout, components.
   ========================================================================== */

:root {
  /* Backgrounds */
  --bg-deepest: #0E1A24;
  --bg-base: #1A2A38;
  --bg-elevated: #2C3E52;
  --bg-overlay: rgba(14, 26, 36, 0.92);

  /* Accents */
  --gold: #D4A537;
  --gold-bright: #E8B844;
  --gold-muted: rgba(212, 165, 55, 0.3);
  --gold-faint: rgba(212, 165, 55, 0.15);
  --gold-soft: rgba(212, 165, 55, 0.08);

  --cyan: #4DD0E1;
  --cyan-bright: #6FE0F0;

  /* Text */
  --text-bright: #E8E4D8;
  --text-body: #C9C0AC;
  --text-muted: #8B8478;

  /* Status */
  --status-success: #4CAF50;
  --status-warning: #F4B942;
  --status-critical: #C0392B;
  --status-info: #00BCD4;

  /* In-game UI accents (matched to mobile equipment ability panel) */
  --magenta: #E94090;
  --magenta-bright: #FF5BA8;
  --magenta-muted: rgba(233, 64, 144, 0.25);
  --accent-orange: #E89243;
  --positive-green: #5FCA5F;
  --ability-yellow: #E0C040;

  /* Fonts */
  --font-display: "Cinzel", "Cormorant SC", "Trajan Pro", Georgia, serif;
  --font-body: "Crimson Pro", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

  /* Layout */
  --reading-max: 720px;
  --wide-max: 1100px;
  --nav-h: 64px;
  --gutter: 24px;
}

/* ---------- reset / base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-deepest);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 150ms ease-out;
}
a:hover { color: var(--cyan-bright); }
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Prose link underline-from-left */
.wrap-reading p a,
.wrap-reading li a,
.faq-item p a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size 250ms ease-out, color 150ms ease-out;
  padding-bottom: 2px;
}
.wrap-reading p a:hover,
.wrap-reading li a:hover,
.faq-item p a:hover {
  background-size: 100% 1px;
}

/* Skip-to-content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 16px;
  background: var(--gold);
  color: var(--bg-deepest);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.06em;
  z-index: 999;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.04em;
}

h2 {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 40px 0 24px;
  position: relative;
}

h3 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.04em;
  margin: 48px 0 16px;
}

h4 {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.04em;
  margin: 32px 0 12px;
}

p {
  margin: 0 0 24px;
}

strong, b {
  color: var(--text-bright);
  font-weight: 600;
}

em, i { color: inherit; font-style: italic; }

blockquote.pull-quote {
  margin: 32px 0;
  padding: 8px 0 8px 24px;
  border-left: 4px solid var(--gold);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 32px;
  color: var(--text-bright);
}
blockquote.pull-quote p { margin: 0 0 12px; }
blockquote.pull-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

ul, ol { padding-left: 1.4em; margin: 0 0 24px; }
li { margin-bottom: 12px; }

.section-lede {
  color: var(--text-body);
  margin-bottom: 32px;
}

.h-small {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 24px;
  font-weight: 500;
}

/* ---------- layout containers ---------- */

main { display: block; }

section {
  padding: 80px 0;
  scroll-margin-top: 80px;
}

.wrap-reading {
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-wide {
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section dividers — Pattern A: gold rule with centre diamond */
hr.divider {
  border: 0;
  height: 24px;
  max-width: 320px;
  margin: 0 auto;
  position: relative;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23D4A537'><polygon points='6,1 11,6 6,11 1,6' opacity='0.7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
hr.divider::before,
hr.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(50% - 14px);
  background: linear-gradient(90deg, transparent, var(--gold-muted) 100%);
}
hr.divider::before { left: 0; }
hr.divider::after {
  right: 0;
  background: linear-gradient(90deg, var(--gold-muted), transparent);
}

.divider-dots {
  text-align: center;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: 0.6em;
  margin: 64px 0;
  font-size: 14px;
}

/* ---------- sticky nav ---------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-muted);
  z-index: 100;
}

.nav-inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.12em;
  text-decoration: none;
  /* Metallic gold gradient: highlight at top, main gold mid, deeper at base.
     NB: use background-image (not the shorthand) so background-clip below
     isn't reset to border-box by the shorthand. */
  background-image: linear-gradient(180deg, #F4D27A 0%, #D4A537 50%, #A07C29 100%);
  background-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: filter 200ms ease-out;
}
.wordmark:hover {
  text-decoration: none;
  filter: brightness(1.15) saturate(1.05);
}

.anchor-links {
  display: flex;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.anchor-links li { margin: 0; }
.anchor-links a {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-body);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.anchor-links a:hover { color: var(--gold); text-decoration: none; }
.anchor-links a.is-active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  margin: 5px auto;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  padding: calc(var(--nav-h) + 120px) 0 120px;
  text-align: center;
  background: var(--bg-deepest);
  border-bottom: 1px solid var(--gold-faint);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Layered hero atmosphere:
   1. base navy
   2. SVG placeholder composition (hex floor + hooded figure) at full-bleed
   3. radial vignette gradient that drifts (Style doc §4 optional motion)
   4. gold halo highlight at top
*/
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-bg.svg");
  background-size: cover;
  background-position: center;
  z-index: -2;
  opacity: 1;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(212, 165, 55, 0.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14, 26, 36, 0.65), transparent 70%);
  z-index: -1;
  animation: heroDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -1%) scale(1.04); }
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 64px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 16px;
  text-shadow: 0 2px 24px rgba(212, 165, 55, 0.15);
}

/* Subtitle spans the full visual width of the title above it.
   We use a flex row with two gold rules either side of the italic phrase,
   so the whole element matches the title's width without overshooting on
   small screens. */
.hero-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gold);
  margin: 4px auto 48px;
  letter-spacing: 0.16em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 720px;
  width: 100%;
}
.hero-subtitle em { color: inherit; font-style: italic; white-space: nowrap; }
.hero-subtitle::before,
.hero-subtitle::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-muted), var(--gold) 60%);
  opacity: 0.7;
  min-width: 32px;
}
.hero-subtitle::after {
  background: linear-gradient(90deg, var(--gold) 40%, var(--gold-muted), transparent);
}

.hero-lede {
  font-size: 20px;
  line-height: 32px;
  color: var(--text-body);
  max-width: 720px;
  margin: 0 auto 24px;
}

.hero-pillar {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 24px auto 48px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gold);
  color: var(--bg-deepest);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn-primary:hover {
  background: var(--gold-bright);
  color: var(--bg-deepest);
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.btn-secondary {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
  padding: 15px 30px;
}
.btn-secondary:hover {
  background: rgba(212, 165, 55, 0.1);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* ---------- at-a-glance ---------- */

.at-a-glance { padding: 64px 0; }

/* Illuminated-codex treatment.
   Each item gets a Roman numeral (I..VIII) in Cinzel display as a
   margin marker, the way an illuminated manuscript would mark its
   verses. Numerals are generated via CSS counter so the markup stays
   clean (no <svg> icons, no manual <span class="numeral">). */
.glance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  counter-reset: glance;
}
.glance-list li {
  margin: 0;
  padding: 22px 26px 22px 84px;
  background: linear-gradient(135deg,
    rgba(26, 38, 52, 0.6) 0%,
    rgba(14, 26, 36, 0.85) 100%);
  border: 1px solid var(--gold-faint);
  border-left: 2px solid var(--gold-muted);
  border-radius: 6px;
  font-size: 17px;
  line-height: 27px;
  position: relative;
  counter-increment: glance;
  transition:
    border-color 240ms ease-out,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms ease-out,
    background 240ms ease-out;
}
/* The illuminated Roman numeral marker — gold, Cinzel display, with
   a faint magenta shadow that echoes the title treatment elsewhere. */
.glance-list li::before {
  content: counter(glance, upper-roman);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  opacity: 0.78;
  text-shadow:
    0 0 14px rgba(212, 165, 55, 0.35),
    1px 1px 0 rgba(233, 64, 144, 0.20);
  transition:
    opacity 240ms ease-out,
    text-shadow 240ms ease-out,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Subtle vertical hairline between numeral and prose, like the rule
   that runs down a manuscript margin */
.glance-list li::after {
  content: "";
  position: absolute;
  left: 70px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--gold-faint) 30%,
    var(--gold-faint) 70%,
    transparent);
}
.glance-list li:hover {
  border-color: var(--gold-muted);
  border-left-color: var(--gold);
  transform: translateX(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg,
    rgba(36, 50, 66, 0.7) 0%,
    rgba(18, 30, 42, 0.9) 100%);
}
.glance-list li:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
  text-shadow:
    0 0 22px rgba(212, 165, 55, 0.55),
    1px 1px 0 rgba(233, 64, 144, 0.35);
}
.glance-list li em {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
.glance-list li a {
  color: var(--cyan);
  border-bottom: 1px solid rgba(85, 221, 238, 0.3);
  transition: border-color 200ms ease-out;
}
.glance-list li a:hover { border-bottom-color: var(--cyan); }

/* Mobile: tighten padding and shrink the numeral so it doesn't crowd
   the prose at narrow widths. */
@media (max-width: 720px) {
  .glance-list li { padding: 18px 20px 18px 64px; font-size: 16px; line-height: 25px; }
  .glance-list li::before { width: 54px; font-size: 22px; }
  .glance-list li::after { left: 54px; top: 22px; bottom: 22px; }
}

/* ---------- prose helpers ---------- */

.prose-list {
  padding-left: 0;
  list-style: none;
}
.prose-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}
.prose-list li::before {
  content: "▪";
  color: var(--gold);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
}

/* ---------- screen / log figures ---------- */

/* Phone-screenshot figures: multiple images sit side-by-side when there's
   room. Single images stay phone-sized so they don't fill the column. */
.screen-figure {
  margin: 36px 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  align-items: start;
}
.screen-figure img {
  border: 1px solid var(--gold-faint);
  border-radius: 14px;
  background: #000;
  padding: 4px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 320px;
  cursor: zoom-in;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
}
.screen-figure img:hover,
.screen-figure img:focus-visible {
  transform: translateY(-8px) scale(1.04);
  border-color: var(--gold);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(212, 165, 55, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .screen-figure img { transition: none; }
  .screen-figure img:hover,
  .screen-figure img:focus-visible { transform: none; }
}
/* When a figure has only a single image, centre it at phone width */
.screen-figure:has(> img:only-of-type) {
  grid-template-columns: 1fr;
  justify-items: center;
}

/* ---- Lightbox (screenshot click-to-enlarge) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 14, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 32px;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--gold-faint);
  border-radius: 14px;
  background: #000;
  padding: 6px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75);
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(14, 26, 36, 0.85);
  border: 1px solid var(--gold-faint);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(212, 165, 55, 0.18);
  border-color: var(--gold);
  outline: none;
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .lightbox__close { transition: none; }
  .lightbox__close:hover,
  .lightbox__close:focus-visible { transform: none; }
}

/* Combat-log frame: CRT monitor treatment.
   Source screenshots are full-desktop captures, so cap the frame
   to a sensible size and centre it within the wide container. */
.log-figure {
  margin: 40px auto;
  max-width: 820px;
  position: relative;
  padding: 14px;
  border: 1px solid var(--gold-muted);
  border-radius: 8px;
  background-color: #0a0806;
  background-image:
    linear-gradient(180deg, rgba(26, 20, 16, 0.6) 0%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 12px 36px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(212, 165, 55, 0.08);
}
/* tiny corner studs to suggest a bezel */
.log-figure::before,
.log-figure::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-muted);
  opacity: 0.5;
}
.log-figure::before { top: 6px; left: 6px; }
.log-figure::after  { top: 6px; right: 6px; }

.log-figure img {
  border-radius: 4px;
  background: #000;
  display: block;
  width: 100%;
  position: relative;
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(212, 165, 55, 0.2);
}

/* Combat Log page header — styled to read as part of the Dungeon Tester
   terminal output. Echoes the ===== banner pattern used throughout the
   actual log content (e.g. "DUNGEON CLEARED: ..."), so the title feels
   continuous with what's printed below it rather than a generic page heading.
   Wrapping the h2 in <header class="cl-header"> also takes it out of the
   .wrap-wide > h2:first-child selector, which suppresses the site-wide
   gold flourish rule that would otherwise render above it. */
.cl-header {
  margin: 0 0 32px;
  text-align: center;
}
.cl-rule {
  height: 0;
  border-top: 2px double var(--gold);
  opacity: 0.55;
}
.cl-title {
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 16px 0;
  text-shadow: 0 0 28px rgba(212, 165, 55, 0.25);
}
.cl-lede {
  margin: 18px auto 0;
  max-width: 760px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 24px;
  color: var(--text-muted);
}
.cl-lede .cl-comment {
  color: var(--cyan);
  opacity: 0.75;
}

.log-figure figcaption {
  margin-top: 14px;
  padding: 0 4px;
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-muted);
  text-align: center;
}

/* Terminal-text excerpt block (the Style Doc §3 spec — true black, JetBrains
   Mono, gold-muted border, CRT inset shadow). Used to render Dungeon Tester
   log excerpts as stylised terminal text alongside the source screenshot. */
.log-pre {
  margin: 0;
  padding: 16px 18px;
  background: #000000;
  border: 1px solid var(--gold-muted);
  border-radius: 4px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-bright);
  overflow-x: auto;
  white-space: pre;
  -webkit-font-smoothing: antialiased;
}
.log-pre code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* Wrap a .log-pre with a caption underneath. */
.log-excerpt {
  margin: 32px 0 40px;
}
.log-excerpt figcaption {
  margin-top: 10px;
  padding: 0 4px;
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

/* Small build/run-summary grid used at the top of the page. */
.run-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0 8px;
}
.run-meta__item {
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-faint);
  border-radius: 6px;
}
.run-meta__label {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.run-meta__value {
  font-family: "Rajdhani", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-bright);
}

/* ---------- What Makes It Different cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.card {
  background: var(--bg-elevated);
  padding: 32px;
  border-radius: 8px;
  border: 1px solid var(--gold-faint);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: border-color 300ms ease-out, transform 300ms ease-out, box-shadow 300ms ease-out;
}
.card:hover {
  border-color: var(--gold-muted);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.card h3 {
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 16px;
  color: var(--gold);
}
.card p {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-body);
  margin: 0;
}

/* ---------- MMO page tables ---------- */

.mmo-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-base);
  border: 1px solid var(--gold-faint);
  border-radius: 6px;
  overflow: hidden;
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  margin: 20px 0 28px;
}
.mmo-table th,
.mmo-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gold-faint);
  vertical-align: top;
}
.mmo-table th {
  background: var(--bg-elevated);
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.mmo-table tbody tr:last-child td { border-bottom: none; }
.mmo-table tbody tr:hover { background: rgba(212, 165, 55, 0.04); }

/* ---------- Premium callout + table ---------- */

.premium-callout {
  background: var(--bg-elevated);
  padding: 40px;
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  margin: 32px 0;
}
.premium-callout h3 { margin-top: 0; }

.table-scroll {
  overflow-x: auto;
  margin: 24px 0;
}
.premium-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-base);
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  overflow: hidden;
  font-size: 16px;
}
.premium-table th,
.premium-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--gold-faint);
}
.premium-table thead th {
  background: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.premium-table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-bright);
}
.premium-table tbody tr:last-child th,
.premium-table tbody tr:last-child td { border-bottom: none; }
.premium-table tbody tr:hover {
  background: rgba(212, 165, 55, 0.04);
}

/* ---------- Tier cards (illuminated-rank treatment) ----------
   Each tier reads as a rank in an order: Roman-numeral marker on the
   left, name + price in a typeset header, escalating intensity from
   Witness (I) to Sundering Prophet (VIII), wax-seal ornaments on the
   three capped tiers, and a radiant treatment on the top tier. */

.tier-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 40px 0;
  counter-reset: tier;
}

.tier-card {
  background: linear-gradient(135deg,
    rgba(26, 38, 52, 0.55) 0%,
    var(--bg-elevated) 55%,
    rgba(18, 28, 40, 0.85) 100%);
  padding: 36px 40px 36px 110px;
  border-radius: 8px;
  border: 1px solid var(--gold-muted);
  border-left: 3px solid var(--gold-muted);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
  transition:
    border-color 320ms ease-out,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 320ms ease-out,
    background 320ms ease-out;
  position: relative;
  overflow: hidden;
  counter-increment: tier;
}
.tier-card:hover {
  border-color: var(--gold);
  border-left-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg,
    rgba(36, 50, 66, 0.65) 0%,
    var(--bg-elevated) 55%,
    rgba(24, 34, 48, 0.92) 100%);
}

/* Roman numeral rank marker in the left margin.
   Generated via CSS counter so the markup stays clean. Intensity
   escalates per tier via the nth-child overrides below. */
.tier-card::before {
  content: counter(tier, upper-roman);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  opacity: 0.55;
  text-shadow:
    0 0 14px rgba(212, 165, 55, 0.30),
    1px 1px 0 rgba(233, 64, 144, 0.15);
  transition:
    opacity 320ms ease-out,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    text-shadow 320ms ease-out;
}
.tier-card:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}
/* Subtle vertical hairline between the numeral and the prose. */
.tier-card::after {
  content: "";
  position: absolute;
  left: 92px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--gold-faint) 30%,
    var(--gold-faint) 70%,
    transparent);
}

/* Per-rank numeral intensity — escalates Witness to Sundering Prophet */
.tier-list .tier-card:nth-child(1)::before { opacity: 0.40; }
.tier-list .tier-card:nth-child(2)::before { opacity: 0.50; }
.tier-list .tier-card:nth-child(3)::before { opacity: 0.60; }
.tier-list .tier-card:nth-child(4)::before { opacity: 0.70; }
.tier-list .tier-card:nth-child(5)::before { opacity: 0.78; }
.tier-list .tier-card:nth-child(6)::before {
  opacity: 0.88;
  text-shadow: 0 0 18px rgba(212, 165, 55, 0.50),
               1px 1px 0 rgba(233, 64, 144, 0.25);
}
.tier-list .tier-card:nth-child(7)::before {
  opacity: 0.96;
  text-shadow: 0 0 22px rgba(212, 165, 55, 0.60),
               1px 1px 0 rgba(233, 64, 144, 0.35);
}
.tier-list .tier-card:nth-child(8)::before {
  opacity: 1;
  color: var(--gold-bright);
  text-shadow: 0 0 28px rgba(232, 184, 68, 0.75),
               0 0 12px rgba(233, 64, 144, 0.45),
               1px 1px 0 rgba(233, 64, 144, 0.40);
}

/* Header row: tier name + price, separated by a hairline + small lozenge */
.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  position: relative;
}
.tier-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-faint) 20%,
    var(--gold-muted) 50%,
    var(--gold-faint) 80%,
    transparent 100%);
}
.tier-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  text-shadow: 0 0 14px rgba(212, 165, 55, 0.20);
}
.tier-price {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 44px;
  font-weight: 600;
  background: linear-gradient(180deg,
    #F4D87C 0%,
    var(--gold) 55%,
    #A87F22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 8px rgba(212, 165, 55, 0.30));
  letter-spacing: 0.02em;
}

/* Limited-tier badge — styled like a small wax-seal label.
   Sits below the name on a row of its own (width:100% flex break). */
.tier-cap {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  background: rgba(233, 64, 144, 0.08);
  border: 1px solid rgba(233, 64, 144, 0.4);
  padding: 4px 10px;
  border-radius: 2px;
  width: auto;
  margin-top: 0;
}

/* Premium-time row */
.tier-premium {
  font-size: 17px;
  color: var(--text-bright);
  margin-bottom: 20px;
}
.tier-premium strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 10px;
  padding: 3px 8px;
  background: rgba(212, 165, 55, 0.08);
  border: 1px solid var(--gold-faint);
  border-radius: 2px;
}

/* "Everything in the previous tier +" label */
.tier-adds-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 600;
  opacity: 0.85;
}

/* Bullet list with gold lozenge markers */
.tier-adds {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tier-adds li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 25px;
  color: var(--text-body);
}
.tier-adds li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.75;
  box-shadow: 0 0 6px rgba(212, 165, 55, 0.4);
}
.tier-adds li em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}

/* Capped tiers — wax-seal corner ornament + deeper card background.
   The seal sits in the top-right corner as a small circular sigil. */
.tier-card:has(.tier-cap) {
  background: linear-gradient(135deg,
    rgba(50, 30, 38, 0.7) 0%,
    var(--bg-elevated) 50%,
    rgba(26, 18, 30, 0.9) 100%);
}
.tier-card:has(.tier-cap)::before {
  /* Brighten numerals on capped tiers slightly more */
  text-shadow: 0 0 22px rgba(233, 64, 144, 0.30),
               0 0 14px rgba(212, 165, 55, 0.40);
}

/* Sundering Prophet — full radiant treatment.
   Gold-leaf border, gradient backing, magenta-and-gold corner glow,
   slow breathing pulse on the border itself. */
.tier-card--prophet {
  border: 2px solid var(--gold) !important;
  background: linear-gradient(135deg,
    rgba(60, 45, 22, 0.72) 0%,
    rgba(40, 28, 14, 0.85) 30%,
    var(--bg-elevated) 55%,
    rgba(40, 16, 50, 0.65) 100%) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(232, 184, 68, 0.25),
    0 0 40px rgba(212, 165, 55, 0.12) inset;
  animation: prophetBreath 4s ease-in-out infinite alternate;
}
.tier-card--prophet .tier-name {
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(232, 184, 68, 0.50),
               0 0 12px rgba(233, 64, 144, 0.30);
}
.tier-card--prophet .tier-price {
  background: linear-gradient(180deg,
    #FBE898 0%,
    #E8C265 50%,
    #B68A28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(232, 184, 68, 0.55));
}
.tier-card--prophet::after {
  /* Radiant corner glow — replaces the hairline divider on this tier */
  content: "";
  position: absolute;
  bottom: -30%;
  right: -10%;
  width: 70%;
  height: 130%;
  background: radial-gradient(circle,
    rgba(212, 165, 55, 0.18) 0%,
    rgba(233, 64, 144, 0.08) 35%,
    transparent 65%);
  pointer-events: none;
  left: auto;
  top: auto;
}
@keyframes prophetBreath {
  0%   { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                     0 0 0 1px rgba(232, 184, 68, 0.20),
                     0 0 40px rgba(212, 165, 55, 0.12) inset; }
  100% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55),
                     0 0 0 1px rgba(232, 184, 68, 0.45),
                     0 0 56px rgba(212, 165, 55, 0.22) inset,
                     0 0 36px rgba(233, 64, 144, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tier-card--prophet { animation: none !important; }
}

/* ---------- Roadmap progress bars ---------- */

.progress-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  display: grid;
  gap: 20px;
}
.progress-item {
  margin: 0;
  padding: 20px 24px;
  background: var(--bg-base);
  border: 1px solid var(--gold-faint);
  border-radius: 6px;
}
.progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.progress-label {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  font-weight: 500;
}
.progress-value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.progress-bar {
  height: 6px;
  background: rgba(212, 165, 55, 0.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.progress-bar > span {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 8px rgba(232, 184, 68, 0.45);
  border-radius: 3px;
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-note {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-body);
  margin: 12px 0 0;
}
.progress-note strong { color: var(--text-bright); }

.progress-summary {
  background: var(--bg-elevated);
  padding: 24px 28px;
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  margin: 32px 0;
  font-size: 17px;
  line-height: 26px;
}
.progress-summary strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- FAQ ---------- */

.faq-list { margin-top: 32px; }
.faq-item {
  background: var(--bg-base);
  border: 1px solid var(--gold-faint);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  font-weight: 500;
  position: relative;
  padding-right: 56px;
  transition: color 150ms ease-out, background 150ms ease-out;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1;
  transition: transform 200ms ease-out;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--gold); }
.faq-item[open] summary { color: var(--gold); border-bottom: 1px solid var(--gold-faint); }
.faq-item p {
  padding: 16px 24px 24px;
  margin: 0;
  color: var(--text-body);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-deepest);
  border-top: 1px solid var(--gold-faint);
  padding: 56px 0 28px;
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}

/* Top-strip: seal + wordmark, anchors the footer with brand presence. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--gold-faint);
}
.footer-seal-mark {
  width: 64px;
  height: 64px;
  opacity: 0.85;
  flex-shrink: 0;
}
.footer-wordmark {
  /* Inherits the gold gradient from .wordmark; size up a touch for footer presence. */
  font-size: 22px;
  letter-spacing: 0.14em;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 36px;
}
.footer-col h3 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  font-weight: 500;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.5;
}
.footer-col .meta, .footer-col .soon {
  color: var(--text-muted);
  font-style: italic;
}
.copyright {
  border-top: 1px solid var(--gold-muted);
  padding-top: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Sticky CTA — illuminated gold-leaf seal ---------- */

.sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 18px 32px 18px 26px;

  /* Gold-leaf gradient body, like the tier prices and hero title */
  background: linear-gradient(180deg,
    #F4D87C 0%,
    var(--gold) 55%,
    #A87F22 100%);
  color: #1a1308;

  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.4);

  display: inline-flex;
  align-items: center;
  gap: 14px;

  border: 1px solid rgba(232, 184, 68, 0.7);
  border-radius: 6px;

  /* Multi-layer depth: outer drop, gold halo, inset highlight */
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(232, 184, 68, 0.35),
    0 0 28px rgba(212, 165, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms ease-out,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease-out,
    background 220ms ease-out;
  animation: ctaPulse 4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* Small gold-on-dark lozenge marker before the text — echoes the
   heraldic ornaments used elsewhere on the page. */
.sticky-cta::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #1a1308;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(255, 240, 180, 0.4) inset;
  flex-shrink: 0;
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta:hover {
  background: linear-gradient(180deg,
    #FFE699 0%,
    #F4D87C 55%,
    #C19530 100%);
  color: #1a1308;
  text-decoration: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(232, 184, 68, 0.7),
    0 0 44px rgba(212, 165, 55, 0.6),
    0 0 60px rgba(233, 64, 144, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.sticky-cta:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* Heartbeat halo: the glow pulses lub-dub while the button itself
   stays still (so the page never appears to twitch). Same rhythm as
   the hero planet so the page reads as having one pulse. */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(232, 184, 68, 0.35),
      0 0 24px rgba(212, 165, 55, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
  9% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(232, 184, 68, 0.6),
      0 0 48px rgba(212, 165, 55, 0.65),
      0 0 64px rgba(233, 64, 144, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
  18% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(232, 184, 68, 0.40),
      0 0 28px rgba(212, 165, 55, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
  31% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(232, 184, 68, 0.50),
      0 0 36px rgba(212, 165, 55, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
  40% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(232, 184, 68, 0.35),
      0 0 24px rgba(212, 165, 55, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  }
}

/* ---------- section reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .anchor-links { gap: 20px; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --nav-h: 56px;
  }

  body { font-size: 16px; line-height: 26px; }

  section { padding: 56px 0; }

  h2 { font-size: 28px; line-height: 36px; margin: 48px 0 20px; }
  h3 { font-size: 22px; line-height: 30px; margin: 36px 0 12px; }

  .hero { padding: calc(var(--nav-h) + 80px) 0 80px; }
  .hero-title { font-size: 40px; line-height: 48px; }
  .hero-subtitle { font-size: 18px; line-height: 28px; margin-bottom: 32px; }
  .hero-lede { font-size: 17px; line-height: 28px; }

  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px; }

  .premium-callout { padding: 24px; }
  .premium-table { font-size: 14px; }
  .premium-table th, .premium-table td { padding: 12px; }

  .tier-card { padding: 24px 22px 24px 76px; }
  .tier-card::before { left: 12px; width: 50px; font-size: 26px; }
  .tier-card::after { left: 62px; top: 22px; bottom: 22px; }
  .tier-name { font-size: 21px; line-height: 28px; letter-spacing: 0.06em; }
  .tier-price { font-size: 30px; line-height: 36px; }
  .tier-cap { font-size: 10px; }
  .tier-adds li { font-size: 15px; line-height: 23px; padding-left: 20px; }
  .tier-adds li::before { width: 6px; height: 6px; top: 9px; left: 4px; }

  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { gap: 14px; padding-bottom: 24px; margin-bottom: 28px; }
  .footer-seal-mark { width: 52px; height: 52px; }
  .footer-wordmark { font-size: 19px; letter-spacing: 0.12em; }

  /* Nav: collapse to hamburger */
  .nav-toggle { display: block; }
  .anchor-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-deepest);
    flex-direction: column;
    gap: 0;
    padding: 32px var(--gutter);
    transform: translateX(100%);
    transition: transform 250ms ease-out;
  }
  .anchor-links.is-open { transform: translateX(0); }
  .anchor-links li {
    border-bottom: 1px solid var(--gold-faint);
  }
  .anchor-links a {
    display: block;
    padding: 20px 0;
    font-size: 18px;
  }

  /* Sticky CTA tighter on mobile */
  .sticky-cta {
    bottom: 16px;
    right: 16px;
    padding: 14px 22px 14px 18px;
    font-size: 12px;
    gap: 10px;
    letter-spacing: 0.18em;
  }
  .sticky-cta::before { width: 7px; height: 7px; }
}

/* ---------- accessibility: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .sticky-cta { animation: none !important; }
  .hero::before { animation: none !important; }
}

/* ---------- focus-visible polish ---------- */

button:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.anchor-links a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.tier-card:focus-within {
  border-color: var(--cyan);
}

/* Underline-from-left disabled for navigation and tier-list anchors.
   (.wordmark deliberately excluded — it uses background-image for its
   gold-gradient text fill via background-clip: text.) */
.anchor-links a,
.footer-col a,
.tier-adds li a,
.feature-tab,
.weapon-tab {
  background-image: none !important;
}

/* ==========================================================================
   Features page: tab system + equipment ability cards
   ========================================================================== */

/* --- Top-level tabs (Abilities / Spells / Skillsets / Consumables) --- */

.feature-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--gold-faint);
  margin: 24px 0 32px;
  padding-bottom: 0;
}
.feature-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 16px 24px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}
.feature-tab:hover {
  color: var(--gold);
  background: rgba(212, 165, 55, 0.04);
}
.feature-tab[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.feature-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.feature-panel { display: none; }
.feature-panel.is-active { display: block; }

/* Pulse on newly added tabs (SSUC, IUC). Stops once the tab is selected. */
@keyframes featureTabPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 165, 55, 0);
    color: var(--text-muted);
  }
  50% {
    box-shadow: 0 0 14px 2px rgba(212, 165, 55, 0.35);
    color: var(--gold);
  }
}
#tab-ssuc:not([aria-selected="true"]),
#tab-iuc:not([aria-selected="true"]) {
  animation: featureTabPulse 2.4s ease-in-out infinite;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #tab-ssuc, #tab-iuc { animation: none !important; }
}

/* --- Sub-tabs (weapon families inside Abilities) --- */

.weapon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 6px;
  background: var(--bg-base);
  border-radius: 8px;
  border: 1px solid var(--gold-faint);
}
.weapon-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-body);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 4px;
  transition: color 150ms, background 150ms, border-color 150ms;
}
.weapon-tab:hover {
  color: var(--gold);
  background: rgba(212, 165, 55, 0.08);
}
.weapon-tab[aria-selected="true"] {
  color: var(--bg-deepest);
  background: var(--gold);
  border-color: var(--gold);
}
.weapon-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.weapon-panel { display: none; }
.weapon-panel.is-active { display: block; }

/* --- Equipment Ability card (matches in-game mobile UI style) ---
   Uses the in-game UI font stack: Rajdhani for headers/body, Quantico for
   the equipment name. */

.ability-card {
  position: relative;
  background: var(--bg-deepest);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 36px 40px 32px;
  margin: 0 0 32px;
  font-family: "Rajdhani", "Quantico", system-ui, sans-serif;
  box-shadow:
    0 0 0 1px rgba(212, 165, 55, 0.3),
    0 12px 36px rgba(0, 0, 0, 0.5),
    inset 0 0 60px rgba(212, 165, 55, 0.03);
}

.ability-card__heading {
  text-align: center;
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-faint);
}
.ability-name {
  margin: 0;
  font-family: "Quantico", "Rajdhani", system-ui, sans-serif;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--magenta-bright);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(233, 64, 144, 0.25);
}
.ability-subtitle {
  margin: 8px 0 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Brief equipment description, presented above the ability card as a
   prelude to the named-ability section. Larger font than body copy so it
   reads as a "what is this thing" lead-in. */
.weapon-prelude {
  margin: 0 0 26px;
  padding: 0 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 21px;
  line-height: 32px;
  font-weight: 400;
  color: var(--text-bright);
}

.ability-component {
  margin: 22px 0 0;
  font-family: "Rajdhani", sans-serif;
}
.ability-component__label {
  display: inline;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--magenta);
  text-transform: uppercase;
  margin-right: 8px;
}
.ability-component__body {
  display: inline;
  font-family: "Rajdhani", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ability-yellow);
}

/* --- Scales With (attribute badges) --- */
.ability-scaleswith {
  margin: 26px 0 0;
  padding: 14px 20px;
  background: rgba(85, 221, 238, 0.05);
  border: 1px solid rgba(85, 221, 238, 0.18);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: "Rajdhani", sans-serif;
}
.ability-scaleswith__heading {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--cyan);
  text-transform: uppercase;
}
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: "Chakra Petch", "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-badge--primary {
  background: rgba(238, 221, 85, 0.15);
  color: #eedd55;
  border: 1px solid rgba(238, 221, 85, 0.4);
}
.stat-badge--secondary {
  background: rgba(238, 221, 85, 0.08);
  color: #eedd55;
  border: 1px solid rgba(238, 221, 85, 0.3);
}
/* Mastery label box — styled to match the in-game "WEAPON" group tag:
   dark navy panel, uppercase white text, tight letter-spacing. */
.ability-scaleswith__note {
  background: var(--bg-deepest);
  color: var(--text-bright);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-left: auto;
  border: 1px solid rgba(85, 221, 238, 0.2);
}

/* --- Pros & Cons block --- */
.ability-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0 0;
}
.proscons-col {
  background: var(--bg-base);
  border-radius: 6px;
  padding: 18px 22px;
  border-left: 3px solid;
  font-family: "Rajdhani", sans-serif;
}
.proscons-col--pros {
  border-left-color: var(--positive-green);
  background: rgba(95, 202, 95, 0.04);
}
.proscons-col--cons {
  border-left-color: #ff5555;
  background: rgba(255, 85, 85, 0.04);
}
.proscons-col h4 {
  margin: 0 0 10px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proscons-col--pros h4 { color: var(--positive-green); }
.proscons-col--cons h4 { color: #ff7575; }
.proscons-col ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.proscons-col li {
  padding: 4px 0 4px 18px;
  position: relative;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-body);
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
}
.proscons-col--pros li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--positive-green);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}
.proscons-col--cons li::before {
  content: "−";
  position: absolute;
  left: 0;
  top: 4px;
  color: #ff7575;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}

.ability-scaling {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: rgba(233, 64, 144, 0.05);
  border-left: 3px solid var(--magenta);
  border-radius: 4px;
  font-family: "Rajdhani", sans-serif;
}
.ability-scaling__heading {
  margin: 0 0 10px;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--magenta);
  text-transform: uppercase;
  font-weight: 700;
}
.ability-scaling ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.ability-scaling li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--magenta);
}
.ability-scaling li::before {
  content: "▸";
  position: absolute;
  left: -2px;
  top: 0;
  color: var(--magenta);
  font-size: 12px;
}

.ability-bar {
  margin: 28px 0 0;
  padding: 18px 4px 8px;
}
.ability-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 12px;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-bright);
  text-transform: uppercase;
}
.ability-bar__label small {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 400;
}
.ability-bar__track {
  height: 8px;
  background: #1d3550;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ability-bar__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #B8932E 0%, var(--ability-yellow) 50%, var(--gold-bright) 100%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(232, 184, 68, 0.6);
}
.ability-bar__notches {
  display: flex;
  justify-content: space-between;
  margin: 10px 2px 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-bright);
}

.ability-endpoints {
  margin: 24px 0 0;
  padding: 18px 22px;
  background: rgba(232, 146, 67, 0.06);
  border-left: 3px solid var(--accent-orange);
  border-radius: 4px;
}
.ability-endpoints__heading {
  margin: 0 0 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--accent-orange);
  text-transform: uppercase;
  font-weight: 700;
}
.ability-endpoints ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.ability-endpoints li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--accent-orange);
}
.ability-endpoints li::before {
  content: "•";
  position: absolute;
  left: -2px;
  top: 0;
  color: var(--accent-orange);
}
.ability-endpoints .endpoint-range {
  color: var(--positive-green);
  font-weight: 700;
  font-family: "Chakra Petch", "Rajdhani", monospace;
}

.ability-note {
  margin: 18px 0 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
}

/* --- Masteries panel: grouped lists by category --- */

.mastery-group { margin: 0 0 32px; font-family: "Rajdhani", sans-serif; }
.group-tag {
  display: inline-block;
  background: var(--bg-deepest);
  color: var(--cyan);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid rgba(85, 221, 238, 0.3);
}
.mastery-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--bg-base);
  border: 1px solid var(--gold-faint);
  border-radius: 6px;
  overflow: hidden;
}
.mastery-row {
  padding: 16px 22px;
  border-bottom: 1px solid var(--gold-faint);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: baseline;
}
.mastery-row:last-child { border-bottom: none; }
.mastery-row:hover {
  background: linear-gradient(90deg, rgba(85, 221, 238, 0.04), transparent 60%), var(--bg-base);
}
.mastery-name {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.mastery-desc {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-body);
}

/* --- Attributes panel: grid of attribute cards --- */

.attribute-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 32px;
}
.attribute-card {
  background: var(--bg-elevated);
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  padding: 24px;
  font-family: "Rajdhani", sans-serif;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.attribute-card:hover {
  border-color: var(--gold-muted);
  transform: translateY(-2px);
}
.attribute-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold-faint);
}
.attribute-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(238, 221, 85, 0.15);
  color: #eedd55;
  border: 1px solid rgba(238, 221, 85, 0.4);
  padding: 7px 14px;
  border-radius: 4px;
  font-family: "Chakra Petch", "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  min-width: 64px;
  text-align: center;
}
.attribute-name {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.attribute-role {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-body);
}

/* --- General-info blocks for the non-Ability tabs --- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0 0 32px;
}
.info-block {
  background: var(--bg-elevated);
  border: 1px solid var(--gold-faint);
  border-radius: 8px;
  padding: 28px;
}
.info-block h3 {
  margin-top: 0;
  color: var(--gold);
  font-size: 22px;
}
.info-block p { color: var(--text-body); }
.info-block ul.examples {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.info-block ul.examples li {
  padding: 8px 0;
  border-top: 1px solid var(--gold-faint);
  font-size: 15px;
}
.info-block ul.examples li:first-child { border-top: none; padding-top: 0; }
.info-block ul.examples strong {
  color: var(--cyan);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* Responsive */
@media (max-width: 767px) {
  .ability-card { padding: 24px 20px 22px; }
  .ability-name { font-size: 24px; letter-spacing: 0.04em; }
  .ability-subtitle { font-size: 13px; letter-spacing: 0.12em; }
  .ability-component__label { font-size: 14px; }
  .ability-component__body { font-size: 15px; line-height: 24px; }
  .ability-scaleswith { padding: 12px 14px; gap: 8px; }
  .ability-scaleswith__heading { font-size: 12px; }
  .ability-scaleswith__note { margin-left: 0; width: 100%; font-size: 12px; }
  .stat-badge { font-size: 12px; padding: 4px 9px; }
  .ability-proscons { grid-template-columns: 1fr; gap: 12px; }
  .proscons-col { padding: 14px 16px; }
  .info-grid { grid-template-columns: 1fr; }
  .attribute-grid { grid-template-columns: 1fr; gap: 12px; }
  .mastery-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .feature-tab { padding: 12px 16px; font-size: 14px; }
  .weapon-tab { padding: 8px 12px; font-size: 12px; }
}


/* ============================================================== */
/* HOMEPAGE TAB NAVIGATOR — single-page tabbed layout              */
/* Three big chunky tabs (The Game / The Build / Back It) that    */
/* sit sticky below the nav. Designed to feel like illuminated    */
/* manuscript chapter markers, not the small button tabs used     */
/* on features.html. Distinct identity for the homepage.          */
/* ============================================================== */

.hp-tab-section {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: linear-gradient(180deg,
    rgba(14, 26, 36, 0.96),
    rgba(10, 19, 28, 0.96));
  border-top: 1px solid var(--gold-faint);
  border-bottom: 1px solid var(--gold-faint);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 0;
  margin: 64px 0 56px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 165, 55, 0.06) inset;
}

.hp-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hp-tab {
  appearance: none;
  background: linear-gradient(180deg,
    var(--bg-elevated),
    var(--bg-base));
  border: 1px solid var(--gold-muted);
  border-radius: 10px;
  padding: 22px 28px;
  font-family: var(--font-display);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 18px;
  transition:
    transform 220ms ease-out,
    border-color 220ms ease-out,
    color 220ms ease-out,
    box-shadow 220ms ease-out,
    background 220ms ease-out;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hp-tab:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.hp-tab:hover {
  border-color: var(--gold);
  color: var(--text-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* The active tab: gold border with glow, magenta inner highlight. */
.hp-tab[aria-selected="true"] {
  background: linear-gradient(135deg,
    rgba(212, 165, 55, 0.18) 0%,
    rgba(42, 31, 10, 0.4) 50%,
    rgba(26, 19, 8, 0.6) 100%);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold) inset,
    0 10px 30px rgba(212, 165, 55, 0.22),
    0 0 40px rgba(212, 165, 55, 0.12) inset;
  transform: translateY(-1px);
}
/* a faint magenta wash on the active tab */
.hp-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right,
      rgba(233, 64, 144, 0.18),
      transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.hp-tab__num {
  font-family: "Cinzel", serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  opacity: 0.5;
  min-width: 40px;
  text-align: center;
  line-height: 1;
  transition: opacity 220ms ease-out, text-shadow 220ms ease-out;
}
.hp-tab[aria-selected="true"] .hp-tab__num,
.hp-tab:hover .hp-tab__num {
  opacity: 1;
  text-shadow:
    0 0 12px rgba(212, 165, 55, 0.6),
    0 0 28px rgba(233, 64, 144, 0.25);
}

.hp-tab__label {
  font-family: "Cinzel", serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* The panels themselves: standard tabpanel show/hide. */
.hp-panel {
  display: none;
}
.hp-panel.is-active,
.hp-panel:not([hidden]) {
  display: block;
  animation: hpFadeIn 350ms ease-out;
}

@keyframes hpFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduce padding on small screens; stack the tabs vertically. */
@media (max-width: 720px) {
  .hp-tab-section { padding: 14px 0; margin: 32px 0 24px; }
  .hp-tabs { grid-template-columns: 1fr; gap: 8px; }
  .hp-tab { padding: 14px 18px; gap: 12px; }
  .hp-tab__num { font-size: 22px; min-width: 28px; }
  .hp-tab__label { font-size: 15px; letter-spacing: 0.10em; }
}

/* ============================================================== */
/* HERO REBUILD — magic, not silhouettes                           */
/* Replaces the hooded-figure SVG background with a layered        */
/* radial gradient mesh (gold halo + magenta + cyan glows) plus a  */
/* large slow-rotating Order Seal as the centrepiece. Title gets a */
/* gradient-gold fill with real glow. "Salvation by Steel" moves   */
/* to Cinzel uppercase with wide letter-spacing.                   */
/* ============================================================== */

/* (1) NEW HERO BACKGROUND — gradient mesh, no silhouette */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* central gold halo behind the title */
    radial-gradient(ellipse 60% 50% at 50% 38%,
      rgba(212, 165, 55, 0.22) 0%,
      rgba(212, 165, 55, 0.08) 35%,
      transparent 65%),
    /* magenta nebula upper-right */
    radial-gradient(ellipse 45% 40% at 78% 22%,
      rgba(233, 64, 144, 0.20) 0%,
      rgba(233, 64, 144, 0.06) 40%,
      transparent 70%),
    /* cyan nebula lower-left */
    radial-gradient(ellipse 45% 40% at 22% 78%,
      rgba(85, 221, 238, 0.16) 0%,
      rgba(85, 221, 238, 0.05) 40%,
      transparent 70%),
    /* deep navy base with subtle vertical fade */
    linear-gradient(180deg,
      #0a131c 0%,
      #131f2c 50%,
      #0a131c 100%);
  opacity: 1;
  animation: heroMesh 18s ease-in-out infinite alternate;
}

@keyframes heroMesh {
  0%   { transform: scale(1) translate(0, 0); filter: hue-rotate(0deg); }
  100% { transform: scale(1.05) translate(-12px, 8px); filter: hue-rotate(8deg); }
}

/* (2) LARGE ORDER SEAL BEHIND THE TITLE */
.hero::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vh, 720px);
  height: min(80vh, 720px);
  transform: translate(-50%, -50%);
  background: url("assets/order-seal.svg") center / contain no-repeat;
  opacity: 0.18;
  z-index: -1;
  pointer-events: none;
  animation: sealRotate 90s linear infinite, sealPulse 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 40px rgba(212, 165, 55, 0.25));
}

@keyframes sealRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sealPulse {
  0%   { opacity: 0.14; }
  100% { opacity: 0.24; }
}

/* (3) TITLE — gradient gold with multi-layered glow */
.hero-title {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1.05;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  /* gradient-gold text fill */
  background:
    linear-gradient(180deg,
      #F8DC85 0%,
      #E8C265 25%,
      #D4A537 55%,
      #A07A24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* multi-shadow glow for depth */
  filter:
    drop-shadow(0 0 32px rgba(212, 165, 55, 0.35))
    drop-shadow(0 2px 4px rgba(233, 64, 144, 0.25))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  text-shadow: none;
  margin: 0 0 16px;
  position: relative;
  z-index: 2;
}

/* (4) SUBTITLE "SALVATION BY STEEL" — Cinzel uppercase, wide spacing */
.hero-subtitle {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gold);
  margin: 10px auto 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 720px;
  text-shadow:
    0 0 18px rgba(212, 165, 55, 0.35),
    0 0 40px rgba(233, 64, 144, 0.20);
  position: relative;
  z-index: 2;
}
.hero-subtitle em {
  color: inherit;
  font-style: normal;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
/* refined flanking rules — thinner, more elegant */
.hero-subtitle::before,
.hero-subtitle::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 48px;
  background: linear-gradient(90deg, transparent, var(--gold) 80%);
  opacity: 0.55;
}
.hero-subtitle::after {
  background: linear-gradient(90deg, var(--gold) 20%, transparent);
}

/* (5) HERO LEDE — keep but add subtle text-shadow for legibility against the mesh */
.hero-lede {
  font-size: 21px;
  line-height: 32px;
  color: var(--text-bright);
  max-width: 720px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* (6) PILLAR LINE — make it feel like a manifesto */
.hero-pillar {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 32px auto 52px;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 14px rgba(212, 165, 55, 0.4);
}

/* (7) Ensure CTAs sit above the seal */
.hero-ctas {
  position: relative;
  z-index: 2;
}

/* Responsive scale-down for mobile */
@media (max-width: 720px) {
  .hero-title { font-size: 48px; letter-spacing: 0.12em; }
  .hero-subtitle { font-size: 13px; letter-spacing: 0.36em; gap: 16px; }
  .hero-lede { font-size: 17px; line-height: 28px; }
  .hero-pillar { font-size: 13px; letter-spacing: 0.18em; }
  .hero::after { width: 90vw; height: 90vw; opacity: 0.12; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after { animation: none !important; }
}

/* ============================================================== */
/* HERO PLANET — the beating heart of Aldûn                        */
/* A radiant sphere centred behind the hero text, with vein paths  */
/* extending outward to the edges. The whole system pulses on a    */
/* lub-dub heartbeat rhythm; the veins carry a flowing "blood"     */
/* effect via animated stroke-dashoffset. Replaces the rotating    */
/* Order Seal from the hero rebuild pass.                          */
/* ============================================================== */

/* Suppress the previous Order Seal ::after that the rebuild pass left in */
.hero::after { content: none !important; display: none !important; }

.hero-planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* Vignette behind the hero text — deepens the planet's centre without
   dimming the radiating veins at the edges. Sits between the planet
   (z-index -1) and the text content (z-index 2). */
.hero .hero-inner { position: relative; }
.hero .hero-inner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 50% 65% at center,
    rgba(10, 19, 28, 0.62) 0%,
    rgba(10, 19, 28, 0.30) 45%,
    transparent 72%
  );
  z-index: -1;
  pointer-events: none;
}

/* Heartbeat — proper medical lub-dub rhythm.
   Sharp S1 contraction (lub), brief release, even sharper smaller S2
   (dub), then a long diastole. 2.4s feels like a relaxed pulse. */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  5%   { transform: scale(1); }
  9%   { transform: scale(1.07); }       /* lub peak */
  14%  { transform: scale(1.01); }
  18%  { transform: scale(1); }
  28%  { transform: scale(1); }
  31%  { transform: scale(1.035); }      /* dub peak — smaller, sharper */
  36%  { transform: scale(1); }
  100% { transform: scale(1); }          /* long diastole rest */
}

.hero-planet .planet-halo {
  transform-origin: 800px 500px;
  transform-box: view-box;
  animation: heartbeat 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.hero-planet .planet {
  transform-origin: 800px 500px;
  transform-box: view-box;
  animation: heartbeat 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* Lightning storm inside the planet.
   Each `.bolt` group flashes with a primary strike, dim, after-strike,
   third flicker, then fade. Bolts last about 25% of their cycle so
   they overlap heavily — usually 2-4 are active, single-bolt moments
   are rare. The cycle is shorter (~3s) for a busier, denser storm. */
@keyframes lightningFlash {
  0%, 100% { opacity: 0; }
  1%       { opacity: 1; }     /* primary strike */
  5%       { opacity: 0.25; }
  8%       { opacity: 0.9; }   /* after-strike */
  12%      { opacity: 0.3; }
  16%      { opacity: 0.65; }  /* third flicker */
  22%      { opacity: 0.15; }
  28%      { opacity: 0; }
  98%      { opacity: 0; }
}
.hero-planet .lightning .bolt {
  opacity: 0;
  animation-name: lightningFlash;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1);
  transform-origin: 800px 500px;
  transform-box: view-box;
}
/* Tighter staggering and shorter cycles — 8 bolts spaced ~0.3s apart
   on cycles between 2.8s and 3.6s. With ~25% visible time per bolt,
   the storm averages 2-3 active strikes at any moment. */
.hero-planet .lightning .b1 { animation-delay: 0.0s;  animation-duration: 3.0s; }
.hero-planet .lightning .b2 { animation-delay: 0.3s;  animation-duration: 3.4s; }
.hero-planet .lightning .b3 { animation-delay: 0.6s;  animation-duration: 2.8s; }
.hero-planet .lightning .b4 { animation-delay: 0.9s;  animation-duration: 3.2s; }
.hero-planet .lightning .b5 { animation-delay: 1.2s;  animation-duration: 3.6s; }
.hero-planet .lightning .b6 { animation-delay: 1.5s;  animation-duration: 2.9s; }
.hero-planet .lightning .b7 { animation-delay: 1.8s;  animation-duration: 3.3s; }
.hero-planet .lightning .b8 { animation-delay: 2.1s;  animation-duration: 3.1s; }

/* Strike origin — the hot red dot at the planet's centre that every
   bolt radiates out from. Concentric circles fade from a soft outer
   halo (rgba red) to a hot white core in the centre. Pulses on its
   own slow rhythm so it always feels alive. */
@keyframes strikePulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 1; }
}
.hero-planet .strike-origin {
  transform-origin: 800px 500px;
  transform-box: view-box;
  animation: strikePulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 40, 40, 0.75))
          drop-shadow(0 0 28px rgba(255, 60, 30, 0.45));
}

/* Vein bodies — solid darker lines, no animation, just the
   "vessel walls" you see along the surface. */
.hero-planet .vein-bodies use {
  stroke-width: 2.2;
  opacity: 0.55;
}

/* Vein pulses — one bright travelling segment per vein.
   `stroke-dasharray` is set so only ONE visible segment exists at a
   time per vein; `stroke-dashoffset` animates it outward from the
   planet at a heartbeat-locked rhythm. The pulse is heavily blurred
   so it reads as a bulge of light moving through a vessel, not a
   dashed line. */
@keyframes pulseFlow {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: -1200; }
}
@keyframes pulseFade {
  0%, 100% { opacity: 0; }
  9%       { opacity: 1; }
  60%      { opacity: 0.6; }
  85%      { opacity: 0; }
}
.hero-planet .vein-pulses use {
  stroke-width: 3;
  stroke-dasharray: 70 1400;
  stroke-dashoffset: 100;
  animation:
    pulseFlow 2.4s cubic-bezier(0.35, 0.05, 0.25, 1) infinite,
    pulseFade 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Stagger each vein's pulse start so the blood radiates outward
   in waves, not in lockstep. */
.hero-planet .vein-pulses use:nth-child(1)  { animation-delay: 0.00s, 0.00s; }
.hero-planet .vein-pulses use:nth-child(2)  { animation-delay: 0.12s, 0.12s; }
.hero-planet .vein-pulses use:nth-child(3)  { animation-delay: 0.24s, 0.24s; }
.hero-planet .vein-pulses use:nth-child(4)  { animation-delay: 0.36s, 0.36s; }
.hero-planet .vein-pulses use:nth-child(5)  { animation-delay: 0.06s, 0.06s; }
.hero-planet .vein-pulses use:nth-child(6)  { animation-delay: 0.18s, 0.18s; }
.hero-planet .vein-pulses use:nth-child(7)  { animation-delay: 0.30s, 0.30s; }
.hero-planet .vein-pulses use:nth-child(8)  { animation-delay: 0.42s, 0.42s; }
.hero-planet .vein-pulses use:nth-child(9)  { animation-delay: 0.55s, 0.55s; }
.hero-planet .vein-pulses use:nth-child(10) { animation-delay: 0.68s, 0.68s; }
.hero-planet .vein-pulses use:nth-child(11) { animation-delay: 0.80s, 0.80s; }
.hero-planet .vein-pulses use:nth-child(12) { animation-delay: 0.92s, 0.92s; }
.hero-planet .vein-pulses use:nth-child(13) { animation-delay: 1.05s, 1.05s; }
.hero-planet .vein-pulses use:nth-child(14) { animation-delay: 1.18s, 1.18s; }
.hero-planet .vein-pulses use:nth-child(15) { animation-delay: 0.50s, 0.50s; }
.hero-planet .vein-pulses use:nth-child(16) { animation-delay: 0.65s, 0.65s; }
.hero-planet .vein-pulses use:nth-child(17) { animation-delay: 0.80s, 0.80s; }
.hero-planet .vein-pulses use:nth-child(18) { animation-delay: 0.95s, 0.95s; }
.hero-planet .vein-pulses use:nth-child(19) { animation-delay: 1.10s, 1.10s; }
.hero-planet .vein-pulses use:nth-child(20) { animation-delay: 1.25s, 1.25s; }

/* Respect reduced motion — freeze every planet animation. Lightning
   bolts go to opacity 0 so they don't strobe; ones already partway
   through their cycle simply stop where they are. */
@media (prefers-reduced-motion: reduce) {
  .hero-planet .planet,
  .hero-planet .planet-halo,
  .hero-planet .strike-origin,
  .hero-planet .vein-pulses use { animation: none !important; }
  .hero-planet .lightning .bolt { animation: none !important; opacity: 0; }
}