/* ========================================
   RESPONSIVE DESIGN - MANGA POP / NEO-BRUTALIST
   Mobile-First Approach
   ======================================== */

/* Tablet & Smaller Desktops */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .stats-grid {
        gap: 1.5rem;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {

    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Navigation */
    .navbar {
        padding: 0.5rem 0;
    }

    .nav-brand h2 {
        font-size: 1.5rem;
        /* Keep it punchy */
    }

    /* Mobile Menu is handled in style.css, checking common overrides here */

    /* Hero Section */
    .hero {
        padding: 120px 0 60px;
        text-align: center;
    }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-content {
        order: 2;
    }

    .hero-image {
        order: 1;
        transform: rotate(0);
        /* Reset rotation for cleaner mobile view */
        margin-bottom: 1rem;
    }

    .phone-mockup {
        width: 240px;
        height: 480px;
        margin: 0 auto;
        border-width: 3px;
        box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.2);
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 1rem;
        box-shadow: 5px 5px 0 0 #000;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

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

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
        margin-top: 3rem;
    }

    .stat-item {
        padding: 1.5rem;
    }

    /* Features */
    .features-section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .features-detailed {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    /* Pricing */
    .pricing-section {
        margin: 3rem 15px !important;
        border-radius: var(--radius-md) !important;
        padding: 0 !important;
    }

    .pricing-section .container {
        padding: 40px 15px !important;
    }

    .free-features-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .free-feature-card {
        max-width: 100% !important;
    }

    /* FAQ */
    .faq-section {
        padding: 60px 0;
    }

    .faq-question {
        font-size: 1.1rem;
    }

    /* Download CTA */
    .download-section {
        margin: 40px 15px;
        padding: 50px 15px;
    }

    .download-content h2 {
        font-size: 2rem;
    }

    /* Footer */
    .footer {
        padding: 60px 0 30px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand,
    .footer-links {
        margin-bottom: 2rem;
    }

    .footer-links h4 {
        margin-bottom: 1rem;
    }
}

/* Small Mobile */
@media (max-width: 380px) {
    .hero-title {
        font-size: 2rem;
    }

    .phone-mockup {
        width: 200px;
        height: 400px;
    }
}