/* ===== Self-hosted fonts (GDPR: geen Google Fonts-servers) ===== */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/publicsans-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/spacegrotesk-500.woff2') format('woff2')}

/* ===== Basis (overgenomen uit het design) ===== */
body{margin:0;font-family:'Public Sans',system-ui,sans-serif;color:#1B2430;background:#fff;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
img{max-width:100%}
a{color:#1E3A8A}a:hover{color:#16307A}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}
details[open] .faq-chev{transform:rotate(45deg)}
input:focus,select:focus{outline:2px solid #1E3A8A;outline-offset:1px}
.mob-only{display:none}
.dots{display:none;justify-content:center;gap:8px;margin-top:16px}

/* Toegankelijkheid */
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;z-index:100;background:#1B2430;color:#fff;padding:.6rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid #1E3A8A;outline-offset:2px}

/* Hover-states (vervangt de design-only style-hover attributen) */
.cta:hover{background:#16307A !important;color:#fff !important}
.logo-row img:hover{opacity:1 !important;filter:grayscale(0) !important}

/* Foto-placeholders (klant levert beeld) */
.img-slot{width:100%;height:100%;min-height:170px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#EAF0F5,#EAF0F5 12px,#E1E9F1 12px,#E1E9F1 24px);
  color:#7C8A9C;font-size:14px;font-weight:600;padding:16px}

/* Honeypot (spam) — verbergen voor mensen */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* GDPR consent */
.form-consent{display:flex;gap:8px;font-size:13px;color:#3C4756;line-height:1.4}
.form-consent input{margin-top:3px;flex:none}
.cf-turnstile{min-height:65px}

/* ===== Mobiel (overgenomen uit het design) ===== */
@media(max-width:860px){
  .mob-only{display:flex!important}
  .desk-only{display:none!important}
  body{padding-bottom:84px}
  .g-hero,.g-2col{grid-template-columns:1fr!important;gap:28px!important}
  .hero-sec{background:linear-gradient(180deg,rgba(250,250,247,0.97) 0%,rgba(250,250,247,0.93) 55%,rgba(250,250,247,0.82) 100%),url('/assets/img/hero.png') center 88%/cover no-repeat!important}
  .hero-checks{flex-direction:row!important;flex-wrap:wrap;gap:8px 16px!important}
  .hero-checks span{font-size:15px!important}
  .hdr-cta{padding:10px 14px!important;font-size:14px!important}
  .logo-row{gap:16px 24px!important;padding:16px 20px!important}
  .logo-row img{height:24px!important}
  .g-stats{grid-template-columns:1fr 1fr!important;gap:20px!important}
  .g-stats>div>div:first-child{font-size:26px!important}
  .steps>div>div:first-child{width:36px!important;height:36px!important;font-size:16px!important}
  .g-swipe{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .g-swipe::-webkit-scrollbar{display:none}
  .g-swipe>*{min-width:85%;scroll-snap-align:start}
  .dots{display:flex!important}
  .h1-hero{font-size:36px!important}
  .sec-pad{padding:56px 20px!important}
}