/* ════════════════════════════════════════════════════════════════════
   KBD — Kredietbewust marketing design-systeem.
   DigiBoox/OfferteKlik-look (gespiegeld op okd.css), maar met de eigen
   framboos/roze huisstijl. Kleuren komen uit brand.css (BRAND.md hard rule 6);
   alleen structuur-tokens (radii/shadows/font) staan hier lokaal.
   Groen blijft gereserveerd voor status (dashboards) — marketing-accenten en
   vinkjes zijn framboos/roze. Font: Nunito.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --kbd-radius-card: 12px;
  --kbd-radius-box:  16px;
  --kbd-radius-btn:  10px;
  --kbd-shadow-card: 0 4px 18px rgba(29,20,32,.07);
  --kbd-shadow-pop:  0 14px 40px rgba(29,20,32,.14);
  --kbd-gold:        #ffb800;
}

html{ overflow-x:clip; }
.kbdBody{ margin:0; padding:0; font-family:var(--kb-font); font-size:17px; line-height:1.6; color:var(--kb-ink); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:clip; }
.kbdBody *,.kbdBody *::before,.kbdBody *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
.kbdBody img{ max-width:100%; height:auto; }
.kbdBody a{ color:var(--kb-primary); text-decoration:none; }
.kbdBody h1,.kbdBody h2,.kbdBody h3,.kbdBody h4{ font-family:var(--kb-font); color:var(--kb-ink); margin:0; }
.kbdBody ::selection{ background:var(--kb-primary-soft); }

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

/* ── Buttons ─────────────────────────────────────────────────────── */
.kbdBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:0; border-radius:var(--kbd-radius-btn);
  font-family:var(--kb-font); font-size:16px; font-weight:800; 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;
}
.kbdBtn--primary{ background:var(--kb-grad); color:#fff !important; box-shadow:0 8px 20px -8px rgba(226,80,110,.6); }
.kbdBtn--primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(226,80,110,.65); }
.kbdBtn--white{ background:#fff; color:var(--kb-ink) !important; border:1px solid var(--kb-line); box-shadow:0 4px 14px rgba(29,20,32,.08); }
.kbdBtn--white:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(29,20,32,.12); }
.kbdBtn--outline{ background:#fff; color:var(--kb-primary) !important; border:1px solid var(--kb-primary); border-radius:50px; padding:13px 30px; }
.kbdBtn--outline:hover{ background:var(--kb-primary-soft); }
.kbdBtn--pill{ background:var(--kb-primary-soft); color:var(--kb-primary) !important; border-radius:50px; padding:11px 22px; font-size:15px; }
.kbdBtn--pill:hover{ background:var(--kb-bg-blush); }

/* ── Header ──────────────────────────────────────────────────────── */
.kbdHeader{ position:sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid transparent; transition:box-shadow .2s, border-color .2s; }
.kbdHeader.is-scrolled{ box-shadow:0 2px 18px rgba(29,20,32,.08); border-color:var(--kb-line); }
.kbdHeader__inner{ max-width:1280px; margin:0 auto; padding:0 24px; height:80px; display:flex; align-items:center; gap:28px; }

.kbdLogo{ display:inline-flex; align-items:center; gap:0; font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--kb-ink) !important; text-decoration:none !important; flex-shrink:0; line-height:1; }
.kbdLogo b{ background:var(--kb-grad); color:#fff; padding:5px 9px 7px; border-radius:9px; font-weight:800; margin-right:5px; }
.kbdLogo span{ font-weight:800; color:var(--kb-ink); }
.kbdLogo i{ font-style:normal; color:var(--kb-primary); font-weight:800; }

.kbdNav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.kbdMenu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.kbdMenuItem{ position:relative; }
.kbdMenuItem > a{ display:inline-flex; align-items:center; gap:7px; padding:12px 14px; font-size:16px; font-weight:700; color:var(--kb-ink); cursor:pointer; border-radius:8px; }
.kbdMenuItem > a:hover{ color:var(--kb-primary); }
.kbdChev{ transition:transform .18s; }
.kbdMenuItem:hover > a .kbdChev,.kbdMenuItem.is-open > a .kbdChev{ transform:rotate(180deg); }
.kbdSub{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); background:#fff; border:1px solid var(--kb-line); border-radius:14px; box-shadow:var(--kbd-shadow-pop); padding:26px 30px; display:none; min-width:280px; }
.kbdMenuItem:hover .kbdSub,.kbdMenuItem.is-open .kbdSub{ display:flex; gap:44px; }
.kbdSub::before{ content:''; position:absolute; top:-10px; left:0; right:0; height:12px; }
.kbdSubCol{ min-width:200px; }
.kbdSubHead{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--kb-muted); margin-bottom:12px; white-space:nowrap; }
.kbdSub ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.kbdSub ul a{ display:block; padding:7px 10px; margin:0 -10px; font-size:15.5px; font-weight:700; color:var(--kb-ink); border-radius:8px; white-space:nowrap; }
.kbdSub ul a:hover{ background:var(--kb-primary-soft); color:var(--kb-primary); }
.kbdSub ul a small{ display:block; font-size:12.5px; font-weight:600; color:var(--kb-muted); margin-top:1px; }
.kbdNavLogin > a{ font-weight:800 !important; }
.kbdNavCta{ margin-left:10px; }
.kbdNavCta .kbdBtn{ padding:12px 22px; font-size:15.5px; }
.kbdBurger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; color:var(--kb-ink); border-radius:10px; }
.kbdBurger:hover{ background:var(--kb-grey); }
.kbdHeaderCtaMobile{ display:none; }

@media (max-width:1060px){
  .kbdHeader__inner{ height:68px; gap:14px; }
  .kbdLogo{ font-size:22px; }
  .kbdBurger{ display:inline-flex; }
  .kbdNav{ display:none; position:fixed; top:68px; left:0; right:0; bottom:0; background:#fff; overflow-y:auto; padding:18px 22px 40px; z-index:899; margin-left:0; }
  .kbdNav.is-open{ display:block; }
  .kbdMenu{ flex-direction:column; align-items:stretch; gap:0; }
  .kbdMenuItem > a{ width:100%; justify-content:space-between; padding:15px 6px; font-size:18px; font-weight:800; border-bottom:1px solid var(--kb-line); border-radius:0; }
  .kbdSub{ 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; }
  .kbdMenuItem.is-open .kbdSub{ display:flex; }
  .kbdSub ul a{ white-space:normal; padding:9px 10px; }
  .kbdNavCta{ margin:18px 0 0; }
  .kbdNavCta .kbdBtn{ width:100%; }
  .kbdHeaderCtaMobile{ display:inline-flex; margin-left:auto; }
  .kbdHeaderCtaMobile .kbdBtn{ padding:10px 16px; font-size:14.5px; }
}
body.kbd-nav-open{ overflow:hidden; }

/* ── Hero (split) ────────────────────────────────────────────────── */
.kbdHero{ position:relative; padding:72px 0 84px; overflow:hidden; background:#fff; }
.kbdHero__blob{ position:absolute; z-index:0; pointer-events:none; border-radius:140px; }
.kbdHero__blob--primary{ width:1100px; height:820px; left:-320px; top:-160px; background:var(--kb-primary-soft); transform:rotate(-16deg); }
.kbdHero__blob--berry{ width:520px; height:420px; right:-220px; bottom:-260px; background:var(--kb-berry-soft); transform:rotate(22deg); }
.kbdHero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; }
.kbdEyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; background:#fff; border:1px solid var(--kb-line); border-radius:50px; font-size:14px; font-weight:800; color:var(--kb-ink-2); box-shadow:0 3px 12px rgba(29,20,32,.06); margin-bottom:22px; }
.kbdEyebrow i{ width:8px; height:8px; border-radius:50%; background:var(--kb-primary); flex-shrink:0; animation:kbdPulse 2.4s ease-in-out infinite; }
@keyframes kbdPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(226,80,110,.35);} 55%{ box-shadow:0 0 0 7px rgba(226,80,110,0);} }
.kbdHero h1{ font-size:clamp(34px, 4.6vw, 54px); font-weight:800; line-height:1.14; letter-spacing:-1px; margin:0 0 18px; }
.kbdAccent{ color:var(--kb-primary); }
.kbdHeroSub{ font-size:19px; line-height:1.6; color:var(--kb-ink-2); margin:0 0 26px; max-width:34em; }
.kbdUsps{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px; }
.kbdUsps li{ display:flex; align-items:flex-start; gap:12px; font-size:16.5px; color:var(--kb-ink-2); }
.kbdCheck{ width:24px; height:24px; flex-shrink:0; margin-top:1px; border-radius:50%; background:var(--kb-primary-soft); display:inline-flex; align-items:center; justify-content:center; }
.kbdCheck svg{ width:12px; height:12px; stroke:var(--kb-primary); }
.kbdUsps strong{ color:var(--kb-ink); font-weight:800; }
.kbdCtaRow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:16px; }
.kbdPlay{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:var(--kb-grad); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.kbdPlay svg{ width:11px; height:11px; margin-left:2px; fill:#fff; }
.kbdMicro{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; font-weight:800; color:var(--kb-muted); margin:0 0 30px; }
.kbdMicro span{ display:inline-flex; align-items:center; gap:7px; }
.kbdMicro svg{ width:13px; height:13px; stroke:var(--kb-primary); flex-shrink:0; }
.kbdProof{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.kbdProofBlock{ display:flex; flex-direction:column; gap:2px; }
.kbdProofScore{ display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; color:var(--kb-ink); }
.kbdStars{ display:inline-flex; gap:2px; }
.kbdStars svg{ width:16px; height:16px; fill:var(--kbd-gold); }
.kbdProofLabel{ font-size:14px; font-weight:800; }
a.kbdProofLabel{ color:var(--kb-primary); }
a.kbdProofLabel:hover{ text-decoration:underline; }
.kbdProofNum{ font-size:19px; font-weight:800; color:var(--kb-ink); }
.kbdProofBlock > .kbdProofLabel{ color:var(--kb-muted); }
.kbdProofDivider{ width:1px; height:38px; background:var(--kb-line); }

.kbdHeroImage{ position:relative; }
.kbdShot{ background:#fff; border-radius:18px; box-shadow:0 30px 70px -24px rgba(29,20,32,.35), 0 4px 18px rgba(29,20,32,.08); overflow:hidden; border:1px solid var(--kb-line); }
.kbdBadge{ position:absolute; left:-26px; bottom:-24px; display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px; box-shadow:var(--kbd-shadow-pop); padding:14px 20px 14px 14px; border:1px solid var(--kb-line); }
.kbdBadge__icon{ width:44px; height:44px; border-radius:12px; flex-shrink:0; background:var(--kb-primary-soft); color:var(--kb-primary); display:inline-flex; align-items:center; justify-content:center; }
.kbdBadge__icon svg{ width:22px; height:22px; }
.kbdBadge__text{ display:flex; flex-direction:column; line-height:1.3; }
.kbdBadge__text strong{ font-size:15.5px; font-weight:800; color:var(--kb-ink); }
.kbdBadge__text span{ font-size:13px; font-weight:700; color:var(--kb-primary); }

@media (max-width:980px){
  .kbdHero{ padding:44px 0 64px; }
  .kbdHero__grid{ grid-template-columns:1fr; gap:44px; }
  .kbdHero h1{ letter-spacing:-.5px; }
  .kbdHeroImage{ max-width:560px; margin:0 auto; width:100%; }
  .kbdBadge{ left:8px; bottom:-20px; }
}
@media (max-width:560px){
  .kbdCtaRow .kbdBtn{ flex:1 1 100%; }
  .kbdProofDivider{ display:none; }
  .kbdBadge{ padding:11px 15px 11px 11px; }
  .kbdBadge__icon{ width:38px; height:38px; }
}

/* ── Trust-band ──────────────────────────────────────────────────── */
.kbdBand{ border-top:1px solid var(--kb-line); border-bottom:1px solid var(--kb-line); background:#fff; padding:26px 0; }
.kbdBand__inner{ display:flex; align-items:center; gap:38px; flex-wrap:wrap; }
.kbdBand__label{ font-size:13px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--kb-muted); flex-shrink:0; }
.kbdBand__logos{ display:flex; align-items:center; gap:16px 34px; flex-wrap:wrap; flex:1; justify-content:center; }
.kbdBand__logo{ font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--kb-muted); display:inline-flex; align-items:center; gap:8px; opacity:.85; transition:color .18s, opacity .18s; white-space:nowrap; }
.kbdBand__logo:hover{ color:var(--kb-ink-2); opacity:1; }
.kbdBand__logo svg{ width:20px; height:20px; }
@media (max-width:760px){ .kbdBand__inner{ gap:16px; } .kbdBand__logos{ gap:18px 26px; justify-content:flex-start; } .kbdBand__logo{ font-size:15px; } }

/* ── Secties + titels ────────────────────────────────────────────── */
.kbdSection{ padding:88px 0; background:#fff; }
.kbdSection--grey{ background:var(--kb-grey); }
.kbdSection--soft{ background:var(--kb-bg-soft); }
.kbdSection--tight{ padding:64px 0; }
.kbdTitles{ text-align:center; max-width:820px; margin:0 auto 52px; padding:0 24px; }
.kbdEyebrowCenter{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--kb-primary); margin-bottom:14px; }
.kbdTitles h2{ font-size:clamp(28px, 3.4vw, 40px); font-weight:800; line-height:1.2; letter-spacing:-.7px; margin:0 0 12px; }
.kbdTitles .kbdSubtitle{ font-size:20px; font-weight:400; line-height:1.55; color:var(--kb-muted); margin:0; }
@media (max-width:760px){ .kbdSection{ padding:60px 0; } .kbdTitles{ margin-bottom:36px; } .kbdTitles .kbdSubtitle{ font-size:17.5px; } }

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

/* ── USP-grid (witte kaarten, roze icoon-cirkel) ─────────────────── */
.kbdUspGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.kbdUsp{ display:flex; align-items:flex-start; gap:16px; background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-card); padding:26px 24px; box-shadow:0 2px 10px rgba(29,20,32,.04); }
.kbdUsp__icon{ width:46px; height:46px; flex-shrink:0; border-radius:50%; background:var(--kb-primary-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--kb-primary); }
.kbdUsp__icon svg{ width:21px; height:21px; }
.kbdUsp__title{ font-size:17px; font-weight:800; color:var(--kb-ink); margin:2px 0 5px; }
.kbdUsp__text{ font-size:15px; line-height:1.55; color:var(--kb-muted); margin:0; }
@media (max-width:980px){ .kbdUspGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .kbdUspGrid{ grid-template-columns:1fr; } }

/* ── Stappen (1-2-3) ─────────────────────────────────────────────── */
.kbdSteps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.kbdStep{ background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-box); padding:30px 26px; box-shadow:0 2px 10px rgba(29,20,32,.04); position:relative; }
.kbdStep__num{ width:40px; height:40px; border-radius:50%; background:var(--kb-grad); 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(226,80,110,.6); }
.kbdStep h3{ font-size:19px; font-weight:800; margin:0 0 8px; }
.kbdStep p{ font-size:15.5px; line-height:1.6; color:var(--kb-muted); margin:0; }
@media (max-width:900px){ .kbdSteps{ grid-template-columns:1fr; } }

/* ── Statistieken ────────────────────────────────────────────────── */
.kbdStatsRow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; text-align:center; }
.kbdStat__num{ font-size:clamp(26px, 3vw, 36px); font-weight:800; color:var(--kb-primary); letter-spacing:-.5px; line-height:1.15; }
.kbdStat__label{ font-size:14.5px; font-weight:700; color:var(--kb-muted); margin-top:4px; }
@media (max-width:760px){ .kbdStatsRow{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 12px; } }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.kbdFaqList{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.kbdFaq{ background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-card); overflow:hidden; transition:box-shadow .18s, border-color .18s; }
.kbdFaq[open]{ border-color:var(--kb-primary); box-shadow:0 8px 24px -8px rgba(226,80,110,.18); }
.kbdFaq 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:800; color:var(--kb-ink); }
.kbdFaq summary::-webkit-details-marker{ display:none; }
.kbdFaq summary svg{ width:16px; height:16px; stroke:var(--kb-primary); flex-shrink:0; transition:transform .22s; }
.kbdFaq[open] summary svg{ transform:rotate(180deg); }
.kbdFaq p{ margin:0; padding:0 24px 20px; font-size:15.5px; line-height:1.65; color:var(--kb-ink-2); }
.kbdSection--grey .kbdFaq{ border-color:transparent; box-shadow:0 2px 10px rgba(29,20,32,.05); }
.kbdSection--grey .kbdFaq[open]{ border-color:var(--kb-primary); }

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

/* ── Leendoel-tegels (kleurige art-headers) ──────────────────────── */
.kbdTileGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.kbdTile{ display:block; text-decoration:none !important; color:inherit; background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-box); overflow:hidden; position:relative; transition:transform .2s ease, box-shadow .2s ease; }
.kbdTile:hover{ transform:translateY(-4px); box-shadow:var(--kbd-shadow-pop); }
.kbdTile__art{ position:relative; height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.kbdTile__badge{ width:80px; height:80px; border-radius:24px; background:#fff; box-shadow:0 12px 26px -10px rgba(29,20,32,.4); display:grid; place-items:center; color:var(--kb-primary); transition:transform .2s ease; }
.kbdTile__badge svg{ width:40px; height:40px; }
.kbdTile:hover .kbdTile__badge{ transform:translateY(-3px) scale(1.04); }
.kbdTile__body{ padding:22px 24px 26px; }
.kbdTile__title{ font-size:18px; font-weight:800; color:var(--kb-ink); margin:0 0 6px; letter-spacing:-.2px; }
.kbdTile__sub{ font-size:14.5px; color:var(--kb-muted); line-height:1.55; margin:0 0 14px; }
.kbdTile__more{ font-size:14px; font-weight:800; color:var(--kb-primary); display:inline-flex; align-items:center; gap:6px; }
.kbdTile__more svg{ width:14px; height:14px; transition:transform .15s ease; }
.kbdTile:hover .kbdTile__more svg{ transform:translateX(3px); }
.kbdTile--rose .kbdTile__art{ background:linear-gradient(135deg, #fde0e6 0%, #f5a8b8 100%); }
.kbdTile--blush .kbdTile__art{ background:linear-gradient(135deg, #fdeef2 0%, #f7c6d5 100%); }
.kbdTile--plum .kbdTile__art{ background:linear-gradient(135deg, #f0e0ec 0%, #d3a8c4 100%); }
.kbdTile--cream .kbdTile__art{ background:linear-gradient(135deg, #fbeee2 0%, #f5d0b0 100%); }
.kbdTile--berry .kbdTile__art{ background:linear-gradient(135deg, #f7dbe7 0%, #e79bb8 100%); }
@media (max-width:980px){ .kbdTileGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .kbdTileGrid{ grid-template-columns:1fr; } }

/* ── Kredietwaarschuwing (verplicht, boven de footer-CTA) ────────── */
.kbdWarning{ background:#fff; border-top:1px solid var(--kb-line); border-bottom:1px solid var(--kb-line); padding:14px 20px; text-align:center; font-size:14.5px; font-weight:800; color:var(--kb-ink); }
.kbdWarning span{ display:inline-flex; align-items:center; gap:10px; }
.kbdWarning svg{ width:22px; height:22px; stroke:var(--kb-primary); flex-shrink:0; }

/* ── Footer-CTA (met decoratieve vlakken) ────────────────────────── */
.kbdFooterCta{ position:relative; overflow:hidden; background:var(--kb-grey); padding:100px 24px 110px; text-align:center; }
.kbdFooterCta 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; }
.kbdFooterCta__proof{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:16px; color:var(--kb-ink-2); font-weight:700; position:relative; z-index:2; margin-bottom:26px; }
.kbdFooterCta__proof b{ font-weight:800; color:var(--kb-ink); }
.kbdFooterCta .kbdBtn{ position:relative; z-index:2; }
.kbdFooterCta__micro{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:800; color:var(--kb-muted); margin:18px 0 0; }
.kbdFooterCta__micro svg{ width:13px; height:13px; stroke:var(--kb-primary); }
.kbdShape{ position:absolute; border-radius:60px; z-index:1; pointer-events:none; }
.kbdShape--primary{ width:420px; height:420px; left:-160px; bottom:-230px; background:var(--kb-pink); opacity:.5; transform:rotate(24deg); }
.kbdShape--berry{ width:560px; height:560px; right:-200px; bottom:-300px; background:var(--kb-berry-soft); transform:rotate(-14deg); }
.kbdShape--berry2{ width:300px; height:300px; right:120px; bottom:-190px; background:#f3c9dc; transform:rotate(30deg); }
@media (max-width:760px){ .kbdFooterCta{ padding:70px 20px 90px; } .kbdShape--primary{ width:280px; height:280px; left:-140px; bottom:-170px; } .kbdShape--berry{ width:340px; height:340px; right:-160px; bottom:-210px; } .kbdShape--berry2{ display:none; } }

/* ── Footer (warm donker) ────────────────────────────────────────── */
.kbdFooter{ background:var(--kb-footer); color:var(--kb-footer-ink); }
.kbdFooter__content{ max-width:1240px; margin:0 auto; padding:70px 24px 56px; display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr 1fr; gap:40px; }
.kbdFooter__brand .kbdLogo{ font-size:23px; }
.kbdFooter__brand .kbdLogo span{ color:#fff; }
.kbdFooter__brand p{ font-size:14.5px; line-height:1.65; margin:18px 0 20px; color:var(--kb-footer-ink); }
.kbdFooter__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.kbdFooter__meta{ font-size:13.5px; color:var(--kb-footer-ink); opacity:.8; line-height:1.7; }
.kbdFooterHead{ font-size:16.5px; font-weight:800; color:var(--kb-footer-title); margin-bottom:16px; }
.kbdFooter ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.kbdFooter ul a{ font-size:15px; font-weight:600; color:var(--kb-footer-ink); transition:color .15s; }
.kbdFooter ul a:hover{ color:#fff; }
.kbdFooterBar{ background:var(--kb-grad); }
.kbdFooterBar__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:700; color:#fff; }
.kbdFooterBar__inner a{ color:#fff; font-weight:800; }
.kbdFooterBar__inner a:hover{ text-decoration:underline; }
.kbdFooterCopy{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kbdFooterCopy i{ opacity:.55; font-style:normal; }
.kbdFooterDisclaimer{ max-width:1240px; margin:0 auto; padding:0 24px 40px; }
.kbdFooterDisclaimer p{ font-size:12.5px; color:var(--kb-footer-ink); opacity:.72; line-height:1.7; margin:0; max-width:900px; }
@media (max-width:1020px){ .kbdFooter__content{ grid-template-columns:1fr 1fr; gap:36px; } .kbdFooter__brand{ grid-column:1/-1; max-width:440px; } }
@media (max-width:520px){ .kbdFooter__content{ grid-template-columns:1fr; padding:52px 22px 40px; } }

/* ── Mockups (CSS-productschermen in de hero's) ──────────────────── */
.kbdMock{ font-size:13px; }
.kbdMock__topbar{ display:flex; align-items:center; gap:8px; background:var(--kb-grey); border-bottom:1px solid var(--kb-line); padding:11px 16px; }
.kbdMock__dot{ width:9px; height:9px; border-radius:50%; background:#e6d6de; }
.kbdMock__dot--a{ background:#ffb0b0; } .kbdMock__dot--b{ background:#ffd37a; } .kbdMock__dot--c{ background:#9fe3bf; }
.kbdMock__url{ flex:1; margin-left:8px; background:#fff; border:1px solid var(--kb-line); border-radius:7px; padding:5px 12px; font-size:11.5px; font-weight:700; color:var(--kb-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kbdMock__body{ padding:20px; background:#fff; }
.kbdMock__title{ font-size:13px; font-weight:800; color:var(--kb-ink); margin:0 0 4px; }
.kbdMock__sub{ font-size:11.5px; font-weight:700; color:var(--kb-muted); margin:0 0 14px; }
.kbdMock__opts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px; }
.kbdMock__opt{ display:flex; align-items:center; gap:9px; border:1.5px solid var(--kb-line); border-radius:10px; padding:11px 12px; font-size:12.5px; font-weight:800; color:var(--kb-ink); }
.kbdMock__opt.is-active{ border-color:var(--kb-primary); background:var(--kb-primary-soft); }
.kbdMock__ico{ display:inline-flex; color:var(--kb-primary); flex-shrink:0; }
.kbdMock__ico svg{ width:18px; height:18px; }
.kbdMock__amount{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--kb-bg-soft); border:1px solid var(--kb-line); border-radius:10px; padding:13px 15px; margin-bottom:14px; }
.kbdMock__amount label{ display:block; font-size:10.5px; font-weight:700; color:var(--kb-muted); margin-bottom:2px; }
.kbdMock__amount b{ font-size:16px; font-weight:800; color:var(--kb-ink); font-variant-numeric:tabular-nums; }
.kbdMock__bar{ height:6px; border-radius:99px; background:var(--kb-bg-blush); overflow:hidden; margin-bottom:14px; }
.kbdMock__bar i{ display:block; height:100%; width:64%; background:var(--kb-grad); }
.kbdMock__btn{ display:block; text-align:center; background:var(--kb-grad); color:#fff; font-size:13px; font-weight:800; border-radius:9px; padding:11px; }

/* ── Formulieren (gedeeld: contactpagina, support-widget, later dashboards) ─ */
.kbdField{ margin-bottom:14px; }
.kbdField label{ display:block; font-size:14px; font-weight:800; color:var(--kb-ink-2); margin-bottom:6px; }
.kbdField label span{ font-weight:600; color:var(--kb-muted); }
.kbdField input, .kbdField textarea{
  width:100%; font-family:var(--kb-font); font-size:16px; color:var(--kb-ink);
  background:#fff; border:1.5px solid var(--kb-line); border-radius:var(--kbd-radius-btn);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s;
}
.kbdField textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.kbdField input:focus, .kbdField textarea:focus{ outline:none; border-color:var(--kb-primary); box-shadow:0 0 0 3px rgba(226,80,110,.14); }
.kbdHp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.kbdFormFout{ font-size:14px; font-weight:700; color:var(--kb-err); background:var(--kb-err-soft); border-radius:var(--kbd-radius-btn); padding:10px 13px; margin:0 0 14px; }

/* ── Contactpagina ───────────────────────────────────────────────── */
.kbdContact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start; }
.kbdContact__aside{ display:flex; flex-direction:column; gap:14px; }
.kbdContactCard{ display:flex; align-items:flex-start; gap:15px; background:var(--kb-grey); border-radius:var(--kbd-radius-card); padding:22px 22px; }
.kbdContactCard__icon{ width:46px; height:46px; flex-shrink:0; background:#fff; border-radius:12px; box-shadow:0 3px 10px rgba(29,20,32,.08); display:inline-flex; align-items:center; justify-content:center; color:var(--kb-primary); }
.kbdContactCard__icon svg{ width:22px; height:22px; }
.kbdContactCard strong{ display:block; font-size:16px; font-weight:800; color:var(--kb-ink); margin:2px 0 4px; }
.kbdContactCard p{ font-size:14.5px; line-height:1.55; color:var(--kb-muted); margin:0; }
.kbdContactCard a{ font-weight:800; }
.kbdContact__form{ background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-box); box-shadow:var(--kbd-shadow-card); padding:clamp(24px,3vw,34px); }
.kbdContact__form h2{ font-size:22px; font-weight:800; letter-spacing:-.4px; margin:0 0 6px; }
.kbdContact__form > p{ font-size:15px; color:var(--kb-muted); line-height:1.6; margin:0 0 20px; }
.kbdContact__form .kbdBtn{ width:100%; }
.kbdContact__klaar{ text-align:center; padding:20px 6px; }
.kbdContact__klaar .kbdContactCard__icon{ margin:0 auto 16px; width:60px; height:60px; background:var(--kb-ok-soft); color:var(--kb-ok); box-shadow:none; }
.kbdContact__klaar .kbdContactCard__icon svg{ width:28px; height:28px; }
.kbdContact__klaar h2{ font-size:22px; font-weight:800; margin:0 0 8px; }
.kbdContact__klaar p{ font-size:15px; color:var(--kb-ink-2); line-height:1.6; margin:0 auto 20px; max-width:360px; }
@media (max-width:820px){ .kbdContact{ grid-template-columns:1fr; gap:24px; } }

/* ── Support-widget ("wolkje") — op elke publieke pagina ─────────────── */
.kbdSupport{ position:fixed; right:20px; bottom:20px; z-index:1150; }
.kbdSupport__bubble{ width:60px; height:60px; border-radius:99px; background:var(--kb-grad); color:#fff; border:0; cursor:pointer; box-shadow:0 10px 26px -6px rgba(226,80,110,.6); display:grid; place-items:center; transition:transform .15s; }
.kbdSupport__bubble:hover{ transform:translateY(-2px); }
.kbdSupport__bubble svg{ width:27px; height:27px; }
.kbdSupport__bubble .kbdSupport__ico--close{ display:none; }
.kbdSupport.is-open .kbdSupport__bubble .kbdSupport__ico--open{ display:none; }
.kbdSupport.is-open .kbdSupport__bubble .kbdSupport__ico--close{ display:block; }
.kbdSupport__panel{ position:absolute; right:0; bottom:74px; width:344px; max-width:calc(100vw - 40px); background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-box); box-shadow:var(--kbd-shadow-pop); overflow:hidden; display:none; }
.kbdSupport.is-open .kbdSupport__panel{ display:block; animation:kbdSupportIn .2s ease; }
@keyframes kbdSupportIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.kbdSupport__head{ position:relative; background:var(--kb-grad); color:#fff; padding:18px 46px 18px 20px; }
.kbdSupport__head strong{ display:block; font-size:16.5px; font-weight:800; }
.kbdSupport__head span{ display:block; font-size:13px; opacity:.92; margin-top:2px; line-height:1.45; }
.kbdSupport__x{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; border-radius:8px; background:rgba(255,255,255,.2); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
.kbdSupport__x:hover{ background:rgba(255,255,255,.32); }
.kbdSupport__body{ padding:16px 18px 18px; max-height:min(64vh,520px); overflow-y:auto; }
.kbdSupport__links{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.kbdSupport__links a{ font-size:13.5px; font-weight:800; color:var(--kb-primary); background:var(--kb-primary-soft); border-radius:50px; padding:7px 14px; }
.kbdSupport__links a:hover{ background:var(--kb-bg-blush); }
.kbdSupport .kbdField{ margin-bottom:10px; }
.kbdSupport .kbdField input, .kbdSupport .kbdField textarea{ font-size:15px; padding:10px 12px; }
.kbdSupport .kbdField textarea{ min-height:78px; }
.kbdSupport .kbdBtn{ width:100%; }
.kbdSupport__mail{ font-size:13px; color:var(--kb-muted); text-align:center; margin:12px 0 0; }
.kbdSupport__mail a{ font-weight:800; }
.kbdSupport__klaar{ text-align:center; padding:8px 4px 4px; }
.kbdSupport__ok{ width:56px; height:56px; border-radius:99px; background:var(--kb-ok-soft); color:var(--kb-ok); display:grid; place-items:center; margin:0 auto 12px; }
.kbdSupport__ok svg{ width:26px; height:26px; }
.kbdSupport__klaar strong{ display:block; font-size:16px; font-weight:800; margin-bottom:6px; }
.kbdSupport__klaar p{ font-size:14px; color:var(--kb-ink-2); line-height:1.55; margin:0 0 16px; }
@media (max-width:520px){
  .kbdSupport{ right:14px; bottom:14px; }
  .kbdSupport__panel{ width:calc(100vw - 28px); }
}

/* ── Auth (inloggen / registreren / wachtwoord) ──────────────────── */
.kbdAuthWrap{ background:var(--kb-grad-soft); padding:clamp(40px,7vw,84px) 20px; min-height:58vh; display:flex; align-items:flex-start; justify-content:center; }
.kbdAuth{ width:100%; max-width:440px; }
.kbdAuth__card{ background:#fff; border:1px solid var(--kb-line); border-radius:var(--kbd-radius-box); box-shadow:var(--kbd-shadow-card); padding:clamp(26px,4vw,38px); }
.kbdAuth__logo{ text-align:center; margin-bottom:14px; }
.kbdAuth__logo .kbdLogo{ font-size:24px; }
.kbdAuth h1{ font-size:24px; font-weight:800; letter-spacing:-.5px; text-align:center; margin:0 0 6px; }
.kbdAuth__sub{ font-size:14.5px; color:var(--kb-muted); text-align:center; line-height:1.6; margin:0 0 22px; }
.kbdAuth .kbdBtn{ width:100%; margin-top:4px; }
.kbdAuth__notice{ font-size:14px; font-weight:700; border-radius:var(--kbd-radius-btn); padding:11px 14px; margin:0 0 18px; line-height:1.5; }
.kbdAuth__notice--ok{ background:var(--kb-ok-soft); color:#0d7a4f; }
.kbdAuth__notice--fout{ background:var(--kb-err-soft); color:var(--kb-err); }
.kbdAuth__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-2px 0 16px; flex-wrap:wrap; }
.kbdAuth__check{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--kb-ink-2); }
.kbdAuth__check input{ accent-color:var(--kb-primary); width:16px; height:16px; }
.kbdAuth__row a{ font-size:13.5px; font-weight:700; }
.kbdAuth__consent{ font-size:12.5px; color:var(--kb-muted); line-height:1.55; margin:2px 0 16px; display:flex; gap:9px; align-items:flex-start; }
.kbdAuth__consent input{ accent-color:var(--kb-primary); width:16px; height:16px; margin-top:2px; flex-shrink:0; }
.kbdAuth__consent a{ font-weight:700; }
.kbdAuth__alt{ text-align:center; font-size:14px; color:var(--kb-ink-2); margin:18px 0 0; }
.kbdAuth__alt a{ font-weight:800; }
.kbdAuth__meta{ text-align:center; font-size:13px; color:var(--kb-muted); margin:16px auto 0; max-width:360px; line-height:1.55; }

/* ── Kleine helpers ──────────────────────────────────────────────── */
.kbdCenter{ text-align:center; }
.kbdHidden{ display:none !important; }
.kbdFooter__mail{ display:inline-block; font-size:14px; font-weight:800; color:#fff; margin-bottom:16px; }
.kbdFooter__mail:hover{ text-decoration:underline; }