:root {
  --bg: #0d0b09;
  --bg-soft: #17120d;
  --panel: rgba(27, 21, 14, .90);
  --panel-2: #21180f;
  --line: rgba(230, 165, 72, .25);
  --text: #f2f6f4;
  --muted: #b9afa2;
  --green: #d99a43;
  --green-strong: #f1bd67;
  --green-deep: #4a2b0f;
  --gold: #e7a33e;
  --shadow: 0 30px 80px rgba(0,0,0,.35);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 30% -10%, rgba(201, 120, 36, .18), transparent 30%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  background: linear-gradient(to bottom, rgba(4, 9, 8, .88), rgba(4, 9, 8, .5));
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(241,189,103,.42);
  background: linear-gradient(145deg, rgba(163,91,28,.28), rgba(28,18,10,.90));
  color: var(--green-strong);
  font-family: Rajdhani, sans-serif; font-weight: 700; letter-spacing: .08em;
}
.brand-name { font-family: Rajdhani, sans-serif; font-weight: 600; letter-spacing: .08em; }
.nav { display: flex; gap: 24px; font-size: 14px; color: #d8cfc4; }
.nav a:hover { color: var(--green-strong); }

.hero { position: relative; min-height: 860px; display: flex; align-items: end; overflow: hidden; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,10,9,.92) 0%, rgba(5,10,9,.62) 36%, rgba(5,10,9,.16) 68%),
    linear-gradient(0deg, rgba(6,11,10,.92) 0%, transparent 48%);
}
.hero-bottom-fade { position:absolute; inset:auto 0 0; height:170px; background:linear-gradient(transparent,var(--bg)); }
.hero-content { position: relative; z-index: 2; padding: 170px 0 125px; }
.eyebrow, .section-kicker {
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--green);
}
h1,h2,h3 { font-family: Rajdhani, sans-serif; margin: 0; line-height: 1.02; }
h1 { font-size: clamp(64px, 9vw, 126px); max-width: 760px; letter-spacing: .02em; text-shadow: 0 12px 40px rgba(0,0,0,.45); }
h1 span { color: var(--green-strong); text-shadow: 0 0 28px rgba(225,145,50,.18); }
.hero-lead { font-size: clamp(22px, 2.5vw, 34px); max-width: 820px; margin: 26px 0 10px; font-family: Rajdhani,sans-serif; font-weight: 600; }
.hero-copy { max-width: 720px; color: #ded5ca; font-size: 17px; }
.hero-actions { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 46px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px;
  transition: .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color:#1b1005; background: linear-gradient(135deg, #f2c36f, #d8872f); box-shadow: 0 10px 30px rgba(216,135,47,.24); }
.button-outline { border-color: rgba(241,189,103,.36); background: rgba(27,18,10,.76); color: var(--green-strong); }
.button-glass { border-color: rgba(255,255,255,.14); background: rgba(6,12,10,.45); backdrop-filter: blur(8px); }
.button-small { min-height:38px; padding-inline:14px; }

.section { padding: 100px 0; }
.intro-grid, .project-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:start; }
h2 { font-size: clamp(40px, 5vw, 66px); margin-top: 10px; }
.prose.large { font-size: 19px; color: #d3c9bd; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--green-strong); }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:42px; }
.section-heading > p { max-width: 520px; color: var(--muted); margin:0; }

.cards { display:grid; gap:18px; }
.cards.three { grid-template-columns: repeat(3,1fr); }
.cards.two { grid-template-columns: repeat(2,1fr); }
.fantasy-card, .role-card, .download-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(31,23,15,.94), rgba(16,12,9,.96));
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card-icon { display:grid; place-items:center; width:46px;height:46px;border-radius:14px;background:#2a1d10;border:1px solid rgba(230,165,72,.32);color:var(--green-strong);font-size:22px;margin-bottom:28px; }
.fantasy-card h3, .role-card h3, .download-card h3 { font-size: 32px; }
.fantasy-card p, .role-card p, .download-card p { color: var(--muted); }
.tag, .download-type, .role-label { display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--green); font-weight:700; }

.formula {
  margin-top: 26px; padding: 20px 24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
  border:1px dashed rgba(230,165,72,.38); border-radius:16px; color:#dbe5e0;
}
.formula-item, .formula-result { background:#20160d; padding:10px 14px; border-radius:10px; }
.formula-result { color: var(--green-strong); border:1px solid rgba(230,165,72,.30); }
.formula-sign { color:#9a7b55; }

.role-card { min-height: 300px; position:relative; overflow:hidden; }
.role-card::after { content:""; position:absolute; width:240px;height:240px;border-radius:50%;filter:blur(60px);opacity:.16;right:-80px;bottom:-100px;background:var(--green); }
.gm-card::after { background: var(--gold); }
.text-link { display:inline-flex; gap:8px; align-items:center; margin-top:18px; color:var(--green-strong); font-weight:700; }

.download-section { background: linear-gradient(180deg, rgba(35,24,14,.58), rgba(16,12,9,.28)); border-block:1px solid rgba(255,255,255,.04); }
.download-grid { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:18px; }
.download-card.featured { border-color: rgba(235,166,67,.46); background:linear-gradient(180deg, rgba(53,34,15,.96), rgba(21,14,9,.97)); }
.meta { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0; }
.meta span { font-size:12px; color:#b9a992; background:#181009; padding:7px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.05); }
.card-actions { display:flex; gap:10px; flex-wrap:wrap; }
.stacked-links { display:grid; gap:10px; margin-top:22px; }
.stacked-links a { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px; color:#e7ddd0; }
.install-note { margin-top:20px; padding:18px 20px; border-radius:14px; background:#1a120b; border:1px solid var(--line); color:var(--muted); }
.install-note strong { color: var(--text); }

.project-links { display:grid; border-top:1px solid var(--line); }
.project-links a { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.project-links a strong { color:var(--green-strong); font-family:Rajdhani,sans-serif; }

.footer { padding:40px 0 60px; border-top:1px solid rgba(255,255,255,.05); color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:40px; align-items:end; }
.footer strong { font-family:Rajdhani,sans-serif; color:var(--text); letter-spacing:.12em; }
.footer p { margin:6px 0 0; }
.footer-small { max-width:460px; text-align:right; font-size:13px; }

@media (max-width: 980px) {
  .nav { display:none; }
  .hero { min-height: 790px; }
  .hero-overlay { background: linear-gradient(90deg, rgba(4,10,9,.84), rgba(5,10,9,.34)), linear-gradient(0deg, rgba(6,11,10,.94), transparent 54%); }
  .intro-grid, .project-grid { grid-template-columns:1fr; gap:34px; }
  .cards.three, .download-grid { grid-template-columns:1fr; }
  .cards.two { grid-template-columns:1fr 1fr; }
}

@media (max-width: 680px) {
  .shell { width:min(100% - 24px, 1180px); }
  .topbar { height:64px; padding:0 12px; }
  .brand-name { display:none; }
  .hero { min-height: 760px; align-items:end; }
  .hero-image { object-position: 54% center; }
  .hero-content { padding: 130px 0 100px; }
  h1 { font-size: 58px; }
  .hero-copy { font-size:15px; max-width: 92%; }
  .section { padding:72px 0; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:18px; }
  .cards.two { grid-template-columns:1fr; }
  .footer-inner { display:block; }
  .footer-small { text-align:left; margin-top:18px; }
  .topbar .button-small { font-size:12px; padding-inline:12px; }
}

/* RWF amber identity pass */
.fantasy-card, .role-card, .download-card { box-shadow: 0 0 0 1px rgba(230,165,72,.035), var(--shadow); }
.fantasy-card:hover, .role-card:hover, .download-card:hover { border-color: rgba(241,189,103,.48); }
.fantasy-card h3, .role-card h3, .download-card h3 { color: #ffffff; }
.project-links a strong { color: #efb75d; }
.section h2 { color: #f0b85e; }