/* =====================================================================
   STUDIO WEBSITE — Design System
   Medieval MMORPG studio. Dark, parchment & gold. No build step.
   Edit colors below to re-skin the whole site.
   ===================================================================== */

:root {
  /* --- Brand palette (medieval / dark) --- */
  --bg-0: #0c0a08;          /* page background, near-black warm */
  --bg-1: #14110c;          /* alternate section background */
  --surface: #1b1610;       /* cards, panels */
  --surface-2: #221b13;     /* raised panels, hovers */
  --border: #3a2f20;        /* hairline borders */
  --border-strong: #5a4a30; /* stronger borders / dividers */

  --gold: #c9a45c;          /* primary accent */
  --gold-bright: #e6c878;   /* hover / highlights */
  --gold-dim: #8a7038;      /* muted gold */
  --blood: #9b2f2f;         /* secondary accent / danger CTA */
  --blood-bright: #c24141;
  --steel: #6f7e8c;         /* cool neutral accent */
  --green: #6f9255;         /* success / online */

  --text: #ece4d6;          /* parchment white */
  --text-dim: #b6ab97;      /* muted body */
  --text-faint: #a59a85;    /* captions, meta — raised for WCAG AA on dark */

  /* --- Typography --- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Spacing / shape --- */
  --container: 1160px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.8);
  --shadow-gold: 0 0 0 1px rgba(201,164,92,.25), 0 12px 40px -16px rgba(201,164,92,.25);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------ Reset ------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-bright); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold); }
ul, ol { padding-left: 1.2em; }

/* Subtle parchment/vignette texture on the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(201,164,92,.06), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(155,47,47,.05), transparent 55%),
    linear-gradient(180deg, var(--bg-0), #0a0807 80%);
}

/* ------------------------------ Typography ------------------------------ */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: .5px; color: #f4ecdd; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.35rem; letter-spacing: .3px; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
p { color: var(--text-dim); }
.lead { font-size: 1.2rem; color: var(--text); }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 4px;
  font-size: .8rem; color: var(--gold); font-weight: 600;
  display: inline-block; margin-bottom: 1rem;
}
.muted { color: var(--text-faint); }
.gold { color: var(--gold-bright); }

/* ------------------------------ Layout ------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(56px, 9vw, 120px) 0; position: relative; }
.section--alt { background: var(--bg-1); border-block: 1px solid var(--border); }
.section__head { max-width: 720px; margin-bottom: 3rem; }
.section__head.center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); border: 0; margin: 0; }

/* Ornamental rule (medieval flourish) */
.flourish { display: flex; align-items: center; gap: 14px; color: var(--gold-dim); }
.flourish::before, .flourish::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.flourish::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.flourish svg { width: 18px; height: 18px; fill: var(--gold); }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 1px;
  font-size: .95rem; text-transform: uppercase;
  padding: .85em 1.6em; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.btn--primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #2a1d08; box-shadow: var(--shadow-gold); }
.btn--primary:hover { color: #2a1d08; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-bright), 0 16px 36px -12px rgba(201,164,92,.5); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(201,164,92,.06); }
.btn--blood { background: linear-gradient(180deg, var(--blood-bright), var(--blood)); color: #fff; }
.btn--blood:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 36px -12px rgba(155,47,47,.6); }
.btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------ Badges / pills ------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600; padding: .35em .8em; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--gold); background: rgba(201,164,92,.06);
}
.badge--wip { color: var(--steel); border-color: #3c4753; background: rgba(111,126,140,.08); }
.badge--live { color: var(--green); border-color: #3f5230; background: rgba(111,146,85,.1); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ------------------------------ Cards ------------------------------ */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; position: relative; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 30% 20%, rgba(201,164,92,.18), transparent 70%);
}
.card__icon svg { width: 26px; height: 26px; fill: var(--gold); }
.card h3 { margin-bottom: .5rem; color: #f1e8d8; }
.card p { font-size: .98rem; }

/* Feature card top accent line */
.card--feature::before {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.card--feature:hover::before { opacity: 1; }

/* ------------------------------ Navbar ------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,10,8,.72); backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(10,8,6,.92); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #f4ecdd; letter-spacing: 1px; }
.brand:hover { color: #fff; }
.brand__mark { width: 34px; height: 34px; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--text-dim); font-weight: 500; font-size: .98rem; position: relative; }
.nav__links a:hover, .nav__links a.active { color: var(--gold-bright); }
.nav__links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--gold); }
.nav__cta { display: flex; align-items: center; gap: 14px; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: .5em .75em; font-family: var(--font-body); font-size: .9rem;
}
.lang__btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.lang__btn svg { width: 16px; height: 16px; fill: currentColor; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; max-height: 60vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; display: none; grid-template-columns: 1fr 1fr; gap: 2px;
}
.lang__menu.open { display: grid; }
.lang__menu button {
  text-align: left; background: transparent; border: 0; color: var(--text-dim);
  padding: .5em .7em; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; font-family: var(--font-body);
}
.lang__menu button:hover { background: rgba(201,164,92,.1); color: var(--gold-bright); }
.lang__menu button[aria-current="true"] { color: var(--gold); font-weight: 600; }

/* Hamburger */
.nav__burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: .25s; }

/* ------------------------------ Hero ------------------------------ */
.hero { position: relative; padding: clamp(80px, 14vw, 170px) 0 clamp(60px, 9vw, 120px); overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(201,164,92,.12), transparent 60%),
    radial-gradient(700px 600px at 10% 90%, rgba(155,47,47,.1), transparent 55%);
}
.hero__bg::after { /* faux castle silhouette via gradient mountains */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6) 100%);
}
.hero h1 { max-width: 14ch; margin-bottom: 1.2rem; }
.hero .lead { max-width: 56ch; margin-bottom: 2rem; }
.hero__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 2.5rem; color: var(--text-faint); font-size: .9rem; }
.hero__meta b { color: var(--gold); font-family: var(--font-display); font-size: 1.4rem; display: block; }

/* Media frame placeholder (screenshots/trailer) */
.frame {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(201,164,92,.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, var(--surface-2), var(--bg-1));
  aspect-ratio: 16/9; display: grid; place-items: center; text-align: center;
  color: var(--text-faint); position: relative; overflow: hidden;
}
.frame__label { font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; }
.frame--tall { aspect-ratio: 3/4; }
.frame--wide { aspect-ratio: 21/9; }

/* ------------------------------ Stat band ------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-1); padding: 28px; text-align: center; }
.stat b { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-bright); display: block; }
.stat span { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------ CTA band ------------------------------ */
.cta-band { text-align: center; background: linear-gradient(180deg, var(--surface), var(--bg-1)); border-block: 1px solid var(--border-strong); }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { max-width: 50ch; margin: 0 auto 2rem; }

/* ------------------------------ Accordion (FAQ) ------------------------------ */
.accordion { max-width: 820px; margin-inline: auto; }
.acc { border-bottom: 1px solid var(--border); }
.acc__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 22px 44px 22px 0; color: var(--text); font-family: var(--font-display);
  font-size: 1.12rem; position: relative; transition: color .2s;
}
.acc__q:hover { color: var(--gold-bright); }
.acc__q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--gold); transition: transform .25s; }
.acc.open .acc__q::after { content: "–"; }
/* grid-rows technique: never clips long answers in verbose languages */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc__a > div { overflow: hidden; min-height: 0; padding: 0 0 22px; color: var(--text-dim); }
.acc.open .acc__a { grid-template-rows: 1fr; }

/* ------------------------------ Timeline / roadmap (blog & roadmap) ------------------------------ */
.timeline { position: relative; max-width: 820px; margin-inline: auto; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--border)); }
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--gold); }
.tl-item.done::before { background: var(--gold); }
.tl-item .date { font-family: var(--font-display); color: var(--gold); letter-spacing: 1px; font-size: .85rem; text-transform: uppercase; }

/* Blog post cards */
.post { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, transform .2s; }
.post:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.post__thumb { aspect-ratio: 4/3; border-radius: var(--radius-sm); }
.post__meta { display: flex; gap: 14px; font-size: .82rem; color: var(--text-faint); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: 1px; }
.post h3 { margin-bottom: .4rem; }

/* ------------------------------ Press kit fact table ------------------------------ */
.facts { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts th, .facts td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts th { width: 32%; color: var(--gold); font-family: var(--font-display); font-weight: 600; background: var(--bg-1); }
.facts td { color: var(--text-dim); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

/* Asset download grid (press kit) */
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.asset { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.asset .frame { aspect-ratio: 1; border: 0; border-radius: 0; }
.asset__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: .82rem; color: var(--text-faint); border-top: 1px solid var(--border); }

/* ------------------------------ Forms (contact) ------------------------------ */
.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-family: var(--font-display); }
.field input, .field textarea, .field select {
  background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: .85em 1em; font-family: var(--font-body); font-size: 1rem; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.15); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { font-size: .85rem; color: var(--text-faint); }

/* Contact method cards */
.contact-card { display: flex; gap: 16px; align-items: flex-start; }
.contact-card .card__icon { flex: 0 0 auto; margin: 0; }

/* ------------------------------ Legal / long-form prose ------------------------------ */
.prose { max-width: 820px; margin-inline: auto; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--gold); }
.prose p, .prose li { color: var(--text-dim); margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; }
.prose a { text-decoration: underline; }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 2.5rem; }
.toc h4 { margin-bottom: .8rem; }
.toc ol { columns: 2; column-gap: 32px; font-size: .95rem; }
.notice { border-left: 3px solid var(--blood-bright); background: rgba(155,47,47,.08); padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 1.6rem; font-size: .95rem; color: var(--text-dim); }
.notice.info { border-left-color: var(--gold); background: rgba(201,164,92,.07); }
.updated { color: var(--text-faint); font-size: .9rem; margin-bottom: 1.5rem; }

/* ------------------------------ Page header (interior pages) ------------------------------ */
.page-head { padding: clamp(70px, 11vw, 130px) 0 clamp(30px, 5vw, 60px); text-align: center; position: relative; }
.page-head .eyebrow { margin-bottom: .6rem; }
.page-head p { max-width: 60ch; margin: 1rem auto 0; }

/* ------------------------------ Footer ------------------------------ */
.footer { background: #080605; border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__brand p { font-size: .92rem; margin-top: 14px; max-width: 32ch; }
.footer h5 { font-family: var(--font-display); color: var(--gold); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--text-dim); font-size: .94rem; }
.footer a:hover { color: var(--gold-bright); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: .85rem; }
.socials { display: flex; gap: 12px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-dim); }
.socials a:hover { color: var(--gold); border-color: var(--gold-dim); background: rgba(201,164,92,.06); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------ Utilities ------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.hidden { display: none !important; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(201,164,92,.3); color: #fff; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 920px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0; position: fixed; inset: 70px 0 auto 0;
    background: var(--bg-1); border-bottom: 1px solid var(--border); padding: 8px 24px 24px;
  }
  .nav.open .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%; }
  .nav.open .nav__links a.active::after { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .post__thumb { aspect-ratio: 16/9; }
  .toc ol { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__meta { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   ENHANCEMENTS v2 — a11y, mobile robustness & cinematic visuals
   ===================================================================== */

/* --- Skip-to-content link (visible only on focus) --- */
.skip-link {
  position: fixed; top: -64px; left: 12px; z-index: 200;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #2a1d08;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .5px;
  padding: .7em 1.2em; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #2a1d08; outline: 2px solid #fff; outline-offset: 2px; }

/* --- Anchor targets clear the 70px sticky header --- */
:where([id]) { scroll-margin-top: 90px; }

/* --- backdrop-filter fallback (older/unsupported browsers) --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(10,8,6,.97); }
}

/* --- Hero: layered living backdrop ---------------------------------- */
.hero__bg { will-change: transform; }
.hero__bg::before {                /* slow-drifting gradient mesh */
  content: ""; position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(38% 38% at 20% 30%, rgba(201,164,92,.12), transparent 60%),
    radial-gradient(34% 34% at 82% 22%, rgba(155,47,47,.11), transparent 60%),
    radial-gradient(44% 44% at 62% 82%, rgba(111,126,140,.09), transparent 60%);
  animation: mesh 24s ease-in-out infinite alternate;
}
@keyframes mesh { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-3%,0) scale(1.08); } }

/* Starfield — twinkling dots, behind embers */
.hero__stars { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__stars span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,228,200,.95) 0%, rgba(240,228,200,0) 70%);
  animation: star-twinkle ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  from { opacity: var(--op, .3); }
  to   { opacity: calc(var(--op, .3) * .08); }
}

/* Embers — floating sparks (color via --ecol custom property) */
.hero__embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__embers span {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, var(--ecol, var(--gold-bright)), transparent 70%);
  opacity: 0; animation: ember linear infinite;
}
@keyframes ember {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  12%  { opacity: .9; }
  85%  { opacity: .4; }
  100% { transform: translateY(-85vh) scale(.2); opacity: 0; }
}

/* CTA / section floating dust particles */
.sec__dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sec__dust span {
  position: absolute; bottom: -8px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright), transparent 70%);
  opacity: 0; animation: dust-rise linear infinite;
}
@keyframes dust-rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: .35; }
  80%  { opacity: .12; }
  100% { transform: translateY(-50vh) scale(.3); opacity: 0; }
}
.hero::after {                     /* cinematic vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* --- Stat / meta numerals: molten-gold ink --- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat b, .hero__meta b {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* --- Card pointer-tracking glow --- */
.card { overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(201,164,92,.14), transparent 45%);
  transition: opacity .3s var(--ease);
}
.card:hover::after { opacity: 1; }
.card:hover { box-shadow: var(--shadow-gold); }

/* --- Frame placeholders: slow shimmer sweep --- */
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(201,164,92,.07) 50%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* --- Primary button sheen on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none;
}
.btn--primary:hover::after { left: 150%; }

/* --- Decorative flourish atop alt sections --- */
.section--alt::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --- Mobile CTA shown inside the open dropdown menu --- */
.nav__cta-mobile { display: none; }

@media (max-width: 780px) {
  .nav.open .nav__links .nav__cta-mobile {
    display: inline-flex; width: 100%; justify-content: center; margin-top: 16px;
  }
  .nav__links a { min-height: 44px; align-items: center; }          /* comfortable tap targets */
  .lang__btn { min-height: 40px; }
  .lang__menu {                                                      /* never clipped on narrow screens */
    position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; max-height: 70vh;
  }
}

/* --- Silence ambient animations under reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero__embers span, .hero__stars span, .sec__dust span,
  .hero__bg::before, .frame::after, .btn--primary::after { animation: none !important; }
}