/* Header — logo variant A op Off White */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,245,245,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand-img{height:44px;mix-blend-mode:multiply}
.nav-wrap{padding-block:.65rem}
.site-nav a{font-size:.98rem}
.footer-logo{filter:invert(1) hue-rotate(180deg) brightness(1.04)}
@media(max-width:640px){.brand-img{height:36px}}

/* ============================================================
   Less is more — meer rust, meer lucht, minder ruis
   ============================================================ */
section{padding:5.5rem 0}
.hero{padding:7rem 0 6rem}
body{line-height:1.7}
.lead{font-size:1.15rem;max-width:58ch;color:rgba(10,10,10,.55)}
p{max-width:65ch}
.eyebrow{letter-spacing:.16em}
.grid{gap:1.75rem}
.card{border-color:rgba(10,10,10,.08);padding:2.25rem}
.step{border-color:rgba(10,10,10,.08)}
.info-tile{border-color:rgba(10,10,10,.08)}
/* Accent kalmer: rood alleen waar het iets betekent */
.card .badge{background:transparent;border:1px solid var(--red);color:var(--red)}
.step .num{background:transparent;border:1px solid rgba(255,80,0,.55);color:var(--red)}
.checks li::before{color:rgba(10,10,10,.45)}
.hero-meta strong{color:var(--black)}
.hero-meta{border-top-color:rgba(10,10,10,.08)}
/* Beelden en strips rustiger */
.hero-img{box-shadow:0 10px 30px rgba(10,10,10,.10);border-color:rgba(10,10,10,.08)}
.section-img{box-shadow:0 6px 20px rgba(10,10,10,.08)}
.trust-strip{background:var(--white);border-bottom:1px solid rgba(10,10,10,.07);padding:1.6rem 0}
.trust-strip .container img{opacity:.55}
.trust-strip .container img:hover{opacity:1}
/* FAQ als kalme, platte lijst */
.faq{gap:0}
.faq details{background:transparent;border:none;border-top:1px solid rgba(10,10,10,.1);border-radius:0;padding:1.25rem 0}
.faq details[open] summary{color:var(--black)}
.faq summary{border-radius:0}
/* CTA en footer met meer lucht */
.cta-band{padding:4.5rem 0}
.site-footer{margin-top:3rem;padding:4rem 0 2.25rem}
.btn{border-radius:8px}

/* ============================================================
   Direct-contact-regel in de donkere CTA-band — leesbaar
   conform huisstijl (Off White tekst, Active Red accent)
   ============================================================ */
.direct-contact{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.35rem .85rem;justify-content:center;align-items:baseline;font-size:var(--text-xs)}
.direct-contact span{color:rgba(245,245,245,.78)}
.direct-contact a{color:var(--white) !important;text-decoration:underline;text-decoration-color:rgba(255,80,0,.85);text-underline-offset:3px;font-weight:600}
.direct-contact a:hover{color:var(--red) !important}
.direct-contact a:active{color:var(--red) !important}
.direct-contact span::selection,.direct-contact a::selection{background:var(--red);color:var(--black)}
.direct-contact span::-moz-selection,.direct-contact a::-moz-selection{background:var(--red);color:var(--black)}

/* Partnerstrip — klikbare logo's zonder onderstreping */
.trust-strip a{display:inline-flex;text-decoration:none !important}
.trust-strip a img{display:block}
.trust-strip a:hover img{opacity:1 !important}

/* ============================================================
   Video-sectie (ontbrak in basis-stylesheet)
   ============================================================ */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem;margin-top:2.5rem}
.video-card{margin:0}
.video-thumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;overflow:hidden}
.video-thumb img{display:block;width:100%;height:auto}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.35);color:var(--white);transition:background .2s}
.video-thumb:hover .video-play{background:rgba(255,80,0,.45)}
.video-card figcaption{margin-top:.75rem;text-align:left}
.video-card figcaption strong{display:block;font-family:var(--font-head);font-weight:600}
.video-card figcaption span{font-size:var(--text-xs);color:var(--text-muted)}

/* ============================================================
   Dynamisch schalen — alle content past op elk scherm
   ============================================================= */
:root{--text-lg:1.45rem;--text-xl:1.9rem}
html{-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word;word-break:break-word}
img,svg,video,iframe{max-width:100%}
.info-tile a,.footer-grid a,.direct-contact a,.legal a{overflow-wrap:anywhere}
.legal p,.legal li{max-width:100%}
.faq details{padding:1.25rem .5rem}
.cta-band .btn{display:inline-block;width:auto}
.hero-cta .btn{width:auto}

/* Smartphones: compactere verticale ruite en kleinere strips */
@media(max-width:640px){
  section{padding:3.25rem 0}
  .hero{padding:4rem 0 3.25rem}
  .hero-flex{gap:2rem}
  .split{gap:1.75rem}
  .grid,.info-grid,.steps{gap:1.25rem;margin-top:1.75rem}
  .card{padding:1.5rem}
  .step{padding:1.25rem}
  .info-tile{padding:1.25rem}
  .faq{margin-top:1.75rem}
  .faq details{padding:1rem .25rem}
  .site-footer{padding:3rem 0 1.75rem;margin-top:2rem}
  .cta-band{padding:3.25rem 0}
  .trust-strip{padding:1.1rem 0}
  .trust-strip .container{gap:.9rem 1.4rem}
  .trust-strip .container img{height:20px}
  .hero-cta .btn{width:100%;text-align:center}
  .form-card{padding:1.5rem}
  .founder-chip{flex-wrap:wrap}
  .video-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .trust-strip .container img{height:17px}
  .trust-strip .container{gap:.75rem 1.1rem}
  .hero-meta{grid-template-columns:1fr 1fr;gap:1rem}
}
/* ============================================================
   Bureaublad-schaling — content groeit mee met het scherm
   ============================================================ */
@media(min-width:1440px){
  :root{--maxw:1260px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .steps{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .trust-strip .container{gap:1.25rem 2.75rem}
  .trust-strip .container img{height:30px}
}
@media(min-width:1800px){
  :root{--maxw:1400px}
  h1{font-size:clamp(2.1rem,3.2vw,3.9rem)}
  .grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .trust-strip .container img{height:32px}
  .hero-img{max-width:520px}
}