:root{
  --brand:#5c41a7;
  --accent:#51d095;
}
.tpp-hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1400px 700px at 10% 20%, color-mix(in oklab, var(--brand) 85%, #000 10%), var(--brand));
  color:#0b1220;
  isolation:isolate;
}
.tpp-hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 85% 10%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, color-mix(in oklab, #ffffff 20%, transparent), transparent 60%);
  opacity:.9;
  z-index:0;
}
.tpp-hero__container{
    max-width: 1400px;
    width: min(1400px, 92vw);
    margin: 0 auto;
    padding: 164px 0 124px 0;
    position: relative;
    z-index: 1;
}
.tpp-hero__slider{
  position:relative;
  display:grid;
}
.tpp-hero__slide{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:40px;
  align-items:center;
  min-height:420px;
  opacity:0; pointer-events:none;
  animation: tppFade 18s infinite;
}
.tpp-hero__slide:nth-child(1){ animation-delay:0s; }
.tpp-hero__slide:nth-child(2){ animation-delay:6s; }
.tpp-hero__slide:nth-child(3){ animation-delay:12s; }

/* Als er maar 1 slide is, forceer zichtbaar */
.tpp-hero__slide:only-child{ opacity:1; pointer-events:auto; animation:none; }

@keyframes tppFade{
  0%{opacity:0}
  5%{opacity:1; pointer-events:auto}
  30%{opacity:1}
  35%{opacity:0}
  100%{opacity:0}
}

.tpp-hero__slide.is-dark .tpp-hero__title,
.tpp-hero__slide.is-dark .tpp-hero__subtitle{ color:#0b1220; }

.tpp-hero__slide.is-light .tpp-hero__title,
.tpp-hero__slide.is-light .tpp-hero__subtitle{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.05); }

.tpp-hero__content{ }
.tpp-hero__title{
  font-size: clamp(28px, 4.2vw, 48px);
  line-height:1.05; margin:0 0 12px; font-weight:800;
}
.tpp-hero__subtitle{
  font-size: clamp(16px, 1.6vw, 20px);
  opacity:.95; margin:0 0 20px; max-width:60ch;
}
.tpp-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.tpp-hero__btn{
  background: var(--accent);
  color:#0b1220; border-radius:999px; padding:12px 18px;
  font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.tpp-hero__btn:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.16); }
.tpp-hero__btn--ghost{
  background: transparent; color: #fff; outline:2px solid color-mix(in oklab, #fff 70%, var(--brand) 30%);
}
.tpp-hero__btn--ghost:hover{
  background: color-mix(in oklab, #fff 12%, transparent);
}

.tpp-hero__media{ position:relative; }
.tpp-hero__image{
  width:100%; height:auto; display:block; border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.tpp-hero__placeholder{
  width:100%; aspect-ratio: 4/3; border-radius:24px; background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  outline:1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 30px 80px rgba(0,0,0,.25);
}

/* Responsief */
@media (max-width: 900px){
  .tpp-hero__slide{ grid-template-columns:1fr; gap:24px; }
  .tpp-hero__media{ order:-1; }
}