html { scroll-behavior: smooth; background: var(--color-bg-950); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--color-bg-950); min-height: 100vh; }
section[id] { scroll-margin-top: 72px; }
p, h1, h2, h3, ul { margin: 0; }
img { display: block; max-width: 100%; }

/* Links (README: accent, hover = accent-hover + underline); buttons rendered as <a> keep DS button colours */
.sv-root a:hover { color: var(--accent-hover); text-decoration: underline; }
.sv-root a.sv-btn { color: var(--text-primary); text-decoration: none; }
.sv-root a.sv-btn:hover { color: var(--text-strong); }
.sv-root a.sv-btn--primary { color: var(--text-on-accent); }
.sv-root a.sv-btn--primary:hover { color: #fff; }
/* Texture plates aren't part of the handoff — drop the one texture core.css loads outside .sv-no-tex */
.sv-btn--primary::before { display: none; }

/* Icons: <svg class="sv-icon"><use href="#i-name"/></svg> */
svg.sv-icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.accent { color: var(--accent); }

/* Layout glue */
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.center { justify-content: center; }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-32 { gap: var(--space-32); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.pad-16 { padding: var(--space-16) !important; gap: var(--space-12) !important; }
.grid { display: grid; }
.grid.start { align-items: start; }
.g-220 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.g-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.g-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.wrap-1100 { max-width: 1100px; margin: 0 auto; padding: 56px var(--space-32); }

/* Notched divider: DS .sv-divider--notched with a label */
.notched { position: relative; display: flex; align-items: center; gap: var(--space-12); height: 20px; color: var(--text-muted); font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.notched::before { content: ''; flex: none; width: 1.5rem; height: 3px; background: var(--accent); }
.notched::after { content: ''; flex: 1; height: 1px; background: var(--line-divider); }

/* 1. Header */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: 0 var(--space-32); background: rgba(14,13,11,.85); border-bottom: var(--border-panel); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.topbar-logo img { height: 40px; width: auto; }
.topbar-nav { display: flex; gap: var(--space-20); }
.sv-root .topbar-nav a { color: var(--text-secondary); }
.sv-root .topbar-nav a:hover { color: var(--text-strong); }

/* 2. Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #2a1a12 0%, #14110e 45%, #0e0d0b 100%); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,13,11,.55) 0%, rgba(14,13,11,.25) 40%, rgba(14,13,11,.6) 75%, #0e0d0b 100%); }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-20); padding: 96px var(--space-32) 72px; }
.hero-logo { width: min(clamp(260px, 42vw, 560px), calc(42vh * 636 / 540)); filter: drop-shadow(0 12px 32px rgba(0,0,0,.7)); }
.hero-logo img { width: 100%; height: auto; }
.hero-tag { font-size: clamp(20px, 3vw, 30px); max-width: 560px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.hero-sub { color: var(--text-secondary); font-size: 16px; max-width: 460px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }

/* 3. Waarom */
.wrap-1100.sec-waarom { padding: 72px var(--space-32) 16px; }
.reason { display: flex; flex-direction: column; gap: var(--space-8); }
.reason .num { color: var(--accent); font-size: 14px; }
.reason h3 { font-size: 26px; line-height: 1.1; }
.reason p, .feature p, .lore-text p, .intro, .step p, .portal p, .muted-p { color: var(--text-secondary); line-height: 1.5; text-wrap: pretty; }

/* 4. Features */
.feature { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); min-height: 180px; }
.feature h3 { font-size: 20px; }

/* 5. Lore */
.lore { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--space-32); align-items: start; }
.lore-text { max-width: 720px; }
.lore-text h2 { font-size: 40px; margin-bottom: var(--space-16); }
.lore-text p { line-height: 1.55; }
.lore-text p + p { margin-top: var(--space-12); }
.lore-stats { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-16); }
.lore-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.lore-stats > div:not(:last-child) { border-bottom: var(--border-soft); padding-bottom: var(--space-12); }
.lore-stats .sv-t-label { color: var(--text-muted); }
.lore-stats .sv-t-data { font-size: 28px; color: var(--text-strong); }

/* 6. Screenshots */
.shots { grid-auto-rows: 260px; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.shot { overflow: hidden; }
.shot-wide { grid-column: 1 / -1; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* 7. Regio's */
.intro { margin: var(--space-16) 0 var(--space-24); max-width: 620px; }
.regions { padding: var(--space-8) var(--space-20); }
.region { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1.5fr) 120px; gap: var(--space-16); align-items: center; padding: var(--space-12) 0; border-bottom: var(--border-soft); }
.region:last-child { border-bottom: 0; }
.region .sv-t-label { color: var(--text-strong); }
.region .role { color: var(--text-secondary); font-size: 14px; }
.danger { display: flex; align-items: center; gap: var(--space-8); }
.danger .sv-bar-track { flex: 1; min-width: 0; }
.danger .sv-bar-fill { background: var(--accent); }
.danger .sv-t-data { color: var(--text-muted); min-width: 32px; text-align: right; }

/* 8. Verhaal */
.act { padding: var(--space-16) var(--space-20); display: grid; grid-template-columns: 40px 1fr; gap: var(--space-16); align-items: start; }
.act > .sv-t-display { font-size: 40px; color: var(--accent); line-height: 1; margin-top: -4px; }
.act .sv-t-heading { font-size: 18px; line-height: 1.2; }
.act .sv-t-label { color: var(--text-muted); margin: 2px 0 var(--space-6); }
.act p { color: var(--text-secondary); font-size: 14px; line-height: 1.45; }

/* 9. Join */
.step { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); }
.step h3 { font-size: 18px; }
.step p, .portal p { font-size: 14px; }
.step .sv-key { width: 28px; height: 28px; }
.reqs { list-style: none; padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.reqs li { display: flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); font-size: 14px; }
.sv-panel-body.portal { flex: 1; padding: var(--space-12) var(--space-16); justify-content: space-between; gap: var(--space-12); }
.connect { padding: var(--space-16) var(--space-20); display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.connect-text { display: flex; flex-direction: column; gap: var(--space-4); }
.connect-text .sv-t-label { color: var(--text-muted); }
.connect code { font-size: 18px; color: var(--text-strong); white-space: nowrap; }
.connect .note { font-size: 13px; color: var(--text-secondary); }

/* 10. Server */
.wrap-1100.sec-server { padding-bottom: 96px; }
.discord { height: 360px; overflow: hidden; }
.discord iframe { display: block; border: 0; width: 100%; height: 360px; }

/* 11. Footer */
.footer { border-top: var(--border-divider); padding: var(--space-20) var(--space-32); display: flex; align-items: center; gap: var(--space-20); flex-wrap: wrap; }
.footer > img { width: 72px; height: auto; flex: none; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-8); flex: 1; min-width: 260px; }
.footer .muted { color: var(--text-muted); }
.disclaimer { max-width: 640px; color: var(--text-muted); font: var(--type-body); font-size: 12px; line-height: 1.5; text-transform: none; letter-spacing: 0; text-wrap: pretty; }

/* Narrow screens */
@media (max-width: 760px) {
  .topbar-nav { display: none; }
  .lore { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .topbar, .wrap-1100, .wrap-1100.sec-waarom, .hero-content, .footer { padding-left: var(--space-16); padding-right: var(--space-16); }
  .region { grid-template-columns: 1fr 110px; gap: var(--space-4) var(--space-16); }
  .region .role { grid-column: 1 / -1; grid-row: 2; }
  .lore-text h2 { font-size: 32px; }
  .shots { grid-auto-rows: 200px; }
}