/* EWEW 2026 hero carousel stack recovery — v3.4.2
   This file is deliberately separate from styles.css so Hostinger/CDN caches
   cannot keep the old non-slider layout. */
.hero.hero-carousel{
  --hero-transition:1100ms;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:var(--rift,#06203D)!important;
  color:#fff!important;
}
.hero.hero-carousel>.hero-media{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.hero.hero-carousel>.hero-media>.hero-slide{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  z-index:0!important;
  transition:opacity var(--hero-transition,1100ms) ease,visibility 0s linear var(--hero-transition,1100ms)!important;
  will-change:opacity;
}
.hero.hero-carousel>.hero-media>.hero-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
  transition-delay:0s!important;
}
.hero.hero-carousel>.hero-media>.hero-slide>img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:var(--hero-focus,center center)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:scale(1.045);
  transition:transform 9s ease!important;
  filter:saturate(1.04) contrast(1.02);
}
.hero.hero-carousel>.hero-media>.hero-slide.is-active>img{transform:scale(1)}
.hero.hero-carousel>.hero-slider-shade,
.hero.hero-carousel>.hero-grid-bg{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
}
.hero.hero-carousel>.hero-slider-shade{
  z-index:2!important;
  background:
    linear-gradient(90deg,rgba(2,20,43,.99) 0%,rgba(2,23,49,.96) 27%,rgba(3,28,56,.78) 47%,rgba(3,28,56,.33) 67%,rgba(2,18,39,.18) 82%,rgba(2,18,39,.34) 100%),
    linear-gradient(180deg,rgba(1,16,34,.30),transparent 34%,rgba(1,14,31,.38) 100%)!important;
}
.hero.hero-carousel>.hero-grid-bg{z-index:3!important}
.hero.hero-carousel>.hero-inner{position:relative!important;z-index:5!important}
.hero.hero-carousel>.wave-wrap{position:relative!important;z-index:6!important;pointer-events:none!important}
.hero.hero-carousel>.hero-arrow{
  position:absolute!important;
  top:47%!important;
  z-index:7!important;
  width:56px!important;
  height:56px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(2,22,47,.48)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
  transition:background .2s,border-color .2s,transform .2s!important;
  touch-action:manipulation;
}
.hero.hero-carousel>.hero-arrow:hover,
.hero.hero-carousel>.hero-arrow:focus-visible{
  background:rgba(15,123,206,.72)!important;
  border-color:rgba(255,255,255,.75)!important;
  outline:none!important;
  transform:translateY(-2px);
}
.hero.hero-carousel>.hero-arrow svg{width:28px!important;height:28px!important}
.hero.hero-carousel>.hero-arrow-prev{left:clamp(12px,2.3vw,42px)!important}
.hero.hero-carousel>.hero-arrow-next{right:clamp(12px,2.3vw,42px)!important}
.hero.hero-carousel>.hero-dots{
  position:absolute!important;
  left:50%!important;
  bottom:145px!important;
  z-index:7!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  transform:translateX(-50%)!important;
  padding:8px 12px!important;
  margin:0!important;
  border-radius:999px!important;
  background:rgba(2,22,47,.26)!important;
  backdrop-filter:blur(8px);
}
.hero.hero-carousel>.hero-dots button{
  display:block!important;
  width:11px!important;
  height:11px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.44)!important;
  cursor:pointer!important;
  transition:width .25s,background .25s,transform .25s!important;
}
.hero.hero-carousel>.hero-dots button:hover,
.hero.hero-carousel>.hero-dots button:focus-visible{
  background:#fff!important;
  outline:none!important;
  transform:scale(1.15);
}
.hero.hero-carousel>.hero-dots button[aria-current="true"]{
  width:28px!important;
  border-radius:999px!important;
  background:var(--teal-bright,#3B9BE6)!important;
}
@media(max-width:900px){
  .hero.hero-carousel>.hero-slider-shade{
    background:
      linear-gradient(90deg,rgba(2,20,43,.98) 0%,rgba(2,23,49,.90) 55%,rgba(2,20,43,.52) 100%),
      linear-gradient(180deg,rgba(1,16,34,.26),rgba(1,14,31,.44))!important;
  }
  .hero.hero-carousel>.hero-arrow{width:46px!important;height:46px!important;top:50%!important}
  .hero.hero-carousel>.hero-arrow svg{width:23px!important;height:23px!important}
  .hero.hero-carousel>.hero-dots{bottom:116px!important}
}
@media(max-width:620px){
  .hero.hero-carousel>.hero-media>.hero-slide>img{object-position:72% center!important}
  .hero.hero-carousel>.hero-slider-shade{
    background:
      linear-gradient(90deg,rgba(2,20,43,.98),rgba(2,24,50,.83)),
      linear-gradient(180deg,rgba(1,16,34,.28),rgba(1,14,31,.52))!important;
  }
  .hero.hero-carousel>.hero-arrow{display:none!important}
  .hero.hero-carousel>.hero-dots{bottom:92px!important;gap:8px!important;padding:6px 9px!important}
  .hero.hero-carousel>.hero-dots button{width:9px!important;height:9px!important}
  .hero.hero-carousel>.hero-dots button[aria-current="true"]{width:23px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero.hero-carousel>.hero-media>.hero-slide,
  .hero.hero-carousel>.hero-media>.hero-slide>img{transition:none!important;transform:none!important}
}