.gradient-bg {
    --overlay-x: 50%;
    --overlay-y: 50%;
    /* Background will be set via JavaScript */
    background-size: 600% 600%;
    animation: gradient 20s ease-in-out infinite;
    position: relative;
    transition: background-position 0.1s ease-out;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Overlay will be set via JavaScript */
    background-size: 400% 400%;
    animation: gradient 15s ease-in-out infinite reverse;
    mix-blend-mode: overlay;
    transition: background-position 0.15s ease-out;
    background-position: var(--overlay-x) var(--overlay-y);
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Add subtle noise texture */
.gradient-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.15;
    mix-blend-mode: overlay;
}

.feature-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* Feature Card Gradients */
.gradient-1 {
    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
    background-size: 200% 200%;
    animation: pulse 3s ease-in-out infinite;
}

.gradient-2 {
    background: linear-gradient(135deg, #A8E6CF, #3498DB);
    background-size: 200% 200%;
    animation: pulse 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.gradient-3 {
    background: linear-gradient(135deg, #FFD93D, #FF6B6B);
    background-size: 200% 200%;
    animation: pulse 3s ease-in-out infinite;
    animation-delay: 1s;
}

.gradient-4 {
    background: linear-gradient(135deg, #6C5CE7, #a8e6cf);
    background-size: 200% 200%;
    animation: pulse 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes pulse {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Enhance feature card hover effect */
.feature-card {
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-card:hover .gradient-1,
.feature-card:hover .gradient-2,
.feature-card:hover .gradient-3,
.feature-card:hover .gradient-4 {
    animation-duration: 2s;
}

/* Animated Icons */
.animated-icon {
    opacity: 0.9;
    transition: all 0.3s ease;
}

.feature-card:hover .animated-icon {
    opacity: 1;
    transform: scale(1.1);
}

.animate-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease-in-out infinite alternate;
}

@keyframes draw {
    0% {
        stroke-dashoffset: 1000;
    }
    40% {
        stroke-dashoffset: 0;
    }
    60% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -1000;
    }
}

/* Stagger animations for each icon */
.feature-card:nth-child(1) .animate-draw {
    animation-delay: 0s;
}

.feature-card:nth-child(2) .animate-draw {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3) .animate-draw {
    animation-delay: 0.4s;
}

.feature-card:nth-child(4) .animate-draw {
    animation-delay: 0.6s;
}

/* Download button icons */
.flex.items-center.space-x-2 svg {
    transition: transform 0.2s ease;
}

.flex.items-center.space-x-2:hover svg {
    transform: scale(1.1);
}

/* Ensure consistent button width */
.flex.items-center.space-x-2 {
    min-width: 200px;
    justify-content: center;
}

/* Legal Pages Styling */
.prose h2 {
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}

.prose h3 {
    color: #6b7280;
    margin-top: 1.5rem;
}

.prose ul {
    background-color: #f9fafb;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
}

.prose ul li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.prose ul li::before {
    content: "•";
    color: #8b5cf6;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

/* Mobile Navigation */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    z-index: 40;
}

.mobile-menu.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-menu a {
    padding: 1rem;
    font-size: 1.25rem;
    color: #4B5563;
    transition: color 0.2s ease;
}

.mobile-menu a:hover {
    color: #1F2937;
}

/* Demo Section Styles */
.aspect-video {
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    .aspect-video {
        aspect-ratio: 9 / 16;
    }
}

/* Screenshot hover effects */
.transform {
    will-change: transform;
}

/* Smooth shadow transition */
.shadow-lg {
    transition: box-shadow 0.3s ease;
}

.transform:hover .shadow-lg {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Form loading and validation states */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Form validation styles */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
    border-color: #EF4444;
}

input:invalid:not(:placeholder-shown):focus,
textarea:invalid:not(:placeholder-shown):focus,
select:invalid:not(:placeholder-shown):focus {
    ring-color: #EF4444;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Optional: Add custom animation for the arrow */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 2s ease-in-out infinite;
}