/* ============================================================
   Responsive Styles
   Media queries for tablet and mobile breakpoints.
   ============================================================ */

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.25rem;
    }

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

    .section-title h2 {
        font-size: 1.8rem;
    }

    .enterprise-content,
    .contact-grid,
    .footer-main,
    .experience-timeline {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    nav a:not(.nav-cta) {
        display: none;
    }

    .lang-switcher {
        margin-left: auto;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat-number {
        font-size: 1.75rem;
    }

    .pricing-table {
        font-size: .8rem;
        min-width: 400px;
    }

    .news-article,
    .blog-post {
        padding: 1.5rem;
    }

    .blog-post h3 {
        font-size: 1.4rem;
    }

    .api-compat-box {
        padding: 2rem 1.5rem;
    }

    .comparison-table {
        font-size: .8rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}