@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
        
        .hero-gradient {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
        }
        
        .dark .hero-gradient {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
        }
        
        .wave-shape {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }
        
        .wave-shape svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 100px;
        }
        
        .wave-shape .shape-fill {
            fill: #FFFFFF;
        }
        
        .dark .wave-shape .shape-fill {
            fill: #0f172a;
        }
        
        .floating-shape {
            position: absolute;
            opacity: 0.1;
            z-index: 0;
            filter: blur(20px);
        }
        
        .shape-1 {
            top: 10%;
            left: 5%;
            width: 150px;
            height: 150px;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background: #3b82f6;
            animation: float 8s ease-in-out infinite;
        }
        
        .shape-2 {
            bottom: 15%;
            right: 10%;
            width: 200px;
            height: 200px;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            background: #10b981;
            animation: floatReverse 10s ease-in-out infinite;
            animation-delay: 1s;
        }
        
        .shape-3 {
            top: 40%;
            right: 20%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #f59e0b;
            animation: float 12s ease-in-out infinite;
            animation-delay: 2s;
        }
        
        .shape-4 {
            bottom: 25%;
            left: 15%;
            width: 80px;
            height: 80px;
            border-radius: 40% 60% 60% 40% / 70% 50% 50% 30%;
            background: #8b5cf6;
            animation: floatReverse 9s ease-in-out infinite;
            animation-delay: 0.5s;
        }
        
        .dark .floating-shape {
            opacity: 0.08;
        }
        
        .feature-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
        }
        
        .dark .feature-card {
            background: rgba(30, 41, 59, 0.7);
        }
        
        .feature-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .dark .feature-card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
        }
        
        .dark .feature-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
        }
        
        .course-card {
            transition: all 0.3s ease;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .course-card:hover {
            transform: translateY(-10px) rotateX(5deg);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .course-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #3b82f6, #10b981);
            border-radius: 0.5rem 0.5rem 0 0;
        }
        
        .stats-card {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .stats-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, rgba(16,185,129,0.1) 100%);
            z-index: -1;
            animation: spin-slow 15s linear infinite;
        }
        
        .dark .stats-card::before {
            background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(5,150,105,0.1) 100%);
        }
        
        .testimonial-card {
            position: relative;
        }
        
        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: -1rem;
            left: -1rem;
            font-size: 6rem;
            font-family: serif;
            color: rgba(59, 130, 246, 0.1);
            line-height: 1;
            z-index: 0;
        }
        
        .dark .testimonial-card::before {
            color: rgba(37, 99, 235, 0.1);
        }
        
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .icon-3d {
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }
        
        .icon-3d:hover {
            transform: rotateY(20deg) scale(1.1);
        }
        
        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        
        .blob-mask {
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M45.1,-64.3C58.1,-56.3,68.2,-43.3,73.2,-28.3C78.2,-13.3,78.1,3.7,72.7,18.5C67.3,33.3,56.6,45.9,42.8,55.3C29,64.7,12,70.9,-3.8,75.6C-19.6,80.3,-39.2,83.5,-52.8,75.5C-66.4,67.5,-74,48.3,-76.1,29.4C-78.3,10.5,-75,-8.1,-66.3,-23.7C-57.6,-39.3,-43.5,-51.9,-28.9,-59.3C-14.3,-66.7,0.8,-68.9,15.3,-65.5C29.8,-62.1,43.6,-53.1,45.1,-64.3Z' transform='translate(100 100)'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
        }
        
        @media (max-width: 768px) {
            .parallax-bg {
                background-attachment: scroll;
            }
        }
            @keyframes marquee {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }
    
    .animate-marquee {
        animation: marquee 30s linear infinite;
    }
    
    .animate-marquee2 {
        animation: marquee 30s linear infinite;
        animation-delay: 15s;
    }