/* ------------------------------------------------------------
 | This script has been built by
 | Fedelta Media - https://fedelta.media
 |
 | Respect the license agreement,
 | DO NOT: alter, copy or redistribute in any medium or format
 -------------------------------------------------------------- */

/*
	Inhoud
	 1. Fonts
	 2. Design tokens (spec par. 3)
	 3. Reset en basis
	 4. Layout: container, secties, sectiekop
	 5. Knoppen
	 6. Navigatie
	 7. Hero
	 8. Donkere vlakken en de brandgloed (animatie 3)
	 9. Kaarten en rasters
	10. Prijskaarten en prijstabel
	11. FAQ
	12. CTA-band
	13. Footer
	14. Marquee (animatie 5)
	15. Chat-mockup (animatie 1)
	16. Formulier
	17. Voor/na-slider (animatie 6)
	18. Homepage-onderdelen
	19. Hulpklassen
	20. Donkere vlakken winnen van de componentachtergrond
	21. Reduced motion
*/

/* ============================================================
	1. Fonts
	============================================================ */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
	font-weight: 500 800;
	font-style: normal;
	/* optional in plaats van swap: swap liet de tekst herschikken zodra de
	   font binnen was, goed voor 0,1 tot 0,2 CLS. Beide fonts worden
	   voorgeladen, dus het korte venster van optional wordt vrijwel altijd
	   gehaald en de merkletter blijft staan. */
	font-display: optional;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter Tight";
	src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: optional;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
	2. Design tokens (spec par. 3)
	============================================================ */

:root {
	--brand: #0088cc;
	--brand-700: #006fa6;
	--brand-300: #5cc0f0;
	--brand-50: #eaf6fd;
	/*
		Witte tekst op --brand haalt 3,89:1 en zakt daarmee voor de AA-eis van
		4,5:1 bij tekst van 16px vet. Deze tint is de dichtstbijzijnde die wel
		haalt (4,9:1); --brand blijft de accentkleur voor alles wat geen
		tekstdrager is.
	*/
	--brand-knop: #0077b3;

	/* Ontwerp gebruikt #edf4fa voor de lichtblauwe secties */
	--canvas: #edf4fa;
	--kaart-canvas: #f5f8fb;
	--wit: #ffffff;

	--ink: #0f1d2b;
	--ink-2: #33485c;
	/* #6b7d90 haalde 4,23:1 op wit en zakte net voor de AA-eis */
	/*
		Het ontwerp gebruikt #6b7d90, maar dat haalt op #f5f8fb en #edf4fa
		geen 4,5:1. Deze tint blijft visueel dicht bij het ontwerp en haalt
		op alle drie de lichte vlakken ruim de norm.
	*/
	--muted: #586878;
	--line: #e7eef5;

	--dark-bg: #0f1d2b;
	--dark-ink: #eaf2fa;

	/*
		Op een donker vlak werkt het ontwerp met vijf tinten, niet met één.
		Alles op --dark-muted zetten maakt juist de belangrijkste tekst
		(hero-sub, banner-sub, intro) te blauw en te dof.
	*/
	--dark-sub: #d7e3ee;    /* sub- en introtekst: het meest prominent */
	--dark-link: #c4d2df;   /* footerlinks */
	--dark-zacht: #b9c7d6;  /* footer-tagline */
	--dark-muted: #8fa4b8;  /* tertiair: mini-stats, zakelijke gegevens */
	--dark-label: #7e93a8;  /* kolomkoppen en bodembalk */

	--dark-line: rgba(255, 255, 255, 0.12);

	--wa: #25d366;
	--wa-donker: #128c7e;

	/* Het vinkjesgroen uit het ontwerp (op lichte vlakken) */
	--groen: #16a34a;

	/*
		Het ontwerp zet kleine groene tekst op #128c7e, maar dat haalt op wit
		bij 12px maar 4,19:1 en op de lichtgroene pil 3,87:1. Deze tint is
		visueel gelijk en haalt 5,07:1 respectievelijk 4,69:1.
	*/
	--wa-tekst: #0e7d70;

	--font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
	--font-body: "Inter Tight", system-ui, -apple-system, sans-serif;

	--r-lg: 18px;
	--r-md: 14px;
	--r-sm: 10px;
	--r-pill: 999px;

	/* Letterlijk de schaduwen uit Penpot, per soort element */
	--schaduw-kaart: 0 2px 6px -2px rgba(15, 29, 43, 0.08);
	--schaduw-hoog: 0 10px 28px -10px rgba(15, 29, 43, 0.1);
	--schaduw-diep: 0 14px 40px -16px rgba(15, 29, 43, 0.35);
	--schaduw-zwevend: 0 24px 60px -20px rgba(6, 16, 26, 0.5);
	--schaduw-knop-blauw: 0 10px 24px -10px rgba(0, 136, 204, 0.6);
	--schaduw-knop-wa: 0 10px 26px -10px rgba(18, 140, 126, 0.65);

	/* Buitenmaat: 1180 inhoud + 2x20 padding, zodat de kolom net als in
	   het ontwerp op x=130 begint en 1180 breed is */
	--container: 1220px;
	--nav-h: 76px;
}

/* ============================================================
	3. Reset en basis
	============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--brand-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--brand);
}

img,
svg,
picture {
	max-width: 100%;
	display: block;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--brand-300);
	outline-offset: 2px;
	border-radius: 4px;
}

.skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--wit);
	color: var(--ink);
	padding: 12px 20px;
	border-radius: 0 0 var(--r-sm) 0;
	font-weight: 700;
}

.skiplink:focus {
	left: 0;
}

/* ============================================================
	4. Layout: container, secties, sectiekop
	============================================================ */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 20px;
}

.sectie {
	padding-block: 84px;
}

.sectie--wit {
	background: var(--wit);
}

.sectie--canvas {
	background: var(--canvas);
}

.sectie--krap {
	padding-block: 56px;
}

/* Voor secties die hun eigen randen meebrengen, zoals de marquee */
.sectie--geen {
	padding-block: 0;
}

/* Donkere sectie met kaarten erin: /technisch-partner en /over-ons */
.sectie--donker {
	background: var(--dark-bg);
}

.sectie--donker.op-donker .kaart {
	background: #16283c;
	border-color: #25415c;
	box-shadow: none;
}

.sectie--donker.op-donker .kaart p {
	color: #d7e3ee;
}

.sectiekop {
	max-width: 800px;
	margin-bottom: 44px;
}

.sectiekop--midden {
	margin-inline: auto;
	text-align: center;
}

/* Het caseblok op /laadtijd-optimalisatie krijgt in het ontwerp 900 breed */
.sectiekop--breed {
	max-width: 900px;
}

/*
	Chips en eyebrows. Het ontwerp kent er vijf soorten, en dat is geen
	slordigheid: de homepage zet een stip voor de sectiechip, de
	binnenpagina's niet. Vandaar een kale basispil plus modifiers.

	.chip            sectiepil, 28 hoog, radius 14, geen stip
	.chip--stip      de homepage-variant: 30 hoog met een stip van 6px
	.chip--klein     26 hoog, 11px; staat binnen een kaart
	.chip--groen     de WordPress + AI-tint (#e9faf0 met --wa-donker)
	.chip--vlak      donkere pil met een dekkende vulling, zonder stip
	.eyebrow-kaart   helemaal geen pil: 10,5px vette tekst boven een kaarttitel
*/
.chip {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	background: var(--brand-50);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--brand-700);
	margin-bottom: 16px;
}

.chip--stip {
	height: 30px;
	gap: 8px;
	padding-right: 16px;
}

.chip--stip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--brand);
	flex: 0 0 6px;
}

.chip--klein {
	height: 26px;
	padding: 0 13px;
	font-size: 11px;
	margin-bottom: 14px;
}

.chip--groen {
	background: #e9faf0;
	color: var(--wa-donker);
}

.op-donker .chip {
	background: rgba(92, 192, 240, 0.14);
	color: var(--brand-300);
}

.op-donker .chip--stip::before {
	background: var(--brand-300);
}

.chip--vlak,
.op-donker .chip--vlak {
	background: #12314a;
	color: var(--brand-300);
}

.eyebrow-kaart {
	display: block;
	margin: 0 0 9px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--brand-700);
}

.op-donker .eyebrow-kaart {
	color: var(--brand-300);
}

/* Losse labels die in het ontwerp geen pil zijn maar wel een chip lijken */
.eyebrow-midden {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	text-align: center;
	/* --brand haalde op wit maar 3,89:1 bij deze maat */
	color: var(--brand-700);
}

.eyebrow-licht {
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--brand-300);
}

.sectiekop h2 {
	font-size: clamp(1.75rem, 3vw, 2.125rem);
	font-weight: 800;
}

.sectiekop .intro {
	margin-top: 14px;
	color: var(--ink-2);
	font-size: 16px;
}

.klein {
	font-size: 13.5px;
	color: var(--muted);
}

/*
	Bewuste regelval uit Penpot. Op een breed scherm valt de kop precies
	zoals ontworpen; onder 768px zou diezelfde verdeling gek uitpakken, dus
	daar laten we de tekst gewoon doorlopen.
*/
.br-desktop {
	display: inline;
}

@media (max-width: 767px) {
	.br-desktop {
		display: none;
	}
}

/* ============================================================
	5. Knoppen
	============================================================ */

/*
	Basismaat voor elk inline icoon. Een SVG zonder breedte of hoogte rekt
	zich uit tot zijn container; deze regel geeft er overal een vaste maat
	aan, die verderop per component overschreven kan worden.
*/
.ico {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* Voor een icoon midden in lopende tekst, waar het met de regel meeloopt */
.ico--klein {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: -2px;
}


/*
	Knophoogtes komen uit het ontwerp: 54 in de hero en de CTA-band, 52 als
	standaard en 46 in een prijskaart. Vandaar min-height in plaats van
	verticale padding, zo blijft de hoogte gelijk bij een langer label.
*/
.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 40px;
	border-radius: var(--r-pill);
	border: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.knop:hover {
	transform: translateY(-1px);
}

.hero__knoppen .knop,
.cta-band__knoppen .knop {
	min-height: 54px;
}

.prijskaart .knop {
	min-height: 46px;
	font-size: 14px;
}

.knop--primair {
	background: var(--brand-knop);
	color: var(--wit);
	box-shadow: var(--schaduw-knop-blauw);
}

.knop--primair:hover {
	background: var(--brand-700);
	color: var(--wit);
}

.knop--wa {
	background: var(--wa);
	color: var(--wit);
	box-shadow: var(--schaduw-knop-wa);
}

.knop--wa:hover {
	background: #1fb857;
	color: var(--wit);
}

.knop--outline {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.knop--outline:hover {
	border-color: var(--brand);
	color: var(--brand-700);
}

/* Outline in de merkkleur, voor de niet-aanbevolen pakketten */
.knop--outline-brand {
	background: transparent;
	color: var(--brand-700);
	border: 1.5px solid var(--brand);
}

.knop--outline-brand:hover {
	background: var(--brand-50);
	color: var(--brand-700);
}

/*
	Op donkere vlakken (spec par. 3). Boven op de herofoto is een kale rand
	te onrustig: een matglazen laag houdt de knop doorschijnend, maar de
	achtergrond schijnt er niet meer scherp doorheen.
*/
.op-donker .knop--outline,
.knop--outline-licht {
	color: var(--wit);
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: transparent;
}

.op-donker .knop--outline:hover,
.knop--outline-licht:hover {
	color: var(--wit);
	border-color: var(--wit);
	background: rgba(255, 255, 255, 0.12);
}

/*
	Alleen boven op een foto: daar is een kale rand te onrustig, want de
	achtergrond schijnt er scherp doorheen. Een matglazen laag houdt de knop
	doorschijnend maar maakt het label rustig leesbaar. Op de egale blauwe
	CTA-band is dat niet nodig en blijft de knop een kale outline.
*/
.hero .knop--outline-licht,
.nav .knop--outline-licht {
	background: rgba(255, 255, 255, 0.02);
	-webkit-backdrop-filter: blur(4px) saturate(140%);
	backdrop-filter: blur(4px) saturate(140%);
}

.hero .knop--outline-licht:hover,
.nav .knop--outline-licht:hover {
	background: rgba(255, 255, 255, 0.2);
}

.knop .ico {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.tekstlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	color: var(--brand-700);
}

.tekstlink:hover {
	text-decoration: underline;
}

.tekstlink .ico {
	width: 17px;
	height: 17px;
}

/* ============================================================
	6. Navigatie
	============================================================ */

/*
	De nav begint doorzichtig over de hero, zoals ontworpen, en wordt daarna
	een compacte donkere balk die meeloopt. De pagina's zijn lang genoeg dat
	de navigatie, het klantportaal en het WhatsApp-icoon anders het grootste
	deel van het bezoek onbereikbaar zijn.
*/
.nav {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 40;
	height: var(--nav-h);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: height 0.25s ease, background-color 0.25s ease,
		border-color 0.25s ease, box-shadow 0.25s ease, transform 0.28s ease;
}

/* Op pagina's zonder donkere hero staat de nav meteen op een donkere balk */
.nav--vast {
	background: var(--dark-bg);
	border-bottom-color: var(--dark-line);
}

.nav--gepind {
	height: 64px;
	background: var(--dark-bg);
	border-bottom-color: var(--dark-line);
	box-shadow: 0 10px 30px -18px rgba(6, 16, 26, 0.9);
}

.nav--gepind .nav__binnen {
	height: 64px;
}

.nav--gepind .nav__logo img {
	height: 32px;
}

/* Op mobiel schuift hij weg bij naar beneden scrollen en komt hij meteen
   terug zodra je omhoog beweegt, zodat hij geen leesruimte kost */
.nav--verborgen {
	transform: translateY(-100%);
}

.nav__binnen {
	height: var(--nav-h);
	display: flex;
	transition: height 0.25s ease;
	align-items: center;
	gap: 28px;
}

.nav__logo {
	flex: 0 0 auto;
}

.nav__logo img {
	height: 38px;
	width: auto;
	transition: height 0.25s ease;
}

.nav__items {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-inline: auto 0;
}

.nav__link {
	color: var(--wit);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	opacity: 0.92;
	background: none;
	border: 0;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nav__link .ico,
.taalswitch__knop .ico {
	width: 15px;
	height: 15px;
}

.nav__hamburger .ico {
	width: 24px;
	height: 24px;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
	color: var(--wit);
	opacity: 1;
}

.nav__link[aria-current="page"] {
	color: var(--wit);
	opacity: 1;
	box-shadow: inset 0 -2px 0 var(--brand-300);
}

.nav__rechts {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.nav__wa {
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--wa);
	box-shadow: 0 8px 20px -8px rgba(18, 140, 126, 0.7);
	display: inline-grid;
	place-items: center;
	color: var(--wit);
}

.nav__wa .ico {
	width: 22px;
	height: 22px;
}

/* Diensten-dropdown */
.nav__dropdown {
	position: relative;
}

.nav__paneel {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	min-width: 280px;
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--schaduw-hoog);
	padding: 10px;
	display: none;
}

.nav__paneel[data-open="true"] {
	display: block;
}

/*
	Onzichtbaar bruggetje over de 14px tussen knop en paneel, zodat de muis
	die afstand kan oversteken zonder dat het menu dichtklapt.
*/
.nav__paneel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 14px;
}

.nav__paneel a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.nav__paneel a:hover {
	background: var(--brand-50);
	color: var(--brand-700);
}

/* Taalswitch */
.taalswitch {
	position: relative;
}

.taalswitch__knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	color: var(--wit);
	font-size: 14px;
	font-weight: 600;
	padding: 6px;
}

.taalswitch__paneel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	box-shadow: var(--schaduw-hoog);
	padding: 6px;
	display: none;
	min-width: 120px;
}

.taalswitch__paneel[data-open="true"] {
	display: block;
}

.taalswitch__paneel a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
}

.taalswitch__paneel a[aria-current="true"] {
	background: var(--brand-50);
	color: var(--brand-700);
	font-weight: 700;
}

/* Hamburger en mobiel menu */
.nav__hamburger {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	color: var(--wit);
	place-items: center;
}

.nav__overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--dark-bg);
	padding: 20px;
	overflow-y: auto;
	display: none;
}

.nav__overlay[data-open="true"] {
	display: block;
}

.nav__overlay-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-h);
}

.nav__overlay a {
	display: block;
	color: var(--wit);
	font-size: 19px;
	font-weight: 600;
	text-decoration: none;
	padding: 14px 0;
	border-bottom: 1px solid var(--dark-line);
}

.nav__overlay .subgroep a {
	font-size: 16px;
	font-weight: 500;
	color: var(--dark-ink);
	padding-left: 14px;
}

/* ============================================================
	7. Hero
	============================================================ */

.hero {
	position: relative;
	background: var(--dark-bg);
	color: var(--wit);
	overflow: hidden;
	/* Afgestemd op het Penpot-board: eyebrow op y=216, sectie 800 hoog */
	padding-top: calc(var(--nav-h) + 127px);
	padding-bottom: 193px;
}

.hero--kort {
	padding-top: calc(var(--nav-h) + 66px);
	padding-bottom: 56px;
}


.hero__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero[data-uitsnede="left"] .hero__foto img {
	object-position: 20% center;
}

.hero[data-uitsnede="right"] .hero__foto img {
	object-position: 80% center;
}

.hero[data-uitsnede="center-low"] .hero__foto img {
	object-position: center 70%;
}

.hero[data-uitsnede="left-low"] .hero__foto img {
	object-position: 25% 75%;
}

.hero[data-uitsnede="right-low"] .hero__foto img {
	object-position: 75% 75%;
}

/* Donkere waas zodat de tekst altijd leesbaar is */
/*
	Drie lagen over de foto, precies zoals in Penpot: een horizontale scrim
	die naar rechts oplicht, een verticale die naar onderen dieper wordt, en
	een blauwe gloed die rechtsboven achter de chatkaart valt.
*/
.hero__waas {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(46% 62% at 77% 20%, rgba(0, 136, 204, 0.3) 0%, rgba(0, 136, 204, 0) 100%),
		radial-gradient(28% 42% at 121% 3%, rgba(0, 136, 204, 0.3) 0%, rgba(0, 136, 204, 0) 100%),
		linear-gradient(180deg, rgba(8, 17, 27, 0.2) 0%, rgba(8, 17, 27, 0.6) 100%),
		linear-gradient(90deg, rgba(8, 17, 27, 0.92) 0%, rgba(10, 22, 34, 0.62) 80%, rgba(10, 22, 34, 0.4) 100%);
}

.hero__binnen {
	position: relative;
	z-index: 2;
}

.hero__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 370px);
	gap: 56px;
	align-items: center;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--brand-300);
	margin-bottom: 22px;
}

.hero__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--brand-300);
	flex: 0 0 28px;
}

.hero h1 {
	/* 4,75rem in plaats van 4rem: anders kapt de bovengrens de 76px uit het
	   ontwerp af tot 64px op een scherm van 1440 */
	font-size: clamp(2.4rem, 5.2vw, 4.75rem);
	font-weight: 800;
	color: var(--wit);
}

/*
	De koppen van de dienstpagina's zijn in het ontwerp 512 tot 541 hoog,
	tegen 800 op de homepage; de H1 is daar navenant kleiner. Deze regel
	moet na .hero h1 staan: gelijke specificiteit, dus de volgorde beslist.
*/
.hero--kort h1 {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
}

/* /contact heeft een lagere kop maar een grotere H1: 60px in het ontwerp */
.hero--contact {
	padding-top: calc(var(--nav-h) + 91px);
	padding-bottom: 46px;
}

.hero--contact h1 {
	font-size: clamp(2.2rem, 4.2vw, 3.75rem);
}

/* De twee koppen met een chatkaart of infokaart ernaast: 52px */
.hero--chat h1,
.hero--gloed h1 {
	font-size: clamp(2.1rem, 3.7vw, 3.25rem);
}

.hero h1 .punt {
	color: var(--brand);
}

.hero__sub {
	margin-top: 24px;
	max-width: 560px;
	font-size: 18px;
	color: #d7e3ee;
}

/*
	De homepage houdt 520 (zo staat het in het ontwerp), de dienstpagina's
	krijgen een bredere kolom: 660 tot 700, afhankelijk van de pagina.
*/
.hero--kort .hero__sub {
	max-width: 700px;
}

/* /laadtijd-optimalisatie gebruikt in het ontwerp een kolom van 900 */
.hero--breed .hero__sub,
.hero--breed h1 {
	max-width: 900px;
}

.hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.hero__chevron .ico {
	width: 26px;
	height: 26px;
}

.hero__chevron {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
	8. Donkere vlakken en de brandgloed (animatie 3)
	============================================================ */

.op-donker {
	position: relative;
	background: var(--dark-bg);
	color: var(--dark-ink);
	overflow: hidden;
}

.op-donker h2,
.op-donker h3 {
	color: var(--wit);
}

.op-donker .intro,
.op-donker p {
	color: var(--dark-sub);
}

/*
	Eén radiale brandgloed rechtsboven die heel langzaam ademt.
	Puur CSS, zodat er geen JS aan te pas komt (spec par. 5.3).

	isolation plus een negatieve z-index is hier geen detail: zonder die twee
	is de gloed een gepositioneerde pseudo zonder z-index, en die schildert
	over de tekst heen. Wit werd daardoor lichtblauw.
*/
.gloed {
	isolation: isolate;
}

.gloed::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 720px;
	height: 720px;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle, rgba(0, 136, 204, 0.34) 0%, rgba(0, 136, 204, 0) 68%);
	animation: ademen 16s ease-in-out infinite alternate;
}

/*
	Koppen zonder foto (/wordpress-ai, /ai-domeinnaam en de 404) hebben in
	het ontwerp twee radiale gloeden op donkerblauw in plaats van een beeld.
*/
.hero--gloed,
.fout {
	isolation: isolate;
}

.hero--gloed::after,
.fout::after {
	content: "";
	position: absolute;
	left: -18%;
	bottom: -30%;
	width: 700px;
	height: 500px;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle, rgba(0, 136, 204, 0.22) 0%, rgba(0, 136, 204, 0) 68%);
	animation: ademen 19s ease-in-out infinite alternate-reverse;
}

@keyframes ademen {
	from {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.75;
	}

	to {
		transform: translate3d(-42px, 34px, 0) scale(1.12);
		opacity: 1;
	}
}

/* ============================================================
	9. Kaarten en rasters
	============================================================ */

.kaart {
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--schaduw-kaart);
	padding: 24px;
}

.raster {
	display: grid;
	gap: 24px;
}

.raster--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.raster--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.raster--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
	De maatvoering van een tegelkaart komt uit het ontwerp: kop 17px/600 met
	regelhoogte 1,6 en tekst van 13,5px. Kaarten met een eigen rol (dienst,
	tool, mini-case) zetten hun eigen maat, verderop in dit bestand.
*/
.kaart h3 {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 2px;
}

.kaart p {
	color: var(--ink-2);
	font-size: 13.5px;
	line-height: 1.5;
}

.kaart__ico {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--brand-50);
	color: var(--brand);
	display: grid;
	place-items: center;
	margin-bottom: 14px;
}

.kaart__ico .ico {
	width: 22px;
	height: 22px;
}

/* Lijst met vinkjes */
.checks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 5px 0;
	font-size: 15px;
}

.checks .ico {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-top: 3px;
	color: var(--groen);
}

/* Op een donker vlak zet het ontwerp de vinkjes in WhatsApp-groen */
.op-donker .checks .ico {
	color: var(--wa);
}

/*
	USP-lijst met kop en subregel. Het ontwerp zet er een kaal vinkje voor,
	geen icoonvlak, en trekt geen lijnen tussen de items.
*/
.usp li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0 0 26px;
}

.usp li:last-child {
	padding-bottom: 0;
}

.usp__kop {
	font-weight: 600;
	font-size: 17.5px;
	line-height: 1.6;
	margin-bottom: 2px;
}

.usp__sub {
	color: var(--ink-2);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

/* Op een donker vlak: kop wit, tekst licht grijsblauw, zoals in het ontwerp */
.op-donker .usp__kop {
	color: var(--wit);
}

.op-donker .usp__sub {
	color: #b9c7d6;
}

/* Genummerde stappen */
.stappen {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	counter-reset: stap;
}

/*
	Het ontwerp zet hier alleen het cijfer neer, in merkblauw, zonder vlak
	eromheen (zie docs/ontwerp/raw/onderhoud-desktop.txt: "nummer y=1497
	26/800/1.12 #0088cc").
*/
.stap__nr {
	color: var(--brand);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.12;
	margin: 0 0 12px;
}

/* ============================================================
	10. Prijskaarten en prijstabel
	============================================================ */

.prijskaart {
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--schaduw-kaart);
	padding: 30px;
	display: flex;
	flex-direction: column;
}

.prijskaart--accent {
	border-color: var(--brand);
	border-width: 2px;
	box-shadow: 0 14px 36px -14px rgba(0, 136, 204, 0.32);
	animation: kloppen 3.4s ease-in-out infinite;
}

/* Zachte pulserende schaduw op de aanraderkaart (spec par. 5.4) */
@keyframes kloppen {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.16), 0 14px 36px -14px rgba(0, 136, 204, 0.32);
	}

	50% {
		box-shadow: 0 0 0 12px rgba(0, 136, 204, 0), 0 18px 42px -14px rgba(0, 136, 204, 0.42);
	}
}

.prijskaart__vlag {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--brand-knop);
	color: var(--wit);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 5px 11px;
	border-radius: var(--r-pill);
}

.prijskaart {
	position: relative;
}

.prijskaart__naam {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 8px;
}

/*
	Het ontwerp zet "per maand, excl. btw" naast het bedrag op dezelfde
	regel, uitgelijnd op de onderkant, en trekt daaronder een scheidingslijn.
*/
.prijskaart__regel {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin: 0 0 16px;
}

.prijskaart__regel--open {
	margin-bottom: 6px;
}

/*
	Op de brede kaarten naast een tekstkolom zet het ontwerp de toevoeging
	onder de prijs in plaats van ernaast: "vanaf EUR 240" met daaronder
	"eenmalig, excl. btw" (zie laadtijd-desktop.txt: prijs op y=2068,
	post op y=2120 met dezelfde x).
*/
.prijskaart__regel--gestapeld {
	display: block;
}

.prijskaart__regel--gestapeld .prijskaart__post {
	display: block;
	margin-top: 6px;
}

.prijskaart__prijs {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

/* De losse prijskaart naast een tekstkolom is in het ontwerp groter */
.prijskaart--breed {
	box-shadow: 0 12px 36px -14px rgba(15, 29, 43, 0.16);
}

.prijskaart--breed .prijskaart__naam {
	font-size: 22px;
}

.prijskaart--breed .prijskaart__prijs {
	font-size: clamp(2.25rem, 3vw, 2.75rem);
}

.prijskaart__post {
	color: var(--muted);
	font-size: 13px;
}

.prijskaart--breed .prijskaart__post {
	font-size: 14px;
}

.prijskaart__specs {
	margin-bottom: 24px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.prijskaart__specs li {
	padding: 3px 0;
	font-size: 13px;
}

/*
	De eerste drie punten zijn in het ontwerp de hoofdspecs: groter en
	zwaarder, met een haarlijn eronder die ze van de rest scheidt.
*/
.prijskaart__specs .prijskaart__spec--hoofd {
	font-size: 14.5px;
	font-weight: 600;
}

/*
	De haarlijn hangt aan het eerste subpunt, niet aan het laatste hoofdpunt:
	:last-of-type kijkt naar het elementtype (li) en niet naar de klasse.
*/
.prijskaart__spec--hoofd + li:not(.prijskaart__spec--hoofd) {
	padding-top: 13px;
	margin-top: 12px;
	border-top: 1px solid var(--line);
}

.prijskaart .knop {
	width: 100%;
}

.prijskaart__noot {
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--muted);
}

.prijskaart__link + .prijskaart__noot {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.prijskaart__noot a,
.prijskaart__link a {
	color: var(--brand-700);
	text-decoration: none;
}

.prijskaart__noot a:hover,
.prijskaart__link a:hover {
	text-decoration: underline;
}

.prijskaart__link {
	text-align: center;
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--muted);
}

.prijskaart__link a {
	color: var(--muted);
}

/* Pakkettabel */
.prijstabel-wrap {
	overflow-x: auto;
}

.prijstabel {
	width: 100%;
	border-collapse: collapse;
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.prijstabel th,
.prijstabel td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid #eef2f7;
	font-size: 15px;
}

.prijstabel thead th {
	background: #f5f8fb;
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--brand-700);
}

.prijstabel tbody tr:last-child td {
	border-bottom: 0;
}

/* De eigen regel valt in het ontwerp op met de merkkleur */
.prijstabel .accent {
	background: var(--brand-50);
	font-weight: 700;
}

.prijstabel .accent td:first-child,
.prijstabel .accent td:last-child {
	color: var(--brand-700);
}

.prijstabel__noot {
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--muted);
}

/* ============================================================
	11. FAQ
	============================================================ */

.faq {
	display: grid;
	gap: 12px;
}

.faq__rij {
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.faq__rij[open] {
	background: var(--kaart-canvas);
}

.faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	font-size: 16.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq__vraag::-webkit-details-marker {
	display: none;
}

.faq__vraag .ico {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	color: var(--muted);
	transition: transform 0.2s ease;
}

.faq__rij[open] .faq__vraag .ico {
	transform: rotate(180deg);
}

.faq__antwoord {
	color: var(--ink-2);
	font-size: 15.5px;
}

.faq__antwoord-binnen {
	padding: 0 22px 20px;
}

/* ============================================================
	12. CTA-band
	============================================================ */

/*
	De CTA-band is in het ontwerp een blauw verloop. Op de dienstpagina's
	twee stops, op de homepage drie. De klasse .op-donker blijft erop staan
	voor de tekstkleuren; deze regel wint van de donkere achtergrond omdat
	hij verderop in dit bestand komt.
*/
.cta-band {
	padding-block: 76px;
	text-align: center;
	background: linear-gradient(135deg, #0072ab 0%, #12a3e0 100%);
}

.cta-band--home {
	background: linear-gradient(135deg, #0a70a8 0%, #0088cc 55%, #14a0de 100%);
}

/* Op blauw zijn de subregel en de chip lichter dan op donkerblauw */
.cta-band .cta-band__sub {
	color: #e3f2fc;
}

/*
	Dienstpagina's zetten de CTA-kop op 34px over de volle breedte, dus op
	een regel (28px op mobiel). Alleen de homepage gebruikt 42px en breekt
	daar bewust over twee regels.
*/
.cta-band h2 {
	font-size: clamp(1.75rem, 2.6vw, 2.125rem);
	font-weight: 800;
	margin-inline: auto;
}

.cta-band--home h2 {
	font-size: clamp(1.875rem, 3.4vw, 2.625rem);
	max-width: 720px;
}

.cta-band__sub {
	margin-top: 18px;
	margin-inline: auto;
	max-width: 620px;
	font-size: 16px;
}

.cta-band__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 32px;
}

/* ============================================================
	13. Footer
	============================================================ */

.footer {
	padding-block: 64px 0;
	font-size: 14px;
}

.footer__raster {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
}

.footer__logo img {
	height: 32px;
	width: auto;
	margin-bottom: 18px;
}

.footer .footer__tagline {
	color: var(--dark-zacht);
	max-width: 320px;
	line-height: 1.6;
}

.footer .footer__stats {
	margin-top: 20px;
	color: var(--dark-muted);
	font-size: 13px;
	line-height: 1.8;
}

.footer__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 8px 14px;
	border: 1px solid var(--dark-line);
	border-radius: var(--r-pill);
	text-decoration: none;
	color: var(--dark-ink);
	font-size: 12.5px;
}

/*
	De sterren zijn inline SVG en geen U+2605: het teken ontbreekt in de
	webfonts, en een systeemfallback levert per apparaat een andere ster op.
*/
.sterren {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f2a516;
}

.sterren .ico {
	width: 1em;
	height: 1em;
}

.footer__badge .sterren {
	font-size: 14px;
}

.footer__kop {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--dark-label);
	margin-bottom: 16px;
}

.footer__links li {
	margin-bottom: 10px;
}

.footer__links a,
.footer__gegevens a {
	color: var(--dark-link);
	text-decoration: none;
}

.footer__links a:hover,
.footer__gegevens a:hover {
	color: var(--wit);
	text-decoration: underline;
}

.footer__gegevens {
	line-height: 1.9;
}

.footer .footer__zakelijk {
	margin-top: 16px;
	color: var(--dark-muted);
	font-size: 13px;
	line-height: 1.8;
}

.footer__bodem {
	margin-top: 48px;
	padding-block: 22px;
	border-top: 1px solid var(--dark-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	color: var(--dark-label);
	font-size: 13px;
}

.footer__bodem a {
	color: var(--dark-label);
	text-decoration: none;
}

.footer__bodem a:hover {
	color: var(--wit);
}

/* ============================================================
	14. Marquee (animatie 5)
	============================================================ */

/*
	In het ontwerp lopen de haarlijnen om het hele blok heen, dus ook om het
	label; alleen de logostrook zelf faded aan de zijkanten weg.
*/
.marqueeblok {
	padding-block: 30px 58px;
	border-block: 1px solid #e3ecf4;
}

.marqueeblok .eyebrow-midden {
	margin-bottom: 60px;
}

.marquee {
	--fade: 360px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.marquee__spoor {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	animation: schuiven 46s linear infinite;
}

.marquee:hover .marquee__spoor {
	animation-play-state: paused;
}

.marquee__spoor img {
	height: 34px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
}

/*
	Op /over-ons staan de logo's in het ontwerp gewoon in kleur; op de
	homepage zijn ze juist grijs en verzacht, zodat ze daar niet met de
	bento-tegels concurreren.
*/
.marqueeblok--kleur .marquee__spoor img {
	filter: none;
	opacity: 1;
}

@keyframes schuiven {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ============================================================
	15. Chat-mockup (animatie 1)
	============================================================ */

.chat {
	background: var(--wit);
	border-radius: var(--r-lg);
	box-shadow: 0 30px 70px -20px rgba(6, 16, 26, 0.6);
	overflow: hidden;
}

.chat--ai {
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}

.chat__kop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}

.chat__avatar {
	width: 36px;
	height: 36px;
	border-radius: var(--r-pill);
}

.chat__naam {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	color: var(--ink);
}

.chat__status {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wa-tekst);
	display: flex;
	align-items: center;
	gap: 5px;
}

.chat__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var(--r-pill);
	background: var(--wa);
}

.chat__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 220px;
}

.bubbel {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink);
	position: relative;
}

.bubbel--in {
	align-self: flex-start;
	background: var(--kaart-canvas);
	border: 1px solid var(--line);
}

.bubbel--uit {
	align-self: flex-end;
	background: #d9f6c8;
	border: 1px solid #c4ecab;
	color: #1e3a24;
}

.bubbel__meta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 8px;
	white-space: nowrap;
	vertical-align: baseline;
}

.bubbel__vink {
	width: 15px;
	height: 9px;
	color: var(--brand);
}

.bubbel__tijd {
	font-size: 10px;
	/* Eigen tint: --muted haalde op de groene bubbel maar 4,2:1 bij 10px */
	color: #54646f;
}

.chat__invoer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 18px 18px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--muted);
	font-size: 13px;
}

.chat__verstuur {
	margin-left: auto;
	width: 34px;
	height: 34px;
	border-radius: var(--r-pill);
	background: var(--wa);
	color: var(--wit);
	display: grid;
	place-items: center;
	flex: 0 0 34px;
}

.chat__verstuur .ico {
	width: 16px;
	height: 16px;
}

/* Berichten die nog getypt moeten worden */
.chat[data-animeert="true"] .bubbel,
.chat[data-animeert="true"] .chat__live {
	opacity: 0;
	transform: translateY(6px);
}

.chat[data-animeert="true"] .bubbel.is-zichtbaar,
.chat[data-animeert="true"] .chat__live.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition: opacity 0.32s ease, transform 0.32s ease;
}

/* ============================================================
	16. Formulier
	============================================================ */

.veld {
	margin-bottom: 18px;
}

.veld label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 7px;
}

.veld input,
.veld textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--wit);
	color: var(--ink);
}

.veld input:focus,
.veld textarea:focus {
	border-color: var(--brand-300);
	outline: none;
	box-shadow: 0 0 0 3px rgba(92, 192, 240, 0.25);
}

.veld textarea {
	min-height: 150px;
	resize: vertical;
}

.veld__fout {
	color: #c0392b;
	font-size: 13.5px;
	margin-top: 6px;
}

/* Veld dat bij het versturen nog leeg bleek */
.veld--fout input,
.veld--fout textarea {
	border-color: #c0392b;
}

/*
	Formulierpoort. Zolang het formulier nog niet gebruikt is staat de knop
	uit en is Turnstile onzichtbaar; fedelta.js zet data-poort-open om.
	Zonder JS wordt dat attribuut nooit gezet en blijft alles gewoon staan.
*/
/*
	Kleinere knop, onder meer voor de Klantportaal-link in de navigatie. Het
	ontwerp zet die op 150 bij 40 met een label van 14/700, duidelijk lichter
	dan een knop in de tekst.
*/
.knop--klein {
	min-height: 40px;
	padding: 0 22px;
	gap: 8px;
	font-size: 14px;
}

.knop--klein .ico {
	width: 16px;
	height: 16px;
}

.knop[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.knop[disabled]:hover {
	transform: none;
}

form[data-poort-open="false"] .cf-turnstile {
	display: none;
}

/* Honeypot: nooit tonen, ook niet voor schermlezers */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.melding {
	padding: 16px 18px;
	border-radius: var(--r-md);
	margin-bottom: 22px;
	font-size: 15.5px;
}

.melding--goed {
	background: #e8f8ee;
	border: 1px solid #b7e6c8;
	color: #1c6b3a;
}

.melding--fout {
	background: #fdecea;
	border: 1px solid #f5c2bc;
	color: #a33025;
}

/*
	De QR-regel alleen op apparaten met een muis (spec par. 10).
	Op touch is er niets te scannen met hetzelfde toestel.
*/
.qr-blok {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.qr-blok {
		display: flex;
		gap: 14px;
		align-items: center;
	}
}

/* ============================================================
	17. Voor/na-slider (animatie 6)
	============================================================ */

/* ============================================================
	18. Homepage-onderdelen
	============================================================ */

/* Cijferband */
.cijferband {
	background: var(--wit);
	border-bottom: 1px solid var(--line);
	/* Ontwerp: band van 300 hoog met de cijfers op y=886 */
	padding-block: 108px;
}

/*
	Vier gelijke kolommen zonder tussenruimte, precies zoals in het ontwerp:
	daar staan de cijfers op x=130, 425, 720 en 1015, dus 295 uit elkaar bij
	een kolombreedte van 295. Een gap plus een negatieve marge maakte de
	eerste kolom smaller dan de rest; de haarlijn is daarom een pseudo die
	geen ruimte inneemt.
*/
.cijferband__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}

.cijfer {
	position: relative;
	text-align: center;
	padding-inline: 14px;
}

.cijferband__raster > .cijfer + .cijfer::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 90px;
	transform: translateY(-50%);
	background: #e3ecf4;
}

.cijfer__waarde {
	font-family: var(--font-display);
	/* Ontwerp: 54px op 1440 */
	font-size: clamp(2rem, 3.75vw, 3.375rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
}

/* "Sinds 2012" is langer en staat in het ontwerp op 46px */
.cijfer__waarde--klein {
	font-size: clamp(1.75rem, 3.2vw, 2.875rem);
}

/* Het tweede deel van de waarde krijgt de merkkleur */
.cijfer__accent {
	color: var(--brand);
}

.cijfer__label {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.45;
}

/* Dienstkaarten */
.dienstkaart {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding: 26px;
}

.dienstkaart h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 12px;
}

.dienstkaart .tekstlink {
	margin-top: auto;
	padding-top: 12px;
}

.dienstkaart__ico {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--brand-50);
	color: var(--brand);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}

.dienstkaart__ico .ico {
	width: 26px;
	height: 26px;
}

.dienstkaart__badge {
	position: absolute;
	top: 26px;
	right: 24px;
	background: var(--wit);
	color: var(--wit);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--r-pill);
}

/*
	De eerste tegel is in het ontwerp een blauwe kaart met witte tekst,
	een doorschijnend icoonvlak en een doorschijnende badge.
*/
.dienstkaart--uitgelicht {
	background: linear-gradient(135deg, #0b76ae 0%, #0088cc 60%, #17a2e0 100%);
	border-color: transparent;
	color: var(--wit);
	box-shadow: 0 14px 34px -14px rgba(15, 29, 43, 0.28);
}

.dienstkaart--uitgelicht h3 {
	color: var(--wit);
}

.dienstkaart--uitgelicht p {
	color: rgba(255, 255, 255, 0.86);
}

.dienstkaart--uitgelicht .dienstkaart__ico {
	background: rgba(255, 255, 255, 0.16);
	color: var(--wit);
}

.dienstkaart--uitgelicht .dienstkaart__badge {
	background: rgba(255, 255, 255, 0.2);
}

.dienstkaart--uitgelicht .tekstlink {
	color: var(--wit);
}

.kaart--accent {
	border-color: var(--brand-300);
}

/* Bento */
.bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
}

.bento__tegel {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--schaduw-hoog);
	background: var(--wit);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bento__tegel h3 {
	font-size: 21px;
	font-weight: 700;
}

/* Alleen de eigen alinea's van de tegel; de chatbubbels erin houden hun
   eigen kleur en maat */
.bento__tegel > p {
	font-size: 13.5px;
	color: var(--ink-2);
	line-height: 1.55;
}

.bento__tegel--breed {
	grid-column: span 7;
}

.bento__tegel--ai {
	grid-column: span 5;
	border-color: transparent;
	box-shadow: 0 14px 34px -12px rgba(6, 16, 26, 0.4);
}

/* De onderhoudstegel heeft in het ontwerp een lichtblauw vlak, zodat de
   witte logregels erop uitkomen */
.bento__tegel--log {
	grid-column: span 5;
	background: var(--canvas);
	border-color: transparent;
}

.bento__tegel--portaal {
	grid-column: span 7;
}

.tekstlink--licht {
	color: var(--brand-300);
	margin-top: auto;
}

.tekstlink--licht:hover {
	color: var(--wit);
}

/* Mini-chat in de AI-tegel */
/*
	De AI-tegel volgt het ontwerp: de vraag is een witte bubbel rechts, het
	antwoord een blauwe balk links met witte tekst en een kleine radius.
*/
.mini-chat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-block: 16px;
}

.mini-chat[data-animeert="true"] > p {
	opacity: 0;
	transform: translateY(6px);
}

.mini-chat[data-animeert="true"] > p.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.mini-chat__vraag,
.mini-chat__antwoord {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.4;
	max-width: 94%;
}

.mini-chat__vraag {
	align-self: flex-end;
	padding: 10px 12px;
	border-radius: 12px 4px 12px 12px;
	background: var(--wit);
	color: var(--ink);
	font-weight: 500;
}

.mini-chat__antwoord {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 4px 12px 12px 12px;
	background: var(--brand);
	color: var(--wit);
	font-weight: 600;
}

/*
	Snelheidstegel: in het ontwerp staat de tekst links (280 breed) en de
	staafgrafiek rechts (344 breed), niet onder elkaar.
*/
.bento__tegel--snelheid {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

.snelheidstegel__tekst > p:last-child {
	font-size: 13.5px;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0;
}

.snelheidstegel__tekst h3 {
	margin-bottom: 10px;
}

/* Snelheidsgrafiek */
.snelheidsgrafiek {
	margin: 0;
	align-self: end;
}

.snelheidsgrafiek__balken {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 188px;
}

/*
	Rood naar amber naar groen: de staven vertellen hetzelfde als de labels
	F en A eronder. Een uniforme kleur zou dat verhaal wegnemen.
*/
.snelheidsgrafiek__balken .balk {
	flex: 1;
	height: var(--h);
	border-radius: 6px;
}

/*
	De staven lopen van links naar rechts omhoog, zodat je het verhaal van
	rood naar groen ziet gebeuren in plaats van in één keer.
*/
.snelheidsgrafiek__balken[data-animeert="true"] .balk {
	transform: scaleY(0.04);
	transform-origin: bottom;
	opacity: 0;
}

.snelheidsgrafiek__balken[data-animeert="true"] .balk.is-zichtbaar {
	transform: none;
	opacity: 1;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.balk--traag {
	background: rgba(214, 61, 82, 0.85);
}

.balk--matig {
	background: #f2a516;
}

.balk--snel {
	background: #15a34a;
}

/* Het ontwerp toont er negen op mobiel */
@media (max-width: 720px) {
	.snelheidsgrafiek__balken .balk:nth-last-child(-n + 2) {
		display: none;
	}
}

.snelheidsgrafiek figcaption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font-size: 12px;
}

.snelheidsgrafiek__voor {
	font-weight: 700;
	color: #c0392b;
}

.snelheidsgrafiek__na {
	font-weight: 700;
	color: #1c8f4b;
}

/* Onderhoud-logtegel (animatie 2) */
/* Het ontwerp zet "afgelopen 24 uur" in een witte pil met rand */
.logtegel__pil {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 26px;
	padding: 0 14px;
	margin: 4px 0 16px;
	border-radius: var(--r-pill);
	background: var(--wit);
	border: 1px solid var(--line);
	font-size: 10px !important;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--muted);
}

/* Elke regel is een witte balk met een groen vinkje aan het eind */
.logtegel {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.logtegel li {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--r-sm);
	background: var(--wit);
	font-size: 12.5px;
	opacity: 0;
	transform: translateX(-6px);
}

.logtegel li.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.logtegel time {
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 34px;
}

.logtegel li > span {
	font-weight: 500;
}

.logtegel__vink {
	margin-left: auto;
	width: 16px;
	height: 16px;
	color: #15a34a;
}

/* Klantportaal-tegel: browserframe met afgekapte screenshot */
/*
	Het ontwerp laat de screenshot breder lopen dan het venster en kapt hem
	af. object-fit doet dat zonder de beeldverhouding te vervormen; zonder
	die eigenschap rekt de afbeelding op smalle schermen uit.
*/
.portaalframe {
	margin-top: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-md) var(--r-md) 0 0;
	overflow: hidden;
}

.portaalframe img {
	display: block;
	width: 100%;
	height: 246px;
	object-fit: cover;
	/* Het ontwerp toont de screenshot vergroot en kapt de randen af */
	object-position: 6% 0;
	transform: scale(1.35);
	transform-origin: top left;
}

/* Drie venstertjes in de framebalk, zoals in het ontwerp */
.portaalframe__balk {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding-inline: 14px;
	background: #fafcfe;
	border-bottom: 1px solid var(--line);
}

.portaalframe__balk::before,
.portaalframe__balk::after,
.portaalframe__balk > i {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: #d5e0ea;
}

/* Zorgeloos-banner */
.banner {
	box-shadow: var(--schaduw-zwevend);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	/* Ontwerp: kaart van 400 hoog met verloop, radius 26 */
	min-height: 400px;
	padding: 56px 56px 56px 56px;
	border-radius: 26px;
	background: linear-gradient(150deg, #0f1d2b 20%, #16283c 100%);
}

.banner__tekst h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 800;
	margin-bottom: 14px;
}

.banner__tekst .checks {
	margin-top: 18px;
}

.banner__tekst .checks li {
	color: var(--dark-ink);
}

/* Prijslockup in de Zorgeloos-banner: 330 breed in het ontwerp */
.banner__prijs {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(234, 242, 250, 0.22);
	border-radius: var(--r-lg);
	padding: 32px 28px;
	max-width: 330px;
	margin-inline: auto 0;
	text-align: center;
}

.banner__prijs .prijskaart__prijs {
	display: block;
	font-size: 54px;
	color: var(--wit);
	margin: 4px 0 0;
}

.banner__prijs .prijskaart__post,
.banner__prijs .klein {
	color: #c6d6e4;
	margin: 4px 0 26px;
	font-size: 13px;
}

.banner__prijs .klein {
	display: block;
	margin: 0;
	font-size: 14px;
}

.banner__tekst > p {
	color: #c6d6e4;
}

.banner__prijs .knop {
	width: 100%;
}

/* Snelcheck onder het caseblok */
/*
	Onder de voor/na-kaart staat in het ontwerp geen witte balk maar een
	kale rij: de caselink links, de uitnodiging in het midden, de knop rechts.
*/
.snelcheck {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: 34px;
}

.snelcheck > p {
	flex: 1 1 380px;
	max-width: 460px;
}

.snelcheck p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-2);
}

/*
	Caseblok: de speed-race-video. De verhouding staat vast in CSS, zodat het
	posterframe en de video precies dezelfde ruimte innemen en er niets
	verspringt zodra de video erbij komt.
*/
/*
	Geen rand, geen schaduw en geen eigen achtergrond: de video hoort in de
	pagina op te gaan, niet als kaart erop te liggen.
*/
.casevideo {
	position: relative;
	margin: 0;
	aspect-ratio: 1180 / 480;
}

/*
	Dezelfde speler in de WordPress + AI-tegel. Het vlak in de video is
	full-bleed #16283c; de afgeronde hoeken zet de site, zodat er niets hoeft
	te blenden met het verloop van de tegel.
*/
.tegelvideo {
	aspect-ratio: 420 / 170;
	margin: 16px 0;
	border-radius: 12px;
	overflow: hidden;
}

/*
	Account-isolatie op /performance-hosting. Het vlak in de video is
	full-bleed #0f1d2b; de radius zet de site, net als bij de tegel. Mobiel
	is het board smaller, dus daar geldt een andere verhouding.
*/
/* De grote WordPress + AI-video boven de stappen */
.wpaivideo {
	aspect-ratio: 1180 / 400;
	margin-bottom: 44px;
}

.isolatievideo {
	aspect-ratio: 480 / 250;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--schaduw-diep);
}

@media (max-width: 720px) {
	.isolatievideo {
		aspect-ratio: 350 / 230;
	}
}

.casevideo__poster img,
.casevideo__speler {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zodra de video draait, ligt hij over het posterframe heen */
.casevideo__speler {
	position: absolute;
	inset: 0;
}

/* Reviews */
.reviews__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.reviews__kop .sectiekop {
	margin-bottom: 24px;
}

/*
	Het ontwerp legt de reviews in een strook die aan de rechterkant
	doorloopt tot buiten de kolom: de vierde kaart piept eruit en nodigt uit
	om te schuiven. De negatieve marge trekt de strook uit de container; de
	sectie eromheen klemt af zodat de pagina niet horizontaal gaat scrollen.
*/
.sectie--reviews {
	overflow: hidden;
}

.reviewstrip {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-bottom: 6px;
}

.reviewstrip::-webkit-scrollbar {
	display: none;
}

.reviewstrip > .review {
	flex: 0 0 360px;
	padding: 26px;
	box-shadow: 0 8px 24px -8px rgba(15, 29, 43, 0.1);
}

.reviewstrip__swipe {
	display: none;
	margin: 16px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--muted);
}

.reviews__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
}

/* Het ontwerp zet de score in een witte pil met rand */
.reviews__rating--pil {
	box-shadow: 0 4px 12px -4px rgba(15, 29, 43, 0.08);
	margin-bottom: 24px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--r-pill);
	background: var(--wit);
	border: 1px solid #e3ecf4;
}

.review .sterren {
	font-size: 15px;
	margin: 0 0 10px;
	color: #f2a516;
}

.review__tekst {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 14px;
}

.review__naam {
	font-weight: 700;
	font-size: 13.5px;
	margin: 0;
}

/* Agency: in het ontwerp een donkere sectie met een verloop */
.sectie--agency {
	background: linear-gradient(160deg, #0f1d2b 30%, #0c1a29 100%);
}

.agency {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.agency h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.375rem);
	font-weight: 800;
	margin-bottom: 14px;
}

/* De kaart met de drie stappen is doorschijnend wit met een dunne rand */
.sectie--agency.op-donker .kaart {
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(234, 242, 250, 0.22);
	box-shadow: none;
	padding: 32px;
}

.sectie--agency.op-donker .kaart h3 {
	font-size: 22px;
	font-weight: 400;
	color: var(--dark-ink);
	margin-bottom: 10px;
}

/* Het ontwerp zet geen lijn tussen de stappen */
.stappenlijst li {
	display: flex;
	gap: 18px;
	padding: 0 0 26px;
}

.stappenlijst li:last-child {
	padding-bottom: 0;
}

.op-donker .stappenlijst li {
	border-bottom: 1px solid rgba(234, 242, 250, 0.14);
	padding-bottom: 22px;
	margin-bottom: 22px;
}

.op-donker .stappenlijst li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.stappenlijst__nr {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	/* --brand-300 haalde maar 2,05:1 op wit */
	color: var(--brand-700);
	flex: 0 0 34px;
}

.op-donker .stappenlijst__nr {
	color: var(--brand-300);
}

@media (max-width: 1024px) {
	.cijferband__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bento__tegel--breed,
	.bento__tegel--ai,
	.bento__tegel--log,
	.bento__tegel--portaal {
		grid-column: span 12;
	}

	.banner,
	.agency {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 720px) {
	.snelcheck {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	/* In een kolom zou de flex-basis de hoogte worden in plaats van de breedte */
	.snelcheck > p {
		flex: 0 0 auto;
		max-width: none;
	}

	.snelcheck .knop {
		width: 100%;
	}
}

/* Contactpagina */
.hero--zonderfoto {
	padding-top: calc(var(--nav-h) + 64px);
	padding-bottom: 56px;
}

.contactraster {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.contactzij {
	display: grid;
	gap: 20px;
}

/*
	De WhatsApp-kaart is in het ontwerp wit met een rand, met een groene
	cirkel als icoon; niet het donkere vlak dat er eerst stond.
*/
.kaart--wa {
	padding: 28px;
	border-radius: 24px;
	border-color: #e7eef5;
}

.kaart--wa__kop {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.kaart--wa__kop h2 {
	margin: 0;
}

.kaart--wa__cirkel {
	box-shadow: 0 8px 20px -8px rgba(18, 140, 126, 0.7);
	flex: 0 0 44px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	background: var(--wa);
	color: var(--wit);
}

.kaart--wa__cirkel .ico {
	width: 22px;
	height: 22px;
}

/* Het gegevensblok staat op een lichtblauw vlak */
.kaart--gegevens {
	background: var(--canvas);
	border-color: transparent;
}

/*
	Ontwerp: naam 16/700 in --ink, adres 15/400 in --ink-2, noot 13.5/400
	in --muted. Zonder deze regel erven ze de kaarttekst en valt de naam te
	klein en te grijs uit.
*/
.kaart--gegevens > p:not(.klein) {
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink-2);
}

.kaart--gegevens > p:not(.klein) strong {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

.kaart--wa h2 {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 8px;
}

.kaart--wa p {
	font-size: 14px;
	line-height: 1.5;
}

.kaart--wa .knop {
	width: 100%;
	margin-top: 16px;
}

/* Het formulier staat in het ontwerp los op de sectie, zonder kaart */
.contactformulier {
	margin-top: 8px;
}

.kaart__kop {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 20px;
}

/* Het ontwerp zet de QR los onder de knop, zonder scheidingslijn erboven */
.qr-blok {
	margin-top: 18px;
}

.qr-blok img {
	background: var(--wit);
	border-radius: var(--r-sm);
	padding: 6px;
	flex: 0 0 76px;
}

/* Het ontwerp trekt geen lijnen tussen de contactrijen */
.contactrijen li {
	display: flex;
	gap: 16px;
	padding: 0 0 24px;
}

.contactrijen li:last-child {
	padding-bottom: 0;
}

.contactrijen__ico {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 12px;
	background: var(--brand-50);
	color: var(--brand);
	display: grid;
	place-items: center;
}

.contactrijen__ico .ico {
	width: 20px;
	height: 20px;
}

.contactrijen__kop {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	margin: 0 0 2px;
}

/*
	De waarde is in het ontwerp gewoon donkere tekst van 16/600; dat het een
	link is blijkt uit de onderstreping bij hover, niet uit een eigen kleur.
*/
.contactrijen a {
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.contactrijen a:hover {
	text-decoration: underline;
}

.gegevenslijst {
	margin: 16px 0 0;
	display: grid;
	gap: 8px;
}

.gegevenslijst div {
	display: flex;
	gap: 14px;
	font-size: 15px;
}

.gegevenslijst dt {
	flex: 0 0 64px;
	color: var(--ink);
	font-weight: 700;
}

.gegevenslijst dd {
	margin: 0;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}

.formulier__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.cf-turnstile {
	margin-bottom: 18px;
}

@media (max-width: 900px) {
	.contactraster {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Dienstpagina's */
.dienstraster {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.usp__ico {
	flex: 0 0 20px;
	margin-top: 5px;
	color: var(--groen);
	display: block;
}

.usp__ico .ico {
	width: 20px;
	height: 20px;
}

/* Lichte sectie waarin de banner als kaart staat */
.sectie--zacht {
	background: #f5f8fb;
}

.kruisbanner {
	box-shadow: var(--schaduw-diep);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Ontwerp: kaart van 1180 bij 180, radius 24 */
	min-height: 180px;
	padding: 40px 48px;
	border-radius: 24px;
	background: var(--dark-bg);
}

.kruisbanner h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
	font-weight: 800;
	margin-bottom: 8px;
}

.kruisbanner p {
	max-width: 620px;
	font-size: 15px;
}

.minicase h2 {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 12px;
}

.minicase p {
	max-width: 860px;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 14px;
}

.stappen li h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

@media (max-width: 900px) {
	.dienstraster {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/*
	Account-isolatie-diagram op /performance-hosting. Het ontwerp maakt er
	een donker serverpaneel van met drie gekleurde vakken en een muur tussen
	jouw site en de besmette buurman.
*/
.isolatie {
	margin: 0;
}

.isolatie__paneel {
	box-shadow: var(--schaduw-diep);
	background: var(--dark-bg);
	border-radius: var(--r-lg);
	border: 0;
	padding: 28px;
}


.isolatie__titel {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--brand-300);
}

.isolatie__boxen {
	display: grid;
	grid-template-columns: 1fr 4px 1fr 4px 1fr;
	align-items: center;
	gap: 14px;
	margin: 18px 0;
}

/* De twee muren die de accounts van elkaar scheiden */
.isolatie__boxen::before,
.isolatie__boxen::after {
	content: "";
	grid-row: 1;
	height: 140px;
	border-radius: 2px;
	background: rgba(92, 192, 240, 0.35);
}

.isolatie__boxen::before {
	grid-column: 2;
}

.isolatie__boxen::after {
	grid-column: 4;
}

.isolatie__box {
	border-radius: 12px;
	border: 1.5px solid;
	padding: 16px 14px;
	min-height: 156px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.isolatie__box:first-child {
	grid-column: 1;
}

.isolatie__box:nth-of-type(2) {
	grid-column: 3;
}

.isolatie__box:nth-of-type(3) {
	grid-column: 5;
}

.isolatie__box--goed {
	background: #123a2b;
	border-color: #22c55e;
}

.isolatie__box--fout {
	background: #3a1520;
	border-color: #ef4444;
}

.isolatie__box--neutraal {
	background: #12314a;
	border-color: var(--brand-300);
}

.isolatie__box--neutraal .isolatie__status {
	color: var(--brand-300);
}

.isolatie__label {
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	color: var(--wit);
}

.isolatie__status {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 12px;
}

.isolatie__box--goed .isolatie__status {
	color: #7ee2a8;
}

.isolatie__box--fout .isolatie__status {
	color: #ff9c9c;
}

.isolatie__status .ico {
	width: 15px;
	height: 15px;
}

.isolatie figcaption {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* Prijsopbouw-paneel op /zorgeloos-pakket */
.opbouw,
.promo {
	background: #edf4fa;
	border-color: transparent;
}

.opbouw h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 16px;
}

.opbouw__lijst {
	margin: 0 0 4px;
}

.opbouw__lijst div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}

.opbouw__lijst dt {
	color: var(--ink-2);
}

.opbouw__lijst dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.opbouw__totaal {
	font-weight: 700;
	color: var(--ink);
	border-bottom: 2px solid var(--line) !important;
}

.opbouw__totaal dt {
	color: var(--ink) !important;
}

/*
	De promokaart op /wordpress-ai wijkt af van de prijsopbouw op
	/zorgeloos-pakket: één lijn boven de twee regels, geen lijnen ertussen,
	en de eerste prijs veel groter dan de tweede.
*/
.promo .opbouw__lijst {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid #d5e2ee;
}

.promo .opbouw__lijst div {
	align-items: baseline;
	padding: 3px 0;
	border-bottom: 0;
	font-size: 14px;
}

.promo .opbouw__lijst dt {
	color: var(--ink);
}

.promo .opbouw__lijst div:first-child dt {
	font-weight: 600;
}

.promo .opbouw__lijst div:first-child dd {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
}

.promo .opbouw__lijst div:nth-child(2) dd {
	font-size: 15px;
	font-weight: 600;
}

/* In het ontwerp staat er geen lijn boven deze noot */
.promo .prijskaart__noot {
	margin-top: 14px;
	padding-top: 0;
	border-top: 0;
	font-size: 12.5px;
}

/*
	Spoedaanvraag. Eén kolom: het tarief moet gelezen zijn voordat iemand
	verstuurt, dus er staat niets naast dat afleidt.
*/
.spoedkolom {
	max-width: 820px;
}

.spoedvoorwaarden {
	margin-bottom: 40px;
	border-left: 3px solid var(--brand);
}

.spoedvoorwaarden p {
	font-size: 15px;
	color: var(--ink-2);
	margin-bottom: 12px;
}

.spoedvoorwaarden .tekstlijst li {
	font-size: 14.5px;
	line-height: 1.6;
}

.veld--akkoord {
	margin-bottom: 20px;
}

.akkoord {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	cursor: pointer;
}

.akkoord input {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 2px;
	accent-color: var(--brand);
}

/*
	Partnerblok op /wordpress-onderhoud-treeonline. Het merk van Tree Online
	staat er in hun eigen kleuren en hun eigen letter; die font wordt alleen
	op deze pagina opgehaald, omdat geen enkel ander element hem gebruikt.
*/
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/assets/fonts/plus-jakarta-sans-800-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF;
}

/*
	Drie kolommen die op dezelfde bovenlijn beginnen. Het merk stond eerder
	los bovenaan omdat het geen kop had; nu lijnt het uit met de h2 ernaast.
*/
.partnerblok {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.partnerblok > * {
	/* De koppen van de tweede en derde kolom staan op regelhoogte 1,12 en
	   1,4; het merk krijgt dezelfde optische start. */
	padding-top: 2px;
}

.partnerblok h2 {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 12px;
}

.partnerblok h3 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}

.partnerblok p {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 12px;
}

.partnerblok__merk {
	display: flex;
	align-items: center;
	gap: 12px;
}

.treeonline__merk {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
}

.treeonline__woord {
	font-family: "Plus Jakarta Sans", var(--font-body);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: #294949;
}

.partnerblok__nodig .checks li {
	font-size: 14px;
	padding: 2px 0;
}

.partnerblok__nodig .klein {
	margin-top: 10px;
}

@media (max-width: 900px) {
	.partnerblok {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* WordPress + AI */
.hero--chat {
	padding-top: calc(var(--nav-h) + 72px);
	padding-bottom: 80px;
}

.chat__avatar--vierkant {
	border-radius: var(--r-sm);
	background: var(--wit);
	padding: 4px;
}

/*
	De AI-chat is geen WhatsApp-venster: het ontwerp gebruikt lichtblauwe en
	lichtgrijze bubbels met donkere tekst, een blauwe verstuurknop en een
	groene statuspil links onder het gesprek.
*/
.chat--ai .bubbel--in,
.chat--ai .bubbel--uit {
	max-width: 88%;
	border-radius: 14px;
	border: 0;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.45;
	padding: 11px 14px;
}

.chat--ai .bubbel--uit {
	background: var(--brand-50);
}

.chat--ai .bubbel--in {
	background: #f4f7fa;
}

.chat--ai .chat__body {
	background: var(--wit);
}

.chat--ai .chat__verstuur {
	background: var(--brand);
}

/*
	Even specifiek als .op-donker p; anders wint die en wordt de tekst op de
	lichtgroene pil onleesbaar licht.
*/
.chat .chat__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	height: 26px;
	padding: 0 13px;
	margin: 6px 0 0;
	border-radius: var(--r-pill);
	background: #e9faf0;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--wa-tekst);
}

.chat__live .ico {
	width: 14px;
	height: 14px;
}

/* Witte kaart met een icoon ervoor, zoals in het ontwerp */
.prompt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--wit);
	border: 1px solid #e7eef5;
	border-radius: 16px;
	padding: 20px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-2);
}

.prompt .ico {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--brand);
}

.prijskaart__jaar2 {
	margin: -14px 0 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brand-700);
}

.promo h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.12;
	margin-bottom: 10px;
}

.promo p {
	font-size: 14px;
	line-height: 1.55;
}

.promo .knop {
	width: 100%;
	margin-top: 16px;
}

/* Eigen-tools-kaarten */
.toolkaart {
	padding: 32px;
}

.toolkaart h3 {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 12px;
}

.toolkaart p {
	font-size: 14.5px;
	line-height: 1.6;
}

.toolkaart .tekstlink {
	margin-top: 14px;
}

/* Tijdlijn op /over-ons */
.tijdlijn {
	position: relative;
	padding-left: 18px;
}

.tijdlijn::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--line);
}

.tijdlijn li {
	position: relative;
	padding: 0 0 20px 20px;
}

.tijdlijn li:last-child {
	padding-bottom: 0;
}

.tijdlijn li::before {
	content: "";
	position: absolute;
	left: -3px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: var(--r-pill);
	background: var(--brand);
	border: 2px solid var(--wit);
}

.tijdlijn__jaar {
	display: block;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--brand-700);
	margin-bottom: 2px;
}

.tijdlijn p {
	margin: 0;
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.55;
}

/* Vanaf-prijs past niet op één regel in de standaardgrootte */
.prijskaart__prijs {
	overflow-wrap: break-word;
}

.prijskaart__prijs:not(:has(+ .prijskaart__post)) {
	font-size: 38px;
}

/* .ai-domeinnaam */
.domeinkaart {
	background: #16283c;
	border: 1px solid #25415c;
	border-radius: var(--r-lg);
	padding: 32px;
	color: var(--dark-ink);
}

/* Alleen onder de domeinnaam staat een lijn, niet tussen elke regel */
.domeinkaart__domein {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--wit);
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid #25415c;
}

.domeinkaart .opbouw__lijst div {
	border-bottom: 0;
	padding: 5px 0;
}

.domeinkaart dt {
	color: var(--dark-muted) !important;
}

.domeinkaart dd {
	color: var(--wit);
	font-weight: 600;
}

.domeinkaart .klein {
	color: var(--dark-muted);
	margin-top: 14px;
}

.vergelijkkaarten {
	display: grid;
	gap: 12px;
}

.vergelijkkaart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--wit);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 18px;
}

.vergelijkkaart--accent {
	border-color: var(--brand-300);
	background: var(--brand-50);
}

.vergelijkkaart__naam {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 4px;
}

.vergelijkkaart .klein {
	margin: 0;
}

.vergelijkkaart__totaal {
	text-align: right;
	flex: 0 0 auto;
}

.vergelijkkaart__totaal strong {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 800;
	white-space: nowrap;
}

/* 404 */
.fout {
	padding-top: calc(var(--nav-h) + 72px);
	padding-bottom: 72px;
	text-align: center;
}

.fout__code {
	font-family: var(--font-display);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 8px;
	letter-spacing: -0.04em;
}

/* .op-donker p wint anders van de eigen kleur van de foutcode */
.op-donker .fout__code {
	color: #12314a;
}

.fout__eyebrow {
	text-align: center;
	margin-bottom: 14px;
}

.fout h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	color: var(--wit);
	margin-bottom: 16px;
}

.fout__sub {
	max-width: 620px;
	margin-inline: auto;
	color: var(--dark-sub);
}

.fout .fout__linkskop {
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: var(--dark-muted);
	margin: 76px 0 24px;
}

.fout__noot {
	margin-top: 28px;
	text-align: center;
	font-size: 14px;
	color: #d7e3ee;
}

.fout .kaart {
	background: #16283c;
	border-color: #25415c;
	box-shadow: none;
	padding: 24px;
	text-align: left;
}

.foutlink__ico {
	display: block;
	margin-bottom: 14px;
	color: var(--brand-300);
}

.foutlink__ico .ico {
	width: 22px;
	height: 22px;
}

.fout .kaart .klein {
	color: #d7e3ee;
}

.foutlink {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.foutlink:hover {
	border-color: var(--brand-300);
	transform: translateY(-2px);
	color: inherit;
}

.foutlink .usp__kop {
	display: block;
	margin-bottom: 4px;
}

/* Sobere tekstpagina's (voorwaarden, privacy) */
.tekstkolom {
	max-width: 760px;
	margin-inline: auto;
}

.tekstkolom__intro {
	font-size: 18px;
	color: var(--ink-2);
	margin-bottom: 32px;
}

.tekstkolom section {
	margin-bottom: 32px;
}

.tekstkolom h2 {
	font-size: 21px;
	font-weight: 800;
	margin-bottom: 12px;
}

.tekstkolom p {
	color: var(--ink-2);
	font-size: 16px;
}

.tekstlijst {
	margin: 0 0 1em;
	padding-left: 22px;
}

.tekstlijst li {
	list-style: disc;
	color: var(--ink-2);
	font-size: 16px;
	margin-bottom: 8px;
}

.tekstkolom__pdf {
	margin: 32px 0;
}

.tekstkolom__datum {
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* ============================================================
	20. Donkere vlakken winnen van de componentachtergrond

	.op-donker staat vroeg in dit bestand, maar componenten als .kaart en
	.bento__tegel zetten later hun eigen witte achtergrond. Bij gelijke
	specificiteit wint dan de laatste, met een witte kaart en een witte kop
	als resultaat. Deze regels hebben een klasse meer en winnen daardoor
	ongeacht de volgorde.
	============================================================ */

.op-donker.kaart,
.op-donker.bento__tegel,
.op-donker.prijskaart,
.op-donker.sectie--wit,
.op-donker.sectie--canvas {
	background: var(--dark-bg);
	border-color: var(--dark-line);
}

/*
	Alleen de directe alinea's: de chatbubbels binnenin staan op een lichte
	achtergrond en houden hun eigen donkere tekstkleur.
*/
.op-donker.kaart > p,
.op-donker.bento__tegel > p {
	color: var(--dark-muted);
}

/* .op-donker p wint anders van de eigen kleur van de kaart-eyebrow */
.op-donker p.eyebrow-kaart {
	color: var(--brand-300);
}

/* De bubbels in de AI-tegel staan op hun eigen vlak en houden hun kleur */
.op-donker .mini-chat__vraag {
	color: var(--ink);
}

.op-donker .mini-chat__antwoord {
	color: var(--wit);
}

/*
	Een chatbubbel heeft zijn eigen lichte achtergrond, ook midden in een
	donker vlak. De algemene regel .op-donker p is een afstammelingselector
	en wint anders van .bubbel; deze regels hebben een klasse meer.
	Raakt de bento-tegel op de homepage en de chat-hero op /wordpress-ai.
*/
.op-donker .bubbel {
	color: var(--ink);
}

.op-donker .bubbel--uit {
	color: #1e3a24;
}

.op-donker .bubbel__tijd,
.op-donker .chat__invoer {
	color: var(--muted);
}

/* De kop van de chatkaart staat ook op wit */
.op-donker .chat__naam {
	color: var(--ink);
}

.op-donker .chat__status {
	color: var(--wa-tekst);
}

/*
	In de AI-chat op /wordpress-ai is alleen het bolletje groen; de tekst
	"gekoppeld aan jouwsite.nl" staat in het ontwerp gewoon in grijs.
*/
.chat--ai .chat__status {
	color: var(--muted);
}

/* ============================================================
	19. Hulpklassen
	============================================================ */

.alleen-mobiel {
	display: none;
}

.visueel-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Subtiel binnenkomen bij scrollen (spec par. 5.8) */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
}

[data-reveal].is-zichtbaar {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Reviews die pas na de shuffle zichtbaar worden (spec par. 11) */
.review--verborgen {
	display: none;
}

/* ============================================================
	Responsief
	============================================================ */

@media (max-width: 1024px) {
	.raster--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 860px) {
	.nav__items,
	.nav__rechts .taalswitch,
	.nav__rechts .knop {
		display: none;
	}

	.nav__hamburger {
		display: grid;
	}

	.nav__logo {
		margin-right: auto;
	}
}

@media (max-width: 720px) {
	:root {
		/* Het mobiele board zet de haarlijn op y=63 */
		--nav-h: 64px;
	}

	body {
		font-size: 16px;
	}

	.container {
		padding-inline: 20px;
	}

	.sectie {
		padding-block: 48px;
	}

	.sectie--krap {
		padding-block: 40px;
	}

	.cijferband {
		padding-block: 32px 48px;
	}

	/* Op mobiel een raster van twee bij twee met lijnen ertussen */
	.cijferband__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 0;
	}

	.cijferband__raster > .cijfer + .cijfer::before {
		display: none;
	}

	/* De verticale lijn loopt door over beide rijen heen */
	.cijferband__raster > .cijfer:nth-child(2n)::before {
		display: block;
		top: -12px;
		height: calc(100% + 24px);
		transform: none;
	}

	.cijferband__raster > .cijfer:nth-child(n + 3) {
		padding-top: 24px;
	}

	.cijferband__raster > .cijfer:nth-child(n + 3)::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: #e3ecf4;
	}

	.cijfer__label {
		font-size: 12.5px;
	}

	/* De snelheidstegel stapelt op mobiel: eerst de tekst, dan de grafiek */
	.bento__tegel--snelheid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.bento__tegel,
	.kaart--wa,
	.toolkaart {
		padding: 24px;
	}

	/*
		Op mobiel staat het icoonvlak naast de titel in plaats van erboven,
		en is het 48 in plaats van 58.
	*/
	.dienstkaart {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 16px;
		align-items: center;
		padding: 20px;
	}

	.dienstkaart__ico {
		width: 48px;
		height: 48px;
		margin: 0;
		grid-row: 1;
	}

	.dienstkaart h3 {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		font-size: 17px;
		line-height: 1.25;
	}

	.dienstkaart > p {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 18px 0 0;
	}

	.dienstkaart .tekstlink {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 14px;
		padding-top: 0;
	}

	.dienstkaart__badge {
		top: 32px;
		right: 20px;
	}

	/* Het ontwerp toont twee reviewkaarten met een derde die eruit piept */
	.reviewstrip > .review {
		flex: 0 0 300px;
	}

	.reviewstrip__swipe {
		display: block;
	}

	.portaalframe img {
		height: 174px;
	}

	.portaalframe__balk {
		height: 26px;
	}

	.casevideo {
		aspect-ratio: 350 / 420;
	}

	.marqueeblok {
		padding-block: 22px 32px;
	}

	.marqueeblok .eyebrow-midden {
		margin-bottom: 34px;
		font-size: 11px;
	}

	.marquee__spoor img {
		height: 26px;
	}

	.raster--2,
	.raster--3,
	.raster--4,
	.stappen {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
		Het mobiele ontwerp zet Diensten en Bedrijf naast elkaar; het merkblok
		erboven en Gegevens eronder lopen over de volle breedte.
	*/
	.footer__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 20px;
	}

	.footer__raster > div:first-child,
	.footer__raster > div:last-child {
		grid-column: 1 / -1;
	}

	.marquee {
		--fade: 40px;
	}

	.hero {
		padding-top: calc(var(--nav-h) + 40px);
		padding-bottom: 40px;
	}

	.hero__sub {
		margin-top: 20px;
		font-size: 15.5px;
	}

	.hero__eyebrow {
		font-size: 11px;
		margin-bottom: 12px;
	}

	.hero__eyebrow::before {
		width: 20px;
		flex-basis: 20px;
	}

	.sectiekop {
		margin-bottom: 32px;
	}

	.sectiekop .intro {
		font-size: 15px;
	}

	.usp__kop {
		font-size: 16.5px;
	}

	.usp__sub {
		font-size: 13.5px;
		line-height: 1.5;
	}

	.hero__knoppen .knop {
		width: 100%;
	}

	.alleen-mobiel {
		display: block;
	}

	.alleen-desktop {
		display: none;
	}

	.gloed::before {
		width: 420px;
		height: 420px;
	}
}

/* ============================================================
	21. Reduced motion (spec par. 5)
	Alles uit, maar altijd het eindbeeld tonen. Nooit een lege staat.
	============================================================ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	[data-reveal],
	.chat[data-animeert="true"] .bubbel {
		opacity: 1 !important;
		transform: none !important;
	}

	.marquee__spoor {
		animation: none;
		transform: none;
	}

	.knop:hover {
		transform: none;
	}
}