@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&display=swap');

.svpa-hero{
  --svpa-ink:#0a0a0a;
  --svpa-red:#e31010;
  --svpa-red2:#b50d0d;
  --svpa-white:#ffffff;
  --svpa-ease:cubic-bezier(.16,1,.3,1);

  --svpa-hero-min-h:100vh;
  --svpa-content-max-w:1340px;
  --svpa-content-pad-x:28px;
  --svpa-content-pad-bottom:160px;

  --svpa-overlay-grad:linear-gradient(105deg,rgba(5,3,3,.85) 0%,rgba(10,6,6,.65) 50%,rgba(30,5,5,.3) 100%);
  --svpa-overlay-solid:rgba(10,10,10,0.55);

  --svpa-streak-color:rgba(255,80,80,.5);
  --svpa-streak-speed:4s;
  --svpa-streak-thickness:1px;

  --svpa-pre-color:rgba(255,255,255,.85);
  --svpa-pre-accent:#e31010;
  --svpa-head-em-stroke:rgba(255,255,255,.96);
  --svpa-head-strong-color:#e31010;
  --svpa-sub-color:rgba(255,255,255,.85);

  --svpa-btn-gap:14px;

  --svpa-btn-red-bg:#e31010;
  --svpa-btn-red-color:#ffffff;
  --svpa-btn-red-border:#e31010;
  --svpa-btn-red-bg-hover:#b50d0d;
  --svpa-btn-red-color-hover:#ffffff;
  --svpa-btn-red-border-hover:#b50d0d;

  --svpa-btn-ghost-bg:transparent;
  --svpa-btn-ghost-color:#ffffff;
  --svpa-btn-ghost-border:rgba(255,255,255,.35);
  --svpa-btn-ghost-bg-hover:rgba(255,255,255,.08);
  --svpa-btn-ghost-color-hover:#ffffff;
  --svpa-btn-ghost-border-hover:#ffffff;

  --svpa-btn-dark-bg:#0a0a0a;
  --svpa-btn-dark-color:#ffffff;
  --svpa-btn-dark-border:#0a0a0a;
  --svpa-btn-dark-bg-hover:#2a2a2a;
  --svpa-btn-dark-color-hover:#ffffff;
  --svpa-btn-dark-border-hover:#2a2a2a;

  --svpa-dot-size:5px;
  --svpa-dot-gap:8px;
  --svpa-dot-color:rgba(255,255,255,.25);
  --svpa-dot-active-color:#e31010;

  --svpa-stats-bg:rgba(10,10,10,.8);
  --svpa-stats-border-top:rgba(255,255,255,.07);
  --svpa-stats-divider:rgba(255,255,255,.06);
  --svpa-stats-img-size:48px;
  --svpa-stats-n-color:#e31010;
  --svpa-stats-l-color:rgba(255,255,255,.8);
  --svpa-stats-hover-bg:rgba(227,16,16,.07);

  position:relative;
  height:var(--svpa-hero-min-h);
  min-height:700px;
  overflow:hidden;
  background:var(--svpa-ink);
  font-family:'Rajdhani',sans-serif;
  color:var(--svpa-white);
}
.svpa-hero *,
.svpa-hero *::before,
.svpa-hero *::after{box-sizing:border-box;}
.svpa-hero img{display:block;max-width:100%;}

/* ── Slides ────────────────────────────────────────── */
.svpa-hero-slides{position:absolute;inset:0;}
.svpa-hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.8s ease;
}
.svpa-hero-slide.svpa-on{opacity:1;z-index:1;}
.svpa-hero-slide img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.07);
  transition:transform 9s linear;
}
.svpa-hero-slide.svpa-on img{transform:scale(1);}

/* Slide-mode transition variant */
.svpa-hero[data-transition="slide"] .svpa-hero-slide{transform:translateX(100%);opacity:1;transition:transform 1.2s ease;}
.svpa-hero[data-transition="slide"] .svpa-hero-slide.svpa-on{transform:translateX(0);}
.svpa-hero[data-transition="slide"] .svpa-hero-slide.svpa-prev{transform:translateX(-100%);}
.svpa-hero[data-transition="slide"] .svpa-hero-slide img{transform:none;transition:none;}

/* ── Overlay ───────────────────────────────────────── */
.svpa-hero-overlay{
  position:absolute;inset:0;
  z-index:1;
  background:var(--svpa-overlay-grad);
  pointer-events:none;
}
.svpa-hero-overlay--solid{background:var(--svpa-overlay-solid);}

/* ── Streaks (horizontal moving lines) ─────────────── */
.svpa-hero-streaks{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.svpa-streak{
  position:absolute;
  height:var(--svpa-streak-thickness);
  background:linear-gradient(90deg,transparent,var(--svpa-streak-color),transparent);
  animation:svpa-streakMove var(--svpa-streak-speed) ease-in-out infinite;
  opacity:0;
}
@keyframes svpa-streakMove{
  0%   { left:-60%; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { left:120%; opacity:0; }
}

/* ── Body / Content ────────────────────────────────── */
.svpa-hero-body{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--svpa-content-pad-x) var(--svpa-content-pad-bottom);
  max-width:var(--svpa-content-max-w);
  margin:0 auto;
}
.svpa-hero[data-vpos="top"]    .svpa-hero-body{justify-content:flex-start;padding-top:120px;padding-bottom:0;}
.svpa-hero[data-vpos="center"] .svpa-hero-body{justify-content:center;padding-bottom:0;}
.svpa-hero[data-align="center"] .svpa-hero-body{align-items:center;text-align:center;}

.svpa-hero-pre{
  font-family:'Orbitron',monospace;
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--svpa-pre-color);
  margin:0 0 16px;
  animation:svpa-fadeUp .8s var(--svpa-ease) .2s both;
}
.svpa-hero-pre span{color:var(--svpa-pre-accent);}

.svpa-hero-h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(5rem,12vw,10rem);
  line-height:.9;
  letter-spacing:2px;
  color:var(--svpa-white);
  margin:0;
  animation:svpa-fadeUp .9s var(--svpa-ease) .4s both;
}
.svpa-hero-h1 em{
  display:block;
  color:transparent;
  -webkit-text-stroke:1.5px var(--svpa-head-em-stroke);
  font-style:normal;
}
.svpa-hero-h1 strong{
  display:block;
  color:var(--svpa-head-strong-color);
  font-weight:inherit;
}

.svpa-hero-sub{
  font-size:clamp(.92rem,1.5vw,1.05rem);
  font-weight:400;
  color:var(--svpa-sub-color);
  max-width:480px;
  line-height:1.8;
  margin:24px 0 38px;
  animation:svpa-fadeUp .9s var(--svpa-ease) .6s both;
}
.svpa-hero[data-align="center"] .svpa-hero-sub{margin-left:auto;margin-right:auto;}

.svpa-hero-btns{
  display:flex;
  gap:var(--svpa-btn-gap);
  flex-wrap:wrap;
  animation:svpa-fadeUp .9s var(--svpa-ease) .8s both;
}
.svpa-hero[data-align="center"] .svpa-hero-btns{justify-content:center;}

@keyframes svpa-fadeUp{
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:none; }
}

/* ── Buttons ───────────────────────────────────────── */
.svpa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Rajdhani',sans-serif;
  font-size:.82rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:14px 28px;
  border:1.5px solid transparent;
  border-radius:0;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.svpa-btn::after{
  content:'';position:absolute;top:0;left:-120%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .55s var(--svpa-ease);
  pointer-events:none;
}
.svpa-btn:hover::after{left:140%;}
.svpa-btn svg,.svpa-btn i{width:1em;height:1em;font-size:1em;}

.svpa-btn--red{
  background:var(--svpa-btn-red-bg);
  color:var(--svpa-btn-red-color);
  border-color:var(--svpa-btn-red-border);
}
.svpa-btn--red:hover{
  background:var(--svpa-btn-red-bg-hover);
  color:var(--svpa-btn-red-color-hover);
  border-color:var(--svpa-btn-red-border-hover);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(227,16,16,.28);
}
.svpa-btn--ghost{
  background:var(--svpa-btn-ghost-bg);
  color:var(--svpa-btn-ghost-color);
  border-color:var(--svpa-btn-ghost-border);
}
.svpa-btn--ghost:hover{
  background:var(--svpa-btn-ghost-bg-hover);
  color:var(--svpa-btn-ghost-color-hover);
  border-color:var(--svpa-btn-ghost-border-hover);
  transform:translateY(-2px);
}
.svpa-btn--dark{
  background:var(--svpa-btn-dark-bg);
  color:var(--svpa-btn-dark-color);
  border-color:var(--svpa-btn-dark-border);
}
.svpa-btn--dark:hover{
  background:var(--svpa-btn-dark-bg-hover);
  color:var(--svpa-btn-dark-color-hover);
  border-color:var(--svpa-btn-dark-border-hover);
  transform:translateY(-2px);
}

/* ── Dots ──────────────────────────────────────────── */
.svpa-hero-dots{
  position:absolute;
  right:36px;
  bottom:200px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:var(--svpa-dot-gap);
  animation:svpa-fadeUp .8s var(--svpa-ease) 1s both;
}
.svpa-hero[data-dots="bottom"] .svpa-hero-dots{
  flex-direction:row;
  right:auto;bottom:120px;
  left:50%;transform:translateX(-50%);
}
.svpa-hero[data-stats="off"][data-dots="bottom"] .svpa-hero-dots{bottom:40px;}
.svpa-hero[data-dots="left"] .svpa-hero-dots{right:auto;left:36px;}
.svpa-hero[data-dots="top"] .svpa-hero-dots{
  flex-direction:row;
  right:auto;bottom:auto;
  top:40px;left:50%;transform:translateX(-50%);
}

.svpa-dot{
  width:var(--svpa-dot-size);
  height:var(--svpa-dot-size);
  border-radius:50%;
  background:var(--svpa-dot-color);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .3s,transform .3s;
}
.svpa-dot.svpa-on{
  background:var(--svpa-dot-active-color);
  transform:scale(1.5);
}

/* ── Stats Strip ───────────────────────────────────── */
.svpa-hero-stats{
  position:absolute;
  bottom:0;left:0;right:0;
  z-index:3;
  background:var(--svpa-stats-bg);
  border-top:1px solid var(--svpa-stats-border-top);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:svpa-fadeUp .8s var(--svpa-ease) 1.2s both;
}
/* Outside mode: rendered as a sibling below the hero, in normal flow.
   Drops the absolute positioning + the glass-blur effect that only makes
   sense as an overlay on the hero image. Uses a solid dark background so
   it reads as a section under the hero, not a translucent overlay. */
.svpa-hero-stats--outside{
  position:static;
  bottom:auto;left:auto;right:auto;
  z-index:auto;
  background:#0a0a0a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
}
/* When stats are outside, dots can sit at the natural bottom of the hero. */
.svpa-hero[data-stats-pos="outside"] .svpa-hero-dots{bottom:40px;}
.svpa-hero[data-stats-pos="outside"][data-dots="bottom"] .svpa-hero-dots{bottom:24px;}
.svpa-hero[data-stats-pos="outside"][data-dots="top"] .svpa-hero-dots{bottom:auto;top:40px;}
.svpa-hero-stats-in{
  max-width:var(--svpa-content-max-w);
  margin:0 auto;
  padding:0 var(--svpa-content-pad-x);
  display:flex;
  align-items:stretch;
}
.svpa-hstat{
  flex:1;flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;
  border-right:1px solid var(--svpa-stats-divider);
  transition:background .25s;
}
.svpa-hstat:last-child{border-right:none;}
.svpa-hstat:hover{background:var(--svpa-stats-hover-bg);}
.svpa-hstat-img{
  width:var(--svpa-stats-img-size);
  height:var(--svpa-stats-img-size);
  object-fit:cover;
  flex-shrink:0;
  transition:transform .3s;
}
.svpa-hstat:hover .svpa-hstat-img{transform:scale(1.1);}
.svpa-hstat-n{
  font-family:'Orbitron',monospace;
  font-size:1.5rem;font-weight:700;
  color:var(--svpa-stats-n-color);
  line-height:1;
  letter-spacing:1px;
}
.svpa-hstat-l{
  font-family:'Orbitron',monospace;
  font-size:.55rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--svpa-stats-l-color);
  margin-top:3px;
}

/* ── Tablet ────────────────────────────────────────── */
@media (max-width:1100px){
  .svpa-hero{
    --svpa-content-pad-x:24px;
    --svpa-content-pad-bottom:140px;
    min-height:640px;
  }
  .svpa-hero-h1{font-size:clamp(3.4rem,9vw,6rem);}
  .svpa-hero-sub{max-width:420px;}
  .svpa-hero-dots{right:24px;bottom:180px;}
  .svpa-hero[data-dots="left"] .svpa-hero-dots{left:24px;}
  .svpa-hstat{padding:14px 18px;}
  .svpa-hstat-img{width:42px;height:42px;}
  .svpa-hstat-n{font-size:1.3rem;}
}

/* ── Mobile (≤768px) — 2-col stats grid kills the horizontal scrollbar ── */
@media (max-width:768px){
  .svpa-hero{
    --svpa-hero-min-h:100svh;
    --svpa-content-pad-x:18px;
    --svpa-content-pad-bottom:220px;
    min-height:560px;
  }
  .svpa-hero-body{padding-top:90px;}
  .svpa-hero[data-vpos="top"] .svpa-hero-body{padding-top:90px;}
  .svpa-hero-pre{font-size:.55rem;}
  .svpa-hero-h1{font-size:clamp(3rem,12vw,5.5rem);letter-spacing:2px;}
  .svpa-hero-sub{margin:18px 0 28px;font-size:.92rem;line-height:1.7;}

  /* Buttons stack full-width on narrow screens */
  .svpa-hero-btns{gap:10px;flex-direction:column;align-items:stretch;}
  .svpa-hero-btns .svpa-btn{width:100%;padding:13px 22px;font-size:.78rem;}
  .svpa-hero[data-align="center"] .svpa-hero-btns{align-items:stretch;}

  /* Dots — keep tight to the edge so they don't overlap content */
  .svpa-hero-dots{right:12px;bottom:220px;gap:6px;}
  .svpa-hero[data-dots="left"] .svpa-hero-dots{left:12px;right:auto;}
  .svpa-hero[data-dots="bottom"] .svpa-hero-dots{bottom:200px;}
  .svpa-hero[data-stats="off"][data-dots="bottom"] .svpa-hero-dots{bottom:24px;}

  /* Stats: 2-col grid instead of horizontal scroll (kills the overflow bar) */
  .svpa-hero-stats-in{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:visible;
    padding:0 var(--svpa-content-pad-x);
  }
  .svpa-hstat{
    flex:unset;
    padding:12px 14px;
    gap:10px;
    border-right:1px solid var(--svpa-stats-divider);
    min-width:0;
  }
  .svpa-hstat:nth-child(2n){border-right:none;}
  .svpa-hstat:nth-child(-n+2):not(:nth-last-child(-n+2)){border-bottom:1px solid var(--svpa-stats-divider);}
  .svpa-hstat-img{width:36px;height:36px;}
  .svpa-hstat-n{font-size:1.15rem;letter-spacing:.5px;}
  .svpa-hstat-l{font-size:.5rem;}
}

/* ── Very small phones (≤420px) — give buttons a bit more breathing room ── */
@media (max-width:420px){
  .svpa-hero{--svpa-content-pad-bottom:210px;}
  .svpa-hero-h1{font-size:clamp(2.6rem,11vw,4.5rem);}
  .svpa-hstat{padding:10px 12px;gap:8px;}
  .svpa-hstat-img{width:32px;height:32px;}
  .svpa-hstat-n{font-size:1.05rem;}
  .svpa-hstat-l{font-size:.46rem;letter-spacing:.12em;}
}
@media (prefers-reduced-motion:reduce){
  .svpa-hero-slide,
  .svpa-hero-slide img,
  .svpa-streak,
  .svpa-hero-pre,
  .svpa-hero-h1,
  .svpa-hero-sub,
  .svpa-hero-btns,
  .svpa-hero-dots,
  .svpa-hero-stats{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}