:root {
            --cursor-size: 20px;
            --cursor-hover-size: 60px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #0a0a0f !important;
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            cursor: none;
        }
        
        /* Custom Cursor */
        .cursor {
            width: var(--cursor-size);
            height: var(--cursor-size);
            border: 2px solid #6366f1;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transition: width 0.3s, height 0.3s, border-color 0.3s;
            transform: translate(-50%, -50%);
            mix-blend-mode: difference;
        }
        
        .cursor.hover {
            width: var(--cursor-hover-size);
            height: var(--cursor-hover-size);
            border-color: #06b6d4;
            background: rgba(6, 182, 212, 0.1);
        }
        
        .cursor-dot {
            width: 4px;
            height: 4px;
            background: #6366f1;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        /* Noise Texture */
        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        
        /* Gradient Background */
        .gradient-bg {
            background: linear-gradient(-45deg, #0a0a0f, #1a1a2e, #16213e, #0f3460);
            background-size: 400% 400%;
            animation: gradient-shift 15s ease infinite;
        }
        
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        /* Glass Morphism */
        .glass {
            background: rgba(0 0 0 / 0.27);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .glass-strong {
            background: rgba(20, 20, 30, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Text Gradient */
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .text-gradient-cyan {
            background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Grid Pattern */
        .grid-pattern {
            background-image: 
                linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
        }
        
        /* Magnetic Button */
        .magnetic-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        /* Glitch Effect */
        .glitch {
            position: relative;
        }
        
        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .glitch::before {
            left: 2px;
            text-shadow: -2px 0 #ff00c1;
            clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim 5s infinite linear alternate-reverse;
        }
        
        .glitch::after {
            left: -2px;
            text-shadow: -2px 0 #00fff9;
            clip: rect(44px, 450px, 56px, 0);
            animation: glitch-anim2 5s infinite linear alternate-reverse;
        }
        
        @keyframes glitch-anim {
            0% { clip: rect(31px, 9999px, 94px, 0); }
            20% { clip: rect(78px, 9999px, 23px, 0); }
            40% { clip: rect(12px, 9999px, 11px, 0); }
            60% { clip: rect(65px, 9999px, 89px, 0); }
            80% { clip: rect(23px, 9999px, 67px, 0); }
            100% { clip: rect(91px, 9999px, 34px, 0); }
        }
        
        @keyframes glitch-anim2 {
            0% { clip: rect(65px, 9999px, 99px, 0); }
            20% { clip: rect(12px, 9999px, 56px, 0); }
            40% { clip: rect(89px, 9999px, 12px, 0); }
            60% { clip: rect(23px, 9999px, 78px, 0); }
            80% { clip: rect(45px, 9999px, 34px, 0); }
            100% { clip: rect(12px, 9999px, 67px, 0); }
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0a0f;
        }
        ::-webkit-scrollbar-thumb {
            background: #6366f1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #8b5cf6;
        }
        
        /* Resume Modal */
        .resume-modal {
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .resume-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .resume-content {
            transform: scale(0.9) translateY(20px);
            transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .resume-modal.active .resume-content {
            transform: scale(1) translateY(0);
        }
        
        /* Skill Bar Animation */
        .skill-bar {
            width: 0;
            transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        /* Project Card Hover */
        .project-card {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .project-card:hover {
            transform: translateY(-10px);
        }
        
        .project-card:hover .project-image {
            transform: scale(1.1);
        }
        
        /* Reveal Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
        }
        
        /* Typing Cursor */
        .typing-cursor::after {
            content: '|';
            animation: blink 1s infinite;
            color: #6366f1;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        /* Loading Screen */
        .loader {
            position: fixed;
            inset: 0;
            background: #0a0a0f;
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.8s, visibility 0.8s;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 2rem;
            color: #6366f1;
        }
        
        /* Particle Canvas */
        #particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        /* Content Layer */
        .content-layer {
            position: relative;
            z-index: 2;
        }