/* ═══════════════════════════════════════════════════════════
   OfferteKlik — Mollie-inspired Design System
   Clean, modern, high-contrast, conversion-focused
═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  color:#1e293b;background:#fff;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:76px; /* ruimte voor sticky-cta bar */
}
@media(max-width:500px){ body{padding-bottom:68px;} }
.hero,.section,.site-footer,.cta-banner{overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;height:auto;display:block;}

/* ── Layout ───────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 32px;}
@media (max-width: 640px){
  .container{padding:0 20px;}
}
/* Consistent section padding: 96px desktop, responsive via breakpoints */
.section{padding:110px 0;}
.section + .section{border-top:1px solid transparent;} /* expliciete ruimte-markering */
.section--compact{padding:72px 0;}
@media (max-width: 768px){
  .section{padding:72px 0;}
  .section--compact{padding:56px 0;}
}
.section--gray{background:#f8f9fb;}
.section--dark{background:#0f172a;color:#e2e8f0;}
.section--brand{background:#2563eb;color:#fff;}
.text-center{text-align:center;}
/* Row spacing helpers — uniforme gaps tussen rows binnen secties */
.row-stack > * + *{margin-top:24px;}
.row-stack--lg > * + *{margin-top:40px;}
.row-stack--xl > * + *{margin-top:64px;}

/* ── Typography ───────────────────────────────────────── */
.h1{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:800;line-height:1.08;letter-spacing:-.035em;color:#0f172a;text-wrap:balance;}
.h2{font-size:clamp(1.9rem,3.5vw,2.75rem);font-weight:700;line-height:1.12;letter-spacing:-.025em;color:#0f172a;text-wrap:balance;}
.h3{font-size:1.35rem;font-weight:700;line-height:1.3;color:#0f172a;text-wrap:balance;}
.h4{font-size:1.1rem;font-weight:600;color:#0f172a;}
/* v1.3.4 — subtitle: bredere max-width zodat zinnen niet op rare plekken
   breken in centered context. text-wrap:pretty voorkomt orphans. */
.subtitle{
  font-size:1.125rem;color:#64748b;line-height:1.7;
  max-width:640px;text-wrap:pretty;
}
.text-center .subtitle,
.section .text-center .subtitle{margin-left:auto;margin-right:auto;}
h1,h2,h3,.hero__title,.vs-title,.pricing-card h3{text-wrap:balance;}
.subtitle--light{color:rgba(255,255,255,.65);}
.section-label{
  font-size:.8rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:#2563eb;margin-bottom:18px;
  display:inline-block;
}
.section--dark .section-label{color:#60a5fa;}
.section--dark .h2,.section--dark .h3{color:#f1f5f9;}

/* v1.3.4 — uniforme spacing in section-headers (label → h2 → subtitle).
   Zonder dit varieert spacing per pagina door inline style="margin:..."
   declaraties. Met deze rules krijgt elke gecentreerde section-intro
   automatisch ademruimte. Inline margin overrules nog steeds als nodig. */
.text-center > .h2,
.text-center > h2.h2 {
  margin-top: 0;
  margin-bottom: 18px;
}
.text-center > .subtitle {
  margin-top: 0;
  margin-bottom: 0;
}
/* Spacing tussen section-intro (label+h2+subtitle) en de eerste content-row */
.text-center + *:not(script):not(style),
.text-center ~ .features-grid,
.text-center ~ .feature-row,
.text-center ~ .pricing-cards,
.text-center ~ .testimonials,
.text-center ~ .stats-bar,
.text-center ~ .process-flow {
  margin-top: 56px;
}
@media (max-width: 768px){
  .text-center + *:not(script):not(style),
  .text-center ~ .features-grid,
  .text-center ~ .feature-row,
  .text-center ~ .pricing-cards,
  .text-center ~ .testimonials,
  .text-center ~ .stats-bar,
  .text-center ~ .process-flow {
    margin-top: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SECONDARY TOP BAR (Mollie-style)
═══════════════════════════════════════════════════════════ */
.site-topbar{
  background:#f8f9fb;border-bottom:1px solid #e2e8f0;
  font-size:.8rem;color:#64748b;
}
.site-topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  height:36px;
}
.topbar__links{display:flex;gap:20px;list-style:none;padding:0;margin:0;}
.topbar__links li{list-style:none;}
.topbar__links a{color:#64748b;font-weight:500;transition:color .15s;}
.topbar__links a:hover{color:#2563eb;}
.topbar__right{display:flex;align-items:center;gap:16px;}
.topbar__right a{color:#64748b;font-weight:500;transition:color .15s;}
.topbar__right a:hover{color:#2563eb;}
.topbar__right .topbar__cta{
  color:#2563eb;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}

/* ═══════════════════════════════════════════════════════════
   PRIMARY HEADER / NAV
═══════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #e2e8f0;
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:0 1px 12px rgba(0,0,0,.06);}
.nav{
  display:flex;align-items:center;height:64px;
  max-width:1200px;margin:0 auto;padding:0 32px;
}
.nav__logo{
  display:flex;align-items:center;gap:10px;
  font-size:1.3rem;font-weight:800;color:#0f172a;
  letter-spacing:-.02em;
}
.nav__logo-icon{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;
}
.nav__links{
  display:flex;gap:28px;margin-left:40px;list-style:none;padding:0;margin-top:0;margin-bottom:0;
}
.nav__links li{list-style:none;}
.nav__link{
  font-size:.9rem;font-weight:500;color:#64748b;
  transition:color .15s;position:relative;
}
.nav__link:hover{color:#0f172a;}
.nav__link--active{color:#0f172a;font-weight:600;}
.nav__link--active::after{
  content:'';position:absolute;bottom:-20px;left:0;right:0;
  height:2px;background:#2563eb;border-radius:1px;
}
.nav__right{
  margin-left:auto;display:flex;align-items:center;gap:8px;
}
.nav__login{
  font-size:.875rem;font-weight:600;color:#0f172a;
  padding:8px 16px;border-radius:8px;transition:background .15s;
}
.nav__login:hover{background:#f1f5f9;}

/* ── Menu Tab & Side Drawer ──────────────────────────── */
.nav__menu-tab{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;cursor:pointer;
  font-size:.875rem;font-weight:600;color:#0f172a;
  transition:background .15s;margin-left:8px;
  border:1px solid #e2e8f0;
}
.nav__menu-tab:hover{background:#f1f5f9;}
.nav__menu-tab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}

.side-drawer-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.3);z-index:1100;
}
.side-drawer-overlay.open{display:block;}
.side-drawer{
  position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;
  background:#fff;z-index:1101;
  box-shadow:-4px 0 24px rgba(0,0,0,.08);
  display:none;flex-direction:column;
}
.side-drawer.open{display:flex;}
.side-drawer__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid #f1f5f9;flex-shrink:0;
}
.side-drawer__close{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.side-drawer__close:hover{background:#f1f5f9;}
.side-drawer__close svg{width:20px;height:20px;stroke:#0f172a;fill:none;stroke-width:2;}
.side-drawer__body{padding:8px 24px 24px;flex:1;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.side-drawer__body::-webkit-scrollbar{display:none;}
.side-drawer__section{margin-bottom:8px;}
.side-drawer__label{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:#94a3b8;padding:16px 0 8px;
}
.side-drawer__item{
  display:flex;align-items:center;gap:14px;
  padding:12px 8px;border-radius:10px;
  transition:background .15s;text-decoration:none;color:inherit;
}
.side-drawer__item:hover{background:#f8fafc;}
.side-drawer__icon{
  width:40px;height:40px;min-width:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.side-drawer__icon svg{width:20px;height:20px;min-width:20px;min-height:20px;max-width:20px;max-height:20px;flex-shrink:0;}
.side-drawer__icon--blue{background:rgba(37,99,235,.08);color:#2563eb;}
.side-drawer__icon--green{background:rgba(22,163,74,.08);color:#16a34a;}
.side-drawer__icon--purple{background:rgba(124,58,237,.08);color:#7c3aed;}
.side-drawer__icon--orange{background:rgba(217,119,6,.08);color:#d97706;}
.side-drawer__icon--teal{background:rgba(13,148,136,.08);color:#0d9488;}
.side-drawer__item-title{font-size:.95rem;font-weight:600;color:#0f172a;line-height:1.3;}
.side-drawer__item-desc{font-size:.8rem;color:#64748b;line-height:1.3;margin-top:1px;}
.side-drawer__card{
  display:block;margin:16px 0 8px;padding:20px;border-radius:14px;
  background:#2563eb;color:#fff;text-decoration:none;transition:background .15s;
}
.side-drawer__card:hover{background:#1d4ed8;}
.side-drawer__card-title{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:6px;}
.side-drawer__card-desc{font-size:.8rem;opacity:.85;margin-top:4px;line-height:1.4;}
.side-drawer__card-preview{
  margin-top:14px;border-radius:10px;overflow:hidden;
  background:#0f172a;border:1px solid rgba(255,255,255,.1);
}
.side-drawer__card-dots{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.side-drawer__card-dots span{width:7px;height:7px;border-radius:50%;}
.side-drawer__card-dots span:nth-child(1){background:#ff5f57;}
.side-drawer__card-dots span:nth-child(2){background:#febc2e;}
.side-drawer__card-dots span:nth-child(3){background:#28c840;}
.side-drawer__card-preview div:last-child{background:#fff;border-radius:0 0 9px 9px;}
.side-drawer__footer{
  padding:16px 24px;border-top:1px solid #f1f5f9;flex-shrink:0;
  display:flex;flex-direction:column;gap:10px;
  background:#fff;
}
.side-drawer__footer .btn{width:100%;justify-content:center;}

[data-theme="dark"] .nav__menu-tab{color:#f1f5f9;border-color:#334155;}
[data-theme="dark"] .nav__menu-tab:hover{background:#1e293b;}
[data-theme="dark"] .side-drawer{background:#0f172a;box-shadow:-4px 0 24px rgba(0,0,0,.4);}
[data-theme="dark"] .side-drawer__header{border-color:#1e293b;}
[data-theme="dark"] .side-drawer__close svg{stroke:#e2e8f0;}
[data-theme="dark"] .side-drawer__close:hover{background:#1e293b;}
[data-theme="dark"] .side-drawer__item:hover{background:rgba(255,255,255,.04);}
[data-theme="dark"] .side-drawer__item-title{color:#f1f5f9;}
[data-theme="dark"] .side-drawer__item-desc{color:#64748b;}
[data-theme="dark"] .side-drawer__label{color:#475569;}
[data-theme="dark"] .side-drawer__card{background:#1e3a8a;}
[data-theme="dark"] .side-drawer__card:hover{background:#1e40af;}
[data-theme="dark"] .side-drawer__card-preview div:last-child{background:#1e293b;}
.side-drawer__card-preview-title{color:#0f172a;}
[data-theme="dark"] .side-drawer__card-preview-title{color:#f1f5f9;}
[data-theme="dark"] .side-drawer__footer{background:#0f172a;border-color:#1e293b;}
[data-theme="dark"] .side-drawer-overlay{background:rgba(0,0,0,.5);}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:10px;
  font-size:.9375rem;font-weight:600;
  transition:all .2s ease;white-space:nowrap;cursor:pointer;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.btn--primary{
  background:#2563eb;color:#fff;
  box-shadow:0 1px 3px rgba(37,99,235,.3),0 1px 2px rgba(37,99,235,.2);
}
.btn--primary:hover{
  background:#1d4ed8;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(37,99,235,.35);
}
.btn--outline{
  background:#fff;color:#0f172a;
  border:1.5px solid #d1d5db;
}
.btn--outline:hover{background:#f8f9fb;border-color:#94a3b8;}
.btn--white{background:#fff;color:#0f172a;}
.btn--white:hover{background:#f1f5f9;transform:translateY(-1px);}
.btn--ghost-white{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.25);
}
.btn--ghost-white:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);}
.btn--lg{padding:14px 28px;font-size:1rem;border-radius:12px;}
.btn--sm{padding:8px 18px;font-size:.85rem;border-radius:8px;}
.btn--dark{background:#0f172a;color:#fff;}
.btn--dark:hover{background:#1e293b;transform:translateY(-1px);}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero{
  /* v1.3.4 — meer top-padding zodat de hero-titel nooit boven de viewport
     valt onder de sticky header (was 80px → cut-off op sommige pages). */
  padding:120px 0 80px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,#f0f4ff 100%);
  overflow:hidden;
}
@media (max-width: 768px){
  .hero{padding:80px 0 48px;}
}
.hero__badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:99px;
  background:rgba(37,99,235,.08);color:#2563eb;
  font-size:.8rem;font-weight:600;margin-bottom:28px;
}
.hero__title{max-width:820px;margin:0 auto 24px;text-wrap:balance;}
.hero__subtitle{
  max-width:620px;margin:0 auto 40px;
  font-size:1.125rem;color:#64748b;text-wrap:pretty;
}
.hero__buttons{
  display:flex;gap:14px;justify-content:center;
  margin-bottom:56px;
}
.hero__image{
  max-width:980px;margin:0 auto;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
}

/* Browser chrome mockup */
.browser-frame{
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05);
  border:1px solid #e2e8f0;
}
.browser-frame__bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;background:#f8f9fb;
  border-bottom:1px solid #e2e8f0;
}
.browser-frame__dot{width:10px;height:10px;border-radius:50%;}
.browser-frame__dot--r{background:#ff5f57;}
.browser-frame__dot--y{background:#febc2e;}
.browser-frame__dot--g{background:#28c840;}
.browser-frame__url{
  flex:1;margin-left:12px;
  background:#fff;border:1px solid #e2e8f0;
  border-radius:6px;padding:5px 12px;
  font-size:.75rem;color:#94a3b8;
}
.browser-frame__body{
  position:relative;background:#f8f9fb;min-height:400px;
}

/* ── Dashboard Tour Widget ────────────────────────────── */
.tour{max-width:980px;margin:0 auto;}
.tour__frame{border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05);border:1px solid #e2e8f0;background:#fff;}
.tour__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f8f9fb;border-bottom:1px solid #e2e8f0;}
.tour__dot{width:10px;height:10px;border-radius:50%;}
.tour__dot--r{background:#ff5f57;}
.tour__dot--y{background:#febc2e;}
.tour__dot--g{background:#28c840;}
.tour__url{flex:1;margin-left:12px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:5px 12px;font-size:.75rem;color:#94a3b8;}
.tour__body{display:flex;min-height:440px;font-family:Inter,system-ui,sans-serif;font-size:14px;color:#1c1c1e;}
.tour__sidebar{width:200px;background:#1a1a2e;padding:14px 10px;flex-shrink:0;display:flex;flex-direction:column;}
.tour__sidebar-brand{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.tour__sidebar-brand .nav__logo-icon{width:26px;height:26px;font-size:9px;border-radius:6px;}
.tour__sidebar-brand span{font-size:12px;font-weight:600;color:#f5f5f7;}
.tour__sidebar-label{font-size:9px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.7px;padding:8px 8px 4px;}
.tour__nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;color:#98989d;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;margin-bottom:2px;}
.tour__nav-item:hover{background:rgba(255,255,255,.06);color:#c7c7cc;}
.tour__nav-item.active{background:rgba(37,99,235,.2);color:#fff;}
.tour__nav-item svg{width:15px;height:15px;flex-shrink:0;}
.tour__nav-item .tour__badge{margin-left:auto;background:#2563eb;color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;}
.tour__main{flex:1;background:#f5f5f7;overflow:hidden;position:relative;}
.tour__screen{display:none;padding:20px 24px;height:100%;animation:tourFadeIn .3s ease;}
.tour__screen.active{display:block;}
@keyframes tourFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
  .tour__sidebar{display:none;}
  .tour__body{min-height:360px;}
}
@media(max-width:600px){
  .tour__body{min-height:300px;}
  .tour__screen{padding:14px 16px;}
}
[data-theme="dark"] .tour__frame{border-color:#334155;background:#0f172a;}
[data-theme="dark"] .tour__bar{background:#0f172a;border-color:#1e293b;}
[data-theme="dark"] .tour__url{background:#1e293b;border-color:#334155;color:#64748b;}
[data-theme="dark"] .tour__sidebar{background:#0a0a12;}
[data-theme="dark"] .tour__main{background:#1e293b;}
[data-theme="dark"] .tour__screen{color:#f1f5f9;}

/* ── Social proof bar ─────────────────────────────────── */
.social-proof{
  padding:40px 0;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
.social-proof__text{
  text-align:center;font-size:.95rem;color:#64748b;font-weight:500;
}
.social-proof__text strong{color:#0f172a;}
.social-proof__logos{
  display:flex;align-items:center;justify-content:center;
  gap:24px 48px;margin-top:20px;opacity:.35;flex-wrap:wrap;
}
.social-proof__logo{
  font-size:1.1rem;font-weight:700;color:#0f172a;letter-spacing:-.02em;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES GRID
═══════════════════════════════════════════════════════════ */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:48px;
}
.feature-card{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:14px;padding:28px 24px;
  transition:all .25s ease;
}
.section--gray .feature-card{background:#fff;}
.feature-card:hover{
  border-color:#2563eb;
  box-shadow:0 4px 20px rgba(37,99,235,.1);
  transform:translateY(-2px);
}
.feature-card__icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.feature-card__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
.feature-card__icon--blue{background:#eff6ff;color:#2563eb;}
.feature-card__icon--green{background:#f0fdf4;color:#16a34a;}
.feature-card__icon--purple{background:#faf5ff;color:#7c3aed;}
.feature-card__icon--orange{background:#fff7ed;color:#d97706;}
.feature-card__icon--red{background:#fef2f2;color:#dc2626;}
.feature-card__icon--teal{background:#f0fdfa;color:#0d9488;}
.feature-card__title{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:#0f172a;}
.feature-card__text{font-size:.875rem;color:#64748b;line-height:1.65;}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — Steps
═══════════════════════════════════════════════════════════ */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:40px;margin-top:48px;counter-reset:step;
}
.step{text-align:center;position:relative;}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;font-size:1.2rem;font-weight:800;
  margin:0 auto 18px;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.step__title{font-size:1.1rem;font-weight:700;margin-bottom:8px;color:#0f172a;}
.step__text{font-size:.9rem;color:#64748b;}
.steps .step:not(:last-child)::after{
  content:'';position:absolute;
  top:26px;left:calc(50% + 36px);
  width:calc(100% - 72px);height:2px;
  background:linear-gradient(90deg,#2563eb,#7c3aed);
  opacity:.15;
}

/* ═══════════════════════════════════════════════════════════
   FEATURE DEEP-DIVE (alternating image+text)
═══════════════════════════════════════════════════════════ */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;margin-bottom:88px;
}
.feature-row:last-child{margin-bottom:0;}
.feature-row--reverse{direction:rtl;}
.feature-row--reverse > *{direction:ltr;}
.feature-row__img{
  border-radius:14px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  border:1px solid #e2e8f0;
}
.feature-row__content{padding:8px 0;}
.feature-row__list{
  list-style:none;margin-top:18px;
  display:flex;flex-direction:column;gap:10px;
}
.feature-row__list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.9rem;color:#475569;
}
.feature-row__list svg{
  width:18px;height:18px;flex-shrink:0;margin-top:3px;
  stroke:#16a34a;fill:none;stroke-width:2.5;
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════ */
.testimonials{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:48px;
}
.testimonial{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:14px;padding:24px;
}
.testimonial__stars{display:flex;gap:2px;margin-bottom:12px;}
.testimonial__stars svg{width:16px;height:16px;fill:#f59e0b;stroke:none;}
.testimonial__text{
  font-size:.9rem;color:#334155;line-height:1.7;
  margin-bottom:16px;font-style:italic;
}
.testimonial__author{display:flex;align-items:center;gap:10px;}
.testimonial__av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
}
.testimonial__name{font-size:.85rem;font-weight:600;color:#0f172a;}
.testimonial__role{font-size:.75rem;color:#94a3b8;}

/* ═══════════════════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════════════════ */
.pricing-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:48px;
}
.pricing-card{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:14px;padding:28px;
  position:relative;transition:all .25s;
}
.pricing-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.pricing-card--popular{
  border:2px solid #2563eb;
  box-shadow:0 4px 20px rgba(37,99,235,.1);
}
.pricing-card__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:#2563eb;color:#fff;
  padding:4px 14px;border-radius:99px;
  font-size:.72rem;font-weight:700;white-space:nowrap;
}
.pricing-card__name{font-size:1.05rem;font-weight:700;margin-bottom:4px;color:#0f172a;}
.pricing-card__desc{font-size:.82rem;color:#94a3b8;margin-bottom:16px;}
.pricing-card__price{font-size:2.4rem;font-weight:800;margin-bottom:4px;color:#0f172a;}
.pricing-card__price span{font-size:.9rem;font-weight:500;color:#94a3b8;}
.pricing-card__period{font-size:.82rem;color:#94a3b8;margin-bottom:20px;}
.pricing-card__features{
  list-style:none;display:flex;flex-direction:column;gap:8px;
  margin-bottom:24px;
}
.pricing-card__features li{
  display:flex;align-items:center;gap:8px;font-size:.85rem;color:#475569;
}
.pricing-card__features svg{width:16px;height:16px;stroke:#16a34a;fill:none;stroke-width:2.5;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════ */
.cta-banner{
  text-align:center;padding:80px 0;
  background:#0f172a;color:#fff;
}
.cta-banner .h2{margin-bottom:16px;color:#f1f5f9;}
.cta-banner .subtitle{margin:0 auto 32px;color:rgba(255,255,255,.55);}
.cta-banner__buttons{display:flex;gap:14px;justify-content:center;}

/* ═══════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════ */
.stats-bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;margin-top:48px;
}
.stat{text-align:center;}
.stat__number{font-size:2.5rem;font-weight:800;color:#2563eb;}
.section--dark .stat__number{color:#60a5fa;}
.stat__label{font-size:.875rem;color:#64748b;margin-top:4px;}
.section--dark .stat__label{color:rgba(255,255,255,.5);}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer{
  background:#0f172a;color:#94a3b8;
  padding:64px 0 28px;
}
.footer-grid{
  display:grid;grid-template-columns:1.8fr repeat(5,1fr);
  gap:32px;margin-bottom:48px;
}
.footer-brand__name{
  font-size:1.25rem;font-weight:800;color:#f1f5f9;margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.footer-brand__name .nav__logo-icon{width:28px;height:28px;font-size:11px;border-radius:7px;}
.footer-brand__text{font-size:.82rem;color:#94a3b8;line-height:1.65;max-width:260px;}
.footer-col__title{
  font-size:.72rem;font-weight:700;color:#e2e8f0;
  text-transform:uppercase;letter-spacing:1.2px;
  margin-bottom:14px;
}
.footer-col__links{list-style:none;display:flex;flex-direction:column;gap:8px;}
.footer-col__links a{font-size:.82rem;color:#94a3b8;transition:color .15s;}
.footer-col__links a:hover{color:#f1f5f9;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.78rem;color:#94a3b8;
}
.footer-socials{display:flex;gap:14px;}
.footer-socials a{color:#94a3b8;transition:color .15s;}
.footer-socials a:hover{color:#f1f5f9;}
.footer-socials svg{width:18px;height:18px;fill:currentColor;}

/* ═══════════════════════════════════════════════════════════
   PROCESS FLOW (timeline)
═══════════════════════════════════════════════════════════ */
.process-flow{
  position:relative;max-width:900px;margin:56px auto 0;
  display:flex;flex-direction:column;gap:0;
}
.process-step{
  display:grid;grid-template-columns:1fr 48px 1fr;
  align-items:center;gap:0;min-height:200px;
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s ease;
}
.process-step.visible{opacity:1;transform:translateY(0);}
.process-step--right .process-step__content{grid-column:3;}
.process-step--right .process-step__visual{grid-column:1;grid-row:1;}
.process-step--left .process-step__content{grid-column:1;}
.process-step--left .process-step__visual{grid-column:3;}
.process-step__connector{
  grid-column:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
}
.process-step__dot{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:800;z-index:2;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
}
.process-step__line{
  width:3px;background:linear-gradient(180deg,#2563eb,#7c3aed);
  flex:1;opacity:.15;
}
.process-step__content{padding:20px 28px;}
.process-step__label{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:#2563eb;margin-bottom:6px;
}
.process-step__title{font-size:1.2rem;font-weight:700;margin-bottom:8px;color:#0f172a;}
.process-step__text{font-size:.875rem;color:#64748b;line-height:1.65;}
.process-step__visual{padding:12px;}

/* process mockup cards */
.process-mock{
  background:#fff;border:1px solid #e2e8f0;border-radius:12px;
  padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.04);
  font-family:Inter,system-ui,sans-serif;font-size:12px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.process-mock:hover{transform:scale(1.01);box-shadow:0 8px 32px rgba(0,0,0,.08);}

/* Typing animation */
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
.typing-text{
  overflow:hidden;white-space:nowrap;
  border-right:2px solid #2563eb;
  animation:typing 2s steps(30) 1s both,blink .5s step-end infinite 3s;
  max-width:fit-content;
}

/* Utility animations */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.pulse{animation:pulse 2s ease-in-out infinite;}
@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.count-up{animation:countUp .6s ease both;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:float 3s ease-in-out infinite;}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.slide-in-left{animation:slideInLeft .6s ease both;}
.slide-in-right{animation:slideInRight .6s ease both;}

/* Interactive mockup */
.interactive-mock{position:relative;cursor:default;user-select:none;}
.interactive-mock [data-tooltip]{position:relative;}
.interactive-mock [data-tooltip]:hover::after{
  content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:#0f172a;color:#fff;
  padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;
  white-space:nowrap;z-index:10;pointer-events:none;
}
.mock-clickable{
  cursor:pointer;transition:all .15s;border-radius:8px;
}
.mock-clickable:hover{background:rgba(37,99,235,.04);transform:scale(1.01);}
.mock-notification{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:#dc2626;color:#fff;font-size:8px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(220,38,38,.4);
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════════════════════════════ */
.theme-toggle{
  position:relative;width:40px;height:22px;
  border-radius:99px;background:#e2e8f0;cursor:pointer;
  border:none;transition:background .3s;flex-shrink:0;
}
.theme-toggle__knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .3s;display:flex;align-items:center;justify-content:center;
}
.theme-toggle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.theme-toggle__sun{color:#f59e0b;}
.theme-toggle__moon{color:#6366f1;display:none;}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
═══════════════════════════════════════════════════════════ */
/* v1.3.2 — VUISTREGEL: !important weg van color zodat inline `color:#1c1c1e`
   op witte kaarten gewoon wint. Eerder: body color !important cascadede
   ALLES naar lichtgrijs → tekst op witte kaarten werd onleesbaar wit-op-wit.
   Nu: page-default = lichtgrijs (voor losse tekst op donker bg), maar
   elke inline color of expliciete kaart-color overrijdt 'm. */
[data-theme="dark"] body,.ok-home-dark{background:#0a0a12!important;color:#cbd5e1;}
[data-theme="dark"] .site-topbar{background:#0f172a;border-bottom-color:rgba(255,255,255,.06);}
[data-theme="dark"] .topbar__links a,[data-theme="dark"] .topbar__right a{color:#94a3b8;}
[data-theme="dark"] .site-header{background:rgba(10,10,18,.95);border-bottom-color:rgba(255,255,255,.06);}
[data-theme="dark"] .nav__logo{color:#f1f5f9;}
[data-theme="dark"] .nav__link{color:#94a3b8;}
[data-theme="dark"] .nav__link:hover,[data-theme="dark"] .nav__link--active{color:#f1f5f9;}
[data-theme="dark"] .nav__login{color:#f1f5f9;}
[data-theme="dark"] .nav__login:hover{background:rgba(255,255,255,.06);}
[data-theme="dark"] .hero{background:linear-gradient(180deg,#0a0a12 0%,#0f172a 100%);}
[data-theme="dark"] .h1,[data-theme="dark"] .h2,[data-theme="dark"] .h3,[data-theme="dark"] .h4{color:#f1f5f9;}
[data-theme="dark"] .subtitle,[data-theme="dark"] .hero__subtitle{color:#94a3b8;}
[data-theme="dark"] .hero__badge{background:rgba(96,165,250,.12);color:#60a5fa;}
[data-theme="dark"] .social-proof{background:#0f172a;border-color:rgba(255,255,255,.06);}
[data-theme="dark"] .social-proof__text{color:#94a3b8;}
[data-theme="dark"] .social-proof__text strong{color:#f1f5f9;}
[data-theme="dark"] .social-proof__logo{color:#94a3b8;}
[data-theme="dark"] .section--gray{background:#0f172a;}
[data-theme="dark"] .feature-card{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .feature-card:hover{border-color:#2563eb;}
[data-theme="dark"] .feature-card__title{color:#f1f5f9;}
[data-theme="dark"] .feature-card__text{color:#94a3b8;}
[data-theme="dark"] .feature-card__icon--blue{background:rgba(37,99,235,.15);}
[data-theme="dark"] .feature-card__icon--green{background:rgba(22,163,74,.15);}
[data-theme="dark"] .feature-card__icon--purple{background:rgba(124,58,237,.15);}
[data-theme="dark"] .feature-card__icon--orange{background:rgba(217,119,6,.15);}
[data-theme="dark"] .feature-card__icon--red{background:rgba(220,38,38,.15);}
[data-theme="dark"] .feature-card__icon--teal{background:rgba(13,148,136,.15);}
[data-theme="dark"] .step__title{color:#f1f5f9;}
[data-theme="dark"] .step__text{color:#94a3b8;}
[data-theme="dark"] .testimonial{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .testimonial__text{color:#cbd5e1;}
[data-theme="dark"] .testimonial__name{color:#f1f5f9;}
[data-theme="dark"] .pricing-card{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .pricing-card--popular{border-color:#2563eb;}
[data-theme="dark"] .pricing-card__name,.pricing-card__price{color:#f1f5f9;}
[data-theme="dark"] .pricing-card__features li{color:#cbd5e1;}
[data-theme="dark"] .btn--outline{color:#e2e8f0;border-color:#475569;background:transparent;}
[data-theme="dark"] .btn--outline:hover{background:rgba(255,255,255,.05);}
[data-theme="dark"] .btn--white{background:#1e293b;color:#f1f5f9;}
[data-theme="dark"] .btn--white:hover{background:#334155;}
[data-theme="dark"] .browser-frame{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .browser-frame__bar{background:#0f172a;border-bottom-color:rgba(255,255,255,.06);}
[data-theme="dark"] .browser-frame__url{background:#334155;border-color:#475569;color:#64748b;}
[data-theme="dark"] .feature-row__img{border-color:#334155;}
[data-theme="dark"] .feature-row__list li{color:#cbd5e1;}
[data-theme="dark"] .process-mock{background:#1e293b;border-color:#334155;}
[data-theme="dark"] .process-step__title{color:#f1f5f9;}
[data-theme="dark"] .process-step__text{color:#94a3b8;}
[data-theme="dark"] .process-step__label{color:#60a5fa;}
[data-theme="dark"] .theme-toggle{background:#475569;}
[data-theme="dark"] .theme-toggle__knob{transform:translateX(18px);}
[data-theme="dark"] .theme-toggle__sun{display:none;}
[data-theme="dark"] .theme-toggle__moon{display:block;}
[data-theme="dark"] .interactive-mock [data-tooltip]:hover::after{background:#fff;color:#0f172a;}
/* v1.3.2 — !important WEG: dwong eerder ÀLLE p/li/span/summary tekst naar
   licht, óók in witte kaarten → wit-op-wit. Nu :where() = 0 specificity,
   inline color en ouder-kaart-color winnen vanzelf. Tekst zonder eigen
   color erft van body (= lichtgrijs) op donkere page = leesbaar. */
[data-theme="dark"] :where(p, li, td){color:#cbd5e1;}
[data-theme="dark"] :where(strong, b){color:#f1f5f9;}
[data-theme="dark"] :where(details div, details summary){color:#cbd5e1;}
[data-theme="dark"] :where(details summary){color:#f1f5f9;}
[data-theme="dark"] a:not(.btn):not(.nav__link):not(.nav__logo){color:#94a3b8;}
[data-theme="dark"] a:not(.btn):hover{color:#60a5fa;}
[data-theme="dark"] .section--brand{background:#1e3a8a;}
[data-theme="dark"] .comparison-table th{background:#1e293b;color:#f1f5f9;border-color:#334155;}
[data-theme="dark"] .comparison-table td{border-color:#1e293b;color:#cbd5e1;}
[data-theme="dark"] .comparison-table tr:hover td{background:rgba(37,99,235,.05);}
[data-theme="dark"] .cta-banner{background:linear-gradient(135deg,#1e3a8a,#312e81);}
[data-theme="dark"] .vs-hero{background:linear-gradient(135deg,#1e293b 0%,#1a1a2e 100%);}
[data-theme="dark"] .vs-subtitle{color:#9ca3af;}
[data-theme="dark"] .compare-section.alt{background:#111827;}
[data-theme="dark"] .compare-table thead th{background:#1f2937;border-color:#374151;color:#f1f5f9;}
[data-theme="dark"] .compare-table tbody td{border-color:#1f2937;color:#cbd5e1;}
[data-theme="dark"] .pricing-vs__card{border-color:#374151;background:#1f2937;}
[data-theme="dark"] .pricing-vs__card--highlight{border-color:#3b82f6;background:linear-gradient(180deg,rgba(37,99,235,.15) 0%,#1f2937 100%);}
[data-theme="dark"] .typing-text{color:#f1f5f9;}
[data-theme="dark"] .mock-clickable{color:#f1f5f9;}
[data-theme="dark"] .mock-clickable:hover{background:rgba(96,165,250,.08);}
[data-theme="dark"] .process-mock div,[data-theme="dark"] .process-mock span{color:#cbd5e1;}
[data-theme="dark"] .site-topbar{color:#94a3b8;}
[data-theme="dark"] .footer-brand__text{color:#94a3b8;}
[data-theme="dark"] .footer-col__links a{color:#94a3b8;}
[data-theme="dark"] .footer-bottom{color:#94a3b8;}
[data-theme="dark"] .footer-socials a{color:#94a3b8;}
[data-theme="dark"] .section--dark .h2,[data-theme="dark"] .section--dark h2{color:#fff;}
[data-theme="dark"] .section--dark .subtitle{color:#cbd5e1;}
[data-theme="dark"] .faq-question{color:#f1f5f9;}
[data-theme="dark"] .faq-answer{color:#cbd5e1;}
[data-theme="dark"] .help-article{color:#f1f5f9;}
[data-theme="dark"] .help-article__body{color:#94a3b8;}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:#1e293b;color:#f1f5f9;border-color:#334155;}
[data-theme="dark"] label{color:#cbd5e1;}
[data-theme="dark"] .card,[data-theme="dark"] .integration-card,[data-theme="dark"] .partner-card{background:#1e293b;border-color:#334155;color:#cbd5e1;}
[data-theme="dark"] .card h3,[data-theme="dark"] .integration-card h3,[data-theme="dark"] .partner-card h3{color:#f1f5f9;}
[data-theme="dark"] .badge{background:rgba(37,99,235,.15);color:#60a5fa;}
[data-theme="dark"] blockquote{border-color:#334155;color:#cbd5e1;}
[data-theme="dark"] code{background:#1e293b;color:#e2e8f0;}
[data-theme="dark"] .tab-btn{color:#94a3b8;border-color:#334155;}
[data-theme="dark"] .tab-btn.active,[data-theme="dark"] .tab-btn:hover{color:#f1f5f9;background:#1e293b;}
[data-theme="dark"] .section-label{color:#60a5fa;}
/* v1.3.2 — color overrides VERWIJDERD. Maakten bv. :
     <span style="color:#1c1c1e">P. Smit</span>   in een witte kaart
   wit (onleesbaar wit-op-wit). Inline kleuren respecteren = altijd
   leesbaar in beide modes. Background-overrides voor groene/rode
   notice-blokken blijven wel — die werken (achtergrond + text matchen). */
[data-theme="dark"] [style*="background:#fef2f2"]{background:#1e293b!important;border-color:#334155!important;}
[data-theme="dark"] [style*="background:#f0fdf4"]{background:#0f2b1a!important;border-color:#16a34a!important;}
[data-theme="dark"] [style*="background:#dcfce7"]{background:rgba(22,163,74,.15)!important;}
[data-theme="dark"] .topbar__cta{color:#60a5fa!important;}
[data-theme="dark"] .hero .subtitle{color:#94a3b8;}

/* ═══════════════════════════════════════════════════════════
   STICKY CTA BAR — altijd zichtbaar, split login/registreren
═══════════════════════════════════════════════════════════ */
.sticky-cta{
  display:block;position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid #e2e8f0;
  padding:10px 16px;
  box-shadow:0 -4px 20px rgba(0,0,0,.04);
}
[data-theme="dark"] .sticky-cta{background:rgba(10,10,18,.92);border-top-color:rgba(255,255,255,.06);}
.sticky-cta__inner{
  max-width:720px;margin:0 auto;
  display:flex;align-items:stretch;gap:0;
  border-radius:12px;overflow:hidden;
  background:#f8fafc;
  border:1.5px solid #e2e8f0;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
[data-theme="dark"] .sticky-cta__inner{background:#0f172a;border-color:rgba(255,255,255,.08);}
.sticky-cta__half{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:13px 14px;font-size:.92rem;font-weight:600;
  text-decoration:none;transition:background .15s,color .15s,transform .15s;
  white-space:nowrap;
}
.sticky-cta__half svg{width:16px;height:16px;stroke-width:2.2;}
.sticky-cta__half--login{
  color:#0f172a;background:transparent;
  border-right:1.5px solid #e2e8f0;
}
[data-theme="dark"] .sticky-cta__half--login{color:#f1f5f9;border-right-color:rgba(255,255,255,.08);}
.sticky-cta__half--login:hover{background:#eef2f7;}
[data-theme="dark"] .sticky-cta__half--login:hover{background:rgba(255,255,255,.04);}
.sticky-cta__half--register{
  color:#fff;
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
}
.sticky-cta__half--register:hover{filter:brightness(1.08);transform:translateX(1px);}
.sticky-cta__half--register svg{stroke:#fff;}
/* Kleine viewport: kleiner lettertype */
@media(max-width:500px){
  .sticky-cta{padding:8px 12px;}
  .sticky-cta__half{padding:11px 10px;font-size:.85rem;}
  .sticky-cta__half svg{width:14px;height:14px;}
}
/* Oude .sticky-cta .btn fallback (indien een pagina nog oude markup gebruikt) */
.sticky-cta .btn{width:100%;justify-content:center;}

/* ═══════════════════════════════════════════════════════════
   PAGE-SPECIFIC: Help Center
═══════════════════════════════════════════════════════════ */
.help-article{cursor:pointer;transition:color .15s;}
.help-article:hover{color:#2563eb;}
.help-article.is-open{color:#2563eb;font-weight:600;}
.help-article__body{display:none;padding:8px 0 16px;font-size:.9rem;color:#64748b;line-height:1.7;}
.help-article__body.is-visible{display:block;}

/* ═══════════════════════════════════════════════════════════
   COMPARISON TABLE
═══════════════════════════════════════════════════════════ */
.comparison-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:.875rem;}
.comparison-table th{
  text-align:left;padding:12px 16px;font-weight:600;
  border-bottom:2px solid #e2e8f0;color:#0f172a;
}
.comparison-table td{
  padding:12px 16px;border-bottom:1px solid #f1f5f9;color:#475569;
}
.comparison-table tr:hover td{background:#f8f9fb;}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}
  .feature-row{gap:40px;}
}

@media(max-width:900px){
  .features-grid,.testimonials,.pricing-cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:24px;}
  .feature-row{grid-template-columns:1fr;gap:24px;}
  .feature-row--reverse{direction:ltr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats-bar{grid-template-columns:repeat(2,1fr);}
  .nav__links{display:none;}
  .topbar__links{display:none;}
  .site-topbar .container{justify-content:flex-end;}
  /* v1.7.44: header op mobiel compacter zodat "Mijn account" + Menu naast logo passen */
  .nav__right{gap:6px;}
  .nav__right .btn{padding:7px 12px;font-size:.78rem;line-height:1.3;}
  .nav__menu-tab{padding:7px 10px;font-size:.78rem;margin-left:0;gap:4px;}
  .nav__menu-tab svg{width:16px;height:16px;}
  .hero__buttons{flex-direction:column;align-items:center;width:100%;}
  .hero__buttons .btn{width:100%;max-width:340px;justify-content:center;}
  .steps .step::after{display:none;}
  .process-step{grid-template-columns:48px 1fr;min-height:auto;}
  .process-step--right .process-step__content,
  .process-step--left .process-step__content{grid-column:2;}
  .process-step--right .process-step__visual,
  .process-step--left .process-step__visual{grid-column:2;grid-row:auto;}
  .process-step__connector{grid-column:1;grid-row:1 / span 2;}
  [style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:1fr auto 1fr"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2){display:none;}
}

@media(max-width:1024px){ .section{padding:80px 0;} .section--compact{padding:56px 0;} }
@media(max-width:600px){
  html{font-size:15px;}
  .section{padding:64px 0;}
  .section--compact{padding:44px 0;}
  .container{padding:0 16px;}
  .hero{padding:48px 0 32px;}
  .h1{font-size:2rem!important;}
  .h2{font-size:1.5rem!important;}
  .hero__subtitle{font-size:1rem;}
  /* v1.7.44: header op mobiel compact zodat OfferteKlik-titel + Mijn account + Menu in 1 rij passen */
  .nav{padding:0 12px;height:56px;gap:8px;}
  .nav__logo{font-size:1.05rem;gap:8px;flex-shrink:1;min-width:0;}
  .nav__logo-icon{width:28px;height:28px;font-size:11px;flex-shrink:0;}
  .nav__right{gap:6px;flex-shrink:0;}
  .nav__right .btn{padding:6px 11px;font-size:.78rem;}
  .nav__menu-tab{padding:6px 9px;font-size:.78rem;}
  .nav__menu-tab svg{width:15px;height:15px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center;}
  .stats-bar{grid-template-columns:1fr 1fr;}
  .cta-banner__buttons{flex-direction:column;align-items:center;width:100%;}
  .cta-banner__buttons .btn{width:100%;max-width:340px;justify-content:center;}
  .pricing-card__price{font-size:2rem;}
  .browser-frame__body{min-height:auto;}
  .hero-desktop-mock{display:none;}
  .hero-mobile-mock{display:block!important;}
}
/* Heel smalle phones (<400px): logo-tekst inkorten zodat de drie elementen
   altijd in de header passen zonder overflow. We tonen dan alleen het
   OK-icoontje + verkleinde Account-knop + alleen het ≡ menu-icoon. */
@media(max-width:400px){
  .nav__logo{gap:6px;font-size:0;}             /* tekst van OfferteKlik verbergen */
  .nav__logo .nav__logo-icon{font-size:11px;}  /* icoon zelf zichtbaar houden */
  .nav__right .btn{padding:6px 10px;font-size:.74rem;}
  .nav__menu-tab{padding:6px 8px;font-size:0;gap:0;}
  .nav__menu-tab svg{width:16px;height:16px;}
}
@media(min-width:601px){
  .hero-mobile-mock{display:none!important;}
}

/* ═══════════════════════════════════════════════════════════
   NEDERLANDSE HUISSTIJL — Illustratie-iconen
   Gele/teal branding zoals VitamineBites-stijl
═══════════════════════════════════════════════════════════ */
:root{
  --ok-yellow:#fbbf24;
  --ok-yellow-lt:#fef3c7;
  --ok-teal:#0d9488;
  --ok-teal-lt:#ccfbf1;
  --ok-mint:#34d399;
}
.nl-illustration{
  display:inline-block;width:100%;max-width:320px;
  height:auto;aspect-ratio:1/1;position:relative;
  background:var(--ok-yellow-lt);
  border-radius:50%;padding:24px;
  overflow:hidden;
}
.nl-illustration svg{width:100%;height:100%;display:block;}
.nl-illustration--teal{background:var(--ok-teal-lt);}
.nl-illustration--soft{background:#f0f4ff;}

/* Avatar/poppetje icoon-set — inline in flow */
.nl-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--ok-yellow-lt);color:#0f172a;
  flex-shrink:0;
}
.nl-icon--teal{background:var(--ok-teal-lt);color:var(--ok-teal);}
.nl-icon--brand{background:rgba(37,99,235,.08);color:#2563eb;}
.nl-icon--mint{background:rgba(52,211,153,.15);color:#059669;}
.nl-icon svg{width:28px;height:28px;stroke-width:1.8;}
.nl-icon--lg{width:72px;height:72px;}
.nl-icon--lg svg{width:36px;height:36px;}

/* Characterface-style avatar card — gebruikt illustratie op hero */
.nl-char-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:28px 20px;border-radius:20px;
  background:#fff;border:1.5px solid #e2e8f0;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  text-align:center;
}
.nl-char-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,.08);border-color:var(--ok-yellow);}
.nl-char-card__avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--ok-yellow-lt);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.nl-char-card__avatar--teal{background:var(--ok-teal-lt);}
.nl-char-card__avatar--brand{background:#eff6ff;}
.nl-char-card__avatar svg{width:60%;height:60%;}
.nl-char-card__name{font-size:1.05rem;font-weight:700;color:#0f172a;}
.nl-char-card__role{font-size:.85rem;color:#64748b;}

/* Decoratieve achtergrond-stroken in hero (zoals op illustrations) */
.nl-hero-decor{
  position:absolute;pointer-events:none;
  border-radius:50%;opacity:.35;
  filter:blur(30px);
}
.nl-hero-decor--yellow{background:var(--ok-yellow);width:220px;height:220px;}
.nl-hero-decor--teal{background:var(--ok-mint);width:180px;height:180px;}

[data-theme="dark"] .nl-icon{background:rgba(251,191,36,.1);color:var(--ok-yellow);}
[data-theme="dark"] .nl-icon--teal{background:rgba(13,148,136,.14);color:var(--ok-mint);}
[data-theme="dark"] .nl-icon--brand{background:rgba(37,99,235,.14);color:#60a5fa;}
[data-theme="dark"] .nl-char-card{background:#0f172a;border-color:rgba(255,255,255,.08);}
[data-theme="dark"] .nl-char-card__name{color:#f1f5f9;}
[data-theme="dark"] .nl-char-card__avatar{background:rgba(251,191,36,.12);}
[data-theme="dark"] .nl-char-card__avatar--teal{background:rgba(13,148,136,.15);}
[data-theme="dark"] .nl-char-card__avatar--brand{background:rgba(37,99,235,.12);}
[data-theme="dark"] .nl-illustration{background:rgba(251,191,36,.08);}
[data-theme="dark"] .nl-illustration--teal{background:rgba(13,148,136,.12);}
[data-theme="dark"] .nl-illustration--soft{background:rgba(37,99,235,.08);}

/* ===== AUTO-CONTRAST-START ===== */
/* ═══════════════════════════════════════════════════════════
   AUTO-CONTRAST LOGICA — gedreven door ok-contrast.js
   Elk element krijgt data-contrast="light|dark|brand-dark|brand-light|mid"
   op basis van runtime luminance + saturation.
   ═══════════════════════════════════════════════════════════ */

/* ── LIGHT backgrounds (wit / zeer licht) — altijd donkere tekst ── */
[data-contrast="light"] {
  color: #0f172a;
}
[data-contrast="light"] h1,
[data-contrast="light"] h2,
[data-contrast="light"] h3,
[data-contrast="light"] h4,
[data-contrast="light"] h5,
[data-contrast="light"] h6,
[data-contrast="light"] .h1,
[data-contrast="light"] .h2,
[data-contrast="light"] .h3,
[data-contrast="light"] .h4 {
  color: #0b1220;
}
[data-contrast="light"] p,
[data-contrast="light"] li,
[data-contrast="light"] span,
[data-contrast="light"] td,
[data-contrast="light"] dd,
[data-contrast="light"] dt {
  color: inherit;
}

/* ── DARK backgrounds (zwart / zeer donkergrijs) — altijd lichte tekst ── */
[data-contrast="dark"] {
  color: #f1f5f9;
}
[data-contrast="dark"] h1,
[data-contrast="dark"] h2,
[data-contrast="dark"] h3,
[data-contrast="dark"] h4,
[data-contrast="dark"] h5,
[data-contrast="dark"] h6,
[data-contrast="dark"] .h1,
[data-contrast="dark"] .h2,
[data-contrast="dark"] .h3,
[data-contrast="dark"] .h4 {
  color: #ffffff;
}
[data-contrast="dark"] p,
[data-contrast="dark"] li,
[data-contrast="dark"] span,
[data-contrast="dark"] td {
  color: inherit;
}
[data-contrast="dark"] a:not(.btn) {
  color: #93c5fd;
}

/* ── BRAND_DARK backgrounds (verzadigd donker: blauw/paars/groen/rood) — altijd witte tekst ── */
[data-contrast="brand-dark"] {
  color: #ffffff;
}
[data-contrast="brand-dark"] h1,
[data-contrast="brand-dark"] h2,
[data-contrast="brand-dark"] h3,
[data-contrast="brand-dark"] h4,
[data-contrast="brand-dark"] h5,
[data-contrast="brand-dark"] h6,
[data-contrast="brand-dark"] .h1,
[data-contrast="brand-dark"] .h2,
[data-contrast="brand-dark"] .h3,
[data-contrast="brand-dark"] .h4,
[data-contrast="brand-dark"] p,
[data-contrast="brand-dark"] li,
[data-contrast="brand-dark"] span,
[data-contrast="brand-dark"] strong {
  color: #ffffff;
}
[data-contrast="brand-dark"] a:not(.btn) {
  color: #e0e7ff;
  text-decoration: underline;
}

/* ── BRAND_LIGHT backgrounds (pastels) — donkere tekst ── */
[data-contrast="brand-light"] {
  color: #0f172a;
}
[data-contrast="brand-light"] h1,
[data-contrast="brand-light"] h2,
[data-contrast="brand-light"] h3,
[data-contrast="brand-light"] h4,
[data-contrast="brand-light"] h5,
[data-contrast="brand-light"] h6 {
  color: #0b1220;
}

/* ── MID (middengrijs) — veilige donkere tekst ── */
[data-contrast="mid"] {
  color: #1f2937;
}

/* ═══════════════════════════════════════════════════════════
   DARK-MODUS OVERRIDES
   Wanneer <html data-theme="dark">, flip LIGHT → dark surface.
   DARK en BRAND_DARK blijven hetzelfde (al donker).
   BRAND_LIGHT wordt verdonkerd.
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] [data-contrast="light"] {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] [data-contrast="light"] h1,
[data-theme="dark"] [data-contrast="light"] h2,
[data-theme="dark"] [data-contrast="light"] h3,
[data-theme="dark"] [data-contrast="light"] h4,
[data-theme="dark"] [data-contrast="light"] h5,
[data-theme="dark"] [data-contrast="light"] h6 {
  color: #ffffff !important;
}
[data-theme="dark"] [data-contrast="light"] p,
[data-theme="dark"] [data-contrast="light"] li,
[data-theme="dark"] [data-contrast="light"] span,
[data-theme="dark"] [data-contrast="light"] td {
  color: inherit !important;
}

[data-theme="dark"] [data-contrast="mid"] {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] [data-contrast="brand-light"] {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] [data-contrast="brand-light"] h1,
[data-theme="dark"] [data-contrast="brand-light"] h2,
[data-theme="dark"] [data-contrast="brand-light"] h3 {
  color: #f1f5f9 !important;
}

/* DARK en BRAND_DARK blijven onveranderd in dark-modus */

/* ── Fallback body/html tekstkleuren in dark-modus ── */
[data-theme="dark"] body {
  background: #0a0f1a;
  color: #e2e8f0;
}
/* v1.3.2 — VUISTREGEL: dark-mode default voor headings = LICHT, maar
   :where() met specificity 0 zodat ELKE inline color wint. Headings ZONDER
   inline color → automatisch licht op dark page. Headings MET inline
   color (zoals binnen witte kaarten) → behouden hun eigen kleur. */
[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4){
  color: #f1f5f9;
}
/* Geen attribute-selector overrides voor inline colors meer — die brachten
   me steeds in problemen omdat dark-text-op-witte-card werd gemaakt licht
   en daarna onleesbaar. Vuistregel: laat kaart-context bepalen. */

/* ── Borders: lichtgrijze randen → donkere rand in dark mode ── */
[data-theme="dark"] [style*="border:1px solid #e"],
[data-theme="dark"] [style*="border: 1px solid #e"],
[data-theme="dark"] [style*="border:1px solid #f"],
[data-theme="dark"] [style*="border: 1px solid #f"],
[data-theme="dark"] [style*="border:2px solid #e"],
[data-theme="dark"] [style*="border: 2px solid #e"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ════════════════════════════════════════════════════════════
   v1.3.4 — feature-row mockup tekst leesbaarheid
   Centraal gefixt: ALLE mockup-tekst in .feature-row__img is
   altijd leesbaar — zwart in light-mode, wit in dark-mode.
   Brand-blauwe knoppen, gradient-iconen en muted-spans (#6b7280)
   behouden hun eigen kleur via inline styles.
   ════════════════════════════════════════════════════════════ */
.feature-row__img {
  color: #1c1c1e;
}
[data-theme="dark"] .feature-row__img {
  color: #e7eaf0;
}
/* Defensief: dwing inheriting children OOK naar dezelfde kleur, behalve
   elementen die expliciet eigen kleur kregen (svg, btn, brand-tekst). */
.feature-row__img > div,
.feature-row__img > div > div {
  color: #1c1c1e;
}
[data-theme="dark"] .feature-row__img > div,
[data-theme="dark"] .feature-row__img > div > div {
  color: #e7eaf0;
}

/* ════════════════════════════════════════════════════════════
   v1.3.3 — VUISTREGEL DEFINITIEF
   Dark mode → ALLE kaarten worden donker (consistent design).
   Witte achtergrond detecteren via [style*="background:#fff"] →
   converteren naar dark bg + light text + light children-text.
   Brand-kleuren (blauw/groen/paars highlights) blijven bestaan
   maar krijgen lichtere varianten voor leesbaarheid.
   ════════════════════════════════════════════════════════════ */
/* Catchall voor ALLE lichte hex-backgrounds (#fa*, #fb*, #fc*, #fd*, #fe*, #ff*).
   Beter dan losse hex-varianten enumereren — pakt #fafafa, #fafafd, #f1f5f9, etc. */
[data-theme="dark"] [style*="background:#fa"],
[data-theme="dark"] [style*="background: #fa"],
[data-theme="dark"] [style*="background:#fb"],
[data-theme="dark"] [style*="background: #fb"],
[data-theme="dark"] [style*="background:#fc"],
[data-theme="dark"] [style*="background: #fc"],
[data-theme="dark"] [style*="background:#fd"],
[data-theme="dark"] [style*="background: #fd"],
[data-theme="dark"] [style*="background:#fe"],
[data-theme="dark"] [style*="background: #fe"],
[data-theme="dark"] [style*="background:#ff"],
[data-theme="dark"] [style*="background: #ff"],
[data-theme="dark"] [style*="background:#f5"],
[data-theme="dark"] [style*="background: #f5"],
[data-theme="dark"] [style*="background:#f8"],
[data-theme="dark"] [style*="background: #f8"],
[data-theme="dark"] [style*="background:#f0"],
[data-theme="dark"] [style*="background: #f0"],
[data-theme="dark"] [style*="background:#f1"],
[data-theme="dark"] [style*="background: #f1"]{
  background: #14171f !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e7eaf0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
/* Tr-rows met light bg (alternating) — dunne border ipv heavy shadow */
[data-theme="dark"] tr[style*="background:#fa"],
[data-theme="dark"] tr[style*="background: #fa"],
[data-theme="dark"] tr[style*="background:#f5"],
[data-theme="dark"] tr[style*="background:#f8"],
[data-theme="dark"] tr[style*="background:#f1"]{
  background: rgba(255,255,255,.03) !important;
  box-shadow: none !important;
}
/* Alle children van die kaarten → ALTIJD lichte tekst (overrules inline dark color).
   Catchall voor alle lichte bg-varianten. Excludes: svg's en buttons (eigen kleur). */
[data-theme="dark"] [style*="background:#fa"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#fb"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#fc"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#fd"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#fe"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#ff"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#f5"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#f8"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#f0"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon),
[data-theme="dark"] [style*="background:#f1"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white):not(.nav__logo-icon){
  color: #e7eaf0 !important;
}
/* Brand-kleuren in donkere kaarten → lichtere varianten voor contrast.
   Geldig voor ALLE lichte bg-varianten (niet alleen #fff). */
/* v1.3.2: lichte info/badge-boxen met inline kleur-bg moeten in dark mode
   een donkere variant krijgen, anders blijven blauwe/groene/rode teksten
   onleesbaar op lichte bg. Top 4 voorkomende inline-kleuren expliciet. */
[data-theme="dark"] [style*="background:#eff6ff"]{
  background: rgba(96,165,250,.15) !important;
}
[data-theme="dark"] [style*="background:#dbeafe"]{
  background: rgba(96,165,250,.18) !important;
}
[data-theme="dark"] [style*="background:#fef2f2"]{
  background: rgba(248,113,113,.15) !important;
}
[data-theme="dark"] [style*="background:#f0fdf4"]{
  background: rgba(52,211,153,.15) !important;
}
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background:#fffbeb"]{
  background: rgba(251,191,36,.15) !important;
}
[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background:#e0e7ff"]{
  background: rgba(148,163,184,.15) !important;
}
/* Children van deze nu-donkere boxes ook lichte tekst geven */
[data-theme="dark"] [style*="background:#eff6ff"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#dbeafe"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#fef2f2"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#f0fdf4"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#fef3c7"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#fffbeb"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#e5e7eb"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white),
[data-theme="dark"] [style*="background:#e0e7ff"] *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect):not(.btn):not(.btn--primary):not(.btn--white):not(.btn--ghost-white){
  color: #e7eaf0 !important;
}
/* En als de inline color een brandkleur is op zo'n box, lichter forceren */
[data-theme="dark"] [style*="background:#eff6ff"][style*="color:#2563eb"],
[data-theme="dark"] [style*="background:#eff6ff"] [style*="color:#2563eb"]{
  color: #93c5fd !important;
}
[data-theme="dark"] [style*="background:#fef2f2"][style*="color:#dc2626"],
[data-theme="dark"] [style*="background:#fef2f2"] [style*="color:#dc2626"]{
  color: #fca5a5 !important;
}
[data-theme="dark"] [style*="background:#f0fdf4"][style*="color:#16a34a"],
[data-theme="dark"] [style*="background:#f0fdf4"] [style*="color:#16a34a"]{
  color: #86efac !important;
}

[data-theme="dark"] [style*="color:#2563eb"]{ color: #60a5fa !important; }
[data-theme="dark"] [style*="color:#16a34a"]{ color: #34d399 !important; }
[data-theme="dark"] [style*="color:#7c3aed"]{ color: #a78bfa !important; }
[data-theme="dark"] [style*="color:#d97706"]{ color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#dc2626"]{ color: #f87171 !important; }
[data-theme="dark"] [style*="color:#0f172a"]:not(.btn--white){ color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#1c1c1e"]:not(.btn--white){ color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#111"]{ color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#0f172a !important"]{ color: #f1f5f9 !important; }
/* Muted/grijze tekst → leesbaar lichtgrijs */
[data-theme="dark"] [style*="color:#6e6e73"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color:#6b7280"]{ color: #94a3b8 !important; }

/* Contact-pagina specifieke .ct-* classes (zie templates/contact.html) */
[data-theme="dark"] .ct-trust,
[data-theme="dark"] .ct-info,
[data-theme="dark"] .ct-sla,
[data-theme="dark"] .ct-sla__row{
  background: #14171f !important;
  border-color: #232838 !important;
}
[data-theme="dark"] .ct-trust__item,
[data-theme="dark"] .ct-info__main,
[data-theme="dark"] .ct-info__title,
[data-theme="dark"] .ct-sla__name{ color: #e7eaf0 !important; }
[data-theme="dark"] .ct-trust__item strong{ color: #f1f5f9 !important; }
[data-theme="dark"] .ct-info__sub,
[data-theme="dark"] .ct-sla__chan,
[data-theme="dark"] .ct-help,
[data-theme="dark"] .ct-submit-meta{ color: #94a3b8 !important; }
[data-theme="dark"] .ct-input,
[data-theme="dark"] .ct-select,
[data-theme="dark"] .ct-textarea{
  background: #1c1c1e !important; color: #e7eaf0 !important;
  border-color: #2d3343 !important;
}
[data-theme="dark"] .ct-input::placeholder,
[data-theme="dark"] .ct-textarea::placeholder{ color: #64748b !important; }
[data-theme="dark"] .ct-label{ color: #f1f5f9 !important; }

/* Landing-page generator .lp-* classes (zie OfferteKlik-SEO/landing_template.py) */
[data-theme="dark"] .lp-section--gray{ background: #0a0f1a !important; }
[data-theme="dark"] .lp-h2{ color: #f1f5f9 !important; }
[data-theme="dark"] .lp-sub{ color: #94a3b8 !important; }
[data-theme="dark"] .lp-usp__item,
[data-theme="dark"] .lp-feat__card,
[data-theme="dark"] .lp-val__card,
[data-theme="dark"] .lp-steps__card,
[data-theme="dark"] .lp-faq details,
[data-theme="dark"] .lp-cmp-wrap{
  background: #14171f !important;
  border-color: #232838 !important;
}
[data-theme="dark"] .lp-usp__title,
[data-theme="dark"] .lp-feat__title,
[data-theme="dark"] .lp-val__title,
[data-theme="dark"] .lp-steps__title{ color: #f1f5f9 !important; }
[data-theme="dark"] .lp-usp__desc,
[data-theme="dark"] .lp-feat__desc,
[data-theme="dark"] .lp-val__desc,
[data-theme="dark"] .lp-steps__desc,
[data-theme="dark"] .lp-faq__body{ color: #94a3b8 !important; }
[data-theme="dark"] .lp-feat__ic{ background: rgba(96,165,250,.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .lp-faq summary{ color: #f1f5f9 !important; }
[data-theme="dark"] .lp-cmp{ background: transparent !important; }
[data-theme="dark"] .lp-cmp thead th{
  background: #1a1e29 !important; color: #f1f5f9 !important;
  border-bottom-color: #232838 !important;
}
[data-theme="dark"] .lp-cmp thead th.lp-cmp__us{
  background: rgba(96,165,250,.15) !important; color: #60a5fa !important;
}
[data-theme="dark"] .lp-cmp tbody td{
  color: #cbd5e1 !important;
  border-bottom-color: #232838 !important;
}
[data-theme="dark"] .lp-cmp tbody td:first-child{ color: #f1f5f9 !important; }
[data-theme="dark"] .lp-cmp tbody td.lp-cmp__us{
  background: rgba(96,165,250,.08) !important; color: #f1f5f9 !important;
}

/* Demo-page kaartjes ("30 minuten geen verkooppraatje" etc.) — gebruiken
   inline background:#fff. Bovenste regel pakt 'm al, maar zorg ook dat
   de bold titel en ondertitel goede contrast krijgen. */
[data-theme="dark"] [style*="background:#fff"] [style*="font-weight:700"],
[data-theme="dark"] [style*="background:#fff"] strong,
[data-theme="dark"] [style*="background:#fff"] b{
  color: #f1f5f9 !important;
}

/* Hero "mockup" kaarten in landingspagina's (offerte-card preview etc.) */
[data-theme="dark"] .uh-mock,
[data-theme="dark"] .demo-mock,
[data-theme="dark"] .preview-card{
  background: #14171f !important;
  border-color: #232838 !important;
  color: #e7eaf0 !important;
}
[data-theme="dark"] .uh-mock *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect),
[data-theme="dark"] .demo-mock *:not(svg):not(path):not(line):not(circle):not(polygon):not(polyline):not(rect){
  color: inherit !important;
}

/* ════════════════════════════════════════════════════════════
   VUISTREGEL — UNIVERSEEL
   Elke sectie met een GRADIENT background = wit tekst.
   Geldt voor light + dark mode, alle pagina's, elke heading.
   "On dark/gradient surface, text is white. End of story."
   ════════════════════════════════════════════════════════════ */
[style*="background:linear-gradient"]:not(.btn):not(.btn--primary),
[style*="background: linear-gradient"]:not(.btn):not(.btn--primary),
.cta-banner, .uh-cta, .lp-cta,
.section--brand, .section--dark{
  color: #ffffff !important;
}
[style*="background:linear-gradient"] h1,
[style*="background:linear-gradient"] h2,
[style*="background:linear-gradient"] h3,
[style*="background:linear-gradient"] h4,
[style*="background:linear-gradient"] h5,
[style*="background:linear-gradient"] h6,
[style*="background: linear-gradient"] h1,
[style*="background: linear-gradient"] h2,
[style*="background: linear-gradient"] h3,
.cta-banner h1, .cta-banner h2, .cta-banner h3,
.cta-banner .h1, .cta-banner .h2, .cta-banner .h3,
.cta-banner p, .cta-banner .subtitle,
.uh-cta h1, .uh-cta h2, .uh-cta h3, .uh-cta p,
.lp-cta h1, .lp-cta h2, .lp-cta h3, .lp-cta p,
.section--dark h1, .section--dark h2, .section--dark h3,
.section--brand h1, .section--brand h2, .section--brand h3{
  color: #ffffff !important;
}
/* Buttons binnen gradient-secties bewaren hun eigen kleur */
.lp-cta .btn--white, .uh-cta .btn--white, .cta-banner .btn--white{
  color: #2563eb !important;
}
.lp-cta .btn--ghost-white, .uh-cta .btn--ghost-white,
.cta-banner .btn--ghost-white, .cta-banner .btn--outline{
  color: #ffffff !important;
}

/* v1.3.2: dark-mode fix voor onderkant-CTA-banners op alle marketingpagina's.
   Voorheen kreeg .btn--white in dark mode bg #1e293b + tekst blauw — blauw op
   donkerblauw is onleesbaar. Nu witte knop met blauwe tekst behouden zoals
   in light mode, en de ghost-white tekst expliciet wit forceren. */
[data-theme="dark"] .cta-banner .btn--white,
[data-theme="dark"] .lp-cta .btn--white,
[data-theme="dark"] .uh-cta .btn--white{
  background: #ffffff !important;
  color: #2563eb !important;
  border-color: #ffffff !important;
}
[data-theme="dark"] .cta-banner .btn--white:hover,
[data-theme="dark"] .lp-cta .btn--white:hover,
[data-theme="dark"] .uh-cta .btn--white:hover{
  background: #f1f5f9 !important;
}
[data-theme="dark"] .cta-banner .btn--ghost-white,
[data-theme="dark"] .cta-banner .btn--outline,
[data-theme="dark"] .lp-cta .btn--ghost-white,
[data-theme="dark"] .uh-cta .btn--ghost-white{
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
}
[data-theme="dark"] .cta-banner .btn--ghost-white:hover,
[data-theme="dark"] .cta-banner .btn--outline:hover,
[data-theme="dark"] .lp-cta .btn--ghost-white:hover,
[data-theme="dark"] .uh-cta .btn--ghost-white:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* ── Alle h1/h2/h3 op pagina-niveau in dark mode → ALTIJD licht
   (zelfs als inline style="color:#0f172a" probeert te overrulen) ── */
[data-theme="dark"] h1[style*="color"],
[data-theme="dark"] h2[style*="color"],
[data-theme="dark"] h3[style*="color"],
[data-theme="dark"] h4[style*="color"]{
  color: #f1f5f9 !important;
}
/* Hero-titel specifiek: vaak inline-styled — nuke voor dark mode */
[data-theme="dark"] .lp-hero__title,
[data-theme="dark"] .uh-hero__title,
[data-theme="dark"] .hero h1,
[data-theme="dark"] .hero .h1{
  color: #f1f5f9 !important;
}
[data-theme="dark"] .lp-hero__sub,
[data-theme="dark"] .uh-hero__sub,
[data-theme="dark"] .hero p,
[data-theme="dark"] .hero__subtitle{
  color: #94a3b8 !important;
}

/* ===== AUTO-CONTRAST-END ===== */