@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }
.gradient-bg{
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
.gradient-bg-dark{
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
        }
.feature-card{
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
.feature-card:hover{
            transform: translateY(-8px);
        }
.icon-pulse{
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
.animate-on-scroll{
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
.animate-on-scroll.animated{
            opacity: 1;
            transform: translateY(0);
        }
.glass-effect{
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.hero-gradient{
            background: linear-gradient(135deg, #7041ff 0%, #6366f1 50%, #a801db 100%);
        }

        @keyframes gradient-shift {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }
.animated-gradient{
            background: linear-gradient(135deg, #7041ff 0%, #6366f1 50%, #a801db 100%);
            background-size: 400% 400%;
        }
.feature-item{
            transition: all 0.2s ease;
        }
.feature-item:hover{
            transform: translateX(4px);
        }