.hero-bg {
            position: relative;
            background-color: #0f172a;
        }
        .hero-slide {
            position: absolute;
            inset: 0;
            background-position: center;
            background-size: cover;
            opacity: 0;
            transition: opacity 1.6s ease-in-out;
            will-change: opacity;
        }
        .hero-slide.is-active {
            opacity: 1;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.35));
            z-index: 1;
        }
        .hero-dot {
            width: 8px;
            height: 8px;
            border-radius: 9999px;
            background: rgba(255,255,255,0.4);
            transition: all .3s ease;
            cursor: pointer;
        }
        .hero-dot.is-active {
            background: #fff;
            width: 22px;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
        }