/* =========================
   Voltina – Header 56 (neutral photo + adjustable blur)
   (geen magenta overlay, wel instelbare blur)
   ========================= */

.header-56{
  position: relative;
  color: #fff;
  overflow: hidden;

  @media (max-width: 767px) {
      background-color: #f08048;
  }
}

/* Typografie (Mulish volgens gids) */
.header-56 h1{
  font-family: "Mulish", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing: -0.02em;
  text-shadow: 0 12px 34px rgba(0,0,0,0.35);
}
.header-56 p,
.header-56 .md\:text-lg{
  font-family: "Mulish", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Background image blur (alleen de foto, niet de content) */
.header-56 .absolute.inset-0.z-0 img{
  filter: blur(var(--bg-blur, 0px));
  transform: scale(1.05); /* voorkomt blur-randen */
  will-change: filter, transform;
}

/* Neutrale overlay: gebruikt je bestaande overlayIntensity via --overlay-opacity */
.header-56 .absolute.inset-0.z-0 > div[style*="rgba(0,0,0"]{
  /* je inline overlay div blijft bestaan, maar we “stabiliseren” het uiterlijk */
  background: rgba(0,0,0, var(--overlay-opacity, 0.5)) !important;
}

/* Extra: subtiele vignette voor leesbaarheid (optioneel maar nice) */
.header-56 .absolute.inset-0.z-0::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.55) 85%
  );
  opacity: 0.9;
}

/* Tagline pill blijft mooi, zonder magenta */
.header-56 p.mb-3.font-semibold{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
}

/* Buttons: behoud je rounding/shadow, maar geen magenta gradient */
.header-56 a.inline-flex{
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.header-56 a.inline-flex:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.30);
}

/* Primary knop: kies hier wat Voltina “primary” moet zijn zonder magenta.
   Optie A: wit/zwart (clean, super safe) */
.header-56 a.bg-white.text-gray-900{
  background: #f08048 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Secondary knop: glassy */
.header-56 a.border.border-white.text-white{
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(0,0,0,0.12);
  backdrop-filter: blur(8px);
}
.header-56 a.border.border-white.text-white:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.75) !important;
}