.hero { background: #151a1e; min-height: 850px; }
.hero-bg { top: 96px; }
.hero-bg .hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.hero-bg .hero-slide.active { opacity:1; }
.hero-bg .hero-slide.portrait { object-fit:contain; object-position:right center; }
.hero-overlay { background:linear-gradient(90deg,rgba(10,15,19,.88) 0%,rgba(10,15,19,.72) 35%,rgba(10,15,19,.25) 75%,rgba(10,15,19,.15)); }
.hero-content { max-width:1220px; padding-bottom:110px; }
.hero-content h1 { max-width:760px; }
.hero-sub { max-width:620px; }
.hero-controls { position:absolute; z-index:2; bottom:22px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px; border-radius:12px; background:rgba(10,15,19,.85); }
.hero-controls[hidden] { display:none; }
.hero-dots { display:flex; gap:4px; }
.hero-controls button { min-width:40px; min-height:44px; border:1px solid #879098; border-radius:8px; background:transparent; color:white; font:600 15px var(--font-body); cursor:pointer; }
.hero-controls button[aria-pressed="true"] { background:#aa4300; border-color:#ffad69; }
.hero-controls button:focus-visible { outline:3px solid #ffad69; outline-offset:3px; }
#heroPause { padding:0 12px; }
@media(max-width:980px) { .hero-bg { top:78px; } }
@media(max-width:760px) {
.hero { min-height:0; display:block; padding-top:78px; }
.hero-bg { position:relative; top:auto; height:58vw; min-height:250px; max-height:420px; }
.hero-bg .hero-slide { object-fit:contain; object-position:center; }
.hero-bg .hero-slide.portrait { object-position:center; }
.hero-overlay { display:none; }
.hero-content { padding:28px 24px 32px; }
.hero-content h1 { font-size:2.4rem; }
.hero-cta { margin-bottom:30px; }
.hero-controls { position:relative; left:auto; bottom:auto; transform:none; margin:0 auto 24px; width:fit-content; max-width:100%; flex-wrap:wrap; justify-content:center; gap:4px; }
.hero-controls button { min-width:32px; }
}
@media(prefers-reduced-motion:reduce) { .hero-bg .hero-slide { transition:none; } }