:root{
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.22);
  --progress:rgba(255,255,255,.95);
  --accent-1:#e2ff6b;
  --accent-2:#c6ff41;
  --pill-text:#cfeea2;
  --pill-bg:rgba(158,219,30,.16);
  --pill-border:rgba(226,255,107,.28);
  --cta1-bg:rgba(0,0,0,.35);
  --cta1-text:#ffffff;
  --cta2-text:#ffffff;
  --preview-bg:rgba(0,0,0,.65);
  --preview-text:#ffffff;

  --container:1600px;
  --gutter:48px;
  --head-max:680px;
  --head-bottom:140px;

  /* Cards */
  --card-pad-t:12px; --card-pad-r:14px; --card-pad-b:12px; --card-pad-l:14px;
  --card-radius:12px;
  --card-border:rgba(255,255,255,.14);
  --card-border-w:1px;
  --card-bg-from:rgba(255,255,255,.06);
  --card-bg-to:rgba(255,255,255,.02);
  --card-shadow:30; /* intensity 0-60 */
  --progress-h:3px;

  /* Preview */
  --preview-radius:12px;
  --preview-border:rgba(255,255,255,.14);
  --preview-border-w:1px;
  --preview-shadow:36;
  --preview-bottom:150px;

  /* Gradient */
  --grad-top-from:rgba(0,0,0,.85);
  --grad-top-mid:rgba(0,0,0,.75);
  --grad-top-to:rgba(0,0,0,0);
}

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

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

/* OVERLAY GRADIENT */
.rw-hero-gradient{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, var(--grad-top-from) 0%, var(--grad-top-mid) 32%, var(--grad-top-to) 58%);
}

/* HEAD */
.rw-hero-head{
  position:absolute; bottom: calc(14px + var(--head-bottom)); z-index:4;
  text-align:left; padding-right:24px; max-width:min(var(--head-max),90vw);
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.rw-hero-title{ margin:0 0 .75rem; font-size:clamp(28px,4.5vw,58px); line-height:1.08; font-weight:700; }
.rw-hero-title .accent{
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px color-mix(in oklab, var(--accent-1) 25%, transparent);
}
.rw-hero-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:.55rem .9rem;
  border-radius:9999px; background:color-mix(in oklab, var(--text) 18%, transparent);
  border:1px solid color-mix(in oklab, var(--text) 22%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--text);
  font-size:.9rem; font-weight:600; letter-spacing:.2px;
  box-shadow:0 6px 20px rgba(0,0,0,.18) inset, 0 1px 0 rgba(255,255,255,.08);
}
.rw-availability::before{
  content:""; width:.55em; height:.55em; margin-right:.55em; border-radius:50%;
  background:var(--accent-1);
  box-shadow:0 0 12px color-mix(in oklab, var(--accent-1) 55%, transparent);
}

/* CTA’s */
.rw-cta-row{ display:flex; gap:16px 24px; flex-wrap:wrap; align-items:center; }
.rw-hero .button-arrow .elementor-button{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid color-mix(in oklab, var(--cta1-text) 18%, transparent);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.rw-hero .button-arrow .elementor-button:hover{ transform: translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.32); }
.rw-hero .button-arrow .elementor-button-icon img{ filter:brightness(0) invert(1); }
.rw-hero .link-arrow{ display:inline-flex; align-items:center; gap:10px; font-size:1.06rem; color:var(--cta2-text) !important; }
.rw-hero .link-arrow .arrow{ transition: transform .2s ease; }
.rw-hero .link-arrow:hover .arrow{ transform: translateX(3px); }

/* CARDS */
.rw-hero-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding: 14px var(--gutter); display:grid; place-items:center; }
.rw-cards{
  width:100%; max-width:var(--container);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap: clamp(16px,3.2vw,40px); align-items:end; margin-inline:auto;
}
.rw-card{
  min-width:0; opacity:.5; cursor:pointer; user-select:none;
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius:var(--card-radius);
  background:linear-gradient(180deg, var(--card-bg-from), var(--card-bg-to));
  border:var(--card-border-w) solid var(--card-border);
  padding:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);
  box-shadow: 0 10px calc(var(--card-shadow) * 1px) rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.rw-card.is-active{
  opacity:1; transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent-1) 36%, transparent);
  box-shadow: 0 14px calc((var(--card-shadow) + 12) * 1px) rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklab, var(--accent-1) 25%, transparent) inset;
}
.rw-card .thumb-labels{ margin-bottom:8px; min-height:22px; }
.rw-card .pill{
  display:inline-block; font-size:12px; line-height:1; padding:7px 10px; color:var(--pill-text);
  background: var(--pill-bg); border:1px solid var(--pill-border); border-radius:999px; letter-spacing:.2px;
}
.rw-card .progress{ height:var(--progress-h); background:var(--line); overflow:hidden; border-radius:3px; margin-bottom:10px; position:relative; }
.rw-card .progress .fill{ width:100%; height:100%; background:var(--progress); display:block; transform-origin:left center; transform:scaleX(0); will-change:transform; }
.rw-card .info .line{ margin:0; font-weight:700; letter-spacing:.2px; }

/* PREVIEW */
.rw-hero-preview{
  position:absolute; bottom:var(--preview-bottom);
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  width: clamp(200px, 19vw, 360px); aspect-ratio:16/9;
  border-radius:var(--preview-radius); overflow:hidden; background:#0f0f10;
  border:var(--preview-border-w) solid var(--preview-border);
  box-shadow:0 12px calc(var(--preview-shadow) * 1px) rgba(0,0,0,.35);
  z-index:6; cursor:pointer; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.rw-hero-preview:hover{ transform: translateY(-2px); box-shadow:0 16px calc((var(--preview-shadow) + 6) * 1px) rgba(0,0,0,.42); }
.rw-hero-preview .preview-label{
  position:absolute; bottom:6px; right:8px; font-size:12px; font-weight:700; letter-spacing:.2px;
  background:var(--preview-bg); color:var(--preview-text); padding:2px 8px; border-radius:8px;
}
.rw-hero-preview img, .rw-hero-preview video{ width:100%; height:100%; object-fit:cover; display:block; }

/* DESKTOP guard */
@media (min-width:901px){
  .rw-cards{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; }
  .rw-card{ min-width:0 !important; }
}

/* MOBIEL */
@media (max-width:900px){
  .rw-hero-preview{ display:none; }
  .rw-cards{ display:flex !important; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-x; padding:0 10px 8px; scrollbar-width:none; }
  .rw-cards::-webkit-scrollbar{ display:none; }
  .rw-card{ flex:0 0 92vw; scroll-snap-align:center; opacity:1; transform:none; }
  .rw-hero-gradient{
    background-image:
      linear-gradient(to bottom, var(--grad-top-from) 0%, color-mix(in oklab, var(--grad-top-from) 55%, transparent) 12%, color-mix(in oklab, var(--grad-top-from) 15%, transparent) 26%, rgba(0,0,0,0) 40%),
      linear-gradient(to top, var(--grad-top-from) 0%, color-mix(in oklab, var(--grad-top-mid) 85%, transparent) 38%, color-mix(in oklab, var(--grad-top-to) 20%, transparent) 65%, rgba(0,0,0,0) 80%);
    background-repeat:no-repeat,no-repeat; background-size:100% 82%, 100% 65%; background-position:top,bottom;
  }
  .rw-hero-head{
    left:0; right:0; padding:0 14px; max-width:none; bottom: calc(14px + 170px); text-align:center;
  }
  .rw-availability{ margin-inline:auto; }
  .rw-hero-title{ font-size:37px; line-height:1.1; }
  .rw-hero-sub{ font-size:17px; line-height:1.35; max-width:60ch; margin:10px auto 22px; }
  .rw-cta-row{ justify-content:center; flex-direction:column; align-items:stretch; gap:10px; max-width:560px; margin-inline:auto; }
  .rw-hero .button-arrow .elementor-button{ width:100%; justify-content:center; text-align:center; }
  .rw-hero .link-arrow{ display:flex; justify-content:center; width:100%; padding:10px 18px; border-radius:9999px; background:color-mix(in oklab, var(--text) 10%, transparent); }
}
@media (max-width:560px){
  .rw-hero-head{ bottom: calc(14px + 160px); }
}