body {
            background-color: #0A0A1F;
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }

        /* 1. Glassmorphism Card Style */
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
        }

        .glass-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 50px rgba(138, 43, 226, 0.3); /* Purple glow shadow on hover */
        }
        
        /* 2. Neon CTA Button Glow */
        .cta-btn {
            position: relative;
            z-index: 10;
            overflow: hidden;
            letter-spacing: 0.05em;
            transition: all 0.4s ease-in-out;
        }
        .cta-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(64, 224, 208, 0.7) 0%, rgba(138, 43, 226, 0.7) 100%);
            opacity: 0;
            transition: opacity 0.4s;
            z-index: -1;
        }
        .cta-btn:hover::before {
            opacity: 1;
        }

        /* 3. Gradient Hero Background Animation */
        .hero-bg-gradient {
            background: linear-gradient(135deg, #0A0A1F 0%, #000033 100%);
            position: relative;
            overflow: hidden;
        }
        .hero-bg-gradient::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg at 50% 50%, #8a2be2 0deg, #40e0d0 90deg, #ff007f 180deg, #8a2be2 270deg, #8a2be2 360deg);
            opacity: 0.1;
            animation: rotateGradient 20s linear infinite;
        }
        @keyframes rotateGradient {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 4. Glassmorphism Modal Background */
        .modal-bg {
            background: rgba(10, 10, 31, 0.9);
        }
        .modal-content {
            background: rgba(10, 10, 31, 0.95);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(64, 224, 208, 0.2);
            box-shadow: 0 10px 40px rgba(138, 43, 226, 0.5);
        }

        /* 5. Glowing Circular Profile Image */
        .profile-img-container {
            position: relative;
            display: inline-block;
            transition: all 0.3s ease;
        }
        .profile-img-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            border: 3px solid transparent;
            background: linear-gradient(45deg, #40e0d0, #8a2be2) border-box;
            mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .profile-img-container:hover::before {
            opacity: 1;
        }
        
        /* Utility for Animated Numbers (Initial state for JS) */
        .stat-counter {
            font-variant-numeric: tabular-nums;
        }
            .animate-spin-slow {
            animation: spin 30s linear infinite;
        }
        .animate-bounce {
            animation: bounce 6s infinite;
        }