/* ==========================================================================
   LEAD FORM BACKGROUND DEMOS — 5 opties
   Activeer 1 door class te wisselen op de sectie:

   Optie A: ireclam-lead-bg-a  → Navy + emerald gradient (past bij hero)
   Optie B: ireclam-lead-bg-b  → Zacht mint gradient (licht, fris)
   Optie C: ireclam-lead-bg-c  → Emerald met glasmorfisme
   Optie D: ireclam-lead-bg-d  → Navy met glow orbs (donker premium)
   Optie E: ireclam-lead-bg-e  → Wit met groene accent border + shadow
   ========================================================================== */

/* -- Shared reset -- */
.ireclam-lead-form-section {
  position: relative;
  overflow: hidden;
}
.ireclam-lead-form-section > * {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   OPTIE A — Navy + emerald gradient (matcht hero/footer)
   ========================================================================== */
.ireclam-lead-bg-a {
  background: linear-gradient(135deg, #0C2E2E 0%, #102222 40%, #0C2E2E 100%) !important;
}
.ireclam-lead-bg-a::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 300px at 25% 40%, rgba(52,211,153,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 250px at 75% 60%, rgba(37,99,235,0.06) 0%, transparent 70%);
  z-index: 0;
}
.ireclam-lead-bg-a::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(52,211,153,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 65%);
}
/* Card op navy = wit card met shadow */
.ireclam-lead-bg-a .ireclam-lead-form-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   OPTIE B — Zacht mint gradient (licht, fris, professioneel)
   ========================================================================== */
.ireclam-lead-bg-b {
  background: linear-gradient(160deg, #ECFDF5 0%, #D1FAE5 30%, #A7F3D0 60%, #6EE7B7 100%) !important;
}
.ireclam-lead-bg-b::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 150%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 0;
}
.ireclam-lead-bg-b::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 50%;
  height: 120%;
  background: radial-gradient(circle, rgba(52,211,153,0.3) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 0;
}
.ireclam-lead-bg-b .ireclam-lead-form-card {
  box-shadow: 0 12px 40px rgba(4,120,87,0.1) !important;
}

/* ==========================================================================
   OPTIE C — Emerald met glasmorfisme card
   ========================================================================== */
.ireclam-lead-bg-c {
  background: linear-gradient(135deg, #047857 0%, #059669 50%, #34D399 100%) !important;
}
.ireclam-lead-bg-c::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 300px at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(circle 250px at 80% 70%, rgba(0,0,0,0.1) 0%, transparent 100%);
  z-index: 0;
}
.ireclam-lead-bg-c .ireclam-lead-form-card {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   OPTIE D — Navy met glow orbs (donker, premium)
   ========================================================================== */
.ireclam-lead-bg-d {
  background: #102222 !important;
}
.ireclam-lead-bg-d::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(52,211,153,0.2) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  animation: ireclam-glow-d1 12s ease-in-out infinite;
}
.ireclam-lead-bg-d::after {
  content: '';
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  animation: ireclam-glow-d2 16s ease-in-out infinite;
}
@keyframes ireclam-glow-d1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(40px, 20px); }
  100% { transform: translate(0, 0); }
}
@keyframes ireclam-glow-d2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-30px, -25px); }
  100% { transform: translate(0, 0); }
}
.ireclam-lead-bg-d .ireclam-lead-form-card {
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

/* ==========================================================================
   OPTIE E — Wit/clean met groene accent left-border + grote shadow
   ========================================================================== */
.ireclam-lead-bg-e {
  background: linear-gradient(180deg, #F8FAFC 0%, #F0FDF4 100%) !important;
}
.ireclam-lead-bg-e .ireclam-lead-form-card {
  border-left: 4px solid #34D399 !important;
  border-radius: 4px 12px 12px 4px !important;
  box-shadow: 0 16px 48px rgba(4,120,87,0.08), 0 4px 12px rgba(0,0,0,0.04) !important;
}