:root {
            --space-blue: #0B132B;
            --orbit-cyan: #38BDF8;
            --soft-white: #F8FAFC;
            --slate-gray: #E2E8F0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--soft-white);
            color: #1E293B;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-display { font-family: 'Space Grotesk', sans-serif; }
        .font-ui { font-family: 'Manrope', sans-serif; }

        /* Background Orbital Animation */
        .orbit-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 50% 50%, #f1f5f9 0%, #F8FAFC 100%);
            overflow: hidden;
        }

        .orbit-ring {
            position: absolute;
            border: 1px solid rgba(56, 189, 248, 0.1);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: rotate 60s linear infinite;
        }

        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .glass-nav {
            background: rgba(248, 250, 252, 0.85);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
        }

        .skill-card:hover .cyan-line { width: 100%; }
        .cyan-line {
            width: 0%;
            height: 4px;
            background: var(--orbit-cyan);
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .view-section {
            display: none;
            animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .view-section.active { display: block; }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .path-step::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, var(--orbit-cyan), transparent);
        }
        .path-step:last-child::after { display: none; }

        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

        .gradient-text {
            background: linear-gradient(135deg, #0B132B 0%, #38BDF8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }