/* ============================================================
   NEXAIVERSE — Responsive Stylesheet (responsive.css)
   Breakpoints: >900px Desktop, 560-900px Tablet, <560px Mobile
   ============================================================ */

/* ── Tablet (max-width: 900px) ──────────────────────── */
@media (max-width: 900px) {
    .nav-pills { display: none; }
    .btn-get-started.desktop-only { display: none; }
    .hamburger { display: block; }
    header { padding: 0.5rem 1rem; }
    .live-hud-bar { font-size: 0.6rem; padding: 0.25rem 0.8rem; gap: 0.3rem; }

    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .benefit-chips { grid-template-columns: 1fr 1fr; }
    .blog-hero-row { gap: 1.5rem; }
    .blog-hero-icon { width: 80px; height: 80px; font-size: 2rem; }

    section { padding: 3.5rem 1.5rem; }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .two-col-grid { grid-template-columns: 1fr; }
    .four-col-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .video-preview { min-height: 240px; }
    .video-thumb { min-height: 240px; }
}

/* ── Mobile (max-width: 560px) ──────────────────────── */
@media (max-width: 560px) {
    html { font-size: 14px; }
    section { padding: 2.5rem 1rem; }
    h2 { font-size: 1.5rem; }
    .card-grid { grid-template-columns: 1fr; }
    .three-col-grid { grid-template-columns: 1fr; }
    .four-col-grid { grid-template-columns: 1fr 1fr; }

    #stats-bar { gap: 0.8rem; padding: 1.2rem 0.8rem; }
    .stat-item { min-width: 70px; flex: 0 0 calc(50% - 0.8rem); }
    .stat-item .stat-num { font-size: 1.4rem; }
    .stat-divider { display: none; }

    .form-row { flex-direction: column; gap: 0; }
    .form-half { width: 100%; }
    .form-group { margin-top: 0.6rem; }

    .benefit-chips { grid-template-columns: 1fr 1fr; gap: 0.3rem; }
    .benefit-chips span { font-size: 0.75rem; }

    .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-content { padding: 0 0.5rem; }
    .btn-row { flex-direction: column; align-items: center; }
    .btn-primary, .btn-outline { width: 100%; text-align: center; }

    .blog-tabs { gap: 0.3rem; }
    .blog-tab { padding: 0.4rem 0.8rem; font-size: 0.72rem; }
    .blog-hero-row { flex-direction: column; text-align: center; }
    .blog-hero-icon { margin: 0 auto; }

    .video-preview { min-height: 200px; }
    .video-thumb { min-height: 200px; }
    .video-play-btn svg { width: 50px; height: 50px; }
    .video-play-btn svg polygon { transform: scale(0.6); transform-origin: center; }

    .inquiry-modal-box { width: 95%; padding: 1.2rem; }
    .live-hud-bar { font-size: 0.55rem; padding: 0.2rem 0.5rem; gap: 0.2rem; top: auto; bottom: 0; border-radius: 10px 10px 0 0; border: 1px solid var(--border); border-bottom: none; }
    header { padding: 0.4rem 0.8rem; }

    .enterprise-block { padding: 1.5rem; }
    #agentCanvas { height: 380px; }
}

/* ── Small Mobile (max-width: 380px) ────────────────── */
@media (max-width: 380px) {
    .four-col-grid { grid-template-columns: 1fr; }
    .stat-item { flex: 0 0 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .nav-pills { display: none; }
}

/* ── Desktop (min-width: 901px) ─────────────────────── */
@media (min-width: 901px) {
    .hamburger { display: none; }
    .mobile-nav-overlay { display: none !important; }
}