/* --- GLOBAL & UTILITIES --- */
        body {
            background-color: #030712;
            color: #e2e8f0;
            overflow-x: hidden;
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #030712; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; border: 1px solid #0f172a; }
        ::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

        /* Text Selection */
        ::selection { background: rgba(6, 182, 212, 0.3); color: #fff; }

        /* --- GLASSMORPHISM --- */
        .glass-nav {
            background: rgba(3, 7, 18, 0.7);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .glass-card {
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        }

        /* --- EFFECTS --- */
        .text-glow {
            text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
        }

        .border-gradient {
            position: relative;
        }
        .border-gradient::after {
            content: '';
            position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: linear-gradient(45deg, #06b6d4, transparent, #6366f1);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0.5; transition: opacity 0.3s; pointer-events: none;
        }

        /* Reveal Animation */
        .reveal {
            opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1; transform: translateY(0);
        }

        /* --- CUSTOM COMPONENTS --- */
        /* Glitch Effect */
        .glitch-wrapper { position: relative; display: inline-block; }
        .glitch-wrapper::before, .glitch-wrapper::after {
            content: attr(data-text);
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: #030712;
        }
        .glitch-wrapper::before {
            left: 2px; text-shadow: -1px 0 #06b6d4; clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim 5s infinite linear alternate-reverse;
        }
        .glitch-wrapper::after {
            left: -2px; text-shadow: -1px 0 #f43f5e; clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim2 5s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim {
            0% { clip: rect(12px, 9999px, 32px, 0); }
            100% { clip: rect(65px, 9999px, 88px, 0); }
        }
        @keyframes glitch-anim2 {
            0% { clip: rect(89px, 9999px, 100px, 0); }
            100% { clip: rect(2px, 9999px, 15px, 0); }
        }

        /* Loader */
        .loader-bg {
            background: radial-gradient(circle at center, #0f172a 0%, #030712 100%);
        }