/*
 * Startpagina (§23 richting B "Atelier"): hero met warme fotoplaatshouder en één petrol-markering, starttegels,
 * stappen, wél/niet, prijzen, controles en het expertblok. Enkel tokens uit base.css.
 */

.home-hero {
	padding: 12px 0 8px;
}

.home-hero__grid {
	display: grid;
	gap: 28px;
	align-items: center;
}

.home-hero__visual {
	order: -1;
}

.home-hero__photo {
	position: relative;
	padding: 0;
	aspect-ratio: 16 / 10;
	max-height: 240px;
	width: 100%;
	background:
		radial-gradient(120% 90% at 85% 15%, var(--surface-2) 0%, transparent 55%),
		var(--photo);
}

.home-hero__marker {
	left: 18%;
	top: 24%;
	width: 64%;
	height: 52%;
}

.home-hero__grid > * {
	min-width: 0;
}

.home-hero__eyebrow {
	margin: 0 0 16px;
}

/* Het label boven de titel mag afbreken (de FR-teksten zijn lang). */
.home-hero__eyebrow .chip {
	white-space: normal;
	line-height: 1.35;
	border-radius: 14px;
}

.home-hero__title {
	margin-bottom: 18px;
	max-width: 16ch;
}

.home-hero__lead {
	max-width: 52ch;
	margin: 0 0 24px;
}

.home-hero__cta .btn {
	min-width: 180px;
}

@media (max-width: 559px) {
	.home-hero__cta .btn {
		flex: 1 1 100%;
	}
}

.home-hero__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 18px 0 0;
	font-size: var(--fs-small);
	color: var(--muted);
}

.home-hero__resume a {
	font-weight: 700;
	color: var(--accent);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (min-width: 900px) {
	.home-hero {
		padding: 32px 0 24px;
	}

	.home-hero__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 56px;
	}

	.home-hero__visual {
		order: 2;
	}

	.home-hero__photo {
		aspect-ratio: 4 / 5;
		max-height: 560px;
	}

	.home-hero__marker {
		left: 14%;
		top: 32%;
		width: 72%;
		height: 38%;
	}
}

.home-h2 {
	font-size: clamp(26px, 3vw, 36px);
	margin: 0 0 10px;
}

.home-sub {
	color: var(--muted);
	margin: 0 0 24px;
	max-width: 62ch;
}

.home-steps {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: none;
}

@media (min-width: 900px) {
	.home-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

.home-step {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 22px;
}

.home-step h3 {
	font-size: 20px;
	margin: 14px 0 8px;
}

.home-step p {
	margin: 0;
	color: var(--ink);
}

.home-step__n {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 800;
	font-size: 18px;
}

.home-scope__grid {
	margin-top: 24px;
}

.home-scope__card .card__title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.home-scope__card:first-child .card__title .icon {
	color: var(--ok);
}

.home-scope__card:last-child .card__title .icon {
	color: var(--warn);
}

.home-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.home-list li {
	position: relative;
	padding-left: 22px;
}

.home-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok);
}

.home-list--no li::before {
	background: var(--warn);
}

.home-more {
	margin: 20px 0 0;
}

.home-more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 700;
	color: var(--accent);
}

.home-prices__grid {
	margin-top: 8px;
}

.home-price__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.home-price__fee {
	margin: 8px 0 6px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--accent-strong);
	line-height: 1.1;
}

.home-checks__grid {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

@media (min-width: 720px) {
	.home-checks__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.home-checks__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.home-checks__grid li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.home-checks__grid li > .icon {
	flex: none;
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: var(--radius-md);
	background: var(--ok-soft);
	color: var(--ok);
}

.home-checks__grid h3 {
	font-size: 17px;
	margin: 0 0 4px;
}

.home-checks__grid p {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}

.home-expert {
	padding-top: 0;
}

.home-expert__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.home-expert__card p {
	margin: 0;
	max-width: 56ch;
}

@media (max-width: 559px) {
	.home-expert__card .btn {
		flex: 1 1 100%;
		min-width: 0;
		white-space: normal;
		text-align: center;
	}
}