/* ---------- Het lettertype, vanaf je eigen site ----------
   Plus Jakarta Sans stond hiervoor bij Google. Dat betekende dat de browser van
   elke bezoeker een verzoek naar een server van Google stuurde, met zijn
   IP-adres erbij, nog voordat de cookiemelding in beeld was. Daar had hij dus
   niets over te zeggen, en jouw privacyverklaring belooft dat wel.

   Nu staan de bestanden in assets/fonts en komt er niets meer van buiten je
   eigen site. Het scheelt ook een verbinding, dus je pagina is net iets sneller.

   Het zijn er maar twee, en dat klopt: dit is een variabel lettertype, dus alle
   diktes van 400 tot 800 zitten in hetzelfde bestand. Vandaar "font-weight: 400
   800" hieronder. Maak er geen vier per stuk van, want dan haalt de browser
   precies hetzelfde bestand vier keer op.

   font-display: swap betekent: laat de tekst meteen zien in een gewoon
   lettertype en wissel zodra dit binnen is. Anders staart iemand een tel naar
   een lege pagina.

   Het lettertype is van Tokotype en staat onder de SIL Open Font License, dus
   dit mag gewoon. De licentie staat in assets/fonts/LICENSE.txt. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tekst op het groen ----------
   Wit op #35d509 heeft een contrast van 1,97, terwijl 4,5 de norm is. Dat leest
   slecht, zeker buiten in de zon of als je wat minder scherp ziet. Het groen zelf
   blijft precies zoals het was; alleen de tekst erop is donkerblauw geworden en
   daarmee gaat het contrast naar ruim 9.

   Alex heeft er bewust voor gekozen om de grote groene KNOPPEN wel wit te laten.
   Dat is zijn keuze, dus verander .btn-green niet zonder overleg. */

:root {
  --blue: #0f5fce;
  --blue-deep: #0a46a0;
  --blue-soft: #e8f1fd;
  --navy: #071c3d;
  --ink: #14213b;
  --muted: #56688a;
  --green: #35d509;
  --green-bright: #35d509;
  --green-deep: #2aa707;
  --bg: #f7fafe;
  --card: #ffffff;
  --line: #e3ebf6;
  --shadow: 0 10px 30px rgba(15, 95, 206, 0.08);
  --shadow-lg: 0 24px 60px rgba(7, 28, 61, 0.14);
  --radius: 22px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}

.lead { font-size: 1.18rem; color: var(--muted); }

.eyebrow-lg {
  font-size: 1.1rem;
  padding: 12px 26px;
  background: var(--green);
  color: var(--navy);
  letter-spacing: 0.08em;
  box-shadow: 0 8px 22px rgba(53, 213, 9, 0.3);
}

.card-accent {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green-bright));
  margin-bottom: 18px;
}

.ghost-num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--blue-soft);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.card-kicker {
  display: block;
  color: var(--blue);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.mark-green { color: var(--green); }
.mark-blue { color: var(--blue); }

.hl {
  background: linear-gradient(transparent 62%, rgba(53, 213, 9, 0.28) 62%);
  border-radius: 4px;
  padding: 0 2px;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15, 95, 206, 0.32);
}
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 95, 206, 0.38); }
.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-ghost:hover { background: var(--blue-soft); transform: translateY(-2px); }
.btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 22px rgba(47, 190, 8, 0.3);
}
.btn-green:hover { background: var(--green-deep); transform: translateY(-2px); }
.btn-white {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 8px 22px rgba(7, 28, 61, 0.25);
}
.btn-white:hover { transform: translateY(-2px); }
.btn-sm { padding: 11px 22px; font-size: 0.92rem; }

/* Anker-links laten landen onder de vaste header (76px) */
html { scroll-padding-top: 92px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}
.logo {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blue);
  line-height: 1;
}
.logo span { color: var(--green-bright); }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: var(--blue-soft); color: var(--blue); }
.main-nav a.active { color: var(--blue); background: var(--blue-soft); }

/* Diensten-uitklapmenu */
.nav-item.has-sub { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.nav-sub::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub { display: flex; }
.nav-sub a { white-space: nowrap; border-radius: 8px; }

.nav-cta { white-space: nowrap; }
.cart-link { margin-left: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 0.2s ease;
  content: "";
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  background:
    radial-gradient(700px 400px at 85% -10%, rgba(15, 95, 206, 0.12), transparent 65%),
    radial-gradient(500px 350px at -10% 110%, rgba(53, 213, 9, 0.1), transparent 60%),
    var(--bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin: 0 0 22px; }
.hero-titel { font-size: clamp(2.4rem, 5.2vw, 4rem); margin: 0 0 22px; }
.hero .lead { margin-bottom: 14px; }

/* Subtitel letter voor letter laten binnenfaden */
html.js-typ #hero-sub { opacity: 0; }
.typ-w { display: inline-block; white-space: nowrap; }
.typ-c { opacity: 0; animation: typFade 0.5s ease forwards; }
/* highlight per letter: de groene streep bouwt letter voor letter mee op */
#hero-sub .hl.gesplitst { background: none; padding: 0; }
.typ-hl { background: linear-gradient(transparent 62%, rgba(53, 213, 9, 0.28) 62%); }
@keyframes typFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .typ-c { opacity: 1; animation: none; }
}

.hero-points { list-style: none; margin: 26px 0 32px; display: grid; gap: 12px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.hero-points li::before {
  content: "✓";
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(53, 213, 9, 0.16);
  color: var(--green);
  font-weight: 800;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.bewijsregel {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--muted);
}
.bewijsregel::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(53, 213, 9, 0.16);
  color: var(--green-deep);
  font-weight: 800;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 8px;
}
.bewijsregel strong { color: var(--ink); }
.hero-tweede .hero-points { margin-bottom: 12px; }
.hero-tweede .bewijsregel { margin-top: 0; margin-bottom: 28px; }

/* Vinkjes één voor één laten oplichten in het tweede hero-blok */
.hero-tweede .hero-points.reveal,
.hero-tweede .bewijsregel.reveal { opacity: 1; transform: none; }
.hero-tweede .hero-points li::before,
.hero-tweede .bewijsregel::before { opacity: 0; transform: scale(0.3); }
.hero-tweede .hero-points.reveal.visible li::before,
.hero-tweede .bewijsregel.reveal.visible::before { animation: vinkPop 0.5s ease forwards; }
.hero-tweede .hero-points.reveal.visible li:nth-child(1)::before { animation-delay: 0.15s; }
.hero-tweede .hero-points.reveal.visible li:nth-child(2)::before { animation-delay: 0.95s; }
.hero-tweede .hero-points.reveal.visible li:nth-child(3)::before { animation-delay: 1.75s; }
.hero-tweede .bewijsregel.reveal.visible::before { animation-delay: 2.55s; }
@keyframes vinkPop {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tweede .hero-points li::before,
  .hero-tweede .bewijsregel::before { opacity: 1; transform: none; animation: none; }
}

.hero-photo { position: relative; }
.hero-photo .photo-frame {
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  border: 6px solid #fff;
}
.hero-photo img { width: 100%; height: 560px; object-fit: cover; object-position: 50% 72%; }

.badge-float {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.badge-float .big { font-size: 1.25rem; color: var(--blue); }
.badge-followers { top: 26px; left: -28px; animation: floaty 5s ease-in-out infinite; }
.badge-clients { bottom: 118px; left: -28px; max-width: 250px; font-size: 0.9rem; animation: floaty 5.5s ease-in-out 0.5s infinite; }
.badge-rating { bottom: 30px; right: -18px; display: block; animation: floaty 6s ease-in-out 1s infinite; }

.stem-sterren { display: flex; gap: 2px; }
.stem-sterren button {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #d7dfeb;
  cursor: pointer;
  padding: 0 1px;
  line-height: 1;
  transition: transform 0.12s ease, color 0.12s ease;
}
.stem-sterren button.vol { color: #f5a623; }
.stem-sterren button:hover { transform: scale(1.2); }
.stem-info { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-top: 4px; }
.stem-dank { color: var(--green); font-weight: 700; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- Secties ---------- */
.section { padding: 72px 0; }
.section-alt { background: #fff; }
.section-navy {
  background:
    radial-gradient(700px 420px at 90% 0%, rgba(15, 95, 206, 0.45), transparent 60%),
    var(--navy);
  color: #fff;
}
.section-navy h2 { color: #fff; }
.section-navy .lead { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 720px; margin-bottom: 38px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Kaarten ---------- */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Feature-kaarten met icoon (dienstpagina's) */
.feature-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(7, 28, 61, 0.12); }
.feature-icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 16px;
}
.feature-icoon svg { width: 25px; height: 25px; }
.meer-weten { display: inline-flex; align-items: center; font-weight: 700; color: var(--blue); border: 2px solid var(--blue); border-radius: 999px; padding: 9px 20px; font-size: 0.92rem; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.meer-weten:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }

/* Footer-contact iconen (in kleur) */
.contact-icoon { width: 17px; height: 17px; margin-right: 9px; vertical-align: -0.2em; flex: none; }
.site-footer a[href*="linkedin.com"] .contact-icoon { color: var(--blue); }
.site-footer a[href^="tel:"] .contact-icoon,
.site-footer a[href^="mailto:"] .contact-icoon,
.site-footer a[href*="wa.me"] .contact-icoon { color: var(--green); }

/* Banner-tip-box op de dienstpagina's */
.banner-vak { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; background: var(--blue-soft); border-radius: var(--radius); padding: 30px 34px; }
.banner-vak > div { flex: 1; min-width: 240px; }
.banner-vak h3 { margin: 4px 0 8px; }
.banner-vak p { color: var(--muted); margin: 0; }

/* Banner-voorbeelden die voorbij schuiven (marquee) */
.banner-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.banner-track { display: flex; gap: 22px; width: max-content; animation: bannerscroll 45s linear infinite; }
.banner-track img { height: 158px; width: auto; border-radius: 14px; box-shadow: var(--shadow); display: block; }
.banner-marquee:hover .banner-track { animation-play-state: paused; }
@keyframes bannerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) { .banner-track img { height: 108px; } .banner-track { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .banner-track { animation: none; } }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.keuze-kaart:hover, .service-card:hover, .price-card:hover { border-color: var(--blue); box-shadow: 0 16px 40px rgba(15, 95, 206, 0.22); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); }

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* dienst-kaarten */
.service-card { display: flex; flex-direction: column; }
.service-card .card-body { flex: 1; }
.service-card .btn { align-self: flex-start; margin-top: 24px; }

.checklist { list-style: none; display: grid; gap: 13px; margin: 20px 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li::before {
  content: "✓";
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(53, 213, 9, 0.16);
  color: var(--green);
  font-weight: 800;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.checklist strong { color: var(--ink); }
.checklist span { color: var(--muted); }

/* Checklist-vinkjes één voor één laten oplichten (net als in de hero).
   JS zet .vink-klaar zodra de lijst in beeld komt; zonder JS blijft alles zichtbaar. */
html.js-typ .checklist.vink-wacht li::before { opacity: 0; transform: scale(0.3); }
.checklist.vink-klaar li::before { animation: vinkPop 0.5s ease forwards; }
.checklist.vink-klaar li:nth-child(1)::before { animation-delay: 0.1s; }
.checklist.vink-klaar li:nth-child(2)::before { animation-delay: 0.5s; }
.checklist.vink-klaar li:nth-child(3)::before { animation-delay: 0.9s; }
.checklist.vink-klaar li:nth-child(4)::before { animation-delay: 1.3s; }
.checklist.vink-klaar li:nth-child(5)::before { animation-delay: 1.7s; }
.checklist.vink-klaar li:nth-child(6)::before { animation-delay: 2.1s; }
.checklist.vink-klaar li:nth-child(7)::before { animation-delay: 2.5s; }
.checklist.vink-klaar li:nth-child(8)::before { animation-delay: 2.9s; }
@media (prefers-reduced-motion: reduce) {
  html.js-typ .checklist.vink-wacht li::before { opacity: 1; transform: none; animation: none; }
}

/* ---------- Keuzevakken diensten ---------- */
.keuze-kaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.keuze-kaart h3 { margin-bottom: 10px; }
.keuze-kaart p { flex: 1; }
.keuze-kaart.featured {
  border: 2px solid var(--blue);
  box-shadow: 0 20px 50px rgba(15, 95, 206, 0.18);
}
.keuze-kaart .plan-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 6px 18px;
  white-space: nowrap;
}
.keuze-prijs { margin-top: 16px; font-weight: 800; color: var(--blue); font-size: 1.05rem; }

/* ---------- Prijstegels (contentstrategie) ---------- */
.prijs-tegels { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.prijs-tegel { background: var(--blue-soft); border-radius: 14px; padding: 14px 20px; }
.prijs-tegel strong { display: block; color: var(--blue); font-size: 1.3rem; line-height: 1.3; }
.prijs-tegel span { display: block; color: var(--muted); font-size: 0.88rem; }

/* ---------- Info-strook (callout onder prijzen) ---------- */
.info-strook {
  margin-top: 30px;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.info-strook p { color: var(--muted); margin: 0; }
.info-strook strong { color: var(--ink); }

/* ---------- Chat-quotes (aanbevelingen uit berichten, anoniem) ---------- */
.chat-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.chat-bubble {
  position: relative;
  padding: 26px 28px 22px;
  border-radius: 22px 22px 22px 6px;
  line-height: 1.6;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.chat-bubble:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(7, 28, 61, .14); }
.chat-bubble p { margin: 0; color: var(--ink); position: relative; z-index: 1; }
.chat-bubble::before {
  content: "\201C";
  position: absolute;
  top: 2px; right: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 92px;
  line-height: 1;
  color: var(--blue);
  opacity: .08;
  z-index: 0;
  pointer-events: none;
}
.chat-wa::before { color: var(--green); opacity: .16; }
.chat-bubble .bron {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 0.82rem; color: var(--muted); font-weight: 700;
  position: relative; z-index: 1;
}
.chat-bubble .bron::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.chat-li .bron::before { background-image: url("../assets/icons/linkedin.svg"); }
.chat-wa .bron::before { background-image: url("../assets/icons/whatsapp.svg"); }
.chat-wa { background: #e4f7d7; border: 1px solid #c7e6ac; }
.chat-li { background: #fff; border: 1px solid var(--line); }
.chat-solo { max-width: 640px; margin-top: 26px; border-radius: 22px 22px 6px 22px; }
.chat-bron-icoon { width: 16px; height: 16px; flex: none; }

/* ---------- Stats ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 28px;
  margin-top: -46px;
  position: relative;
  z-index: 5;
  text-align: center;
}
.stat .num { font-size: 2rem; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); font-size: 0.92rem; font-weight: 600; }

/* ---------- Prijzen ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.pricing-duo { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 38px 32px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card.featured {
  border: 2px solid var(--blue);
  box-shadow: 0 24px 60px rgba(15, 95, 206, 0.22);
}
.price-card .plan-tag {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 6px 18px;
  white-space: nowrap;
}
.price-card .plan-name { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue); }
.price-card h3 { font-size: 1.5rem; margin: 6px 0 4px; }
.price-card .price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 2px; color: var(--blue); }
.price-card .price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-card .price-note { color: var(--muted); font-size: 0.88rem; margin-bottom: 20px; }
.price-card .checklist { flex: 1; }
.price-card .btn { width: 100%; justify-content: center; margin-top: 24px; }

/* ---------- Reviews ---------- */
.review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green-bright);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.review-card blockquote { font-size: 1.05rem; color: var(--ink); }
.review-card footer { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.review-card .who strong { display: block; }
.review-card .who span { color: var(--muted); font-size: 0.88rem; }

/* ---------- LinkedIn-stijl reviews ---------- */
.li-review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.li-review .kop { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.li-review .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.li-review .avatar-init {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.li-review .naamregel { display: flex; align-items: center; gap: 6px; font-weight: 800; line-height: 1.3; flex-wrap: wrap; }
.li-review .in-badge {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #0a66c2;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.li-review .graad { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.li-review .kopregel {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.li-review .datum { color: #8a97ad; font-size: 0.8rem; margin-top: 5px; }
.li-review .tekst { font-size: 0.98rem; }

/* ---------- Review-slider ---------- */
.review-slider { position: relative; max-width: 860px; margin: 0 auto; }
.review-viewport { position: relative; min-height: 340px; }
.review-viewport .li-review {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}
.review-viewport .li-review.actief {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.45s ease 0.2s, transform 0.45s ease 0.2s, visibility 0s;
}
.review-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.review-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--blue);
  font-family: var(--font);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.review-nav button:hover { border-color: var(--blue); transform: scale(1.06); }
.review-dots { display: flex; gap: 9px; }
.review-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cfdcee;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.review-dots span.actief { background: var(--blue); width: 26px; border-radius: 999px; }

/* ---------- Waardeladder ---------- */
/* Twee bomen met tredes ertussen. De bomen steken onderaan een stukje uit,
   zoals bij een echte ladder, en elke trede zit met een boutje vast aan de
   boom. Daardoor lees je het als een ladder en niet als een stapel balkjes. */
.ladder { max-width: 720px; margin: 0 auto; position: relative; padding: 0 26px; }
.ladder::before,
.ladder::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -22px;
  width: 20px;
  border-radius: 12px;
  background: linear-gradient(90deg, #c2d3ea, #e6edf8 45%, #b5c9e4);
  box-shadow: inset 0 0 0 1px rgba(15, 95, 206, 0.07);
}
.ladder::before { left: 8px; }
.ladder::after { right: 8px; }

.ladder-trede {
  position: relative;
  z-index: 2;
  border-radius: 10px;
  padding: 22px 28px;
  margin-bottom: 26px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* De boutjes waarmee de trede aan de bomen vastzit */
.ladder-trede::before,
.ladder-trede::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #94aacb;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.ladder-trede::before { left: -12px; }
.ladder-trede::after { right: -12px; }
.ladder-trede:last-child { margin-bottom: 0; }
.ladder-trede:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ladder-trede strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.ladder-trede span { font-size: 0.98rem; opacity: 0.92; }

.trede-1 { background: #e9eef6; color: var(--muted); }
.trede-1 strong { color: #6b7c96; }
.trede-2 { background: var(--blue); }
.trede-3 { background: var(--blue-deep); }
.trede-4 {
  color: var(--navy);
  background: var(--green);
  box-shadow: 0 16px 40px rgba(53, 213, 9, 0.35);
}
.trede-4 strong, .trede-4 span { color: var(--navy); }
.ladder-top {
  text-align: center;
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.ladder-bijschrift { text-align: center; color: var(--muted); margin-top: 26px; font-weight: 600; }

/* ---------- Weggever ---------- */
.weggever { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.weggever-tekst h2 { color: #fff; margin: 14px 0 14px; }
.weggever-tekst .lead { color: rgba(255, 255, 255, 0.8); }
.weggever-tekst .checklist span { color: rgba(255, 255, 255, 0.88); }
.weggever-tekst .checklist li::before { background: rgba(53, 213, 9, 0.25); color: #fff; }
/* Deze kaart is wit, maar hij staat in een donkerblauwe sectie waar alle tekst
   op wit staat (.section-navy hierboven). Zonder deze regel erven de kop en de
   labels dat wit over, en dan staat er witte tekst op een witte kaart.

   Dat was geen theorie: "Waar mag ik hem naartoe sturen?", "Naam" en
   "E-mailadres" waren letterlijk onzichtbaar op de pagina waarmee je je
   mailadressen ophaalt. Je zag alleen de grijze voorbeeldtekst in de vakjes.

   Haal deze regel dus nooit weg, en zet er ook geen kleur op de sectie omheen
   die dit weer overschrijft. */
.weggever-formulier {
  background: #fff;
  border-radius: 26px;
  padding: 38px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.weggever-formulier h1,
.weggever-formulier h2,
.weggever-formulier h3,
.weggever-formulier h4,
.weggever-formulier strong { color: var(--ink); }
.weggever-formulier label { font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 8px; color: var(--ink); }
.weggever-formulier input {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 20px;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.weggever-formulier input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 95, 206, 0.12);
  background: #fff;
}

/* ---------- Stemblok ---------- */
.stem-blok {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.stem-blok .stem-sterren { justify-content: center; margin: 18px 0 10px; }
.stem-blok .stem-sterren button { font-size: 2.4rem; }
.stem-blok .stem-info { font-size: 1rem; }

/* Smalle meningstrook net boven de footer */
.stem-strook { padding: 26px 0; background: #fff; border-top: 1px solid var(--line); }
.stem-strook .stem-blok { box-shadow: none; border: none; padding: 0; max-width: 640px; border-radius: 0; }
.stem-strook .stem-blok .stem-sterren { margin: 8px 0 6px; }
.stem-strook .stem-blok .stem-sterren button { font-size: 1.8rem; }
.stem-vraag { font-weight: 800; font-size: 1.4rem; margin: 8px 0 0; color: var(--ink); }
.sterren-statisch { color: #f5a623; letter-spacing: 3px; font-size: 1.05rem; }
.sterren-statisch .leeg { color: #d7dfeb; }

/* ---------- Roadmap ---------- */
.roadmap { position: relative; display: grid; gap: 0; max-width: 900px; margin: 0 auto; }
.roadmap::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--green-bright));
  border-radius: 3px;
}
.rm-stap { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 0 0 38px; }
.rm-stap:last-child { padding-bottom: 0; }
.rm-bol {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  color: var(--blue);
  font-weight: 800;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--shadow);
}
.rm-stap:last-child .rm-bol { border-color: var(--green); color: var(--green); }
.rm-inhoud {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rm-inhoud:hover { transform: translateX(5px); box-shadow: var(--shadow-lg); }
.rm-inhoud h3 { font-size: 1.2rem; margin-bottom: 6px; }
.rm-inhoud p { color: var(--muted); }

/* ---------- Contactlogo's ---------- */
.contact-item .ico svg { width: 24px; height: 24px; }
.ico-linkedin { background: #eaf3fb; }
.ico-calendly { background: #eaf1fd; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0; display: grid; gap: 14px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 26px;
  box-shadow: var(--shadow);
}
.faq summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--blue); font-weight: 400; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--muted); }

/* ---------- CTA-band ---------- */
.cta-band {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(53, 213, 9, 0.25), transparent 55%),
    linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-radius: 30px;
  color: #fff;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); }
.cta-band .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.75); padding: 70px 0 30px; margin-top: 90px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 46px; }
.site-footer .logo { color: #fff; margin-bottom: 14px; display: inline-block; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: rgba(255, 255, 255, 0.75); transition: color 0.15s ease; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  transition: transform 0.18s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Page hero (subpagina's) ---------- */
.page-hero {
  padding: 56px 0 44px;
  background:
    radial-gradient(600px 350px at 90% -20%, rgba(15, 95, 206, 0.13), transparent 60%),
    var(--bg);
}
.page-hero .lead { max-width: 720px; }

/* ---------- Split (tekst + foto) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .photo-frame {
  border-radius: 30px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
}
.split .photo-frame img { width: 100%; height: 520px; object-fit: cover; }

/* ---------- Story / over-alex ---------- */
.story p { margin-bottom: 18px; }
.story .big-quote {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue);
  border-left: 5px solid var(--green-bright);
  padding-left: 22px;
  margin: 30px 0;
  line-height: 1.4;
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  position: relative;
}
.step .step-num {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Producten (webshop) ---------- */
.product-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.product-thumb {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--blue-soft), #eef9ea);
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb.thumb-top img { object-position: top; }
.product-thumb.thumb-tall { height: 240px; }
.product-thumb.thumb-contain { padding: 14px; background: linear-gradient(135deg, var(--blue-soft), #eef9ea); }
.product-thumb.thumb-contain img { object-fit: contain; }
.product-card .body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.product-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.product-card p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.product-card .price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.product-card .price { font-weight: 800; color: var(--blue); font-size: 1.15rem; }
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--green);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 5px 13px;
  z-index: 2;
}
.variant-select {
  width: 100%;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-top: 14px;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- Winkelwagen ---------- */
.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue-soft);
  font-size: 1.15rem;
  flex: none;
  transition: background 0.15s ease;
}
.cart-link:hover { background: #d5e6fb; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -5px;
  background: var(--green);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.cart-count[hidden] { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(16px);
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 120;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.cart-list { display: grid; gap: 16px; }
.cart-row {
  display: grid;
  grid-template-columns: 86px 1fr auto auto;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.cart-row img { width: 86px; height: 64px; object-fit: cover; border-radius: 12px; }
.cart-row .naam { font-weight: 700; }
.cart-row .stukprijs { color: var(--muted); font-size: 0.88rem; }
.qty-controls { display: flex; align-items: center; gap: 10px; }
.qty-controls button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font);
}
.qty-controls button:hover { border-color: var(--blue); color: var(--blue); }
.cart-row .regel-totaal { font-weight: 800; color: var(--blue); white-space: nowrap; }
.remove-btn { background: none; border: none; color: #e0483f; cursor: pointer; font-size: 1rem; font-family: var(--font); font-weight: 700; padding: 4px; }
.cart-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 100px;
}
/* Subtotaal en btw staan bewust kleiner en rustiger dan het eindbedrag, zodat
   je in één oogopslag ziet wat je echt betaalt. */
.cart-summary .btw-rij {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.cart-summary .btw-rij:first-of-type { margin-top: 16px; }
.cart-summary .totaal-rij {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 12px 0 18px;
  padding-top: 12px;
  padding-bottom: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cart-summary form { display: block; }
.cart-summary label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 7px;
}
.cart-summary input,
.cart-summary select,
.cart-summary textarea {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  margin-bottom: 18px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cart-summary textarea { resize: vertical; line-height: 1.6; }
.cart-summary input:focus,
.cart-summary select:focus,
.cart-summary textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 95, 206, 0.12);
  background: #fff;
}
.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty .emoji { font-size: 3.5rem; margin-bottom: 16px; }

.wa-inline { width: 18px; height: 18px; fill: #25d366; vertical-align: -3px; margin-left: 5px; display: inline-block; }
.wa-link { font-weight: 700; white-space: nowrap; }

/* ---------- Blogkaarten ---------- */
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card .date { color: var(--muted); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.blog-card h3 { margin-bottom: 10px; font-size: 1.15rem; color: var(--ink); }
.blog-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.blog-card .read-more { margin-top: 18px; font-weight: 700; }

/* ---------- Blogartikel ---------- */
.artikel { max-width: 760px; margin: 0 auto; }
.artikel-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.artikel-meta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* overflow-wrap: staat er een lang webadres in een blog, dan mag dat afbreken
   in plaats van de pagina op een telefoon breder te maken dan het scherm. */
.artikel-inhoud { font-size: 1.08rem; line-height: 1.8; overflow-wrap: anywhere; }
.artikel-inhoud p { margin-bottom: 20px; }
.artikel-inhoud h2 {
  font-size: 1.55rem;
  margin: 42px 0 16px;
  padding-top: 6px;
}
.artikel-inhoud h2::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  margin-bottom: 16px;
}
.artikel-inhoud ul { margin: 0 0 22px; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.artikel-inhoud ul li { display: flex; gap: 12px; align-items: flex-start; }
.artikel-inhoud ul li::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 11px;
}
.artikel-inhoud strong { color: var(--ink); }
.artikel-inhoud em { color: var(--muted); }
.artikel-inhoud a { font-weight: 600; text-decoration: underline; }
/* Behalve als die link een knop is. In een artikel horen links onderstreept te
   zijn, dat helpt lezen, maar een knop met een streep eronder ziet er kapot uit.
   Speelt sinds de knop onderaan vier blogs, waar eerst een kaal webadres stond. */
.artikel-inhoud a.btn { text-decoration: none; }

.artikel-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.artikel-nav a {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.artikel-nav a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.artikel-nav .richting { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.artikel-nav .kop { color: var(--ink); font-weight: 700; line-height: 1.4; }
.artikel-nav a.rechts { text-align: right; }
.artikel-nav .leeg { visibility: hidden; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "info foto" "form foto";
  gap: 30px 50px;
  align-items: start;
}
.contact-foto { grid-area: foto; align-self: stretch; margin: 0; height: 100%; }
.contact-foto img { height: 100%; min-height: 480px; }
.contact-form { grid-area: form; }
.contact-info-kolom { grid-area: info; }
.contact-items { display: grid; gap: 18px; }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: var(--shadow);
}
.contact-item .ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex: none;
}
.contact-item strong { display: block; }
.contact-item span, .contact-item a { color: var(--muted); }
.contact-item a:hover { color: var(--blue); }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.contact-form label { font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 8px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  margin-bottom: 20px;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 95, 206, 0.12);
  background: #fff;
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.formulier-melding {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.6;
}
.formulier-melding.gelukt { background: rgba(53, 213, 9, 0.14); color: #1f7a05; }
.formulier-melding.mislukt { background: #fdeceb; color: #b4302a; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Reveal animaties ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Vangnet: geen javascript, dan alles gewoon laten zien.
   Deze blokken staan op onzichtbaar en worden pas zichtbaar als javascript er
   .visible bij zet. Loopt javascript stuk of wordt het geblokkeerd, dan blijft
   de hele site dus leeg: alleen de achtergrond en wat losse randjes. Alex zag
   dat beeld op 29 juli 2026 op de waardeladder, twee bomen en verder niets,
   omdat hij net iets te vroeg keek. Bij hem kwam het goed, maar het laat zien
   hoe de pagina eruitziet als het misgaat.
   De klasse js-typ wordt bovenaan elke pagina gezet nog voor de eerste
   tekening, dus dit vangnet is nooit even zichtbaar bij een gewoon bezoek.
   Bewust geschreven als een losse regel met html:not() ervoor, en niet door de
   regels hierboven aan te passen. Zou ik daar html.js-typ voor zetten, dan werd
   die zwaarder dan .reveal.swoop-l en .ladder-trede:hover, en die zouden het
   dan verliezen. Zo blijft alle bestaande opmaak precies zoals hij was. */
html:not(.js-typ) .reveal,
html:not(.js-typ) .ladder .ladder-top,
html:not(.js-typ) .ladder .ladder-trede {
  opacity: 1;
  transform: none;
}

/* Swoop-in varianten (bouwen op .reveal; JS voegt .visible toe) */
.reveal.swoop-l { transform: translateX(-44px); }
.reveal.swoop-r { transform: translateX(44px); }
.reveal.swoop-l.visible, .reveal.swoop-r.visible { transform: none; }
.chat-quotes .chat-bubble:nth-child(2) { transition-delay: 0.09s; }
.chat-quotes .chat-bubble:nth-child(3) { transition-delay: 0.18s; }
.chat-quotes .chat-bubble:nth-child(4) { transition-delay: 0.27s; }
.chat-quotes .chat-bubble:nth-child(5) { transition-delay: 0.36s; }
.chat-quotes .chat-bubble:nth-child(6) { transition-delay: 0.45s; }
.cards-3 .feature-card:nth-child(2) { transition-delay: 0.1s; }
.cards-3 .feature-card:nth-child(3) { transition-delay: 0.2s; }
.cards-4 .feature-card:nth-child(2) { transition-delay: 0.08s; }
.cards-4 .feature-card:nth-child(3) { transition-delay: 0.16s; }
.cards-4 .feature-card:nth-child(4) { transition-delay: 0.24s; }

/* Herkenbaar-kaarten één voor één (alleen op desktop, waar ze samen in beeld komen) */
@media (min-width: 981px) {
  .cards-stagger .card { transition: opacity 0.7s ease, transform 0.7s ease; }
  .cards-stagger .card:nth-child(2) { transition-delay: 0.7s; }
  .cards-stagger .card:nth-child(3) { transition-delay: 1.4s; }
  .cards-stagger .card:nth-child(4) { transition-delay: 2.1s; }
}

/* Foto die wazig binnenkomt en in anderhalve seconde helemaal scherp wordt */
.scherp-in .photo-frame img {
  filter: blur(16px);
  /* Iets groter tijdens het vervagen, anders vervaagt de rand van de foto mee
     en zie je een vage waas langs het witte kader. */
  transform: scale(1.1);
  /* Bewust linear: met een versnellingscurve is hij al na een seconde scherp
     en dan duurt het gevoelsmatig geen anderhalve seconde. */
  transition: filter 1.5s linear, transform 1.5s ease-out;
}
.scherp-in.visible .photo-frame img { filter: blur(0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .scherp-in .photo-frame img { filter: none; transform: none; transition: none; }
}

/* Decoratieve swoop-achtergrond in een sectie */
.section-swoop { position: relative; overflow: hidden; }
.section-swoop::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -170px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 95, 206, 0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section-swoop > .container { position: relative; z-index: 1; }

/* Bij afdrukken of pdf: alles meteen zichtbaar, niets wegvallen */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-header, .wa-float { position: static !important; }
  .review-viewport .li-review { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; page-break-inside: avoid; }
  .review-nav { display: none !important; }
}

/* Trapsgewijs invaden van de roadmap en de ladder */
.rm-stap { transition-duration: 0.7s; }
.rm-stap:nth-child(1) { transition-delay: 0s; }
.rm-stap:nth-child(2) { transition-delay: 0.16s; }
.rm-stap:nth-child(3) { transition-delay: 0.32s; }
.rm-stap:nth-child(4) { transition-delay: 0.48s; }
/* De treden van de waardeladder komen één voor één binnen zodra de ladder in
   beeld komt.

   Elke trede hing eerst aan zijn eigen scroll-melding. Op een scherm waar de
   ladder niet in één keer past pakt dat verkeerd uit: de bovenste drie komen
   vlak na elkaar, en de onderste begint pas te bewegen als hij zelf in beeld
   is. Die had bovendien de langste vertraging, dus die kwam dubbel laat. Het
   zag eruit als haperen in plaats van als één beweging.

   Nu hangt de hele ladder aan één melding en cascaderen de treden binnen
   ruim een halve seconde, precies zoals het bedoeld was. */
.ladder .ladder-top,
.ladder .ladder-trede {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ladder.visible .ladder-top,
.ladder.visible .ladder-trede { opacity: 1; transform: translateY(0) scale(1); }
.ladder.visible .ladder-trede:nth-child(2) { transition-delay: 0.1s; }
.ladder.visible .ladder-trede:nth-child(3) { transition-delay: 0.25s; }
.ladder.visible .ladder-trede:nth-child(4) { transition-delay: 0.4s; }
.ladder.visible .ladder-trede:nth-child(5) { transition-delay: 0.55s; }
/* Het optillen bij aanwijzen moet het winnen van de regel hierboven, anders
   gebeurt er niets meer als je met je muis over een trede gaat. */
.ladder.visible .ladder-trede:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .split, .contact-grid, .cart-grid, .weggever { grid-template-columns: 1fr; }
  .contact-grid { grid-template-areas: "foto" "info" "form"; }
  .cart-summary { position: static; }
  .hero-photo { max-width: 460px; margin: 0 auto; }
  .cards-3, .pricing-grid, .steps { grid-template-columns: 1fr 1fr; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 46px 36px; }
  .cta-band .actions { justify-content: flex-start; }
}

/* Let op dit getal. De brede menubalk (logo, acht items, winkelwagentje en de
   knop Plan een kennismaking) past pas vanaf ongeveer 1164 pixels. Stond dit op
   1080, dan bleef die brede balk aan tussen 1081 en 1163 en viel de knop half
   buiten beeld. Dat raakt precies de gewone laptop van 1366 met Windows op 125
   procent, want die telt dan als 1093. Nu klapt hij op tijd in. */
@media (max-width: 1180px) {
  .main-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 18px;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none;
    /* Past het menu niet op het scherm (bijvoorbeeld met Diensten opengeklapt),
       dan moet je erin kunnen scrollen. Anders vallen Contact en FAQ eronder
       en zijn ze onbereikbaar. */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.open { display: flex; }
  /* Past het menu niet op het scherm, dan mag het schuiven. Anders vallen de
     onderste regels eruit en zijn ze niet meer aan te tikken.
     Hier stond ook een max-height van 100vh, en die hoort hier juist NIET.
     Deze regel is namelijk specifieker dan die hierboven en won het dus. En vh
     rekent op een telefoon de adresbalk en de knoppenbalk mee, terwijl je die
     ruimte niet ziet. Het menu dacht daardoor dat het paste en liet zich amper
     schuiven. Op een iPhone SE of 8 stonden FAQ en Contact daardoor tientallen
     pixels onder de onderrand en waren ze niet aan te tikken. De dvh-versie
     hierboven rekent wél met wat je echt ziet, en die geldt nu weer. */
  .main-nav.open { overflow-y: auto; }
  /* En zolang het menu openstaat gaat de cookiemelding even weg. Die staat
     onderaan vastgeplakt en dekte precies Webshop, Blog, FAQ en Contact af, dus
     bij een eerste bezoek waren die vier niet te bereiken. Hij komt vanzelf
     terug zodra het menu dichtgaat. */
  body.menu-open .cookiebalk { display: none; }
  /* Twaalf regels moeten samen op een telefoonscherm passen, anders vallen
     FAQ en Contact eronder. Vandaar de krappere regelafstand hier. */
  .main-nav a { padding: 9px 16px; }
  .nav-toggle { display: flex; }
  .nav-item.has-sub { align-self: stretch; flex-direction: column; align-items: stretch; }
  .nav-sub { position: static; display: flex; box-shadow: none; border: none; border-radius: 0; padding: 0 0 4px 14px; min-width: 0; background: transparent; }
  .nav-sub::before { display: none; }
  .nav-sub a { font-size: 0.92rem; color: var(--muted); padding: 6px 16px; }
}

@media (max-width: 600px) {
  .nav-cta { display: none; }
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer a, .site-footer p { overflow-wrap: anywhere; }
  .cards-2, .cards-3, .cards-4, .pricing-grid, .steps, .chat-quotes { grid-template-columns: 1fr; gap: 14px; }
  .section { padding: 28px 0; }
  .section-head { margin-bottom: 18px; }
  .page-hero { padding: 40px 0 28px; }
  .hero { padding: 34px 0 30px; }
  .hero-photo img { height: 340px; }
  .badge-float { padding: 7px 11px; font-size: 0.75rem; border-radius: 12px; gap: 6px; animation: none; }
  .badge-float .big { font-size: 0.95rem; }
  .badge-followers { top: 10px; left: 8px; }
  .badge-rating { position: absolute; top: auto; bottom: 12px; right: 8px; left: auto; margin: 0; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .card { padding: 24px 20px; }
  .price-card { padding: 26px 22px; }
  .stats-strip { padding: 24px 18px; gap: 14px; margin-top: -32px; }
  .cta-band { padding: 34px 24px; }
  .split { gap: 28px; }
  .artikel-nav { grid-template-columns: 1fr; }
  .artikel-nav a.rechts { text-align: left; }
  .contact-form { padding: 28px 22px; }
  /* Zelfde verkleining als het contactformulier. Zonder deze regel hield de
     gidskaart zijn brede 38px-rand en duwde het Cloudflare-vinkje (minimaal
     300px breed) de hele kaart het scherm af. */
  .weggever-formulier { padding: 28px 22px; }
  .cart-row { grid-template-columns: 64px 1fr; }
  .cart-row img { width: 64px; height: 48px; }
  .cart-row .regel-totaal, .cart-row .qty-controls { grid-column: 2; justify-self: start; }
  /* De reviewkaartjes liggen normaal met position:absolute op elkaar, in een
     vak met een vaste hoogte. Op een smal scherm is de review van Tim langer
     dan die hoogte, dus liep zijn tekst eronderuit en kwamen de pijltjes en
     bolletjes er dwars overheen. Door alle kaartjes in hetzelfde grid-vak te
     leggen groeit het blok mee met het langste bericht en kan dat niet meer. */
  .review-viewport { min-height: 0; display: grid; }
  .review-viewport .li-review { position: static; grid-area: 1 / 1; }
  .roadmap::before { left: 25px; }
  .rm-stap { grid-template-columns: 52px 1fr; gap: 16px; }
  .rm-bol { width: 52px; height: 52px; font-size: 1.25rem; }
  .badge-clients { top: 62px; bottom: auto; left: 8px; max-width: 168px; font-size: 0.7rem; }
  .cta-band .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-band .actions .btn { width: 100%; justify-content: center; }
  .contact-item { min-width: 0; }
  .contact-item > div { min-width: 0; overflow-wrap: anywhere; }
  /* "Meer weten over profieloptimalisatie?" viel op een smal scherm over twee
     regels. De letters blijven even groot; we halen de ruimte weg aan de
     zijkanten van de pil. */
  .meer-weten { padding-left: 13px; padding-right: 13px; }
  /* De klantberichten komen op de computer van links en van rechts inzweven.
     Op een telefoon is zo'n bericht net zo breed als het scherm, dus stak hij
     tijdens het inzweven 44px buiten beeld en kon je de pagina zijwaarts
     schuiven. Hier laten we ze gewoon van onderaf komen. */
  .reveal.swoop-l, .reveal.swoop-r { transform: translateY(26px); }
}

/* Vanaf 360px past de langste tekst op één regel, dus houden we hem bij
   elkaar. Op nog smallere toestellen mag hij wel afbreken, want daar past hij
   er echt niet op en dan zou hij buiten het kaartje steken. */
@media (min-width: 360px) and (max-width: 760px) {
  .meer-weten { white-space: nowrap; }
}

/* ---------- Cookiemelding ---------- */
.cookiebalk {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1200;
  width: min(420px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookiebalk.zichtbaar { opacity: 1; transform: translateY(0); }
.cookiebalk-tekst strong { display: block; font-size: 1rem; margin-bottom: 6px; }
.cookiebalk-tekst p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.cookiebalk-knoppen { display: flex; gap: 10px; }
.cookiebalk-knoppen .btn { flex: 1; justify-content: center; white-space: nowrap; }
.cookiebalk-link { display: inline-block; margin-top: 12px; font-size: 0.82rem; color: var(--blue); font-weight: 600; }
@media (max-width: 560px) {
  .cookiebalk { left: 12px; bottom: 12px; padding: 18px 18px; }
  .cookiebalk-knoppen { flex-direction: column; }
}

/* ---------- Productplaatje uitvergroten ----------
   Bij een banner of een carrousel wil een klant echt zien wat hij koopt.
   Klikken op zo'n plaatje opent hem groot. Alleen bij de echte ontwerpen
   (thumb-contain), niet bij de sfeerplaatjes van je diensten.
   Dit staat helemaal los van de bestaande opmaak: er verandert niets aan de
   kaarten zelf, er komt alleen een laag overheen zodra je klikt. */
.product-thumb.thumb-contain { position: relative; cursor: zoom-in; }
.product-thumb.thumb-contain::after {
  content: "Klik om te vergroten";
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%) translateY(6px);
  background: rgba(11, 27, 58, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
  white-space: nowrap;
}
.product-thumb.thumb-contain:hover::after,
.product-thumb.thumb-contain:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Op een touchscreen bestaat hover niet, dus daar staat het hintje gewoon aan */
@media (hover: none) {
  .product-thumb.thumb-contain::after { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.vergroot-laag {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(7, 28, 61, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.vergroot-laag.zichtbaar { opacity: 1; }
.vergroot-laag img {
  max-width: min(1400px, 96vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  transform: scale(0.97);
  transition: transform 0.18s ease;
}
.vergroot-laag.zichtbaar img { transform: scale(1); }
.vergroot-bijschrift {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  max-width: 90vw;
}
.vergroot-sluit {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vergroot-sluit:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 620px) {
  .vergroot-laag { padding: 12px; }
  .vergroot-laag img { max-height: 78vh; }
  .vergroot-bijschrift { bottom: 10px; font-size: 0.85rem; }
}

/* ---------- Cloudflare-vinkje (Turnstile) op smalle schermen ----------
   Het vinkje is minimaal 300px breed en dat past niet in de formulierkaarten
   op een smalle telefoon: de kaart blaast dan op tot voorbij de schermrand en
   wordt daar afgeknipt. Met zoom verkleinen we het vinkje in zijn geheel,
   inclusief de ruimte die hij inneemt, zodat de kaart gewoon past. Browsers
   die zoom niet kennen tonen het vinkje op ware grootte; dan valt de rand
   van de kaart net buiten beeld, maar blijft alles gewoon werken. */
@media (max-width: 400px) {
  .cf-turnstile { zoom: 0.86; }
}
@media (max-width: 352px) {
  .cf-turnstile { zoom: 0.72; }
}

/* ---------- Lange woorden in een kop op een telefoon ----------
   Nederlands heeft van die woorden: geloofwaardigheid, zichtbaarheid,
   onweerstaanbaar, contentstrategie. In een grote kop op een telefoon is zo'n
   woord in zijn eentje al breder dan het scherm.

   Wat je dan ziet: de laatste letters staan tegen de rand aan of vallen er net
   buiten. Op de body staat overflow-x: clip, dus de pagina schuift niet opzij,
   maar wat er niet past wordt wel afgeknipt. Je merkt het niet aan een balk
   onderin, alleen aan een woord dat er raar uitziet.

   Twee regels ertegen. Eerst proberen we netjes af te breken met een koppelteken
   (de pagina staat op lang="nl", dus de browser weet hoe dat hoort). Kan de
   browser dat niet, dan breekt het woord gewoon af zonder streepje. Lelijker,
   maar altijd beter dan letters die je niet meer ziet.

   Alleen op telefoonformaat, dus op je computer verandert er niets. */
@media (max-width: 760px) {
  h1,
  h2,
  h3,
  .artikel-kop h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    /* Maar alleen bij lange woorden. Zonder deze grens breekt een browser ook
       korte woorden af zodra hij toevallig een regel moet afsluiten, en dan las
       je op de veelgestelde vragen "Alles wat je wilt we-ten". Dat is lelijk en
       het is nergens voor nodig: "weten" past gewoon op de volgende regel.
       Vanaf twaalf letters mag hij afbreken, met minstens vijf letters vóór en
       vier ná het streepje. "Geloofwaardigheid" en "profieloptimalisatie" vallen
       daar wel onder, en dat zijn precies de woorden waarvoor dit bedoeld was.
       De regels met -webkit- ervoor zijn voor oudere iPhones. */
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 12 5 4;
  }
}

/* En de echte oorzaak: de kop werd op een telefoon niet kleiner.
   h1 staat op clamp(2.4rem, 5.2vw, 4rem). Op een scherm van 375 is 5,2vw maar
   19 pixels, dus die ondergrens van 2,4rem wint altijd. Gevolg: een kop van 38
   pixels, even groot op een telefoon van 320 als op een van 430. En bij 38
   pixels is "geloofwaardigheid" in zijn eentje al 347 breed, terwijl er 327
   ruimte is.

   Met 9vw als middenwaarde krimpt de kop wél mee met het scherm: 34 pixels op
   een gewone telefoon, 29 op een hele smalle. Nog steeds een flinke kop, maar
   nu past het langste Nederlandse woord dat je gebruikt er gewoon in.
   Boven de 420 verandert er niets, dus je computer blijft zoals hij was. */
@media (max-width: 420px) {
  h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
}

/* ---------- Hele smalle telefoons (320 breed en smaller) ----------
   Denk aan een oudere iPhone SE of het buitenschermpje van een vouwtelefoon.
   Daar is 272 pixels over voor je tekst, en dat is te weinig voor een paar
   dingen op de site.

   Waarom dit ertoe doet: op de body staat overflow-x: clip, dus de pagina
   schuift niet opzij. Maar wat er niet past wordt daardoor wél afgeknipt, en
   dat zie je niet aankomen. Een telefoonnummer dat halverwege ophoudt, of een
   woord waar de laatste letters vanaf zijn.

   Alleen deze breedte, dus je gewone telefoon en je computer veranderen niet. */
@media (max-width: 360px) {
  /* Lange woorden in een kop mogen afbreken in plaats van eruit lopen.
     "onweerstaanbaar" is op 38 pixels groot al breder dan het scherm. */
  h1 .hl,
  h1,
  h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    /* Zelfde grens als hierboven: alleen echt lange woorden mogen breken. */
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 12 5 4;
  }

  /* Het telefoonnummer in een lopende zin stond op nowrap, waardoor de laatste
     cijfers eraf vielen. Op zo'n smal scherm mag hij gewoon afbreken. */
  .wa-link { white-space: normal; }

  /* De stappen in de routekaart hebben een vaste kolom van 64 breed plus 24
     tussenruimte. Samen met de marges van de pagina paste dat net niet. */
  .rm-stap {
    grid-template-columns: 48px 1fr;
    gap: 14px;
  }
}

/* ---------- De waardeladder op een telefoon ----------
   De treden hadden niet allemaal dezelfde hoogte. Dat kwam niet door de trede
   zelf maar door het zinnetje eronder: "Men kiest onbewust al voor jou" is nét
   te lang en viel op twee regels, terwijl "Men weet wie je bent" op één regel
   bleef. Zo werd de ene trede 136 hoog en de andere 108, en dan lees je het
   niet meer als een ladder met gelijke sporten.

   Gemeten op 320, 360, 375, 390, 412 en 430 breed. De zijruimte in de trede
   ging van 28 naar 14 en de tekst een maatje kleiner; daarmee past elk zinnetje
   vanaf 360 op één regel en zijn alle treden 96 hoog. Boven de 480 verandert er
   niets, dus je computer blijft precies zoals hij was. */
@media (max-width: 480px) {
  .ladder { padding: 0 22px; }
  .ladder-trede { padding: 18px 14px; }
  .ladder-trede strong { font-size: 1.2rem; }
  .ladder-trede span { font-size: 0.92rem; }
}

/* Op 320 breed viel "Men kiest onbewust al voor jou" nog steeds om. Daar mag
   het nog een tandje kleiner; dan staan alle vier de treden op 89 hoog. */
@media (max-width: 345px) {
  .ladder { padding: 0 18px; }
  .ladder-trede { padding: 16px 10px; }
  .ladder-trede strong { font-size: 1.1rem; }
  .ladder-trede span { font-size: 0.85rem; }
}

/* ---------- Het aanbod vlak voor het betalen ----------
   Verschijnt als iemand een strategie of pakket boekt zonder profieloptimalisatie.
   Bewust zonder kruisje: er hoort een keuze gemaakt te worden. Escape werkt wel,
   dan gaat de betaling niet door en staat de klant weer in zijn winkelwagen. */
.aanbod-laag {
  position: fixed;
  inset: 0;
  z-index: 4200;
  background: rgba(7, 28, 61, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.18s ease;
  overflow-y: auto;
}
.aanbod-laag.zichtbaar { opacity: 1; }
.aanbod-kaart {
  background: #fff;
  border-radius: 22px;
  padding: 30px 30px 26px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  transform: translateY(10px);
  transition: transform 0.18s ease;
  margin: auto;
}
.aanbod-laag.zichtbaar .aanbod-kaart { transform: translateY(0); }
.aanbod-vlag { margin-bottom: 14px; }
.aanbod-kaart h3 { margin: 0 0 12px; font-size: 1.32rem; line-height: 1.3; }
.aanbod-kaart > p { margin: 0 0 20px; line-height: 1.7; color: var(--muted); }
.aanbod-product {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  background: #f7fafe;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 22px;
}
.aanbod-product img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.aanbod-prijs { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.aanbod-prijs .was { color: var(--muted); text-decoration: line-through; font-size: 0.95rem; }
.aanbod-prijs .nu { color: var(--green-deep); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.01em; }
.aanbod-prijs .bespaart {
  background: var(--green);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.aanbod-klein { margin: 6px 0 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.aanbod-knoppen { display: flex; flex-direction: column; gap: 10px; }
.aanbod-knoppen .btn { width: 100%; justify-content: center; }
@media (max-width: 520px) {
  .aanbod-kaart { padding: 24px 20px 20px; border-radius: 18px; }
  .aanbod-kaart h3 { font-size: 1.15rem; }
  .aanbod-vlag { font-size: 0.95rem; padding: 9px 20px; margin-bottom: 12px; }
  .aanbod-prijs .nu { font-size: 1.5rem; }
  .aanbod-product { grid-template-columns: 68px 1fr; gap: 12px; padding: 13px; }
  .aanbod-product img { width: 68px; height: 52px; }
}

/* ---------- Winkelwagen op een breed scherm ----------
   Het afrekenformulier stond in een smalle kolom naast een bijna lege
   productlijst: elk veld op zijn eigen regel, dus een lange sliert waar je
   flink voor moet scrollen. Vanaf 1000 pixels krijgt de kolom meer breedte,
   waardoor de uitleg onder de velden minder regels nodig heeft, en staan de
   velden die bij elkaar horen naast elkaar. Op een telefoon verandert er
   niets: daar blijft alles gewoon onder elkaar. */
.veld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.veld-paar > div { min-width: 0; }

@media (min-width: 1000px) {
  .cart-grid { grid-template-columns: 1fr 1.2fr; gap: 32px; }
  .cart-summary { padding: 30px 34px; }
  .cart-summary textarea { min-height: 70px; }
}
@media (max-width: 620px) {
  .veld-paar { grid-template-columns: 1fr; gap: 0; }
}

/* Alleen voor schermlezers: onzichtbaar op het scherm, maar wel voorgelezen.
   Nodig bij de doorgestreepte prijs in het aanbod: het doorstrepen komt uit de
   opmaak, dus wie de site laat voorlezen hoorde twee bedragen achter elkaar
   zonder te weten welke hij betaalt. */
.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;
}

/* Op een laag scherm (kleine Android, of een telefoon liggend) is het
   aanbodscherm hoger dan het beeld en staat de tweede knop eronder. Het
   scrollt wel, maar niet iedereen ziet dat. Daarom hier alles een tandje
   compacter, zodat beide knoppen gewoon in beeld staan. */
@media (max-height: 700px) {
  .aanbod-laag { padding: 10px; align-items: flex-start; }
  .aanbod-kaart { padding: 18px 20px 16px; }
  .aanbod-vlag { font-size: 0.85rem; padding: 7px 16px; margin-bottom: 10px; }
  .aanbod-kaart h3 { font-size: 1.05rem; margin-bottom: 8px; }
  .aanbod-kaart > p { margin-bottom: 14px; font-size: 0.95rem; line-height: 1.55; }
  .aanbod-product { padding: 11px; margin-bottom: 14px; gap: 11px; grid-template-columns: 58px 1fr; }
  .aanbod-product img { width: 58px; height: 44px; }
  .aanbod-prijs { margin-top: 4px; gap: 8px; }
  .aanbod-prijs .nu { font-size: 1.35rem; }
  .aanbod-knoppen { gap: 8px; }
  .aanbod-knoppen .btn { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- Prijzen in de webshop: beide bedragen ----------
   Een particulier moet kunnen zien wat hij echt betaalt. De prijs zonder btw
   blijft leidend, want die is voor zakelijke klanten het bedrag dat telt, maar
   het bedrag inclusief btw staat er nu meteen onder in plaats van pas in de
   winkelwagen. */
.product-card .price-row { align-items: flex-start; }
.product-card .price { display: block; line-height: 1.25; }
.product-card .price-btw {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0;
}
.product-card .price-incl {
  display: block;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}

/* ---------- Akkoord op de voorwaarden in de checkout ----------
   Bij een digitaal product mag een klant zijn geld binnen veertien dagen
   terugvragen, tenzij hij vooraf uitdrukkelijk afziet van die bedenktijd. Dat
   moet een vinkje zijn dat hij zelf aanzet, niet een zin in de kleine
   lettertjes. Daarom staat hij hier groot genoeg om te lezen en te tikken. */
/* Let op de lange naam hiervoor. Dit moet .cart-summary label.akkoord-regel zijn
   en niet alleen .akkoord-regel, want hoger in dit bestand staat al een regel
   voor .cart-summary label en die is voor de browser sterker. Met alleen
   .akkoord-regel kwam hier niets van aan: het vinkje stond dan los boven de
   tekst in plaats van er netjes naast. */
.cart-summary label.akkoord-regel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  background: #f7fafe;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 4px 0 18px;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.cart-summary label.akkoord-regel input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  cursor: pointer;
  flex: 0 0 auto;
}
.cart-summary label.akkoord-regel a { color: var(--blue); font-weight: 700; }

/* ---------- Productplaatjes op een telefoon die dwars ligt ----------
   Vanaf 760 breed en smaller staat de webshop in één kolom. Draai je je
   telefoon dwars, dan is het scherm ineens 667 of 736 breed en is één
   productkaart dus ruim 600 breed. De plaatjes zijn 400 bij 240, en het vakje
   eromheen heeft een vaste hoogte van 170 of 240. Een breed plaatje in een laag
   vakje wordt van boven en onder afgesneden, en juist onderin staat de tekst.
   Bij profieloptimalisatie viel "De basis" er precies vanaf.

   In deze breedtes laten we het vakje daarom meegroeien met het plaatje, zodat
   er niets meer wordt weggesneden. Onder de 451 is een kaart nooit breder dan
   het plaatje zelf, dus je telefoon rechtop verandert niet. En boven de 760
   staan er weer meerdere kolommen naast elkaar, dus je computer ook niet. */
@media (min-width: 451px) and (max-width: 760px) {
  .product-thumb,
  .product-thumb.thumb-tall {
    height: auto;
    aspect-ratio: 5 / 3;
  }
}