/* SaaSWorks — stylesheet van de site. Kleuren en type als tokens op :root. */

@font-face { font-family: "Sora"; src: url("fonts/sora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	--blauw: #217ff1;
	--blauw-diep: #0b5ad4;
	--blauw-nacht: #0a3f9c;
	--blauw-licht: #d3e5fc;
	--blauw-zacht: #e8f1fd;
	--ijs: #f3f6fb;
	--grijs: #6b6b6b;
	--inkt: #1f2b38;
	--wit: #fff;
	--rand: rgba(33, 127, 241, .14);
	--glas: rgba(255, 255, 255, .12);
	--glas-rand: rgba(255, 255, 255, .2);
	--sora: "Sora", "Inter", system-ui, sans-serif;
	--inter: "Inter", system-ui, sans-serif;
	--rad: 16px;
	--rad-s: 12px;
	--schaduw: 0 1px 2px rgba(15, 50, 100, .04), 0 12px 32px -12px rgba(15, 50, 100, .14);
	--uit: cubic-bezier(.16, 1, .3, 1);
	--vak: 1400px;
	--rand-x: 20px;
	--sectie: 140px;
}

/* ------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
	margin: 0;
	background: var(--wit);
	color: var(--grijs);
	font-family: var(--sora);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
main { display: block; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Het framework kleurt links (`body a:where(…)`) en geeft elke sectie padding en flex (`:where(section)`). */
html body a, html body a:hover { color: inherit; }
section { display: block; padding: 0; }
header.kop, footer.voet { padding-inline: 0; }
p, h1, h2, h3, h4, h5, h6, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; color: var(--blauw); }
strong { font-weight: 500; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blauw); color: var(--wit); }

.icoon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.vak { width: 100%; max-width: var(--vak); margin-inline: auto; padding-inline: var(--rand-x); }
.sectie { padding-block: var(--sectie); position: relative; }
.sectie--kort { padding-block: 0 var(--sectie); }
.sectie--blauw { background: var(--blauw); color: var(--blauw-licht); }
.sectie--blauw h2, .sectie--blauw h3 { color: var(--wit); }
.sectie--licht { background: var(--ijs); }

/* ------------------------------------------------------------ type */
.titel-xl { font-size: 72px; line-height: 1; letter-spacing: -.06em; font-weight: 500; color: var(--blauw); text-wrap: balance; }
.titel-l { font-size: 56px; line-height: 1.04; letter-spacing: -.055em; font-weight: 500; color: var(--blauw); text-wrap: balance; }
.titel-m { font-size: 24px; line-height: 1.4; letter-spacing: -.04em; font-weight: 500; color: var(--blauw); }
.titel-s { font-size: 20px; line-height: 1.4; letter-spacing: -.04em; font-weight: 500; color: var(--blauw); }

.pil {
	display: inline-flex; align-items: center;
	padding: 7px 16px; margin-bottom: 20px;
	border: 1px solid var(--blauw); border-radius: 100px;
	color: var(--blauw); font-size: 16px; line-height: 24px; font-weight: 500;
}
.pil--wit { border-color: rgba(255, 255, 255, .7); color: var(--wit); }

.sectiekop { margin-bottom: 64px; }
.sectiekop--midden { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sectiekop--midden .titel-xl { max-width: 900px; }
.sectiekop--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sectiekop--split .titel-xl { max-width: 760px; }
.sectiekop__tekst { max-width: 400px; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--grijs); }
.sectiekop__tekst strong { color: var(--blauw); }
.sectie--blauw .sectiekop__tekst { color: var(--blauw-licht); }
.sectie--blauw .sectiekop__tekst strong { color: var(--wit); }

/* ------------------------------------------------------------ knoppen */
.knop {
	--k-bg: var(--blauw); --k-kl: var(--wit); --k-rand: transparent;
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 20px; border-radius: var(--rad-s);
	background: var(--k-bg); color: var(--k-kl); border: 1px solid var(--k-rand);
	font-size: 18px; line-height: 1.2; letter-spacing: -.02em; font-weight: 500;
	overflow: hidden; cursor: pointer; white-space: nowrap;
	transition: background-color .35s var(--uit), border-color .35s var(--uit), color .35s var(--uit), transform .35s var(--uit);
}
/* Het tekstvak blijft staan en knipt af; twee kopieën van de tekst rollen erin omhoog. */
.knop__tekst { position: relative; display: block; overflow: hidden; color: transparent; padding-block: .12em; }
.knop__tekst::before, .knop__tekst::after {
	content: attr(data-t); position: absolute; left: 0; top: .12em; width: 100%; color: var(--k-kl);
	transition: transform .55s var(--uit);
}
.knop__tekst::after { transform: translateY(130%); }
.knop:hover .knop__tekst::before { transform: translateY(-130%); }
.knop:hover .knop__tekst::after { transform: translateY(0); }
.knop__pijl { width: 18px; height: 18px; transition: transform .4s var(--uit); }
.knop:hover .knop__pijl { transform: translateX(3px); }
.knop:active { transform: scale(.98); }
.knop--wit { --k-bg: var(--wit); --k-kl: var(--blauw); }
.knop--wit:hover { --k-bg: var(--blauw-zacht); }
.knop--rand { --k-bg: transparent; --k-kl: var(--wit); --k-rand: rgba(255, 255, 255, .55); }
.knop--rand:hover { --k-bg: rgba(255, 255, 255, .1); --k-rand: var(--wit); }
.knop--blauw:hover { --k-bg: var(--blauw-diep); }
.knop--breed { width: 100%; }

/* ------------------------------------------------------------ logo */
.merk { display: inline-flex; align-items: center; gap: 4px; color: var(--wit); }
.merk__wolk { flex: none; overflow: visible; }
.merk__server { width: 30px; height: 34px; flex: none; overflow: visible; filter: drop-shadow(0 6px 12px rgba(5, 40, 120, .3)); }
.merk__lijn { fill: #a9c9f2; }
.merk__led { fill: #22c47a; filter: drop-shadow(0 0 2px #5ff2a6); animation: led var(--t, 1.6s) steps(1, end) infinite; animation-delay: var(--d, 0s); }
@keyframes led { 0%, 100% { opacity: 1; } 12% { opacity: .2; } 18% { opacity: 1; } 46% { opacity: .2; } 50% { opacity: 1; } 58% { opacity: .2; } 63% { opacity: 1; } 86% { opacity: .2; } 90% { opacity: 1; } }
.merk__tekst { display: flex; flex-direction: column; line-height: 1; }
.merk__naam { font-size: 28px; font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.merk__punt {
	position: relative; display: inline-block; width: .19em; height: .19em; margin-inline: .12em .018em;
	border-radius: 50%; background: #6cc0ff; vertical-align: baseline;
	box-shadow: 0 0 .18em #6cc0ff; animation: punt 2.4s ease-in-out infinite;
}
.merk__punt::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: .03em solid #8fd0ff; animation: puntring 2.4s ease-out infinite;
}
@keyframes punt { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.82); } }
@keyframes puntring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.merk--klein .merk__server { width: 26px; height: 30px; }
.merk--klein .merk__naam { font-size: 24px; }
.merk--groot .merk__server { width: 44px; height: 50px; }
.merk--groot .merk__naam { font-size: 38px; }
/* ------------------------------------------------------------ kop (navigatie bovenaan) */
.kop { position: absolute; inset: 0 0 auto; z-index: 50; color: var(--wit); }
.kop__rij { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 96px; }
.kop__merk { justify-self: start; }
.kop__links { display: flex; align-items: center; gap: 4px; }
.kop__link {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 10px 14px; border-radius: 100px;
	font-size: 14px; font-weight: 500; line-height: 14px; color: var(--wit);
	transition: background-color .3s var(--uit);
}
.kop__link:hover, .kop__groep:focus-within > .kop__link, .kop__link[aria-current] { background: rgba(255, 255, 255, .12); }
.kop__pijltje { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--uit); }
.kop__groep { position: relative; }
.kop__groep:hover .kop__pijltje { transform: rotate(180deg); }
.kop__sub {
	position: absolute; left: 50%; top: 100%; padding-top: 10px;
	opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
	transition: opacity .3s var(--uit), transform .4s var(--uit), visibility 0s .3s;
}
.kop__groep:hover .kop__sub, .kop__groep:focus-within .kop__sub {
	opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.kop__subvak {
	display: flex; flex-direction: column; min-width: 230px; padding: 8px;
	background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(10, 40, 90, .35);
}
.kop__subvak a { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--inkt); transition: background-color .25s, color .25s; }
.kop__subvak a:hover, .kop__subvak a[aria-current] { background: var(--ijs); color: var(--blauw); }
.kop__subicoon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--blauw-zacht); color: var(--blauw); transition: background-color .3s var(--uit), color .3s var(--uit), transform .4s var(--uit); }
.kop__subicoon .icoon { width: 19px; height: 19px; }
.kop__subvak a:hover .kop__subicoon { background: var(--blauw); color: var(--wit); transform: scale(1.06); }
.kop__rechts { justify-self: end; display: flex; align-items: center; gap: 10px; }
.kop .knop { height: 44px; font-size: 16px; }
.kop .knop--rand:hover, .kop .knop--rand:focus-visible { --k-bg: var(--wit); --k-kl: var(--blauw); --k-rand: var(--wit); }
.kop__ham { display: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--rad-s); background: transparent; cursor: pointer; position: relative; }
.kop__ham span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .4s var(--uit), top .4s var(--uit); }
.kop__ham span:first-child { top: 17px; }
.kop__ham span:last-child { top: 25px; }
.kop__ham[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.kop__ham[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mmenu { background: var(--wit); border-radius: 0 0 20px 20px; box-shadow: 0 30px 50px -20px rgba(10, 40, 90, .35); }
.mmenu[hidden] { display: none; }
.mmenu__lijst { display: flex; flex-direction: column; padding-block: 8px 20px; }
.mmenu__link { padding: 12px 0; font-size: 20px; font-weight: 500; letter-spacing: -.03em; color: var(--blauw); border-bottom: 1px solid var(--ijs); }
.mmenu__link--sub { padding: 9px 0 9px 18px; font-size: 16px; color: var(--grijs); }

/* ------------------------------------------------------------ zwevende navigatie onderaan */
.zweef {
	position: fixed; left: 50%; bottom: 24px; z-index: 60;
	display: flex; align-items: center; gap: 2px; padding: 4px;
	background: var(--blauw); border-radius: 100px;
	box-shadow: 0 10px 30px -8px rgba(33, 127, 241, .55), inset 0 0 0 1px rgba(255, 255, 255, .14);
	transform: translate(-50%, 140%); opacity: 0;
	transition: transform .7s var(--uit), opacity .5s var(--uit);
}
.zweef.is-zichtbaar { transform: translate(-50%, 0); opacity: 1; }
.zweef__huis, .zweef__link {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; border-radius: 100px; color: var(--wit);
	font-size: 14px; font-weight: 500; line-height: 14px;
	transition: background-color .3s var(--uit);
}
.zweef__huis { width: 48px; }
.zweef__huis .icoon { width: 18px; height: 18px; }
.zweef__link { padding: 0 18px; white-space: nowrap; }
.zweef__huis:hover, .zweef__link:hover { background: rgba(255, 255, 255, .12); }
.zweef [aria-current] { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------ held (hero) */
.held {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: max(720px, 100svh);
	display: flex; align-items: flex-end;
	background:
		radial-gradient(120% 90% at 0% 0%, #0a2f86 0%, rgba(10, 47, 134, 0) 48%),
		radial-gradient(80% 70% at 85% 10%, #69b4ff 0%, rgba(105, 180, 255, 0) 60%),
		linear-gradient(170deg, #1366e0 0%, #217ff1 55%, #2d8bf5 100%);
	color: var(--wit);
}
.held--klein { min-height: 640px; }
.held__glas { position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; }
.held__glas span {
	position: absolute; top: -10%; height: 130%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, 0) 100%);
	filter: blur(18px); mix-blend-mode: soft-light;
	transform: skewX(-16deg);
	animation: glas var(--t, 22s) ease-in-out infinite alternate, glans var(--g, 9s) ease-in-out infinite alternate;
	will-change: transform, opacity;
}
.held__glas span:nth-child(1) { left: 30%; width: 7%; --o: .9; --t: 13s; --g: 6s; --dx: 180px; animation-delay: 0s, -2s; }
.held__glas span:nth-child(2) { left: 45%; width: 11%; --o: .8; --t: 15s; --g: 8s; --dx: -220px; animation-delay: -5s, -4s; }
.held__glas span:nth-child(3) { left: 61%; width: 6%; --o: 1; --t: 11s; --g: 5s; --dx: 160px; animation-delay: -8s, -1s; }
.held__glas span:nth-child(4) { left: 72%; width: 13%; --o: .7; --t: 14s; --g: 7s; --dx: -200px; animation-delay: -3s, -5s; }
.held__glas span:nth-child(5) { left: 88%; width: 8%; --o: .9; --t: 12s; --g: 6s; --dx: 170px; animation-delay: -10s, -3s; }
.held__glas::before {
	content: ""; position: absolute; left: 10%; right: -10%; top: 18%; height: 34%;
	background: radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
	filter: blur(30px); transform: rotate(-12deg); mix-blend-mode: soft-light;
	animation: lichtvlek 30s ease-in-out infinite alternate;
}
@keyframes lichtvlek {
	from { transform: rotate(-12deg) translate(-2%, 0); opacity: .85; }
	to { transform: rotate(-10deg) translate(3%, 2%); opacity: 1; }
}
.held__glas::after {
	content: ""; position: absolute; inset: 0 -240px;
	background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 70px, rgba(255, 255, 255, .07) 90px, rgba(255, 255, 255, 0) 120px);
	mix-blend-mode: overlay;
	animation: strepen 16s ease-in-out infinite alternate;
}
@keyframes strepen { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
/* Zachte drift van de lichtbanen: langzaam heen en weer, helderheid ademt mee. */
@keyframes glas {
	from { transform: skewX(-16deg) translateX(calc(var(--dx, 50px) * -.5)); }
	to { transform: skewX(-16deg) translateX(calc(var(--dx, 50px) * .5)); }
}
@keyframes glans {
	from { opacity: calc(var(--o, .9) * .45); }
	to { opacity: var(--o, .9); }
}
.held__vak {
	position: relative; z-index: 0; will-change: transform, opacity;
	display: grid; grid-template-columns: 1fr minmax(0, 440px); align-items: end; column-gap: 40px;
	padding-top: 180px; padding-bottom: 40px;
}
.held__label { font-size: 14px; line-height: 21px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.held__titel { font-size: 80px; line-height: 1; letter-spacing: -.06em; font-weight: 500; color: var(--wit); max-width: 680px; text-wrap: balance; }
.held--klein .held__titel { font-size: 64px; }
.held__rechts { padding-bottom: 6px; position: relative; }
.held__rechts::before { content: ""; position: absolute; inset: -60px -80px; z-index: -1; background: radial-gradient(closest-side, rgba(16, 90, 210, .45), rgba(16, 90, 210, 0)); pointer-events: none; }
.held__tekst { font-size: 18px; line-height: 1.5; font-weight: 500; color: rgba(236, 244, 255, .86); text-shadow: 0 1px 18px rgba(10, 50, 140, .35); }
.held__tekst strong { color: var(--wit); }
.held__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.held__voet { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(0, 440px); column-gap: 40px; margin-top: 56px; }
.held__vestiging, .held__scroll { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ijs); }
.held__vestiging .icoon { width: 18px; height: 18px; }
.held__scroll { color: var(--blauw-licht); }
.held__scroll .icoon { width: 18px; height: 18px; }
.held__scroll .icoon path { animation: muis 1.8s var(--uit) infinite; }
@keyframes muis { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.held--404 { min-height: 80svh; }

/* ------------------------------------------------------------ schuiven: inhoud over de hero, site van de footer af */
.held { position: sticky; top: 0; z-index: 0; }
:where(.held ~ section) { position: relative; z-index: 1; background-color: var(--wit); }
.held + section { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -20px rgba(5, 30, 90, .35); }
main { position: relative; z-index: 1; background: var(--wit); border-radius: 0 0 28px 28px; box-shadow: 0 30px 60px -20px rgba(5, 30, 90, .45); }
main > section:last-child { border-radius: 0 0 28px 28px; }
/* Alleen als de footer in beeld past (anders blijft zijn bovenkant verborgen achter de inhoud). */
@media (min-width: 810px) and (min-height: 700px) { .voet { position: sticky; bottom: 0; z-index: 0; } }

/* ------------------------------------------------------------ diensten met zwevende kaarten */
.diensten { position: relative; height: 220vh; }
.diensten__plak { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.diensten__midden { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; padding-inline: var(--rand-x); }
.diensten__midden .titel-xl { max-width: 780px; }
.zkaart {
	position: absolute; z-index: 2; width: 184px;
	left: 50%; top: 50%;
	transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
	will-change: transform;
}
.zkaart__in {
	padding: 6px; background: rgba(243, 246, 251, .92); border-radius: 14px;
	box-shadow: 0 1px 1px rgba(15, 50, 100, .04), 0 20px 40px -18px rgba(15, 50, 100, .28);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.zkaart__kop { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; font-size: 14px; font-weight: 500; color: var(--inkt); line-height: 1.2; }
.zkaart__kop .icoon { width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: var(--blauw); color: var(--wit); stroke-width: 2; }
.zkaart__beeld {
	height: 112px; border-radius: 10px; overflow: hidden; position: relative;
	background: linear-gradient(180deg, #fff 0%, #cfe2fb 55%, #4b98f4 100%);
}

.mini-mail { position: absolute; inset: 12px 12px auto; display: flex; flex-direction: column; gap: 6px; }
.mini-mail p { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--wit); border-radius: 8px; box-shadow: 0 4px 10px -6px rgba(15, 50, 100, .3); }
.mini-mail b { width: 14px; height: 14px; border-radius: 50%; background: var(--blauw-licht); flex: none; }
.mini-mail i { height: 5px; flex: 1; border-radius: 4px; background: linear-gradient(90deg, #bdd6f8, #e7f0fd); }
.mini-mail p:nth-child(2) i { margin-right: 22px; }
.mini-mail p:nth-child(3) i { margin-right: 10px; }
.mini-backup { position: absolute; inset: 14px 12px auto; padding: 10px; background: var(--wit); border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(15, 50, 100, .35); font-family: var(--inter); }
.mini-backup__rij { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--inkt); }
.mini-backup__rij--zacht { color: var(--grijs); font-weight: 400; margin-top: 8px; }
.mini-backup__balk { height: 6px; margin-top: 8px; border-radius: 6px; background: var(--blauw-zacht); overflow: hidden; }
.mini-backup__balk span { display: block; height: 100%; width: 100%; background: var(--blauw); border-radius: inherit; transform-origin: left; animation: vul 3.2s var(--uit) infinite; }
@keyframes vul { 0% { transform: scaleX(.05); } 70%, 100% { transform: scaleX(1); } }
.mini-punten {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: radial-gradient(circle, rgba(255, 255, 255, .9) 1.2px, transparent 1.6px) 0 0 / 8px 8px, linear-gradient(180deg, #5ea3f6, #217ff1);
}
.mini-punten--licht { background: radial-gradient(circle, rgba(33, 127, 241, .55) 1.2px, transparent 1.6px) 0 0 / 8px 8px, linear-gradient(180deg, #fff, #cfe2fb); }
.mini-punten__rond { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--blauw); box-shadow: 0 0 0 8px rgba(255, 255, 255, .3), 0 8px 18px -6px rgba(10, 60, 140, .5); }
.mini-punten__rond .icoon { width: 22px; height: 22px; }
.mini-grafiek { position: absolute; inset: 18px 0 0; width: 100%; height: calc(100% - 18px); }
.mini-grafiek__vlak { fill: rgba(33, 127, 241, .35); }
.mini-grafiek__lijn { fill: none; stroke: var(--wit); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mini-apps { position: absolute; inset: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-apps span { display: grid; place-items: center; border-radius: 8px; background: var(--wit); font-size: 11px; font-weight: 600; color: var(--blauw); box-shadow: 0 4px 10px -6px rgba(15, 50, 100, .3); }

/* ------------------------------------------------------------ stappen */
.stappen__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stap {
	position: relative; display: flex; flex-direction: column;
	padding: 24px 24px 28px; border-radius: var(--rad);
	background: linear-gradient(180deg, var(--ijs), #f8faff);
	box-shadow: inset 0 0 0 1px rgba(33, 127, 241, .06), 0 2px 6px -2px rgba(15, 50, 100, .06);
}
.stap__label { font-size: 14px; line-height: 21px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw); }
.stap__beeld { position: relative; height: 230px; margin: 12px -8px 22px; }
.stap .titel-m { margin-bottom: 8px; }
.stap__tekst { font-size: 16px; line-height: 1.5; flex: 1; }
.stap__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 500; color: var(--blauw); }
.stap__link .icoon { width: 18px; height: 18px; transition: transform .4s var(--uit); }
.stap__link:hover .icoon { transform: translateX(4px); }

.b-net { position: absolute; inset: 0; }
.b-net__boog { position: absolute; left: 12%; right: 12%; top: 30%; bottom: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5) 70%, rgba(255, 255, 255, 0)); box-shadow: 0 -10px 40px -20px rgba(33, 127, 241, .3); }
.b-net__knoop { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--wit); color: var(--blauw); box-shadow: 0 8px 20px -10px rgba(15, 50, 100, .4); animation: dobber 5s ease-in-out infinite; }
.b-net__knoop--1 { left: 10%; top: 52%; }
.b-net__knoop--2 { left: 28%; top: 14%; animation-delay: -1.2s; }
.b-net__knoop--3 { right: 28%; top: 10%; animation-delay: -2.4s; }
.b-net__knoop--4 { right: 10%; top: 50%; animation-delay: -3.6s; }
.b-net__hart { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 92px; height: 92px; display: grid; place-items: center; border-radius: 24px; background: var(--blauw); color: var(--wit); box-shadow: 0 16px 34px -12px rgba(33, 127, 241, .7); }
.b-net__hart .merk__wolk { width: 56px; height: 40px; filter: drop-shadow(0 6px 14px rgba(5, 40, 120, .28)); }
@keyframes dobber { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.b-chips { position: absolute; inset: 0; display: grid; place-items: center; }
.b-chips__chip { position: absolute; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.b-chips__chip--hoofd { background: var(--blauw); color: var(--wit); box-shadow: 0 0 0 6px rgba(33, 127, 241, .15), 0 14px 26px -10px rgba(33, 127, 241, .7); z-index: 1; }
.b-chips__chip--zij { background: rgba(33, 127, 241, .14); color: var(--blauw); transform: translate(-108px, 32px) rotate(-8deg); filter: blur(.4px); }
.b-chips__chip--rechts { transform: translate(104px, 36px) rotate(7deg); }
.b-chips::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 1px dashed rgba(33, 127, 241, .3); animation: draai 30s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

.b-balken { position: absolute; inset: 20px 0 0; display: flex; align-items: flex-end; gap: 10px; padding-inline: 4px; border-top: 1px solid rgba(33, 127, 241, .1); }
.b-balken span { position: relative; flex: 1; height: var(--h); border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(33, 127, 241, .22), rgba(33, 127, 241, 0)); }
.b-balken__top { background: linear-gradient(180deg, var(--blauw), rgba(33, 127, 241, 0)) !important; }
.b-balken__top em { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: var(--wit); box-shadow: 0 6px 16px -8px rgba(15, 50, 100, .4); font-style: normal; font-size: 12px; font-weight: 500; color: var(--inkt); white-space: nowrap; }

/* ------------------------------------------------------------ voordelen */
.voordelen__raster { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 24px; align-items: start; }
.voordelen__kolom { display: flex; flex-direction: column; gap: 160px; padding-block: 40px; }
.voordelen__kolom--rechts { padding-top: 260px; }
.voordelen__midden { align-self: stretch; }
.voordelen__plak { position: sticky; top: calc(50vh - 150px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: 40px; }
.voordelen__boven { font-size: 14px; font-weight: 500; color: var(--grijs); }
.vkaart {
	display: flex; flex-direction: column; min-height: 300px; padding: 24px;
	border-radius: var(--rad); background: var(--ijs);
}
.vkaart__icoon { width: 22px; height: 22px; color: var(--blauw); margin-bottom: auto; }
.vkaart .titel-s { margin-top: 80px; margin-bottom: 8px; }
.vkaart p { font-size: 16px; line-height: 1.5; }

/* ------------------------------------------------------------ werkomgeving */
.werk__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.werk__beeld {
	position: relative; aspect-ratio: 1 / .9; border-radius: var(--rad); overflow: hidden;
	background: linear-gradient(160deg, #0a3f9c 0%, #1366e0 55%, #5aa6ff 100%);
}
.werk__servers { position: absolute; right: 8%; top: 14%; bottom: 14%; width: 42%; display: flex; flex-direction: column; gap: 10px; }
.werk__servers span { flex: 1; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .14); position: relative; }
.werk__servers span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #6effb2; box-shadow: 0 0 10px #6effb2; animation: knipper 2.4s ease-in-out infinite; }
.werk__servers span:nth-child(2)::before { animation-delay: -.6s; }
.werk__servers span:nth-child(3)::before { animation-delay: -1.2s; }
.werk__servers span:nth-child(4)::before { animation-delay: -1.8s; }
.werk__servers span::after { content: ""; position: absolute; left: 32px; right: 20px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
@keyframes knipper { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.status {
	position: absolute; left: 7%; top: 9%; z-index: 1; width: min(250px, 50%);
	padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--inkt);
	box-shadow: 0 30px 50px -20px rgba(5, 25, 70, .5);
}
.status__kop { font-size: 15px; font-weight: 600; }
.status__meter { position: relative; margin: 14px auto 10px; width: 150px; }
.status__meter svg { width: 100%; overflow: visible; }
.status__boog-bg, .status__boog { fill: none; stroke-width: 10; stroke-linecap: round; }
.status__boog-bg { stroke: var(--blauw-zacht); }
.status__boog { stroke: var(--blauw); stroke-dasharray: 158; stroke-dashoffset: 158; transition: stroke-dashoffset 1.6s var(--uit) .3s; }
.is-in .status__boog, .stil .status__boog, html:not(.js) .status__boog { stroke-dashoffset: 10; }
.status__getal { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.04em; color: var(--blauw); }
.status__lijst { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--grijs); }
.status__lijst li { display: flex; align-items: center; gap: 8px; }
.status__stip { width: 7px; height: 7px; border-radius: 50%; background: #22c47a; box-shadow: 0 0 0 3px rgba(34, 196, 122, .18); }
.werk__intro { font-size: 18px; line-height: 1.5; font-weight: 500; margin-bottom: 28px; }
.werk__intro strong { color: var(--wit); }
.werk__rij { display: grid; grid-template-columns: 44px 220px 1fr; align-items: center; gap: 20px; padding-block: 22px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.werk__rij:first-child { border-top: 1px solid rgba(255, 255, 255, .18); }
.werk__icoon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--wit); }
.werk__rij p { font-size: 16px; line-height: 1.5; }

/* ------------------------------------------------------------ over (glaskaarten) */
.over { position: relative; overflow: hidden; isolation: isolate; color: var(--wit); padding-block: 40px 40px; }
.over__lucht {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(50% 40% at 18% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
		radial-gradient(40% 35% at 80% 18%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
		radial-gradient(60% 50% at 50% 100%, #06245e, rgba(6, 36, 94, 0) 70%),
		linear-gradient(180deg, #4d9cf6 0%, #1e6fe0 45%, #0b3f9b 100%);
}
.over__lucht::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .12) 1px, transparent 1.4px) 0 0 / 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
.over__vak { display: flex; flex-direction: column; }
.over__kop { display: flex; justify-content: center; padding-block: 24px 48px; }
.over__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.okaart {
	display: flex; flex-direction: column; min-height: 300px; padding: 22px;
	border-radius: var(--rad); color: var(--wit);
	background: rgba(255, 255, 255, .1); border: 1px solid var(--glas-rand);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.okaart--licht { background: var(--wit); border-color: var(--wit); color: var(--grijs); }
.okaart__icoon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .16); color: var(--wit); margin-bottom: 18px; }
.okaart--licht .okaart__icoon { background: var(--blauw-zacht); color: var(--blauw); }
.okaart__tekst { font-size: 16px; line-height: 1.5; flex: 1; }
.okaart__voet { margin-top: 24px; }
.okaart__naam { font-size: 16px; line-height: 1.4; letter-spacing: -.02em; font-weight: 600; color: var(--wit); }
.okaart--licht .okaart__naam { color: var(--blauw); }
.okaart__sub { font-size: 14px; }
.over__voet { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 40px 8px; }
.over__alliantie { max-width: 520px; font-size: 14px; color: var(--blauw-licht); }
.over__alliantie strong { color: var(--wit); }
.over__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.over__label .icoon { width: 16px; height: 16px; transition: transform .4s var(--uit); }
.over__label:hover .icoon { transform: translate(2px, -2px); }

/* ------------------------------------------------------------ pakketten */
.pakketten__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pakket { display: flex; flex-direction: column; padding: 24px; border-radius: var(--rad); background: var(--ijs); }
.pakket .titel-m { margin-bottom: 8px; }
.pakket__tekst { font-size: 15px; line-height: 1.5; min-height: 90px; }
.pakket__naam { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 24px 0 20px; }
.pakket__groot { font-size: 56px; line-height: 1; letter-spacing: -.06em; font-weight: 500; color: var(--blauw); }
.pakket__klein { font-size: 14px; font-weight: 500; }
.pakket__lijst { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; font-size: 14px; }
.pakket__lijst li { display: flex; align-items: flex-start; gap: 10px; color: var(--grijs); }
.pakket__lijst .icoon { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--blauw); color: var(--wit); stroke-width: 3; margin-top: 2px; }
.pakket--uit { background: var(--blauw); color: var(--blauw-licht); box-shadow: 0 30px 60px -30px rgba(33, 127, 241, .8); }
.pakket--uit .titel-m, .pakket--uit .pakket__groot { color: var(--wit); }
.pakket--uit .pakket__lijst li { color: var(--blauw-licht); }
.pakket--uit .pakket__lijst .icoon { background: var(--wit); color: var(--blauw); }
.pakket--uit .knop { width: 100%; }
.pakketten__extra { margin-top: 28px; text-align: center; font-size: 16px; }
.pakketten__extra a, .tekstblok__tekst a { color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------ cta */
.cta {
	position: relative; overflow: hidden; isolation: isolate; color: var(--wit); text-align: center;
	padding-block: 100px 140px;
	background:
		radial-gradient(70% 60% at 50% 0%, #5aa6ff 0%, rgba(90, 166, 255, 0) 70%),
		linear-gradient(180deg, #2c89f6 0%, var(--blauw) 60%);
}
.cta__vorm { width: min(620px, 82vw); margin-inline: auto; color: rgba(255, 255, 255, .22); }
.cta__vorm .merk__wolk { width: 100%; height: auto; }
.cta__vorm .merk__wolk { filter: none; }
.cta__vorm .merk__wolk-vorm { fill: rgba(255, 255, 255, .2); }
.cta__vorm .merk__kast { fill: rgba(10, 79, 196, .3); }
.cta__vorm .merk__lijn { fill: rgba(255, 255, 255, .28); }
.b-net__hart .merk__lijn { fill: rgba(255, 255, 255, .78); }
.b-net__hart .merk__led { fill: #5ff2a6; }
.cta__vorm .merk__led { fill: rgba(255, 255, 255, .35); filter: none; animation: none; }
.cta__vak { display: flex; flex-direction: column; align-items: center; }
.cta__boven { font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.cta .titel-xl { color: var(--wit); max-width: 900px; }
.cta__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

/* ------------------------------------------------------------ voet */
.voet { background: var(--blauw-diep); color: var(--blauw-licht); padding-block: 0 110px; }
.voet__kolommen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; padding-top: 72px; }
.voet__kop { font-size: 16px; font-weight: 500; color: var(--wit); margin-bottom: 14px; }
.voet__kop--tweede { margin-top: 22px; }
.voet__kol ul { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.voet__kol a { transition: color .25s; }
.voet__kol a:hover { color: var(--wit); }
.voet__onder { display: flex; align-items: center; gap: 32px; margin-top: 80px; font-size: 14px; }
.voet__copy { flex: 1; }
.voet__top { color: var(--wit); }
.voet__top:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ binnenpagina's */
.tekstblok__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.tekstblok__kop { position: sticky; top: 40px; }
.tekstblok__tekst { display: flex; flex-direction: column; gap: 20px; font-size: 18px; line-height: 1.6; }
.tekstblok__tekst p:first-child { color: var(--inkt); font-weight: 500; }

.lead { padding-top: 0; }
.held + .lead { padding-top: var(--sectie); }
.lead__tekst { max-width: 1100px; margin-inline: auto; text-align: center; font-size: 44px; line-height: 1.18; letter-spacing: -.05em; font-weight: 500; color: rgba(33, 127, 241, .4); text-wrap: balance; }
.lead__tekst em { font-style: normal; color: var(--blauw); }

.kenmerken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kenmerk { padding: 24px; border-radius: var(--rad); background: var(--ijs); }
.kenmerk__icoon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--blauw); color: var(--wit); margin-bottom: 60px; }
.kenmerk__kop { font-size: 18px; line-height: 1.4; letter-spacing: -.03em; font-weight: 500; color: var(--blauw); margin-bottom: 6px; }

.onderwerpen__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.okaart-link {
	position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 24px;
	border-radius: var(--rad); overflow: hidden; isolation: isolate; color: var(--wit);
	background: linear-gradient(200deg, #0d4cb8 0%, #0a2f7a 100%);
	border: 1px solid rgba(255, 255, 255, .12);
}
.okaart-link::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(70% 60% at 80% 100%, rgba(105, 180, 255, .55), rgba(105, 180, 255, 0) 70%), radial-gradient(50% 40% at 10% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%);
	transition: transform .8s var(--uit);
}
.okaart-link:hover::before { transform: scale(1.15); }
.okaart-link__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw-licht); }
.okaart-link__pijl { position: absolute; right: 22px; top: 22px; }
.okaart-link__pijl .icoon { width: 18px; height: 18px; transition: transform .4s var(--uit); }
.okaart-link:hover .okaart-link__pijl .icoon { transform: translate(3px, -3px); }
.okaart-link__titel { margin-top: 18px; font-size: 26px; line-height: 1.2; letter-spacing: -.04em; font-weight: 500; }
.okaart-link__tekst { margin-top: auto; font-size: 15px; line-height: 1.5; color: var(--blauw-licht); }
.okaart-link__knop { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 20px; border-radius: 10px; background: var(--wit); color: var(--blauw); font-weight: 500; transition: background-color .3s; }
.okaart-link:hover .okaart-link__knop { background: var(--blauw-zacht); }

.modules__raster { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: start; }
.modules__kop { align-self: stretch; }
.modules__plak { position: sticky; top: 40px; }
.modules__intro { margin-top: 24px; font-size: 16px; line-height: 1.6; max-width: 460px; }
.vraag { border-bottom: 1px solid #e3e9f2; }
.vraag__kop { display: flex; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; }
.vraag__kop::-webkit-details-marker { display: none; }
.vraag__icoon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--ijs); color: var(--blauw); transition: background-color .3s, color .3s; }
.vraag[open] .vraag__icoon { background: var(--blauw); color: var(--wit); }
.vraag__titel { flex: 1; font-size: 22px; line-height: 1.3; letter-spacing: -.04em; font-weight: 500; color: var(--blauw); }
.vraag__plus { color: var(--blauw); }
.vraag__plus .icoon { transition: transform .45s var(--uit); }
.vraag[open] .vraag__plus .icoon { transform: rotate(45deg); }
.vraag__inhoud { overflow: hidden; }
.vraag__tekst { display: flex; flex-direction: column; gap: 12px; padding: 0 40px 26px 56px; font-size: 16px; line-height: 1.6; }
.vraag__lijst { display: flex; flex-direction: column; gap: 4px; }
.vraag__lijst li { position: relative; padding-left: 18px; }
.vraag__lijst li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--blauw); }

.banner {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px;
	border-radius: 20px; color: var(--wit); overflow: hidden; position: relative; isolation: isolate;
	background: linear-gradient(120deg, #1366e0, #217ff1 50%, #4aa3ff);
}
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 60px, rgba(255, 255, 255, .08) 80px, rgba(255, 255, 255, 0) 110px); }
.banner__tekst { display: flex; flex-direction: column; gap: 8px; }
.banner__label { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blauw-licht); }
.banner__titel { font-size: 36px; line-height: 1.1; letter-spacing: -.05em; font-weight: 500; }
.banner__sub { color: var(--blauw-licht); }
.banner__pijl { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wit); color: var(--blauw); transition: transform .5s var(--uit); }
.banner:hover .banner__pijl { transform: rotate(45deg); }

.andere__rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.andere__kaart { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 200px; border-radius: var(--rad); background: var(--wit); box-shadow: var(--schaduw); transition: transform .5s var(--uit), box-shadow .5s var(--uit); }
.andere__kaart:hover { transform: translateY(-4px); }
.andere__kaart[aria-current] { background: var(--blauw); }
.andere__kaart[aria-current] .andere__naam, .andere__kaart[aria-current] .andere__pijl { color: var(--wit); }
.andere__kaart[aria-current] .andere__tekst { color: var(--blauw-licht); }
.andere__naam { font-size: 22px; line-height: 1.3; letter-spacing: -.04em; font-weight: 500; color: var(--blauw); }
.andere__tekst { flex: 1; font-size: 15px; }
.andere__pijl { color: var(--blauw); }
.andere__pijl .icoon { transition: transform .4s var(--uit); }
.andere__kaart:hover .andere__pijl .icoon { transform: translateX(4px); }

.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.partner { padding: 32px; border-radius: var(--rad); background: var(--ijs); font-size: 16px; line-height: 1.6; }
.partner__icoon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--blauw); color: var(--wit); margin-bottom: 60px; }
.partner__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin-bottom: 4px; }
.partner .titel-m { font-size: 32px; margin-bottom: 12px; }
.partner { display: flex; flex-direction: column; }
.partner p + p { margin-top: 12px; }
.partner__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-weight: 500; color: var(--blauw); }
.partner__link .icoon { width: 16px; height: 16px; transition: transform .4s var(--uit); }
.partner__link:hover .icoon { transform: translate(2px, -2px); }

.milieu__rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.milieu__kaart { padding: 28px; border-radius: var(--rad); background: rgba(255, 255, 255, .1); border: 1px solid var(--glas-rand); font-size: 16px; line-height: 1.6; }
.milieu__icoon { width: 24px; height: 24px; color: var(--wit); margin-bottom: 70px; }
.milieu__kaart .titel-s { margin-bottom: 10px; }

/* ------------------------------------------------------------ privacy- en cookieverklaring */
.privacy__raster { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 80px; align-items: start; }
.privacy__zij { position: sticky; top: 32px; }
.privacy__inhoud { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--rad); background: var(--ijs); }
.privacy__inhoudkop { padding: 4px 12px 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.privacy__inhoud a { padding: 9px 12px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--inkt); transition: background-color .25s, color .25s; }
.privacy__inhoud a:hover { background: var(--wit); color: var(--blauw); }
.privacy__inhoud a[aria-current] { background: var(--blauw); color: var(--wit); }
.privacy__tekst { min-width: 0; }
.privacy__intro { display: flex; flex-direction: column; gap: 16px; font-size: 20px; line-height: 1.55; letter-spacing: -.01em; color: var(--inkt); }
.privacy__deel { padding-top: 88px; scroll-margin-top: 24px; }
.privacy__deel .titel-l { font-size: 44px; margin-bottom: 24px; }
.privacy__inhoudblok { display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.65; }
.privacy__inhoudblok a { color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.privacy__sub { margin-top: 24px; }
.privacy__lijst { display: flex; flex-direction: column; gap: 6px; }
.privacy__lijst li { position: relative; padding-left: 20px; }
.privacy__lijst li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--blauw); }
.privacy__uitleg { display: grid; gap: 1px; margin: 4px 0 8px; border-radius: var(--rad); overflow: hidden; background: #e3e9f2; }
.privacy__uitleg div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 14px 20px; background: var(--wit); }
.privacy__uitleg dt { font-weight: 500; color: var(--blauw); }
.privacy__uitleg dd { margin: 0; font-size: 15px; }
.ptabel { border-radius: var(--rad); overflow: auto; box-shadow: inset 0 0 0 1px #e3e9f2; }
.ptabel table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.ptabel th { position: sticky; top: 0; padding: 14px 16px; background: var(--blauw); color: var(--wit); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ptabel td { padding: 14px 16px; vertical-align: top; border-top: 1px solid #e3e9f2; color: var(--grijs); }
.ptabel tbody tr:nth-child(even) td { background: #f8fafd; }
.ptabel td:first-child { font-weight: 500; color: var(--blauw); }
.ptabel td:nth-child(2) { color: var(--inkt); min-width: 220px; }
.ptabel--klein { max-width: 640px; }
.rechten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.recht { padding: 24px; border-radius: var(--rad); background: var(--ijs); font-size: 15px; line-height: 1.6; }
.recht .titel-s { margin-bottom: 8px; }
.privacy__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.privacy__contact li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--rad); background: var(--ijs); font-size: 15px; }
.privacy__contact .icoon { width: 40px; height: 40px; padding: 10px; flex: none; border-radius: 10px; background: var(--blauw); color: var(--wit); }
.privacy__contact span { display: flex; flex-direction: column; gap: 2px; }
.privacy__contact b { font-weight: 500; color: var(--inkt); }
.privacy__onder { display: flex; flex-direction: column; margin-top: 12px; padding-left: 16px; border-left: 3px solid var(--blauw); }
.privacy__onder b { font-weight: 500; color: var(--inkt); }

/* ------------------------------------------------------------ contact */
.contact {
	position: relative; overflow: hidden; isolation: isolate; color: var(--wit);
	padding-block: 170px 120px;
	background:
		radial-gradient(80% 60% at 50% 0%, #6fb2ff 0%, rgba(111, 178, 255, 0) 70%),
		linear-gradient(180deg, #2a86f4 0%, var(--blauw) 50%);
}
.contact .held__glas { opacity: .6; }
.contact__kop { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 56px; }
.contact__titel { font-size: 64px; line-height: 1.02; letter-spacing: -.06em; font-weight: 500; color: var(--wit); max-width: 900px; text-wrap: balance; }
.contact__sub { margin-top: 18px; font-size: 18px; color: var(--blauw-licht); max-width: 560px; }
.contact__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__info, .formulier {
	padding: 28px; border-radius: 20px;
	background: rgba(255, 255, 255, .12); border: 1px solid var(--glas-rand);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.contact__info { display: flex; flex-direction: column; }
.contact__info .titel-m { color: var(--wit); font-size: 28px; }
.contact__info-tekst { margin-top: 6px; color: var(--blauw-licht); }
.contact__gegevens { margin-top: auto; padding-top: 48px; }
.gegeven { display: flex; justify-content: space-between; gap: 20px; padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; }
.gegeven__kop { display: flex; align-items: center; gap: 10px; color: var(--wit); font-weight: 500; }
.gegeven__kop .icoon { width: 18px; height: 18px; }
.gegeven__waarde { text-align: right; color: var(--blauw-licht); }
.gegeven__waarde a:hover { color: var(--wit); }
.formulier { display: flex; flex-direction: column; }
.formulier__kop { color: var(--wit); font-size: 28px; margin-bottom: 20px; }
.formulier__noot { margin-top: 16px; font-size: 13px; color: var(--blauw-licht); }
.formulier__noot a { color: var(--wit); text-decoration: underline; text-underline-offset: 2px; }
.formulier__melding { padding: 12px 14px; border-radius: 10px; font-size: 15px; background: rgba(255, 255, 255, .9); color: var(--blauw); }
.formulier__melding a { text-decoration: underline; }

/* Fluent Forms in de glazen kaart */
.formulier .fluentform { font-family: var(--sora); }
.formulier .fluentform .ff-el-group { margin-bottom: 16px; }
.formulier .fluentform .ff-t-container { display: flex; gap: 16px; }
.formulier .fluentform .ff-t-cell { flex: 1; min-width: 0; padding: 0 !important; }
.formulier .fluentform .ff-el-input--label { margin-bottom: 6px; }
.formulier .fluentform .ff-el-input--label label { font-size: 14px; font-weight: 500; color: var(--wit); }
.formulier .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--blauw-licht); margin-left: 3px; }
.formulier .fluentform .ff-el-form-control {
	width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent;
	background: rgba(255, 255, 255, .16); color: var(--wit); box-shadow: none;
	font: 400 15px/1.4 var(--sora); transition: border-color .25s, background-color .25s;
}
.formulier .fluentform textarea.ff-el-form-control { min-height: 130px; resize: vertical; }
.formulier .fluentform .ff-el-form-control::placeholder { color: rgba(255, 255, 255, .6); }
.formulier .fluentform .ff-el-form-control:focus { outline: none; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .22); }
.formulier .fluentform .ff-el-is-error .ff-el-form-control { border-color: #ffb4b4; }
.formulier .fluentform .error, .formulier .fluentform .text-danger { margin-top: 6px; font-size: 13px; color: #ffd2d2; }
.formulier .fluentform .ff_submit_btn_wrapper { margin: 8px 0 0; text-align: right; }
.formulier .fluentform .ff-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 0; border-radius: var(--rad-s);
	background: var(--wit) !important; color: var(--blauw) !important; font: 500 18px/1 var(--sora); letter-spacing: -.02em; cursor: pointer;
	transition: background-color .35s var(--uit), transform .35s var(--uit);
}
.formulier .fluentform .ff-btn-submit:hover { background: var(--blauw-zacht) !important; opacity: 1; }
.formulier .fluentform .ff-btn-submit:active { transform: scale(.98); }
.formulier .ff-message-success { padding: 18px 20px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--blauw); font-size: 16px; box-shadow: none; }
.formulier .ff-errors-in-stack { margin-top: 12px; color: #ffd2d2; }

/* ------------------------------------------------------------ cookiemelding (SureCookie) in de huisstijl */
/* De plugin zet Figtree met een ID-selector + !important; daarom dezelfde ID's, iets specifieker. */
html body #surecookie-public-root, html body #surecookie-public-root *, html body #surecookie-preferences-root, html body #surecookie-preferences-root *, html body .surecookie-styles, html body .surecookie-styles * { font-family: var(--sora) !important; }
html body .surecookie-public-banner { border-radius: 18px !important; padding: 20px !important; box-shadow: 0 30px 60px -24px rgba(10, 40, 90, .45), 0 0 0 1px rgba(33, 127, 241, .1) !important; }
.surecookie-public-banner .surecookie-banner-heading, .surecookie-public-banner [class*="banner-heading"], .surecookie-public-banner [class*="banner-title"] { color: var(--blauw) !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: -.03em; }
.surecookie-public-banner .surecookie-banner-description { color: var(--grijs) !important; font-size: 14px !important; line-height: 1.55 !important; }
.surecookie-public-banner .surecookie-btn-base, .surecookie-modal-wrapper .surecookie-modal-footer button {
	border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -.01em;
	transition: background-color .3s var(--uit), color .3s var(--uit), border-color .3s var(--uit) !important;
}
.surecookie-public-banner .surecookie-accept-all-btn, .surecookie-public-banner .surecookie-accept-btn { background: var(--blauw) !important; color: var(--wit) !important; border-color: var(--blauw) !important; }
.surecookie-public-banner .surecookie-accept-all-btn:hover, .surecookie-public-banner .surecookie-accept-btn:hover { background: var(--blauw-diep) !important; border-color: var(--blauw-diep) !important; }
.surecookie-public-banner .surecookie-decline-btn { background: var(--blauw-zacht) !important; color: var(--blauw) !important; border-color: transparent !important; }
.surecookie-public-banner .surecookie-decline-btn:hover { background: var(--blauw-licht) !important; }
.surecookie-public-banner .surecookie-preferences-btn { background: transparent !important; color: var(--blauw) !important; border: 1px solid var(--blauw-licht) !important; }
.surecookie-public-banner .surecookie-preferences-btn:hover { border-color: var(--blauw) !important; }
.surecookie-public-banner .surecookie-btn-base:focus-visible, .surecookie-modal-wrapper button:focus-visible { outline: 2px solid var(--blauw) !important; outline-offset: 2px !important; box-shadow: none !important; }
.surecookie-modal-wrapper .surecookie-preferences-modal { border-radius: 20px !important; box-shadow: 0 40px 80px -30px rgba(10, 40, 90, .5) !important; }
.surecookie-modal-wrapper .surecookie-modal-header-text, .surecookie-modal-wrapper .surecookie-modal-header-text * { color: var(--blauw) !important; font-weight: 500 !important; letter-spacing: -.03em; }
.surecookie-modal-wrapper .surecookie-modal-description { color: var(--grijs) !important; }
.surecookie-modal-wrapper .surecookie-category-trigger { color: var(--inkt) !important; font-weight: 500 !important; }
.surecookie-modal-wrapper .surecookie-btn-outline { background: transparent !important; color: var(--blauw) !important; border: 1px solid var(--blauw-licht) !important; }
.surecookie-modal-wrapper .surecookie-btn-outline:hover { border-color: var(--blauw) !important; }
.surecookie-modal-wrapper .surecookie-modal-footer button:not(.surecookie-btn-outline) { background: var(--blauw) !important; color: var(--wit) !important; border-color: var(--blauw) !important; }
.surecookie-modal-wrapper .surecookie-modal-footer button:not(.surecookie-btn-outline):hover { background: var(--blauw-diep) !important; }
.surecookie-modal-wrapper a { color: var(--blauw) !important; }
/* Cookie-rondje (na een keuze): huisstijl, en op mobiel boven de zwevende navigatie */
html body #surecookie-preferences-root .surecookie-floating-widget {
	background: var(--blauw) !important; color: var(--wit) !important;
	box-shadow: 0 10px 26px -8px rgba(33, 127, 241, .65), inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
	transition: transform .35s var(--uit), background-color .3s var(--uit) !important;
}
html body #surecookie-preferences-root .surecookie-floating-widget:hover { background: var(--blauw-diep) !important; transform: scale(1.06); }
@media (max-width: 809px) {
	html body #surecookie-preferences-root .surecookie-floating-widget { bottom: 88px !important; right: 16px !important; }
}

/* ------------------------------------------------------------ animaties bij in beeld komen */
.js [data-kom="op"] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--uit), transform 1.1s var(--uit); transition-delay: calc(var(--v, 0) * .09s); }
.js [data-kom="op"].is-in { opacity: 1; transform: none; }
.js [data-woorden] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-woorden] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--uit); transition-delay: calc(var(--i, 0) * .045s); }
.js [data-woorden].is-in .w > span { transform: none; }
.stil [data-kom="op"], .stil [data-woorden] .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
.stil .merk__led, .stil .merk__punt, .stil .merk__punt::after, .stil .held__glas::before, .stil .held__glas::after, .stil .held__glas span, .stil .b-net__knoop, .stil .b-chips::before, .stil .mini-backup__balk span { animation: none; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1199px) {
	:root { --sectie: 110px; }
	.titel-xl { font-size: 56px; }
	.titel-l { font-size: 44px; }
	.held__titel { font-size: 64px; }
	.held--klein .held__titel { font-size: 52px; }
	.kop__links, .kop__rechts .knop { display: none; }
	.kop__rij { grid-template-columns: 1fr auto; }
	.kop__ham { display: block; color: var(--wit); }
	.kop.is-open { color: var(--inkt); background: var(--wit); }
	.kop.is-open .merk { color: var(--blauw); }
	.kop.is-open .merk__lades { fill: var(--blauw); }
	.kop.is-open .merk__lijn { fill: rgba(255, 255, 255, .7); }
	.kop.is-open .kop__ham { color: var(--blauw); border-color: var(--blauw-licht); }
	.voordelen__raster { grid-template-columns: 1fr 1fr; }
	.voordelen__midden { grid-column: 1 / -1; order: -1; }
	.voordelen__plak { position: static; padding-block: 0 40px; }
	.voordelen__kolom { gap: 16px; padding-block: 0; }
	.voordelen__kolom--rechts { padding-top: 0; }
	.werk__raster { grid-template-columns: 1fr; }
	.werk__rij { grid-template-columns: 44px 1fr; }
	.werk__rij p { grid-column: 2; }
	.pakketten__rij, .onderwerpen__rij, .milieu__rij { grid-template-columns: 1fr 1fr; }
	.over__raster { grid-template-columns: 1fr 1fr; }
	.voet__kolommen { grid-template-columns: repeat(3, 1fr); }
	.andere__rij, .kenmerken { grid-template-columns: 1fr 1fr; }
	.tekstblok__raster, .modules__raster { grid-template-columns: 1fr; gap: 40px; }
	.tekstblok__kop, .modules__plak { position: static; }
	.lead__tekst { font-size: 34px; }
	.privacy__raster { grid-template-columns: 1fr; gap: 40px; }
	.privacy__zij { position: static; }
	.contact__titel { font-size: 52px; }
}

/* ------------------------------------------------------------ telefoon */
@media (max-width: 809px) {
	:root { --sectie: 80px; }
	.titel-xl { font-size: 40px; line-height: 1.05; }
	.titel-l { font-size: 34px; }
	.held__titel, .held--klein .held__titel { font-size: 46px; line-height: 1.02; }
	.held__vak, .held__voet { grid-template-columns: 1fr; }
	.held__rechts { margin-top: 28px; }
	.held__voet { margin-top: 40px; row-gap: 12px; }
	.held { min-height: 100svh; }
	.held--klein { min-height: 600px; }
	.sectiekop { margin-bottom: 40px; }
	.sectiekop--split { flex-direction: column; align-items: flex-start; }
	.diensten { height: auto; padding-block: var(--sectie); }
	.diensten__plak { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-inline: var(--rand-x); }
	.diensten__midden { grid-column: 1 / -1; order: -1; padding: 0 0 32px; }
	.zkaart { position: static; width: auto; transform: none !important; }
	.stappen__rij, .pakketten__rij, .onderwerpen__rij, .milieu__rij, .over__raster, .partners, .andere__rij, .kenmerken, .contact__raster { grid-template-columns: 1fr; }
	.voordelen__raster { grid-template-columns: 1fr; }
	.vkaart { min-height: 0; }
	.vkaart .titel-s { margin-top: 40px; }
	.werk__beeld { aspect-ratio: 1 / 1.05; }
	.status { width: 64%; }
	.over__voet, .voet__onder { flex-direction: column; align-items: flex-start; }
	.voet__kolommen { grid-template-columns: 1fr 1fr; }
	.voet__onder { gap: 14px; margin-top: 48px; }
	.lead__tekst { font-size: 26px; text-align: left; }
	.banner { flex-direction: column; align-items: flex-start; padding: 28px; }
	.banner__titel { font-size: 28px; }
	.vraag__titel { font-size: 18px; }
	.vraag__tekst { padding: 0 0 22px; }
	.cta { padding-block: 64px 100px; }
	.contact { padding-block: 130px 80px; }
	.contact__titel { font-size: 40px; }
	.formulier .fluentform .ff-t-container { flex-direction: column; gap: 0; }
	.formulier .fluentform .ff_submit_btn_wrapper { text-align: left; }
	.privacy__deel .titel-l { font-size: 32px; }
	.privacy__intro { font-size: 18px; }
	.privacy__uitleg div { grid-template-columns: 1fr; gap: 2px; }
	.rechten, .privacy__contact { grid-template-columns: 1fr; }
	.ptabel { box-shadow: none; border-radius: 0; overflow: visible; }
	.ptabel table, .ptabel tbody, .ptabel tr, .ptabel td { display: block; width: 100%; }
	.ptabel thead { display: none; }
	.ptabel tr { margin-bottom: 12px; padding: 6px 0; border-radius: var(--rad); background: var(--ijs); }
	.ptabel td, .ptabel tbody tr:nth-child(even) td { padding: 8px 18px; border: 0; background: none; min-width: 0; }
	.ptabel td::before { content: attr(data-kop); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
	.gegeven { flex-direction: column; gap: 2px; }
	.gegeven__waarde { text-align: left; }
	.zweef { max-width: calc(100vw - 24px); }
	.zweef__link { padding: 0 9px; font-size: 12.5px; }
	.zweef__huis { width: 40px; }
	.zweef__huis, .zweef__link { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}