/* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #0f172a;
        }

        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        /* Focus-visible for keyboard users */
        :focus-visible {
            outline: 2px solid #60a5fa;
            outline-offset: 3px;
            border-radius: 4px;
        }

        /* --- BACKGROUND ANIMATION STYLES --- */
        .bg-grid {
            background-image: radial-gradient(#1e3a8a 1px, transparent 1px);
            background-size: 40px 40px;
        }

        @keyframes pulse-orb {

            0%,
            100% {
                opacity: 0.15;
                transform: scale(1);
            }

            50% {
                opacity: 0.35;
                transform: scale(1.1);
            }
        }

        .animate-pulse-orb {
            animation: pulse-orb 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* --- SCROLL INDICATOR ANIMATION --- */
        @keyframes bounce-chevron {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-8px);
            }

            60% {
                transform: translateY(-4px);
            }
        }

        .animate-bounce-chevron {
            animation: bounce-chevron 2s infinite;
        }

        /* --- SCROLL REVEAL --- */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .7s ease, transform .7s ease;
        }

        .reveal.is-visible {
            opacity: 1;
            transform: none;
        }

        /* --- ACTIVE NAV LINK --- */
        .nav-link.is-active {
            color: #60a5fa;
        }

        /* --- LITE YOUTUBE (thumbnail click-to-play) --- */
        .lite-yt {
            position: relative;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }

        .lite-yt::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, .55) 100%);
        }

        .lite-yt .lite-yt-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 64px;
            height: 44px;
            border-radius: 10px;
            background: rgba(30, 41, 59, .85);
            border: 1px solid rgba(148, 163, 184, .3);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .2s ease, background .2s ease;
        }

        .lite-yt:hover .lite-yt-play {
            background: #dc2626;
            transform: translate(-50%, -50%) scale(1.05);
        }

        .lite-yt .lite-yt-play::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 14px solid #fff;
            border-top: 9px solid transparent;
            border-bottom: 9px solid transparent;
            margin-left: 4px;
        }

        /* Respect reduced-motion */
        @media (prefers-reduced-motion: reduce) {

            .animate-pulse-orb,
            .animate-bounce-chevron {
                animation: none;
            }

            .reveal {
                opacity: 1;
                transform: none;
                transition: none;
            }
        }