/* ===== Banner Carousel ===== */
.hero-banner{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(17,24,39,.06);
  background:#fff;
  height:600px;
  min-height:500px;
}
.banner-track{ display:flex; width:100%; transition:transform .45s ease; will-change:transform; }
.banner-slide{
  position:relative;
  flex:0 0 100%;
  height:600px;
  min-height:500px;
  padding:26px;
  background: var(--bg) center/cover no-repeat;
}
.banner-overlay{ position:absolute; inset:0; }
.banner-content{ position:relative; z-index:2; max-width:520px; color:#fff; }
.kicker{ color:var(--muted); font-weight:700; font-size:13px; }
.title{ margin:8px 0 10px; font-size:34px; line-height:1.15; letter-spacing:-.3px; }
.sub{ margin:0; color:var(--muted); max-width:52ch; }
.banner-content .kicker,
.banner-content .sub{ color:rgba(255,255,255,.85); }
.banner-content .title{ color:#fff; }

.banner-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:28px;
  line-height:42px;
  cursor:pointer;
  z-index:5;
}
.banner-nav.prev{ left:12px; }
.banner-nav.next{ right:12px; }
.banner-nav:hover{ background:rgba(0,0,0,.35); }

.banner-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  display:flex;
  gap:8px;
  z-index:6;
}
.banner-dots .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
  cursor:pointer;
}
.banner-dots .dot.is-active{ background:#fff; border-color:#fff; }

.banner-ctas{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.btn.ghost{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

@media (max-width:960px){
  .title{ font-size:30px; }
}

@media (max-width:560px){
  .title{ font-size:26px; line-height:1.2; }
  .banner-nav{ display:none; }
  .banner-slide{ padding:18px; height:auto; min-height:300px; }
  .hero-banner{ height:auto; min-height:300px; }
}