.carousel { position: relative; width: 100%; overflow: hidden; background: #000; }
.carousel::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,6,23,0.35) 0%, rgba(2,6,23,0.45) 40%, rgba(2,6,23,0.6) 100%); pointer-events:none; }
.carousel-track { display: flex; transition: transform 0.6s ease; }
.carousel-slide { position: relative; min-width: 100%; height: 56vw; max-height: 580px; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }
.carousel-caption { position: absolute; inset: auto 0 12% 0; color: #fff; text-align: center; padding: 0 16px; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.carousel-caption h2 { margin: 0 0 8px; font-weight: 700; font-size: clamp(20px, 4vw, 40px); }
.carousel-caption p { margin: 0; font-size: clamp(14px, 2.4vw, 18px); opacity: .95; }
.carousel-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; pointer-events: none; }
.carousel-button { pointer-events: all; border: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; cursor: pointer; }
.carousel-button:hover { background: #ffffff; }
.carousel-indicators { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 8px; justify-content: center; }
.carousel-indicators button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.carousel-indicators button.active { background: #fff; width: 22px; }