/* ShootReady in 20 · v1
   Zwart 050505, goud C8963E. Bebas Neue voor koppen, Inter voor tekst.
   Geen derde kleur. */

:root{
  --zwart:#050505;
  --paneel:#0A0908;
  --paneel-2:#0D0C0A;
  --lijn:#1C1A16;
  --lijn-2:#2A241A;
  --veld:#131210;
  --veld-rand:#342D21;
  --goud:#C8963E;
  --goud-licht:#E0B45F;
  --tekst:#EDEAE4;
  --tekst-zacht:#A8A296;
  --tekst-grijs:#7C766B;
  --tekst-dof:#4E4A43;
  --kop:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --body:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --marge:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.sr-lock body{position:fixed;top:0;left:0;right:0;width:100%}
body{
  margin:0;background:var(--zwart);color:var(--tekst);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--goud);text-decoration:none}
a:hover{color:var(--goud-licht)}
h1,h2,h3{margin:0;font-family:var(--kop);font-weight:400;color:#fff;letter-spacing:.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--marge)}
.sec{padding:44px 0}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:600;color:var(--goud);text-transform:uppercase}
.lead{color:#B9B3A8;font-size:16px}
.zacht{color:var(--tekst-zacht)}
.klein{font-size:13px;color:var(--tekst-grijs)}

/* nav */
.nav{border-bottom:1px solid #16140F}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.merk{font-family:var(--kop);font-size:22px;color:#fff;letter-spacing:.04em}
.merk span{color:var(--goud)}
.nav-status{display:none;font-size:11px;letter-spacing:.14em;color:var(--tekst-grijs);text-transform:uppercase}

/* knop */
.knop{
  display:flex;align-items:center;justify-content:center;
  min-height:58px;padding:0 28px;background:var(--goud);color:#0B0906;
  border-radius:3px;font-weight:700;font-size:15px;letter-spacing:.07em;
  text-transform:uppercase;text-align:center;border:0;cursor:pointer;
  transition:background .15s ease;
}
.knop:hover{background:var(--goud-licht);color:#0B0906}
.knop--rand{background:transparent;color:var(--goud);border:1px solid var(--lijn-2)}
.knop--rand:hover{background:rgba(200,150,62,.08);color:var(--goud)}

/* hero */
.hero{position:relative;background:radial-gradient(120% 62% at 50% 0%,#16110A 0%,#050505 72%);overflow:hidden}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px}
.hero .lead{max-width:640px}
.hero .feiten{text-align:left;display:inline-flex}
.hero .neven{justify-content:center}
.hero .video{width:100%;max-width:760px}
/* de vier shootshapes langs de zijkanten, zoals op de bewezen pagina */
.hero-zij{position:absolute;top:0;bottom:0;width:26%;z-index:0;display:flex;flex-direction:column;opacity:.30;pointer-events:none}
.hero-zij.links{left:0}
.hero-zij.rechts{right:0}
.hero-zij img{flex:1 1 50%;min-height:0;width:100%;object-fit:cover;object-position:center top;display:block}
.hero-zij img[hidden]{display:none}
.hero-zij.links::after,.hero-zij.rechts::after{content:"";position:absolute;inset:0}
.hero-zij.links::after{background:linear-gradient(90deg,rgba(5,5,5,.35) 0%,#050505 100%)}
.hero-zij.rechts::after{background:linear-gradient(270deg,rgba(5,5,5,.35) 0%,#050505 100%)}
.hero .wrap{padding-top:30px;padding-bottom:34px;display:grid;gap:26px}
.hero h1{font-size:clamp(40px,11vw,54px);line-height:.94}
.feiten{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.feiten li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--tekst)}
.ruit{width:6px;height:6px;background:var(--goud);transform:rotate(45deg);flex:0 0 auto;margin-top:7px}

/* video */
.video{position:relative;border:1px solid var(--lijn-2);border-radius:4px;overflow:hidden;background:var(--paneel);aspect-ratio:16/9}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* nevenacties onder de hoofdknop */
.neven{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.neven .klein{margin:0}

/* over ons */
.over{display:grid;gap:20px}
.over .beeld{aspect-ratio:4/5;max-width:380px}
.over blockquote{margin:0;padding:0 0 0 16px;border-left:3px solid var(--goud);font-size:15px;line-height:1.6;color:var(--tekst-zacht);font-style:normal}
@media (min-width:900px){
  .over{grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
}

/* quote onder reviewvideo */
.vquote{margin-top:8px;font-size:13px;line-height:1.5;color:var(--tekst-zacht)}
.vquote b{color:var(--tekst)}

/* bewijsstrook */
.strook{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.strook .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1 0}
.stat b{font-family:var(--kop);font-size:26px;color:var(--goud);line-height:1;font-weight:400}
.stat span{font-size:9px;letter-spacing:.1em;color:var(--tekst-grijs);text-transform:uppercase}
.streep{width:1px;height:28px;background:#241F18}

/* koppen in secties */
.sec h2{font-size:clamp(30px,8vw,36px);line-height:1;margin-bottom:16px}

/* kaarten */
.kaarten{display:grid;gap:16px}
.kaart{background:var(--paneel);border:1px solid var(--lijn);border-radius:4px;overflow:hidden}
.kaart .beeld{aspect-ratio:4/3;border-bottom:1px solid var(--lijn)}
.kaart .body{padding:18px;display:flex;flex-direction:column;gap:8px}
.kaart .naam{font-size:16px;font-weight:600;color:#fff}
.kaart .cijfer{font-family:var(--kop);font-size:30px;color:var(--goud);line-height:1}
.kaart .quote{font-size:14px;line-height:1.6;color:var(--tekst-zacht)}

/* beeld-placeholders */
.ph{position:relative;background:#0C0B09;border:1px dashed #3A3227;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;padding:8px;font-size:10px;line-height:1.3;color:#6E675C;text-align:center;font-family:var(--body)}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph img:not([src]),.ph img[src=""]{display:none}

/* raster */
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.raster-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}


/* tussen-cta */
.tussen{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:26px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.tussen h2{margin:0;font-size:clamp(28px,7vw,34px);line-height:1.05;margin-bottom:0}

/* roadmap */
.fasen{display:grid;gap:10px}
.fase{padding:16px 18px;background:var(--paneel);border-left:2px solid var(--goud);display:flex;flex-direction:column;gap:5px}
.fase .wanneer{font-size:10px;letter-spacing:.13em;color:var(--goud);text-transform:uppercase}
.fase .titel{font-size:15px;font-weight:600;color:#fff}
.fase .uitleg{font-size:13px;line-height:1.5;color:var(--tekst-zacht)}

/* inhoud */
.inhoud{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.inhoud li{font-size:14px;line-height:1.45;color:var(--tekst);display:flex;gap:10px;align-items:flex-start}
.inhoud li::before{content:"";width:5px;height:5px;background:var(--goud);transform:rotate(45deg);flex:0 0 auto;margin-top:7px}

/* accent-blok */
.accent{padding:20px 22px;background:#0B0A08;border-left:3px solid var(--goud);display:flex;flex-direction:column;gap:8px}
.accent .titel{font-size:16px;font-weight:600;color:#fff}
.accent p{font-size:14px;line-height:1.6;color:var(--tekst-zacht)}

/* prijs */
.prijs{padding:24px 20px;background:var(--paneel);border:1px solid var(--lijn-2);border-radius:4px;display:flex;flex-direction:column;gap:14px}
.prijs .bedrag{font-family:var(--kop);font-size:52px;line-height:1;color:#fff}
.prijs .rij{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--tekst-zacht)}
.prijs .rij b{color:var(--tekst);font-weight:600}
.hr{height:1px;background:#241F18}

/* voor wie */
.duo{display:grid;gap:12px}
.paneel{padding:20px 18px;background:var(--paneel);border-top:2px solid var(--goud);display:flex;flex-direction:column;gap:8px}
.paneel--dof{border-top-color:#3A3227}
.paneel h3{font-size:26px;line-height:1}
.paneel p{font-size:14px;line-height:1.65;color:var(--tekst-zacht)}

/* faq */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-of-type{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;font-weight:600;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--goud);font-size:20px;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq .antwoord{padding:0 0 16px;font-size:14px;line-height:1.6;color:var(--tekst-zacht)}

/* slot */
.slot{margin-top:8px;padding:32px 22px;background:linear-gradient(180deg,#16110A 0%,#0A0907 100%);border:1px solid var(--lijn-2);border-radius:4px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.slot h2{font-size:clamp(34px,10vw,44px);line-height:.98;margin:0}
.slot .knop{width:100%}

/* formulier */
.form{padding:24px 20px;background:var(--paneel-2);border:1px solid var(--lijn-2);border-radius:4px;display:flex;flex-direction:column;gap:12px}
.form h2,.form .kop{font-family:var(--kop);font-size:28px;line-height:1;color:#fff}
.form input{width:100%;min-height:50px;padding:0 14px;background:var(--veld);border:1px solid var(--veld-rand);border-radius:3px;color:var(--tekst);font-family:var(--body);font-size:15px}
.form input::placeholder{color:#6E675C}
.form input:focus{outline:none;border-color:var(--goud)}

/* footer */
.foot{margin-top:34px;border-top:1px solid #16140F}
.foot .wrap{padding-top:22px;padding-bottom:104px;display:flex;flex-direction:column;gap:5px}
.foot .naam{font-size:13px;font-weight:600;color:var(--tekst)}
.foot .rest,.foot .rest a{font-size:12px;color:var(--tekst-grijs)}
.foot .juridisch,.foot .juridisch a{font-size:11px;color:var(--tekst-dof);margin-top:4px}

/* sticky balk */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,7,6,.96);border-top:1px solid var(--lijn-2);
  display:flex;align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .22s ease;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sticky.aan{transform:translateY(0)}
.sticky .tekst{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;min-width:0}
.sticky .tekst b{font-size:13px;color:#fff}
.sticky .tekst span{font-size:11px;color:var(--tekst-grijs)}
.sticky .knop{min-height:44px;padding:0 20px;font-size:13px;white-space:nowrap}

/* calendly venster */
.modal{position:fixed;inset:0;z-index:60;visibility:hidden;opacity:0;transition:opacity .2s ease}
.modal.open{visibility:visible;opacity:1}
.modal .achter{position:absolute;inset:0;background:rgba(3,3,3,.86)}
.modal .venster{position:absolute;inset:16px;max-width:900px;margin:auto;background:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.modal .kopbalk{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#0A0908;border-bottom:1px solid var(--lijn-2)}
.modal .kopbalk span{font-size:13px;color:var(--tekst)}
.modal .sluit{background:none;border:0;color:var(--tekst-grijs);font-size:24px;line-height:1;cursor:pointer;padding:4px 8px}
.modal .sluit:hover{color:#fff}
.calendly-inline-widget{flex:1 1 auto;min-height:0}

/* twee standen: open en gesloten */
html.sr-gesloten [data-toon="open"]{display:none !important}
html.sr-open [data-toon="gesloten"]{display:none !important}

/* desktop */
@media (min-width:900px){
  :root{--marge:40px}
  .nav-status{display:block}
  body{font-size:17px}
  .sec{padding:64px 0}
  .hero .wrap{padding-top:56px;padding-bottom:56px;gap:0}
  .hero-zij{width:15%;opacity:.85}
  .hero-zij.links::after{background:linear-gradient(90deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.55) 70%,#050505 100%)}
  .hero-zij.rechts::after{background:linear-gradient(270deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,.55) 70%,#050505 100%)}
  .hero h1{font-size:clamp(54px,5.2vw,78px)}
  .hero .lead{font-size:19px;max-width:640px}
  .hero .knop{min-width:420px}
  .sec h2{font-size:clamp(38px,3.4vw,46px);margin-bottom:24px}
  .stat b{font-size:32px}
  .stat span{font-size:10px;letter-spacing:.12em}
  .kaarten{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .raster-2{gap:16px}
  .raster-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .fasen{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .fase{border-left:0;border-top:2px solid var(--goud);padding:22px 20px}
  .fase .titel{font-size:17px}
  .fase .uitleg{font-size:14px}
  .kolommen{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:start}
  .inhoud{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
  .inhoud li{font-size:15px}
  .prijs{padding:32px}
  .prijs .bedrag{font-size:62px}
  .duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .paneel{padding:28px 30px}
  .paneel h3{font-size:32px}
  .paneel p{font-size:15px}
  .faq-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
  .slot{padding:60px;gap:18px}
  .slot .knop{width:auto;padding:0 52px;min-height:62px;font-size:16px}
  .tussen{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:32px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
  .tussen h2{margin:0;font-size:34px;line-height:1.05}
  .tussen .knop{min-height:56px;white-space:nowrap}
  .foot .wrap{flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:40px}
  .sticky{display:none}
  .form{padding:34px 32px}
  .form h2,.form .kop{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}