/* ====== Basiskleuren (Style Guide) ====== */
:root{
  --blue:#1E3A8A;
  --green:#22C55E;
  --ink:#111827;
  --ink-weak:#374151;
  --bg:#FFFFFF;
  --bg-soft:#F3F4F6;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{
  font-family:Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.2; margin:0 0 .5rem; color:var(--ink);
}

img{display:block; max-width:100%; height:auto}
a{color:var(--blue); text-decoration:none}
a:hover{opacity:.9}

/* Accessibility helpers */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; box-shadow:var(--shadow); z-index:1000
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Topbar */
.topbar{ position:sticky; top:0; z-index:60; background:linear-gradient(90deg, rgba(30,58,138,.9), rgba(30,58,138,.8)); color:#fff }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 0 }
.topbar-text{ display:flex; align-items:center; gap:.5rem; font-weight:600 }
.topbar-close{ background:transparent; color:#fff; border:0; font-size:1.2rem; cursor:pointer; opacity:.9 }
.topbar-close:hover{ opacity:1 }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.8); border-bottom:1px solid rgba(0,0,0,.05)
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem }
.brand-text{ font-weight:700; color:var(--ink) }

.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px; padding:.5rem; border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#fff; cursor:pointer
}
.nav-toggle-bar{ width:20px; height:2px; background:var(--ink) }

.nav-list{ display:none; list-style:none; padding:0; margin:0 }
.nav-link{ padding:.5rem .75rem; display:inline-block }

@media (min-width: 880px){
  .nav-toggle{ display:none }
  .nav-list{ display:flex; align-items:center; gap:.25rem }
}

/* Layout */
.container{ width:min(1200px, 92%); margin-inline:auto }
.section{ padding:72px 0 }
.section-alt{ background:var(--bg-soft) }

.section-title{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  color:var(--blue);
  margin-bottom: .75rem;
}
.section-subtitle{ color:var(--ink-weak); margin:0 0 1.25rem }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.1rem; border-radius:14px; border:1px solid transparent; cursor:pointer;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, opacity .2s;
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow) }
.btn-secondary{ background:#fff; color:var(--blue); border-color:rgba(0,0,0,.08) }
.btn-link{ background:transparent; color:var(--blue); padding:.8rem .5rem }
.btn-full{ width:100% }

/* Floating CTA (mobile) */
.floating-cta{
  position:sticky; bottom:0; z-index:49; display:none; padding: .5rem; background: linear-gradient(180deg, transparent, rgba(255,255,255,.95));
  backdrop-filter: blur(6px);
}
@media (max-width: 720px){ .floating-cta{ display:block } }

/* Hero */
.hero{ padding-top: 72px }
.hero-grid{ display:grid; gap:32px; align-items:center; grid-template-columns: 1fr }
.eyebrow{ color:var(--ink-weak); display:flex; align-items:center; gap:.4rem }
.hero-title{ font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); color:var(--blue) }
.hero-subtitle{ color:var(--ink-weak); margin:.5rem 0 1rem }
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin: 1rem 0 }
.hero-bullets{ margin: 1rem 0 0; padding-left: 0; list-style: none; color:var(--ink-weak) }
.hero-bullets li{ display:flex; gap:.5rem; align-items:center }

.hero-figure{ position:relative; border-radius:22px; overflow:hidden; box-shadow: var(--shadow) }
.hero-img{ width:100%; height:auto; display:block }
.parallax[data-parallax-speed]{ transform: translateY(0); transition: transform .6s cubic-bezier(.2,.8,.2,1) }

@media (min-width: 980px){ .hero-grid{ grid-template-columns: 1.1fr .9fr } }

/* Stappen layout (1 foto + 3 kaarten) */
.steps-layout{
  display:grid; gap:18px; grid-template-columns:1fr;
}
.steps-figure img{ width:100%; border-radius:16px; box-shadow:var(--shadow) }
.steps-list{ display:grid; gap:18px; grid-template-columns:1fr }

.step-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:22px; box-shadow:var(--shadow)
}
.step-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--blue);
  background:linear-gradient(180deg, rgba(30,58,138,.08), rgba(30,58,138,.02)); font-size:22px; margin-bottom:.35rem
}

@media (min-width: 980px){
  .steps-layout{ grid-template-columns: .95fr 1.05fr }
}

/* Demo */
.clients-grid{ display:grid; gap:18px; grid-template-columns:1fr }
.client-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:18px; box-shadow:var(--shadow)
}
.client-header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px }
.client-avatar{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--blue);
  background:linear-gradient(180deg, rgba(30,58,138,.08), rgba(30,58,138,.02)); font-size:22px;
}
.client-name{ margin:0 }
.client-slug{ margin:.1rem 0 0; color:#6B7280; font-size:.95rem }
.client-desc{ color:var(--ink-weak) }
.client-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
.badge{ display:inline-flex; gap:.4rem; align-items:center; padding:.35rem .6rem; border-radius:999px; font-size:.86rem; border:1px solid rgba(0,0,0,.08) }
.badge-checking{ background:#fff; color:#6B7280 }
.badge-live{ background:rgba(34,197,94,.1); color:#166534; border-color:rgba(34,197,94,.25) }
.badge-off{ background:rgba(239,68,68,.1); color:#7f1d1d; border-color:rgba(239,68,68,.25) }

/* Voordelen */
.benefits-grid{ display:grid; gap:18px; grid-template-columns:1fr }
.benefit{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr; gap:0
}
.benefit-img{ width:100%; height:auto; display:block; object-fit:cover; max-height:260px }
.benefit-body{ padding:18px }
.benefit-body > i{ font-size:26px; color:var(--blue) }
.benefit-points{ list-style:none; padding:0; margin:.6rem 0 0 }
.benefit-points li{ display:flex; align-items:center; gap:.45rem }
@media (min-width: 860px){ .benefits-grid{ grid-template-columns:repeat(3, 1fr) } }

/* Pricing */
.pricing-grid{ display:grid; gap:18px; grid-template-columns:1fr }
.price-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px; padding:18px; box-shadow:var(--shadow); position:relative
}
.price-header{ text-align:center; margin-bottom:.5rem }
.price-name{ margin:0 0 .35rem }
.price-tag{ font-size:2rem; font-weight:700; color:var(--blue); margin:.15rem 0 }
.price-tag .per{ font-size:1rem; color:#6B7280 }
.price-setup{ color:#6B7280; margin:0 0 .6rem }
.price-list{ list-style:none; padding:0; margin:0 0 1rem }
.price-list li{ display:flex; gap:.5rem; align-items:flex-start; margin:.35rem 0 }
.price-list em{ color:#6B7280; font-style:normal }
.price-card.featured{ border-color:rgba(34,197,94,.35); box-shadow:0 16px 40px rgba(34,197,94,.15) }
.ribbon{
  position:absolute; top:12px; right:-8px; background:var(--green); color:#fff; padding:.3rem .6rem; border-radius:999px; font-size:.85rem; box-shadow:var(--shadow)
}
@media (min-width: 980px){ .pricing-grid{ grid-template-columns:repeat(3, 1fr) } }

/* Accordion */
.accordion details{
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding: .8rem 1rem; background:#fff; margin:.6rem 0; box-shadow:var(--shadow)
}
.accordion summary{
  display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none; font-weight:600; color:var(--ink)
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion .accordion-body{ color:var(--ink-weak); padding:.6rem 0 0 }

/* CTA band */
.cta{
  background: linear-gradient(180deg, rgba(30,58,138,.06), rgba(30,58,138,.12));
  padding: 80px 0;
}
.cta-inner{
  text-align:center; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:22px; padding:28px;
  box-shadow: var(--shadow)
}
.cta-title{
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  color:var(--blue); margin:0 0 .4rem
}
.cta-subtitle{ color:var(--ink-weak); margin:0 0 1.1rem }
.cta-form{
  display:grid; gap:10px; grid-template-columns:1fr; width:min(640px, 100%); margin: 0 auto 10px
}
.cta-form input{
  padding: .9rem 1rem; border-radius:14px; border:1px solid #E5E7EB; outline:none; font: inherit;
}
.cta-note{ color:#6B7280; font-size:.95rem }

/* Footer */
.site-footer{ padding:32px 0; border-top:1px solid rgba(0,0,0,.06); background:#fff }
.footer-inner{ display:grid; gap:14px; grid-template-columns:1fr; align-items:center; text-align:center }
.footer-brand{ display:flex; gap:.6rem; align-items:center; justify-content:center; font-weight:700 }
.footer-nav{ display:flex; gap:12px; list-style:none; padding:0; margin:6px 0 }
.legal{ color:#6B7280; margin:0 }
@media (min-width: 860px){
  .footer-inner{ grid-template-columns: auto 1fr auto; text-align:left }
  .footer-brand{ justify-content:flex-start }
  .footer-nav{ justify-content:center }
}

/* Apple-smooth micro-interacties */
.btn, .step-card, .price-card, .cta-inner, .client-card, .benefit, .accordion details, .hero-img{
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, background .5s
}
.step-card:hover, .price-card:hover, .client-card:hover, .benefit:hover{ transform: translateY(-2px) }
.btn-primary:hover{ box-shadow:0 12px 32px rgba(34,197,94,.25) }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(12px); will-change: transform, opacity }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1) }
.delay-1{ transition-delay:.12s }
.delay-2{ transition-delay:.24s }

/* Nav responsive dropdown */
.nav.open #nav-menu{
  display:block; position:absolute; right:1rem; top:104px; background:#fff;
  border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:var(--shadow); padding:.35rem
}
.nav-list li{ text-align:right }

/* Focus states */
:focus-visible{ outline:3px solid rgba(34,197,94,.5); outline-offset:2px }

header .logo,
footer .logo {
  height: 50px;   /* pas grootte aan naar wens */
  width: auto;
  display: block;
  margin: 0 auto; /* centreert het logo */
}
/* WhatsApp button styling */
.btn-whatsapp{
  background:#25D366; color:#0B3B2E; border:1px solid rgba(0,0,0,.06);
}
.btn-whatsapp:hover{ box-shadow:0 12px 32px rgba(37,211,102,.25); }

/* Minor text */
.cta-note.small{ font-size:.92rem; }

/* Modal (exit intent) */
.modal{ position:fixed; inset:0; display:none; z-index:80; }
.modal.is-open{ display:block; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}
.modal-card{
  position:relative; margin:10vh auto 0; width:min(560px, 92%); background:#fff; border-radius:16px; padding:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.25); border:1px solid rgba(0,0,0,.06);
}
.modal-close{
  position:absolute; top:10px; right:10px; border:0; background:transparent; font-size:1.25rem; cursor:pointer;
}
.modal-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:10px; }

/* Sub-labels in price-lists */
.price-list .list-label{
  font-weight:600; color:#111827; margin:.2rem 0 .3rem;
  display:flex; align-items:center; gap:.4rem;
}
.price-list .list-label::before{
  content:""; width:8px; height:8px; border-radius:999px; background:rgba(30,58,138,.2);
  display:inline-block;
}

/* Zachte badge achter ‘inbegrepen’ */
.badge-soft{
  margin-left:.4rem; padding:.1rem .4rem; border-radius:999px; font-size:.78rem;
  background:rgba(34,197,94,.12); color:#166534; border:1px solid rgba(34,197,94,.22);
}

/* Add-ons box */
.addons.note{
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px 14px; background:#fff; box-shadow:var(--shadow);
}
.footnote-title{ font-weight:600; margin:0 0 .3rem; color:var(--ink) }
.footnote-list{ margin:0; padding-left:1rem; color:var(--ink-weak) }