/* ═══ VOID AI — Mobile Responsive ═══ */

/* hamburger button */
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--muted);flex-shrink:0}
.nav-hamburger svg{display:block}

/* mobile nav overlay */
.nav-mobile-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(6,7,13,.92);backdrop-filter:blur(24px)}
.nav-mobile-overlay.open{display:flex;flex-direction:column;padding:20px;animation:fadeIn .2s ease}
.nav-mobile-close{align-self:flex-end;background:none;border:none;color:var(--muted);font-size:28px;cursor:pointer;padding:8px;margin-bottom:20px}
.nav-mobile-links{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-mobile-links a{padding:16px 20px;border-radius:12px;font-size:17px;font-weight:600;color:var(--text);text-decoration:none;transition:background .15s}
.nav-mobile-links a:hover,.nav-mobile-links a.active{background:rgba(136,85,237,.08);color:var(--accent-2)}
.nav-mobile-actions{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--border)}
.nav-mobile-actions .nav-login{display:block;text-align:center;padding:14px;border-radius:12px;font-size:15px}
.nav-mobile-actions .nav-cta{display:block;text-align:center;padding:14px;border-radius:12px;font-size:15px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ─── 900px: tablet ─── */
@media(max-width:900px){
  .container{padding:0 20px}
  .section{padding:60px 20px}
  .features-grid,.pricing-grid{grid-template-columns:1fr}
  .models-grid,.models-row,.faq-grid{grid-template-columns:1fr}
  .callout{flex-direction:column}
  .callout-visual{width:100%;height:120px}
  .preview-sidebar{display:none}
  .hero-preview{width:95vw}
  footer{flex-direction:column;text-align:center;gap:12px}
  .footer-links{justify-content:center}
}

/* ─── 768px: mobile ─── */
@media(max-width:768px){
  /* nav */
  nav{padding:10px 16px}
  .nav-links{display:none}
  .nav-right{gap:8px}
  .nav-hamburger{display:block}
  .nav-login{padding:6px 12px;font-size:12px}
  .nav-cta{padding:7px 16px;font-size:12px}

  /* hero */
  .hero{padding:100px 16px 48px}
  .hero h1{font-size:32px;letter-spacing:-1.5px}
  .hero-sub{font-size:15px;margin-bottom:28px}
  .hero-actions{flex-direction:column;width:100%;max-width:340px}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;padding:14px 24px;font-size:14px}
  .hero-note{font-size:11px;margin-bottom:32px}
  .hero-badge{font-size:11px;padding:5px 14px}
  .hero::before{width:600px;height:600px}

  /* hero preview */
  .hero-preview{width:calc(100vw - 32px);border-radius:12px}
  .preview-body{min-height:260px}
  .preview-chat{padding:16px}
  .pmsg{font-size:12px;padding:10px 14px;max-width:92%}

  /* features */
  .feat{padding:22px}
  .feat h3{font-size:14px}
  .feat p{font-size:12px}

  /* callout */
  .callout{padding:24px}
  .callout-text h3{font-size:18px}
  .callout-text p{font-size:13px}

  /* pricing */
  .plan-card{padding:24px}
  .plan-price{font-size:36px}
  .plan-features li{font-size:12px}

  /* sections */
  .section{padding:48px 16px}
  .section h2{font-size:28px;letter-spacing:-1px}
  .section .desc{font-size:14px}
  .section-eyebrow{font-size:10px}

  /* compare */
  .compare-table-wrap{margin:0 -16px;padding:0 16px}
  .compare-table{font-size:11px}
  .compare-table th,.compare-table td{padding:8px 8px}

  /* models */
  .model-card{padding:24px}
  .model-card h3{font-size:18px}

  /* faq */
  .faq-q{padding:14px 16px;font-size:13px}

  /* final cta */
  .final-cta{padding:60px 16px}
  .final-cta h2{font-size:28px;letter-spacing:-1px}
  .final-cta p{font-size:14px}

  /* auth */
  .auth-page{padding:80px 16px 40px}
  .auth-card{padding:28px 24px;border-radius:16px}
  .auth-card h2{font-size:24px}

  /* dashboard */
  .dash-container{flex-direction:column}
  .dash-sidebar{width:100%;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch}
  .dash-tab{white-space:nowrap;padding:8px 14px;font-size:12px}

  /* chat page */
  .chat-sidebar{position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:200;transition:left .25s ease;box-shadow:none}
  .chat-sidebar.open{left:0;box-shadow:10px 0 40px rgba(0,0,0,.5)}
  .chat-sidebar-toggle{display:flex !important}
  .chat-prompt-grid{grid-template-columns:1fr;max-width:100%}
  .chat-msg{max-width:95%}
  .chat-welcome h2{font-size:22px}
  .chat-welcome p{font-size:13px}

  /* support page */
  .support-container{padding:16px !important}
  .support-tabs{flex-wrap:wrap}
  .support-tab{flex:1;min-width:120px;text-align:center}

  /* footer */
  footer{padding:24px 16px}
  .footer-left{font-size:11px}
  .footer-links{gap:16px;font-size:11px}
}

/* ─── 480px: small phone ─── */
@media(max-width:480px){
  nav{padding:8px 12px}
  .nav-logo{font-size:18px}
  .nav-logo img{height:26px !important}
  .nav-right .nav-login{display:none}
  .hero h1{font-size:26px;letter-spacing:-1px}
  .hero-sub{font-size:14px}
  .plan-price{font-size:32px}
  .section h2{font-size:24px}
  .final-cta h2{font-size:24px}
  .auth-card{padding:24px 20px}
}