.hero-slider { position: relative; overflow: hidden; }
.hero-track {
  display: flex; gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  min-width: 100%; height: clamp(320px, 60vh, 720px);
  position: relative; scroll-snap-align: start;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display:block; }
.hero-caption {
  position: absolute; inset: auto 0 0 0; padding: 2rem;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.hero-caption h2 { margin: 0 0 .25rem; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.hero-btn {
  display:inline-block; margin-top:.5rem; padding:.6rem 1rem; border-radius:999px;
  background:#111; color:#fff; text-decoration:none;
}
.hero-prev, .hero-next {
  position:absolute; top:50%; translate:0 -50%;
  background:rgba(0,0,0,.45); color:#fff; border:0; width:44px; height:44px;
  border-radius:50%; cursor:pointer; font-size:22px; line-height:44px;
}
.hero-prev { left: .75rem; } .hero-next { right: .75rem; }
@media (max-width: 768px) { .hero-caption { padding: 1rem; } }