/* ════════════════════════════════════════════════════════════════════
   OKD — OfferteKlik marketing design-systeem (DigiBoox-look, eigen kleuren)
   Gebruikt door alle preview/*.html marketing-pagina's. Font: Nunito.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --okd-primary:      #4F46E5;
  --okd-primary-dark: #4338CA;
  --okd-primary-soft: #EEEDFC;
  --okd-violet:       #6D28D9;
  --okd-blue:         #2563EB;
  --okd-blue-dark:    #1D4ED8;
  --okd-blue-soft:    #E7F0FE;
  --okd-ink:          #293546;
  --okd-ink-2:        #555E6E;
  --okd-muted:        #7C8087;
  --okd-green:        #00C078;
  --okd-green-dark:   #00A667;
  --okd-green-soft:   #E2F8EF;
  --okd-grey:         #F7F8FA;
  --okd-border:       #ECEFF4;
  --okd-navy:         #232D3F;
  --okd-navy-2:       #2C3850;
  --okd-gold:         #FFB800;
  --okd-gold-soft:    #FFF4D6;
  --okd-gold-ink:     #8A6300;
  --okd-on-dark:      #AEB8CD;
  --okd-on-dark-2:    #E3E1FB;
  --okd-green-ink:    #00875A;
  --okd-red:          #DC2626;
  --okd-red-soft:     #FEF2F2;
  --okd-red-border:   #FECACA;
  --okd-tint-primary: #DDD9FB;
  --okd-tint-blue:    #BFDBFE;
  --okd-tint-blue-2:  #93C5FD;
  --okd-tint-violet:  #C8B3F0;
  --okd-tint-green:   #A8E6C8;
  --okd-tint-gold:    #F5DC8A;
  --okd-radius-card:  12px;
  --okd-radius-box:   16px;
  --okd-radius-btn:   8px;
  --okd-shadow-card:  0 4px 18px rgba(41,53,70,.07);
  --okd-shadow-pop:   0 14px 40px rgba(41,53,70,.14);
  --okd-font:         'Nunito', -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; padding:0;
  font-family:var(--okd-font);
  font-size:17px; line-height:1.6;
  color:var(--okd-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img{ max-width:100%; height:auto; }
a{ color:var(--okd-primary); text-decoration:none; }
a:hover{ text-decoration:none; }
h1,h2,h3,h4,h5,h6{ font-family:var(--okd-font); color:var(--okd-ink); margin:0; text-wrap:balance; }
p,li,dd,figcaption,.okdSubtitle{ text-wrap:pretty; }
.okdTitles p, .okdSubtitle{ max-width:66ch; margin-left:auto; margin-right:auto; }
::selection{ background:var(--okd-primary-soft); }

.okdContainer{ max-width:1200px; margin:0 auto; padding:0 24px; }
.okdContainer--sm{ max-width:1000px; }
.okdSkip{ position:absolute; left:-9999px; }
.okdSkip:focus{ left:12px; top:12px; z-index:9999; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--okd-shadow-pop); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.okdBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border:0; border-radius:var(--okd-radius-btn);
  font-family:var(--okd-font); font-size:16px; font-weight:700; line-height:1.2;
  cursor:pointer; text-decoration:none !important;
  transition:background .16s, transform .14s, box-shadow .16s, border-color .16s, color .16s;
  white-space:nowrap;
}
.okdBtn--primary{ background:var(--okd-primary); color:#fff !important; box-shadow:0 8px 20px -8px rgba(79,70,229,.55); }
.okdBtn--primary:hover{ background:var(--okd-primary-dark); transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(79,70,229,.6); }
.okdBtn--blue{ background:var(--okd-blue); color:#fff !important; }
.okdBtn--blue:hover{ background:var(--okd-blue-dark); transform:translateY(-1px); }
.okdBtn--green{ background:var(--okd-green); color:#fff !important; font-weight:800; box-shadow:0 8px 20px -8px rgba(0,192,120,.5); }
.okdBtn--green:hover{ background:var(--okd-green-dark); transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(0,192,120,.55); }
.okdBtn--white{
  background:#fff; color:var(--okd-ink) !important;
  border:1px solid var(--okd-border);
  box-shadow:0 4px 14px rgba(41,53,70,.08);
}
.okdBtn--white:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(41,53,70,.12); }
.okdBtn--outline{
  background:#fff; color:var(--okd-primary) !important;
  border:1px solid var(--okd-primary); border-radius:50px;
  padding:13px 30px; font-weight:700;
}
.okdBtn--outline:hover{ background:var(--okd-primary-soft); }
.okdBtn--pillblue{ background:var(--okd-blue); color:#fff !important; border-radius:50px; padding:11px 22px; font-size:15px; }
.okdBtn--pillblue:hover{ background:var(--okd-blue-dark); }
.okdBtn--support{
  background:#fff; color:var(--okd-blue) !important;
  border:1px solid var(--okd-blue); border-radius:50px;
  padding:10px 21px; font-size:15px; font-weight:700;
}
.okdBtn--support:hover{ background:var(--okd-primary-soft); }

/* ── Header ──────────────────────────────────────────────────────── */
.okdHeader{
  position:sticky; top:0; z-index:900;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:box-shadow .2s, border-color .2s;
}
.okdHeader.is-scrolled{ box-shadow:0 2px 18px rgba(41,53,70,.08); border-color:var(--okd-border); }
.okdHeader__inner{
  max-width:1280px; margin:0 auto; padding:0 24px;
  height:80px;
  display:flex; align-items:center; gap:28px;
}
.okdLogo{
  display:inline-flex; align-items:center; gap:0;
  font-size:27px; font-weight:800; letter-spacing:-.5px;
  color:var(--okd-ink) !important; text-decoration:none !important;
  flex-shrink:0; line-height:1;
}
.okdLogo b{
  background:var(--okd-primary); color:#fff;
  padding:5px 9px 7px; border-radius:9px;
  font-weight:800; margin-right:5px;
}
.okdLogo span{ font-weight:800; color:var(--okd-ink); }

.okdNav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.okdMenu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.okdMenuItem{ position:relative; }
.okdMenuItem > a{
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 14px;
  font-size:16px; font-weight:600; color:var(--okd-ink);
  cursor:pointer; border-radius:8px;
}
.okdMenuItem > a:hover{ color:var(--okd-primary); }
.okdMenuItem.okdHasSub > a{ cursor:pointer; }
.okdMenuItem.is-open > a{ color:var(--okd-primary); background:var(--okd-primary-soft); }
.okdMenuItem > a .okdChev{ transition:transform .18s; }
.okdMenuItem.is-open > a .okdChev{ transform:rotate(180deg); }

.okdSub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--okd-border); border-radius:14px;
  box-shadow:var(--okd-shadow-pop);
  padding:26px 30px;
  display:none;
  min-width:280px;
}
.okdMenuItem.is-open .okdSub{ display:flex; gap:44px; }
.okdSub--wide{ min-width:440px; }
.okdSubCol{ min-width:190px; }
.okdSubHead{
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--okd-muted); margin-bottom:12px; white-space:nowrap;
}
.okdSub ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.okdSub ul a{
  display:block; padding:7px 10px; margin:0 -10px;
  font-size:15.5px; font-weight:600; color:var(--okd-ink);
  border-radius:8px; white-space:nowrap;
}
.okdSub ul a:hover{ background:var(--okd-primary-soft); color:var(--okd-primary); }
.okdSub ul a small{ display:block; font-size:12.5px; font-weight:500; color:var(--okd-muted); margin-top:1px; }
.okdNavLogin{ font-weight:700 !important; }
.okdNavCta{ display:flex; align-items:center; margin-left:14px; }
.okdNavCta .okdBtn{ padding:11px 20px; font-size:15px; line-height:1.2; }
.okdNavLogin > a{ font-weight:700; }
.okdBurger{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--okd-ink);
  border-radius:10px;
}
.okdBurger:hover{ background:var(--okd-grey); }

/* Mobiel menu */
@media (max-width:1060px){
  .okdBand{ display:none; }
  .okdHeader__inner{ height:68px; gap:12px; padding:0 16px; }
  .okdLogo{ font-size:23px; min-width:0; }
  .okdBurger{ display:inline-flex; flex-shrink:0; }
  /* De mobiele CTA-knop mag krimpen i.p.v. de burger uit beeld te duwen. */
  .okdBtn.okdHeaderCtaMobile{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .okdNav{
    display:none;
    position:fixed; top:68px; left:0; right:0; bottom:0;
    background:#fff; overflow-y:auto;
    padding:18px 22px 40px;
    z-index:899;
  }
  .okdNav.is-open{ display:block; }
  .okdNavScrim{
    position:fixed; inset:68px 0 0 0; z-index:898;
    background:rgba(41,53,70,.55);
    display:none;
  }
  body.okd-nav-open .okdNavScrim{ display:block; }
  .okdMenu{ flex-direction:column; align-items:stretch; gap:0; }
  .okdMenuItem > a{
    width:100%; justify-content:space-between;
    padding:15px 6px; font-size:18px; font-weight:700;
    border-bottom:1px solid var(--okd-border); border-radius:0;
  }
  .okdSub{
    position:static; transform:none; display:none;
    border:0; box-shadow:none; border-radius:0;
    padding:4px 6px 14px; min-width:0;
    flex-direction:column; gap:18px;
  }
  .okdMenuItem.is-open .okdSub{ display:flex; }
  .okdSub ul a{ white-space:normal; padding:9px 10px; }
  .okdNavCta{ margin:18px 0 0; }
  .okdNavCta .okdBtn{ width:100%; }
  .okdBtn.okdHeaderCtaMobile{
    margin-left:auto;
    padding:8px 15px; font-size:13.5px; font-weight:700;
    border-radius:50px; box-shadow:none; white-space:nowrap;
  }
  .okdBtn.okdHeaderCtaMobile:hover{ box-shadow:none; transform:none; }
  .okdNav{ margin-left:0; }
}
@media (min-width:1061px){ .okdHeaderCtaMobile{ display:none; } }
body.okd-nav-open{ overflow:hidden; }

.okdCrumbs{ padding:14px 0; font-size:13px; background:var(--okd-grey); }
.okdCrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; color:var(--okd-muted); }
.okdCrumbs li{ display:flex; align-items:center; gap:6px; }
.okdCrumbs li+li::before{ content:"\203A"; color:var(--okd-muted); }
.okdCrumbs a{ color:var(--okd-muted); text-decoration:none; font-weight:600; }
.okdCrumbs a:hover{ color:var(--okd-primary); }
.okdCrumbs li[aria-current]{ color:var(--okd-ink); font-weight:700; }

/* ── Hero (split) ────────────────────────────────────────────────── */
.okdHero{
  position:relative;
  padding:72px 0 84px;
  overflow:hidden;
  background:#fff;
}
.okdHero__blob{
  position:absolute; z-index:0; pointer-events:none;
  border-radius:140px;
}
.okdHero__blob--primary{
  width:1100px; height:820px;
  left:-320px; top:-160px;
  background:var(--okd-primary-soft);
  transform:rotate(-16deg);
}
.okdHero__blob--blue{
  width:520px; height:420px;
  right:-220px; bottom:-260px;
  background:var(--okd-blue-soft);
  transform:rotate(22deg);
}
.okdHero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.04fr .96fr; gap:56px;
  align-items:center;
}
.okdEyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px;
  background:#fff; border:1px solid var(--okd-border); border-radius:50px;
  font-size:14px; font-weight:700; color:var(--okd-ink-2);
  box-shadow:0 3px 12px rgba(41,53,70,.06);
  margin-bottom:22px;
}
.okdEyebrow i{
  width:8px; height:8px; border-radius:50%;
  background:var(--okd-green); flex-shrink:0;
  animation:okdPulse 2.4s ease-in-out infinite;
}
@keyframes okdPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,192,120,.35);} 55%{ box-shadow:0 0 0 7px rgba(0,192,120,0);} }
.okdHero h1{
  font-size:clamp(34px, 4.6vw, 54px);
  font-weight:800; line-height:1.14; letter-spacing:-1px;
  margin:0 0 18px;
}
.okdAccent{ color:var(--okd-primary); }
.okdRotate{ display:inline-block; min-height:1.14em; transition:opacity .28s; }
.okdHeroSub{
  font-size:19px; line-height:1.6; color:var(--okd-ink-2);
  margin:0 0 26px; max-width:34em;
}
.okdUsps{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px; }
.okdUsps li{ display:flex; align-items:flex-start; gap:12px; font-size:16.5px; color:var(--okd-ink-2); }
.okdCheck{
  width:24px; height:24px; flex-shrink:0; margin-top:1px;
  border-radius:50%; background:var(--okd-green-soft);
  display:inline-flex; align-items:center; justify-content:center;
}
.okdCheck svg{ width:12px; height:12px; stroke:var(--okd-green); }
.okdUsps strong{ color:var(--okd-ink); font-weight:800; }
.okdCtaRow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:16px; }
.okdPlay{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--okd-primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.okdPlay svg{ width:11px; height:11px; margin-left:2px; fill:#fff; }
.okdMicro{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:14px; font-weight:700; color:var(--okd-muted);
  margin:0 0 30px;
}
.okdMicro span{ display:inline-flex; align-items:center; gap:7px; }
.okdMicro svg{ width:13px; height:13px; stroke:var(--okd-green); flex-shrink:0; }
.okdProof{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.okdProofBlock{ display:flex; flex-direction:column; gap:2px; }
.okdProofScore{ display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; color:var(--okd-ink); }
.okdStars{ display:inline-flex; gap:2px; }
.okdStars svg{ width:16px; height:16px; fill:var(--okd-gold); }
.okdProofLabel{ font-size:14px; font-weight:700; }
a.okdProofLabel{ color:var(--okd-primary); }
a.okdProofLabel:hover{ text-decoration:underline; }
.okdProofNum{ font-size:19px; font-weight:800; color:var(--okd-ink); }
.okdProofBlock > .okdProofLabel{ color:var(--okd-muted); }
.okdProofDivider{ width:1px; height:38px; background:var(--okd-border); }

/* Hero-afbeelding + zwevende badge */
.okdHeroImage{ position:relative; z-index:0; }

.okdOfferte{
  position:relative; z-index:1;
  background:#fff;
  border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-box);
  box-shadow:var(--okd-shadow-pop);
  max-width:452px; margin:0 auto;
  padding-bottom:20px;
  overflow:hidden;
}
.okdOfferte::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--okd-primary), var(--okd-violet), var(--okd-blue));
}

.okdOfferte__bar{
  display:flex; align-items:center; gap:8px;
  padding:15px 20px 13px;
  background:var(--okd-primary-soft);
  font-size:12px; font-weight:800; color:var(--okd-primary);
  letter-spacing:.5px; text-transform:uppercase;
}
.okdOfferte__dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--okd-primary);
}
.okdOfferte__nu{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:700; color:var(--okd-ink-2); }

.okdOfferte__mail{
  display:flex; gap:11px; align-items:flex-start;
  padding:15px 20px 17px;
}
.okdOfferte__av{
  width:36px; height:36px; flex-shrink:0; border-radius:11px;
  background:var(--okd-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; letter-spacing:-.02em;
}
.okdOfferte__mailtxt{ min-width:0; flex:1; }
.okdOfferte__naam{ font-size:14.5px; font-weight:800; color:var(--okd-ink); line-height:1.25; }
.okdOfferte__onderwerp{ font-size:13.5px; font-weight:700; color:var(--okd-ink-2); margin-top:2px; }
.okdOfferte__snip{
  font-size:12.5px; line-height:1.5; color:var(--okd-ink-2); margin-top:4px; opacity:.82;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.okdOfferte__doc{
  margin:0 20px; padding:4px 17px 6px;
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-card);
  box-shadow:var(--okd-shadow-card);
}
.okdOfferte__docHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:11px; border-bottom:1px solid var(--okd-border);
}
.okdOfferte__nr{ font-size:13px; font-weight:800; color:var(--okd-ink); }
.okdOfferte__pill{
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  background:var(--okd-green-soft); color:var(--okd-green-ink);
  font-size:11px; font-weight:800; padding:5px 10px; border-radius:50px;
}
.okdOfferte__pill svg{ width:12px; height:12px; }
.okdOfferte__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--okd-border);
  font-size:14px; color:var(--okd-ink-2);
}
.okdOfferte__row b{ color:var(--okd-ink); font-weight:700; white-space:nowrap; }
.okdOfferte__row small{ display:block; font-size:12px; color:var(--okd-muted); font-weight:600; margin-top:1px; }
.okdOfferte__row--total{
  border-bottom:0; padding:13px 0 4px;
  font-size:14.5px; font-weight:800; color:var(--okd-ink);
}
.okdOfferte__row--total b{ font-size:21px; letter-spacing:-.02em; }

.okdOfferte__sign{
  display:flex; align-items:center; gap:10px;
  margin:14px 20px 0; padding:11px 14px;
  background:var(--okd-green-soft); border-radius:var(--okd-radius-card);
}
.okdOfferte__seal{
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  background:var(--okd-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.okdOfferte__seal svg{ width:15px; height:15px; }
.okdOfferte__signtxt{ font-size:12.5px; line-height:1.4; color:var(--okd-green-ink); font-weight:800; }
.okdOfferte__signtxt small{ display:block; font-weight:600; color:var(--okd-ink-2); margin-top:1px; }

.okdOfferteTint{
  position:absolute; border-radius:26px; z-index:0; pointer-events:none;
}
.okdOfferteTint--a{ width:124px; height:124px; background:var(--okd-tint-primary); left:-24px; top:-20px; transform:rotate(16deg); opacity:.7; }
.okdOfferteTint--b{ width:92px; height:92px; background:var(--okd-blue-soft); right:-16px; bottom:-12px; transform:rotate(-12deg); }

@media (max-width:640px){
  .okdOfferte{ max-width:100%; }
  .okdOfferte__bar{ padding:13px 15px 11px; }
  .okdOfferte__mail{ padding:13px 15px 15px; }
  .okdOfferte__doc{ margin:0 15px; }
  .okdOfferte__sign{ margin:13px 15px 0; }
  .okdOfferteTint{ display:none; }
}

.okdShot{
  background:#fff; border-radius:18px;
  box-shadow:0 30px 70px -24px rgba(41,53,70,.35), 0 4px 18px rgba(41,53,70,.08);
  overflow:hidden;
  border:1px solid var(--okd-border);
}
.okdBadge{
  position:absolute; left:-26px; bottom:-24px;
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:14px;
  box-shadow:var(--okd-shadow-pop);
  padding:14px 20px 14px 14px;
  border:1px solid var(--okd-border);
}
.okdBadge__icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--okd-primary-soft); color:var(--okd-primary);
  display:inline-flex; align-items:center; justify-content:center;
}
.okdBadge__icon svg{ width:22px; height:22px; }
.okdBadge__text{ display:flex; flex-direction:column; line-height:1.3; }
.okdBadge__text strong{ font-size:15.5px; font-weight:800; color:var(--okd-ink); }
.okdBadge__text span{ font-size:13px; font-weight:600; color:var(--okd-primary); }

@media (max-width:980px){
  .okdHero{ padding:44px 0 64px; }
  .okdHero__grid{ grid-template-columns:1fr; gap:44px; }
  .okdHero h1{ letter-spacing:-.5px; }
  .okdHeroImage{ max-width:560px; margin:0 auto; width:100%; }
  .okdBadge{ left:8px; bottom:-20px; }
}
@media (max-width:560px){
  .okdCtaRow .okdBtn{ flex:1 1 100%; }
  .okdProofDivider{ display:none; }
  .okdBadge{ padding:11px 15px 11px 11px; }
  .okdBadge__icon{ width:38px; height:38px; }
}

/* ── Trust-band ──────────────────────────────────────────────────── */
.okdBand{
  border-top:1px solid var(--okd-border);
  border-bottom:1px solid var(--okd-border);
  background:#fff;
  padding:26px 0;
}
.okdBand--grey{ background:var(--okd-grey); }
.okdBand__inner{
  display:flex; align-items:center; gap:38px; flex-wrap:wrap;
}
.okdBand__row{
  display:flex; flex-wrap:wrap; gap:14px 30px;
  justify-content:center; align-items:center;
  padding:18px 0;
}
.okdBand__item{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:700; color:var(--okd-ink-2);
}
.okdBand__item--lg{ font-size:14.5px; color:var(--okd-ink); gap:8px; }
.okdBand__mark{ display:inline-flex; color:var(--okd-green); }
.okdBand__mark--primary{ color:var(--okd-primary); }

.okdCard{
  background:#fff;
  border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-card);
  padding:18px 20px;
  box-shadow:var(--okd-shadow-card);
}
.okdCard--flat{ box-shadow:none; margin-bottom:12px; }
.okdCard__head{
  display:flex; flex-wrap:wrap; gap:6px 12px;
  align-items:baseline; justify-content:space-between;
}
.okdCard__title{ font-weight:800; font-size:18px; color:var(--okd-ink); }
.okdCard__text{ font-size:16.5px; line-height:1.7; color:var(--okd-ink-2); margin:0 0 14px; }
.okdCardList{ display:grid; gap:14px; }

.okdCallout{
  background:linear-gradient(135deg, var(--okd-primary-soft), #fff);
  border:1.5px solid var(--okd-primary);
  border-radius:14px;
  padding:20px 22px; margin-bottom:20px;
  box-shadow:var(--okd-shadow-card);
}
.okdBand__label{
  font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--okd-muted); flex-shrink:0;
}
.okdBand__logos{
  display:flex; align-items:center; gap:16px 34px; flex-wrap:wrap;
  flex:1; justify-content:center;
}
.okdBand__logo{
  font-size:19px; font-weight:800; letter-spacing:-.3px;
  color:var(--okd-muted); opacity:.9;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .18s, filter .18s, opacity .18s;
  white-space:nowrap;
}
.okdBand__logo:hover{ color:var(--okd-ink-2); }
.okdBand__logo svg{ width:20px; height:20px; }
@media (max-width:760px){
  .okdBand__inner{ gap:16px; }
  .okdBand__logos{ gap:18px 26px; justify-content:flex-start; }
  .okdBand__logo{ font-size:16px; }
}

/* ── Secties + titels ────────────────────────────────────────────── */
.okdSection{ padding:88px 0; background:#fff; }
.okdSection--grey{ background:var(--okd-grey); }
.okdSection--soft{ background:var(--okd-primary-soft); }
.okdSection--green{ background:var(--okd-green-soft); }
.okdSection--navy{ background:var(--okd-navy); }
.okdSection--navy .okdTitles h2{ color:#fff; }
.okdSection--navy .okdTitles .okdSubtitle{ color:rgba(255,255,255,.82); }
.okdSection--tight{ padding:64px 0; }
.okdTitles{ text-align:center; max-width:820px; margin:0 auto 52px; padding:0 24px; }
.okdTitles h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:800; line-height:1.2; letter-spacing:-.7px;
  margin:0 0 12px;
}
.okdTitles .okdSubtitle{
  font-size:20px; font-weight:400; line-height:1.55;
  color:var(--okd-muted); margin:0;
}
@media (max-width:760px){
  .okdSection{ padding:60px 0; }
  .okdTitles{ margin-bottom:36px; }
  .okdTitles .okdSubtitle{ font-size:17.5px; }
}

/* ── Feature-grid (lichtgrijze kaarten, wit icoontegeltje) ───────── */
.okdFeatGrid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.okdFeat{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--okd-grey);
  border-radius:var(--okd-radius-card);
  padding:26px 24px;
  text-decoration:none !important;
  transition:transform .18s, box-shadow .18s, background .18s;
}
a.okdFeat:hover{ transform:translateY(-3px); box-shadow:var(--okd-shadow-card); background:#fff; }
.okdFeat__icon{
  width:52px; height:52px; flex-shrink:0;
  background:#fff; border-radius:12px;
  box-shadow:0 3px 10px rgba(41,53,70,.08);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--okd-blue);
}
.okdFeat__icon svg{ width:24px; height:24px; }
.okdFeat__title{ font-size:17.5px; font-weight:800; color:var(--okd-ink); margin:2px 0 5px; }
.okdFeat__text{ font-size:15px; line-height:1.55; color:var(--okd-muted); }
.okdSectionFoot{ text-align:center; margin-top:44px; }
@media (max-width:980px){ .okdFeatGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .okdFeatGrid{ grid-template-columns:1fr; } }

/* ── USP-grid (witte kaarten, groene icoon-cirkel) ───────────────── */
.okdUspGrid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.okdUsp{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-card);
  padding:26px 24px;
  box-shadow:0 2px 10px rgba(41,53,70,.04);
}
.okdUsp__icon{
  width:46px; height:46px; flex-shrink:0;
  border-radius:50%; background:var(--okd-green-soft);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--okd-green);
}
.okdUsp__icon svg{ width:21px; height:21px; }
.okdUsp__title{ font-size:17px; font-weight:800; color:var(--okd-ink); margin:2px 0 5px; }
.okdUsp__text{ font-size:15px; line-height:1.55; color:var(--okd-muted); margin:0; }
@media (max-width:980px){ .okdUspGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .okdUspGrid{ grid-template-columns:1fr; } }

/* ── Stappen (1-2-3) ─────────────────────────────────────────────── */
.okdSteps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.okdStep{
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-box);
  padding:30px 26px;
  box-shadow:0 2px 10px rgba(41,53,70,.04);
  position:relative;
}
.okdStep__num{
  width:40px; height:40px; border-radius:50%;
  background:var(--okd-primary); color:#fff;
  font-size:18px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  box-shadow:0 6px 16px -6px rgba(79,70,229,.6);
}
.okdStep h3{ font-size:19px; font-weight:800; margin:0 0 8px; }
.okdStep p{ font-size:15.5px; line-height:1.6; color:var(--okd-muted); margin:0; }
@media (max-width:900px){
  .okdSteps{
    display:flex; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px; padding:2px 24px 16px;
    scrollbar-width:none;
  }
  .okdSteps::-webkit-scrollbar{ display:none; }
  .okdSteps > .okdStep{ flex:0 0 84%; max-width:360px; scroll-snap-align:center; }
}

/* ── Statistieken-band ───────────────────────────────────────────── */
.okdStatsRow{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:18px; text-align:center;
}
.okdStat{ padding:10px 6px; }
.okdStat__num{
  font-size:clamp(26px, 3vw, 36px); font-weight:800;
  color:var(--okd-primary); letter-spacing:-.5px; line-height:1.15;
}
.okdStat__label{ font-size:14.5px; font-weight:600; color:var(--okd-muted); margin-top:4px; }
@media (max-width:900px){ .okdStatsRow{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 12px; } .okdStat--wide{ grid-column:1/-1; } }

/* ── Google-proof regel onder sectietitel ────────────────────────── */
.okdTrustLine{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-top:14px;
  font-size:16px; color:var(--okd-ink-2); font-weight:600;
}
.okdTrustLine b{ font-weight:800; color:var(--okd-ink); }

/* ── Pricing ─────────────────────────────────────────────────────── */
.okdPricing{
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:26px; max-width:1000px; margin:0 auto;
  align-items:start;
}
.okdPrice{
  background:var(--okd-grey);
  border-radius:var(--okd-radius-box);
  padding:40px 36px;
  text-align:center;
}
.okdPrice--popular{
  background:#fff;
  border:2px solid var(--okd-primary);
  position:relative;
  box-shadow:0 18px 44px -18px rgba(79,70,229,.25);
}
.okdPrice__pill{
  position:absolute; top:-16px; right:26px;
  background:var(--okd-primary-soft); color:var(--okd-primary);
  font-size:13.5px; font-weight:800;
  padding:7px 16px; border-radius:50px;
  box-shadow:0 4px 12px rgba(41,53,70,.08);
}
.okdPrice__name{ font-size:22px; font-weight:800; color:var(--okd-ink); margin-bottom:14px; }
.okdPrice__amount{ font-size:44px; font-weight:800; color:var(--okd-ink); letter-spacing:-1px; line-height:1.1; }
.okdPrice__amount small{ font-size:17px; font-weight:700; color:var(--okd-muted); letter-spacing:0; }
.okdPrice__note{ font-size:14.5px; font-weight:700; color:var(--okd-green); min-height:22px; margin:8px 0 20px; }
.okdPrice__note--muted{ color:var(--okd-muted); }
.okdPrice .okdBtn{ width:100%; max-width:300px; }
.okdCheckList{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
  text-align:left;
}
.okdCheckList li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--okd-ink-2); }
.okdCheckList .okdCheck{ width:22px; height:22px; }
@media (max-width:860px){
  .okdPricing{ grid-template-columns:1fr; max-width:520px; }
  .okdPrice--popular{ order:-1; }
}
/* Smalle telefoons: minder padding zodat prijskaarten niet klemmen/afkappen. */
@media (max-width:520px){
  .okdContainer{ padding:0 16px; }
  .okdPrice{ padding:28px 20px; }
  .okdPrice__amount{ font-size:38px; }
  .okdPrice .okdBtn{ max-width:none; }
  .okdCheckList li{ font-size:15px; }
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.okdFaqList{
  max-width:840px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
}
.okdFaq{
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-card);
  overflow:hidden;
  transition:box-shadow .18s, border-color .18s;
}
.okdFaq[open]{ border-color:var(--okd-primary); box-shadow:0 8px 24px -8px rgba(79,70,229,.16); }
.okdFaq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 24px;
  font-size:17px; font-weight:700; color:var(--okd-ink);
}
.okdFaq summary::-webkit-details-marker{ display:none; }
.okdFaq summary svg{ width:16px; height:16px; stroke:var(--okd-primary); flex-shrink:0; transition:transform .22s; }
.okdFaq[open] summary svg{ transform:rotate(180deg); }
.okdFaq p{ margin:0; padding:0 24px 20px; font-size:15.5px; line-height:1.65; color:var(--okd-ink-2); }
.okdSection--grey .okdFaq{ border-color:transparent; box-shadow:0 2px 10px rgba(41,53,70,.05); }
.okdSection--grey .okdFaq[open]{ border-color:var(--okd-primary); }

/* ── FeatureHighlight (afwisselende tekst/beeld-rijen) ───────────── */
.okdHighlight{
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
  padding:72px 0;
}
.okdHighlight + .okdHighlight{ border-top:1px solid var(--okd-border); }
.okdHighlight--flip .okdHighlight__text{ order:2; }
.okdHighlight--flip .okdHighlight__media{ order:1; }
.okdHighlight__text h2{
  font-size:clamp(26px, 3vw, 36px); font-weight:800;
  letter-spacing:-.6px; margin:0 0 18px;
}
.okdHighlight__text p{ font-size:16.5px; line-height:1.65; color:var(--okd-ink-2); margin:0 0 16px; }
.okdHighlight__text .okdBtn{ margin-top:10px; }
.okdHighlight__media{ position:relative; }
.okdSquare{ position:relative; padding:34px; }
.okdSquare::before{
  content:''; position:absolute; inset:0;
  border-radius:40px; transform:rotate(-3deg);
  z-index:0;
}
.okdSquare--primary::before{ background:var(--okd-primary-soft); }
.okdSquare--blue::before{ background:var(--okd-blue-soft); }
.okdSquare--green::before{ background:var(--okd-green-soft); }
.okdSquare > *{ position:relative; z-index:1; }
@media (max-width:900px){
  .okdHighlight{ grid-template-columns:1fr; gap:36px; padding:52px 0; }
  .okdHighlight--flip .okdHighlight__text{ order:1; }
  .okdHighlight--flip .okdHighlight__media{ order:2; }
}

/* ── Anchor-icoonknoppen (feature-pagina's) ──────────────────────── */
.okdAnchors{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
}
.okdAnchor{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:172px; padding:22px 14px;
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-card);
  text-decoration:none !important;
  font-size:15px; font-weight:700; color:var(--okd-ink); text-align:center;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.okdAnchor:hover{ transform:translateY(-3px); box-shadow:var(--okd-shadow-card); border-color:var(--okd-primary); }
.okdAnchor .okdFeat__icon{ box-shadow:none; background:var(--okd-primary-soft); color:var(--okd-primary); }

/* ── Footer-CTA (met decoratieve vlakken) ────────────────────────── */
.okdFooterCta{
  position:relative; overflow:hidden;
  background:var(--okd-grey);
  padding:100px 24px 110px;
  text-align:center;
}
.okdFooterCta h2{
  font-size:clamp(28px, 3.4vw, 40px); font-weight:800;
  letter-spacing:-.7px; line-height:1.25;
  max-width:760px; margin:0 auto 20px;
  position:relative; z-index:2;
}
.okdFooterCta__proof{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; color:var(--okd-ink-2); font-weight:600;
  position:relative; z-index:2; margin-bottom:26px;
}
.okdFooterCta__proof b{ font-weight:800; color:var(--okd-ink); }
.okdFooterCta .okdBtn{ position:relative; z-index:2; }
.okdFooterCta__micro{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:700; color:var(--okd-muted);
  margin:18px 0 0;
}
.okdFooterCta__micro svg{ width:13px; height:13px; stroke:var(--okd-green); }
.okdShape{ position:absolute; border-radius:60px; z-index:1; pointer-events:none; }
.okdShape--primary{
  width:420px; height:420px;
  left:-160px; bottom:-230px;
  background:var(--okd-tint-primary);
  transform:rotate(24deg);
}
.okdShape--blue{
  width:560px; height:560px;
  right:-200px; bottom:-300px;
  background:var(--okd-tint-blue);
  transform:rotate(-14deg);
}
.okdShape--blue2{
  width:300px; height:300px;
  right:120px; bottom:-190px;
  background:var(--okd-tint-blue-2);
  transform:rotate(30deg);
}
@media (max-width:760px){
  .okdFooterCta{ padding:70px 20px 90px; }
  .okdShape--primary{ width:280px; height:280px; left:-140px; bottom:-170px; }
  .okdShape--blue{ width:340px; height:340px; right:-160px; bottom:-210px; }
  .okdShape--blue2{ display:none; }
}

/* ── Footer (donker navy) ────────────────────────────────────────── */
.okdFooter{ background:var(--okd-navy); color:var(--okd-on-dark); }
.okdFooter__content{
  max-width:1240px; margin:0 auto;
  padding:70px 24px 56px;
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr 1fr 1fr;
  gap:40px;
}
.okdFooter__brand .okdLogo{ font-size:24px; }
.okdFooter__brand .okdLogo span{ color:#fff; }
.okdFooter__brand p{ font-size:14.5px; line-height:1.65; margin:18px 0 20px; color:var(--okd-on-dark); }
.okdFooter__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.okdFooter__meta{ font-size:13.5px; color:var(--okd-on-dark); line-height:1.7; }
.okdFooterHead{ font-size:16.5px; font-weight:800; color:#fff; margin-bottom:16px; }
.okdFooter ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.okdFooter ul a{ font-size:15px; font-weight:600; color:var(--okd-on-dark); transition:color .15s; }
.okdFooter ul a:hover{ color:#fff; }
.okdFooterGrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:24px; padding:40px 0;
}
.okdFooterBar{ background:var(--okd-primary); }
.okdFooterBar__inner{
  max-width:1240px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14px; font-weight:600; color:var(--okd-on-dark-2);
}
.okdFooterBar__inner a{ color:#fff; font-weight:700; }
.okdFooterBar__inner a:hover{ text-decoration:underline; }
.okdFooterCopy{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.okdFooterCopy i{ opacity:.55; font-style:normal; }
.okdFooterSocial{ display:flex; align-items:center; gap:16px; }
.okdFooterSocial a{ display:inline-flex; color:var(--okd-on-dark-2); }
.okdFooterSocial a:hover{ color:#fff; }
.okdFooterSocial svg{ width:18px; height:18px; fill:currentColor; }
@media (max-width:1020px){
  .okdFooter__content{ grid-template-columns:1fr 1fr; gap:36px; }
  .okdFooter__brand{ grid-column:1/-1; max-width:440px; }
}
@media (max-width:520px){
  .okdFooter__content{ grid-template-columns:1fr; padding:52px 22px 40px; }
}

/* ── Mockups (CSS-gebouwde product-schermen in de hero's) ────────── */
.okdMock{ font-size:13px; }
.okdMock__topbar{
  display:flex; align-items:center; gap:8px;
  background:var(--okd-grey); border-bottom:1px solid var(--okd-border);
  padding:11px 16px;
}
.okdMock__dot{ width:9px; height:9px; border-radius:50%; background:var(--okd-border); }
.okdMock__dot--a{ background:var(--okd-primary); } .okdMock__dot--b{ background:var(--okd-blue); } .okdMock__dot--c{ background:var(--okd-green); }
.okdMock__url{
  flex:1; margin-left:8px;
  background:#fff; border:1px solid var(--okd-border); border-radius:7px;
  padding:5px 12px; font-size:11.5px; font-weight:600; color:var(--okd-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.okdMock__body{ display:flex; min-height:330px; }
.okdMock__side{
  width:150px; flex-shrink:0;
  background:var(--okd-navy);
  padding:16px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.okdMock__sideLogo{ font-size:13.5px; font-weight:800; color:#fff; padding:2px 8px 12px; letter-spacing:-.2px; }
.okdMock__sideLogo b{ background:var(--okd-primary); border-radius:5px; padding:2px 4px; margin-right:3px; }
.okdMock__nav{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:700; color:var(--okd-on-dark);
  padding:8px 10px; border-radius:8px;
}
.okdMock__nav.is-active{ background:var(--okd-primary); color:#fff; }
.okdMock__navBadge{
  background:rgba(255,255,255,.22); border-radius:20px;
  font-size:10px; padding:1px 7px;
}
.okdMock__main{ flex:1; padding:18px 20px; background:#fff; min-width:0; }
.okdMock__kpis{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.okdKpi{
  flex:1; min-width:86px;
  border-radius:10px; padding:10px 12px; color:#fff;
}
.okdKpi--green{ background:var(--okd-green); }
.okdKpi--blue{ background:var(--okd-blue); }
.okdKpi--primary{ background:var(--okd-primary); }
.okdKpi--violet{ background:var(--okd-violet); }
.okdKpi b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.2px; }
.okdKpi span{ font-size:10.5px; font-weight:700; opacity:.85; }
.okdMock__card{
  background:#fff; border:1px solid var(--okd-border); border-radius:12px;
  padding:14px 16px; margin-bottom:12px;
}
.okdMock__cardTitle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; font-weight:800; color:var(--okd-ink); margin-bottom:10px;
}
.okdTag{
  font-size:10px; font-weight:800; letter-spacing:.3px;
  padding:3px 9px; border-radius:20px;
}
.okdTag--green{ background:var(--okd-green-soft); color:var(--okd-green-ink); }
.okdTag--blue{ background:var(--okd-blue-soft); color:var(--okd-blue); }
.okdTag--primary{ background:var(--okd-primary-soft); color:var(--okd-primary); }
.okdMock__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:600; color:var(--okd-ink-2);
  padding:7px 0; border-top:1px dashed var(--okd-border);
}
.okdMock__row:first-of-type{ border-top:0; }
.okdMock__row b{ color:var(--okd-ink); font-weight:800; white-space:nowrap; }
.okdMock__row--total{ border-top:1px solid var(--okd-border); }
.okdMock__row--total span, .okdMock__row--total b{ color:var(--okd-ink); font-weight:800; }
.okdMock__btn{
  display:inline-block; background:var(--okd-primary); color:#fff;
  font-size:12px; font-weight:800; border-radius:8px;
  padding:8px 16px; margin-top:4px;
}
.okdMockMail{ padding:18px; }
.okdMockMail__item{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 12px; border-radius:10px;
}
.okdMockMail__item.is-active{ background:var(--okd-primary-soft); }
.okdMockMail__avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.okdMockMail__meta{ min-width:0; flex:1; }
.okdMockMail__name{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:800; color:var(--okd-ink); }
.okdMockMail__name span{ font-weight:600; color:var(--okd-muted); font-size:11px; flex-shrink:0; }
.okdMockMail__subj{ font-size:12px; font-weight:700; color:var(--okd-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okdMockMail__body{ font-size:11.5px; color:var(--okd-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){
  .okdMock__side{ display:none; }
}


/* ── Illustratie-tegels ("Zo simpel werkt het") ──────────────────── */
.okdTilesHead{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:36px;
}
.okdTilesHead h2{
  font-size:clamp(28px, 3.4vw, 40px); font-weight:800;
  line-height:1.2; letter-spacing:-.7px; margin:0; max-width:640px;
}
.okdTilesHead p{
  font-size:16px; color:var(--okd-muted); max-width:380px;
  line-height:1.55; margin:0; font-weight:600;
}
.okdTileGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.okdTile{
  display:block; text-decoration:none !important; color:inherit;
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-box);
  overflow:hidden; position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.okdTile:hover{ transform:translateY(-4px); box-shadow:var(--okd-shadow-pop); }
.okdTile__art{
  position:relative; height:200px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.okdTile__art svg{ width:100%; height:100%; display:block; }
.okdTile__body{ padding:22px 24px 26px; }
.okdTile__title{ font-size:18px; font-weight:800; color:var(--okd-ink); margin:0 0 6px; letter-spacing:-.2px; }
.okdTile__sub{ font-size:14.5px; color:var(--okd-muted); line-height:1.55; margin:0 0 14px; }
.okdTile__more{
  font-size:14px; font-weight:800; color:var(--okd-primary);
  display:inline-flex; align-items:center; gap:6px;
}
.okdTile__more svg{ width:14px; height:14px; transition:transform .15s ease; }
.okdTile:hover .okdTile__more svg{ transform:translateX(3px); }
.okdTile--indigo .okdTile__art{ background:linear-gradient(135deg, var(--okd-primary-soft) 0%, var(--okd-tint-primary) 100%); }
.okdTile--mint .okdTile__art{   background:linear-gradient(135deg, var(--okd-green-soft) 0%, var(--okd-tint-green) 100%); }
.okdTile--sky .okdTile__art{    background:linear-gradient(135deg, var(--okd-blue-soft) 0%, var(--okd-tint-blue) 100%); }
.okdTile--lilac .okdTile__art{  background:linear-gradient(135deg, var(--okd-primary-soft) 0%, var(--okd-tint-violet) 100%); }
.okdTile--gold .okdTile__art{   background:linear-gradient(135deg, var(--okd-gold-soft) 0%, var(--okd-tint-gold) 100%); }
.okdTile--mist .okdTile__art{   background:linear-gradient(135deg, var(--okd-grey) 0%, var(--okd-tint-blue) 100%); }
@media (max-width:980px){
  .okdTileGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .okdTile__art{ height:175px; }
}
@media (max-width:640px){ .okdTileGrid{ grid-template-columns:1fr; } }


/* ── Pricing: 3 kolommen (tarieven-pagina) ───────────────────────── */
.okdPricing--three{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1100px; }
.okdPricing--three .okdPrice{ padding:34px 28px; }
.okdPricing--three .okdPrice__amount{ font-size:40px; }
@media (max-width:960px){
  .okdPricing--three{ grid-template-columns:1fr; max-width:520px; }
}

/* ── Deal-callout (lifetime) ─────────────────────────────────────── */
.okdDeal{
  max-width:1000px; margin:46px auto 0;
  background:var(--okd-navy); color:#fff;
  border-radius:var(--okd-radius-box);
  padding:38px 40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.okdDeal::after{
  content:''; position:absolute; right:-120px; top:-120px;
  width:300px; height:300px; border-radius:60px;
  background:rgba(79,70,229,.35); transform:rotate(24deg);
}
.okdDeal__text{ position:relative; z-index:1; max-width:560px; }
.okdDeal__eyebrow{ font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--okd-on-dark-2); margin-bottom:8px; }
.okdDeal__title{ font-size:26px; font-weight:800; color:#fff; letter-spacing:-.4px; margin-bottom:8px; }
.okdDeal__sub{ font-size:15.5px; color:var(--okd-on-dark); line-height:1.6; margin:0 0 14px; }
.okdDeal__points{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; font-weight:700; color:var(--okd-on-dark-2); }
.okdDeal__points span{ display:inline-flex; align-items:center; gap:7px; }
.okdDeal__points svg{ width:13px; height:13px; stroke:var(--okd-green); }
.okdDeal .okdBtn{ position:relative; z-index:1; flex-shrink:0; }

/* ── Vergelijkingstabel ──────────────────────────────────────────── */
.okdCompareWrap{ max-width:1000px; margin:0 auto; overflow-x:auto; border-radius:var(--okd-radius-box); border:1px solid var(--okd-border); background:#fff; }
.okdCompare{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
.okdCompare th{
  text-align:left; padding:15px 20px;
  background:var(--okd-grey);
  font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--okd-ink-2);
  border-bottom:2px solid var(--okd-border);
  white-space:nowrap;
}
.okdCompare th:first-child{ width:38%; }
.okdCompare th.is-hero{ color:var(--okd-primary); }
.okdCompare td{
  padding:13px 20px;
  border-top:1px solid var(--okd-border);
  color:var(--okd-ink-2); font-weight:600;
}
.okdCompare tr:first-child td{ border-top:0; }
.okdCompare td:first-child{ color:var(--okd-ink); font-weight:700; }
.okdCompare td.is-hero{ background:var(--okd-primary-soft); color:var(--okd-primary); font-weight:800; }
.okdYes{ color:var(--okd-green); font-weight:800; }
.okdNo{ color:var(--okd-muted); font-weight:800; }
.okdCompareNote{ max-width:1000px; margin:14px auto 0; font-size:13.5px; color:var(--okd-muted); text-align:center; }

/* ── Prijstoggle-noot ────────────────────────────────────────────── */
.okdBillingNote{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--okd-green-soft); color:var(--okd-green-ink);
  font-size:14px; font-weight:800;
  padding:8px 18px; border-radius:50px;
  margin-top:14px;
}


/* ── Contact / bedrijf ───────────────────────────────────────────── */
.okdContactGrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; max-width:1080px; margin:0 auto; }
@media (max-width:900px){ .okdContactGrid{ grid-template-columns:1fr; gap:32px; } }
.okdForm{ background:#fff; border:1px solid var(--okd-border); border-radius:var(--okd-radius-box); padding:32px; box-shadow:var(--okd-shadow-card); }
.okdForm h3{ font-size:22px; font-weight:800; margin:0 0 6px; }
.okdForm > p{ font-size:15px; color:var(--okd-muted); margin:0 0 22px; }
.okdField{ margin-bottom:18px; }
.okdField label{ display:block; font-size:14px; font-weight:700; color:var(--okd-ink); margin-bottom:7px; }
.okdField label .req{ color:var(--okd-primary); }
.okdField input, .okdField select, .okdField textarea{
  width:100%; box-sizing:border-box; font-family:var(--okd-font); font-size:15.5px; color:var(--okd-ink);
  padding:12px 14px; border:1.5px solid var(--okd-border); border-radius:10px; background:var(--okd-grey);
  transition:border-color .15s, box-shadow .15s, background .15s; outline:none;
}
.okdField input:focus, .okdField select:focus, .okdField textarea:focus{ border-color:var(--okd-primary); background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.okdField textarea{ resize:vertical; min-height:120px; }
.okdForm .okdBtn{ width:100%; }
.okdFormNote{ font-size:13px; color:var(--okd-muted); text-align:center; margin:12px 0 0; display:flex; align-items:center; justify-content:center; gap:7px; }
.okdFormNote svg{ width:13px; height:13px; stroke:var(--okd-green); }
.okdContactCards{ display:flex; flex-direction:column; gap:14px; }
.okdContactCard{ display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--okd-border); border-radius:var(--okd-radius-card); padding:20px 22px; box-shadow:0 2px 10px rgba(41,53,70,.04); }
.okdContactCard__icon{ width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--okd-primary-soft); color:var(--okd-primary); display:inline-flex; align-items:center; justify-content:center; }
.okdContactCard__icon svg{ width:21px; height:21px; }
.okdContactCard__b{ font-size:16px; font-weight:800; color:var(--okd-ink); margin-bottom:2px; }
.okdContactCard__v{ font-size:14.5px; color:var(--okd-primary); font-weight:700; }
.okdContactCard__s{ font-size:13.5px; color:var(--okd-muted); margin-top:3px; }

/* ── Reviews ─────────────────────────────────────────────────────── */
.okdReviewGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
@media (max-width:900px){ .okdReviewGrid{ grid-template-columns:1fr; } }
.okdReview{ background:#fff; border:1px solid var(--okd-border); border-radius:var(--okd-radius-card); padding:24px 22px; box-shadow:0 2px 10px rgba(41,53,70,.04); display:flex; flex-direction:column; gap:14px; }
.okdReview__stars{ display:inline-flex; gap:2px; }
.okdReview__stars svg{ width:16px; height:16px; fill:var(--okd-gold); }
.okdReview__quote{ font-size:15.5px; line-height:1.6; color:var(--okd-ink); margin:0; }
.okdReview__author{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:6px; }
.okdReview__avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; }
.okdReview__name{ font-size:14.5px; font-weight:800; color:var(--okd-ink); line-height:1.25; }
.okdReview__role{ font-size:13px; color:var(--okd-muted); }

/* ── Story / timeline (over-ons) ─────────────────────────────────── */
.okdQuote{ max-width:820px; margin:0 auto; background:var(--okd-navy); color:#fff; border-radius:var(--okd-radius-box); padding:40px 44px; position:relative; overflow:hidden; }
.okdQuote::before{ content:'C'; position:absolute; top:-10px; left:24px; font-size:120px; color:rgba(255,255,255,.12); font-family:Georgia,serif; line-height:1; }
.okdQuote p{ font-size:21px; line-height:1.5; font-weight:700; margin:0 0 18px; position:relative; }
.okdQuote__by{ display:flex; align-items:center; gap:12px; }
.okdQuote__av{ width:44px; height:44px; border-radius:50%; background:var(--okd-primary); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; }
.okdQuote__meta b{ display:block; font-size:15px; font-weight:800; }
.okdQuote__meta span{ font-size:13.5px; color:var(--okd-on-dark); }
.okdStory{ max-width:760px; margin:0 auto; }
.okdStory p{ font-size:17px; line-height:1.75; color:var(--okd-ink-2); margin:0 0 18px; }
.okdStory p b{ color:var(--okd-ink); }

.okdShowcase{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:1080px; margin:0 auto 56px; }
.okdShowcase--flip .okdShowcase__media{ order:-1; }
.okdShowcase__media{ background:linear-gradient(135deg,var(--okd-primary-soft),#fff); border:1px solid var(--okd-border); border-radius:16px; padding:34px; display:flex; align-items:center; justify-content:center; min-height:220px; box-shadow:var(--okd-shadow-card); }
.okdShowcase__media svg{ width:76px; height:76px; color:var(--okd-primary); }
.okdShowcase__eyebrow{ font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--okd-primary); margin:0 0 8px; }
.okdShowcase__title{ font-size:clamp(22px,2.6vw,28px); font-weight:800; color:var(--okd-ink); margin:0 0 12px; letter-spacing:-.5px; line-height:1.2; }
.okdShowcase p{ font-size:17px; line-height:1.7; color:var(--okd-ink-2); margin:0 0 14px; }
.okdShowcase__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
@media(max-width:820px){ .okdShowcase{ grid-template-columns:1fr; gap:22px; margin-bottom:40px; } .okdShowcase--flip .okdShowcase__media{ order:0; } .okdShowcase__media{ min-height:160px; padding:26px; } }

/* ── Auth (login + registreren) ──────────────────────────────────── */
@keyframes spin{ to{ transform:rotate(360deg); } }
.okdAuth--single{ max-width:440px; margin:0 auto; }
.okdAuth--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; max-width:1020px; margin:0 auto; align-items:start; }
@media (max-width:820px){ .okdAuth--split{ grid-template-columns:1fr; gap:32px; } }
.okdAuthCard{ background:#fff; border:1px solid var(--okd-border); border-radius:var(--okd-radius-box); padding:34px 32px; box-shadow:var(--okd-shadow-card); }
.okdAuthHead{ margin-bottom:22px; }
.okdAuthHead h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color:var(--okd-ink); line-height:1.2; }
.okdAuthHead p{ font-size:15px; color:var(--okd-muted); margin:0; line-height:1.5; }
.okdAuthError{ background:var(--okd-red-soft); border:1px solid var(--okd-red-border); color:var(--okd-red); border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.5; margin-bottom:18px; }
.okdAuthRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 20px; font-size:14px; }
.okdAuthCheck{ display:inline-flex; align-items:center; gap:8px; color:var(--okd-muted); cursor:pointer; font-weight:600; }
.okdAuthCheck input{ width:auto; margin:0; accent-color:var(--okd-primary); }
.okdAuthRow > a{ color:var(--okd-primary); font-weight:700; text-decoration:none; }
.okdAuthRow > a:hover{ text-decoration:underline; }
.okdAuthBtn{ width:100%; justify-content:center; border:0; cursor:pointer; font:inherit; gap:8px; }
.okdAuthAlt{ text-align:center; margin-top:20px; font-size:14px; color:var(--okd-muted); }
.okdAuthAlt a{ color:var(--okd-primary); font-weight:700; text-decoration:none; }
.okdAuthAlt a:hover{ text-decoration:underline; }
.okdAuthResetHead{ text-align:center; margin-bottom:16px; }
.okdAuthResetHead strong{ display:block; font-size:17px; font-weight:800; color:var(--okd-ink); }
.okdAuthResetHead span{ font-size:14px; color:var(--okd-muted); }
.okdAuthBack{ text-align:center; margin-top:12px; }
.okdAuthBack a{ font-size:14px; color:var(--okd-primary); font-weight:700; text-decoration:none; }
.okdAuthSuccess{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0; }
.okdAuthSuccess strong{ font-size:17px; font-weight:800; color:var(--okd-ink); }
.okdAuthSuccess span{ font-size:14px; color:var(--okd-muted); line-height:1.5; }
.okdAuthSuccess--lg h2{ font-size:22px; font-weight:800; color:var(--okd-ink); margin:12px 0 4px; }
.okdAuthSuccess--lg p{ font-size:15px; color:var(--okd-muted); margin:0 0 6px; line-height:1.6; max-width:360px; }
.okdAuthLink{ color:var(--okd-primary); font-weight:700; text-decoration:none; margin-top:8px; }
.okdAuthGrid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .okdAuthGrid2{ grid-template-columns:1fr; } }
.okdAuthPw{ height:6px; border-radius:99px; background:var(--okd-grey); overflow:hidden; margin-top:8px; }
.okdAuthPw > #pw-bar{ height:100%; border-radius:99px; transition:width .25s, background .25s; }
.okdAuthPin{ letter-spacing:6px; text-align:center; font-size:16px; }
.okdAuthHint{ font-size:12.5px; color:var(--okd-muted); margin:6px 0 0; line-height:1.5; }
.okdAuthTerms{ font-size:12.5px; color:var(--okd-muted); margin-top:16px; line-height:1.55; }
.okdAuthTerms a{ color:var(--okd-primary); font-weight:600; text-decoration:none; }
.okdAuthTerms a:hover{ text-decoration:underline; }
/* Benefits-panel rechts op registreren */
.okdAuthBen{ position:sticky; top:96px; }
.okdAuthBen__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--okd-primary); margin-bottom:12px; }
.okdAuthBen__eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--okd-primary); }
.okdAuthBen h2{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--okd-ink); line-height:1.25; margin:0 0 22px; }
.okdAuthBen__list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:16px; }
.okdAuthBen__item{ display:flex; align-items:flex-start; gap:13px; }
.okdAuthBen__ic{ width:26px; height:26px; flex-shrink:0; border-radius:50%; background:rgba(0,192,120,.14); color:var(--okd-green); display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.okdAuthBen__ic svg{ width:15px; height:15px; }
.okdAuthBen__item > span{ display:flex; flex-direction:column; gap:2px; }
.okdAuthBen__item b{ font-size:15px; font-weight:800; color:var(--okd-ink); }
.okdAuthBen__item > span > span{ font-size:13.5px; color:var(--okd-muted); line-height:1.5; }
.okdAuthBen__proof{ display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--okd-border); font-size:14px; color:var(--okd-muted); }
.okdAuthBen__proof .okdStars{ color:var(--okd-gold); font-size:15px; letter-spacing:1px; }
.okdAuthBen__proof b{ color:var(--okd-ink); }
@media (max-width:820px){ .okdAuthBen{ position:static; } }

/* ── Artikel / juridische pagina's ───────────────────────────────── */
.okdArticle{ max-width:820px; margin:0 auto; padding:56px 24px 80px; }
.okdArticle h1{ font-size:clamp(30px,4vw,42px); font-weight:800; letter-spacing:-.8px; margin-bottom:18px; }
.okdArticle h2{ font-size:26px; font-weight:800; letter-spacing:-.4px; margin:42px 0 14px; }
.okdArticle h3{ font-size:20px; font-weight:800; margin:30px 0 10px; }
.okdArticle p, .okdArticle li{ font-size:16.5px; line-height:1.7; color:var(--okd-ink-2); }
.okdArticle a{ font-weight:700; }
.okdArticle a:hover{ text-decoration:underline; }

/* ── Kleine helpers ──────────────────────────────────────────────── */
.okdCenter{ text-align:center; }
.okdMt20{ margin-top:20px; } .okdMt40{ margin-top:40px; }
.okdHidden{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════
   MOBIELE VEILIGHEID (globaal). Grid/flex-kinderen hebben standaard
   min-width:auto → lange inhoud (selects, lange woorden, mockups) duwt de
   kolom breder dan de viewport en steekt rechts uit. min-width:0 lost dit op.
   ════════════════════════════════════════════════════════════════════ */
.okdHero__grid > *, .okdFeatGrid > *, .okdUspGrid > *, .okdTileGrid > *,
.okdStatsRow > *, .okdContactGrid > *, .okdReviewGrid > *,
.okdAuth--split > *, .okdAuthGrid2 > *, .okdSteps > *,
.okdPricing > *, .okdPricing--three > *{ min-width:0; }
.okdContainer{ width:100%; }

/* ════════════════════════════════════════════════════════════════════
   .okdFlow , herbruikbare geanimeerde product-demo (4 scenes op één
   13s-timeline). Vertelt: aanvraag binnen → OfferteKlik seint → 1 klik
   omzetten → verzendklare offerte. Pure CSS; werkt overal waar okd.css laadt.
   ════════════════════════════════════════════════════════════════════ */
.okdFlow{ position:relative; width:100%; max-width:460px; margin:0 auto; padding-top:20px; }
.okdFlow__badge{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:6;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:#fff; border:1px solid var(--okd-border); border-radius:999px;
  padding:8px 16px; box-shadow:var(--okd-shadow-card);
  font-size:14px; font-weight:700; color:var(--okd-ink);
}
.okdFlow__badge b{ color:var(--okd-primary); }
.okdFlow__badge svg{ width:16px; height:16px; color:var(--okd-primary); flex-shrink:0; }

.okdFlow__stage{
  position:relative; height:430px; margin-top:16px;
  background:var(--okd-grey); border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-box); padding:26px; overflow:hidden;
  box-shadow:var(--okd-shadow-card);
}
.okdFlow__scene{
  position:absolute; inset:26px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  opacity:0; animation:okdFlowScene 13s cubic-bezier(.4,0,.2,1) infinite;
}
.okdFlow__scene--1{ animation-delay:0s; }
.okdFlow__scene--2{ animation-delay:3.25s; }
.okdFlow__scene--3{ animation-delay:6.5s; }
.okdFlow__scene--4{ animation-delay:9.75s; }
@keyframes okdFlowScene{
  0%{ opacity:0; transform:translateY(12px) scale(.98); }
  4%{ opacity:1; transform:none; }
  27%{ opacity:1; transform:none; }
  33%{ opacity:0; transform:translateY(-12px) scale(.98); }
  100%{ opacity:0; }
}
.okdFlow__cap{ text-align:center; font-size:14px; font-weight:700; color:var(--okd-ink-2); }

.okdFlow__steps{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.okdFlow__step{
  font-size:12px; font-weight:700; color:var(--okd-muted);
  padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--okd-border);
  animation:okdFlowStep 13s linear infinite;
}
.okdFlow__step--1{ animation-delay:0s; } .okdFlow__step--2{ animation-delay:3.25s; }
.okdFlow__step--3{ animation-delay:6.5s; } .okdFlow__step--4{ animation-delay:9.75s; }
@keyframes okdFlowStep{
  0%,3%{ color:var(--okd-muted); border-color:var(--okd-border); box-shadow:none; }
  5%,27%{ color:#fff; border-color:transparent; background:var(--okd-primary); box-shadow:0 6px 16px -4px rgba(79,70,229,.5); }
  33%,100%{ color:var(--okd-muted); border-color:var(--okd-border); background:#fff; box-shadow:none; }
}

/* Scene 1 , mailapp */
.okdFlow__app{ background:#fff; border:1px solid var(--okd-border); border-radius:14px; overflow:hidden; box-shadow:var(--okd-shadow-card); }
.okdFlow__appbar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--okd-border); }
.okdFlow__appdot{ width:9px; height:9px; border-radius:50%; background:var(--okd-border); }
.okdFlow__apptitle{ margin-left:8px; font-size:12px; font-weight:800; color:var(--okd-muted); }
.okdFlow__mail{ display:flex; gap:12px; padding:14px; align-items:flex-start; }
.okdFlow__mail + .okdFlow__mail{ border-top:1px solid var(--okd-border); }
.okdFlow__mail.is-new{ background:var(--okd-primary-soft); }
.okdFlow__mail--dim{ opacity:.5; }
.okdFlow__mailav{ width:36px; height:36px; border-radius:50%; background:var(--okd-primary); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.okdFlow__mailbody{ flex:1; min-width:0; }
.okdFlow__mailtop{ display:flex; justify-content:space-between; gap:8px; }
.okdFlow__mailfrom{ font-size:13px; font-weight:800; color:var(--okd-ink); }
.okdFlow__mailtime{ font-size:11px; color:var(--okd-muted); flex-shrink:0; }
.okdFlow__mailsubj{ font-size:12.5px; font-weight:700; color:var(--okd-ink-2); margin-top:2px; }
.okdFlow__mailsnip{ font-size:11.5px; color:var(--okd-muted); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.okdFlow__mailbadge{ align-self:center; background:var(--okd-red); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; flex-shrink:0; }

/* Scene 2 , iOS-melding */
.okdFlow__ios{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--okd-border); border-radius:22px; padding:16px 18px; box-shadow:var(--okd-shadow-pop); }
.okdFlow__iosicon{ width:44px; height:44px; border-radius:12px; background:var(--okd-primary); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 16px -4px rgba(79,70,229,.6); }
.okdFlow__iosbody{ flex:1; min-width:0; }
.okdFlow__iostop{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:800; color:var(--okd-muted); text-transform:uppercase; letter-spacing:.03em; }
.okdFlow__iostitle{ font-size:14px; font-weight:800; color:var(--okd-ink); margin-top:5px; }
.okdFlow__iostext{ font-size:13px; color:var(--okd-ink-2); margin-top:2px; }

/* Scene 3 , 1 klik omzetten */
.okdFlow__convert{ display:flex; flex-direction:column; gap:16px; align-items:center; }
.okdFlow__convertdoc{ width:100%; background:#fff; border:1px solid var(--okd-border); border-radius:14px; padding:18px; box-shadow:var(--okd-shadow-card); }
.okdFlow__convertlabel{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--okd-primary); margin-bottom:12px; }
.okdFlow__convertlabel svg{ width:15px; height:15px; }
.okdFlow__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.okdFlow__chip{ font-size:12px; font-weight:700; color:var(--okd-ink-2); background:var(--okd-grey); border:1px solid var(--okd-border); border-radius:999px; padding:6px 12px; }
.okdFlow__btn{ position:relative; border:0; background:var(--okd-primary); color:#fff; font-family:var(--okd-font); font-size:14px; font-weight:800; padding:14px 26px; border-radius:var(--okd-radius-btn); box-shadow:0 12px 26px -8px rgba(79,70,229,.7); display:inline-flex; align-items:center; gap:10px; }
.okdFlow__btn svg{ width:17px; height:17px; }
.okdFlow__btn::after{ content:''; position:absolute; inset:-5px; border-radius:14px; border:2px solid var(--okd-primary); opacity:0; animation:okdFlowRing 2.6s ease-out infinite; }
@keyframes okdFlowRing{ 0%{ opacity:.55; transform:scale(.92); } 70%{ opacity:0; transform:scale(1.14); } 100%{ opacity:0; } }

/* Scene 4 , verzendklare offerte */
.okdFlow__quote{ background:#fff; border:1px solid var(--okd-border); border-radius:14px; padding:18px; box-shadow:var(--okd-shadow-card); }
.okdFlow__quotehd{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--okd-border); }
.okdFlow__quoteav{ width:36px; height:36px; border-radius:10px; background:var(--okd-primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.okdFlow__quotetitle{ font-size:13px; font-weight:800; color:var(--okd-ink); }
.okdFlow__quotemeta{ font-size:11px; color:var(--okd-muted); margin-top:1px; }
.okdFlow__quotepill{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:var(--okd-green-soft); color:var(--okd-green); font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px; flex-shrink:0; }
.okdFlow__quotepill::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--okd-green); }
.okdFlow__quoterows{ padding:12px 0 4px; }
.okdFlow__qrow{ display:flex; justify-content:space-between; font-size:13px; color:var(--okd-ink-2); padding:6px 0; }
.okdFlow__qrow b{ color:var(--okd-ink); font-weight:800; }
.okdFlow__qrow + .okdFlow__qrow{ border-top:1px dashed var(--okd-border); }
.okdFlow__qtotal{ display:flex; justify-content:space-between; padding-top:10px; margin-top:4px; border-top:2px solid var(--okd-ink); font-size:15px; }
.okdFlow__qtotal b{ font-weight:800; }
.okdFlow__send{ width:100%; margin-top:14px; border:0; background:var(--okd-green); color:#fff; font-family:var(--okd-font); font-weight:800; font-size:14px; padding:12px; border-radius:var(--okd-radius-btn); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.okdFlow__send svg{ width:16px; height:16px; }

@media (max-width:980px){ .okdFlow{ max-width:420px; } .okdFlow__stage{ height:400px; } }
@media (max-width:400px){ .okdFlow__stage{ height:376px; padding:20px; } .okdFlow__scene{ inset:20px; } }
@media (prefers-reduced-motion: reduce){
  .okdFlow__scene{ animation:none; opacity:0; }
  .okdFlow__scene--4{ opacity:1; }
  .okdFlow__step{ animation:none; }
  .okdFlow__btn::after{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   .okdStatMq , infinite horizontale stats-marquee (vervangt statische rij).
   ════════════════════════════════════════════════════════════════════ */
.okdStatMq{
  position:relative;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:6px 0 10px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.okdStatMq::-webkit-scrollbar{ display:none; }
.okdStatMq__track{
  display:flex; gap:16px; width:max-content;
  animation:okdStatMarquee 46s linear infinite;
}
.okdStatMq:hover .okdStatMq__track,
.okdStatMq:focus-within .okdStatMq__track{ animation-play-state:paused; }

@keyframes okdStatMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.okdStatCard{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  scroll-snap-align:center;
  background:#fff; border:1px solid var(--okd-border);
  border-radius:var(--okd-radius-box); padding:18px 22px;
  box-shadow:var(--okd-shadow-card);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.okdStatCard:hover{
  transform:translateY(-3px);
  box-shadow:var(--okd-shadow-pop);
  border-color:var(--okd-primary-soft);
}
.okdStatCard__ic{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:var(--okd-primary-soft); color:var(--okd-primary);
  display:flex; align-items:center; justify-content:center;
}
.okdStatCard__ic svg{ width:22px; height:22px; }
.okdStatCard:nth-child(3n+2) .okdStatCard__ic{ background:var(--okd-blue-soft); color:var(--okd-blue); }
.okdStatCard:nth-child(3n+3) .okdStatCard__ic{ background:var(--okd-green-soft); color:var(--okd-green-ink); }
.okdStatCard__num{
  font-size:25px; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--okd-ink); white-space:nowrap;
}
.okdStatCard__label{ font-size:13px; color:var(--okd-muted); line-height:1.35; margin-top:5px; white-space:nowrap; }

/* Zonder animatie blijft de strook met de hand te schuiven. De lus-kopieen
   gaan dan weg, anders staat elk cijfer er twee keer. */
@media (prefers-reduced-motion: reduce){
  .okdStatMq__track{ animation:none; }
  .okdStatCard--dup{ display:none; }
  .okdStatCard:hover{ transform:none; }
}
@media (max-width:640px){
  .okdStatCard{ padding:15px 18px; gap:12px; }
  .okdStatCard__ic{ width:40px; height:40px; border-radius:12px; }
  .okdStatCard__num{ font-size:22px; }
}

.okdSub--wide{ min-width:600px; }
.okdBtn--sm{ padding:9px 16px; font-size:14px; }
.okdSubAsk{ background:var(--okd-grey); border-radius:12px; padding:18px 18px 20px; min-width:230px; }
.okdSubAsk p{ font-size:13.5px; line-height:1.5; color:var(--okd-muted); margin:0 0 14px; }
.okdSubAsk__link{ display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--okd-primary); text-decoration:none; }
.okdSubAsk__link:hover{ text-decoration:underline; }
@media (max-width:1060px){ .okdSub--wide{ min-width:0; } .okdSubAsk{ min-width:0; } }

.okdSquares{ position:absolute; inset:auto 0 0 0; height:190px; pointer-events:none; overflow:hidden; z-index:0; }
.okdSquares i{ position:absolute; display:block; border-radius:16px; opacity:.5; }
.okdSquares i:nth-child(1){ width:120px; height:120px; left:-30px; bottom:-34px; background:var(--okd-primary-soft); transform:rotate(14deg); }
.okdSquares i:nth-child(2){ width:74px; height:74px; left:104px; bottom:24px; background:var(--okd-blue-soft); transform:rotate(-9deg); }
.okdSquares i:nth-child(3){ width:96px; height:96px; right:-24px; bottom:-18px; background:var(--okd-primary-soft); transform:rotate(-16deg); }
.okdSquares i:nth-child(4){ width:58px; height:58px; right:120px; bottom:38px; background:var(--okd-green-soft,#E2F8EF); transform:rotate(11deg); }
.okdAuthWrap{ position:relative; }
.okdAuthWrap > .okdContainer{ position:relative; z-index:1; }
@media (max-width:820px){ .okdSquares i:nth-child(2), .okdSquares i:nth-child(4){ display:none; } }

.okdSection li::before, .okdSection li::after,
.okdHero li::before, .okdHero li::after,
.okdFooter li::before, .okdFooter li::after,
.okdContainer li::before, .okdContainer li::after,
.okdTitles li::before, .okdTitles li::after,
.okdHeader li::before, .okdHeader li::after,
.okdSub li::before, .okdSub li::after{ content:none !important; display:none !important; background:none !important; }

.okdSection ul:not([class]), .okdContainer ul:not([class]){ list-style:disc outside !important; }
.okdSection ol:not([class]), .okdContainer ol:not([class]){ list-style:decimal outside !important; }
.okdSection ul[class], .okdSection ol[class],
.okdContainer ul[class], .okdContainer ol[class]{ list-style:none !important; }

.okdCrumbs ol{ list-style:none !important; }
.okdCrumbs li+li::before{ content:"\203A" !important; display:inline !important; color:var(--okd-muted); }