/* ═══════════════════════════════════════════════════════════════
   ROOTS RP — rootsrp.be
   Gouden uur boven de stad: warm zonlicht, bladgroen, schors en perkament
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.woff") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/Lora-Italic.woff") format("woff"); }

:root {
  --bos: #0e120c;
  --bos-2: #151b12;
  --rand: rgba(243, 230, 204, .10);
  --rand-sterk: rgba(243, 230, 204, .2);
  --perkament: #f3e6cc;
  --tekst: #efe8da;
  --mut: #b4ab98;
  --zon: #f6c27a;
  --zon-licht: #ffe2ad;
  --amber: #e5954a;
  --blad: #8fcf5c;
  --blad-donker: #5f9a3a;
  --schors-licht: #a77a4c;
  --politie: #6cb8ff;
  --ambulance: #ff6b72;
  --garage: #ffc45a;
  --gang: #8fcf5c;
  --breed: 1180px;
  --zacht: cubic-bezier(.22, .8, .24, 1);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bos); color: var(--tekst); font: 400 17px/1.7 "Poppins", system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--zon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--zon-licht); }
:focus-visible { outline: 2px solid var(--zon); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1, h2 { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
b { font-weight: 600; color: var(--perkament); }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--breed), 100% - 32px); margin-inline: auto; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ── knoppen ─────────────────────────────────────────────────── */
.knop {
  --k1: var(--zon-licht); --k2: var(--amber); --kt: #2b1a08; --schaduw: rgba(229, 149, 74, .55);
  position: relative; display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.4em; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 .98rem/1 "Poppins", sans-serif; text-decoration: none;
  color: var(--kt); background: linear-gradient(180deg, var(--k1), var(--k2)); overflow: hidden; isolation: isolate;
  box-shadow: 0 12px 30px -12px var(--schaduw), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.15);
  transition: transform .3s var(--zacht), box-shadow .3s var(--zacht);
}
.knop::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 48%, transparent 66%); transform: translateX(-130%); transition: transform .8s var(--zacht); }
.knop:hover { color: var(--kt); transform: translateY(-2px); box-shadow: 0 18px 38px -12px var(--schaduw), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.15); }
.knop:hover::after { transform: translateX(130%); }
.knop:active { transform: translateY(0) scale(.98); }
.knop .ico { width: 1.15em; height: 1.15em; }
.knop--discord { --k1: #6d78ff; --k2: #4f5ae6; --kt: #fff; --schaduw: rgba(88, 101, 242, .6); }
.knop--discord:hover { color: #fff; }
.knop--glas { --kt: var(--tekst); background: rgba(14, 18, 12, .35); box-shadow: inset 0 0 0 1px var(--rand-sterk); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.knop--glas:hover { color: #fff; background: rgba(243, 230, 204, .1); box-shadow: inset 0 0 0 1px rgba(243, 230, 204, .4); }
.knop--glas::after { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%); }

/* ── navigatie ───────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 20px 0; transition: background .4s, box-shadow .4s, padding .4s; }
.nav::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 7, .55), transparent); transition: opacity .4s; }
.nav.vast { padding: 10px 0; background: rgba(14, 18, 12, .8); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--rand); }
.nav.vast::before { opacity: 0; }
.nav__in { display: flex; align-items: center; gap: 28px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--perkament); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.3rem; }
.merk:hover { color: #fff; }
.merk img { width: 44px; height: 44px; transition: transform .6s var(--zacht); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.merk:hover img { transform: rotate(-10deg) scale(1.08); }
.nav__links { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__links a { display: block; padding: 8px 14px; border-radius: 999px; color: #e6decd; text-decoration: none; font-weight: 500; font-size: .95rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #fff; background: rgba(243, 230, 204, .1); }
.nav__rechts { display: flex; align-items: center; gap: 12px; }
.pil { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(14, 18, 12, .45); box-shadow: inset 0 0 0 1px var(--rand-sterk); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; font-weight: 500; color: #e6decd; white-space: nowrap; }
.stip { width: 9px; height: 9px; border-radius: 50%; background: #7d7768; flex: none; position: relative; }
.online .stip { background: var(--blad); box-shadow: 0 0 12px var(--blad); }
.online .stip::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--blad); animation: ping 2.2s var(--zacht) infinite; }
.offline .stip { background: #ff7b6b; }
@keyframes ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.nav .knop { padding: .72em 1.15em; font-size: .9rem; }
.menuknop { display: none; background: rgba(14, 18, 12, .45); border: 0; color: var(--tekst); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rand-sterk); }
.menuknop .ico { width: 20px; height: 20px; margin: auto; }

/* ── hero: de sleutelafbeelding ─────────────────────────────── */
.hero { position: relative; min-height: max(680px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: 140px 0 76px; }
.buhne { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #2a2116; }
.buhne__beeld { position: absolute; inset: 0; }
.buhne__laag > img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.js .buhne__beeld { animation: inzoom 3.4s var(--zacht) both; }
@keyframes inzoom { from { transform: scale(1.14); filter: brightness(.3) saturate(.6); } }
.buhne__laag { position: absolute; inset: 0; pointer-events: none; transition: transform 1.4s var(--zacht); }
/* zon die achter de boom brandt */
.zon { position: absolute; left: 34.5%; top: 42%; width: 0; height: 0; }
.zon::before { content: ""; will-change: transform, opacity; position: absolute; left: -26vmax; top: -26vmax; width: 52vmax; height: 52vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 150, .38), rgba(255, 170, 80, .14) 40%, transparent 72%); animation: zonpuls 7s ease-in-out infinite; }
.zon::after { content: ""; position: absolute; left: -45vmax; top: -45vmax; width: 90vmax; height: 90vmax; background: url("../img/stralen.webp") center / contain no-repeat; animation: draai 120s linear infinite; will-change: transform; }
@keyframes zonpuls { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes draai { to { transform: rotate(1turn); } }
/* glans over het woordmerk dat in de afbeelding staat */
.glans { position: absolute; left: 73.7%; top: 4.5%; width: 22.7%; height: 33.8%; -webkit-mask: url("../img/woordmerk.webp") center / 100% 100% no-repeat; mask: url("../img/woordmerk.webp") center / 100% 100% no-repeat; background: linear-gradient(110deg, transparent 40%, rgba(255, 246, 222, .55) 50%, transparent 60%) 0 0 / 300% 100% no-repeat; animation: glans 8s 3s ease-in-out infinite; }
@keyframes glans { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0% 0; } }
.buhne__waas { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 7, .4) 0%, transparent 16%, transparent 46%, rgba(14, 18, 12, .55) 64%, rgba(14, 18, 12, .88) 82%, var(--bos) 100%),
    radial-gradient(55% 45% at 30% 100%, rgba(8, 10, 7, .55), transparent 75%); }
.vonken, .blaadjes { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
.woordmerk-mobiel { display: none; }

.hero__in { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px 60px; align-items: end; }
.hero__tekst > *, .hero__actie > * { animation: op-tekst 1.1s var(--zacht) both; }
.hero__tekst > :nth-child(1) { animation-delay: 1s; }
.hero__tekst > :nth-child(2) { animation-delay: 1.15s; }
.hero__tekst > :nth-child(3) { animation-delay: 1.3s; }
.hero__actie > :nth-child(1) { animation-delay: 1.45s; }
.hero__actie > :nth-child(2) { animation-delay: 1.6s; }
.hero__tekst .hero__lead { margin-bottom: 0; }
.hero__actie .hero__knoppen { margin-bottom: 16px; }
@keyframes op-tekst { from { transform: translateY(28px); opacity: 0; filter: blur(8px); } }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.05; color: var(--perkament); text-shadow: 0 2px 0 rgba(60, 36, 14, .6), 0 10px 40px rgba(0,0,0,.7); margin-bottom: 8px; }
.hero__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--zon); text-shadow: 0 2px 20px rgba(0,0,0,.8); margin-bottom: 16px; }
.hero__lead { font-size: 1.04rem; color: #e9e1d0; text-shadow: 0 1px 12px rgba(0,0,0,.9); max-width: 33em; margin-bottom: 26px; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

.status { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(30, 38, 24, .62), rgba(12, 15, 10, .62)); box-shadow: inset 0 0 0 1px var(--rand-sterk), 0 30px 60px -25px rgba(0,0,0,.8); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); }
.status__getal { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.status__getal small { font-size: .95rem; font-weight: 500; color: var(--mut); letter-spacing: 0; }
.status__label { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: .9rem; margin-top: 7px; }
.status__balk { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgba(243, 230, 204, .08); overflow: hidden; }
.status__balk i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blad-donker), var(--blad), var(--zon)); box-shadow: 0 0 14px rgba(143, 207, 92, .8); transition: width 1.6s var(--zacht); }
.status__connect { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code { display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 10px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--rand); font: 500 .88rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #efe6d4; }
.kopieer { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; background: rgba(243, 230, 204, .08); color: var(--tekst); transition: background .2s, color .2s, transform .2s; }
.kopieer:hover { background: rgba(243, 230, 204, .16); }
.kopieer.klaar { color: #1b2a10; background: var(--blad); transform: scale(1.08); }
.scrolhint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 4; animation: op-tekst 1s 2.2s both; transition: opacity .4s; }
.scrolhint span { display: block; width: 24px; height: 38px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(243, 230, 204, .35); position: relative; }
.scrolhint span::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--zon); animation: wiel 1.8s ease-in-out infinite; }
@keyframes wiel { 60% { transform: translateY(10px); opacity: 0; } 61% { transform: none; opacity: 0; } }
.nav.vast ~ main .scrolhint { opacity: 0; }

/* ── secties ─────────────────────────────────────────────────── */
.sectie { position: relative; padding: 130px 0; }
.kop { max-width: 640px; margin-bottom: 58px; }
.kop p { color: var(--mut); font-size: 1.1rem; margin: 18px 0 0; }
.js .onthul { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--zacht), transform 1s var(--zacht); transition-delay: calc(var(--i, 0) * 100ms); }
.js .onthul.zichtbaar { opacity: 1; transform: none; }
.js .kop h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em 0; margin-bottom: -.14em; }
.js .kop h2 .w > span { display: inline-block; transform: translateY(115%) rotate(5deg); transition: transform 1s var(--zacht); transition-delay: calc(var(--w) * 70ms + 80ms); }
.js .kop.zichtbaar h2 .w > span { transform: none; }
.js .kop.onthul { opacity: 1; transform: none; }
.js .kop.onthul > :not(h2) { opacity: 0; transform: translateY(18px); transition: opacity .9s .35s var(--zacht), transform .9s .35s var(--zacht); }
.js .kop.zichtbaar > :not(h2) { opacity: 1; transform: none; }

/* ── visie: zo spelen wij ───────────────────────────────────── */
.visie { padding-top: 110px; padding-bottom: 40px; }
.visie__in { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: start; }
.visie .kop { margin-bottom: 0; position: sticky; top: 130px; }
.pijlers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pijlers li { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(36, 44, 30, .7), rgba(16, 20, 14, .7)); box-shadow: inset 0 0 0 1px var(--rand); transition: box-shadow .4s, transform .5s var(--zacht); }
.pijlers li:hover { box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .35); }
.pijler__ico { width: 50px; height: 50px; border-radius: 16px; flex: none; display: grid; place-items: center; color: var(--zon); background: linear-gradient(160deg, rgba(246, 194, 122, .22), rgba(246, 194, 122, .06)); box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .35); }
.pijler__ico .ico { width: 22px; height: 22px; }
.pijlers h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--perkament); margin: 2px 0 6px; }
.pijlers p { margin: 0; color: #d6cebd; font-size: .97rem; }

/* ── zo kom je de stad in: over de echte wortels ─────────────── */
.ondergrond { overflow: hidden; isolation: isolate; }
.ondergrond__beeld { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: -2; background: url("../img/wortels.webp") center 30% / cover no-repeat; opacity: .34; }
.ondergrond::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bos) 0%, rgba(14, 18, 12, .5) 24%, rgba(14, 18, 12, .7) 62%, var(--bos) 100%), radial-gradient(60% 50% at 25% 40%, rgba(246, 194, 122, .12), transparent 70%); }
.stappen-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.stappen-grid .kop { position: sticky; top: 130px; margin-bottom: 0; }
.eisen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.eisen li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: rgba(14, 18, 12, .55); box-shadow: inset 0 0 0 1px var(--rand-sterk); font-size: .92rem; color: #e6decd; }
.eisen .ico { color: var(--zon); }
.stappen { position: relative; list-style: none; margin: 0; padding: 0 0 0 80px; }
.stappen__wortel { position: absolute; left: 0; top: -10px; bottom: 30px; width: 58px; }
.stappen__wortel svg { width: 100%; height: 100%; overflow: visible; }
.stappen__wortel .spoor { stroke: rgba(167, 122, 76, .3); }
.stappen__wortel .vol { stroke: url(#wortelverloop); stroke-dasharray: 1; stroke-dashoffset: var(--groei, 1); filter: drop-shadow(0 0 8px rgba(246, 194, 122, .6)); }
.stap { position: relative; padding: 4px 0 60px; }
.stap:last-child { padding-bottom: 0; }
.stap__nr { position: absolute; left: -80px; top: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.45rem; color: var(--schors-licht); background: #1a160f; box-shadow: inset 0 0 0 2px rgba(167, 122, 76, .5); transition: color .6s, background .6s, box-shadow .6s, transform .6s var(--zacht); }
.stap.actief .stap__nr { color: #3a2208; background: radial-gradient(circle at 35% 30%, #fff1cf, var(--zon) 50%, var(--amber)); box-shadow: 0 0 0 7px rgba(246, 194, 122, .15), 0 0 34px rgba(255, 170, 80, .65); transform: scale(1.06); }
.stap h3 { font-size: 1.45rem; margin: 11px 0 8px; }
.stap p { color: #d6cebd; max-width: 32em; }

/* ── rollen ──────────────────────────────────────────────────── */
.rollen-sectie { overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--bos), var(--bos-2) 50%, var(--bos)); }
.sfeer { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.sfeer i { position: absolute; width: 900px; height: 900px; border-radius: 50%; opacity: .22; will-change: transform; animation: drijf 24s ease-in-out infinite alternate; }
.sfeer i:nth-child(1) { background: radial-gradient(closest-side, var(--politie), transparent); left: -8%; top: 14%; }
.sfeer i:nth-child(2) { background: radial-gradient(closest-side, var(--ambulance), transparent); right: -6%; top: 8%; animation-delay: -6s; }
.sfeer i:nth-child(3) { background: radial-gradient(closest-side, var(--zon), transparent); left: 12%; bottom: -10%; animation-delay: -11s; }
.sfeer i:nth-child(4) { background: radial-gradient(closest-side, var(--blad), transparent); right: 4%; bottom: -14%; animation-delay: -16s; }
@keyframes drijf { 50% { transform: translate(60px, -40px) scale(1.12); } 100% { transform: translate(-40px, 30px) scale(.95); } }
.rollen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; perspective: 1200px; }
.rol { --k: var(--blad); --mx: 50%; --my: 50%; position: relative; padding: 32px 32px 28px 36px; border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, rgba(36, 44, 30, .9), rgba(16, 20, 14, .95)); box-shadow: inset 0 0 0 1px var(--rand), 0 30px 60px -30px rgba(0,0,0,.9); transform-style: preserve-3d; transition: transform .6s var(--zacht), box-shadow .4s; }
.rol::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--k); box-shadow: 0 0 18px var(--k); }
.rol::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(440px circle at var(--mx) var(--my), color-mix(in srgb, var(--k) 20%, transparent), transparent 60%); }
.rol:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent), 0 34px 70px -30px color-mix(in srgb, var(--k) 40%, black); }
.rol:hover::after { opacity: 1; }
.rol__kop { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; transform: translateZ(30px); }
.rol__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; color: var(--k); background: linear-gradient(160deg, color-mix(in srgb, var(--k) 28%, transparent), color-mix(in srgb, var(--k) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 45%, transparent); }
.rol__ico .ico { width: 26px; height: 26px; }
.rol h3 { font-family: var(--serif); font-style: italic; font-size: 1.6rem; font-weight: 600; }
.rol__sub { color: var(--k); font-size: .9rem; font-weight: 500; margin-top: 3px; }
.rol p { color: #d6cebd; margin-bottom: 18px; transform: translateZ(18px); }
.rol ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; transform: translateZ(14px); }
.rol li { display: flex; gap: 10px; align-items: baseline; color: #e2dac9; font-size: .95rem; }
.rol li .ico { color: var(--k); width: .85em; height: .85em; translate: 0 1px; }
.rol__hoe { margin: 0; padding-top: 16px; border-top: 1px solid var(--rand); color: var(--mut); font-size: .9rem; transform: translateZ(10px); }
.rol--politie { --k: var(--politie); }
.rol--ambulance { --k: var(--ambulance); }
.rol--garage { --k: var(--garage); }
.rol--gang { --k: var(--gang); }
.burger { margin-top: 26px; padding: 24px 30px; border-radius: 22px; background: rgba(243, 230, 204, .04); box-shadow: inset 0 0 0 1px var(--rand); }
.burger p { margin: 0; color: #d6cebd; max-width: 50em; }
.burger strong { color: var(--perkament); font-family: var(--serif); font-style: italic; font-size: 1.15rem; font-weight: 600; }

/* ── handgemaakt: wat er al in de stad zit ─────────────────── */
.handgemaakt { overflow: hidden; isolation: isolate; }
.handgemaakt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 15% 30%, rgba(246, 194, 122, .08), transparent 70%), radial-gradient(45% 40% at 90% 75%, rgba(143, 207, 92, .07), transparent 70%); }
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tegel { --mx: 50%; --my: 50%; position: relative; padding: 26px 26px 24px; border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, rgba(30, 37, 25, .85), rgba(15, 19, 13, .9)); box-shadow: inset 0 0 0 1px var(--rand); transition: box-shadow .4s, transform .5s var(--zacht); }
.tegel::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(246, 194, 122, .14), transparent 60%); }
.tegel:hover { box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .35); transform: translateY(-3px); }
.tegel:hover::after { opacity: 1; }
.tegel__ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; color: var(--zon); background: linear-gradient(160deg, rgba(246, 194, 122, .22), rgba(246, 194, 122, .05)); box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .32); }
.tegel__ico .ico { width: 22px; height: 22px; }
.tegel h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--perkament); margin-bottom: 8px; }
.tegel p { margin: 0; color: #d0c8b6; font-size: .95rem; }
.tegel--groot { grid-column: span 2; padding: 34px 34px 32px; background: linear-gradient(135deg, rgba(58, 44, 26, .9), rgba(20, 24, 16, .95) 60%); }
.tegel--groot::before { content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(246, 194, 122, .2), transparent); }
.tegel--groot h3 { font-size: 1.8rem; }
.tegel--groot p { font-size: 1.02rem; max-width: 40em; color: #e2dac9; }
.tegel--groot .tegel__ico { width: 56px; height: 56px; }
.tegel--groot .tegel__ico .ico { width: 26px; height: 26px; }

/* ── economie ──────────────────────────────────────────────── */
.economie { background: linear-gradient(180deg, var(--bos), var(--bos-2) 50%, var(--bos)); }
.tegel--gsm { display: grid; grid-template-columns: 1fr 250px; gap: 28px; align-items: center; background: linear-gradient(135deg, rgba(16, 22, 26, .95), rgba(10, 13, 10, .97) 70%); }
.tegel--gsm::before { background: radial-gradient(closest-side, rgba(120, 160, 190, .16), transparent); }
.tegel--gsm p + p { margin-top: 10px; }
.melding { position: relative; padding: 14px 16px 16px; border-radius: 20px; background: rgba(28, 32, 36, .78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -18px rgba(0,0,0,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: trilling 6s 2s ease-in-out infinite; }
.melding__kop { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; color: #9aa4ad; margin-bottom: 6px; letter-spacing: .01em; }
.melding__kop span:first-child { color: #dfe6ec; }
.melding__tekst { margin: 0 !important; min-height: 3.2em; font-size: .92rem !important; color: #eef2f5 !important; }
.melding__tekst::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--zon); animation: knipper 1s steps(1) infinite; }
@keyframes knipper { 50% { opacity: 0; } }
@keyframes trilling { 0%, 88%, 100% { transform: none; } 90% { transform: translateX(-2px) rotate(-.6deg); } 92% { transform: translateX(2px) rotate(.6deg); } 94% { transform: translateX(-2px); } 96% { transform: translateX(1px); } }

.ontdek { margin: 56px auto 0; max-width: 34em; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.45; color: var(--mut); }
.ontdek em { display: block; color: var(--perkament); text-shadow: 0 0 24px rgba(246, 194, 122, .45); animation: gloei 5s ease-in-out infinite; }
@keyframes gloei { 50% { text-shadow: 0 0 34px rgba(246, 194, 122, .75); color: #fff3d9; } }

/* ── eerlijk is eerlijk ─────────────────────────────────────── */
.verwacht { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.verwacht__kol { padding: 30px 32px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--rand); }
.verwacht__kol h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.55rem; margin-bottom: 18px; color: var(--perkament); }
.verwacht__kol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.verwacht__kol li { display: flex; gap: 12px; align-items: baseline; color: #d6cebd; }
.verwacht__kol li .ico { width: .95em; height: .95em; flex: none; translate: 0 2px; }
.verwacht__kol--niet { background: linear-gradient(160deg, rgba(60, 24, 22, .45), rgba(16, 14, 12, .8)); }
.verwacht__kol--niet .ico { color: #ff8a7a; }
.verwacht__kol--niet li span { text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, .55); text-decoration-thickness: 1.5px; }
.verwacht__kol--wel { background: linear-gradient(160deg, rgba(40, 58, 26, .55), rgba(14, 18, 12, .85)); box-shadow: inset 0 0 0 1px rgba(143, 207, 92, .25); }
.verwacht__kol--wel .ico { color: var(--blad); }
.verwacht__kol--wel li span { color: #ece5d6; }
.luisteren { margin-top: 20px; display: flex; align-items: center; gap: 22px 26px; padding: 28px 32px; border-radius: 24px; background: linear-gradient(120deg, rgba(246, 194, 122, .12), rgba(246, 194, 122, .03) 60%); box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .28); }
.luisteren__ico { width: 58px; height: 58px; border-radius: 18px; flex: none; display: grid; place-items: center; color: #3a2208; background: radial-gradient(circle at 35% 30%, #fff1cf, var(--zon) 55%, var(--amber)); box-shadow: 0 10px 30px -10px rgba(255, 170, 80, .7); }
.luisteren__ico .ico { width: 26px; height: 26px; }
.luisteren h3 { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--perkament); margin-bottom: 6px; }
.luisteren p { margin: 0; color: #d6cebd; max-width: 46em; }
.luisteren .knop { margin-left: auto; flex: none; }

/* ── regels in het kort ─────────────────────────────────────── */
.kernregels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 24px; overflow: hidden; background: var(--rand); box-shadow: 0 0 0 1px var(--rand); }
.kernregel { position: relative; padding: 30px 30px 28px; background: #12170f; transition: background .4s; }
.kernregel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--zon), var(--blad)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--zacht); }
.kernregel:hover { background: #182014; }
.kernregel:hover::before { transform: scaleX(1); }
.kernregel b { display: block; font-family: var(--serif); font-style: italic; font-size: 1.3rem; margin-bottom: 6px; color: var(--perkament); }
.kernregel p { margin: 0; color: var(--mut); font-size: .95rem; }
.regels-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq-grid .kop { position: sticky; top: 130px; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: rgba(243, 230, 204, .035); box-shadow: inset 0 0 0 1px var(--rand); transition: background .3s, box-shadow .3s; overflow: hidden; }
.faq details[open] { background: rgba(243, 230, 204, .06); box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .4); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--zon); transition: transform .45s var(--zacht); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq .antwoord { padding: 0 24px 20px; color: #d6cebd; }
.faq .antwoord p:last-child { margin: 0; }

/* ── slot: de stad bij zonsondergang ─────────────────────────── */
.slot { position: relative; padding: 170px 0 150px; text-align: center; overflow: hidden; isolation: isolate; }
.slot__beeld { position: absolute; left: 0; right: 0; top: -20%; height: 140%; z-index: -2; background: url("../img/stad.webp") center 45% / cover no-repeat; }
.slot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bos) 0%, rgba(14, 18, 12, .1) 26%, rgba(14, 18, 12, .2) 55%, rgba(14, 18, 12, .75) 82%, var(--bos) 100%); }
.slot img { width: min(340px, 70vw); margin: 0 auto 6px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); animation: zweef 7s ease-in-out infinite; }
@keyframes zweef { 50% { transform: translateY(-12px); } }
.slot h2 { color: var(--perkament); text-shadow: 0 4px 30px rgba(0,0,0,.8); margin-bottom: 14px; }
.slot p { color: #ece3d2; font-size: 1.12rem; margin: 0 auto 30px; max-width: 32em; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.slot .hero__knoppen { justify-content: center; margin: 0; }

.voet { border-top: 1px solid var(--rand); padding: 40px 0 46px; color: var(--mut); font-size: .9rem; }
.voet__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; }
.voet nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.voet nav a { color: #e6decd; text-decoration: none; }
.voet nav a:hover { color: #fff; }
.voet__klein { width: 100%; margin: 6px 0 0; font-size: .82rem; color: #8a826f; }

/* ── regelspagina ───────────────────────────────────────────── */
.paginakop { position: relative; padding: 190px 0 80px; overflow: hidden; isolation: isolate; }
.paginakop__beeld { position: absolute; inset: 0; z-index: -2; background: url("../img/hero-1600.webp") 30% 92% / cover no-repeat; animation: inzoom 2.6s var(--zacht) both; }
.paginakop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 7, .5), rgba(14, 18, 12, .7) 55%, var(--bos)), linear-gradient(90deg, rgba(8, 10, 7, .75), transparent 70%); }
.paginakop h1 { font-size: clamp(3rem, 6.5vw, 5rem); color: var(--perkament); text-shadow: 0 2px 0 rgba(60, 36, 14, .6), 0 10px 40px rgba(0,0,0,.6); margin-bottom: 14px; animation: op-tekst 1s .3s var(--zacht) both; }
.paginakop p { color: #ece3d2; max-width: 40em; font-size: 1.1rem; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.8); animation: op-tekst 1s .45s var(--zacht) both; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; margin-top: 34px; border-radius: 999px; background: rgba(14, 18, 12, .55); box-shadow: inset 0 0 0 1px var(--rand-sterk); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; animation: op-tekst 1s .6s var(--zacht) both; }
.tabs button { position: relative; z-index: 1; border: 0; background: none; color: #e6decd; font: 500 .98rem "Poppins", sans-serif; padding: 11px 22px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: color .3s; }
.tabs button[aria-selected="true"] { color: #2b1a08; }
.tabs__glijder { position: absolute; z-index: 0; top: 5px; bottom: 5px; border-radius: 999px; background: linear-gradient(180deg, var(--zon-licht), var(--amber)); box-shadow: 0 8px 22px -8px rgba(229, 149, 74, .8); transition: left .5s var(--zacht), width .5s var(--zacht); }
.regels-lay { display: grid; grid-template-columns: 270px 1fr; gap: 70px; align-items: start; padding: 30px 0 110px; }
.regels-lay > aside { align-self: stretch; }
.inhoud { position: sticky; top: 110px; }
.inhoud p { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--perkament); margin: 0 0 12px; }
.inhoud ol { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; gap: 2px; border-left: 1px solid var(--rand); }
.inhoud a { display: block; padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: #b9b09d; text-decoration: none; font-size: .9rem; line-height: 1.4; transition: color .25s, border-color .25s, background .25s; }
.inhoud a:hover { color: #fff; }
.inhoud a.hier { color: var(--zon); border-left-color: var(--zon); background: linear-gradient(90deg, rgba(246, 194, 122, .1), transparent); }
.document { max-width: 780px; }
.document[hidden] { display: none; }
.document.wissel { animation: op-tekst .6s var(--zacht) both; }
.document__intro { font-size: 1.08rem; color: #ece3d2; padding: 24px 26px; border-radius: 18px; background: rgba(246, 194, 122, .07); box-shadow: inset 0 0 0 1px rgba(246, 194, 122, .25); margin-bottom: 44px; }
.document__intro p:last-child { margin: 0; }
.regel { padding: 36px 0; border-top: 1px solid var(--rand); scroll-margin-top: 100px; }
.regel:first-of-type { border-top: 0; padding-top: 0; }
.regel h2 { font-size: 1.75rem; display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; color: var(--perkament); }
.regel h2 span { font-size: 1.05rem; color: var(--zon); min-width: 2ch; font-variant-numeric: tabular-nums; }
.regel ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.regel li { position: relative; padding-left: 24px; color: #d6cebd; }
.regel li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 9px; height: 9px; border-radius: 50% 0; background: var(--blad); transform: rotate(-45deg); box-shadow: 0 0 8px rgba(143, 207, 92, .5); }
.regel p { color: #d6cebd; }
.regel strong { color: #fff; font-weight: 700; }
.regels-voet { margin-top: 30px; padding: 26px 28px; border-radius: 20px; background: rgba(243, 230, 204, .04); box-shadow: inset 0 0 0 1px var(--rand); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: 780px; }
.regels-voet p { margin: 0; color: #d6cebd; }

/* ── responsief ─────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .stappen-grid, .faq-grid, .visie__in { grid-template-columns: 1fr; gap: 44px; }
  .stappen-grid .kop, .faq-grid .kop, .visie .kop { position: static; }
  .kernregels, .tegels { grid-template-columns: repeat(2, 1fr); }
  .regels-lay { grid-template-columns: 1fr; gap: 0; }
  .inhoud { display: none; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__actie { max-width: 560px; }
  .buhne__waas { background: linear-gradient(180deg, rgba(8, 10, 7, .4) 0%, transparent 16%, rgba(14, 18, 12, .2) 26%, rgba(14, 18, 12, .62) 40%, rgba(14, 18, 12, .88) 62%, var(--bos) 100%); }
}
@media (max-width: 860px) {
  .woordmerk-mobiel ~ .hero__in { gap: 26px; }
  .nav__links, .nav .knop--discord span { display: none; }
  .menuknop { display: grid; }
  .nav.open .nav__links { display: grid; position: absolute; top: 100%; left: 16px; right: 16px; padding: 10px; border-radius: 20px; background: rgba(16, 20, 14, .97); box-shadow: inset 0 0 0 1px var(--rand), 0 30px 60px rgba(0,0,0,.5); animation: op-tekst .35s var(--zacht); }
  .nav.open .nav__links a { padding: 13px 16px; font-size: 1.02rem; }
  .nav.open { background: rgba(14, 18, 12, .94); }
  .nav__rechts { margin-left: auto; }
  .rollen { grid-template-columns: 1fr; }
  .glans { display: none; }
  .buhne__laag > img { object-position: 33% 40%; }
  .woordmerk-mobiel { display: block; position: absolute; z-index: 3; top: 96px; left: 50%; width: min(240px, 58vw); translate: -50% 0; filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)); animation: op-tekst 1.2s .6s var(--zacht) both; }
  .woordmerk-mobiel img { width: 100%; animation: zweef 7s 1.8s ease-in-out infinite; }
  .hero { padding-top: 380px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero { padding: 330px 0 64px; }
  .sectie { padding: 92px 0; }
  .status { grid-template-columns: 1fr; }
  .status .knop { justify-self: start; }
  .kernregels, .tegels { grid-template-columns: 1fr; }
  .tegel--gsm, .verwacht { grid-template-columns: 1fr; }
  .luisteren { flex-wrap: wrap; }
  .luisteren .knop { margin-left: 0; }
  .tegel--groot { grid-column: auto; }
  .stappen { padding-left: 64px; }
  .stap__nr { left: -64px; width: 48px; height: 48px; font-size: 1.2rem; }
  .stappen__wortel { width: 48px; }
  .rol { padding: 26px 22px 24px 26px; }
  .pil .pil__tekst { display: none; }
  .merk span { display: none; }
  .tabs { display: flex; }
  .tabs button { flex: 1; justify-content: center; padding: 11px 10px; }
  .code { font-size: .8rem; }
  .slot { padding: 120px 0 110px; }
}

/* Staat "animaties beperken" aan op de computer (bv. Windows: Animatie-effecten uit)?
   Dan blijven de animaties werken, maar zonder grote bewegingen: geen inzoomen, parallax of kantelen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .buhne__beeld, .paginakop__beeld { animation-name: oplichten; }
  .js .onthul { transform: none; }
}
@keyframes oplichten { from { filter: brightness(.3) saturate(.6); } }