:root {
  color-scheme: dark;
  --bg: #100f0c;
  --bg-deep: #090907;
  --panel: #191712;
  --panel-2: #211e17;
  --panel-soft: #262117;
  --text: #f4f0e5;
  --muted: #b8b09f;
  --muted-2: #8f8879;
  --gold: #e5a62f;
  --gold-bright: #ffc94f;
  --amber: #bb741a;
  --line: rgba(229, 166, 47, .34);
  --line-soft: rgba(244, 240, 229, .10);
  --green: #7c8736;
  --radius: 18px;
  --shadow: 0 26px 70px rgba(0,0,0,.38);
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.58; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
code { color: #f0c064; background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); border-radius: 6px; padding: .08rem .35rem; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-150%); background: var(--gold-bright); color: #12100c; padding: 10px 14px; border-radius: 8px; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease; }
.site-header.scrolled { background: rgba(12, 11, 9, .86); border-color: var(--line-soft); backdrop-filter: blur(16px); }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: .92rem; font-weight: 900; letter-spacing: .12em; }
.brand img { width: 42px; height: 42px; filter: drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.primary-nav a { position: relative; color: #e8e2d6; text-decoration: none; font-size: .82rem; font-weight: 760; letter-spacing: .055em; }
.primary-nav a::after { content:""; position:absolute; inset:auto 0 -9px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: rgba(18,16,12,.9); color: var(--text); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span:not(.sr-only) { width: 20px; height: 2px; background: currentColor; display: block; border-radius: 2px; }

.hero { min-height: 780px; height: min(960px, 100svh); position: relative; display: flex; align-items: center; overflow: hidden; background: #31291b; }
.hero-media { position:absolute; inset:0; background: url('../assets/media/motherlode-hero.webp') center center / cover no-repeat; transform: scale(1.015); }
.hero-shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,8,6,.94) 0%, rgba(8,8,6,.78) 34%, rgba(8,8,6,.22) 67%, rgba(8,8,6,.36) 100%), linear-gradient(0deg, rgba(9,8,6,.92) 0%, rgba(9,8,6,0) 45%); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 75% 34%, rgba(255,196,72,.12), transparent 28%), linear-gradient(115deg, transparent 0 74%, rgba(255,205,88,.08) 74% 74.15%, transparent 74.15%); mix-blend-mode: screen; }
.hero-content { position: relative; z-index: 2; display:grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: clamp(40px, 8vw, 110px); align-items:end; padding-top: 120px; padding-bottom: 110px; }
.hero-copy { max-width: 720px; }
.eyebrow { margin:0 0 14px; color: var(--gold-bright); font-size: .76rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.hero-wordmark { display:block; width:min(650px, 88%); margin: 0 0 22px; filter: drop-shadow(0 14px 28px rgba(0,0,0,.52)); }
.hero h1 { margin: 0; max-width: 680px; font-size: clamp(2.35rem, 4.4vw, 4.8rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hero-lede { max-width: 640px; margin: 24px 0 0; color:#ddd6c6; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.button { min-height: 48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius: 10px; padding: 12px 18px; text-decoration:none; font-size:.88rem; font-weight:850; letter-spacing:.03em; border:1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(180deg, #f0b23a, #c8861d); color:#171109; border-color:#ffc857; box-shadow:0 10px 30px rgba(205,135,26,.22); }
.button-primary:hover { box-shadow:0 14px 34px rgba(205,135,26,.34); }
.button-quiet { border-color: rgba(255,255,255,.20); background: rgba(14,12,9,.50); color:var(--text); backdrop-filter: blur(6px); }
.button-quiet:hover { border-color: var(--line); background: rgba(25,21,15,.72); }
.hero-note { margin:20px 0 0; color:#aaa18e; font-size:.75rem; letter-spacing:.065em; text-transform:uppercase; }

.claim-card { align-self:end; background: linear-gradient(180deg, rgba(25,22,16,.92), rgba(13,12,9,.94)); border:1px solid rgba(237,179,63,.50); box-shadow:var(--shadow); border-radius:18px; overflow:hidden; backdrop-filter:blur(12px); }
.claim-card::before { content:""; display:block; height:5px; background:linear-gradient(90deg, #5c3517 0 18%, #986021 18% 38%, #d39a30 38% 55%, #5e6d30 55% 68%, #30251b 68%); }
.claim-card-kicker { margin:0; padding:15px 18px 13px; border-bottom:1px solid var(--line-soft); color:var(--muted-2); font-size:.69rem; font-weight:850; letter-spacing:.18em; }
.claim-card ol { list-style:none; margin:0; padding:7px; }
.claim-card li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 10px; padding:13px 12px; border-radius:10px; }
.claim-card li + li { border-top:1px solid rgba(255,255,255,.055); }
.claim-card li:hover { background:rgba(229,166,47,.055); }
.claim-card li > span { grid-row:1 / span 2; color:var(--gold); font-size:.72rem; font-weight:900; letter-spacing:.08em; padding-top:2px; }
.claim-card strong { font-size:.92rem; }
.claim-card small { color:var(--muted); font-size:.78rem; margin-top:2px; }
.strata-top { position:absolute; left:-5%; top:24%; width:22%; height:9px; border-top:1px solid rgba(255,205,81,.35); transform:rotate(-14deg); opacity:.7; }
.strata-top::before, .strata-top::after { content:""; position:absolute; left:0; width:100%; border-top:1px solid rgba(255,205,81,.18); }
.strata-top::before{top:8px}.strata-top::after{top:16px}
.hero-bottom { position:absolute; inset:auto -2% -35px; height:95px; background:var(--bg); clip-path:polygon(0 56%, 9% 40%, 19% 50%, 31% 26%, 43% 44%, 58% 30%, 72% 46%, 84% 20%, 100% 38%, 100% 100%, 0 100%); z-index:3; }

.section { position:relative; padding: clamp(78px, 8vw, 118px) 0; }
.section h2 { margin:0; font-size:clamp(2.1rem, 3.8vw, 4rem); line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.section-heading { display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 8vw, 110px); align-items:end; margin-bottom:44px; }
.section-heading > p { color:var(--muted); max-width:520px; margin:0; }
.section-intro { padding-top: 100px; background:var(--bg); }
.intro-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap:clamp(40px, 8vw, 120px); align-items:start; }
.intro-copy { color:var(--muted); font-size:1.06rem; max-width:680px; }
.intro-copy p { margin:0 0 18px; }
.stat-ribbon { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:70px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; }
.stat-ribbon span { display:flex; gap:11px; align-items:center; min-height:74px; padding:16px 20px; background:#171510; color:#dad4c6; font-size:.82rem; font-weight:700; }
.stat-ribbon b { color:var(--gold); font-size:.70rem; letter-spacing:.1em; }

.section-features { background:linear-gradient(180deg,#15130f,#0f0e0b); border-block:1px solid var(--line-soft); }
.feature-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.feature-card { grid-column:span 4; min-height:310px; padding:28px; border:1px solid var(--line-soft); border-radius:var(--radius); background:linear-gradient(150deg, rgba(37,32,23,.90), rgba(20,18,14,.96)); position:relative; overflow:hidden; transition:transform .2s ease,border-color .2s ease; }
.feature-card::after { content:""; position:absolute; width:170px; height:170px; right:-60px; bottom:-90px; border:1px solid rgba(232,171,51,.13); transform:rotate(25deg); }
.feature-card:hover { transform:translateY(-4px); border-color:rgba(229,166,47,.34); }
.feature-card-wide { grid-column:span 8; display:grid; grid-template-columns:140px 1fr; align-items:center; gap:20px; }
.feature-card img { width:84px; filter:drop-shadow(0 12px 16px rgba(0,0,0,.3)); }
.feature-index { margin:0 0 10px; color:#aa9060; font-size:.68rem; font-weight:850; letter-spacing:.13em; }
.feature-card h3 { margin:0 0 10px; font-size:1.4rem; letter-spacing:-.02em; }
.feature-card p:not(.feature-index) { color:var(--muted); margin:0; font-size:.92rem; max-width:510px; }
.css-house { width:84px; height:84px; position:relative; margin-bottom:18px; }
.css-house::before { content:""; position:absolute; left:15px; bottom:9px; width:54px; height:43px; background:linear-gradient(145deg,#916027,#62411f); border:2px solid #d79a37; border-radius:4px; }
.css-house::after { content:""; position:absolute; left:11px; top:9px; width:59px; height:59px; background:linear-gradient(145deg,#c88a2d,#755025); clip-path:polygon(50% 0,100% 48%,86% 56%,50% 23%,14% 56%,0 48%); }
.css-house span { position:absolute; z-index:2; width:14px; height:24px; background:#2a241c; border:1px solid #e5a62f; left:35px; bottom:9px; }

.section-media { background:#0d0c0a; }
.media-grid { display:grid; grid-template-columns:1.45fr .75fr; grid-template-rows:1fr 1fr; gap:15px; }
.media-tile { margin:0; position:relative; overflow:hidden; min-height:265px; border-radius:16px; border:1px solid var(--line-soft); background:#17140f; }
.media-main { grid-row:1 / span 2; min-height:560px; }
.media-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.media-tile:hover img { transform:scale(1.025); }
.media-tile::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(0deg,rgba(9,8,6,.94),rgba(9,8,6,0)); pointer-events:none; }
.media-tile figcaption { position:absolute; z-index:2; inset:auto 20px 18px; display:flex; flex-direction:column; gap:3px; }
.media-tile figcaption span { color:var(--gold-bright); font-size:.64rem; font-weight:850; letter-spacing:.13em; }
.media-tile figcaption strong { font-size:.9rem; }
.media-main figcaption strong { font-size:1.2rem; }

.section-multiplayer { overflow:hidden; background:linear-gradient(120deg,#12110d 0 48%,#1a1710 48%); border-block:1px solid var(--line-soft); }
.section-multiplayer::before { content:""; position:absolute; inset:0; opacity:.08; background-image:radial-gradient(circle at 1px 1px,#e4ae45 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,transparent 38%,black 70%); }
.multiplayer-grid { position:relative; display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(50px,8vw,110px); align-items:center; }
.multiplayer-copy > p:not(.eyebrow,.fine-print) { color:var(--muted); font-size:1.03rem; max-width:550px; }
.multiplayer-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.fine-print { color:var(--muted-2); font-size:.78rem; }
.server-preview { position:relative; display:block; overflow:hidden; border:1px solid rgba(229,166,47,.38); border-radius:16px; background:#0e0d0a; box-shadow:var(--shadow); transform:rotate(1deg); text-decoration:none; }
.server-preview img { width:100%; display:block; aspect-ratio:1280 / 650; object-fit:cover; object-position:top center; transition:transform .3s ease, filter .3s ease; }
.server-preview::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(0deg,rgba(7,8,6,.92),rgba(7,8,6,0)); pointer-events:none; }
.server-preview:hover img { transform:scale(1.012); filter:brightness(1.05); }
.server-preview-caption { position:absolute; z-index:2; inset:auto 18px 16px; display:flex; flex-direction:column; gap:2px; }
.server-preview-caption small { color:var(--gold-bright); font-size:.61rem; font-weight:850; letter-spacing:.13em; }
.server-preview-caption strong { color:var(--text); font-size:.88rem; letter-spacing:.02em; }


.section-development { background:linear-gradient(180deg,#0d0c0a,#15120d); }
.development-grid { display:grid; grid-template-columns:200px 1fr; gap:clamp(36px,8vw,100px); align-items:center; }
.dev-marker { width:170px; height:170px; position:relative; display:grid; place-items:center; border:1px solid rgba(229,166,47,.38); background:linear-gradient(145deg,#252017,#11100c); clip-path:polygon(16% 0,86% 4%,100% 27%,92% 87%,67% 100%,6% 90%,0 24%); transform:rotate(-3deg); }
.dev-marker::before { content:""; position:absolute; inset:13px; border:1px dashed rgba(229,166,47,.28); clip-path:inherit; }
.dev-marker span,.dev-marker strong { position:absolute; }
.dev-marker span { top:49px; color:var(--muted); font-size:.68rem; font-weight:850; letter-spacing:.18em; }
.dev-marker strong { top:69px; color:var(--gold-bright); font-size:2.15rem; letter-spacing:-.05em; }
.development-grid > div:last-child > p:not(.eyebrow) { color:var(--muted); max-width:760px; }

.section-final { padding-top:40px; background:#15120d; }
.final-panel { position:relative; overflow:hidden; min-height:280px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:48px clamp(28px,5vw,70px); border:1px solid rgba(229,166,47,.38); border-radius:22px; background:linear-gradient(115deg,#211d15,#12100d); box-shadow:var(--shadow); }
.final-panel::after { content:""; position:absolute; right:-4%; bottom:-80px; width:330px; height:190px; border:1px solid rgba(229,166,47,.14); transform:rotate(-15deg); clip-path:polygon(5% 75%,28% 34%,46% 65%,64% 14%,95% 72%,100% 100%,0 100%); }
.final-panel h2 { max-width:700px; }
.final-panel p:not(.eyebrow) { color:var(--muted); }
.final-panel .button { position:relative; z-index:2; white-space:nowrap; }

.site-footer { padding:70px 0 28px; background:#090806; border-top:1px solid var(--line-soft); }
.footer-grid { display:grid; grid-template-columns:1.1fr .8fr 1.1fr; gap:40px; align-items:start; }
.footer-brand { display:flex; gap:12px; align-items:center; }
.footer-brand div { display:flex; flex-direction:column; }
.footer-brand strong { letter-spacing:.12em; font-size:.86rem; }
.footer-brand span { color:var(--muted-2); font-size:.72rem; }
.site-footer nav { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.site-footer nav a { color:#b9b1a2; text-decoration:none; font-size:.76rem; }
.site-footer nav a:hover { color:var(--gold-bright); }
.footer-directory { display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.footer-directory > span { color:var(--muted-2); font-size:.62rem; font-weight:850; letter-spacing:.12em; }
.footer-directory a { color:#d9caa9; text-decoration:none; font-size:.78rem; font-weight:750; }
.footer-directory a:hover { color:var(--gold-bright); }
.footer-bottom { margin-top:48px; padding-top:18px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:24px; color:#716a5f; font-size:.68rem; }
.footer-bottom a { color:#9c9281; text-decoration:none; }
.footer-bottom a:hover { color:var(--gold-bright); }

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 860px); }
  .hero { min-height: 820px; height:auto; }
  .hero-content { grid-template-columns:1fr; gap:34px; padding-top:130px; padding-bottom:120px; }
  .hero-copy { max-width:760px; }
  .claim-card { max-width:620px; }
  .intro-grid,.section-heading,.multiplayer-grid { grid-template-columns:1fr; gap:26px; }
  .stat-ribbon { grid-template-columns:1fr 1fr; }
  .feature-card,.feature-card-wide { grid-column:span 6; }
  .feature-card-wide { display:block; }
  .feature-card-wide img { margin-bottom:18px; }
  .media-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .media-main { grid-column:1 / span 2; grid-row:auto; min-height:430px; }
  .section-multiplayer { background:linear-gradient(180deg,#12110d,#1a1710); }
  .server-preview { transform:none; }
  .development-grid { grid-template-columns:150px 1fr; gap:38px; }
  .dev-marker { width:140px; height:140px; }
  .dev-marker span{top:38px}.dev-marker strong{top:55px;font-size:1.8rem}
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-directory { grid-column:1 / span 2; }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 28px); --radius: 14px; }
  .site-header { background:rgba(12,11,9,.88); border-color:var(--line-soft); backdrop-filter:blur(14px); }
  .header-inner { min-height:68px; flex-wrap:wrap; }
  .brand img { width:38px; height:38px; }
  .js .nav-toggle { display:flex; }
  .primary-nav { width:100%; order:3; margin:0; padding:0 0 16px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .primary-nav a { min-height:42px; display:flex; align-items:center; padding:8px 10px; border:1px solid var(--line-soft); border-radius:8px; background:rgba(255,255,255,.025); }
  .primary-nav a::after { display:none; }
  .js .primary-nav { display:none; }
  .js .primary-nav.open { display:grid; }
  .hero { min-height:0; padding-top:68px; }
  .hero-media { background-position:60% center; }
  .hero-shade { background:linear-gradient(180deg,rgba(8,8,6,.45),rgba(8,8,6,.88) 42%,rgba(8,8,6,.98) 83%); }
  .hero-content { padding-top:clamp(190px,54vw,250px); padding-bottom:90px; gap:30px; }
  .hero-wordmark { width:100%; margin-bottom:18px; }
  .hero h1 { font-size:clamp(2.2rem,10vw,3rem); }
  .hero-lede { font-size:.98rem; }
  .hero-note { line-height:1.6; }
  .claim-card { width:100%; }
  .claim-card li { padding-block:11px; }
  .hero-bottom { height:60px; bottom:-18px; }
  .section { padding:72px 0; }
  .section h2 { font-size:clamp(2rem,9vw,2.8rem); }
  .section-intro { padding-top:78px; }
  .intro-copy { font-size:1rem; }
  .stat-ribbon { grid-template-columns:1fr; margin-top:44px; }
  .stat-ribbon span { min-height:58px; }
  .feature-grid { display:block; }
  .feature-card { min-height:0; margin-bottom:12px; padding:23px; }
  .feature-card img { width:68px; }
  .media-grid { display:block; }
  .media-tile,.media-main { width:100%; min-width:0; min-height:0; margin-bottom:12px; aspect-ratio:4 / 3; }
  .media-main { aspect-ratio:16 / 10; }
  .media-tile figcaption { inset:auto 16px 14px; }
  .multiplayer-grid { gap:38px; }
  .development-grid { grid-template-columns:1fr; }
  .dev-marker { width:124px; height:124px; }
  .dev-marker span{top:32px}.dev-marker strong{top:48px;font-size:1.65rem}
  .final-panel { min-height:0; padding:34px 24px; flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-directory { grid-column:auto; }
  .footer-bottom { flex-direction:column; gap:7px; }
}

@media (max-width: 430px) {
  .brand span { font-size:.78rem; }
  .hero-actions .button { width:100%; }
  .claim-card small { font-size:.74rem; }
  .section-heading { margin-bottom:30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}