.hero-slider { position: relative; overflow: hidden; width: 100vw; height: 100vh; }
.hero-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh; min-height: 100vh;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
  transform: translateX(30px);
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  z-index: 2;
  transform: translateX(0);
  pointer-events: auto;
}
.hero-bg-video, .hero-bg-image { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-bg-image { background-size:cover; background-position:center; }
.hero-content { position: relative; z-index: 1; }
.hero-slider-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; }
.hero-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); margin: 0 3px; cursor: pointer; transition: background 0.3s; }
.hero-dot.active { background: #fff; }