/* Custom Fonts and Base Styles */
        
        :root {
            --color-neon-blue: #4A90E2;
            --color-electric-purple: #A259FF;
            --color-cyber-pink: #FF4FB2;
            --color-dark-space: #0E0E0E;
        }

        /* Set a dark base for the futuristic aesthetic */
        body {
            background-color: var(--color-dark-space);
            color: #F2F2F2;
            font-family: 'Inter', sans-serif;
            transition: background-color 0.5s, color 0.5s;
        }

        /* Dark Mode Setup (default) */
        .dark {
            background-color: var(--color-dark-space);
            color: #F2F2F2;
        }

        /* Light Mode Setup (simulated override) */
        .light {
            background-color: #F2F2F2;
            color: var(--color-dark-space);
        }

        /* Typography Mapping */
        .font-headline {
            font-family: 'Montserrat', sans-serif;
        }
        .font-subheadline {
            font-family: 'Poppins', sans-serif;
        }
        .font-accent {
            font-family: 'Georgia', serif; /* Using a clean serif for accent */
        }

        /* Glassmorphism Effect */
        .glass {
            background-color: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Neon Glow Utility */
        .neon-glow-blue {
            box-shadow: 0 0 10px var(--color-neon-blue), 0 0 20px var(--color-neon-blue), 0 0 30px rgba(74, 144, 226, 0.4);
            transition: all 0.3s;
        }

        /* Gradient Text */
        .text-neon-gradient {
            background: linear-gradient(90deg, var(--color-neon-blue), var(--color-electric-purple), var(--color-cyber-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

        /* Custom Cursor Trail */
        .cursor-trail {
            position: fixed;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.8;
            background: radial-gradient(circle, var(--color-neon-blue) 0%, var(--color-electric-purple) 100%);
            mix-blend-mode: screen;
            transition: transform 0.1s ease-out, opacity 0.5s;
            transform: translate(-50%, -50%) scale(0);
        }
        .cursor-trail.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Parallax Background Simulation (Gradient Animation) */
        @keyframes gradient-move {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .hero-bg-animated {
            background: linear-gradient(-45deg, var(--color-neon-blue), var(--color-electric-purple), var(--color-dark-space), var(--color-cyber-pink));
            background-size: 400% 400%;
            animation: gradient-move 15s ease infinite;
        }
        
        /* Scroll Progress Bar */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--color-neon-blue), var(--color-cyber-pink));
            z-index: 1000;
        }
        
        /* For Portfolio Masonry Grid simulation */
        .masonry-grid {
            column-count: 3;
            column-gap: 1rem;
        }
        @media (max-width: 1024px) {
            .masonry-grid {
                column-count: 2;
            }
        }
        @media (max-width: 640px) {
            .masonry-grid {
                column-count: 1;
            }
        }
        .masonry-item {
            display: inline-block;
            width: 100%;
            margin-bottom: 1rem;
            break-inside: avoid;
        }

        /* Utility for Animated Stats */
        .stat-circle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--color-electric-purple);
        }
        .stat-circle::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            padding: 5px;
            background: conic-gradient(var(--color-electric-purple) var(--progress, 0deg), transparent var(--progress, 0deg));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: progress-fill 2s ease-out forwards;
        }
        @keyframes progress-fill {
            from { --progress: 0deg; }
            to { --progress: 360deg; }
        }
        .stat-value {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            color: var(--color-electric-purple);
        }
        .fade-in {
    animation: fadeInScale 0.7s ease forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}