:root{
  --overlay-pad: clamp(14px, 2.5vw, 24px);
  --card-gap: clamp(16px, 3.2vw, 40px);
  --text: #fff;
  --muted: rgba(255,255,255,.78);
  --line: rgba(255,255,255,.22);
  --progress: rgba(255,255,255,.95);
  /* --accent-1: #e2ff6b;  Defined by Elementor Control */

  /* Nieuw voor alignment */
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1600px;
}

/* ===== HERO WRAPPER ===== */
.hero-electra{
  position:relative;
  width:100%;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  color:var(--text);
  background:#000;
}
@supports not (height: 100svh){
  .hero-electra{ height:100vh; min-height:100vh; }
}

/* ===== VIDEO LAAG ===== */
.hero-video{ position:absolute; inset:0; z-index:0; }
.hero-video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:contrast(1.02) saturate(1.05);
}

/* ===== ENIGE OVERLAY: onder→boven fade ===== */
.hero-gradient-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.75) 32%,
    rgba(0,0,0,0)   58%
  );
}

/* ===== subtiele filmgrain ===== */
.hero-noise{
  position:absolute; inset:-5%; z-index:2; pointer-events:none;
  mix-blend:soft-light; opacity:.07;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-10px,6px)}
  50%{transform:translate(5px,-8px)}
  75%{transform:translate(12px,8px)}
  100%{transform:translate(0,0)}
}

/* ===== HEADLINE ===== */
.hero-headline{
  position:absolute;
  bottom: calc(var(--overlay-pad) + 140px);
  z-index:4;
  text-align:left;
  padding-right:24px;
  max-width:min(680px, 90vw);
}
.hero-headline h1{
  margin:0 0 .75rem;
  font-size: clamp(28px, 4.5vw, 58px);
  line-height:1.08; font-weight:700;
  color: #fff;
}
.hero-headline .accent{
  background:linear-gradient(90deg, var(--accent-1, #e2ff6b), #c6ff41);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(172,255,77,.15);
}
.hero-headline .sub{
  margin:.25rem 0 1rem;
  max-width: 60ch;
  color:var(--muted);
  font-size: 17px;
  line-height: 1.35;
  margin-bottom:30px;
}

/* ===== Availability pill ===== */
.rw-availability{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.42rem .8rem; border-radius:9999px;
  background-color: rgba(255, 255, 255, 0.3);
  font-size:.875rem; font-weight:500; line-height:1;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  margin-bottom:20px;
}
.rw-availability, .rw-availability *{
  color:#fff !important;
  line-height:1 !important;
  font-size:inherit !important;
}
.rw-availability p, .rw-availability div, .rw-availability span{
  margin:0 !important; padding:0 !important; display:inline !important;
}
.rw-availability :is(.fomo-dot,.dot,.status-dot,.availability-dot){ display:none !important; }
.rw-availability::before{
  content:""; width:.55em; height:.55em; margin-right:.6em;
  border-radius:50%; background:orange;
  box-shadow:0 0 0 0 rgba(255,165,0,.7);
  animation:fomo-pulse 2s infinite;
  flex-shrink:0;
}
@keyframes fomo-pulse{
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,165,0,.7); }
  70%  { transform:scale(1.2); box-shadow:0 0 0 10px rgba(255,165,0,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,165,0,0); }
}

/* ===== CTA’s ===== */
.cta-row{
  display:flex; gap:30px; flex-wrap:wrap; align-items:center; justify-content:flex-start;
}
.hero-electra .button-arrow .elementor-button{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:9999px; text-decoration:none;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
}
.hero-electra .button-arrow .elementor-button-icon img,
.hero-electra .button-arrow .elementor-button-icon svg { filter: none; } /* Reset filter */

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:1.06rem; font-weight:400; color:white !important;
  transition: color .25s ease;
  cursor: pointer;
  text-decoration: none;
}

/* ===== HERO OVERLAY ===== */
.hero-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding: var(--overlay-pad) var(--gutter);
  display:grid; place-items:center;
}
.cards{
  width:100%; max-width:var(--container);
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap); align-items:end;
  margin-inline:auto;
}
.card{ min-width:0; opacity:.38; transition:opacity .35s ease, transform .25s ease; cursor:pointer; user-select:none; }
.card.is-active{ opacity:1; transform: translateY(-2px); }
.thumb-labels{ margin-bottom:8px; min-height:22px; }
.pill{
  display:inline-block; font-size:12px; line-height:1;
  padding:7px 10px; color:#cfeea2;
  background: rgba(158,219,30,.16); border:1px solid rgba(226,255,107,.28);
  border-radius:999px; letter-spacing:.2px;
}
.progress{
  height:2px; background:var(--line); overflow:hidden; border-radius:2px; margin-bottom:10px; position:relative;
}
.progress .fill{
  width:100%; height:100%; background:var(--progress); display:block;
  transform-origin:left center; transform:scaleX(0);
  will-change: transform; transform: translateZ(0) scaleX(0);
}
.info h3.line {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

/* ===== Preview rechts-onder ===== */
.hero-preview{
  position:absolute; bottom:150px;
  width: clamp(200px, 19vw, 80px); aspect-ratio: 16/9;
  border-radius: 12px; overflow: hidden; background: #111;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  z-index: 6; cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-preview video{ width:100%; height:100%; object-fit:cover; }
.hero-preview .preview-label{
  position:absolute; bottom:6px; right:8px;
  font-size:12px; font-weight:600; letter-spacing:.2px;
  background:rgba(0,0,0,155); color:#fff; padding:2px 6px; border-radius:6px;
}

/* ===== Desktop Hard-guard ===== */
@media (min-width: 901px){
  .hero-overlay .cards{
    display:grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--card-gap) !important;
    align-items:end !important;
  }
  .hero-overlay .card{
    min-width:0 !important;
    opacity:.38 !important;
    transform:none !important;
  }

  /* Align headline en preview met cards */
  .hero-headline{
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    max-width: min(680px, calc(var(--container) - 2 * var(--gutter)));
  }
  .hero-preview{
    right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
}

/* ===== Mobiel ===== */
@media (max-width: 900px){
  .hero-preview{ display:none; }

  .hero-overlay .cards{
    display:flex !important;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x;
    padding:0 10px 6px;
    scrollbar-width:none;
  }
  .hero-overlay .cards::-webkit-scrollbar{ display:none; }
  .hero-overlay .card{
    flex:0 0 92vw;
    scroll-snap-align:center;
    opacity:1;
    transform:none;
  }

  .hero-gradient-fade{
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 12%, rgba(0,0,0,.15) 26%, rgba(0,0,0,0) 40%),
      linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.10) 65%, rgba(0,0,0,0) 80%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 82%, 100% 65%;
    background-position: top, bottom;
  }

  .progress{ height:3px; background:rgba(255,255,255,.28); margin-bottom:10px; }
  .progress .fill{ background:rgba(255,255,255,.95); }

  .hero-headline{
    left:0; right:0; padding:0 14px;
    max-width:none;
    bottom: calc(var(--overlay-pad) + 170px);
    text-align:center;
  }
  .rw-availability{ margin-inline:auto; font-size:15px !important; padding:.6rem .9rem; }
  .hero-headline h1{ font-size:37px; line-height:1.1; }
  .hero-headline .sub{ font-size:17px; line-height:1.35; max-width:60ch; margin:10px auto 22px; }

  .cta-row{ justify-content:center; flex-direction:column; align-items:stretch; gap:10px; max-width:560px; margin-inline:auto; }
  .hero-electra .button-arrow .elementor-button{ width:100%; justify-content:center; text-align:center; }
  .link-arrow{ display:flex; justify-content:center; width:100%; padding:10px 18px; border-radius:9999px; background:rgba(0,0,0,.22); }
}

@media (max-width: 560px){
  .hero-headline{ bottom: calc(var(--overlay-pad) + 160px); }
}