::-webkit-scrollbar { display: none; }
        
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 120px; 
        }
            body {
            background: #020617;
            color: #f8fafc;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden; 
            position: relative;
            cursor: none; 
        }

        #cosmic-canvas {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .glass-pro {
            background: rgba(8, 14, 32, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
            transition: border-color 0.5s, box-shadow 0.5s;
        }

        .tilt-card {
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: transform 0.1s ease, border-color 0.4s, box-shadow 0.4s;
        }

        .tilt-card:hover {
            border-color: rgba(14, 165, 233, 0.4);
            box-shadow: 0 15px 30px rgba(14, 165, 233, 0.1);
        }

        .tilt-inner {
            transform: translateZ(30px);
        }

        .hero-glow-wrapper {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            pointer-events: none;
        }

        .hero-glow {
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(14, 165, 233, 0.05) 50%, transparent 70%);
            filter: blur(60px);
        }

        .profile-container {
            position: relative;
            width: 180px; height: 180px;
            margin: 0 auto;
            animation: float 6s ease-in-out infinite;
        }

        .profile-ring {
            position: absolute;
            inset: -8px;
            border: 2px dashed rgba(14, 165, 233, 0.4);
            border-radius: 50%;
            animation: spin 20s linear infinite;
        }

        .profile-ring-fast {
            position: absolute;
            inset: -16px;
            border: 1px solid rgba(79, 70, 229, 0.2);
            border-radius: 50%;
            animation: spin 15s linear infinite reverse;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-12px) scale(1.02); }
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .gradient-text {
            background: linear-gradient(135deg, #ffffff 20%, #38bdf8 60%, #4f46e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-link {
            position: relative;
            color: #94a3b8;
            transition: color 0.3s;
        }
        .nav-link:hover { color: #fff; }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 50%;
            width: 0; height: 2px;
            background: linear-gradient(90deg, #4f46e5, #0ea5e9);
            transition: width 0.3s, left 0.3s;
        }
        .nav-link:hover::after { width: 100%; left: 0; }

        #btn-premium {
            background: linear-gradient(135deg, #4f46e5, #0ea5e9);
            position: relative;
            overflow: hidden;
            transition: all 0.4s;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }