/* overflow:hidden creates a scrolling ancestor in some browsers and
               prevents the sticky 3D stage from tracking the viewport. */
            @supports (overflow: clip) {

                html,
                body {
                    overflow-x: clip;
                }
            }

            .led-3d-section {
                position: relative;
                height: 240vh;
                background: #f6f8fb;
            }

            .led-3d-sticky {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                height: 100vh;
                width: 100%;
                overflow: hidden;
            }

            #led3dCanvas,
            .led-3d-webgl-canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                display: block;
                pointer-events: none;
                transition: opacity 0.5s ease;
                will-change: opacity;
            }

            #led3dCanvas {
                opacity: 1;
            }

            .led-3d-webgl-canvas {
                opacity: 0;
            }

            .led-3d-section.webgl-ready #led3dCanvas {
                opacity: 0;
            }

            .led-3d-section.webgl-ready .led-3d-webgl-canvas {
                opacity: 1;
            }

            .led-3d-overlay {
                position: absolute;
                inset: 0;
                pointer-events: none;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding: var(--header-height) 24px 11vh;
                z-index: 2;
            }

            .led-3d-frame {
                position: absolute;
                bottom: 11vh;
                max-width: 680px;
                text-align: center;
                opacity: 0;
                transform: translateY(28px);
                transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
                padding: 0;
                background: transparent;
                border: 0;
                box-shadow: none;
                text-shadow: none;
                pointer-events: none;
            }

            .led-3d-frame.active {
                opacity: 1;
                transform: translateY(0);
            }

            .led-3d-frame-hero {
                bottom: 10vh;
                max-width: 900px;
            }

            .led-3d-frame .section-subtitle {
                display: block;
                margin-bottom: 12px;
                font-size: 0.85rem;
                letter-spacing: 0.18em;
                color: var(--primary);
                text-transform: uppercase;
            }

            .led-3d-frame h1 {
                font-size: 3rem;
                margin-bottom: 22px;
                line-height: 1.08;
            }

            .led-3d-frame h2 {
                font-size: 2.25rem;
                margin-bottom: 14px;
                line-height: 1.15;
            }

            .led-3d-frame p {
                color: var(--text-muted);
                font-size: 1rem;
                line-height: 1.65;
                max-width: 680px;
                margin: 0 auto;
            }

            .led-3d-frame .hero-buttons {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 12px;
                margin-top: 32px;
                pointer-events: auto;
            }

            .led-3d-frame .btn {
                pointer-events: auto;
            }

            .led-3d-progress {
                position: absolute;
                top: calc(var(--header-height) + 20px);
                left: 50%;
                transform: translateX(-50%);
                width: 180px;
                height: 3px;
                background: rgba(15, 23, 42, 0.08);
                border-radius: 999px;
                overflow: hidden;
                z-index: 3;
            }

            .led-3d-progress-fill {
                height: 100%;
                background: #007aff;
                transform: scaleX(0);
                transform-origin: left center;
                transition: transform 0.15s linear;
            }

            .led-3d-scrollhint {
                position: absolute;
                bottom: 32px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                color: var(--text-muted);
                font-size: 0.7rem;
                letter-spacing: 0.3em;
                z-index: 3;
                animation: ledHintFade 2.4s ease-in-out infinite;
            }

            .led-3d-scrollhint-line {
                width: 1px;
                height: 36px;
                background: var(--text-muted);
            }

            .led-3d-section.has-scroll-started .led-3d-scrollhint {
                animation: none;
                opacity: 0;
                transition: opacity 0.35s ease;
            }

            @keyframes ledHintFade {

                0%,
                100% {
                    opacity: 0.35;
                    transform: translate(-50%, 0);
                }

                50% {
                    opacity: 1;
                    transform: translate(-50%, 6px);
                }
            }

            .led-3d-section.reduced-motion {
                height: auto;
                min-height: 100vh;
            }

            .led-3d-section.reduced-motion #led3dCanvas,
            .led-3d-section.reduced-motion .led-3d-webgl-canvas {
                display: none;
            }

            .led-3d-section.reduced-motion .led-3d-sticky {
                position: relative;
                height: auto;
                min-height: 100vh;
            }

            .led-3d-section.reduced-motion .led-3d-frame {
                opacity: 1;
                transform: none;
                position: relative;
                bottom: auto;
                margin: 0 auto 40px;
            }

            .led-3d-section.reduced-motion .led-3d-overlay {
                position: relative;
                flex-direction: column;
                padding: calc(var(--header-height) + 60px) 24px 60px;
            }

            .led-3d-section.reduced-motion .led-3d-scrollhint,
            .led-3d-section.reduced-motion .led-3d-progress {
                display: none;
            }

            @media (max-width: 720px) {
                .led-3d-section {
                    height: 280vh;
                }

                .led-3d-overlay {
                    padding: var(--header-height) 18px 9vh;
                }

                .led-3d-frame {
                    bottom: 8vh;
                    margin: 0 16px;
                    max-width: calc(100% - 32px);
                }

                .led-3d-frame-hero {
                    bottom: 9vh;
                }

                .led-3d-frame h1 {
                    font-size: 2.65rem;
                    line-height: 1.12;
                }

                .led-3d-frame h2 {
                    font-size: 2rem;
                }

                .led-3d-frame p {
                    font-size: 1rem;
                    line-height: 1.55;
                }

                .led-3d-frame .hero-buttons {
                    margin-top: 24px;
                }

                .led-3d-frame .hero-buttons .btn {
                    width: min(100%, 260px);
                    text-align: center;
                }

                .led-3d-scrollhint {
                    display: none;
                }
            }
        
@media (max-width: 768px) {
 .led-3d-section { height: 220vh; }
 .led-3d-frame h1 { font-size: 30px; }
 .led-3d-frame h2 { font-size: 26px; }
 .led-3d-frame p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .led-3d-section { height: auto; } }