/* Gemaakt door scripts/bouw.mjs uit ontwerp/basis.css en ontwerp/pagina.css. Niet met de hand aanpassen. */

/* Layout: brede vaste menubalk, 1160px-kolom, zachte diagonale mint-naar-limoen grond, bento met echte portaal-visuals. Bewust één lichte look. */
:root {
  color-scheme: light;
  --grond-a: #E4F2EA;
  --grond-b: #EAF6EF;
  /* Groenschaal, gebaseerd op het groen van de F in het portaal (#3DDC84) */
  --g50: #ECFBF3; --g100: #D3F6E3; --g200: #A7EDC7; --g300: #6FE3A5; --g400: #3DDC84; --g500: #22B868; --g600: #189152; --g700: #146C43; --g800: #0E4F31; --g900: #0A3522;
  --grond-c: #EEF4F2;
  --vlak: #FFFFFF;
  --mint: #ECFBF3;
  --mint-rand: #D3F6E3;
  --inkt: #121715;
  --inkt-2: #3A4440;
  --grijs: #66716C;
  --grijs-licht: #A8AFAB;
  --lijn: #DCE5DF;
  --groen: #146C43;
  --groen-licht: #3DDC84;
  --oranje: #C77A12;
  --oranje-zacht: #FBF1E2;
  --blauw-zacht: #E9EFFA;
  --blauw: #2F5DAA;
  --paars-zacht: #F1ECFA;
  --paars: #6B4BB0;
  --menu: #111614;
  --verloop: linear-gradient(120deg, var(--g800) 0%, var(--g700) 30%, var(--g500) 68%, var(--g400) 100%);
  --verloop-diep: linear-gradient(120deg, var(--g900) 0%, var(--g800) 35%, var(--g700) 70%, var(--g600) 100%);
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breed: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { transition: none !important; animation: none !important; } }
body { margin: 0; font: 400 16px/1.6 var(--font); color: var(--inkt); background: linear-gradient(135deg, var(--grond-a) 0%, var(--grond-c) 45%, var(--grond-b) 100%) fixed, var(--grond-a); overflow-x: hidden; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--breed); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sectie { padding-block: 104px; }
.oog { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); font-size: 13px; font-weight: 500; color: var(--inkt-2); }
.oog-kop { display: inline-flex; align-items: center; gap: 8px; }
.oog-scheid { color: var(--groen-licht); font-weight: 700; margin: 0 -2px; }
.oog i { width: 7px; height: 7px; border-radius: 50%; background: var(--groen-licht); flex: none; }
.kop2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.lead { color: var(--inkt-2); font-size: 17px; max-width: 60ch; }
.koprij { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 48px; align-items: end; margin-bottom: 48px; }
.koprij > * { min-width: 0; }
.koprij .links { display: grid; gap: 16px; justify-items: start; }
.koprij p { color: var(--inkt-2); }
@media (max-width: 820px) { .koprij { grid-template-columns: 1fr; } }
.midden { display: grid; justify-items: center; text-align: center; gap: 16px; }
.midden .lead { text-align: center; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; white-space: nowrap; }
.knop:hover { transform: translateY(-1px); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--groen-licht); outline-offset: 2px; }
.knop-hoofd { background: var(--inkt); color: #fff; }
.knop-hoofd:hover { background: var(--groen); }
.knop-rand { background: rgba(255,255,255,.7); border-color: var(--lijn); color: var(--inkt); }
.knop-rand:hover { border-color: var(--inkt); }
.knop-groen { background: var(--groen-licht); color: var(--inkt); }
.knop-wit { background: #fff; color: var(--inkt); }
.knop-klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.vink { list-style: none; padding: 0; display: grid; gap: 10px; }
.vink li { display: flex; gap: 10px; align-items: flex-start; }
.vink li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.sterren { color: #E8A21B; letter-spacing: 2px; }


/* Logo GetFource: Get + schuin blok met Fource, By Fource Online in dezelfde letter */
.gf { --tekst: var(--inkt); --blok: #3DDC84; display: inline-flex; align-items: center; gap: .32em; color: var(--tekst); text-decoration: none; font-size: 27px; flex: none; }
.gf-woord { font: 800 1em/1 "Outfit", var(--font); letter-spacing: -0.045em; display: inline-flex; align-items: center; white-space: nowrap; isolation: isolate; }
.gf-woord .get { padding-right: .14em; }
.gf-woord .gf-blok { position: relative; color: #fff; padding: .16em .24em .2em; }
.gf-woord .gf-blok::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blok); border-radius: .14em; transform: skewY(-5deg); transform-origin: 0 100%; transition: transform .3s; }
.gf:hover .gf-woord .gf-blok::before { transform: skewY(-7deg); }
.gf-by { font: 700 10.5px/1.2 "Outfit", var(--font); color: var(--tekst); white-space: nowrap; border-left: 2px solid currentColor; padding: 1px 0 1px .6em; }
.gf.gf-onder { display: inline-grid; gap: .14em; font-size: 34px; }
.gf.gf-onder .gf-by { border: 0; padding: 0 .06em 0 0; justify-self: end; font-size: .3em; line-height: 1; }
.gf.licht { --tekst: #fff; }
@media (max-width: 380px) { .menu .gf { font-size: 23px; } }

/* Menu */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: #fff; }
.menu { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--lijn); }
.menu-balk { display: flex; align-items: center; gap: 36px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px var(--font); letter-spacing: -0.03em; text-decoration: none; flex: none; }
.logo span { width: 32px; height: 32px; border-radius: 9px; background: var(--verloop); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.menu nav { display: flex; gap: 26px; flex: 1; min-width: 0; }
.menu nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--inkt-2); white-space: nowrap; }
.menu nav a:hover { color: var(--groen); }
.menu-rechts { display: flex; align-items: center; gap: 18px; flex: none; }
.menu-rechts .tekstlink { text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.menu-rechts .tekstlink:hover { color: var(--groen); }
.menu-knop { display: none; margin-left: auto; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; height: 42px; padding: 0 14px; font: 600 14px var(--font); color: var(--inkt); gap: 8px; align-items: center; cursor: pointer; }
.menu-knop b { display: grid; gap: 3px; } .menu-knop b i { width: 16px; height: 2px; background: var(--inkt); border-radius: 2px; }
.menu-paneel { border-top: 1px solid var(--lijn); background: #fff; }
.menu-paneel .wrap { display: grid; gap: 2px; padding-block: 10px 20px; }
.menu-paneel a:not(.knop) { padding: 12px 0; text-decoration: none; font-weight: 500; font-size: 17px; border-bottom: 1px solid var(--lijn); }
.menu-paneel .knop { margin-top: 14px; }
@media (max-width: 1060px) { .menu-rechts .tekstlink.kennis { display: none; } }
@media (max-width: 920px) { .menu nav, .menu-rechts { display: none; } .menu-knop { display: inline-flex; } }
@media (min-width: 921px) { .menu-paneel { display: none !important; } }

/* Hero */
.hero { padding-block: 64px 0; position: relative; }
.hero::before { content: ""; position: absolute; left: 50%; top: -60px; width: min(1000px, 100%); height: 560px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(61,220,132,.26), transparent); pointer-events: none; }
.hero .wrap { position: relative; display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero h1 { font-size: clamp(40px, 6.6vw, 76px); line-height: 1.02; letter-spacing: -0.045em; max-width: 18ch; }
.verloop-tekst { background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { text-align: center; font-size: 18px; }
.scan { display: flex; gap: 8px; width: min(580px, 100%); padding: 6px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 999px; box-shadow: 0 10px 30px rgba(20,108,67,.10); }
.scan input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 16px; font: 500 16px var(--font); color: var(--inkt); outline: none; }
.scan:focus-within { border-color: var(--groen); box-shadow: 0 0 0 3px rgba(61,220,132,.3); }
@media (max-width: 520px) { .scan { flex-direction: column; border-radius: 20px; padding: 8px; } .scan input { min-height: 46px; text-align: center; } }
.scan-noot { font-size: 13px; color: var(--grijs); }
.scan-noot.ok { color: var(--groen); font-weight: 500; font-size: 14px; }
.vertrouwen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; font-size: 14px; color: var(--inkt-2); }
.vertrouwen > span { display: inline-flex; align-items: center; gap: 8px; }
.vertrouwen img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.vertrouwen b { font-weight: 600; color: var(--inkt); }

/* Portaal-replica */
.portaal { width: 100%; max-width: 1040px; margin-top: 40px; position: relative; text-align: left; }
.p-venster { background: #F6F6F4; border: 1px solid var(--lijn); border-radius: 18px; box-shadow: 0 40px 90px rgba(18,23,21,.16); overflow: hidden; display: grid; grid-template-columns: 200px 1fr; font-size: 12px; }
.p-menu { background: var(--menu); color: #fff; padding: 16px 10px; display: grid; gap: 3px; align-content: start; }
.p-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 2px 8px 14px; }
.p-logo i { width: 22px; height: 22px; border-radius: 6px; background: var(--groen-licht); color: var(--menu); font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.p-site { border: 1px solid #2A332F; background: #171D1A; border-radius: 9px; padding: 7px 9px; margin-bottom: 10px; }
.p-site small { display: block; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #8C9690; }
.p-site b { font-weight: 600; font-size: 11.5px; }
.p-menu a { padding: 7px 9px; border-radius: 7px; text-decoration: none; color: #C9D2CE; font-size: 11.5px; }
.p-menu a.aan { background: #222A26; color: #fff; }
.p-mike { margin-top: 18px; border-top: 1px solid #2A332F; padding: 12px 6px 0; display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: #C9D2CE; line-height: 1.35; }
.p-mike img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.p-mike b { color: #fff; display: block; }
.p-in { padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.p-kop { display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.p-kop h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.p-kop span { color: var(--grijs); font-size: 11px; }
.p-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.p-tegel { background: #fff; border: 1px solid #E2E4E0; border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.p-tegel small { color: var(--grijs); font-size: 10.5px; }
.p-tegel b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.p-tegel em { font-style: normal; font-size: 10px; color: var(--groen); }
.p-tegel .balkje { height: 4px; background: #EDEEEB; border-radius: 2px; margin-top: 4px; overflow: hidden; } .p-tegel .balkje i { display: block; height: 100%; width: 66%; background: var(--groen); }
.p-tabel { background: #fff; border: 1px solid #E2E4E0; border-radius: 8px; overflow: hidden; }
.p-tabel-kop { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #E2E4E0; font-weight: 600; font-size: 12.5px; }
.p-tabel-kop a { color: var(--groen); font-weight: 500; font-size: 11px; }
.p-rij { display: grid; grid-template-columns: 34px 1fr 92px 108px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid #EDEEEB; }
.p-rij:first-of-type { border-top: 0; }
.p-rij > * { min-width: 0; }
.p-score { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--groen); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 10.5px; }
.p-score.oranje { border-color: var(--oranje); }
.p-score.leeg { border-color: #E2E4E0; color: var(--grijs-licht); }
.p-titel b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-titel small { color: var(--grijs); font-size: 10.5px; }
.p-soort { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; justify-self: start; }
.p-soort.nieuw { background: var(--mint); color: var(--groen); }
.p-soort.update { background: var(--blauw-zacht); color: var(--blauw); }
.p-soort.blog { background: var(--paars-zacht); color: var(--paars); }
.p-status { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt-2); font-size: 11px; white-space: nowrap; }
.p-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k, var(--grijs-licht)); flex: none; }
.p-noot { position: absolute; right: -28px; bottom: -26px; width: 290px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 50px rgba(18,23,21,.16); display: grid; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--inkt-2); }
.p-noot-kop { display: flex; gap: 10px; align-items: center; }
.p-noot-kop img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.p-noot-kop b { display: block; color: var(--inkt); font-size: 13px; } .p-noot-kop small { color: var(--grijs); font-size: 11.5px; }
.p-ai { position: absolute; left: -30px; top: 120px; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 50px rgba(18,23,21,.14); font-size: 12px; color: var(--grijs); line-height: 1.35; }
.p-ai b { display: block; font-size: 22px; color: var(--inkt); letter-spacing: -0.02em; }
.demo-label { margin-top: 44px; font-size: 12px; color: var(--grijs); text-align: center; }
@media (max-width: 1120px) { .p-noot { right: 12px; } .p-ai { left: 12px; } }
@media (max-width: 860px) {
  .p-venster { grid-template-columns: 1fr; }
  .p-menu { display: none; }
  .p-tegels { grid-template-columns: repeat(2, 1fr); }
  .p-ai { display: none; }
  .p-noot { position: static; width: auto; margin-top: 12px; }
  .demo-label { margin-top: 14px; }
}
@media (max-width: 560px) { .p-rij { grid-template-columns: 30px 1fr auto; } .p-rij .p-status { display: none; } .hero .oog-twee { display: inline-grid; justify-items: center; justify-self: center; text-align: center; gap: 1px 8px; border-radius: 18px; padding: 8px 18px; } .hero .oog-scheid { display: none; } .hero .oog-rest { font-size: 12px; color: var(--grijs); } }

/* Logo-slider */
.logos { padding-block: 72px 0; }
.logos p { text-align: center; font-size: 14px; color: var(--grijs); margin-bottom: 22px; }
.slider { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rail { display: flex; gap: 16px; width: max-content; animation: schuif 40s linear infinite; }
.slider:hover .rail { animation-play-state: paused; }
.rail img { height: 84px; width: 190px; object-fit: contain; padding: 10px 18px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.95); border-radius: 18px; transition: transform .3s, box-shadow .3s, background .3s; }
.rail img:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 30px rgba(18,23,21,.10); }
@keyframes schuif { to { transform: translateX(calc(-50% - 8px)); } }

/* Probleem */
.probleem { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.probleem > * { min-width: 0; }
.probleem .tekst { display: grid; gap: 18px; justify-items: start; }
.probleem .tekst p { color: var(--inkt-2); max-width: 52ch; }
.vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.vergelijk div { background: rgba(255,255,255,.7); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; font-size: 14px; color: var(--inkt-2); }
.vergelijk b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin-bottom: 4px; }
.vergelijk div:last-child { background: var(--inkt); color: #E7EDEA; border-color: var(--inkt); }
.vergelijk div:last-child b { color: var(--groen-licht); }
.chat { background: #fff; border: 1px solid var(--lijn); border-radius: 22px; padding: 22px; box-shadow: 0 30px 70px rgba(18,23,21,.10); display: grid; gap: 14px; }
.chat-vraag { justify-self: end; background: var(--mint); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14.5px; max-width: 85%; }
.chat-antw { display: grid; gap: 10px; font-size: 14.5px; color: var(--inkt-2); }
.chat-antw .wie { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--grijs); }
.chat-antw .wie i { width: 22px; height: 22px; border-radius: 50%; background: var(--inkt); display: inline-block; }
.chat-optie { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lijn); }
.chat-optie b { color: var(--inkt); font-weight: 600; }
.chat-optie .nr { width: 22px; height: 22px; border-radius: 50%; background: #F1F3F2; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.chat-optie.jij { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--verloop) border-box; }
.chat-optie.jij .nr { background: var(--groen); color: #fff; }
.chat-optie .tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--groen); background: var(--mint); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.chat-noot { font-size: 12px; color: var(--grijs); }
@media (max-width: 900px) { .probleem { grid-template-columns: 1fr; } }

/* Bento met visuals */
.paneel { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); border-radius: 30px; padding-block: 80px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.blok { border-radius: 24px; min-width: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--vlak); border: 1px solid var(--lijn); }
.blok-tekst { padding: 30px 30px 0; display: grid; gap: 10px; align-content: start; }
.blok h3 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.blok p { color: var(--inkt-2); font-size: 15px; }
.blok .vink { font-size: 14.5px; color: var(--inkt-2); margin-top: 6px; }
.blok.donker { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.blok.donker p, .blok.donker .vink { color: #C9D2CE; }
.blok.donker .vink li::before { background-color: var(--groen-licht); }
.blok.mint { background: var(--mint); border-color: var(--mint-rand); }
.blok-beeld { padding: 26px 30px 30px; display: flex; align-items: flex-end; min-width: 0; }
.blok-beeld > * { width: 100%; min-width: 0; }
.b7 { grid-column: span 7; } .b5 { grid-column: span 5; } .b6 { grid-column: span 6; }
@media (max-width: 920px) { .b7, .b5, .b6 { grid-column: span 12; } }
.kaartje { background: #fff; border: 1px solid #E2E4E0; border-radius: 14px; padding: 16px; color: var(--inkt); box-shadow: 0 14px 34px rgba(18,23,21,.08); }
.meter-rij { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
.meter-rij > * { min-width: 0; }
.meter svg { width: 100%; height: auto; }
.termen { display: flex; flex-wrap: wrap; gap: 6px; }
.term { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--groen); font-weight: 500; }
.term.mist { background: var(--oranje-zacht); color: #9A4A06; }
.klein-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); font-weight: 500; margin-bottom: 8px; }
@media (max-width: 520px) { .meter-rij { grid-template-columns: 1fr; } .meter { max-width: 200px; } }
.qa { display: grid; gap: 6px; }
.qa div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #1B2220; font-size: 13.5px; color: #E7EDEA; }
.qa span { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(61,220,132,.16); color: var(--groen-licht); white-space: nowrap; }
.qa span.let { background: rgba(232,162,27,.16); color: #F2B84B; }
.ai-tel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ai-tel b { font-size: 34px; letter-spacing: -0.03em; font-weight: 600; }
.ai-tel small { color: var(--grijs); font-size: 13px; }
.ai-vragen { display: grid; gap: 6px; font-size: 13px; }
.ai-vragen div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: #F6F8F7; }
.ai-vragen em { font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ai-vragen .ja { color: var(--groen); } .ai-vragen .nee { color: var(--grijs-licht); }
.noot-kaart { display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--inkt-2); }
.noot-kaart .kop { display: flex; gap: 10px; align-items: center; }
.noot-kaart img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.noot-kaart b { display: block; color: var(--inkt); } .noot-kaart small { color: var(--grijs); font-size: 12px; }

/* Werkwijze */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stap { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; padding: 28px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.stap-kop { display: flex; align-items: center; gap: 12px; }
.stap .nr { width: 36px; height: 36px; border-radius: 50%; background: var(--verloop); color: #fff; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stap .wanneer { font-size: 12px; color: var(--groen); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stap h3 { font-size: 22px; letter-spacing: -0.02em; }
.stap p { color: var(--inkt-2); font-size: 15px; }
.stap .vink { font-size: 14.5px; color: var(--inkt-2); }
.zelf-kiezen { margin-top: 16px; display: grid; grid-template-columns: auto 1fr 1fr; gap: 16px; align-items: stretch; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; padding: 22px 26px; }
.zelf-kiezen > * { min-width: 0; }
.zelf-kiezen h3 { font-size: 18px; align-self: center; max-width: 16ch; }
.keuze { border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--inkt-2); }
.keuze b { display: block; color: var(--inkt); margin-bottom: 2px; }
@media (max-width: 900px) { .stappen { grid-template-columns: 1fr; } .zelf-kiezen { grid-template-columns: 1fr; } .zelf-kiezen h3 { max-width: none; } }

/* Cijfers */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.cijfer b { display: block; font-size: clamp(40px, 5vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cijfer b em { font-style: normal; background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cijfer span { display: block; margin-top: 10px; font-size: 14px; color: var(--inkt-2); }
.cijfers-noot { text-align: center; margin-top: 26px; font-size: 13px; color: var(--grijs); }
@media (max-width: 760px) { .cijfers { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } }

/* Statement */
.statement p.groot { font-size: clamp(28px, 4vw, 46px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; max-width: 24ch; color: #95A39C; }
.statement p.groot b { color: var(--inkt); font-weight: 600; }
.tegen { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; }
.tegen > div { border-radius: 22px; padding: 24px 26px; min-width: 0; }
.tegen h3 { font-size: 16px; margin-bottom: 12px; }
.tegen .zij { background: rgba(255,255,255,.55); border: 1px solid var(--lijn); color: var(--inkt-2); }
.tegen .zij ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.tegen .zij li { display: flex; gap: 10px; } .tegen .zij li::before { content: "×"; color: var(--grijs-licht); font-weight: 600; width: 18px; text-align: center; flex: none; }
.tegen .wij { background: var(--inkt); color: #fff; }
.tegen .wij .vink { font-size: 14.5px; color: #E7EDEA; } .tegen .wij .vink li::before { background-color: var(--groen-licht); }
@media (max-width: 760px) { .tegen { grid-template-columns: 1fr; } }

/* Pakketten */
.wissel { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--vlak); border: 1px solid var(--lijn); margin-top: 8px; }
.wissel button { border: 0; background: none; padding: 9px 18px; border-radius: 999px; font: 600 14px var(--font); color: var(--inkt-2); cursor: pointer; }
.wissel button[aria-pressed="true"] { background: var(--inkt); color: #fff; }
.wissel em { font-style: normal; font-size: 12px; color: var(--groen); margin-left: 6px; }
.wissel button[aria-pressed="true"] em { color: var(--groen-licht); }
.prijzen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; align-items: stretch; }
.prijs { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; }
.prijs.uitgelicht { border: 2px solid transparent; background: linear-gradient(var(--vlak), var(--vlak)) padding-box, var(--verloop) border-box; box-shadow: 0 24px 60px rgba(20,108,67,.16); }
.prijs .vlag { position: absolute; top: -12px; left: 24px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--inkt); color: #fff; }
.prijs h3 { font-size: 20px; }
.prijs .voor { font-size: 14px; color: var(--grijs); margin-top: -10px; }
.bedrag { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.bedrag strong { font-size: 40px; letter-spacing: -0.04em; font-weight: 600; line-height: 1; }
.bedrag span { font-size: 14px; color: var(--grijs); }
.bedrag-noot { font-size: 13px; color: var(--grijs); min-height: 40px; }
.prijs .aantal { font-weight: 600; font-size: 15px; padding: 10px 12px; border-radius: 12px; background: var(--mint); color: var(--groen); }
.prijs .vink { font-size: 14px; color: var(--inkt-2); flex: 1; }
.prijs .knop { width: 100%; }
.prijs .knoppen { display: grid; gap: 8px; }
@media (max-width: 1060px) { .prijzen { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }
@media (max-width: 580px) { .prijzen { grid-template-columns: 1fr; } }
.in-elk { margin-top: 24px; background: var(--mint); border: 1px solid var(--mint-rand); border-radius: 24px; padding: 28px; display: grid; grid-template-columns: 1fr 2fr; gap: 28px; }
.in-elk > * { min-width: 0; }
.in-elk h3 { font-size: 19px; }
.in-elk p { font-size: 14px; color: var(--inkt-2); margin-top: 8px; }
.in-elk .vink { grid-template-columns: 1fr 1fr; font-size: 14px; color: var(--inkt-2); }
@media (max-width: 820px) { .in-elk, .in-elk .vink { grid-template-columns: 1fr; } }

/* Reviews */
.reviews { columns: 3 300px; column-gap: 16px; margin-top: 8px; }
.review { break-inside: avoid; margin-bottom: 16px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 24px; display: grid; gap: 12px; }
.review blockquote { font-size: 15.5px; line-height: 1.55; color: var(--inkt); }
.review figcaption { font-size: 13px; color: var(--grijs); }
.review figcaption b { color: var(--inkt); font-weight: 600; }
.review.groot { background: var(--inkt); border-color: var(--inkt); }
.review.groot blockquote { color: #fff; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; }
.review.groot figcaption { color: #AEB8B3; } .review.groot figcaption b { color: #fff; }
.google-score { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 6px 16px 6px 6px; font-size: 14px; text-decoration: none; }
.google-score b { background: var(--inkt); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 600; }

/* Mike */
.mike { display: grid; grid-template-columns: 420px 1fr; border-radius: 30px; overflow: hidden; background: var(--inkt); color: #fff; }
.mike > * { min-width: 0; }
.mike-foto { position: relative; min-height: 460px; background: #222; }
.mike-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mike-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(18,23,21,.55)); }
.mike-foto span { position: absolute; left: 20px; bottom: 18px; z-index: 1; font-size: 13px; color: #fff; }
.mike-foto span b { display: block; font-size: 16px; }
.mike-tekst { padding: 52px; display: grid; gap: 20px; align-content: center; }
.mike-tekst .oog { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #DCE5DF; justify-self: start; }
.mike-tekst h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.mike-tekst p { color: #C9D2CE; max-width: 58ch; }
.mike-tekst .vink { color: #E7EDEA; font-size: 15px; } .mike-tekst .vink li::before { background-color: var(--groen-licht); }
.mike-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mike-acties small { color: #AEB8B3; font-size: 13px; width: 100%; }
.mike-acties code { font: 500 13px var(--font); color: #fff; user-select: all; }
@media (max-width: 900px) { .mike { grid-template-columns: 1fr; } .mike-foto { min-height: 380px; } .mike-tekst { padding: 32px 24px; } }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.faq > * { min-width: 0; }
.faq .links { display: grid; gap: 16px; align-content: start; justify-items: start; }
.faq .links p { color: var(--inkt-2); }
.vragen { display: grid; gap: 10px; }
.vragen details { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 18px; }
.vragen summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--groen); flex: none; transition: transform .2s; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { padding: 0 22px 20px; color: var(--inkt-2); font-size: 15px; max-width: 64ch; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 28px; } }

/* Afsluiter */
.slot { border-radius: 30px; background: var(--verloop-diep); color: #fff; padding-block: 64px; }
.slot .binnen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding-inline: clamp(22px, 5vw, 64px); }
.slot .binnen > * { min-width: 0; }
.slot h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.slot p { color: rgba(255,255,255,.9); margin-top: 12px; }
.slot .scan { box-shadow: none; }
.slot .vink { margin-top: 18px; color: #fff; font-size: 15px; } .slot .vink li::before { background-color: rgba(255,255,255,.25); }
.slot .scan-noot { color: rgba(255,255,255,.9); }
@media (max-width: 820px) { .slot .binnen { grid-template-columns: 1fr; } }

footer { background: var(--inkt); color: #AEB8B3; margin-top: 104px; padding-block: 60px 28px; font-size: 14px; }
.voet { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.voet > * { min-width: 0; }
.voet h4 { margin: 0 0 12px; color: #fff; font-size: 14px; font-weight: 600; }
.voet a { display: block; text-decoration: none; padding: 4px 0; }
.voet a:hover { color: #fff; }
.voet .gf { margin-bottom: 18px; }
.voet p { max-width: 34ch; }
.onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #2A332F; margin-top: 44px; padding-top: 20px; font-size: 13px; }
@media (max-width: 820px) { .voet { grid-template-columns: 1fr 1fr; } }

/* Beweging: rustig, alleen waar het iets uitlegt */
@keyframes opkomen { from { transform: translateY(16px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes zweven { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes glans { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes gloed { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } 50% { box-shadow: 0 0 0 6px rgba(61,220,132,.22); } }
@keyframes stip { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }
.hero .wrap > .oog, .hero h1, .hero .lead, .hero .scan, .hero .vertrouwen { animation: opkomen .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .06s; } .hero .lead { animation-delay: .14s; } .hero .scan { animation-delay: .22s; } .hero .vertrouwen { animation-delay: .3s; }
.hero .p-venster { animation: opkomen 1s .3s cubic-bezier(.2,.7,.2,1) both; }
.verloop-tekst { background-size: 220% 100%; animation: glans 7s ease-in-out infinite alternate; }
.oog i { animation: stip 2.4s ease-in-out infinite; }
.p-ai { animation: zweven 6s ease-in-out infinite; }
.p-noot { animation: zweven 7s 1.2s ease-in-out infinite; }
.js .onthul { transform: translateY(22px); opacity: .45; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.js .onthul.zicht { transform: none; opacity: 1; }
.blok, .stap, .prijs, .review, .keuze, .vragen details { transition: translate .3s ease, box-shadow .3s ease, border-color .3s, transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.blok:hover, .stap:hover, .review:hover { translate: 0 -4px; box-shadow: 0 22px 50px rgba(18,23,21,.09); }
.prijs:hover { translate: 0 -4px; box-shadow: 0 24px 60px rgba(20,108,67,.14); }
.vragen details:hover { border-color: #C3D8CB; }
.knop .pijl { transition: transform .2s; display: inline-block; }
.knop:hover .pijl { transform: translateX(3px); }
.zicht .chat-optie.jij { animation: gloed 2.2s .6s ease-in-out 2; }
.meter .boog { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1); }
.js .meter:not(.zicht) .boog { stroke-dashoffset: 228; }
.js .zicht .meter .boog { stroke-dashoffset: 0; }
.p-tegel .balkje i { animation: vullen 1.4s .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vullen { from { width: 8%; } to { width: 66%; } }
.ai-vragen div, .qa div { transition: transform .25s, background .25s; }
.ai-vragen div:hover, .qa div:hover { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .js .onthul { transform: none; opacity: 1; } .js .meter:not(.zicht) .boog { stroke-dashoffset: 0; } }

/* v7: logogroen als accent, iconen, cijferpaneel, USP-balk */
.knop-groen { background: var(--g400); color: var(--inkt); }
.knop-groen:hover { background: #5BE59A; }
.menu .gf { font-size: 25px; }
.menu .gf.gf-onder .gf-by { font-size: 10px; }
.hero h1 { isolation: isolate; }
.marker { position: relative; display: inline-block; color: #fff; padding: .12em .22em .2em; margin-top: .1em; }
.marker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g400); border-radius: .12em; transform: skewY(-2.5deg); transform-origin: 50% 50%; }
@media (max-width: 560px) { .hero h1 { font-size: 36px; } }
.marker-tekst { background: var(--g400); color: #fff; padding: 0 .14em; border-radius: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.statement p.groot { color: var(--inkt-2); }
.stap .nr { background: var(--g400); color: #fff; font-weight: 700; }
.rail { gap: 64px; align-items: center; }
.rail img { height: 60px; width: auto; padding: 0; background: none; border: 0; border-radius: 0; filter: grayscale(1) brightness(.62) contrast(1.05); opacity: .7; transition: filter .3s, opacity .3s; }
.rail img:hover { filter: none; opacity: 1; transform: none; box-shadow: none; background: none; }
.logos { padding-block: 64px 0; }
@keyframes schuif { to { transform: translateX(calc(-50% - 32px)); } }
/* regie */
.zelf-kiezen { grid-template-columns: 1fr 1.2fr 1.2fr; align-items: center; padding: 26px 28px; }
.regie-kop { display: grid; gap: 6px; justify-items: start; }
.regie-kop h3 { font-size: 22px; letter-spacing: -0.02em; }
.regie-kop p { color: var(--inkt-2); font-size: 15px; }
.keuze { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.keuze b { margin-bottom: 4px; }
.ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--g400); color: var(--inkt); display: inline-grid; place-items: center; }
.ico svg { width: 24px; height: 24px; }
.ico.groot { margin-bottom: 6px; background: var(--inkt); color: var(--g400); }
@media (max-width: 900px) { .zelf-kiezen { grid-template-columns: 1fr; } }
/* cijfers */
.cijfers-paneel { background: var(--inkt); color: #fff; border-radius: 30px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: center; }
.cijfers-paneel > * { min-width: 0; }
.cijfers-kop { display: grid; gap: 14px; justify-items: start; }
.cijfers-kop h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.cijfers-kop p { color: #C9D2CE; font-size: 15px; }
.oog-donker { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #DCE5DF; }
.cijfers { grid-template-columns: 1fr 1fr; gap: 0; text-align: left; }
.cijfer { padding: 22px 24px; border-left: 1px solid #2A332F; }
.cijfer:nth-child(n+3) { border-top: 1px solid #2A332F; }
.cijfer b { font-size: clamp(38px, 4.4vw, 52px); color: #fff; }
.cijfer b em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--g400); }
.cijfer span { color: #C9D2CE; font-size: 15px; margin-top: 8px; }
@media (max-width: 900px) { .cijfers-paneel { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cijfer { padding: 18px 14px; } .cijfer:nth-child(odd) { border-left: 0; } }
@media (min-width: 481px) { .cijfer:nth-child(odd) { border-left: 0; } }
/* slotblok in logogroen */
.slot { background: var(--g400); color: var(--inkt); }
.slot p { color: #173826; }
.slot .vink { color: var(--inkt); } .slot .vink li::before { background-color: var(--inkt); }
.slot .scan-noot { color: #173826; }
.slot .scan-noot.ok { color: var(--inkt); }
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 6px; }
.demo span { font-size: 14px; color: #173826; }
.knop-rand-donker { background: transparent; border-color: rgba(18,23,21,.35); color: var(--inkt); }
.knop-rand-donker:hover { background: rgba(255,255,255,.35); border-color: var(--inkt); }
/* USP-balk */
.topbalk { background: var(--inkt); color: #DCE5DF; font-size: 13px; }
.topbalk .wrap { display: flex; justify-content: space-between; gap: 24px; padding-block: 9px; overflow: hidden; white-space: nowrap; }
.topbalk span { display: inline-flex; align-items: center; gap: 8px; }
.topbalk span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--g400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23121715' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; flex: none; }
.topbalk b { color: #fff; font-weight: 600; }
@media (max-width: 980px) { .topbalk span:nth-child(4) { display: none; } }
@media (max-width: 760px) { .topbalk span:nth-child(n+3) { display: none; } .topbalk .wrap { justify-content: center; } }
@media (max-width: 480px) { .topbalk span:nth-child(n+2) { display: none; } }

/* Eén typografische schaal: Poppins overal, vaste maten */
.lead, .hero .lead { font-size: 18px; line-height: 1.6; }
.koprij p, .probleem .tekst p, .faq .links p, .mike-tekst p { font-size: 16px; line-height: 1.65; }
.blok h3, .stap h3, .prijs h3, .regie-kop h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.25; }
.tegen h3, .in-elk h3 { font-size: 18px; letter-spacing: -0.01em; }
.blok p, .stap .vink, .blok .vink, .tegen .zij ul, .tegen .wij .vink, .prijs .vink, .in-elk .vink, .in-elk p, .keuze, .vergelijk div, .mike-tekst .vink, .slot .vink, .vragen details p, .review blockquote, .chat-vraag, .chat-antw, .noot-kaart, .bedrag-noot + .aantal { font-size: 15px; line-height: 1.6; }
.review.groot blockquote { font-size: 19px; line-height: 1.5; }
.vragen summary { font-size: 17px; font-weight: 600; }
.stap .wanneer, .klein-kop, .vergelijk b { font-size: 12px; letter-spacing: .06em; }
.scan-noot, .review figcaption, .bedrag-noot, .demo-label, .chat-noot, .prijs .voor { font-size: 13px; }

/* v8 */
.ai-strook { margin-top: 64px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.ai-strook p { font-size: 14px; color: var(--grijs); }
.ai-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.ai-logos span { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: #7E8A84; letter-spacing: -0.01em; transition: color .3s; }
.ai-logos span:hover { color: var(--inkt); }
.ai-logos svg { width: 24px; height: 24px; fill: currentColor; }
.soorten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.soort-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; padding: 26px; display: grid; gap: 10px; align-content: start; min-width: 0; transition: translate .3s, box-shadow .3s; }
.soort-kaart:hover { translate: 0 -4px; box-shadow: 0 22px 50px rgba(18,23,21,.09); }
.soort-kaart h3 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; margin-top: 6px; }
.soort-kaart p { font-size: 15px; color: var(--inkt-2); }
@media (max-width: 1000px) { .soorten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .soorten { grid-template-columns: 1fr; } }
.ico.klein { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px; }
.ico.klein svg { width: 20px; height: 20px; }
.statement p.groot { color: var(--inkt); }
.tempo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.tempo > div { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 24px; display: grid; gap: 4px; justify-items: start; }
.tempo b { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.tempo span { font-size: 15px; color: var(--inkt-2); }
.tempo em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--groen); margin-top: 10px; }
.tempo .aan { border: 2px solid var(--g400); }
@media (max-width: 820px) { .tempo { grid-template-columns: repeat(2, 1fr); } }

/* v9: beweging */
@keyframes veeg { from { transform: skewY(-2.5deg) scaleX(0); } to { transform: skewY(-2.5deg) scaleX(1); } }
@keyframes wordtWit { from { color: var(--inkt); } to { color: #fff; } }
.marker { animation: wordtWit .5s .95s both; }
.marker::before { transform-origin: 0 50%; animation: veeg .8s .5s cubic-bezier(.65,0,.25,1) both; }
.marker-tekst { background: linear-gradient(var(--g400), var(--g400)) no-repeat 0 0 / 100% 100%; transition: background-size .9s .3s cubic-bezier(.65,0,.25,1), color .4s .8s; }
.js .groot.onthul:not(.zicht) .marker-tekst { background-size: 0% 100%; color: var(--inkt); }
.js .groot.onthul { transform: none; opacity: 1; }
@keyframes zweven2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.p-noot { animation: zweven2 5s ease-in-out infinite; }
.noot-kaart { animation: zweven2 6s .8s ease-in-out infinite; }
.p-ai { animation: zweven2 6s 1.5s ease-in-out infinite; }
/* reviews in drie kolommen, bewegen bij scrollen */
.reviews { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.rk { display: grid; gap: 16px; min-width: 0; will-change: transform; }
.rk .review { margin: 0; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; } .rk:nth-child(3) { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews { grid-template-columns: 1fr; } .rk:nth-child(3) { grid-column: auto; grid-template-columns: 1fr; } .rk { transform: none !important; } }
/* chat-opties en portaalrijen komen een voor een binnen */
.js .chat .chat-optie, .js .p-rij { opacity: 0; translate: 0 10px; transition: opacity .5s, translate .5s, background .2s; }
.zicht .chat-optie, .p-venster.klaar .p-rij { opacity: 1 !important; translate: 0 0 !important; }
.zicht .chat-optie:nth-child(3) { transition-delay: .35s; } .zicht .chat-optie:nth-child(4) { transition-delay: .6s; } .zicht .chat-optie:nth-child(5) { transition-delay: .85s; }
.p-venster.klaar .p-rij:nth-of-type(1) { transition-delay: .9s; } .p-venster.klaar .p-rij:nth-of-type(2) { transition-delay: 1.05s; } .p-venster.klaar .p-rij:nth-of-type(3) { transition-delay: 1.2s; } .p-venster.klaar .p-rij:nth-of-type(4) { transition-delay: 1.35s; } .p-venster.klaar .p-rij:nth-of-type(5) { transition-delay: 1.5s; }
/* hover */
.p-rij:hover { background: var(--g50); }
.p-tegel, .vergelijk div, .tempo > div, .keuze, .chat-optie, .cijfer, .term, .google-score { transition: translate .25s, box-shadow .25s, border-color .25s, background .25s; }
.p-tegel:hover { translate: 0 -2px; box-shadow: 0 8px 20px rgba(18,23,21,.08); }
.vergelijk div:hover, .tempo > div:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(18,23,21,.08); }
.tempo > div:hover { border-color: var(--g400); }
.keuze:hover { border-color: var(--g400); background: var(--g50); }
.chat-optie:not(.jij):hover { border-color: var(--g300); }
.cijfer:hover { background: rgba(255,255,255,.03); }
.ico { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.soort-kaart:hover .ico, .keuze:hover .ico, .cijfer:hover .ico, .blok:hover .ico { transform: rotate(-8deg) scale(1.08); }
.term:hover { background: var(--g100); }
.google-score:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(18,23,21,.08); }
.vragen summary:hover { color: var(--groen); }
.mike-foto img { transition: transform .8s ease; }
.mike:hover .mike-foto img { transform: scale(1.04); }
.gf:hover .gf-woord .gf-blok::before { transform: skewY(-8deg); }
@media (prefers-reduced-motion: reduce) {
  .marker, .marker::before, .p-noot, .noot-kaart, .p-ai { animation: none !important; }
  .marker { color: #fff; }
  .js .groot.onthul:not(.zicht) .marker-tekst { background-size: 100% 100%; color: #fff; }
  .js .chat .chat-optie, .js .p-rij { opacity: 1; translate: none; }
  .rk { transform: none !important; }
}
/* pakkettenpagina */
.prijzen { row-gap: 24px; }
.prijs { display: grid; grid-row: span 7; grid-template-rows: subgrid; gap: 14px; padding: 28px 26px; align-content: start; }
.paginas-kop b { white-space: nowrap; }
.prijs.uitgelicht { border: 2px solid var(--g400); background: var(--vlak); box-shadow: 0 24px 60px rgba(61,220,132,.18); }
.prijs-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.prijs .vlag { position: static; background: var(--g100); color: var(--g800); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prijs .voor { margin: 0; font-size: 15px; color: var(--inkt-2); min-height: 72px; }
.bedrag-noot { min-height: 0; }
.paginas { border-top: 1px solid var(--lijn); padding-top: 14px; display: grid; gap: 10px; }
.paginas-kop { display: flex; justify-content: space-between; align-items: baseline; }
.paginas-kop span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.paginas-kop b { font-size: 20px; font-weight: 600; }
.tegels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.tegels i { height: 12px; border-radius: 3px; background: #E7ECE9; }
.tegels i.aan { background: var(--g400); }
.tegels.maat i { height: 5px; background: repeating-linear-gradient(90deg, var(--g400) 0 3px, transparent 3px 5px); }
.knoppen { gap: 10px; justify-items: center; }
.demo-link { font-size: 13px; font-weight: 600; color: var(--inkt); text-underline-offset: 3px; }
.lijst { border-top: 1px solid var(--lijn); padding-top: 16px; display: grid; gap: 12px; }
.plus { font-size: 14px; font-weight: 600; color: var(--g700); }
.prijs .vink { font-size: 15px; align-content: start; }
.lijst { align-content: start; }
.ontwerp-noot { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--inkt); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px; opacity: .88; }

/* ===== Losse pagina's (v10) ===== */
.topbalk .wrap { align-items: center; }
.topbalk .usps { display: flex; gap: 24px; overflow: hidden; }
.topbalk .inlog { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.topbalk .inlog::before { display: none; }
.topbalk .inlog:hover { color: var(--g400); }
@media (max-width: 980px) { .topbalk .usps span:nth-child(4) { display: none; } }
@media (max-width: 760px) { .topbalk .usps span:nth-child(n+3) { display: none; } .topbalk .wrap { justify-content: space-between; } }
@media (max-width: 480px) { .topbalk .usps span:nth-child(n+2) { display: none; } }
.menu nav a[aria-current="page"] { color: var(--inkt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--g400); }

/* paginakop voor binnenpagina's */
.pkop { padding-block: 72px 40px; position: relative; }
.pkop::before { content: ""; position: absolute; left: 50%; top: -60px; width: min(900px, 100%); height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(61,220,132,.22), transparent); pointer-events: none; }
.pkop .wrap { position: relative; display: grid; gap: 18px; justify-items: center; text-align: center; }
.pkop h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.04em; max-width: 18ch; text-wrap: balance; isolation: isolate; }
.pkop .lead { text-align: center; }
.kruimel { font-size: 13px; color: var(--grijs); }
.kruimel a { color: var(--grijs); text-decoration: none; } .kruimel a:hover { color: var(--groen); }

/* werkwijze: tijdlijn */
.tijdlijn { display: grid; gap: 0; position: relative; }
.tijdlijn::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--g400), var(--g200)); }
.moment { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding-block: 18px; }
.moment > * { min-width: 0; }
.moment .ico { width: 56px; height: 56px; border-radius: 16px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--grond-a); }
.moment .ico svg { width: 26px; height: 26px; }
.moment-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 22px; padding: 22px 26px; display: grid; gap: 8px; transition: translate .3s, box-shadow .3s; }
.moment-kaart:hover { translate: 4px 0; box-shadow: 0 18px 40px rgba(18,23,21,.08); }
.moment-kaart .wanneer { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--groen); }
.moment-kaart h3 { font-size: 22px; letter-spacing: -0.02em; }
.moment-kaart p { font-size: 15px; color: var(--inkt-2); max-width: 70ch; }
.moment-kaart .termen { margin-top: 4px; }
.fase { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt); padding: 28px 0 6px 80px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.twee > * { min-width: 0; }
.vlak { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; padding: 30px; display: grid; gap: 14px; align-content: start; }
.vlak h3 { font-size: 22px; letter-spacing: -0.02em; }
.vlak p { font-size: 15px; color: var(--inkt-2); }
.vlak .vink { font-size: 15px; color: var(--inkt-2); }
.vlak.donker { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.vlak.donker p, .vlak.donker .vink { color: #C9D2CE; }
.vlak.donker .vink li::before { background-color: var(--g400); }
.vlak.groen { background: var(--g50); border-color: var(--g100); }
@media (max-width: 820px) { .twee { grid-template-columns: 1fr; } }

/* cases */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: translate .3s, box-shadow .3s; min-width: 0; }
.case:hover { translate: 0 -5px; box-shadow: 0 26px 60px rgba(18,23,21,.10); }
.case-beeld { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(135deg, var(--g50), #F4F7F5); border-bottom: 1px solid var(--lijn); position: relative; overflow: hidden; }
.case-beeld img { width: 62%; max-width: 240px; height: auto; transition: transform .5s; }
.case:hover .case-beeld img { transform: scale(1.06); }
.case-beeld .stat { position: absolute; left: 14px; bottom: 14px; background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 6px 10px; font-size: 12px; color: var(--grijs); line-height: 1.3; box-shadow: 0 8px 20px rgba(18,23,21,.08); }
.case-beeld .stat b { display: block; font-size: 14px; color: var(--inkt); }
.case-in { padding: 22px 24px 26px; display: grid; gap: 10px; align-content: start; }
.case-in h3 { font-size: 21px; letter-spacing: -0.02em; }
.case-in p { font-size: 15px; color: var(--inkt-2); }
.labels { display: flex; flex-wrap: wrap; gap: 6px; }
.labels span { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--g50); color: var(--g700); border: 1px solid var(--g100); }
.case blockquote { margin: 6px 0 0; font-size: 14px; color: var(--inkt-2); border-left: 3px solid var(--g400); padding-left: 12px; font-style: italic; }
@media (max-width: 980px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cases { grid-template-columns: 1fr; } }

/* blog */
.uitgelicht-artikel { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 28px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .3s; }
.uitgelicht-artikel:hover { box-shadow: 0 26px 60px rgba(18,23,21,.10); }
.uitgelicht-artikel > * { min-width: 0; }
.blog-beeld { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 260px; background: var(--inkt); }
.blog-beeld .vorm { position: absolute; inset: 0; transition: transform .6s; }
a:hover .blog-beeld .vorm { transform: scale(1.05); }
.blog-beeld .titel-beeld { position: relative; font: 800 clamp(26px, 3vw, 40px)/1.05 "Outfit", var(--font); letter-spacing: -0.04em; color: #fff; text-align: center; padding: 20px; isolation: isolate; }
.blog-beeld .titel-beeld span { position: relative; padding: .04em .16em .1em; }
.blog-beeld .titel-beeld span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g400); border-radius: .1em; transform: skewY(-3deg); }
.uitgelicht-artikel .tekst { padding: 36px; display: grid; gap: 14px; align-content: center; }
.uitgelicht-artikel h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.uitgelicht-artikel p { color: var(--inkt-2); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--grijs); }
.meta .cat { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--g50); color: var(--g700); border: 1px solid var(--g100); }
.lees { font-weight: 600; font-size: 15px; color: var(--inkt); display: inline-flex; gap: 8px; align-items: center; }
a:hover .lees .pijl { transform: translateX(3px); }
.lees .pijl { transition: transform .2s; display: inline-block; }
.blogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 24px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; transition: translate .3s, box-shadow .3s; min-width: 0; }
.blog-kaart:hover { translate: 0 -5px; box-shadow: 0 26px 60px rgba(18,23,21,.10); }
.blog-kaart .blog-beeld { min-height: 0; aspect-ratio: 16 / 9; }
.blog-kaart .titel-beeld { font-size: 24px; }
.blog-kaart .tekst { padding: 22px 24px 26px; display: grid; gap: 10px; align-content: start; }
.blog-kaart h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.blog-kaart p { font-size: 15px; color: var(--inkt-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.filters button { border: 1px solid var(--lijn); background: #fff; border-radius: 999px; padding: 7px 16px; font: 600 14px var(--font); color: var(--inkt-2); cursor: pointer; transition: background .2s, border-color .2s; }
.filters button:hover { border-color: var(--g400); }
.filters button[aria-pressed="true"] { background: var(--inkt); color: #fff; border-color: var(--inkt); }
@media (max-width: 980px) { .blogs { grid-template-columns: repeat(2, 1fr); } .uitgelicht-artikel { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .blogs { grid-template-columns: 1fr; } }

/* artikel */
.artikel { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 56px; justify-content: center; }
.inhoudsopgave { position: sticky; top: 100px; align-self: start; display: grid; gap: 4px; font-size: 14px; }
.inhoudsopgave b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); margin-bottom: 6px; }
.inhoudsopgave a { text-decoration: none; color: var(--inkt-2); padding: 6px 10px; border-left: 2px solid var(--lijn); transition: border-color .2s, color .2s; }
.inhoudsopgave a:hover { color: var(--inkt); border-color: var(--g400); }
.tekstkolom { display: grid; gap: 18px; font-size: 17px; line-height: 1.75; color: var(--inkt-2); }
.tekstkolom h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--inkt); margin-top: 18px; scroll-margin-top: 100px; }
.tekstkolom h3 { font-size: 20px; color: var(--inkt); margin-top: 6px; }
.tekstkolom ul, .tekstkolom ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.tekstkolom .samenvatting { background: var(--g50); border: 1px solid var(--g100); border-radius: 18px; padding: 20px 22px; font-size: 16px; color: var(--inkt); }
.tekstkolom .samenvatting b { display: block; margin-bottom: 6px; }
.tekstkolom .tip { background: var(--inkt); color: #E7EDEA; border-radius: 18px; padding: 20px 22px; font-size: 16px; }
.tekstkolom .tip b { color: var(--g400); }
.auteur { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--lijn); border-radius: 18px; background: #fff; font-size: 14px; color: var(--grijs); }
.auteur img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.auteur b { display: block; color: var(--inkt); font-size: 15px; }
@media (max-width: 900px) { .artikel { grid-template-columns: 1fr; gap: 24px; } .inhoudsopgave { position: static; } }

/* over Mike */
.over { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; }
.over > * { min-width: 0; }
.over-foto { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.over-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.over-foto:hover img { transform: scale(1.04); }
.over-foto .gf-label { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; color: var(--grijs); box-shadow: 0 12px 30px rgba(18,23,21,.15); animation: zweven2 6s ease-in-out infinite; }
.over-foto .gf-label b { display: block; color: var(--inkt); font-size: 15px; }
.over-tekst { display: grid; gap: 16px; justify-items: start; }
.over-tekst p { font-size: 17px; color: var(--inkt-2); max-width: 60ch; }
@media (max-width: 900px) { .over { grid-template-columns: 1fr; } .over-foto { max-width: 420px; } }

/* gesprek */
.gesprek { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }
.gesprek > * { min-width: 0; }
.agenda { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 28px; padding: 28px; display: grid; gap: 16px; box-shadow: 0 30px 70px rgba(18,23,21,.08); }
.agenda-kop { display: flex; gap: 14px; align-items: center; }
.agenda-kop img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.agenda-kop b { display: block; font-size: 17px; }
.agenda-kop small { color: var(--grijs); font-size: 13px; }
.dagen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dag { border: 1px solid var(--lijn); border-radius: 14px; padding: 10px 6px; text-align: center; font-size: 12px; color: var(--grijs); cursor: pointer; transition: border-color .2s, background .2s, translate .2s; background: #fff; font-family: var(--font); }
.dag b { display: block; font-size: 18px; color: var(--inkt); }
.dag:hover { border-color: var(--g400); translate: 0 -2px; }
.dag[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #C9D2CE; } .dag[aria-pressed="true"] b { color: #fff; }
.tijden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tijd { border: 1px solid var(--lijn); border-radius: 12px; padding: 10px; text-align: center; font: 600 14px var(--font); background: #fff; color: var(--inkt); text-decoration: none; transition: background .2s, border-color .2s; }
.tijd:hover { background: var(--g400); border-color: var(--g400); }
.agenda .noot { font-size: 13px; color: var(--grijs); }
.contactlijst { display: grid; gap: 10px; }
.contactregel { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--lijn); border-radius: 18px; text-decoration: none; color: inherit; transition: border-color .2s, translate .2s; }
.contactregel:hover { border-color: var(--g400); translate: 4px 0; }
.contactregel b { display: block; font-size: 15px; }
.contactregel span span { font-size: 14px; color: var(--grijs); }
.bedrijf { font-size: 14px; color: var(--inkt-2); line-height: 1.8; }
@media (max-width: 900px) { .gesprek { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .dagen { grid-template-columns: repeat(3, 1fr); } .tijden { grid-template-columns: repeat(2, 1fr); } }

/* juridisch */
.concept-banner { background: #FFF6DB; border: 1px solid #F2D27A; color: #6B4A00; border-radius: 18px; padding: 16px 20px; font-size: 15px; display: flex; gap: 12px; align-items: flex-start; }
.concept-banner b { color: #4A3300; }
.juridisch { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; font-size: 16px; line-height: 1.75; color: var(--inkt-2); }
.juridisch h2 { font-size: 22px; color: var(--inkt); margin-top: 18px; letter-spacing: -0.01em; }
.juridisch ol, .juridisch ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.juridisch mark { background: #FFF1B8; color: #5A4000; padding: 0 4px; border-radius: 4px; }
.juridisch table { width: 100%; border-collapse: collapse; font-size: 14px; }
.juridisch th, .juridisch td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.juridisch th { color: var(--inkt); font-weight: 600; background: var(--g50); }
.tabel-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 14px; background: #fff; }

/* ===== v11 ===== */
/* zwevende kaartjes boven het portaalvenster */
.p-ai, .p-noot { z-index: 3; }
.portaal { isolation: isolate; }

/* duidelijkere hover op alle kaarten */
.soort-kaart, .stap, .vlak, .moment-kaart, .tempo > div, .keuze, .vergelijk div, .review, .case, .blog-kaart, .contactregel, .prijs, .blok, .cijfer, .ai-logos span, .p-tegel {
  transition: translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, background-color .35s, color .3s, scale .35s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
  .soort-kaart:hover, .stap:hover, .vlak:hover, .tempo > div:hover, .review:hover, .blok:hover, .prijs:hover { translate: 0 -8px; box-shadow: 0 28px 60px rgba(18,23,21,.12); border-color: var(--g300); }
  .vlak.donker:hover, .blok.donker:hover, .review.groot:hover { border-color: var(--g600); }
  .moment-kaart:hover { translate: 8px 0; border-color: var(--g300); box-shadow: 0 22px 50px rgba(18,23,21,.10); }
  .stap:hover .nr { scale: 1.15; }
  .stap .nr { transition: scale .35s cubic-bezier(.3,1.6,.5,1); }
  .soort-kaart:hover .ico, .stap:hover .ico, .vlak:hover .ico, .moment:hover .ico, .keuze:hover .ico, .contactregel:hover .ico, .cijfer:hover .ico { transform: rotate(-10deg) scale(1.15); }
  .moment .ico { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .ai-logos span:hover { color: var(--inkt); translate: 0 -4px; }
  .ai-logos span:hover svg { color: var(--g600); }
  .ai-logos span { cursor: default; }
  .ai-logos svg { transition: color .3s; }
  .cijfer:hover b { color: var(--g400); }
  .cijfer b { transition: color .3s; }
  .vergelijk div:hover { translate: 0 -6px; box-shadow: 0 22px 50px rgba(18,23,21,.10); }
  .chat-optie:hover { translate: 4px 0; }
  .rail img:hover { scale: 1.08; }
  .p-tegel:hover { border-color: var(--g300); }
}

/* beheeromgeving voor bureaus */
.beheer { background: #fff; border: 1px solid var(--lijn); border-radius: 22px; box-shadow: 0 40px 90px rgba(18,23,21,.12); overflow-x: auto; font-size: 14px; }
.beheer-kop { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--lijn); }
.beheer-kop b { font-size: 17px; }
.beheer-kop span:not(.knop) { color: var(--grijs); font-size: 13px; flex: 1; }
.beheer-rij { display: grid; grid-template-columns: 2fr 1fr 1.3fr 70px 1.6fr; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid #EDEEEB; min-width: 680px; transition: background .2s; }
.beheer-rij:hover:not(.beheer-titels) { background: var(--g50); }
.beheer-rij small { display: block; color: var(--grijs); font-size: 12px; }
.beheer-titels { font-size: 12px; color: var(--grijs); border-top: 0; }
.mini-balk { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: #EDEEEB; margin-right: 8px; vertical-align: middle; overflow: hidden; }
.mini-balk i { display: block; height: 100%; background: var(--g400); }
.beheer .p-status { font-size: 13px; }

/* ===== v12 ===== */
/* ruimere topbalk en menu */
.topbalk .wrap { padding-block: 12px; }
.menu-balk { height: 88px; }
/* groene knoppen: witte tekst */
.knop-groen { color: #fff; }
.knop-groen:hover { background: #2CC873; color: #fff; }
/* cijferpaneel: iconen en getallen goed */
.cijfer > span:not(.ico) { display: block; margin-top: 8px; font-size: 15px; color: #C9D2CE; }
.cijfer b span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.cijfer .ico { display: inline-grid; place-items: center; margin: 0 0 16px; }
.cijfer .ico svg { width: 20px; height: 20px; color: var(--inkt); }
.cijfer b { display: flex; align-items: baseline; gap: 2px; }
/* logo's grijs, ook in cases */
.rail img.wit-achter, .case-beeld img.wit-achter { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .65; }
.rail img.wit-achter:hover { filter: none; opacity: 1; }
.case-beeld img { filter: grayscale(1) brightness(.62) contrast(1.05); opacity: .75; transition: filter .4s, opacity .4s, transform .5s; max-height: 92px; object-fit: contain; }
.case:hover .case-beeld img { filter: none; opacity: 1; }
.case-beeld img.wit-achter { filter: grayscale(1) contrast(1.15); }
.case:hover .case-beeld img.wit-achter { filter: none; opacity: 1; }
/* brede cases: beeld links, tekst rechts */
.case.breed { grid-column: span 2; grid-template-columns: 1fr 1.2fr; grid-template-rows: none; }
.case.breed .case-beeld { aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--lijn); }
.case.breed .case-in { align-content: center; padding: 28px 30px; }
.case.breed h3 { font-size: 26px; }
@media (max-width: 980px) { .case.breed { grid-column: span 2; } }
@media (max-width: 620px) { .case.breed { grid-column: auto; grid-template-columns: 1fr; } .case.breed .case-beeld { border-right: 0; border-bottom: 1px solid var(--lijn); aspect-ratio: 16 / 10; min-height: 0; } }

/* ===== v13: menu wordt donker bij scrollen ===== */
.menu { transition: background-color .35s, border-color .35s, box-shadow .35s; }
.menu nav a, .menu .tekstlink, .menu .gf, .menu .gf-by, .menu-knop { transition: color .3s, background-color .3s, border-color .3s; }
.menu.donker { background: rgba(18, 23, 21, .94); border-bottom-color: #2A332F; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.menu.donker .menu-balk .gf { --tekst: #fff; }
.menu.donker nav a, .menu.donker .menu-rechts .tekstlink { color: #DCE5DF; }
.menu.donker nav a:hover, .menu.donker .menu-rechts .tekstlink:hover { color: var(--g400); }
.menu.donker nav a[aria-current="page"] { color: #fff; }
.menu.donker .menu-knop { background: transparent; color: #fff; border-color: #3A4440; }
.menu-knop b i { background: currentColor; }
.case-beeld img[src*="coolmix"] { max-width: 220px; }
.rail img[src*="coolmix"] { height: 38px; }

/* ===== v14 ===== */
/* menu-items even donker als "Plan een gesprek" */
.menu nav a { color: var(--inkt); }
/* getallen nooit over twee regels */
.ai-tel b, .p-tegel b, .tempo b, .cijfer b, .bedrag strong, .p-ai b, .zweef strong { white-space: nowrap; }
.ai-tel { flex-wrap: wrap; row-gap: 2px; }

/* mobiel: minder lagen in elkaar */
@media (max-width: 700px) {
  .paneel { background: none; border: 0; border-radius: 0; padding-block: 0; }
  .paneel > .wrap { padding-left: 0; padding-right: 0; }
  .blok { border-radius: 20px; }
  .blok-tekst { padding: 22px 22px 0; }
  .blok-beeld { padding: 18px 22px 22px; }
  .blok .kaartje { box-shadow: none; padding: 14px; border-radius: 12px; }
  .meter-rij { gap: 10px; }
  .meter { max-width: 170px; }
  .ai-tel b { font-size: 28px; }
  .noot-kaart { animation: none; }
  .chat { padding: 16px; border-radius: 18px; }
  .chat-optie { padding: 10px 12px; }
  .cijfers-paneel { border-radius: 22px; }
  .mike { border-radius: 22px; }
  .slot { border-radius: 22px; }
  .vlak, .stap, .soort-kaart, .moment-kaart, .prijs, .review, .case { border-radius: 20px; }
  .moment-kaart { padding: 18px 20px; }
  .tijdlijn::before { left: 21px; }
  .moment { grid-template-columns: 44px 1fr; gap: 14px; }
  .moment .ico { width: 44px; height: 44px; border-radius: 12px; }
  .fase { padding-left: 58px; }
  .p-venster { border-radius: 14px; }
  .p-in { padding: 14px; }
  .beheer { border-radius: 16px; }
}
.tempo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tempo b { white-space: normal; }
@media (max-width: 820px) { .tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tempo > div { padding: 18px; border-radius: 18px; } .tempo b { font-size: 32px; } }
.soorten.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .soorten.drie { grid-template-columns: 1fr; } }
/* beheeromgeving op mobiel: alleen klant en status */
@media (max-width: 700px) {
  .beheer { overflow: hidden; }
  .beheer-kop { flex-wrap: wrap; gap: 8px 12px; }
  .beheer-kop span:not(.knop) { display: none; }
  .beheer-kop .knop { margin-left: auto; }
  .beheer-rij { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
  .beheer-rij > :nth-child(2), .beheer-rij > :nth-child(3), .beheer-rij > :nth-child(4) { display: none; }
  .beheer-titels { display: none; }
  .beheer .p-status { font-size: 12px; }
}

/* WordPress */
body { margin: 0; }
/* De header-template zit in een eigen div; die mag geen eigen vak zijn, anders werkt sticky niet. */
.wp-block-template-part:has(> .menu), .wp-block-template-part:has(> footer) { display: contents; }
.menu { top: calc(var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px)); }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
main .wp-block-html { margin: 0; }
.ontwerp-noot { display: none; }
.blog-lijst .blogs { list-style: none; padding: 0; margin: 0; }
.blog-kaart .blog-foto { margin: 0; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--g800), var(--g500)); }
.blog-kaart .blog-foto img { width: 100%; height: 100%; object-fit: cover; }
.blog-kaart .wp-block-post-title { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; margin: 0; }
.blog-kaart .wp-block-post-title a { text-decoration: none; }
.blog-kaart .wp-block-post-excerpt { font-size: 15px; color: var(--inkt-2); margin: 0; }
.blog-kaart .wp-block-post-excerpt__more-link { font-weight: 600; color: var(--inkt); }
.meta a { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--g50); color: var(--g700); border: 1px solid var(--g100); text-decoration: none; }
.pkop .wp-block-post-title { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -0.04em; max-width: 22ch; margin: 0 auto; text-align: center; }
.pkop .wp-block-post-excerpt { text-align: center; max-width: 60ch; margin: 0 auto; color: var(--inkt-2); font-size: 18px; }
.artikel-sectie .wrap { max-width: 760px; }
.tekstkolom > * { margin: 0; }
.wp-block-query-pagination { margin-top: 32px; gap: 12px; }