/*
 * home.css — nieuwe homepage (templates/page-home.php).
 * Alles onder .is-home. Geen eigen kleuren/fonts/radii voor merk-elementen:
 * gradient, glas-kaarten, radius, knoppen en typografie komen uit tokens-base,
 * tokens-instantfilter en components. Alleen illustratie-kleuren (sneakers,
 * browser-mock) zijn lokaal.
 *
 * Breakpoints (zelfde als de rest van de site): 1100 / 991 / 767 / 478.
 */

.is-home {
	--home-glass: rgba(255, 255, 255, 0.05);
	--home-glass-strong: rgba(255, 255, 255, 0.08);
	--home-panel: rgba(13, 1, 40, 0.45);
	--home-gap: var(--space-5);
	overflow-x: clip;
}

body.is-instant .is-home h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

body.is-instant .is-home h3 {
	font-size: clamp(18px, 1.6vw, 22px);
}

.is-home .is-section-head {
	margin-bottom: var(--space-7);
}

@media (max-width: 767px) {
	.is-home .is-section-head {
		margin-bottom: var(--space-6);
	}
}

/* Gedeelde bouwstenen ------------------------------------------------------ */

.is-home .is-home-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.is-home .is-home-actions--center {
	justify-content: center;
	margin-top: var(--space-7);
}

@media (max-width: 478px) {
	.is-home .is-home-actions > .is-btn-primary,
.is-home .is-home-actions > .is-btn-secondary {
		width: 100%;
	}
}

.is-home .is-home-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	list-style: none;
	margin: var(--space-5) 0 0;
	padding: 0;
	color: var(--text-muted);
	font-size: var(--fs-small);
}

.is-home .is-home-trust li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.is-home .is-home-trust svg {
	color: var(--grad-from);
	flex-shrink: 0;
}

.is-home .is-home-trust--center {
	justify-content: center;
}

.is-home .is-home-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--text);
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: 2px;
	transition: border-color var(--dur-base) var(--ease), gap var(--dur-base) var(--ease);
}

.is-home .is-home-link:hover {
	border-color: var(--grad-to);
	gap: 12px;
}

.is-home .is-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: var(--surface-elev-2);
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.is-home .is-tag--grad {
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
}

/* Hero --------------------------------------------------------------------- */

.is-home .is-home-hero {
	padding-top: calc(var(--header-height, 68px) + var(--space-8));
	padding-bottom: var(--space-7);
}

.is-home .is-home-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--space-8);
	align-items: center;
}

.is-home .is-home-hero__title {
	font-size: clamp(40px, 5.4vw, 68px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-5);
}

.is-home .is-home-hero__lead {
	max-width: 36em;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
	color: var(--text-muted);
	margin: 0 0 var(--space-6);
}

@media (max-width: 991px) {
	.is-home .is-home-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-7);
	}

	.is-home .is-home-hero__visual {
		max-width: 560px;
		width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.is-home .is-home-hero {
		padding-top: calc(var(--header-height, 56px) + var(--space-4));
	}
}

/* Hero-animatie (decoratief; bewust geen .if-filter* klassen) */

.is-home .is-hero-demo {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--home-panel);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.is-home .is-hero-demo__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
}

.is-home .is-hero-demo__top strong {
	font-family: var(--font-display);
	font-size: 18px;
}

.is-home .is-hero-demo__top span {
	font-size: var(--fs-small);
	color: var(--text-subtle);
}

.is-home .is-hero-demo__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.is-home .is-hero-demo__chip {
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	background: var(--home-glass-strong);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.is-home .is-hero-demo__chip.is-active {
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
}

.is-home .is-hero-demo__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-content: start;
	min-height: 212px;
}

.is-home .is-hero-demo__tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border-radius: var(--radius-md);
	background: var(--home-glass-strong);
}

.is-home .is-hero-demo__tile[hidden] {
	display: none;
}

.is-home .is-hero-demo__tile.is-pop {
	animation: is-home-pop 0.28s var(--ease);
}

@keyframes is-home-pop {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

.is-home .is-hero-demo__shoe {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	background: #2a2150;
}

.is-home .is-hero-demo__shoe svg {
	width: 58%;
	height: auto;
}

.is-home .is-hero-demo__bar {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: #5e5285;
}

.is-home .is-hero-demo__bar--long { width: 66%; }
.is-home .is-hero-demo__bar--short { width: 32%; background: #3e3466; }

.is-home .is-hero-demo__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 60px;
	padding: 10px 18px 10px 16px;
	border-radius: var(--radius-md);
	background: var(--home-glass-strong);
	color: var(--text-muted);
	font-weight: 600;
}

.is-home .is-hero-demo__status-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.is-home .is-hero-demo__time {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease);
}

.is-home .is-hero-demo__time.is-visible {
	opacity: 1;
}

.is-home .is-hero-demo__cursor,
.is-home .is-hero-demo__ring {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}

.is-home .is-hero-demo__cursor {
	z-index: 3;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
	transition: transform 0.55s var(--ease), opacity 0.3s var(--ease);
}

.is-home .is-hero-demo__ring {
	z-index: 2;
	width: 40px;
	height: 40px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	border: 2px solid var(--grad-to);
	background: rgba(0, 178, 255, 0.18);
}

.is-home .is-hero-demo__ring.is-click {
	animation: is-home-ring 0.5s var(--ease);
}

@keyframes is-home-ring {
	0% { opacity: 0.9; scale: 0.5; }
	100% { opacity: 0; scale: 1.4; }
}

.is-home .is-hero-demo.is-playing .is-hero-demo__cursor {
	opacity: 1;
}

@media (max-width: 478px) {
	.is-home .is-hero-demo {
		padding: var(--space-4);
	}

	.is-home .is-hero-demo__grid {
		gap: 8px;
		min-height: 0;
	}

	.is-home .is-hero-demo__tile {
		padding: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-home .is-hero-demo__tile.is-pop,
.is-home .is-hero-demo__ring.is-click {
		animation: none;
	}
}

/* KPI's -------------------------------------------------------------------- */

.is-home .is-home-kpis {
	padding-block: var(--space-6);
}

.is-home .is-home-kpis__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--home-gap);
}

.is-home .is-home-kpi {
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--home-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.is-home .is-home-kpi__value {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-2);
}

.is-home .is-home-kpi__label {
	font-weight: 600;
	margin-bottom: 4px;
}

.is-home .is-home-kpi__sub {
	font-size: var(--fs-small);
	color: var(--text-subtle);
}

@media (max-width: 767px) {
	.is-home .is-home-kpis__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.is-home .is-home-kpi {
		padding: var(--space-5);
	}
}

/* Waarom trager: AJAX vs InstantFilter ------------------------------------- */

.is-home .is-flows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
	align-items: stretch;
}

.is-home .is-flow {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--home-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Gradient-rand op de InstantFilter-kaart (zelfde mask-trick als de populaire prijskaart). */
.is-home .is-flow--hl::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--brand-gradient);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.is-home .is-flow__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.is-home .is-flow__head h3 {
	margin: 0;
}

.is-home .is-flow__time {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--home-panel);
}

.is-home .is-flow__time-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-subtle);
}

.is-home .is-flow__time-value {
	align-self: flex-start;
	font-family: var(--font-display);
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.is-home .is-flow__bar {
	display: block;
	height: 12px;
	border-radius: var(--radius-pill);
	background: var(--surface-elev-2);
	overflow: hidden;
}

.is-home .is-flow__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
}

.is-home .is-flow__bar-fill--slow {
	width: 92%;
	background: rgba(255, 255, 255, 0.4);
}

.is-home .is-flow__bar-fill--fast {
	width: 5%;
	min-width: 12px;
	background: var(--brand-gradient);
}

.is-home .is-flow__time-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.is-home .is-flow__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.is-home .is-flow__steps li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px 14px 14px;
	border-radius: var(--radius-md);
	background: var(--home-glass);
	line-height: 1.35;
}

/* Verbindingslijntje tussen stappen */
.is-home .is-flow__steps li + li::before {
	content: "";
	position: absolute;
	left: 32px;
	top: calc(-1 * var(--space-3));
	height: var(--space-3);
	border-left: 2px dashed var(--border-strong);
}

.is-home .is-flow__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	background: var(--surface-elev-2);
	color: var(--text-muted);
}

.is-home .is-flow--hl .is-flow__icon {
	color: var(--grad-to);
}

.is-home .is-home-inline-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: var(--space-7);
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
}

@media (max-width: 991px) {
	.is-home .is-flows {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 478px) {
	.is-home .is-flow {
		padding: var(--space-5) var(--space-4);
	}

	.is-home .is-flow__time {
		padding: var(--space-4);
	}

	.is-home .is-home-inline-cta .is-btn-primary {
		width: 100%;
	}
}

/* Voordelen ---------------------------------------------------------------- */
/* Illustraties volgen het ontwerp (kleuren van de mock-UI zijn lokaal);
   kaarten, gradient en typografie komen uit de site-tokens. */

.is-home .is-benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
}

.is-home .is-benefit {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: 12px 12px var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--home-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.is-home .is-benefit:hover {
	background: var(--home-glass-strong);
	transform: translateY(-3px);
}

.is-home .is-benefit__art {
	position: relative;
	container-type: inline-size;
	display: grid;
	place-items: center;
	min-height: 280px;
	padding: 24px 20px;
	border-radius: 14px;
	background:
		radial-gradient(60% 55% at 50% 50%, rgba(91, 31, 214, 0.35), rgba(91, 31, 214, 0)),
		#0e0432;
	overflow: hidden;
}

/* Badges rechtsboven in de illustratie */
.is-home .is-benefit__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	border-radius: var(--radius-pill);
}

.is-home .is-benefit__badge--grad {
	padding: 7px 14px 7px 12px;
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 182, 255, 0.35);
}

.is-home .is-benefit__badge--soft {
	padding: 5px 12px 5px 10px;
	background: rgba(124, 77, 255, 0.14);
	color: #fff;
	font-size: 12px;
}

.is-home .is-benefit__badge--soft svg {
	color: var(--grad-from);
}

.is-home .is-benefit__text {
	padding: 0 20px;
}

.is-home .is-benefit__text h3 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 12px;
}

body.is-instant .is-home .is-benefit__text h3 {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.3;
}

.is-home .is-benefit__text p {
	margin: 0;
	color: var(--text-muted);
}

.is-home .is-benefit__chip {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--grad-from);
}

.is-home .is-benefit__pro {
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: rgba(124, 77, 255, 0.14);
	color: #fff;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 991px) {
	.is-home .is-benefits {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 478px) {
	.is-home .is-benefit__art {
		min-height: 240px;
		padding: 56px 12px 20px;
	}

	.is-home .is-benefit__text {
		padding: 0 8px;
	}
}

/* Gedeeld paneel-uiterlijk binnen de illustraties */
.is-home .is-mini-browser,
.is-home .is-chart,
.is-home .is-editor,
.is-home .is-explode__parent,
.is-home .is-explode__variant {
	background: #1d1538;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Illustratie 1: mini-browser */

.is-home .is-mini-browser {
	width: 100%;
	max-width: 500px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.is-home .is-mini-browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	background: rgba(255, 255, 255, 0.07);
}

.is-home .is-mini-browser__bar span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a79fc4;
	flex-shrink: 0;
}

.is-home .is-mini-browser__bar em {
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.07);
	font-style: normal;
	font-size: 12px;
	color: #a79fc4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.is-home .is-mini-browser__body {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 14px 16px;
}

.is-home .is-mini-browser__filter {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 12px;
	color: #d4cde8;
}

.is-home .is-mini-browser__filter strong {
	font-weight: 400;
	color: #fff;
}

.is-home .is-mini-browser__filter span {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 17px;
}

.is-home .is-mini-browser__filter i {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.12);
}

.is-home .is-mini-browser__filter .is-on {
	color: #fff;
}

.is-home .is-mini-browser__filter .is-on i {
	background: var(--brand-gradient);
}

.is-home .is-mini-browser__click {
	flex-shrink: 0;
}

.is-home .is-mini-browser__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-content: start;
}

.is-home .is-mini-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 6px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
}

.is-home .is-mini-card__photo {
	display: grid;
	place-items: center;
	aspect-ratio: 99 / 48;
	border-radius: 5px;
	background: #0e0432;
}

.is-home .is-mini-card__photo svg {
	width: 60%;
	height: auto;
}

.is-home .is-mini-card__bar {
	display: block;
	width: 70%;
	height: 5px;
	margin-top: 4px;
	border-radius: 3px;
	background: #5e5285;
}

.is-home .is-mini-card__bar--short {
	width: 36%;
	margin-top: 0;
	background: #3e3466;
}

@container (max-width: 400px) {
	.is-home .is-mini-browser__body {
		grid-template-columns: 70px minmax(0, 1fr);
		gap: 10px;
		padding: 10px;
	}

	.is-home .is-mini-browser__filter {
		font-size: 11px;
		gap: 7px;
	}
}

/* Illustratie 2: serverbelasting-grafiek */

.is-home .is-chart {
	width: 100%;
	max-width: 500px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px 16px;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.is-home .is-chart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 14px;
	font-size: 12px;
	color: #fff;
}

.is-home .is-chart__head strong {
	font-weight: 400;
}

.is-home .is-chart__legend {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	color: #d4cde8;
}

.is-home .is-chart__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-left: 8px;
}

.is-home .is-chart__dot--ajax { background: #8c7fb8; margin-left: 0; }
.is-home .is-chart__dot--if { background: var(--brand-gradient); }

.is-home .is-chart__svg {
	display: block;
	width: 100%;
	height: 130px;
}

.is-home .is-chart__axis {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #a79fc4;
}

/* Illustratie 3: variaties als losse kaarten */

.is-home .is-explode {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	max-width: 560px;
	margin-top: 8px;
	font-size: 12px;
}

.is-home .is-explode__parent,
.is-home .is-explode__variant {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	border-radius: 10px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
	color: #fff;
	line-height: 1.4;
}

.is-home .is-explode__parent {
	flex: 0 0 31%;
	max-width: 142px;
	padding: 10px 10px 12px;
}

.is-home .is-explode__variants {
	display: flex;
	flex: 1 1 0;
	gap: 10px;
	min-width: 0;
}

.is-home .is-explode__variant {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 8px 10px;
	gap: 4px;
}

.is-home .is-explode__photo {
	display: grid;
	place-items: center;
	align-self: stretch;
	aspect-ratio: 120 / 72;
	border-radius: 6px;
	background: #0e0432;
}

.is-home .is-explode__photo svg {
	width: 62%;
	height: auto;
}

.is-home .is-explode__variant .is-explode__photo {
	aspect-ratio: 96 / 60;
}

.is-home .is-explode__parent strong,
.is-home .is-explode__variant strong {
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.is-home .is-explode__variant small,
.is-home .is-explode__dots small {
	color: #a79fc4;
	font-size: 12px;
}

.is-home .is-explode__dots {
	display: flex;
	align-items: center;
	gap: 5px;
}

.is-home .is-explode__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.is-home .is-explode__dots small {
	margin-left: 3px;
	white-space: nowrap;
}

.is-home .is-explode__pill {
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #d4cde8;
}

.is-home .is-explode__arrow {
	display: grid;
	flex-shrink: 0;
	color: var(--grad-from);
}

/* Smalle illustratie: varianten onder elkaar, compact */
@container (max-width: 470px) {
	.is-home .is-explode {
		gap: 10px;
	}

	.is-home .is-explode__parent {
		flex-basis: 40%;
	}

	.is-home .is-explode__variants {
		flex-direction: column;
		gap: 6px;
	}

	.is-home .is-explode__variant {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas: "img name" "img sub";
		align-items: center;
		column-gap: 10px;
		row-gap: 0;
		padding: 6px 8px;
	}

	.is-home .is-explode__variant .is-explode__photo {
		grid-area: img;
		aspect-ratio: 4 / 3;
	}

	.is-home .is-explode__variant strong { grid-area: name; align-self: end; }
	.is-home .is-explode__variant small { grid-area: sub; align-self: start; }

	.is-home .is-explode__dots small {
		display: none;
	}
}

/* Illustratie 4: Card Builder */

.is-home .is-editor {
	display: flex;
	width: 100%;
	max-width: 500px;
	min-height: 224px;
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	font-size: 12px;
}

.is-home .is-editor__panel {
	display: flex;
	flex: 0 0 clamp(118px, 35%, 176px);
	flex-direction: column;
	gap: 10px;
	padding: 14px 12px;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.is-home .is-editor__panel strong {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grad-from);
}

.is-home .is-editor__tabs {
	display: flex;
	gap: 3px;
	padding: 2px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.is-home .is-editor__tabs span {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px 0;
	font-size: 9.5px;
	font-weight: 600;
	border-radius: 4px;
	color: #a79fc4;
	line-height: 1;
	text-align: center;
}

.is-home .is-editor__tabs span.is-active {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.is-home .is-editor__toggles {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.is-home .is-editor__toggles span {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	line-height: 15px;
	font-size: 11px;
}

.is-home .is-editor__toggles span.is-off {
	color: #a79fc4;
}

.is-home .is-editor__toggle {
	position: relative;
	flex-shrink: 0;
	width: 26px;
	height: 14px;
	border-radius: var(--radius-pill);
	background: var(--brand-gradient);
}

.is-home .is-editor__toggle::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

.is-home .is-off .is-editor__toggle {
	background: rgba(255, 255, 255, 0.12);
}

.is-home .is-off .is-editor__toggle::after {
	right: auto;
	left: 2px;
}

.is-home .is-editor__canvas {
	display: grid;
	flex: 1 1 0;
	min-width: 0;
	place-items: center;
	padding: 28px 10px 12px;
}

.is-home .is-editor__select {
	position: relative;
	width: 100%;
	max-width: 168px;
	padding: 5px;
	border: 1px solid #00b6ff;
}

.is-home .is-editor__label {
	position: absolute;
	top: -22px;
	left: -1px;
	padding: 2px 6px;
	border-radius: 3px;
	background: #00b6ff;
	color: #0c0326;
	font-size: 12px;
	line-height: 16.8px;
	white-space: nowrap;
}

.is-home .is-editor__handle {
	position: absolute;
	width: 7px;
	height: 7px;
	border: 1px solid #00b6ff;
	border-radius: 1px;
	background: #fff;
}

.is-home .is-editor__handle--tl { left: -4px; top: -4px; }
.is-home .is-editor__handle--tr { right: -4px; top: -4px; }
.is-home .is-editor__handle--bl { left: -4px; bottom: -4px; }
.is-home .is-editor__handle--br { right: -4px; bottom: -4px; }

.is-home .is-editor__card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px 8px 9px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
}

.is-home .is-editor__photo {
	display: grid;
	place-items: center;
	aspect-ratio: 140 / 66;
	border-radius: 6px;
	background: #0e0432;
}

.is-home .is-editor__photo svg {
	width: 56%;
	height: auto;
}

.is-home .is-editor__card small {
	color: #a79fc4;
	line-height: 1.4;
	white-space: nowrap;
}

.is-home .is-editor__card strong {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

.is-home .is-editor__card div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	color: #fff;
}

.is-home .is-editor__card b {
	font-size: 16px;
	font-weight: 500;
}

.is-home .is-editor__card em {
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
	font-style: normal;
	line-height: 16.8px;
}

.is-home .is-editor__cursor {
	position: absolute;
	right: 4px;
	bottom: 2px;
}

@container (max-width: 340px) {
	.is-home .is-editor__panel {
		flex-basis: 108px;
		padding: 12px 10px;
		gap: 9px;
	}
}

/* Developers --------------------------------------------------------------- */

.is-home .is-dev {
	display: grid;
	grid-template-columns: minmax(0, 562fr) minmax(0, 500fr);
	gap: clamp(32px, 7vw, 94px);
	align-items: start;
	max-width: 1156px;
	margin-inline: auto;
}

/* Lichte WP-admin modal (zoals de echte plugin-UI) */
.is-home .is-modal {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background: #fff;
	color: #111827;
	font-family: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.is-home .is-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
}

.is-home .is-modal__head svg {
	color: #6b7280;
}

.is-home .is-modal__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 22px 20px;
	background: #f7f8fa;
}

.is-home .is-field {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.is-home .is-field label {
	display: flex;
	flex: 0 0 140px;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #111827;
}

.is-home .is-field label i {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2563eb;
	color: #fff;
	font-style: normal;
	font-size: 11px;
	font-weight: 400;
}

.is-home .is-field__control {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.is-home .is-field__input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	max-width: 225px;
	padding: 8px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background: #fff;
	font-size: 13px;
	line-height: 18px;
	color: #111827;
}

.is-home .is-field__input svg {
	flex-shrink: 0;
	color: #6b7280;
}

.is-home .is-field__input--focus {
	border-color: #6b83f2;
}

.is-home .is-field__input--muted {
	color: #6b7280;
}

.is-home .is-field__input--num {
	max-width: 72px;
}

.is-home .is-field__input--area {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	max-width: none;
	min-height: 60px;
}

.is-home .is-field small {
	font-size: 11px;
	line-height: 16px;
	color: #6b7280;
}

.is-home .is-modal__adv {
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}

.is-home .is-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid #e5e7eb;
}

.is-home .is-modal__btn {
	padding: 8px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #111827;
}

.is-home .is-modal__btn--primary {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
}

.is-home .is-dev__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
}

body.is-instant .is-home .is-dev__card h3 {
	margin: 0;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.3;
}

.is-home .is-dev__card p {
	margin: 0;
	color: var(--text-muted);
}

.is-home .is-dev__card .is-home-link {
	align-self: flex-start;
	margin-top: 0;
	color: var(--grad-to);
	border-bottom-color: transparent;
}

@media (max-width: 991px) {
	.is-home .is-dev {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
		max-width: 640px;
	}
}

@media (max-width: 478px) {
	.is-home .is-field {
		flex-direction: column;
		gap: 8px;
	}

	.is-home .is-field label {
		flex-basis: auto;
		min-height: 0;
	}

	.is-home .is-modal__head,
	.is-home .is-modal__body,
	.is-home .is-modal__foot {
		padding-inline: 14px;
	}

	.is-home .is-dev__card {
		padding: 22px;
	}
}

/* Vergelijken -------------------------------------------------------------- */

.is-home .is-compare {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--home-gap);
}

.is-home .is-compare__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--home-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.is-home .is-compare__item:hover {
	background: var(--home-glass-strong);
	transform: translateY(-3px);
}

.is-home .is-compare__item span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.is-home .is-compare__item small {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.is-home .is-compare__item strong {
	font-family: var(--font-display);
	font-size: 20px;
	overflow-wrap: anywhere;
}

.is-home .is-compare__item svg {
	flex-shrink: 0;
	color: var(--grad-to);
	transition: transform var(--dur-base) var(--ease);
}

.is-home .is-compare__item:hover svg {
	transform: translateX(4px);
}

@media (max-width: 991px) {
	.is-home .is-compare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.is-home .is-compare {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3);
	}

	.is-home .is-compare__item {
		padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	}
}

/* Drie stappen ------------------------------------------------------------- */

.is-home .is-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--home-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.is-home .is-steps__num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-4);
	border-radius: 50%;
	background: var(--brand-gradient);
	color: var(--grad-text-fg);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
}

.is-home .is-steps h3 {
	margin-bottom: var(--space-2);
}

.is-home .is-steps p {
	margin: 0;
	color: var(--text-muted);
}

@media (max-width: 991px) {
	.is-home .is-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}
}

/* Prijzen / FAQ / Eind-CTA ------------------------------------------------- */

/* Zodat de headerlink naar #pricing de titel niet onder de vaste header schuift. */
#pricing {
	scroll-margin-top: calc(var(--header-height-scrolled, 58px) + 12px);
}

/* Bricks zet onder 991px margin-top: -100px en z-index: 1 op #pricing.
   Daardoor schuift de prijzen-sectie over de testimonials. Hogere specificiteit wint van die inline CSS. */
@media (max-width: 991px) {
	body.home #pricing {
		margin-top: 0;
		padding-top: var(--space-8);
	}
}

@media (max-width: 767px) {
	body.home #pricing {
		padding-top: var(--space-7);
	}
}

@media (max-width: 478px) {
	body.home #pricing {
		padding-top: var(--space-6);
	}
}

.is-home .is-home-urgency {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--space-4) 0 0;
	font-weight: 600;
}

.is-home .is-home-urgency svg {
	color: var(--grad-from);
	flex-shrink: 0;
}

.is-home .is-pricing-grid {
	padding-top: var(--space-3);
}

.is-home .is-card-pricing__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.is-home .is-card-pricing__early-bird {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 99px;
	background: rgba(124, 77, 255, 0.18);
	border: 1px solid rgba(124, 77, 255, 0.35);
	color: var(--grad-from);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-home .is-faq {
	max-width: 780px;
}

.is-home .is-faq__btn {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
}

.is-home .is-faq__panel-inner a {
	border-bottom: 1px solid var(--border-strong);
}

.is-home .is-home-endcta {
	padding: var(--space-8) var(--space-6);
	border-radius: calc(var(--radius-lg) + 8px);
}

.is-home .is-home-endcta .is-cta-block__title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.12;
	margin-bottom: var(--space-4);
}

.is-home .is-home-endcta .is-cta-block__lead {
	max-width: 36em;
	margin-inline: auto;
	font-size: clamp(16px, 1.6vw, 19px);
}

.is-home .is-home-endcta .is-home-trust {
	margin-top: var(--space-6);
}

@media (max-width: 767px) {
	.is-home .is-home-endcta {
		padding: var(--space-7) var(--space-4);
	}

	.is-home .is-home-endcta .is-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Twee klantquotes naast elkaar; bij drie of meer blijft het raster van drie. */
@media (min-width: 1024px) {
	.is-testimonials--multi:not(:has(.is-testimonial:nth-child(3))) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 980px;
		margin-inline: auto;
	}
}