.hero{position:relative;display:block;width:100%;box-sizing:border-box;margin:16px 0 4px;border-radius:12px;overflow:hidden;background:#0b1f3a;height:clamp(360px,40vh,420px)}
.hero-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative}
.hero-link{display:block;height:100%;color:#fff}
.hero-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-caption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(transparent,rgba(5,15,30,.85));color:#fff}
.hero-caption h2{margin:0;font-size:24px}
.hero-caption p{margin:4px 0 0;font-size:15px}
.hero-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(5,15,30,.6);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.hero-prev{left:10px}.hero-next{right:10px}
.hero:focus-visible,.hero-btn:focus-visible,.hero-link:focus-visible{outline:3px solid #1E6BFF;outline-offset:-3px}
@media (max-width:640px){.hero{height:56vw}.hero-caption h2{font-size:19px}.hero-btn{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.hero-track{scroll-behavior:auto}}