/* =============================================
   NSArrows — Responsive Styles
   Breakpoints: 1024 / 768 / 480
   ============================================= */

/* ── Tablet ──────────────────────────────── */
@media (max-width: 1024px) {
    :root { --container-pad: 1.5rem; }

    .youtube-card { grid-template-columns: 1fr; gap: 1.5rem; }
    .youtube-logo { width: 64px; height: 64px; }
    .hero-split { grid-template-columns: 1fr; gap: 2rem; }
    .hero-split .hero-content { text-align: center; padding-bottom: 0; }
    .hero-split .hero-actions { justify-content: center; }
    .hero-illustration { max-width: 480px; margin: 0 auto; }

    .blog-grid { grid-template-columns: repeat(2, 1fr); }

    .section-with-illustration { grid-template-columns: 1fr; gap: 2.5rem; }
    .section-with-illustration.reverse { direction: ltr; }

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

    .founder-section {
        grid-template-columns: 260px 1fr;
        gap: 2.5rem;
    }

    .values-grid { grid-template-columns: repeat(2, 1fr); }

    .product-card-featured {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .oscleaner-hero-inner { grid-template-columns: 1fr; }

    .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }

    .screenshots-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (landscape + portrait) ──────── */
@media (max-width: 768px) {
    :root { --container-pad: 1rem; }
    .blog-grid { grid-template-columns: 1fr; }

    /* Nav */
    .nav-logo-img { height: 34px; max-width: 240px; }
    .hamburger { display: flex; }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: var(--nav-height);
        left: 0; right: 0;
        background: rgba(7, 17, 31, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 1.25rem var(--container-pad) 2rem;
        border-bottom: 1px solid var(--color-border);
        gap: 0.25rem;
        z-index: 999;
    }

    .nav-links.nav-open { display: flex; }

    .nav-links a {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        border-radius: var(--radius-md);
    }

    .nav-cta {
        display: none; /* hidden on mobile; Download button shown in mobile menu instead */
    }

    /* Hero */
    .hero-content { padding: 2.5rem var(--container-pad) 4rem; }
    .hero-actions  { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }

    /* Sections */
    .section { padding: 3.5rem 0; }
    .section-header { margin-bottom: 2.5rem; }

    /* Grids → single column */
    .grid-2,
    .grid-3,
    .grid-4,
    .services-grid,
    .why-grid,
    .steps-grid,
    .values-grid { grid-template-columns: 1fr; }

    /* Founder */
    .founder-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .founder-photo-placeholder { aspect-ratio: 4/3; }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Contact form */
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 1.5rem; }

    /* Product card */
    .product-card-featured { padding: 1.75rem 1.25rem; }

    /* OS Cleaner hero */
    .download-buttons { flex-direction: column; }
    .download-buttons .btn { justify-content: center; }

    /* CTA banner */
    .cta-banner { padding: 2.5rem 1.5rem; }
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }

    /* Screenshots */
    .screenshots-grid { grid-template-columns: 1fr; }
}

/* ── Chat widget mobile ──────────────────────── */
@media (max-width: 480px) {
    #ns-chat-window {
        right: 1rem;
        left: 1rem;
        width: auto;
        bottom: 9rem;
    }

    #ns-chat-launcher {
        right: 1rem;
        bottom: 5rem;
    }
}

/* ── Mobile portrait ─────────────────────── */
@media (max-width: 480px) {
    :root { --container-pad: 0.875rem; }

    .trust-strip-inner { gap: 1.5rem; flex-direction: column; text-align: center; }

    .experience-logos { justify-content: center; }

    .industry-tags { justify-content: center; }

    .card-glass { padding: 1.5rem; }

    .footer-bottom-links { flex-direction: column; align-items: center; gap: 0.625rem; }
}