/* ============================================
   Home hero — post-522.css (cead2bd e.v.) + de eigen HTML-widgets van het origineel.
   ============================================ */
.hero { background-color: var(--color-primary); }
.hero__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 72px;
  min-height: 804px;
  padding: 80px 0;
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  width: 58%;
  flex-shrink: 0;
}
.hero__media { display: flex; flex-direction: column; width: 35%; flex-shrink: 1; }

/* Kop met wisselend woord (animatie cycleUp, 9s, drie woorden) */
.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 85px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--color-white);
}
.hero__cycle {
  display: inline-block;
  position: relative;
  height: 110px;
  min-width: 580px;
  overflow: hidden;
  vertical-align: bottom;
}
.hero__cycle-item {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-style: italic;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(32px);
  animation: hero-cycle 9s ease infinite;
}
.hero__cycle-item:nth-child(2) { animation-delay: 3s; }
.hero__cycle-item:nth-child(3) { animation-delay: 6s; }
@keyframes hero-cycle {
  0%   { opacity: 0; transform: translateY(32px); }
  6%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  36%  { opacity: 0; transform: translateY(-32px); }
  100% { opacity: 0; transform: translateY(32px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cycle-item { animation: none; }
  .hero__cycle-item:first-child { opacity: 1; transform: none; }
}

/* Vinkjeslijst in de hero: icoonlijst met 16px-icoon, onderkant uitgelijnd en 4px opgetild */
.hero .icoonlijst { --icoon-maat: 16px; --icoon-box: 20px; --icoon-uitlijning: flex-end; --icoon-verschuiving: -4px; --ruimte: 12px;
  --tekst-font: var(--font-ui); --tekst-maat: 16px; --tekst-gewicht: 400; --tekst-lh: 1.7; --tekst-kleur: var(--color-white); --icoon-kleur: var(--color-white); }

.hero__knoppen { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
.hero__knoppen .knop { flex-shrink: 0; }

/* Vertrouwensregel onder de knoppen */
.hero-trust { display: flex; align-items: center; gap: 10px; }
.hero-trust__dots { display: flex; align-items: center; }
.hero-trust__dot {
  width: 32px; height: 32px;
  margin-left: -12px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary);
}
.hero-trust__dot:first-child { margin-left: 0; display: flex; align-items: center; justify-content: center; }
.hero-trust__dot--logo img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); }
.hero-trust__dot--face img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(0.7);
  filter: blur(1.5px);
  opacity: 0.85;
}
.hero-trust__tekst { font-family: var(--font-ui); font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* Fotoslider met badges */
.hero-slider { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.hero-slider__viewport { overflow: hidden; border-radius: 18px; }
.hero-slider__track { display: flex; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.hero-slider__slide { width: 100%; flex-shrink: 0; }
.hero-slider__slide img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; }

.hero-slider__badges { position: absolute; inset: 0; pointer-events: none; }
.hero-slider__badgeset { position: absolute; inset: 0; }
.hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 32px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  pointer-events: all;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}
.hero-slider__badgeset.is-active .hero-badge { opacity: 1; transform: translateY(0); }
.hero-slider__badgeset.is-active .hero-badge--1 { transition-delay: 0.35s; }
.hero-slider__badgeset.is-active .hero-badge--2 { transition-delay: 0.55s; }
.hero-badge--1 { bottom: 28px; left: -28px; }
.hero-badge--2 { top: 36px; right: -28px; }
.hero-badge__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 16px;
}

.hero-slider__dots { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; margin-top: 24px; }
.hero-slider__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px; height: 8px;
  padding: 0; border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}
.hero-slider__dot.is-active { width: 20px; background: var(--color-accent); }

/* Tablet */
@media (max-width: 1024px) {
  .hero__inner { padding: 50px 30px 75px; }
}

/* Mobiel */
@media (max-width: 768px) {
  .hero__title { font-size: 46px; }
  .hero__cycle { height: 60px; min-width: 340px; }
}
@media (max-width: 767px) {
  .hero__inner {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    min-height: 0;
    padding: 30px 20px 60px;
  }
  .hero__content { width: 100%; gap: 20px; justify-content: flex-start; align-items: flex-start; }
  .hero__title { width: 100%; }
  .hero__media { width: 100%; align-items: center; }
  .hero-slider { width: 85%; }

  .hero .icoonlijst { width: 100%; margin-top: 4%; --ruimte: 17px; --icoon-uitlijning: center; --icoon-verschuiving: 0px; --tekst-maat: 17px; --tekst-lh: 1.2; }

  .hero__knoppen { flex-wrap: wrap; gap: 12px; width: 100%; }
  .hero__knoppen .knop { width: 100%; }
  .hero__knoppen .knop:first-child { margin-top: 12px; }
  .hero__knoppen .knop + .knop { margin-top: 6px; }
}