/* Custom styles */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, rgba(42, 9, 68, 0.1) 100%);
    pointer-events: none;
}

/* Add subtle animation to background */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-gradient-animate {
    background-size: 200% 200%;
    animation: gradientFlow 15s ease infinite;
}
/* Add to your existing CSS */
.hero-image-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.hero-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(42, 9, 68, 0.3),
        rgba(59, 130, 246, 0.3)
    );
    pointer-events: none;
}

.counter {
    display: inline-block;
    transition: all 0.3s ease;
}

canvas {
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.3));
    width: 100% !important;
    height: 100% !important;
}

.bg-white\/10 {
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease;
}

.bg-white\/10:hover {
    transform: translateY(-5px);
}