/* ============================================================
   SHREEWIN — RESPONSIVE STYLES
   Mobile-first adjustments for all breakpoints.
   ============================================================ */

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero { padding: 56px 0 48px; }
    .hero-visual { order: -1; }
    .app-sheet { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }

    /* Mobile navigation */
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 20px 20px;
        gap: 6px;
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 12px 14px; font-size: 1rem; }
    .site-nav .nav-login { margin-left: 0; text-align: center; }
    .site-nav .nav-register { text-align: center; }
}

@media (max-width: 560px) {
    .section { padding: 52px 0; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .hero-ctas .btn { flex: 1 1 auto; }
    .app-sheet-body { padding: 26px 20px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .hero h1 { font-size: 1.75rem; }
}