/* /css/hero-slider.css */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;background:#0f172a;--dot:#cbd5e1;--dot-active:#0f172a;--dot-bg:rgba(255,255,255,.9)}
.hero-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;width:100%;height:100%;transition:transform .6s ease}
.hero-slide{width:100%;height:clamp(220px,36vw,480px);display:grid}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-nav{position:absolute;inset-block:0;width:100%;pointer-events:none;display:flex;justify-content:space-between;align-items:center;padding:0 .4rem}
.hero-btn{pointer-events:auto;width:42px;height:42px;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.85);font-size:20px;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18);backdrop-filter:blur(6px)}
.hero-dots{position:absolute;inset-inline:0;bottom:10px;display:flex;justify-content:center;gap:.45rem}
.hero-dot{width:10px;height:10px;border-radius:999px;background:var(--dot);border:1px solid rgba(0,0,0,.08)}
.hero-dot[aria-current="true"]{background:var(--dot-active);box-shadow:0 0 0 6px var(--dot-bg)}
@media (max-width:640px){.hero-btn{display:none}}
@media (prefers-color-scheme: dark){.hero-btn{background:rgba(20,20,20,.7);color:#fff;border-color:rgba(255,255,255,.12)}}
@media (prefers-reduced-motion: reduce){.hero-track{transition:none}}