/* Vouchat Home Page Styles */

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Brand Colors */
.gradient-bg {
    background: #DB0008;
}

.gradient-text {
    color: #DB0008;
}

/* Phone Mockup */
.phone-mockup {
    border: 8px solid #1f2937;
    border-radius: 2.5rem;
    overflow: hidden;
    position: relative;
    background: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 24px;
    background: #1f2937;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee {
    animation: marquee 20s linear infinite;
}

@media (max-width: 640px) {
    .marquee {
        animation: marquee 15s linear infinite;
    }
}

/* Hover Effects */
.hover-lift {
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(219, 0, 8, 0.2);
}

/* Buttons */
.btn-primary {
    background: #DB0008;
    color: white;
    transition: all 300ms ease;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(219, 0, 8, 0.3);
}

.btn-secondary {
    background: white;
    color: #1A1A1A;
    border: 2px solid #E5E5E5;
    transition: all 300ms ease;
}

.btn-secondary:hover {
    border-color: #DB0008;
    transform: scale(1.05);
}

/* Blob Animation */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Navigation Active State */
.nav-link-active {
    color: #DB0008;
    font-weight: 600;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }
    
    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Ensure inputs don't cause zoom on iOS */
    input, textarea, select {
        font-size: 16px !important;
    }
}