/* ==========================================================================
   Droomwand — homepage, "Hoe het werkt" en "Hulp" (spec §9)
   Rustige, ruimere hero met het beeld als hoofdrol.
   ========================================================================== */

.hero {
	display: grid;
	gap: var(--sp-9);
	align-items: center;
	padding-block: var(--sp-10) var(--sp-12);
}

.hero-tekst .lead {
	margin-top: var(--sp-4);
	max-width: 34rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-7);
}

/* --- Hero: compacte reviewbadge (zelfde bron als de footer) --- */
.hero-review {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.hero-review svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: #eab308;
}

.hero-review strong {
	color: var(--fg);
}

.hero-beeld {
	display: flex;
	flex-direction: column;
}

.mockup-fallback {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-3);
}

.mockup-fallback img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Hero: vitrine-carrousel met echte bibliotheekbeelden --- */
.hero-vitrine-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-3);
}

.hero-vitrine-beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(18px) saturate(1.3);
	transform: scale(1.04);
	transition:
		opacity 0.5s ease,
		filter 0.9s ease,
		transform 0.9s ease;
}

.hero-vitrine-beeld.actief {
	opacity: 1;
	filter: blur(0) saturate(1);
	transform: scale(1);
}

/* --- Hero: "genereren"-fase — waas + pulserende stippen + kleurengolf --- */
.hero-vitrine-frame.genereren .hero-vitrine-beeld.actief {
	filter: blur(10px) saturate(1.3);
	transform: scale(1.02);
}

.hero-vitrine-laden {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	opacity: 0;
	background: rgba(20, 20, 16, 0.28);
	transition: opacity 0.25s ease;
}

.hero-vitrine-frame.genereren .hero-vitrine-laden {
	opacity: 1;
}

.hero-vitrine-laden span {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: var(--r-rond);
	background: #fff;
	opacity: 0.5;
	transform: scale(0.6);
}

.hero-vitrine-frame.genereren .hero-vitrine-laden span {
	animation: dw-stip-puls 1s ease-in-out infinite;
}

.hero-vitrine-laden span:nth-child(2) { animation-delay: 0.15s; }
.hero-vitrine-laden span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dw-stip-puls {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

.hero-vitrine-paletten {
	position: absolute;
	bottom: var(--sp-3);
	right: var(--sp-3);
	display: flex;
	gap: 0.3rem;
	padding: 0.35rem;
	border-radius: var(--r-rond);
	background: color-mix(in srgb, var(--surface) 78%, transparent);
	backdrop-filter: blur(6px);
}

.hero-vitrine-paletten span {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: var(--r-rond);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	transform: scale(0.75);
	opacity: 0.6;
}

.hero-vitrine-frame.genereren .hero-vitrine-paletten span {
	animation: dw-palet-golf 0.7s ease;
}

.hero-vitrine-paletten span:nth-child(1) { animation-delay: 0ms !important; }
.hero-vitrine-paletten span:nth-child(2) { animation-delay: 60ms !important; }
.hero-vitrine-paletten span:nth-child(3) { animation-delay: 120ms !important; }
.hero-vitrine-paletten span:nth-child(4) { animation-delay: 180ms !important; }
.hero-vitrine-paletten span:nth-child(5) { animation-delay: 240ms !important; }
.hero-vitrine-paletten span:nth-child(6) { animation-delay: 300ms !important; }
.hero-vitrine-paletten span:nth-child(7) { animation-delay: 360ms !important; }
.hero-vitrine-paletten span:nth-child(8) { animation-delay: 420ms !important; }

@keyframes dw-palet-golf {
	0%, 100% { transform: scale(0.75); opacity: 0.6; }
	50% { transform: scale(1.25); opacity: 1; }
}

.hero-vitrine-badge {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-rond);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(6px);
	box-shadow: var(--shadow-1);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
}

.hero-vitrine-badge svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--accent);
	animation: dw-vonk-puls 1.8s ease-in-out infinite;
}

@keyframes dw-vonk-puls {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(0.85); }
}

/* --- Hero: "prompt"-balk (eerlijke link, typemachine-effect via JS) --- */
.hero-prompt {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	color: var(--fg);
	text-decoration: none;
	transition: box-shadow var(--duur) var(--ease);
}

.hero-prompt:hover {
	box-shadow: var(--shadow-2);
}

.hero-prompt-icoon {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--accent);
}

.hero-prompt-veld {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	font-size: var(--fs-sm);
	white-space: nowrap;
	overflow: hidden;
}

.hero-prompt-cursor {
	flex: none;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: var(--accent);
	animation: dw-cursor-knipper 1s steps(1) infinite;
}

@keyframes dw-cursor-knipper {
	50% { opacity: 0; }
}

.hero-prompt-ga {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--r-rond);
	background: var(--accent-zacht);
	color: var(--accent);
}

.hero-prompt-ga svg {
	width: 1rem;
	height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.hero-vitrine-beeld {
		transition: none;
		filter: none;
		transform: none;
	}

	.hero-vitrine-laden,
	.hero-vitrine-laden span,
	.hero-vitrine-paletten span {
		animation: none !important;
		opacity: 0 !important;
	}

	.hero-prompt-cursor {
		animation: none;
	}
}

/* ==========================================================================
   Zachte onthulling bij scroll
   Eén mechaniek voor alle vier de blokken hieronder: het element staat een
   paar pixels lager en doorzichtig tot reveal.js het in beeld ziet komen.
   Zonder JS (of met prefers-reduced-motion) blijft alles gewoon staan —
   daarom verbergt .js-reveal, niet [data-reveal] zelf.
   ========================================================================== */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--duur-traag) var(--ease),
		transform var(--duur-traag) var(--ease);
	transition-delay: var(--reveal-vertraging, 0ms);
}

.js-reveal [data-reveal].is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   1 — Vier manieren om te beginnen
   Geen kaartjes maar vier kolommen met haarlijnen ertussen. Vier gelijke
   dozen suggereren vier producten; dit leest als één keuze met vier ingangen.
   ========================================================================== */
.start-rij {
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-8);
}

.start-kolom {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	height: 100%;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border-sterk);
	color: inherit;
	text-decoration: none;
}

.start-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--accent);
}

.start-kop .icoon {
	width: 1.75rem;
	height: 1.75rem;
	transition: transform var(--duur) var(--ease);
}

.start-kop .num {
	font-size: var(--fs-md);
}

.start-kolom h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-kop);
}

/* De onderstreping groeit vanaf links: de lijn boven de kolom en de lijn
   onder de kop zijn dezelfde beweging, zo blijft de hover rustig. */
.start-kolom h3::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	margin-top: var(--sp-2);
	background: var(--accent);
	transition: width var(--duur) var(--ease);
}

.start-kolom p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.start-kolom:hover .icoon,
.start-kolom:focus-visible .icoon {
	transform: translateY(-2px);
}

.start-kolom:hover h3::after,
.start-kolom:focus-visible h3::after {
	width: 2.5rem;
}

/* ==========================================================================
   2 — Categorieën: beeldmozaïek
   Hier gaat het over sfeer, dus is het beeld de kaart en niet een plaatje
   bóven een kaart. Brede en smalle tegels wisselen elkaar af.
   ========================================================================== */
.cat-mozaiek {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

.cat-tegel {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--accent);
	box-shadow: var(--shadow-1);
	color: var(--accent-fg);
	text-decoration: none;
	isolation: isolate;
}

.cat-tegel-beeld {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}

/* Verloop in plaats van een vlakke waas: bovenin blijft het beeld schoon,
   onderin is het donker genoeg voor witte tekst (contrast ≥ 4.5:1). */
.cat-tegel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(20, 18, 15, 0.82) 0%,
		rgba(20, 18, 15, 0.5) 38%,
		rgba(20, 18, 15, 0.12) 72%,
		rgba(20, 18, 15, 0) 100%
	);
}

.cat-tegel-leeg::after {
	background: linear-gradient(to top, rgba(20, 18, 15, 0.45), rgba(20, 18, 15, 0));
}

.cat-tegel-tekst {
	position: relative;
	padding: var(--sp-5);
}

.cat-tegel-tekst h3 {
	margin: 0;
	font-size: var(--fs-xl);
	line-height: var(--lh-kop);
	color: var(--accent-fg);
}

.cat-tegel-tekst p {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-sm);
	color: rgba(243, 238, 230, 0.82);
}

.cat-tegel:hover .cat-tegel-beeld,
.cat-tegel:focus-visible .cat-tegel-beeld {
	transform: scale(1.04);
}

/* ==========================================================================
   3 — Zakelijk: intro naast de ingangen
   Deze sectie spreekt een andere bezoeker aan dan de rest van de pagina.
   Daarom krijgt hij als enige een eigen intro naast de tegels, en tegels
   zonder foto: na het mozaïek hierboven zou nóg een beeldenrij dat blok
   zijn kracht afnemen.
   ========================================================================== */
.zak-sectie {
	display: grid;
	gap: var(--sp-8);
}

.zak-intro > .kicker,
.zak-intro > h2 {
	margin-top: 0;
}

.zak-intro > .muted {
	max-width: 32ch;
	margin-top: var(--sp-4);
}

.zak-lijst {
	display: grid;
	gap: var(--sp-4);
}

.zak-tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	height: 100%;
	padding: var(--sp-5);
	border: 1px solid var(--border-sterk);
	border-radius: var(--r-lg);
	color: inherit;
	text-decoration: none;
	transition:
		border-color var(--duur) var(--ease),
		background-color var(--duur) var(--ease);
}

.zak-tegel-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--accent-zacht);
	color: var(--accent);
}

.zak-tegel-icoon .icoon {
	width: 1.25rem;
	height: 1.25rem;
}

.zak-tegel h3 {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-kop);
}

.zak-tegel p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.zak-tegel-pijl {
	position: absolute;
	top: var(--sp-5);
	right: var(--sp-5);
	color: var(--accent);
	opacity: 0;
	transform: translateX(-4px);
	transition:
		opacity var(--duur) var(--ease),
		transform var(--duur) var(--ease);
}

.zak-tegel-pijl svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.zak-tegel:hover,
.zak-tegel:focus-visible {
	border-color: var(--accent);
	background: var(--surface);
}

.zak-tegel:hover .zak-tegel-pijl,
.zak-tegel:focus-visible .zak-tegel-pijl {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   4 — Atelier: de donkere band
   Het enige donkere blok op de pagina. Het proces is "achter de schermen",
   en de omslag markeert tegelijk het einde van de homepage.
   ========================================================================== */
.band-donker {
	border-block-color: var(--accent);
	background: var(--accent);
	color: var(--accent-fg);
}

.band-donker .kicker {
	color: rgba(243, 238, 230, 0.6);
}

.band-donker h2,
.band-donker h3 {
	color: var(--accent-fg);
}

.band-donker p {
	color: rgba(243, 238, 230, 0.78);
}

.stappen {
	display: grid;
	gap: var(--sp-8);
	/* Ruimer dan de andere blokken: het merkteken is een groot rond vlak
	   dat direct onder de kop begint, en plakt bij de gebruikelijke sp-9
	   tegen de onderkant van de titel aan. */
	margin-top: var(--sp-11);
}

.stap {
	position: relative;
	padding-left: 3.75rem;
}

/* De doorlopende lijn door alle vier de merktekens. Op mobiel loopt hij
   verticaal langs de stappen, op breedte horizontaal door de bolletjes.
   Hij blijft binnen de kolom: een lijn die buiten de container steekt geeft
   op smalle schermen een horizontale scrollbalk. */
.stap::before {
	content: "";
	position: absolute;
	top: 2.5rem;
	left: 1.25rem;
	width: 1px;
	height: calc(100% - 2.5rem + var(--sp-8));
	background: rgba(243, 238, 230, 0.2);
}

.stap:last-child::before {
	display: none;
}

.stap-merk {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(243, 238, 230, 0.28);
	border-radius: var(--r-rond);
	background: var(--accent);
	color: var(--accent-fg);
}

.stap-merk .icoon {
	width: 1.25rem;
	height: 1.25rem;
}

.stap .num {
	color: rgba(243, 238, 230, 0.55);
	font-size: var(--fs-md);
}

.stap h3 {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-kop);
}

.stap p {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
}

.stappen-sectie .actions {
	margin-top: var(--sp-9);
}

/* Knop op de donkere band: crème vlak, groene tekst. */
.btn-licht {
	background: var(--accent-fg);
	border-color: var(--accent-fg);
	color: var(--accent);
}

.btn-licht:hover {
	background: #fff;
	border-color: #fff;
	color: var(--accent);
}

.band-donker :focus-visible {
	outline-color: var(--accent-fg);
}

/* ==========================================================================
   Grotere schermen
   ========================================================================== */
@media (min-width: 40rem) {
	.start-rij {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--sp-7);
	}

	.cat-mozaiek {
		grid-template-columns: repeat(2, 1fr);
	}

	.zak-lijst {
		grid-template-columns: repeat(2, 1fr);
	}

	.stappen {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--sp-7);
	}
}

@media (min-width: 64rem) {
	.start-rij {
		grid-template-columns: repeat(4, 1fr);
	}

	.cat-mozaiek {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}

	/* Een brede tegel beslaat twee kolommen plus de tussenruimte. Met 16/9
	   daar en 7/8 hier komen beide op vrijwel dezelfde hoogte uit, zodat de
	   rijen netjes uitlijnen in plaats van te trappen. */
	.cat-tegel {
		aspect-ratio: 7 / 8;
	}

	.cat-tegel-breed {
		grid-column: span 2;
		aspect-ratio: 16 / 9;
	}

	.cat-tegel-breed .cat-tegel-tekst {
		padding: var(--sp-6);
	}

	.cat-tegel-breed .cat-tegel-tekst h3 {
		font-size: var(--fs-2xl);
	}

	.zak-sectie {
		grid-template-columns: 5fr 7fr;
		align-items: start;
		column-gap: var(--sp-10);
	}

	.stappen {
		grid-template-columns: repeat(4, 1fr);
		column-gap: var(--sp-6);
	}

	/* Op breedte kantelt de lijn: het merkteken gaat boven de tekst staan
	   en de lijn loopt dwars door de bolletjes naar de volgende stap. */
	/* Het merkteken is 2,5rem hoog en staat op top 0; sp-10 laat er een
	   volle regel ruimte onder vallen in plaats van het nummer ertegenaan
	   te duwen. */
	.stap {
		padding-top: var(--sp-10);
		padding-left: 0;
	}

	.stap::before {
		top: 1.25rem;
		left: 3.25rem;
		width: calc(100% + var(--sp-6) - 3.25rem);
		height: 1px;
	}
}

/* --- FAQ-accordeon: standaardstijl (losse kaarten) --- */
.faq {
	display: grid;
	gap: var(--sp-3);
}

.faq-item {
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}

.faq-vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	min-height: var(--raak);
	padding: var(--sp-4) var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	list-style: none;
	cursor: pointer;
}

.faq-vraag::-webkit-details-marker {
	display: none;
}

.faq-pijl {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--muted);
	transition: transform var(--duur) var(--ease);
}

.faq-item[open] .faq-pijl {
	transform: rotate(45deg);
}

.faq-antwoord {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--muted);
	line-height: var(--lh-basis);
}

/* --- FAQ-accordeon: platte rijen (Hulp-pagina, binnen een categorie) --- */
.faq--rijen {
	gap: 0;
}

.faq--rijen .faq-item {
	border-radius: 0;
	background: none;
	box-shadow: none;
	border-bottom: 1px solid var(--border);
}

.faq--rijen .faq-item:last-child {
	border-bottom: none;
}

.faq--rijen .faq-vraag {
	padding-inline: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
}

.faq--rijen .faq-antwoord {
	padding-inline: 0;
}

/* --- Hulp: getinte hero met zoekbalk en snelfilters --- */
.hulp-hero {
	padding-block: var(--sp-10) var(--sp-9);
	background: var(--bg-elevated);
	border-bottom: 1px solid var(--border);
}

.hulp-zoek-veld {
	margin-top: var(--sp-8);
	max-width: 28rem;
}

.hulp-chips {
	margin-top: var(--sp-4);
}

/* --- Hulp: categorieën in een 2-koloms raster --- */
.hulp-inhoud {
	padding-block: var(--sp-11) var(--sp-13);
}

.hulp-categorieen {
	display: grid;
	gap: var(--sp-10) var(--sp-11);
}

.faq-item[hidden],
.hulp-groep[hidden] {
	display: none;
}

.hulp-groep-kop {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-2);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border-sterk);
}

.hulp-groep-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--r-md);
	background: var(--accent-zacht);
	color: var(--accent);
}

.hulp-groep-icoon svg {
	width: 1.15rem;
	height: 1.15rem;
}

.hulp-groep-titel {
	scroll-margin-top: calc(var(--header-hoogte) + var(--sp-4));
	margin: 0;
	font-size: var(--fs-lg);
}

.hulp-leeg {
	grid-column: 1 / -1;
	margin: 0;
}

/* --- Hulp: vertrouwensblok --- */
.hulp-vertrouwen {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--sp-5);
	margin-top: var(--sp-11);
}

.hulp-vertrouwen-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--r-md);
	background: var(--accent-zacht);
	color: var(--accent);
}

.hulp-vertrouwen-icoon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.hulp-vertrouwen h2 {
	font-size: var(--fs-lg);
}

.hulp-vertrouwen-lijst {
	display: grid;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
}

.hulp-vertrouwen-lijst li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.hulp-vertrouwen-lijst svg {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.1rem;
	color: var(--accent);
}

.hulp-inhoud .actions {
	margin-top: var(--sp-9);
}

/* --- Hulp: contactkaarten --- */
.hulp-contact-kop {
	margin-top: var(--sp-13);
	padding-top: var(--sp-9);
	border-top: 1px solid var(--border);
	max-width: var(--max-smal);
}

.hulp-contact-kaarten {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-7);
}

.hulp-contact-kaart {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-5);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	color: var(--fg);
	text-decoration: none;
	transition: box-shadow var(--duur) var(--ease);
}

.hulp-contact-kaart:hover {
	box-shadow: var(--shadow-2);
}

.hulp-contact-kaart--accent {
	background: var(--accent);
	color: var(--accent-fg);
}

.hulp-contact-kaart-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--sp-2);
	border-radius: var(--r-rond);
	background: var(--accent-zacht);
	color: var(--accent);
}

.hulp-contact-kaart--accent .hulp-contact-kaart-icoon {
	background: rgba(255, 255, 255, 0.16);
	color: var(--accent-fg);
}

.hulp-contact-kaart-icoon svg {
	width: 1.1rem;
	height: 1.1rem;
}

.hulp-contact-kaart-titel {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
}

/* --- Kennisbank-teaser onderaan de Hulp-pagina --- */
.hulp-kennisbank {
	margin-top: var(--sp-13);
	padding-top: var(--sp-9);
	border-top: 1px solid var(--border);
}

.hulp-kennisbank-kop {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	max-width: var(--max-smal);
}

.hulp-kennisbank-actions {
	margin-top: var(--sp-7);
}

/* --- Hoe het werkt: vertrouwensbalk --- */
.hoe-vertrouwen-balk {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3) var(--sp-8);
	padding-block: var(--sp-6);
	border-bottom: 1px solid var(--border);
}

.hoe-vertrouwen-balk p {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.hoe-vertrouwen-balk svg {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--accent);
}

/* --- Hoe het werkt: visueel stappenoverzicht --- */
.hoe-stappen-sectie {
	padding-block: var(--sp-12) var(--sp-11);
}

.hoe-stappen {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-9);
}

.hoe-stap-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--sp-3);
	border-radius: var(--r-md);
	background: var(--accent-zacht);
	color: var(--accent);
}

.hoe-stap-icoon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.hoe-stap .num {
	margin-top: var(--sp-2);
}

.hoe-stap h3 {
	margin-top: var(--sp-1);
}

/* --- Hoe het werkt: detailtekst uit de editor --- */
.hoe-detail {
	padding-block: var(--sp-4) var(--sp-11);
}

/* --- Hoe het werkt: vier startmanieren --- */
.hoe-start-sectie {
	padding-block: var(--sp-11);
	background: var(--bg-elevated);
	border-block: 1px solid var(--border);
}

.hoe-start-sectie .card-link .num {
	margin-top: var(--sp-2);
}

.hoe-start-sectie .card-link h3 {
	margin-top: var(--sp-1);
}

/* --- Hoe het werkt: doorlinks naar de rest van de site --- */
.hoe-ontdek {
	padding-block: var(--sp-11);
}

.hoe-ontdek-kaart h3 {
	margin-top: var(--sp-1);
}

.hoe-ontdek-kaart .muted {
	margin-top: var(--sp-1);
}

/* --- Hoe het werkt: afsluitende CTA-band --- */
.hoe-cta {
	padding-block: var(--sp-13);
	background: var(--accent);
	color: var(--accent-fg);
	text-align: center;
}

.hoe-cta p {
	color: color-mix(in srgb, var(--accent-fg) 82%, transparent);
}

.hoe-cta .actions {
	margin-top: var(--sp-7);
}

.hoe-cta .btn-secondary {
	background: transparent;
	border-color: color-mix(in srgb, var(--accent-fg) 40%, transparent);
	color: var(--accent-fg);
}

.hoe-cta .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 40rem) {
	.hulp-vertrouwen-lijst {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}

	.hulp-contact-kaarten {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	.hero {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--sp-12);
	}

	.hulp-categorieen {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}

	.hoe-stappen {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (min-width: 40rem) and (max-width: 63.9375rem) {
	.hoe-stappen {
		grid-template-columns: repeat(2, 1fr);
	}
}