.hero-slideshow{
  position: relative;
  width: 100%;
  height: clamp(320px, 55vh, 520px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* slides container */
.slides{
  position: absolute;
  inset: 0;
}
.slide{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide.active{
  opacity: 1;
  z-index: 1;
}

/* overlay text */
.hero-overlay{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 40%);
  color: #fff;
  z-index: 2;
}
.hero-overlay h1{ margin:0 0 6px; font-size:1.8rem }
.hero-overlay .tagline{ margin:0 0 12px; font-weight:500 }
.hero-cta .btn{ margin-right:12px }

/* dots */
/* .slideshow-dots{
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display:flex; gap:8px;
  z-index: 3;
}
.slideshow-dots button{
  width:10px; height:10px;
  border-radius:50%;
  border:none; background:#fff7;
  cursor:pointer;
}
.slideshow-dots button.active{ background:#fff } */

/* Dots: bottom-left, tiny transparent 3D balls */
/* Dots: bottom-left, smaller, subtle transparent 3D balls */
.slideshow-dots{
  position: absolute;
  bottom: 14px;
  left: 14px;
  display:flex;
  gap:8px;
  z-index: 3;
}

.slideshow-dots button{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,.2) 40%, rgba(0,0,0,.1) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,.1));
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.15),
    0 1px 2px rgba(0,0,0,.2);
  opacity:.6;                  /* more transparent */
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.slideshow-dots button:hover{
  transform: scale(1.15);
  opacity: .85;
  border-color: rgba(255,255,255,.5);
}

.slideshow-dots button.active{
  transform: scale(1.2);
  opacity: 1;
  border-color: rgba(255,255,255,.9);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -2px 5px rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.35);
}

.slideshow-dots button:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}