/**
 * IT Live — Hero Variant System
 * 8 unieke hero designs die automatisch per sector worden toegewezen.
 * Elke variant heeft eigen layout, animaties, gradient en image behandeling.
 */

/* ══════════════════════════════════════════════════════════════
   SHARED HERO BASE
   ══════════════════════════════════════════════════════════════ */
.hero-v { position: relative; overflow: hidden; padding: 80px 0 64px; min-height: 520px; display: flex; align-items: center }
.hero-v .w { position: relative; z-index: 2 }
.hero-v__bg { position: absolute; inset: 0; z-index: 0 }
.hero-v__bg img { width: 100%; height: 100%; object-fit: cover }
@media (prefers-reduced-motion: no-preference) {
  .hero-v__bg img {
    animation: heroVKenBurns 28s ease-in-out infinite alternate;
  }
  /* Zelfde particle-drift als classic hero (keyframes in premium-effects.css) */
  .hero-v .hero-v__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .2;
    mix-blend-mode: soft-light;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,.72) 50%, transparent 52%),
      radial-gradient(1px 1px at 58% 40%, rgba(255,255,255,.42) 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 80% 70%, rgba(255,255,255,.52) 50%, transparent 52%),
      radial-gradient(1px 1px at 32% 88%, rgba(255,255,255,.38) 50%, transparent 52%),
      radial-gradient(1.4px 1.4px at 90% 26%, rgba(255,255,255,.58) 50%, transparent 52%);
    background-size: 100% 100%;
    animation: peHeroParticlesDrift 26s ease-in-out infinite alternate;
  }
}
@keyframes heroVKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.hero-v__overlay { position: absolute; inset: 0; z-index: 1 }
.hero-v__badge { display: inline-block; padding: 6px 18px; border-radius: 50px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px }
.hero-v h1 { font-weight: 900; line-height: 1.05; margin-bottom: 14px }
.hero-v h1 em { font-style: normal }
.hero-v__desc { font-size: 1.02rem; line-height: 1.6; margin-bottom: 28px; max-width: 540px }
.hero-v__btns { display: flex; gap: 12px; flex-wrap: wrap }

/* ══════════════════════════════════════════════════════════════
   V1: GRADIENT SPLIT — image rechts, tekst links, diagonale gradient
   ══════════════════════════════════════════════════════════════ */
.hero-v1 .hero-v__overlay { background: linear-gradient(135deg, var(--cd) 0%, var(--c) 60%, transparent 100%) }
.hero-v1 .hero-v__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.hero-v1 h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); color: #fff !important }
.hero-v1 h1 em { color: var(--cl); text-shadow: 0 0 30px rgba(var(--c-rgb), .4) }
.hero-v1 .hero-v__desc { color: rgba(255,255,255,.85) !important }
.hero-v1 .hero-v__badge { background: rgba(255,255,255,.15); color: #fff !important; border: 1px solid rgba(255,255,255,.2) }
.hero-v1 .hero-v__img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3) }
.hero-v1 .hero-v__img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover }
@media(max-width:900px) { .hero-v1 .hero-v__grid { grid-template-columns: 1fr } .hero-v1 .hero-v__img { display: none } }

/* ══════════════════════════════════════════════════════════════
   V2: FULLSCREEN IMAGE — tekst gecentreerd over full-bleed foto
   ══════════════════════════════════════════════════════════════ */
.hero-v2 { text-align: center; min-height: 600px }
.hero-v2 .hero-v__overlay { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.7) 100%) }
.hero-v2 h1 { font-size: clamp(2.2rem, 5vw, 4rem); color: #fff !important; max-width: 800px; margin-left: auto; margin-right: auto }
.hero-v2 h1 em { background: linear-gradient(135deg, var(--c), var(--cl)); -webkit-background-clip: text; -webkit-text-fill-color: transparent }
.hero-v2 .hero-v__desc { color: rgba(255,255,255,.85) !important; margin-left: auto; margin-right: auto }
.hero-v2 .hero-v__badge { background: var(--c); color: #fff !important }
.hero-v2 .hero-v__btns { justify-content: center }
.hero-v2 .hero-v__stats { display: flex; justify-content: center; gap: 48px; margin-top: 40px }
.hero-v2 .hero-v__stat { text-align: center }
.hero-v2 .hero-v__stat-val { font-size: 2rem; font-weight: 900; color: #fff }
.hero-v2 .hero-v__stat-lbl { font-size: .78rem; color: rgba(255,255,255,.65) }

/* ══════════════════════════════════════════════════════════════
   V3: GLASSMORPHISM — frosted glass card over achtergrond
   ══════════════════════════════════════════════════════════════ */
.hero-v3 .hero-v__overlay { background: linear-gradient(135deg, rgba(var(--c-rgb),.15) 0%, transparent 60%) }
.hero-v3 .hero-v__card { background: rgba(255,255,255,.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 48px; max-width: 600px }
.hero-v3 h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff !important }
.hero-v3 h1 em { color: var(--c) }
.hero-v3 .hero-v__desc { color: rgba(255,255,255,.8) !important }
.hero-v3 .hero-v__badge { background: rgba(var(--c-rgb),.2); color: var(--c) !important; border: 1px solid rgba(var(--c-rgb),.3) }

/* ══════════════════════════════════════════════════════════════
   V4: BRAND GRADIENT — geen foto, puur kleur + geometrische vormen
   ══════════════════════════════════════════════════════════════ */
.hero-v4 { background: linear-gradient(135deg, var(--cd) 0%, var(--c) 100%); text-align: center }
.hero-v4::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60vw; height: 60vw; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none }
.hero-v4::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 40vw; height: 40vw; border-radius: 50%; background: rgba(var(--c-rgb),.1); pointer-events: none }
.hero-v4 h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); color: #fff !important }
.hero-v4 h1 em { font-style: normal; background: linear-gradient(135deg, #fff, var(--cl)); -webkit-background-clip: text; -webkit-text-fill-color: transparent }
.hero-v4 .hero-v__desc { color: rgba(255,255,255,.85) !important; margin-left: auto; margin-right: auto; max-width: 600px }
.hero-v4 .hero-v__badge { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.2) }
.hero-v4 .hero-v__btns { justify-content: center }
.hero-v4 .hero-v__glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(var(--c-rgb),.12); filter: blur(80px); top: 20%; left: 50%; transform: translateX(-50%); pointer-events: none; z-index: 1 }

/* ══════════════════════════════════════════════════════════════
   V5: ASYMMETRIC — tekst links groot, kleine image accent rechts
   ══════════════════════════════════════════════════════════════ */
.hero-v5 { background: var(--bg, #f8fafc) }
.hero-v5 .hero-v__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center }
.hero-v5 h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--ink) !important }
.hero-v5 h1 em { color: var(--c) }
.hero-v5 .hero-v__desc { color: var(--dim) }
.hero-v5 .hero-v__badge { background: var(--cl); color: var(--c) !important }
.hero-v5 .hero-v__img { position: relative; border-radius: 24px; overflow: hidden }
.hero-v5 .hero-v__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--c-rgb),.1), transparent); border-radius: 24px }
.hero-v5 .hero-v__img img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover }
@media(max-width:900px) { .hero-v5 .hero-v__grid { grid-template-columns: 1fr } }

/* ══════════════════════════════════════════════════════════════
   V6: BOTTOM WAVE — gradient hero met SVG wave onderaan
   ══════════════════════════════════════════════════════════════ */
.hero-v6 { background: linear-gradient(180deg, var(--cd) 0%, var(--c) 100%); padding-bottom: 100px; text-align: center }
.hero-v6 h1 { font-size: clamp(2rem, 5vw, 3.6rem); color: #fff !important !important }
.hero-v6 h1 em { color: rgba(255,255,255,.9) !important }
.hero-v6 .hero-v__desc { color: rgba(255,255,255,.85) !important !important; margin-left: auto; margin-right: auto }
.hero-v6 .hero-v__badge { background: rgba(255,255,255,.18) !important; color: #fff !important !important }
.hero-v6 .hero-v__btns { justify-content: center }
.hero-v6 .hero-v__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; z-index: 2 }
.hero-v6 .hero-v__wave svg { display: block; width: 100%; height: 100% }

/* ══════════════════════════════════════════════════════════════
   V7: DARK MINIMAL — donkere bg, accent glow, centered
   ══════════════════════════════════════════════════════════════ */
.hero-v7 { background: #0f172a; text-align: center }
.hero-v7::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; border-radius: 50%; background: rgba(var(--c-rgb),.1); filter: blur(100px); pointer-events: none }
.hero-v7 h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); color: #e2e8f0 !important }
.hero-v7 h1 em { background: linear-gradient(135deg, var(--c), var(--cl)); -webkit-background-clip: text; -webkit-text-fill-color: transparent }
.hero-v7 .hero-v__desc { color: #94a3b8 !important; margin-left: auto; margin-right: auto }
.hero-v7 .hero-v__badge { background: rgba(var(--c-rgb),.15); color: var(--c) !important; border: 1px solid rgba(var(--c-rgb),.25) }
.hero-v7 .hero-v__btns { justify-content: center }
.hero-v7 .hero-v__icon { margin: 36px auto 0; width: 100px; height: 100px; border-radius: 50%; background: rgba(var(--c-rgb),.1); border: 2px solid rgba(var(--c-rgb),.3); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--c); animation: hero-pulse 3s ease-in-out infinite }
@keyframes hero-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--c-rgb),.2) } 50% { box-shadow: 0 0 0 16px rgba(var(--c-rgb),0) } }

/* ══════════════════════════════════════════════════════════════
   V8: SIDE IMAGE DARK — donkere bg, grote image links, tekst rechts
   ══════════════════════════════════════════════════════════════ */
.hero-v8 { background: #0f172a }
.hero-v8 .hero-v__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.hero-v8 .hero-v__img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.4) }
.hero-v8 .hero-v__img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover }
.hero-v8 h1 { font-size: clamp(2rem, 4vw, 3rem); color: #e2e8f0 !important }
.hero-v8 h1 em { color: var(--c) }
.hero-v8 .hero-v__desc { color: #94a3b8 !important }
.hero-v8 .hero-v__badge { background: rgba(var(--c-rgb),.15); color: var(--c) !important; border: 1px solid rgba(var(--c-rgb),.25) }
@media(max-width:900px) { .hero-v8 .hero-v__grid { grid-template-columns: 1fr } }

/* ══════════════════════════════════════════════════════════════
   SHARED BUTTONS (all variants)
   ══════════════════════════════════════════════════════════════ */
.hero-v .btn-hero { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-weight: 800; font-size: .9rem; transition: all .25s; border: none; cursor: pointer; font-family: inherit; text-decoration: none }
.hero-v .btn-hero--primary { background: var(--c); color: #fff; box-shadow: 0 4px 20px rgba(var(--c-rgb),.3) }
.hero-v .btn-hero--primary:hover { box-shadow: 0 8px 32px rgba(var(--c-rgb),.45); transform: translateY(-2px) }
.hero-v .btn-hero--outline { background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff }
.hero-v .btn-hero--outline:hover { border-color: var(--c); color: var(--c) }
.hero-v .btn-hero--white { background: #fff; color: var(--cd) }
.hero-v .btn-hero--white:hover { background: var(--cl); transform: translateY(-2px) }

/* Light variant buttons */
.hero-v5 .btn-hero--outline { border-color: var(--c); color: var(--c) }
.hero-v5 .btn-hero--outline:hover { background: var(--cl) }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .hero-v { padding: 48px 0 40px; min-height: 400px }
  .hero-v h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important }
  .hero-v__btns { flex-direction: column; align-items: stretch }
  .hero-v .btn-hero { justify-content: center }
  .hero-v2 .hero-v__stats { gap: 24px; flex-wrap: wrap }
}

/* ══════════════════════════════════════════════════════════════
   RESPECT REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce) {
  .hero-v7 .hero-v__icon { animation: none }
}

/* ══════════════════════════════════════════════════════════════
   BUTTON CONTRAST FIX — op donkere hero's moet primary btn WIT zijn
   ══════════════════════════════════════════════════════════════ */
.hero-v1 .btn-hero--primary,
.hero-v2 .btn-hero--primary,
.hero-v3 .btn-hero--primary,
.hero-v4 .btn-hero--primary,
.hero-v6 .btn-hero--primary,
.hero-v7 .btn-hero--primary,
.hero-v8 .btn-hero--primary {
  background: #fff !important;
  color: var(--cd, #0f172a) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.15) !important;
}
.hero-v1 .btn-hero--primary:hover,
.hero-v2 .btn-hero--primary:hover,
.hero-v3 .btn-hero--primary:hover,
.hero-v4 .btn-hero--primary:hover,
.hero-v6 .btn-hero--primary:hover,
.hero-v7 .btn-hero--primary:hover,
.hero-v8 .btn-hero--primary:hover {
  background: var(--cl, #f1f5f9) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2) !important;
}
/* Outline button: altijd zichtbaar op donkere bg */
.hero-v1 .btn-hero--outline,
.hero-v2 .btn-hero--outline,
.hero-v3 .btn-hero--outline,
.hero-v4 .btn-hero--outline,
.hero-v6 .btn-hero--outline,
.hero-v7 .btn-hero--outline,
.hero-v8 .btn-hero--outline {
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   ALLE HERO VARIANTEN: tekst ALTIJD wit op donkere bg
   ══════════════════════════════════════════════════════════════ */
.hero-v1 h1, .hero-v2 h1, .hero-v3 h1, .hero-v4 h1, .hero-v6 h1, .hero-v7 h1, .hero-v8 h1 { color: #fff !important }
.hero-v1 p, .hero-v2 p, .hero-v3 p, .hero-v4 p, .hero-v6 p, .hero-v7 p, .hero-v8 p { color: rgba(255,255,255,.85) !important }
.hero-v1 .hero-v__badge, .hero-v2 .hero-v__badge, .hero-v3 .hero-v__badge, .hero-v4 .hero-v__badge, .hero-v6 .hero-v__badge, .hero-v7 .hero-v__badge, .hero-v8 .hero-v__badge { color: #fff !important }