/* ===== Sitebrede accentkleuren (zelfde stijl als de homepage, nov 2026) ===== */
:root { --sebto-accent: #ffd166; --sebto-accent-2: #ffaa2b; }

/* Paginakop van subpagina's: stippenpatroon, zachte kleurvlekken, golf en oranje titel */
.page-hero { position: relative; overflow: hidden; padding-bottom: 110px !important; }
.page-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 92% 10%, rgba(63,180,239,.55), transparent 32%),
		radial-gradient(circle at 70% 115%, rgba(255,170,43,.28), transparent 30%),
		radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
	-webkit-mask-image: linear-gradient(110deg, rgba(0,0,0,.35) 30%, #000 70%);
	mask-image: linear-gradient(110deg, rgba(0,0,0,.35) 30%, #000 70%);
}
.page-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; pointer-events: none;
	background: no-repeat bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C 240 10 480 10 720 45 S 1200 95 1440 30 L1440 90 L0 90 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
	background: linear-gradient(90deg, var(--sebto-accent), var(--sebto-accent-2));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--sebto-accent);
	text-shadow: none; display: inline-block; padding-bottom: .05em;
}

/* Dienst-icoontjes: elk een eigen kleur (blauw, groen, paars, oranje) */
.row > :nth-child(4n+1) .service-icon { background: #e3f3fd; color: #0a6fae; }
.row > :nth-child(4n+2) .service-icon { background: #e5f8ef; color: #1c9d68; }
.row > :nth-child(4n+3) .service-icon { background: #f1ebff; color: #6b46c1; }
.row > :nth-child(4n+4) .service-icon { background: #fff6dc; color: #c27c00; }

/* Stappen in de werkwijze */
.step-num { background: linear-gradient(135deg, var(--sebto-accent), var(--sebto-accent-2)) !important; color: #1f1300 !important; box-shadow: 0 8px 18px -8px rgba(255,170,43,.7); }

/* Afsluitende balk (CTA): patroon en oranje knop */
.cta { position: relative; overflow: hidden; }
.cta::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(circle at 85% 50%, rgba(255,170,43,.25), transparent 35%),
		radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.3px) 0 0 / 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
	mask-image: linear-gradient(90deg, transparent 20%, #000 80%);
}
.cta .container { position: relative; z-index: 1; }
.cta .btn-light { background: linear-gradient(90deg, var(--sebto-accent), var(--sebto-accent-2)); border: 0; color: #1f1300; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(255,170,43,.6); }
.cta .btn-light:hover { filter: brightness(1.05); color: #1f1300; }

/* Logo groter (nov 2026) */
.site-nav .navbar-brand img { width: 200px; height: auto; max-width: none; }
@media (max-width: 575.98px) { .site-nav .navbar-brand img { width: 160px; } }