:root {
            --graphite: #0F1115;
            --electric-blue: #3B82F6;
            --neon-cyan: #06B6D4;
            --accent-purple: #8B5CF6;
        }
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--graphite); 
            color: #E2E8F0; 
            scroll-behavior: smooth; 
            overflow-x: hidden;
        }
        h1, h2, h3, .heading { font-family: 'Space Grotesk', sans-serif; }
        code, .code-font { font-family: 'Fira Code', monospace; }

        .neon-glow { box-shadow: 0 0 15px rgba(6, 182, 212, 0.3); }
        .neon-text { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }
        .glass-nav { background: rgba(15, 17, 21, 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
        
        .tech-card { 
            background: linear-gradient(145deg, #1A1D23 0%, #111418 100%);
            border: 1px solid rgba(255, 255, 255, 0.03);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .tech-card:hover {
            transform: translateY(-8px);
            border-color: var(--neon-cyan);
            box-shadow: 0 20px 40px -15px rgba(6, 182, 212, 0.25);
        }

        .time-ring {
            position: relative;
            width: 32px;
            height: 32px;
            border: 2px solid rgba(6, 182, 212, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .time-ring::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 2px;
            background: var(--neon-cyan);
            left: 50%;
            top: 50%;
            transform-origin: left center;
            animation: clock-spin 3s linear infinite;
        }
        @keyframes clock-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .gradient-text {
            background: linear-gradient(135deg, #fff 0%, var(--neon-cyan) 50%, var(--accent-purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .btn-futuristic {
            position: relative;
            background: transparent;
            border: 1px solid var(--neon-cyan);
            color: var(--neon-cyan);
            overflow: hidden;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-futuristic:hover {
            background: var(--neon-cyan);
            color: var(--graphite);
            box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
        }

        .category-pill {
            transition: 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.08);
            white-space: nowrap;
        }
        .category-pill.active {
            background: var(--neon-cyan);
            color: var(--graphite);
            border-color: var(--neon-cyan);
            font-weight: 800;
        }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.4s ease-in-out;
        }
        
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
        }

        .stat-glow {
            text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
        }