.hero-module {
  --hero-height: 560px;
  --hero-min-height: 360px;
  --hero-title-color: #fff;
  --hero-text-color: rgba(255, 255, 255, 0.88);
  --hero-accent-color: #fff;
  --hero-content-width: 1120px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: var(--hero-text-color);
  background: #172334;
  overflow: hidden;
}

.hero-module__track { position: relative; width: 100%; height: 100%; min-height: 0; }
.hero-slide { position: absolute; inset: 0; display: grid; align-items: end; visibility: hidden; opacity: 0; transition: opacity 450ms ease, visibility 450ms; }
.hero-slide.is-active { visibility: visible; opacity: 1; }
.hero-slide__image { position: absolute; inset: 0; }
.hero-slide__image { background-position: center; background-size: cover; transform: scale(1.015); }
.hero-slide__image-backdrop, .hero-slide__image-foreground { position: absolute; inset: 0; display: block; }
.hero-slide__image-backdrop { display: none; }
.hero-slide__image-foreground { background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero-slide__image--empty { background: linear-gradient(135deg, #273b54, #111a27); }
.hero-slide__content { position: relative; z-index: 1; box-sizing: border-box; width: min(100% - 48px, var(--hero-content-width)); margin: 0 auto; padding: 64px 0 92px; }
.hero-slide__category { position: relative; isolation: isolate; width: fit-content; margin: 0 0 14px; color: var(--hero-accent-color); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-slide__title { position: relative; isolation: isolate; width: fit-content; max-width: 900px; margin: 0; color: var(--hero-title-color); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 750; line-height: 1.08; }
.hero-slide__category::before, .hero-slide__title::before, .hero-slide__description::before { content: ""; position: absolute; z-index: -1; inset: -.22em -.38em; background: radial-gradient(ellipse at center, rgba(7, 17, 31, .78) 0%, rgba(7, 17, 31, .5) 58%, rgba(7, 17, 31, 0) 100%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); pointer-events: none; }
.hero-slide__title-link { color: inherit; text-decoration: none; }
.hero-slide__title-link:hover, .hero-slide__title-link:focus-visible { text-decoration: underline; text-underline-offset: .12em; }
.hero-slide__description { position: relative; isolation: isolate; width: fit-content; max-width: 720px; margin: 20px 0 0; color: var(--hero-text-color); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.6; }
.hero-module__controls { position: absolute; z-index: 2; right: max(24px, calc((100% - var(--hero-content-width)) / 2)); bottom: 28px; display: flex; align-items: center; gap: 12px; }
.hero-module__button, .hero-module__dot { display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.72); background: rgba(0,0,0,.18); cursor: pointer; }
.hero-module__button { width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.hero-module__dots { display: flex; align-items: center; gap: 8px; }
.hero-module__dot { width: 9px; height: 9px; border-radius: 50%; }
.hero-module__dot.is-active { background: var(--hero-accent-color); }
.hero-module [hidden] { display: none !important; }

@media (max-width: 1280px) {
  .hero-slide__image-backdrop { display: block; background-image: var(--hero-image-url); background-size: cover; background-position: center; filter: blur(14px); transform: scale(1.06); }
  .hero-slide__image-foreground { background-size: contain; background-position: center; }
  .hero-slide__content { width: calc(100% - clamp(24px, 8vw, 96px)); padding: 0 0 clamp(52px, 9vw, 92px); }
  .hero-slide__category { margin-bottom: clamp(4px, 1.2vw, 14px); font-size: clamp(.55rem, 1.5vw, .78rem); }
  .hero-slide__title { font-size: clamp(1rem, 5vw, 4.5rem); }
  .hero-slide__description { margin-top: clamp(6px, 1.5vw, 20px); font-size: clamp(.65rem, 1.7vw, 1.2rem); line-height: 1.35; }
  .hero-module__controls { right: clamp(10px, 3vw, 38px); bottom: clamp(8px, 2vw, 28px); gap: clamp(5px, 1vw, 12px); }
  .hero-module__button { width: clamp(27px, 4vw, 38px); height: clamp(27px, 4vw, 38px); font-size: clamp(1rem, 2.5vw, 1.5rem); }
  .hero-module__dots { gap: clamp(4px, .7vw, 8px); }
  .hero-module__dot { width: clamp(6px, .9vw, 9px); height: clamp(6px, .9vw, 9px); }
}

@media (max-width: 1024px) {
  .hero-slide__image-foreground { background-size: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}