@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --bg: #120806;
  --bg2: #1e0d07;
  --tekst: #f3e6cf;
  --zacht: #c9b79a;
  --goud: #e0a43a;
  --goud-licht: #ffd257;
  --rood: #c81e14;
  --rand: rgba(214, 150, 50, 0.45);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--tekst); line-height: 1.6;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse 120% 60% at 50% 100%, #3a1406 0%, transparent 60%), linear-gradient(var(--bg), var(--bg2));
  min-height: 100vh;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
a { color: var(--goud-licht); }

h1, h2, .merk {
  font-family: "Cinzel", Georgia, serif; font-weight: 900; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3b8 0%, #ffd257 40%, #f0a42a 60%, #b8650e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 { font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.1; margin: 0.2em 0 0.3em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 0.6em; }
h2::after { content: ""; display: block; width: 120px; height: 3px; margin-top: 10px; background: var(--goud); }
.merk { font-size: 1rem; letter-spacing: 0.2em; margin: 0; text-transform: uppercase; }

.hero { text-align: center; padding: 48px 0 24px; }
.lead { font-size: 1.15rem; color: var(--zacht); max-width: 680px; margin: 0 auto 28px; }
.hero-video { width: 100%; max-width: 960px; border-radius: 10px; border: 3px solid var(--goud); box-shadow: 0 0 0 2px #3a1806, 0 0 40px rgba(255, 110, 20, 0.35); display: block; margin: 0 auto 28px; }

.knop {
  display: inline-block; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 700;
  color: #2a1003; background: linear-gradient(180deg, #ffe08a, #e0a43a); box-shadow: 0 0 0 2px #3a1806, 0 4px 18px rgba(255, 120, 20, 0.35);
}
.knop:hover, .knop:focus-visible { filter: brightness(1.08); }

section { padding: 40px 16px; }
.lijst { padding-left: 1.2em; }
.lijst li { margin-bottom: 0.5em; }
.lijst li::marker { color: var(--goud); }
.stappen li { margin-bottom: 0.5em; }
.stappen li::marker { color: var(--goud-licht); font-weight: 700; }

.raster { display: grid; gap: 16px; margin-top: 16px; }
.drie { grid-template-columns: repeat(3, 1fr); }
.twee { grid-template-columns: repeat(2, 1fr); }
.panelen { grid-template-columns: repeat(3, 1fr); align-items: start; }
figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--rand); }
figcaption { font-size: 0.9rem; color: var(--zacht); margin-top: 6px; }

.prijs { text-align: center; }
.prijs h2::after { margin-left: auto; margin-right: auto; }
.bedrag { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 2rem; color: var(--goud-licht); margin: 0.2em 0; }

.platform { margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--goud); background: rgba(30, 13, 7, 0.6); color: var(--zacht); }
.launch { display: inline-block; margin: 0 0 14px; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #2a1003; background: linear-gradient(180deg, #ffe08a, #e0a43a); }
.pakketten { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 20px; margin: 8px 0 20px; text-align: left; }
.pakket { border: 1px solid var(--rand); border-radius: 10px; padding: 20px 22px; background: rgba(30, 13, 7, 0.7); }
.uitgelicht { border: 2px solid var(--goud); box-shadow: 0 0 24px rgba(255, 120, 20, 0.25); }
.pakket h3 { font-family: "Cinzel", Georgia, serif; font-size: 1.4rem; margin: 0; color: var(--goud-licht); }
.pakket .bedrag { margin: 0.1em 0 0.4em; }
.pakket .lijst { margin: 0; }

footer { padding: 32px 16px 48px; color: var(--zacht); font-size: 0.95rem; border-top: 1px solid var(--rand); margin-top: 24px; }
footer p { margin: 0.3em 0; }
.klein { font-size: 0.8rem; opacity: 0.8; }

@media (max-width: 760px) {
  .drie, .twee { grid-template-columns: 1fr; }
  .panelen { grid-template-columns: 1fr 1fr; }
  .pakketten { grid-template-columns: 1fr; }
}