/* ==========================================
   Responsive Styles
   ========================================== */

@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-buttons { justify-content: center; }
    .hero-visual { margin-top: 2rem; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .generator-layout { grid-template-columns: 1fr; }
    .generator-controls { position: static; }
    .generator-preview-wrapper { position: static; }
    .tool-info-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .section { padding: 60px 0; }

    /* Navbar mobile */
    .navbar-toggle { display: block; }
    .navbar-menu {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--gray-200);
        padding: 16px 20px;
        flex-direction: column;
        gap: 4px;
        box-shadow: var(--shadow);
    }
    .navbar-menu.active { display: flex; }
    .navbar-menu li { width: 100%; }
    .navbar-menu li a { display: block; padding: 12px 16px; }
    .nav-cta { text-align: center; margin-top: 8px; }

    /* Hero */
    .hero { padding: 120px 0 60px; }
    .hero-title { font-size: 2.2rem; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .btn-store { width: 100%; max-width: 260px; }
    .mockup-phone { width: 240px; }

    /* Grids */
    .features-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; gap: 24px; }
    .benefits-grid { grid-template-columns: 1fr; }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    /* CTA */
    .cta-content h2 { font-size: 1.6rem; }
    .cta-buttons { flex-direction: column; align-items: center; }

    /* Form */
    .form-row { grid-template-columns: 1fr; }
    .control-row { grid-template-columns: 1fr; }
    .control-buttons { flex-direction: column; }
    .control-buttons .btn { min-width: auto; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .hero { padding: 100px 0 50px; }
    .container { padding: 0 16px; }
    .generator-controls { padding: 20px 16px; }
    .preview-container { padding: 16px; }
    .feature-card { padding: 24px 18px; }
}