.hero {
    margin-bottom: 32px;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 115%;
    height: 105%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 72% 58% at 50% 42%, rgba(102, 192, 244, 0.04) 0%, transparent 70%);
}

.hero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.hero__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hero__slider {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 38%), var(--color-bg-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md), var(--shadow-inset);
    overflow: hidden;
}

.hero__slider-main {
    position: relative;
    aspect-ratio: 16 / 6;
    min-height: 280px;
    overflow: hidden;
}

@media (min-width: 1025px) {
.hero__slider-main {
    aspect-ratio: 1920 / 840;
    min-height: 320px;
}

.hero__slide-image { object-position: center top; }

.hero__slide--active .hero__slide-image { transform-origin: center top; }
}

.hero__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hero__slide--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(20, 24, 32, 0.84) 0%,
        rgba(20, 24, 32, 0.18) 40%,
        transparent 70%
    );
    pointer-events: none;
}

.hero__slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    contain-intrinsic-size: 1200px 450px;
    background: linear-gradient(135deg, var(--color-card) 0%, var(--color-bg-secondary) 60%, #2a3f52 100%);
}

.hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    background: rgba(20, 26, 36, 0.62);
    backdrop-filter: blur(var(--glass-blur-soft));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition:
        opacity var(--transition),
        transform var(--transition-fast),
        background 250ms var(--ease-out),
        border-color 250ms var(--ease-out),
        box-shadow 250ms var(--ease-out);
}

.hero__slider-main:hover .hero__nav { opacity: 1; }

.hero__nav-icon {
    display: block;
    flex-shrink: 0;
    transition: filter 250ms var(--ease-out);
}

.hero__nav:hover {
    background: rgba(24, 30, 42, 0.78);
    border-color: rgba(102, 192, 244, 0.28);
    box-shadow:
        0 0 0 1px rgba(102, 192, 244, 0.07),
        0 0 12px rgba(102, 192, 244, 0.12),
        0 3px 12px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero__nav:hover .hero__nav-icon { filter: drop-shadow(0 0 3px rgba(102, 192, 244, 0.28)); }

.hero__nav--prev { left: 16px; }

.hero__nav--next { right: 16px; }

.hero__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__dot:hover { background: rgba(255, 255, 255, 0.5); }

.hero__dot--active {
    background: var(--color-accent);
    box-shadow: 0 0 12px rgba(102, 192, 244, 0.6);
    transform: scale(1.2);
}

.hero__thumbnails {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px 0;
    background: rgba(0, 0, 0, 0.2);
}

.hero__thumbnail-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.hero__thumbnail {
    flex: 1;
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.55;
    transition: opacity var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__thumbnail:hover { opacity: 0.85; }

.hero__thumbnail--active {
    opacity: 1;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}