/* =========================
   Voltina – Header 56 (Relume)
   Plak onderaan je stylesheet
   ========================= */

/* Huisstijl tokens */
:root{
  --voltina-magenta: #e6007e;
  --voltina-orange:  #f08048;
  --voltina-black:   #000000;

  /* rgba varianten */
  --voltina-magenta-85: rgba(230, 0, 126, 0.85);
  --voltina-magenta-55: rgba(230, 0, 126, 0.55);
  --voltina-orange-40:  rgba(240, 128, 72, 0.40);
  --voltina-orange-25:  rgba(240, 128, 72, 0.25);

  --voltina-black-70:   rgba(0, 0, 0, 0.70);
  --voltina-black-45:   rgba(0, 0, 0, 0.45);
}


/* Basis */
.header-56{
  position: relative;
  color: #fff;
}

/* “Voltina vibe” overlay + subtiele patternlaag
   (werkt zowel met image background als color background) */
.header-56 .absolute.inset-0.z-0{
  position: absolute;
  inset: 0;
}

/* 1) Gradient overlay (logo-verloop) */
.header-56 .absolute.inset-0.z-0::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Magenta -> oranje enkel in het verloop */
  background:
      linear-gradient(
        135deg,
        var(--voltina-magenta-85) 0%,
        var(--voltina-magenta-55) 42%,
        var(--voltina-orange-40) 100%
      );
  mix-blend-mode: multiply;
  opacity: 0.95;
}

/* 2) Subtiel “conceptbeeld/pattern” gevoel (geen zware code, wel netjes) */
.header-56 .absolute.inset-0.z-0::after{
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;

  background:
      radial-gradient(circle at 20% 30%, rgba(240,128,72,0.18) 0%, rgba(240,128,72,0.00) 55%),
      radial-gradient(circle at 80% 20%, rgba(230,0,126,0.14) 0%, rgba(230,0,126,0.00) 50%),
      repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        rgba(255,255,255,0.00) 1px,
        rgba(255,255,255,0.00) 14px
      );

  transform: rotate(-6deg);
  opacity: 0.35;
  filter: blur(0.2px);
}

/* Als je jouw bestaande zwarte overlay (div.bg-black) behoudt,
   temper hem zodat het niet “dubbel donker” wordt */
.header-56 .absolute.inset-0.bg-black{
  background: linear-gradient(
    180deg,
    var(--voltina-black-45) 0%,
    var(--voltina-black-70) 100%
  ) !important;
  opacity: 1 !important; /* we sturen ‘m via gradient, niet via inline opacity */
}

/* Typografie (sluit aan bij Mulish in 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 10px 30px 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;
}

/* Tagline iets meer “label” gevoel */
.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: 1 kleur (magenta) i.p.v. 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 (jouw PHP zet bg-white/text-gray-900) -> overschrijven naar Voltina magenta */
.header-56 a.bg-white.text-gray-900{
  background: var(--voltina-magenta) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.header-56 a.bg-white.text-gray-900:hover{
  background: rgba(230, 0, 126, 0.85) !important;
}

/* Secondary knop (border-white text-white hover:bg-white/10) -> subtiel glas */
.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;
}



:root{
  --voltina-magenta: #e6007e;
  --voltina-orange:  #f08048;
  --voltina-black:   #000000;

  --voltina-magenta-85: rgba(230, 0, 126, 0.85);
  --voltina-magenta-55: rgba(230, 0, 126, 0.55);
  --voltina-orange-40:  rgba(240, 128, 72, 0.40);

  --voltina-black-70:   rgba(0, 0, 0, 0.70);
  --voltina-black-45:   rgba(0, 0, 0, 0.45);
}

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

/* extra divider onderaan -> meer “ritme” op de pagina */
.header-56::after{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 1px;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(230, 0, 126, 0.00) 0%,
    rgba(230, 0, 126, 0.45) 35%,
    rgba(240, 128, 72, 0.35) 65%,
    rgba(230, 0, 126, 0.00) 100%
  );
  opacity: .9;
}

.header-56 .absolute.inset-0.z-0{
  position: absolute;
  inset: 0;
}

.header-56 .absolute.inset-0.z-0::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--overlay-opacity, 0.5);

  background:
    linear-gradient(
      135deg,
      var(--voltina-magenta-85) 0%,
      var(--voltina-magenta-55) 42%,
      var(--voltina-orange-40) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.95;
}

.header-56 .absolute.inset-0.z-0::after{
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: calc(var(--overlay-opacity, 0.5) * 0.4);

  background:
    radial-gradient(circle at 20% 30%, rgba(240,128,72,0.20) 0%, rgba(240,128,72,0.00) 55%),
    radial-gradient(circle at 80% 20%, rgba(230,0,126,0.18) 0%, rgba(230,0,126,0.00) 55%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(255,255,255,0.00) 1px,
      rgba(255,255,255,0.00) 14px
    );

  transform: rotate(-6deg);
  opacity: 0.35;
}

.header-56 .absolute.inset-0.bg-black{
  background: linear-gradient(
    180deg,
    var(--voltina-black-45) 0%,
    var(--voltina-black-70) 100%
  ) !important;
  opacity: 1 !important;
}

.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;
}

.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);
}

.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);
}

.header-56 a.bg-white.text-gray-900{
  background: var(--voltina-magenta) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.header-56 a.bg-white.text-gray-900:hover{
  background: rgba(230, 0, 126, 0.85) !important;
}

.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;
}