/* --- Color Variables and Core Styling --- */
        :root {
            --color-blue: #00AFFF;
            --color-purple: #A56CFF;
            --color-black: #0A0A0A;
            --color-grey: #1C1C1C;
        }

        body {
            background-color: var(--color-black);
            color: #F0F0F0;
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            cursor: none; /* Hide default cursor to use custom neon cursor */
            min-height: 100vh;
        }

        /* --- Typography --- */
        h1, h2, h3, .font-orbitron {
            font-family: 'Orbitron', sans-serif;
        }

        /* Neon Text Glow */
        .neon-text-glow {
            text-shadow: 0 0 4px var(--color-blue), 0 0 8px var(--color-purple);
        }
        
        /* Subtitle Glow */
        .neon-subtitle-glow {
            text-shadow: 0 0 2px var(--color-purple), 0 0 4px var(--color-blue);
        }


        /* --- Aesthetic Elements --- */
        /* Glowing Button/Link */
        .neon-glow-btn {
            background: linear-gradient(90deg, var(--color-blue), var(--color-purple));
            box-shadow: 0 0 10px var(--color-blue), 0 0 20px var(--color-purple);
            transition: all 0.3s ease-in-out;
        }
        .neon-glow-btn:hover {
            box-shadow: 0 0 15px var(--color-blue), 0 0 30px var(--color-purple);
            transform: scale(1.05);
            opacity: 0.9;
        }

        /* Glassmorphism Card */
        .glass-card {
            background: rgba(28, 28, 28, 0.4); /* Cyber Grey with transparency */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 175, 255, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease-in-out;
            border-radius: 1.5rem;
        }
        .glass-card:hover {
            border: 1px solid var(--color-purple);
            box-shadow: 0 0 10px var(--color-purple);
            transform: translateY(-3px);
        }

        /* Deep Content Section Divider */
        .content-divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--color-blue), var(--color-purple), transparent);
            opacity: 0.4;
            margin: 4rem 0;
        }

        /* --- Animations & Transitions --- */
        /* Scroll Fade-In Animation */
        .fade-in-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Custom Neon Cursor --- */
        #neon-cursor {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--color-blue);
            mix-blend-mode: soft-light; /* Creates a cool light blend effect */
            pointer-events: none;
            position: fixed;
            z-index: 100;
            transition: transform 0.1s ease-out, opacity 0.5s;
            box-shadow: 0 0 10px var(--color-blue), 0 0 20px var(--color-purple);
            opacity: 0.8;
            filter: blur(5px);
            transform: translate(-50%, -50%);
        }

        /* Hide scrollbar for a cleaner look */
        body::-webkit-scrollbar {
            display: none;
        }
        body {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
        .rotate-45 {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .-rotate-45 {
            transform: rotate(-45deg) translate(5px, -5px);
        }