:root{
  --accent:#00c2ff;
  --accent2:#ff7a00;
  --dark:#04101c;
}

.hero-slider{
  position:relative;
  width:100%;
  height:100vh;
  max-height:650px;
  overflow:hidden;
  background:var(--dark);
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  transition:opacity 1.1s ease;
  pointer-events:none;
}
.slide.active{
  opacity:1;
  z-index:2;
  pointer-events:auto;
}

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform 6.5s ease-out;
}
.slide.active img{
  transform:scale(1);
}

.slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(4,16,28,.85) 0%, rgba(4,16,28,.45) 45%, rgba(4,16,28,.15) 100%);
}

.slide-content{
  position:absolute;
  left:6%;
  top:50%;
  transform:translateY(-40%);
  z-index:3;
  max-width:560px;
  color:#fff;
}

.slide-tag{
  display:inline-block;
  color:var(--accent2);
  letter-spacing:3px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
  opacity:0;
  transform:translateY(20px);
}
.slide-title{
  font-size:clamp(28px,5vw,54px);
  font-weight:800;
  line-height:1.15;
  margin-bottom:16px;
  opacity:0;
  transform:translateY(30px);
  text-transform:uppercase;
}
.slide-desc{
  font-size:16px;
  color:#d7e3ec;
  margin-bottom:28px;
  opacity:0;
  transform:translateY(30px);
  max-width:460px;
}
.slide-btn{
  display:inline-block;
  background:var(--accent);
  color:#04101c;
  font-weight:700;
  padding:14px 32px;
  border-radius:4px;
  text-decoration:none;
  letter-spacing:1px;
  opacity:0;
  transform:translateY(30px);
  transition:background .3s ease, transform .3s ease;
}
.slide-btn:hover{
  background:var(--accent2);
  color:#fff;
}

.slide.active .slide-tag{ animation: fadeUp .7s ease forwards .35s; }
.slide.active .slide-title{ animation: fadeUp .7s ease forwards .55s; }
.slide.active .slide-desc{ animation: fadeUp .7s ease forwards .75s; }
.slide.active .slide-btn{ animation: fadeUp .7s ease forwards .95s; }

@keyframes fadeUp{
  to{ opacity:1; transform:translateY(0); }
}

.nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
  transition:background .25s ease;
  backdrop-filter:blur(3px);
}
.nav-arrow:hover{ background:var(--accent); color:#04101c; }
.nav-prev{ left:24px; }
.nav-next{ right:24px; }

.dots{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:10px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.dot.active{
  background:var(--accent);
  transform:scale(1.3);
}

.progress-bar{
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  background:var(--accent);
  width:0%;
  z-index:6;
}

@media (max-width:640px){
  .nav-arrow{ width:36px; height:36px; font-size:16px; }
  .nav-prev{ left:10px; }
  .nav-next{ right:10px; }
  .slide-content{ left:5%; max-width:90%; }
}