:root {
            --mouse-x-card: 50%;
            --mouse-y-card: 50%;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0f0c29;
            background-image: linear-gradient(to right top, #0f0c29, #1b1542, #291d5c, #392578, #4a2c96);
            min-height: 100vh;
        }
        
        .background-shapes {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .background-shapes span {
            position: absolute;
            display: block;
            list-style: none;
            background: rgba(255, 255, 255, 0.1);
            animation: animateShapes 25s linear infinite;
            top: -150px;
        }
        
        .background-shapes span:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; border-radius: 30%; }
        .background-shapes span:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; border-radius: 50%; }
        .background-shapes span:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; border-radius: 10%; }
        .background-shapes span:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; border-radius: 50%; }
        .background-shapes span:nth-child(5) { left: 65%; width: 25px; height: 25px; animation-delay: 0s; border-radius: 20%; }
        .background-shapes span:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; border-radius: 50%; }
        .background-shapes span:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; border-radius: 40%; }
        .background-shapes span:nth-child(8) { left: 50%; width: 30px; height: 30px; animation-delay: 15s; animation-duration: 45s; border-radius: 50%; }
        .background-shapes span:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; border-radius: 50%; }
        .background-shapes span:nth-child(10) { left: 85%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 11s; border-radius: 30%; }

        @keyframes animateShapes {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(120vh) rotate(720deg);
                opacity: 0;
            }
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .glass-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0; width: 100%; height: 100%;
            border-radius: 1rem;
            background: radial-gradient(
                400px circle at var(--mouse-x-card) var(--mouse-y-card),
                rgba(255, 255, 255, 0.2),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s ease-out;
            z-index: -1;
        }

        .glass-card:hover {
            transform: translateY(-12px) scale(1.03);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .glass-card:hover::before {
            opacity: 1;
        }
        
        .card-blue:hover { box-shadow: 0 10px 50px -10px rgba(59, 130, 246, 0.6); }
        .card-orange:hover { box-shadow: 0 10px 50px -10px rgba(249, 115, 22, 0.6); }
        .card-green:hover { box-shadow: 0 10px 50px -10px rgba(34, 197, 94, 0.6); }
        .card-purple:hover { box-shadow: 0 10px 50px -10px rgba(139, 92, 246, 0.6); }
        .card-red:hover { box-shadow: 0 10px 50px -10px rgba(239, 68, 68, 0.6); }
        .card-sky:hover { box-shadow: 0 10px 50px -10px rgba(14, 165, 233, 0.6); }
        .card-teal:hover { 
    box-shadow: 0 10px 50px -10px rgba(20, 184, 166, 0.6); 
}
        .card-amber:hover { 
    box-shadow: 0 10px 50px -10px rgba(217, 119, 6, 0.6); 
}

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in-up {
            opacity: 0;
            animation: fadeInUp 0.7s ease-out forwards;
        }