/* ===== Homepage: extra kleur en beeld (nov 2026) ===== */
:root { --sebto-accent: #ffd166; --sebto-accent-2: #ffaa2b; }

/* Hero: patroon, zachte vormen en golf naar de volgende sectie */
.hero { position: relative; overflow: hidden; padding-bottom: 140px !important; }
.hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(110deg, transparent 35%, #000 75%);
	mask-image: linear-gradient(110deg, transparent 35%, #000 75%);
}
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; 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");
}
.hero .container { position: relative; z-index: 1; }
.hero .hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; z-index: 0; }
.hero .hero-blob-1 { width: 360px; height: 360px; right: -80px; top: -60px; background: #3fb4ef; }
.hero .hero-blob-2 { width: 300px; height: 300px; left: 35%; bottom: -120px; background: var(--sebto-accent-2); opacity: .25; }

/* Accentkleur */
.hero .eyebrow { display: inline-block; background: rgba(255,255,255,.12); color: rgba(255,255,255,.85) !important; padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.hero h1 { position: relative; z-index: 1; }
.hero h1 .accent-text {
	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; padding-bottom: .05em;
}
.hero-list i { color: var(--sebto-accent); }
.hero .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); }
.hero .btn-light:hover { filter: brightness(1.05); transform: translateY(-1px); color: #1f1300; }

/* Illustratie met zwevende kaartjes */
.hero-art { position: relative; max-width: 540px; margin-left: auto; }
.hero-illustration { width: 100%; height: auto; display: block; overflow: visible; }
.hero-chip {
	position: absolute; display: flex; gap: .65rem; align-items: center;
	background: rgba(255,255,255,.96); color: #13324f; border-radius: 14px; padding: .6rem .85rem;
	box-shadow: 0 14px 30px -12px rgba(2,31,61,.55); font-size: .82rem; line-height: 1.25; max-width: 240px;
}
.hero-chip strong { display: block; font-size: .9rem; }
.hero-chip span { color: #5b7085; }
.hero-chip i { font-size: 1.15rem; width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; }
.hero-chip-1 { top: -4%; right: -4%; animation: sebtoFloat 6s ease-in-out infinite; }
.hero-chip-1 i { background: #e3f3fd; color: #0a6fae; }
.hero-chip-2 { bottom: -10%; left: -6%; animation: sebtoFloat 7s 1s ease-in-out infinite; }
.hero-chip-2 i { background: #e5f8ef; color: #1c9d68; }
.hero-chip-3 { bottom: -10%; right: -2%; animation: sebtoFloat 6.5s .5s ease-in-out infinite; }
.hero-chip-3 i { background: #fff6dc; color: #c27c00; }

.hv-float { animation: sebtoFloat 7s ease-in-out infinite; }
.hv-float-slow { animation: sebtoFloat 9s ease-in-out infinite; }
.hv-float-alt { animation: sebtoFloat 6s 1.2s ease-in-out infinite; }
.hv-blink { animation: sebtoBlink 2.4s ease-in-out infinite; }
.hv-d1 { animation-delay: .8s; } .hv-d2 { animation-delay: 1.6s; }
.hv-waves path { animation: sebtoWave 2s ease-out infinite; }
.hv-waves path:nth-child(2) { animation-delay: .25s; } .hv-waves path:nth-child(3) { animation-delay: .5s; }

@keyframes sebtoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sebtoBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sebtoWave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 991.98px) {
	.hero-art { margin: 1rem auto 0; max-width: 460px; }
	.hero-chip-2 { left: 0; }
	.hero-chip-3 { right: 0; }
	.hero-chip { font-size: .75rem; max-width: 200px; }
}
@media (max-width: 575.98px) {
	.hero-chip span { display: none; }
	.hero-chip-2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-chip, .hv-float, .hv-float-slow, .hv-float-alt, .hv-blink, .hv-waves path { animation: none !important; }
}

/* Diensten: elk icoon een eigen kleur */
.service-icon-1 { background: #e3f3fd !important; color: #0a6fae !important; }
.service-icon-2 { background: #e5f8ef !important; color: #1c9d68 !important; }
.service-icon-3 { background: #f1ebff !important; color: #6b46c1 !important; }
.service-icon-4 { background: #fff6dc !important; color: #c27c00 !important; }