/* ============================================================
   RIVOWEB 3 — licht, volwassen & luxe
   ============================================================ */

:root {
  --bg: #f7f6f2;
  --bg-diep: #efede7;
  --wit: #ffffff;
  --ink: #101828;
  --ink-zacht: #4b5565;
  --ink-mist: #8b94a5;
  --navy: #16304f;
  --navy-diep: #0d2138;
  --blauw: #2a5fa8;
  --oranje: #e8630a;
  --rand: rgba(16, 24, 40, .09);
  --rand-sterk: rgba(16, 24, 40, .16);
  --schaduw: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.10);
  --schaduw-groot: 0 2px 4px rgba(16,24,40,.05), 0 28px 64px -20px rgba(13,33,56,.22);
  --radius: 18px;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --ease-luxe: cubic-bezier(.65, 0, .35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* geen css scroll-behavior: alle interne links scrollen via JS (GSAP),
   anders vechten browser en animatie om de scrollpositie */

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

::selection { background: var(--navy); color: var(--wit); }

/* fijne filmkorrel over de hele site */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 500; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045;
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-smal { max-width: 820px; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
h1 em, h2 em, h3 em, .footer-cta em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--navy);
}

/* woord-reveal (JS splitst koppen in woorden) */
.woord { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.woord-inner { display: inline-block; will-change: transform; }
.js .woord-inner { transform: translateY(110%); }

/* ============ SCROLL-VOORTGANG ============ */
.scroll-voortgang {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--blauw), var(--navy));
  transform: scaleX(0); transform-origin: left;
}

/* ============ KNOPPEN ============ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 600; font-size: .975rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-luxe);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn-navy { background: var(--navy); color: var(--wit); box-shadow: 0 8px 24px -8px rgba(13,33,56,.45); }
.btn-navy:hover { background: var(--navy-diep); box-shadow: 0 16px 34px -8px rgba(13,33,56,.55); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rand-sterk); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--wit); }
.btn-licht { background: var(--wit); color: var(--navy); }
.btn-licht:hover { box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); }
.btn-whatsapp { background: #1fa855; color: var(--wit); }
.btn-whatsapp:hover { background: #178a45; }
.btn-block { width: 100%; }
.btn-klein { padding: 10px 22px; font-size: .9rem; }

/* ============ HEADER (open bar ↔ zwevende pill) ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  padding: 10px 16px 0;
  pointer-events: none;
}
.header-shell {
  pointer-events: auto;
  width: 100%; max-width: 1180px; height: 64px;
  margin: 0 auto; padding: 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(247, 246, 242, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(16,24,40,.05); border-radius: 20px;
  box-shadow: 0 2px 16px -8px rgba(13,33,56,.08);
  transition:
    max-width .65s var(--ease-luxe),
    height .5s var(--ease-luxe),
    padding .5s var(--ease-luxe),
    gap .5s var(--ease-luxe),
    border-radius .55s var(--ease-luxe),
    background .4s ease, border-color .4s ease, box-shadow .5s ease;
}
.site-header.is-pill .header-shell {
  max-width: 216px; height: 54px; padding: 0 12px 0 22px; gap: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  border-color: var(--rand);
  box-shadow: 0 18px 44px -16px rgba(13,33,56,.32);
}
.logo {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--blauw); }
.header-nav {
  display: flex; gap: 20px;
  max-width: 640px; overflow: hidden; white-space: nowrap;
  transition: opacity .25s ease, max-width .55s var(--ease-luxe);
}
.site-header.is-pill .header-nav { opacity: 0; max-width: 0; pointer-events: none; }
.header-nav a {
  position: relative; padding: 6px 2px;
  color: var(--ink-zacht); text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: color .25s ease;
}
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--navy); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-luxe);
}
.header-nav a:hover, .header-nav a.is-actief { color: var(--ink); }
.header-nav a:hover::after, .header-nav a.is-actief::after { transform: scaleX(1); transform-origin: left; }
.header-acties { display: flex; align-items: center; gap: 12px; }
.header-login {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; white-space: nowrap;
  color: var(--ink-zacht); text-decoration: none; font-size: .93rem; font-weight: 500;
  transition: color .25s ease;
}
.header-login:hover { color: var(--navy); }
.header-login svg { width: 16px; height: 16px; flex-shrink: 0; }
.cta-wrap {
  display: inline-flex; max-width: 220px;
  transition: opacity .22s ease, max-width .5s var(--ease-luxe);
}
/* alleen clippen in pill-modus: anders snijdt de wrap de magnetische knop af */
.site-header.is-pill .cta-wrap { opacity: 0; max-width: 0; pointer-events: none; overflow: hidden; }
.menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 0; padding: 0; overflow: hidden;
  background: none; border: none; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease .15s;
}
.site-header.is-pill .menu-btn {
  width: auto; padding: 12px 10px; opacity: 1; pointer-events: auto;
}
.menu-btn span {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, width .3s ease;
}
.menu-btn span:nth-child(2) { width: 15px; }
.menu-btn:hover span:nth-child(2) { width: 22px; }

/* ============ FULLSCREEN MENU ============ */
.nav-overlay {
  position: fixed; inset: 0; z-index: 130;
  display: none; flex-direction: column;
  background: rgba(13, 33, 56, .94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: var(--wit);
  clip-path: inset(0 0 100% 0);
}
.nav-overlay.is-open { display: flex; }
.overlay-top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 22px 28px 0;
}
.logo-licht { color: var(--wit); }
.logo-licht span { color: #7fa3d6; }
.overlay-sluit {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  transition: background .25s ease, transform .35s ease;
}
.overlay-sluit:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.overlay-sluit span {
  position: absolute; left: 14px; right: 14px; top: 21.5px; height: 2px;
  background: var(--wit); border-radius: 2px;
}
.overlay-sluit span:first-child { transform: rotate(45deg); }
.overlay-sluit span:last-child { transform: rotate(-45deg); }
.overlay-inner {
  flex: 1; display: flex; align-items: center; gap: 48px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px;
  min-height: 0;
}
.overlay-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.overlay-nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 7px 0;
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: clamp(1.9rem, 4.6vh, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  transition: color .3s ease, padding-left .45s var(--ease-luxe);
}
.overlay-nav a i {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: .95rem; color: rgba(232,99,10,.85);
  min-width: 26px;
}
.overlay-nav a span { position: relative; }
.overlay-nav a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 2px;
  background: #9db8dd; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-luxe);
}
.overlay-nav a:hover { color: var(--wit); padding-left: 14px; }
.overlay-nav a:hover span::after { transform: scaleX(1); transform-origin: left; }
.overlay-voet {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px 34px;
}
.overlay-cta-groep { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-ghost-licht { background: transparent; color: var(--wit); border-color: rgba(255,255,255,.35); }
.btn-ghost-licht:hover { border-color: var(--wit); background: rgba(255,255,255,.08); }
.btn-ghost-licht svg { width: 17px; height: 17px; flex-shrink: 0; }
.overlay-contact { display: flex; gap: 26px; }
.overlay-contact a {
  color: rgba(255,255,255,.65); text-decoration: none; font-size: .93rem;
  transition: color .25s ease;
}
.overlay-contact a:hover { color: var(--wit); }

/* --- wisselend visueel paneel (abstracte mini-mockups) --- */
.overlay-visual { flex: 0 0 380px; display: flex; justify-content: center; }
.ov-kader {
  position: relative; width: 360px; height: 300px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
  overflow: hidden;
}
.ov-paneel {
  position: absolute; inset: 0; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform, opacity;
}
.ovm-lijn { display: block; height: 8px; width: 70%; border-radius: 4px; background: rgba(255,255,255,.22); }
.ovm-lijn.b { height: 12px; width: 85%; background: rgba(255,255,255,.5); }
.ovm-lijn.kort { width: 45%; }
.ovm-pill { display: block; width: 74px; height: 22px; border-radius: 999px; background: var(--oranje); }
.ovm-pill.navy { background: #4d7cc0; }
/* diensten: mini-browser */
.ovm-browser {
  width: 240px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; overflow: hidden;
}
.ovm-bar { display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ovm-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ovm-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ovm-blok { display: block; height: 62px; border-radius: 9px; background: linear-gradient(135deg, #2a5fa8, #7fa3d6); }
/* proces: stappen */
.ovm-stappen { display: flex; flex-direction: column; gap: 18px; }
.ovm-stap { display: flex; align-items: center; gap: 14px; }
.ovm-stap i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); background: transparent;
}
.ovm-stap.is-af i { background: #7fa3d6; border-color: #7fa3d6; }
.ovm-stap.is-actief i { border-color: var(--oranje); box-shadow: 0 0 0 4px rgba(232,99,10,.2); }
.ovm-stap b { display: block; width: 130px; height: 9px; border-radius: 4px; background: rgba(255,255,255,.24); }
.ovm-stap.is-actief b { background: rgba(255,255,255,.55); }
/* portfolio: leeg slot */
.ovm-slot {
  width: 230px; height: 190px; border-radius: 16px;
  border: 2px dashed rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
}
.ovm-slot span {
  font-family: var(--font-serif); font-style: italic; font-size: 1.35rem;
  color: rgba(255,255,255,.55); text-align: center; line-height: 1.3;
}
/* pakketten: mini-prijskaart */
.ovm-prijs {
  position: relative; width: 190px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 30px 22px 24px;
}
.ovm-prijs em {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--oranje); color: var(--wit); white-space: nowrap;
  font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px;
}
.ovm-prijs b {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 2.2rem; line-height: 1; color: var(--wit);
}
/* faq: accordeon */
.ovm-faq { display: flex; flex-direction: column; gap: 12px; width: 230px; }
.ovm-vraag {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
}
.ovm-vraag b { display: block; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.28); }
.ovm-vraag i {
  position: relative; width: 12px; height: 12px; flex-shrink: 0;
}
.ovm-vraag i::before, .ovm-vraag i::after {
  content: ""; position: absolute; background: rgba(255,255,255,.6); border-radius: 2px;
}
.ovm-vraag i::before { left: 0; right: 0; top: 5px; height: 2px; }
.ovm-vraag i::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.ovm-vraag.is-open { background: rgba(255,255,255,.14); }
.ovm-vraag.is-open i::after { display: none; }
/* contact: chat */
.ovm-chat { display: flex; flex-direction: column; gap: 12px; width: 230px; }
.ovm-bubbel { display: block; height: 34px; border-radius: 14px; }
.ovm-bubbel.links { width: 70%; background: rgba(255,255,255,.16); border-bottom-left-radius: 4px; }
.ovm-bubbel.rechts { width: 58%; margin-left: auto; background: #4d7cc0; border-bottom-right-radius: 4px; }
.ovm-invoer {
  display: flex; align-items: center; justify-content: flex-end;
  height: 38px; margin-top: 6px; padding: 0 6px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
}
.ovm-invoer i { width: 26px; height: 26px; border-radius: 50%; background: var(--oranje); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 138px 0 88px;
  background:
    radial-gradient(1000px 520px at 82% -10%, rgba(42,95,168,.10), transparent 60%),
    radial-gradient(700px 420px at -8% 30%, rgba(232,99,10,.05), transparent 55%),
    var(--bg);
  overflow: hidden;
}
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

/* --- geometrische achtergrondlaag --- */
.hero-geo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-geo > span { position: absolute; display: block; will-change: transform; }
.geo-ring { border: 1px solid rgba(22,48,79,.10); border-radius: 50%; }
.geo-ring.g1 { width: 560px; height: 560px; left: -180px; top: 46%; }
.geo-ring.g2 { width: 340px; height: 340px; right: -80px; top: -90px; border-color: rgba(42,95,168,.13); border-style: dashed; }
.geo-ring.g3 { width: 148px; height: 148px; left: 42%; bottom: 6%; border-color: rgba(232,99,10,.14); }
.geo-vierkant {
  width: 210px; height: 210px; right: 16%; bottom: -70px;
  border: 1px solid rgba(22,48,79,.09); border-radius: 26px;
  transform: rotate(14deg);
}
.geo-lijn { height: 1px; background: linear-gradient(90deg, transparent, rgba(22,48,79,.14), transparent); }
.geo-lijn.la { width: 420px; left: 4%; top: 18%; transform: rotate(-24deg); }
.geo-lijn.lb { width: 300px; right: 8%; top: 62%; transform: rotate(18deg); }
.geo-plus { width: 14px; height: 14px; }
.geo-plus::before, .geo-plus::after { content: ""; position: absolute; background: rgba(232,99,10,.38); border-radius: 1px; }
.geo-plus::before { left: 0; right: 0; top: 6px; height: 1.6px; }
.geo-plus::after { top: 0; bottom: 0; left: 6.2px; width: 1.6px; }
.geo-plus.p1 { left: 12%; bottom: 22%; }
.geo-plus.p2 { right: 30%; top: 14%; }

.hero-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
  background: var(--wit); border: 1px solid var(--rand);
  font-size: .85rem; font-weight: 600; color: var(--ink-zacht);
  box-shadow: var(--schaduw);
}
.hero-chip .stip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--oranje);
  box-shadow: 0 0 0 3px rgba(232,99,10,.15);
  animation: stip-puls 2.4s ease-in-out infinite;
}
@keyframes stip-puls {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,99,10,.15); }
  50% { box-shadow: 0 0 0 6px rgba(232,99,10,.05); }
}
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); margin-bottom: 22px; }
.hero .lead { font-size: 1.15rem; color: var(--ink-zacht); max-width: 33em; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hero-trust li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--ink-zacht); font-weight: 500; }
.hero-trust svg { width: 18px; height: 18px; color: var(--blauw); flex-shrink: 0; }

/* --- hero visual --- */
.hero-visual { position: relative; min-height: 480px; }
.visual-glow {
  position: absolute; inset: 6% -4% 4% 2%;
  background: radial-gradient(closest-side, rgba(42,95,168,.13), transparent 75%);
  filter: blur(6px);
}
.mock-browser {
  position: absolute; top: 8%; left: 6%; right: 12%;
  background: var(--wit); border: 1px solid var(--rand);
  border-radius: 16px; box-shadow: var(--schaduw-groot); overflow: hidden;
  will-change: transform;
}
.mock-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; border-bottom: 1px solid var(--rand); background: #fbfaf8;
}
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-sterk); }
.mock-bar i {
  font-style: normal; font-size: .72rem; color: var(--ink-mist);
  background: var(--bg); border-radius: 6px; padding: 3px 40px; margin-left: 14px;
}
.mock-body { padding: 18px 20px 22px; }
.mock-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.mock-nav b { width: 52px; height: 9px; border-radius: 4px; background: var(--navy); }
.mock-nav u { width: 30px; height: 6px; border-radius: 4px; background: var(--rand-sterk); }
.mock-nav em { width: 58px; height: 18px; border-radius: 999px; background: var(--navy); margin-left: auto; }
.mock-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-bottom: 16px; }
.mock-lijnen span { display: block; height: 12px; border-radius: 5px; background: var(--ink); opacity: .88; margin-bottom: 8px; }
.mock-lijnen .l1 { width: 92%; }
.mock-lijnen .l2 { width: 70%; }
.mock-lijnen .l3 { width: 45%; height: 7px; background: var(--rand-sterk); opacity: 1; margin-top: 12px; }
.mock-lijnen em { display: block; width: 76px; height: 22px; border-radius: 999px; background: var(--oranje); margin-top: 14px; }
.mock-beeld {
  border-radius: 10px; min-height: 96px;
  background: linear-gradient(135deg, #16304f 0%, #2a5fa8 100%);
}
.mock-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-kaarten span { height: 44px; border-radius: 9px; background: var(--bg); border: 1px solid var(--rand); }

.chip-float, .stat-float {
  position: absolute; display: flex; align-items: center; gap: 11px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--schaduw-groot);
  will-change: transform;
}
.chip-float svg { width: 20px; height: 20px; color: var(--blauw); flex-shrink: 0; }
.chip-float b { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; }
.chip-float i { display: block; font-style: normal; font-size: .74rem; color: var(--ink-mist); }
.chip-float .sterren { color: var(--oranje); font-size: .8rem; letter-spacing: 2px; }
.chip-aanvraag { top: 2%; right: 0; }
.chip-review { bottom: 26%; left: -2%; }
.chip-afspraak { bottom: 4%; right: 8%; }
.stat-float {
  top: 38%; right: -3%;
  flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px;
}
.stat-float i { font-style: normal; font-size: .72rem; color: var(--ink-mist); }
.stat-float b { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-float svg { width: 80px; height: 28px; stroke: var(--blauw); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============ STATEMENT ============ */
.statement {
  padding: 96px 0 104px; overflow: hidden;
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  background: var(--wit);
}
.statement-regel {
  font-size: clamp(2.2rem, 6.2vw, 5.4rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.08;
  white-space: nowrap; will-change: transform;
}
.statement-regel em {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; color: var(--blauw);
}
.statement .r1 { padding-left: 6vw; }
.statement .r2 { text-align: right; padding-right: 6vw; margin-top: .18em; color: var(--ink); }
.statement .r2 em { color: var(--navy); }

/* ============ SECTIES ALGEMEEN ============ */
.sectie { padding: 116px 0; }
.sectie-diep { background: var(--bg-diep); }
.sectie-kop { max-width: 620px; margin-bottom: 56px; }
.sectie-kop h2, .proces-links h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 14px 0 16px; }
.sectie-kop p { color: var(--ink-zacht); }
.sectie-kop a { color: var(--navy); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blauw);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: var(--oranje); transform-origin: left;
  transition: transform .7s var(--ease-luxe) .15s;
}
.js .sectie-kop .eyebrow::before { transform: scaleX(0); }
.js .sectie-kop .eyebrow.is-zichtbaar::before { transform: scaleX(1); }

/* --- decoratieve vormen die met de scroll meebewegen --- */
.heeft-deco { position: relative; overflow: hidden; }
.heeft-deco > .container { position: relative; z-index: 1; }
.deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; will-change: transform; }
.deco-ring { border: 1px solid rgba(22,48,79,.08); border-radius: 50%; }
.deco-letter {
  font-family: var(--font-serif); font-style: italic; line-height: 1;
  color: rgba(22, 48, 79, .045);
}
.deco-plus { width: 16px; height: 16px; }
.deco-plus::before, .deco-plus::after { content: ""; position: absolute; background: rgba(232,99,10,.28); border-radius: 1px; }
.deco-plus::before { left: 0; right: 0; top: 7px; height: 1.6px; }
.deco-plus::after { top: 0; bottom: 0; left: 7.2px; width: 1.6px; }
.dp-portfolio { width: 460px; height: 460px; right: -160px; top: -120px; }
.dl-portfolio { font-size: clamp(16rem, 30vw, 26rem); left: -40px; bottom: -140px; }
.dp-pakketten { width: 520px; height: 520px; left: -200px; bottom: -180px; }
.dpl-pakketten { right: 8%; top: 120px; }
.dp-contact { width: 420px; height: 420px; right: -140px; bottom: -160px; }
.dl-faq { font-size: clamp(14rem, 26vw, 22rem); right: -20px; top: 40px; }

/* ============ DIENSTEN (filmstrook: zorg → uitkomst) ============ */
/* mobiel-eerst: verticale stapel panelen; JS zet .is-film voor het
   gepinde, horizontaal schuivende gedrag op desktop */
.dienst-strip { position: relative; }
.dienst-spoor {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1180px; margin: 0 auto; padding: 0 28px;
}
.dienst-paneel {
  position: relative;
  display: grid; grid-template-columns: 1.08fr .92fr;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--schaduw-groot);
}
.paneel-tekst {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 14px;
  padding: 52px 58px;
}
.paneel-nr { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--ink-mist); }
.paneel-nr em { color: var(--oranje); font-size: 1.4rem; }
.paneel-pijn {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.35;
  color: var(--ink-zacht);
}
/* de zorg wordt doorgestreept: line-through is wrap-veilig op elke regel;
   JS laat de kleur infaden, zonder JS/bij reduced motion staat hij er al */
.pijn-tekst {
  text-decoration: line-through;
  text-decoration-color: var(--oranje);
  text-decoration-thickness: 2px;
}
.paneel-kop {
  font-size: clamp(1.65rem, 2.6vw, 2.4rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.12;
}
.paneel-kop em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blauw); }
.paneel-uitleg { color: var(--ink-zacht); font-size: .98rem; max-width: 36em; }
.paneel-punten { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.paneel-punten li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--ink-zacht); }
.paneel-punten li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(42,95,168,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a5fa8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.paneel-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }

/* --- donkere variant: het oog blijft haken op het ritme licht/donker --- */
.dienst-paneel.is-donker { background: var(--navy-diep); border-color: rgba(255,255,255,.12); }
.dienst-paneel.is-donker .paneel-kop { color: var(--wit); }
.dienst-paneel.is-donker .paneel-kop em { color: #9db8dd; }
.dienst-paneel.is-donker .paneel-pijn { color: rgba(255,255,255,.55); }
.dienst-paneel.is-donker .paneel-nr { color: rgba(255,255,255,.45); }
.dienst-paneel.is-donker .paneel-uitleg,
.dienst-paneel.is-donker .paneel-punten li { color: rgba(255,255,255,.78); }
.dienst-paneel.is-donker .paneel-punten li::before {
  background-color: rgba(255,255,255,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db8dd' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.dienst-paneel.is-donker .dienst-cta-notitie { color: rgba(255,255,255,.5); }

/* --- visuele zijde: navy vlak met mini-mockup per zorg --- */
.paneel-visual {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 300px; padding: 40px 34px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.13) 1px, transparent 1.6px) 0 0 / 24px 24px,
    linear-gradient(145deg, var(--navy-diep) 0%, var(--navy) 55%, var(--blauw) 130%);
}
.pv-water {
  position: absolute; right: -4%; bottom: -16%;
  font-family: var(--font-serif); font-style: italic; line-height: 1;
  font-size: clamp(9rem, 18vw, 15rem); color: rgba(255,255,255,.06);
  pointer-events: none; user-select: none;
}
.pv-chip {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--wit); border-radius: 12px; padding: 10px 16px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
}
.pv-chip b { font-size: .85rem; line-height: 1.3; }
.pv-chip i { font-style: normal; font-size: .74rem; color: var(--ink-mist); }
/* 01: mini-browser */
.pv-browser {
  position: relative; width: min(300px, 100%);
  background: var(--wit); border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.5);
}
.pv-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--rand); background: #fbfaf8; }
.pv-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--rand-sterk); }
.pv-bar i { font-style: normal; font-size: .68rem; color: var(--ink-mist); background: var(--bg); border-radius: 5px; padding: 2px 14px; margin-left: 8px; }
.pv-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.pv-lijn { height: 8px; width: 60%; border-radius: 4px; background: var(--rand-sterk); }
.pv-lijn.b { height: 11px; width: 82%; background: var(--ink); opacity: .85; }
.pv-blok { height: 52px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--blauw)); }
.pv-pill { width: 78px; height: 20px; border-radius: 999px; background: var(--oranje); }
/* 02: zoekresultaat */
.pv-zoek { position: relative; width: min(300px, 100%); display: flex; flex-direction: column; gap: 10px; }
.pv-zoekbalk {
  display: flex; align-items: center; gap: 9px;
  background: var(--wit); border-radius: 999px; padding: 10px 18px;
  font-size: .8rem; font-weight: 500; color: var(--ink-zacht);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.45);
}
.pv-zoekbalk svg { width: 14px; height: 14px; color: var(--ink-mist); flex-shrink: 0; }
.pv-resultaat {
  display: flex; align-items: center; gap: 11px;
  background: var(--wit); border-radius: 12px; padding: 11px 14px;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.45);
}
.pv-resultaat.is-top { border: 1.5px solid rgba(232,99,10,.55); }
.pv-resultaat.is-vaag { opacity: .55; }
.pv-resultaat em { margin-left: auto; font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--oranje); }
.pv-resultaat b { display: block; font-size: .8rem; line-height: 1.25; }
.pv-resultaat i { display: block; font-style: normal; font-size: .7rem; color: var(--ink-mist); }
.pv-fav { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--blauw)); flex-shrink: 0; }
.pv-fav.grijs { background: var(--rand-sterk); }
.pv-skelet { display: flex; flex-direction: column; gap: 5px; }
.pv-skelet b { width: 96px; height: 8px; border-radius: 4px; background: var(--rand-sterk); }
.pv-skelet i { width: 64px; height: 6px; border-radius: 4px; background: var(--rand); }
/* 03: agenda */
.pv-agenda {
  position: relative; width: min(280px, 100%);
  background: var(--wit); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.5);
}
.pv-dagen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pv-dagen span {
  height: 32px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 600; color: var(--ink-mist);
}
.pv-dagen .is-actief { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.pv-sloten { display: flex; gap: 8px; }
.pv-sloten span {
  flex: 1; text-align: center; padding: 7px 0; border-radius: 999px;
  border: 1px solid var(--rand-sterk);
  font-size: .72rem; font-weight: 600; color: var(--ink-zacht);
}
.pv-sloten .is-gekozen { background: var(--oranje); border-color: var(--oranje); color: var(--wit); }
/* 04: chat */
.pv-chat { position: relative; width: min(290px, 100%); display: flex; flex-direction: column; gap: 10px; }
.pv-bubbel {
  max-width: 86%; padding: 10px 15px; border-radius: 14px;
  font-size: .8rem; line-height: 1.4;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.45);
}
.pv-bubbel.links { align-self: flex-start; background: var(--wit); color: var(--ink); border-bottom-left-radius: 4px; }
.pv-bubbel.rechts { align-self: flex-end; background: #d9f2e0; color: #14683a; font-weight: 600; border-bottom-right-radius: 4px; }

/* --- filmmodus (JS, alleen desktop): sectie pint, spoor schuift horizontaal --- */
.dienst-strip.is-film {
  height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.dienst-strip.is-film .dienst-spoor {
  flex-direction: row; align-items: stretch; gap: 36px;
  max-width: none; width: max-content; margin: 0;
  padding: 0 max(28px, calc((100vw - 1124px) / 2));
  will-change: transform;
}
.dienst-strip.is-film .dienst-paneel {
  width: min(1124px, calc(100vw - 96px));
  max-height: calc(100vh - 170px);
  flex-shrink: 0;
}
.dienst-voortgang { display: none; }
.dienst-strip.is-film .dienst-voortgang {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
}
.voortgang-teller {
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.voortgang-teller i { color: var(--ink-mist); }
.voortgang-balk {
  width: 180px; height: 2px; border-radius: 2px; overflow: hidden;
  background: var(--rand-sterk);
}
.voortgang-balk i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blauw), var(--navy));
  transform: scaleX(0); transform-origin: left;
}

/* --- gedeeld detailvenster (over-mij) --- */
.detail-achter {
  position: absolute; inset: 0;
  background: rgba(13, 33, 56, .45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.detail-kader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--wit); border-radius: 24px; padding: 52px 56px;
  box-shadow: 0 40px 120px -20px rgba(13,33,56,.5);
}
.detail-sluit {
  position: absolute; top: 22px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--rand); cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.detail-sluit:hover { background: var(--bg-diep); transform: rotate(90deg); }
.detail-sluit span {
  position: absolute; left: 12px; right: 12px; top: 19px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.detail-sluit span:first-child { transform: rotate(45deg); }
.detail-sluit span:last-child { transform: rotate(-45deg); }
.detail-nr { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--oranje); display: block; margin-bottom: 10px; }
.detail-titel { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 18px; }
.detail-titel em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blauw); }
.detail-inhoud p { color: var(--ink-zacht); margin-bottom: 22px; }
.detail-inhoud ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.detail-inhoud li { position: relative; padding-left: 28px; font-size: .96rem; color: var(--ink-zacht); }
.detail-inhoud li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(42,95,168,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a5fa8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.dienst-cta { display: flex; align-items: center; gap: 16px; }
.dienst-cta-notitie {
  font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--ink-mist);
}

/* ============ PROCES ============ */
.proces-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.proces-links { position: sticky; top: 120px; }
.proces-links p { color: var(--ink-zacht); margin-bottom: 40px; }
.proces-nav { list-style: none; position: relative; padding-left: 4px; }
.proces-track {
  position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px;
  background: var(--rand-sterk); border-radius: 2px;
}
.proces-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--blauw), var(--navy)); border-radius: 2px;
}
.proces-nav li { position: relative; }
.proces-nav button {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 13px 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans);
}
.proces-nav i {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1;
  background: var(--bg-diep); border: 2px solid var(--rand-sterk);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.proces-nav li.is-actief i::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(42,95,168,.4);
  animation: dot-rimpel 1.8s ease-out infinite;
}
@keyframes dot-rimpel {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}
.proces-nav b { display: block; font-size: 1.06rem; font-weight: 600; color: var(--ink-mist); transition: color .3s ease; }
.proces-nav em { display: block; font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--ink-mist); opacity: 0; transform: translateY(-2px); transition: opacity .3s ease, transform .3s ease; }
.proces-nav li.is-af i { border-color: var(--blauw); background: var(--blauw); }
.proces-nav li.is-actief i { border-color: var(--navy); background: var(--wit); transform: scale(1.15); box-shadow: 0 0 0 5px rgba(42,95,168,.14); }
.proces-nav li.is-actief b, .proces-nav li.is-af b { color: var(--ink); }
.proces-nav li.is-actief em { opacity: 1; transform: translateY(0); }

.proces-stappen { display: flex; flex-direction: column; gap: 26px; }
.proces-stap {
  position: relative; overflow: hidden;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 42px 44px; min-height: 46vh;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.proces-stap.is-actief { border-color: rgba(42,95,168,.35); box-shadow: var(--schaduw-groot); }
.proces-stap::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--blauw), var(--navy));
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease-luxe);
}
.proces-stap.is-actief::after { transform: scaleY(1); }
.stap-water {
  position: absolute; right: 8px; top: 50%;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(8rem, 14vw, 13rem); line-height: 1;
  color: rgba(22, 48, 79, .05); pointer-events: none; user-select: none;
  will-change: transform;
}
.stap-nr {
  font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--oranje);
  display: block; margin-bottom: 12px; position: relative;
}
.proces-stap h3 { font-size: 1.65rem; margin-bottom: 14px; position: relative; }
.proces-stap p { color: var(--ink-zacht); margin-bottom: 22px; position: relative; max-width: 32em; }
.proces-stap ul { list-style: none; display: flex; flex-direction: column; gap: 10px; position: relative; }
.proces-stap li {
  position: relative; padding-left: 28px; font-size: .96rem; color: var(--ink-zacht);
  opacity: .35; transform: translateX(-8px);
  transition: opacity .5s ease, transform .5s ease;
}
.proces-stap.is-actief li { opacity: 1; transform: translateX(0); }
.proces-stap.is-actief li:nth-child(1) { transition-delay: .1s; }
.proces-stap.is-actief li:nth-child(2) { transition-delay: .22s; }
.proces-stap.is-actief li:nth-child(3) { transition-delay: .34s; }
.proces-stap li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px;
  border-radius: 50%; background: rgba(42,95,168,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a5fa8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}

/* ============ PORTFOLIO ============ */
.founding {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 24px;
  padding: 56px; box-shadow: var(--schaduw);
}
.founding-tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(232,99,10,.09); border: 1px solid rgba(232,99,10,.25);
  color: var(--oranje); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.founding h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.founding p { color: var(--ink-zacht); margin-bottom: 28px; }
.founding-slot { position: relative; }
.slot-kader {
  border: 2px dashed var(--rand-sterk); border-radius: 18px; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(16,24,40,.015) 14px 28px);
  transition: border-color .4s ease;
}
.founding:hover .slot-kader { border-color: rgba(42,95,168,.45); }
.slot-kader span {
  font-family: var(--font-serif); font-style: italic; font-size: 1.5rem;
  color: var(--ink-mist); text-align: center; line-height: 1.3;
}

/* ============ PAKKETTEN ============ */
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; perspective: 1200px; }
.prijs-kaart {
  position: relative; background: var(--wit); border: 1px solid var(--rand); border-radius: 22px;
  padding: 38px 32px;
  transition: box-shadow .35s ease, border-color .35s ease;
  transform-style: preserve-3d; will-change: transform;
}
.prijs-kaart:hover { box-shadow: var(--schaduw-groot); border-color: var(--rand-sterk); }
.prijs-kaart h3 { font-size: 1.3rem; margin-bottom: 10px; }
.prijs-kaart .omschrijving { font-size: .93rem; color: var(--ink-zacht); min-height: 4.4em; margin-bottom: 18px; }
.prijs { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.prijs .prijs-notitie { font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-mist); margin-left: 10px; }
.prijs-kaart ul { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.prijs-kaart li { position: relative; padding-left: 28px; font-size: .94rem; color: var(--ink-zacht); }
.prijs-kaart li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(42,95,168,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a5fa8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.prijs-kaart li.kop { padding-left: 0; font-weight: 700; color: var(--ink); }
.prijs-kaart li.kop::before { display: none; }
.prijs-kaart .waarde { display: inline-block; margin-left: 6px; font-size: .8rem; color: var(--oranje); font-weight: 600; }
.prijs-kaart li strong { color: var(--navy); font-weight: 700; }
.prijs-kaart li s { color: var(--ink-mist); text-decoration-color: var(--oranje); text-decoration-thickness: 2px; margin-right: 3px; }
.prijs-kaart .voetnoot { margin-top: 20px; font-size: .8rem; color: var(--ink-mist); }
.prijs-kaart.is-populair {
  border: 1.5px solid var(--navy); box-shadow: var(--schaduw-groot);
  background:
    linear-gradient(105deg, transparent 40%, rgba(42,95,168,.06) 50%, transparent 60%) no-repeat 220% 0 / 250% 100%,
    var(--wit);
  animation: kaart-glans 5.5s ease-in-out infinite;
}
@keyframes kaart-glans {
  0%, 55% { background-position: 220% 0; }
  75%, 100% { background-position: -120% 0; }
}
.populair-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: var(--wit); white-space: nowrap;
  padding: 6px 18px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  z-index: 2;
}

.hosting-kop { margin: 84px 0 32px; max-width: 620px; }
.hosting-kop h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 8px; }
.hosting-kop p { color: var(--ink-zacht); font-size: .98rem; }
.hosting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hosting-kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hosting-kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.hosting-kaart.is-actief { border-color: rgba(42,95,168,.4); }
.hosting-kaart h4 { font-size: 1rem; margin-bottom: 8px; }
.hosting-kaart .hprijs { font-size: 1.35rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 10px; }
.hosting-kaart .hprijs span { font-size: .8rem; font-weight: 500; color: var(--ink-mist); }
.hosting-kaart p { font-size: .88rem; color: var(--ink-zacht); }

.maatwerk {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-top: 48px; padding: 30px 36px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius);
}
.maatwerk p { max-width: 42em; font-size: .96rem; color: var(--ink-zacht); }
.maatwerk em { font-family: var(--font-serif); font-style: italic; color: var(--navy); font-size: 1.08rem; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: start; }
.contact-form-card, .contact-info-card {
  background: var(--wit); border: 1px solid var(--rand); border-radius: 22px; padding: 40px;
  box-shadow: var(--schaduw);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--rand-sterk); background: var(--bg);
  font-family: var(--font-sans); font-size: .95rem; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blauw); background: var(--wit);
  box-shadow: 0 0 0 4px rgba(42,95,168,.12);
}
.form-group textarea { resize: vertical; }
/* korte flits op het pakketveld nadat een pakketknop is aangeklikt */
.form-group.is-flits select { animation: veld-flits 1.8s ease .5s; }
@keyframes veld-flits {
  0%, 100% { border-color: var(--rand-sterk); box-shadow: none; }
  20%, 65% { border-color: var(--blauw); box-shadow: 0 0 0 4px rgba(42,95,168,.16); background: var(--wit); }
}
.form-note { margin-top: 14px; font-size: .78rem; color: var(--ink-mist); }
.form-melding { display: none; padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; font-size: .92rem; font-weight: 500; }
.form-melding.is-ok { display: block; background: rgba(31,168,85,.1); border: 1px solid rgba(31,168,85,.3); color: #14683a; }
.form-melding.is-fout { display: block; background: rgba(214,60,60,.1); border: 1px solid rgba(214,60,60,.3); color: #a12626; }

.contact-zijde { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card { padding: 32px; }
.contact-info-card h3 { font-size: 1.15rem; margin-bottom: 20px; }
.info-rij { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .95rem; }
.info-rij svg { width: 19px; height: 19px; color: var(--blauw); flex-shrink: 0; }
.info-rij a { color: var(--ink); text-decoration: none; font-weight: 500; }
.info-rij a:hover { color: var(--navy); text-decoration: underline; }
.contact-info-card .btn-whatsapp { margin-top: 10px; }

/* --- over mij: klein kaartje onder de contactgegevens --- */
.over-kaart {
  display: flex; align-items: center; gap: 18px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: 22px;
  padding: 22px 24px; box-shadow: var(--schaduw);
  cursor: pointer; will-change: transform;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.over-kaart:hover, .over-kaart:focus-visible { border-color: rgba(42,95,168,.4); box-shadow: var(--schaduw-groot); outline: none; }
.over-foto {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 18px;
  border: 2px dashed var(--rand-sterk);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(16,24,40,.02) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic; font-size: .78rem; color: var(--ink-mist);
  text-align: center; line-height: 1.2;
}
.over-kaart b { display: block; font-size: 1.02rem; }
.over-kaart i { display: block; font-family: var(--font-serif); font-style: italic; font-size: .92rem; color: var(--ink-mist); }
.over-open {
  display: inline-block; margin-top: 6px;
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; color: var(--navy);
  transition: letter-spacing .35s ease, color .35s ease;
}
.over-kaart:hover .over-open { letter-spacing: .16em; color: var(--blauw); }

/* --- over mij: groot detailvenster --- */
.over-detail { position: fixed; inset: 0; z-index: 300; display: none; }
.over-detail.is-open { display: block; }
.over-detail-kop { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.over-detail-kop .detail-titel { margin-bottom: 0; }
.over-foto.groot { width: 108px; height: 108px; border-radius: 24px; font-size: .92rem; }

/* ============ FAQ ============ */
.faq-cat { font-size: 1.1rem; margin: 42px 0 16px; }
.accordion { display: flex; flex-direction: column; gap: 10px; }
.accordion-item { background: var(--wit); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; transition: border-color .25s ease; }
.accordion-item.is-open { border-color: rgba(42,95,168,.35); }
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
  padding: 19px 22px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink);
  transition: color .25s ease;
}
.accordion-trigger:hover { color: var(--blauw); }
.plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.plus::before, .plus::after {
  content: ""; position: absolute; background: var(--navy); border-radius: 2px;
  transition: transform .3s ease;
}
.plus::before { left: 0; right: 0; top: 7px; height: 2px; }
.plus::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.accordion-item.is-open .plus::after { transform: scaleY(0); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.accordion-panel-inner { padding: 0 22px 20px; font-size: .95rem; color: var(--ink-zacht); }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--navy-diep); color: rgba(255,255,255,.75);
  padding: 96px 0 36px; margin-top: 0;
}
.footer-cta { text-align: center; max-width: 640px; margin: 0 auto 88px; }
.footer-cta h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--wit); margin-bottom: 16px; }
.footer-cta h2 em, .footer-cta em { color: #9db8dd; }
.footer-cta p { margin-bottom: 30px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-top: 48px; border-top: 1px solid rgba(255,255,255,.12);
}
.footer-brand .logo { color: var(--wit); }
.footer-brand .logo span { color: #7fa3d6; }
.footer-brand p { margin-top: 12px; font-size: .92rem; max-width: 26em; }
.footer-grid h4 { color: var(--wit); font-size: .95rem; margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .92rem; transition: color .25s ease, padding-left .25s ease; }
.footer-grid ul a:hover { color: var(--wit); padding-left: 6px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem; color: rgba(255,255,255,.5);
}

/* ============ WHATSAPP FLOAT ============ */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1fa855; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(31,168,85,.55);
  transition: transform .25s ease;
}
.whatsapp-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(31,168,85,.55);
  animation: wa-puls 3.2s ease-out infinite;
}
@keyframes wa-puls {
  0%, 60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); }
.whatsapp-float svg { width: 28px; height: 28px; fill: var(--wit); }

/* ============ ZACHTE KLEURGLOED ============ */
/* grote, heel zachte gloedvlekken die per sectie traag ademen en met de scroll meeschuiven */
.heeft-gloed { position: relative; overflow: hidden; }
.heeft-gloed > .container { position: relative; z-index: 1; }
.gloed { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gloed i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.gloed .blauw  { background: radial-gradient(closest-side, rgba(42,95,168,.13), transparent 72%); }
.gloed .navy   { background: radial-gradient(closest-side, rgba(22,48,79,.11), transparent 72%); }
.gloed .oranje { background: radial-gradient(closest-side, rgba(232,99,10,.08), transparent 70%); }
.gloed .licht  { background: radial-gradient(closest-side, rgba(127,163,214,.16), transparent 72%); }

.statement .gloed .g1 { width: 720px; height: 480px; right: 4%; top: -46%; }
.statement .gloed .g2 { width: 560px; height: 420px; left: 2%; bottom: -52%; }
.statement-regel { position: relative; z-index: 1; }

#diensten .gloed .g1 { width: 860px; height: 640px; left: -14%; top: -6%; }
#diensten .gloed .g2 { width: 620px; height: 520px; right: -10%; bottom: -14%; }

#proces .gloed .g1 { width: 800px; height: 620px; right: -10%; top: -12%; }
#proces .gloed .g2 { width: 660px; height: 540px; left: -8%; bottom: -16%; }

#portfolio .gloed .g1 { width: 700px; height: 560px; left: 24%; top: -20%; }

#pakketten .gloed .g1 { width: 860px; height: 660px; right: -12%; top: 2%; }
#pakketten .gloed .g2 { width: 540px; height: 460px; left: 2%; bottom: -12%; }

#contact .gloed .g1 { width: 760px; height: 600px; left: -10%; top: -10%; }
#contact .gloed .g2 { width: 600px; height: 500px; right: 6%; bottom: -20%; }

#faq .gloed .g1 { width: 640px; height: 520px; right: 16%; top: -12%; }

.site-footer .gloed .g1 { width: 960px; height: 560px; left: 50%; margin-left: -480px; top: -34%; }
.site-footer .gloed .g2 { width: 700px; height: 520px; left: -12%; bottom: -24%; }

/* ============ LOGIN (/admin) ============ */
.login-pagina {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(42,95,168,.10), transparent 60%),
    radial-gradient(640px 400px at -8% 80%, rgba(232,99,10,.05), transparent 55%),
    var(--bg);
}
.login-geo { position: absolute; inset: 0; pointer-events: none; }
.login-geo > span { position: absolute; display: block; }
.login-geo .geo-ring.lg1 { width: 520px; height: 520px; left: -180px; top: 55%; }
.login-geo .geo-ring.lg2 { width: 300px; height: 300px; right: -70px; top: -80px; border-color: rgba(42,95,168,.13); border-style: dashed; }
.login-geo .geo-plus.lg3 { left: 14%; top: 18%; }
.login-geo .geo-plus.lg4 { right: 22%; bottom: 16%; }
.login-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 26px 28px 0;
}
.login-terug {
  color: var(--ink-zacht); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: color .25s ease;
}
.login-terug:hover { color: var(--navy); }
.login-main {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 28px 72px;
}
.login-kaart {
  width: min(460px, 100%);
  background: var(--wit); border: 1px solid var(--rand); border-radius: 24px;
  padding: 46px 44px; box-shadow: var(--schaduw-groot);
}
.login-kaart h1 { font-size: 1.9rem; margin: 12px 0 8px; }
.login-kaart h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--navy); }
.login-sub { font-size: .95rem; color: var(--ink-zacht); margin-bottom: 26px; }
.login-schakel { margin-top: 20px; text-align: center; font-size: .92rem; }
.login-schakel a { color: var(--navy); font-weight: 600; text-decoration: none; }
.login-schakel a:hover { text-decoration: underline; }
.login-voet { margin-top: 24px; max-width: 460px; text-align: center; font-size: .88rem; color: var(--ink-mist); }
.login-voet a { color: var(--navy); }
.form-melding.is-info { display: block; background: rgba(42,95,168,.08); border: 1px solid rgba(42,95,168,.25); color: var(--navy); }
@media (max-width: 640px) {
  .login-kaart { padding: 34px 26px; }
  .login-main { padding: 28px 20px 56px; }
}

/* ============ REVEAL ============ */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-hero] { opacity: 0; }
.js .sectie-kop > p { opacity: 0; }
.js .sectie-kop .eyebrow { opacity: 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1060px) {
  .hero-layout { grid-template-columns: 1fr; gap: 64px; }
  .hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .proces-layout { grid-template-columns: 1fr; gap: 48px; }
  .proces-links { position: static; }
  .proces-stap { min-height: 0; padding: 36px 32px; }
  .prijzen, .hosting-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .dienst-paneel { grid-template-columns: 1fr; }
  .paneel-visual { order: -1; min-height: 240px; padding: 32px 26px; }
  .paneel-tekst { padding: 32px 34px 40px; }
  .overlay-visual { display: none; }
}
@media (max-width: 900px) {
  .header-nav { display: none; }
  .cta-wrap { display: none; }
  .menu-btn { width: auto; padding: 12px 10px; opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) {
  .sectie { padding: 84px 0; }
  .hero { padding: 118px 0 72px; }
  .statement { padding: 64px 0 72px; }
  .statement-regel { white-space: normal; font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .statement .r1 { padding: 0 28px; }
  .statement .r2 { padding: 0 28px; margin-top: .35em; }
  .prijzen, .hosting-grid, .form-row { grid-template-columns: 1fr; }
  .founding { grid-template-columns: 1fr; padding: 36px 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 420px; }
  .chip-review { left: 0; }
  .stat-float { right: 0; }
  .contact-form-card { padding: 28px 22px; }
  .paneel-tekst { padding: 28px 24px 36px; }
  .paneel-visual { min-height: 210px; }
  .paneel-kop { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .detail-kader { padding: 40px 26px; }
  .overlay-nav a { font-size: clamp(1.6rem, 3.4vh, 2.2rem); }
  .overlay-voet { flex-direction: column; align-items: flex-start; }
  .maatwerk { padding: 26px 24px; }
  .geo-ring.g1 { width: 380px; height: 380px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-chip .stip, .whatsapp-float::before, .prijs-kaart.is-populair::after,
  .proces-nav li.is-actief i::after { animation: none; }
  .js [data-reveal], .js [data-hero],
  .js .sectie-kop > p, .js .sectie-kop .eyebrow { opacity: 1; transform: none; }
  .js .woord-inner { transform: none; }
  .js .sectie-kop .eyebrow::before { transform: none; }
  .header-shell, .header-nav, .cta-wrap, .menu-btn { transition: none; }
}