/* widget: ss-hero-slider */
.ss-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(800px, 100svh);
  display: grid; place-items: center;
  padding: calc(var(--ss-nav-h) + 48px) var(--ss-gutter) 120px;
  background: var(--ss-bg);
}
.ss-hero__slides { position: absolute; inset: 0; z-index: -2; }
.ss-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.ss-hero__slide.is-active { opacity: 1; }
.ss-hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.05);
}
.ss-hero__slide.is-active img { animation: ss-hero-zoom 9s ease-out forwards; }
@keyframes ss-hero-zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }

/* Figma: linear gradient bg 20% → 80% (top → bottom), plus a soft centre veil for legibility */
.ss-hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 42% at 50% 50%, rgba(251, 249, 248, .62), rgba(251, 249, 248, 0) 100%),
    linear-gradient(180deg, rgba(251, 249, 248, .4) 0%, rgba(251, 249, 248, .3) 50%, rgba(251, 249, 248, .9) 100%);
}

.ss-hero__content { max-width: 768px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ss-hero__title { max-width: 680px; text-wrap: balance; }
.ss-hero__title { text-shadow: 0 1px 2px rgba(255, 255, 255, .5); }
.ss-hero__lead { margin-top: 24px; max-width: 34em; color: var(--ss-muted); text-shadow: 0 1px 2px rgba(255, 255, 255, .6); }

.ss-hero__dots { display: flex; gap: 8px; margin-top: 32px; }
.ss-hero__dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 105, 114, .4); transition: background-color .3s, transform .3s var(--ss-ease);
}
.ss-hero__dot[aria-current="true"] { background: var(--ss-primary); transform: scale(1.15); }
.ss-hero__dot:hover { background: rgba(0, 105, 114, .6); }

@media (max-width: 640px) {
  .ss-hero { min-height: 88svh; padding-bottom: 96px; }
  .ss-hero__cta { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-hero__slide.is-active img { animation: none; }
}