/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .problem-solution {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .pricing-section {
        padding: 30px 20px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .nav {
        flex-direction: column;
        gap: 20px;
    }

    .demo-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .demo-arrow {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }

    .trust-badges {
        flex-direction: column;
        gap: 20px;
    }

    .billing-toggle {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 16px;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .popup-content {
        padding: 30px 20px;
        margin: 20px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero .subtitle {
        font-size: 1.1rem;
    }

    .demo-header h2 {
        font-size: 2rem;
    }

    .pricing-header h2 {
        font-size: 2rem;
    }

    .pricing-section {
        padding: 20px 15px;
    }

    .problem-card, .solution-card {
        padding: 25px;
    }

    .pricing-card {
        padding: 25px;
    }

    .plan-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .price-main {
        font-size: 2.5rem;
    }

    .nav-links {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        text-align: center;
    }

    .terminal, .context-preview, .chat-preview {
        max-width: 100%;
    }
}