/* Custom Colors & Global Styles */
        :root {
            --primary-blue: #3B82F6; /* Tailwind blue-500 */
            --secondary-violet: #8B5CF6; /* Tailwind violet-500 */
            --dark-background: #0D111A; 
            --glass-light: rgba(255, 255, 255, 0.08);
            --text-light: #E1E5EA;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--dark-background);
            color: var(--text-light);
            scroll-behavior: smooth;
        }

        /* Hero Background Gradient */
        .bg-hero-gradient {
            background: linear-gradient(135deg, var(--dark-background) 0%, #1A1F30 50%, var(--dark-background) 100%);
        }

        /* Primary Gradient for Buttons/Accents */
        .bg-accent-gradient {
            background: linear-gradient(90deg, var(--primary-blue) 0%, var(--secondary-violet) 100%);
            transition: all 0.3s ease;
        }
        .bg-accent-gradient:hover {
            opacity: 0.9;
            box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
            transform: translateY(-2px);
        }

        /* Glassmorphism Card Style */
        .glass-card {
            background: var(--glass-light);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            border-radius: 32px; /* Increased rounded corners */
            transition: all 0.3s ease;
        }
        
        /* Floating Element Animation */
        @keyframes float {
            0% { transform: translate(0, 0); opacity: 0.7; }
            50% { transform: translate(10px, -10px); opacity: 0.9; }
            100% { transform: translate(0, 0); opacity: 0.7; }
        }

        .floating-shape {
            animation: float 20s ease-in-out infinite;
        }

        /* Hover Lift/Glow for Trending Cards */
        .trending-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px rgba(139, 92, 246, 0.3);
            border-color: var(--secondary-violet);
        }

        /* Progress Bar Animation */
        .skill-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #3B82F6, #8B5CF6);
            border-radius: 9999px;
            box-shadow: 0 0 8px #8B5CF6;
            animation: skill-fill 2s ease-out forwards;
        }
        @keyframes skill-fill {
            0% { width: 0; }
            100% { /* width set dynamically by JS/CSS */ }
        }