/* Marco Nijland — gedeelde stijl voor alle pagina's. Kleuren als tokens: thema zwart/goud (standaard). Een ander thema overschrijft alleen deze tokens. */
:root{
  --accent:#D4AF37;--accent-hi:#F5D97B;
  --line:rgba(212,175,55,.24);--line-strong:rgba(212,175,55,.4);
  --bg:#0b0b0b;--bg-2:#070707;--card:#101010;
  --ink:#fff;--heading:#fff;--text-2:#C9C9C9;--text-3:#9A9A9A;
  --hl:var(--accent);--eyebrow:var(--accent);--num:var(--accent);--emph:var(--accent);
  --link:var(--accent);--link-hover:var(--accent-hi);--nav-active:var(--accent);--logo-accent:var(--accent);
  --btn-bg:var(--accent);--btn-fg:#0b0b0b;--btn-hover:var(--accent-hi);--btn-hover-fg:#0b0b0b;
  --ghost-fg:#fff;--ghost-line:rgba(255,255,255,.35);--ghost-hover:var(--accent);
  --featured:var(--accent);--subtle-line:rgba(255,255,255,.06);
  --cta-bg:linear-gradient(100deg,#2a2416 0%,#131210 45%,#0e0e0e 100%);--cta-ink:#fff;--cta-text:var(--text-2);
  --cta-btn-bg:var(--btn-bg);--cta-btn-fg:var(--btn-fg);--cta-btn-hover:var(--btn-hover);--cta-ghost-line:rgba(255,255,255,.35);
  --footer-bg:var(--bg);--footer-ink:#fff;--footer-text:var(--text-2);--footer-muted:var(--text-3);--footer-h4:var(--accent);--footer-line:rgba(255,255,255,.08);
  --overlay:rgba(0,0,0,.75);--modal-bg:#111;--input-bg:var(--bg);--input-line:rgba(255,255,255,.18);
  --font:"Montserrat",system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover)}
h1,h2,h3,p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:1640px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--line)}
.section.alt{background:var(--bg-2);border-bottom:1px solid var(--line)}
.section.flush{border-top:0}

.rule{display:block;width:80px;height:4px;background:var(--accent);margin-bottom:40px}
.eyebrow{display:block;font:700 13px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:20px}
.h1{font:400 clamp(40px,5.6vw,84px)/1.02 var(--font);letter-spacing:.02em;text-transform:uppercase}
.h2{font:400 clamp(34px,4.4vw,60px)/1.05 var(--font);letter-spacing:.02em;text-transform:uppercase}
.h3{font:600 22px/1.25 var(--font);letter-spacing:.04em;text-transform:uppercase}
.gold{color:var(--hl)}
.h1,.h2,.h3,.step h3,.layer h3,.loc h3,.gear h3,.callout p,.article h2,.modal h2{color:var(--heading)}
.muted{font:400 clamp(16px,1.4vw,20px)/1.55 var(--font);color:var(--text-2);max-width:640px}
.body{font:400 16px/1.65 var(--font);color:var(--text-2)}
.body+.body{margin-top:16px}
.mt-s{margin-top:20px}.mt-m{margin-top:32px}.mt-l{margin-top:48px}.mt-xl{margin-top:64px}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-fg);border:0;font:700 14px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;padding:22px 40px;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s;white-space:nowrap;flex-shrink:0}
.btn:hover{background:var(--btn-hover);color:var(--btn-hover-fg)}
.btn.ghost{background:transparent;color:var(--ghost-fg);box-shadow:inset 0 0 0 1px var(--ghost-line)}
.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--ghost-hover);color:var(--ghost-hover)}
.btn.small{padding:18px 28px;font-size:13px}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.link-more{font:700 13px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:32px;height:90px}
.logo{color:var(--heading);font:400 clamp(20px,2vw,28px)/1 var(--font);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.logo:hover{color:var(--heading)}.logo span{color:var(--logo-accent)}
.header-right{display:flex;align-items:center;gap:clamp(24px,3vw,56px)}
.nav{display:flex;gap:clamp(20px,2.4vw,40px)}
.nav a{color:var(--ink);font:700 14px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;padding:10px 0;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--nav-active)}.nav a.on{border-color:var(--accent)}
.burger{display:none;background:none;border:0;padding:0;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{display:block;width:26px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.site-header.open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.site-header.open .burger i:nth-child(2){opacity:0}
.site-header.open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mob{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mob .wrap{padding-bottom:32px}
.mob a:not(.btn){display:block;padding:22px 0;border-bottom:1px solid var(--line);color:var(--ink);font:700 15px/1 var(--font);letter-spacing:.2em;text-transform:uppercase}
.mob a.on,.mob a:not(.btn):hover{color:var(--nav-active)}
.mob .btn{width:100%;margin-top:28px}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(56px,8vw,120px);padding-bottom:clamp(56px,8vw,120px)}
.hero .muted{margin-top:32px}
.hero .btns{margin-top:48px}
.photo{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--card)}
.photo img{width:100%;height:100%;object-fit:cover}
.r45{aspect-ratio:4/5}.r1610{aspect-ratio:16/10}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1/1}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:40px var(--pad) 40px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat+.stat{padding-left:clamp(20px,3vw,48px)}
.stat b{display:block;font:300 clamp(44px,5vw,72px)/1 var(--font);color:var(--num)}
.stat span{display:block;margin-top:14px;font:700 12px/1.4 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}

/* Grids & kaarten */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
.split.top{align-items:start}
.card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card)}
.card .inner{padding:32px;display:flex;flex-direction:column;gap:16px;flex:1}
.card .num{font:700 13px/1 var(--font);letter-spacing:.2em;color:var(--eyebrow)}
.card .foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px}
.card .foot span{font:600 15px/1.3 var(--font)}
a.card{color:var(--ink);transition:border-color .2s}
a.card:hover{border-color:var(--line-strong);color:var(--ink)}
a.card:hover .link-more{color:var(--link-hover)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.step{display:flex;flex-direction:column;gap:16px}
.step b{font:300 clamp(56px,6vw,88px)/1 var(--font);color:var(--num)}
.step h3{font:600 20px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase}
.step p{font:400 16px/1.6 var(--font);color:var(--text-2);max-width:380px}

/* Lijst met gouden streepjes */
.dash-list li{position:relative;padding:22px 0 22px 44px;border-bottom:1px solid var(--line);font:400 17px/1.55 var(--font);color:var(--ink)}
.dash-list li:first-child{border-top:1px solid var(--line)}
.dash-list li::before{content:"";position:absolute;left:0;top:33px;width:24px;height:2px;background:var(--accent)}

/* Callout */
.callout{border-left:4px solid var(--emph);background:var(--card);padding:clamp(28px,4vw,48px)}
.callout p{font:400 clamp(22px,2.4vw,34px)/1.3 var(--font);letter-spacing:.01em;text-transform:uppercase}
.callout small{display:block;margin-top:20px;font:700 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}

/* Prijzen */
.price{font:300 clamp(48px,5vw,68px)/1 var(--font);color:var(--num)}
.price-sub{font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.tag{align-self:flex-start;font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--btn-fg);background:var(--btn-bg);padding:8px 12px}
.tag.line{background:transparent;color:var(--eyebrow);box-shadow:inset 0 0 0 1px var(--line-strong)}
.checks li{padding:12px 0;border-bottom:1px solid var(--subtle-line);font:400 15px/1.5 var(--font);color:var(--text-2)}
.checks li::before{content:"— ";color:var(--accent)}
.card.featured{border-color:var(--featured)}

/* Quotes */
.quote{border:1px solid var(--line);background:var(--card);padding:36px;display:flex;flex-direction:column;gap:24px}
.quote p{font:400 17px/1.65 var(--font);color:var(--ink)}
.quote p::before{content:"“";display:block;font:300 64px/.6 var(--font);color:var(--accent);margin-bottom:12px}
.quote cite{margin-top:auto;font-style:normal;font:700 13px/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
.quote cite span{display:block;color:var(--text-3);font-weight:400;letter-spacing:.08em;text-transform:none;margin-top:4px;font-size:14px}

/* Uitklapbare blokken (FAQ, modules) — geen JS nodig */
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-of-type{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px 0;font:600 clamp(17px,1.6vw,20px)/1.3 var(--font)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover .t{color:var(--link-hover)}
.acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.acc summary .plus{color:var(--hl);font:700 26px/1 var(--font);transition:transform .25s;flex-shrink:0}
.acc details[open] .plus{transform:rotate(45deg)}
.acc summary .n{color:var(--eyebrow);font:700 13px/1 var(--font);letter-spacing:.2em;margin-right:20px}
.acc summary .t{flex:1}
.acc summary .t small{display:block;margin-top:8px;font:400 15px/1.5 var(--font);color:var(--text-3)}
.acc .content{padding:0 0 36px;max-width:820px}
.acc .content p{font:400 17px/1.65 var(--font);color:var(--text-2)}
.acc .content p+p{margin-top:14px}
.acc .content .lbl{display:block;margin-top:24px;margin-bottom:8px;font:700 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.acc .content ol{margin:12px 0 0;padding-left:22px;color:var(--text-2);font:400 17px/1.7 var(--font)}

/* Lagen / tijdlijn */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.layer{padding:clamp(28px,3vw,44px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px;background:var(--card)}
.layer:last-child{border-right:0}
.layer .lv{font:700 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.layer h3{font:400 clamp(26px,2.6vw,38px)/1.05 var(--font);text-transform:uppercase;letter-spacing:.03em}
.layer p{font:400 16px/1.6 var(--font);color:var(--text-2)}

.gears{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.gear{background:var(--card);padding:32px;display:flex;flex-direction:column;gap:12px}
.gear b{font:300 48px/1 var(--font);color:var(--num)}
.gear h3{font:600 18px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase}
.gear p{font:400 15px/1.55 var(--font);color:var(--text-2)}

/* Afleveringen */
.eps li a{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.eps li:first-child a{border-top:1px solid var(--line)}
.eps li a:hover{color:var(--link-hover)}
.eps .play{width:48px;height:48px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--hl);font-size:14px}
.eps li a:hover .play{background:var(--btn-bg);color:var(--btn-fg)}
.eps .t{font:600 17px/1.4 var(--font)}
.eps .t small{display:block;margin-top:6px;font:400 14px/1.4 var(--font);color:var(--text-3)}
.eps .d{font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}

/* Locaties */
.loc{border:1px solid var(--line);background:var(--card);padding:32px;display:flex;flex-direction:column;gap:12px}
.loc h3{font:600 20px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase}
.loc p{font:400 16px/1.6 var(--font);color:var(--text-2)}

/* CTA-band */
.cta-band{border:1px solid var(--line);background:var(--cta-bg);padding:clamp(40px,6vw,96px) clamp(28px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-band .muted{margin-top:20px;color:var(--cta-text)}
.cta-band .h2{color:var(--cta-ink)}
.cta-band .btn{background:var(--cta-btn-bg);color:var(--cta-btn-fg)}
.cta-band .btn:hover{background:var(--cta-btn-hover);color:var(--cta-btn-fg)}
.cta-band .btn.ghost{background:transparent;color:var(--cta-ink);box-shadow:inset 0 0 0 1px var(--cta-ghost-line)}
.cta-wrap{padding-bottom:clamp(64px,8vw,120px)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--footer-bg);color:var(--footer-ink)}
.site-footer .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:48px}
.site-footer .brand{display:flex;flex-direction:column;gap:16px}
.site-footer .brand b{font:400 24px/1 var(--font);letter-spacing:.12em;text-transform:uppercase}
.site-footer .brand b span{color:var(--footer-h4)}
.site-footer .brand small{font:400 15px/1.5 var(--font);color:var(--footer-muted)}
.site-footer .cols{display:flex;gap:clamp(40px,6vw,96px);flex-wrap:wrap}
.site-footer .col{display:flex;flex-direction:column;gap:12px}
.site-footer .col h4{margin:0 0 6px;font:700 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--footer-h4)}
.site-footer .col a{font:400 15px/1.4 var(--font);color:var(--footer-text)}
.site-footer .col a:hover{color:var(--footer-h4)}
.site-footer .bottom{margin-top:48px;border-top:1px solid var(--footer-line);padding-top:20px;font:400 13px/1.5 var(--font);color:var(--footer-muted)}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;background:var(--overlay);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal .box{width:min(520px,100%);background:var(--modal-bg);border:1px solid var(--line-strong);padding:40px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 40px);overflow:auto}
.modal .box .rule{width:64px;margin-bottom:0}
.modal h2{font:400 30px/1.05 var(--font);letter-spacing:.02em;text-transform:uppercase}
.modal label{display:flex;flex-direction:column;gap:8px;font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2)}
.modal input,.modal textarea{width:100%;background:var(--input-bg);border:1px solid var(--input-line);color:var(--ink);padding:16px 18px;font:400 16px/1.3 var(--font);outline:none;border-radius:0}
.modal input:focus,.modal textarea:focus{border-color:var(--accent)}
.modal textarea{resize:vertical}
.modal .note{font:400 14px/1.5 var(--font);color:var(--text-3)}

/* Artikel (kennis) */
.article{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.article h2{font:400 clamp(26px,3vw,38px)/1.1 var(--font);letter-spacing:.02em;text-transform:uppercase;margin:64px 0 20px}
.article h3{font:600 18px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;margin:32px 0 12px;color:var(--eyebrow)}
.article p{font:400 18px/1.75 var(--font);color:var(--text-2)}
.article p+p{margin-top:18px}
.article strong{color:var(--ink);font-weight:600}
.article .pull{margin:48px 0;border-left:4px solid var(--emph);padding:8px 0 8px 28px;font:400 clamp(22px,2.4vw,30px)/1.3 var(--font);text-transform:uppercase;color:var(--heading)}
.article .box{margin:40px 0;border:1px solid var(--line);background:var(--card);padding:32px}
.article .box .eyebrow{margin-bottom:12px}
.article .box p{color:var(--ink)}
.article ul.dash-list{margin-top:24px}
.meta{display:flex;gap:24px;flex-wrap:wrap;font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.back{display:inline-block;margin-bottom:32px;font:700 13px/1 var(--font);letter-spacing:.2em;text-transform:uppercase}

/* Responsief */
@media (max-width:1280px){.nav{display:none}.burger{display:flex}.site-header.open .mob{display:block}}
@media (max-width:1100px){.gears{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:nth-child(2){border-right:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}.stat:nth-child(3){padding-left:0}}
@media (max-width:900px){
  .grid3,.grid2,.steps,.layers,.hero,.split{grid-template-columns:minmax(0,1fr)}
  .layer{border-right:0;border-bottom:1px solid var(--line)}.layer:last-child{border-bottom:0}
  .cta-band{flex-direction:column;align-items:flex-start}
  .stats.three{grid-template-columns:1fr}.stats.three .stat{border-right:0;padding-left:0}.stats.three .stat+.stat{border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .hide-s{display:none!important}
  .gears{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}.stat{border-right:0!important;padding-left:0!important}.stat+.stat{border-top:1px solid var(--line)}
  .eps li a{grid-template-columns:40px 1fr}.eps .d{display:none}.eps .play{width:40px;height:40px}
  .btns .btn{width:100%}
  .btn{white-space:normal;text-align:center;padding:20px 24px;line-height:1.3}
  .link-more{white-space:normal}
}

/* twee cijfers naast elkaar, ook op mobiel */
.stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.nobr-d{white-space:nowrap}}