/* ═══ Mobile Fixes ═══ */
@media (max-width: 900px) {
  .main-nav { display: none !important; }
  .mobile-menu-btn { display: block !important; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }

  .container, .container-narrow { padding: 0 16px; }

  .header-inner {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .logo { font-size: 16px !important; }
  .logo-icon { font-size: 22px !important; }

  .header-actions { gap: 6px !important; }
  .header-actions .btn { padding: 8px 14px !important; font-size: 12px !important; }

  .hero { padding: 50px 0 40px !important; }
  .hero-title { font-size: 42px !important; letter-spacing: -1px !important; }
  .hero-title-2 { letter-spacing: 4px !important; font-size: 20px !important; }
  .hero-badge { font-size: 11px !important; padding: 6px 14px !important; }
  .typing-wrap { font-size: 16px !important; margin: 20px 0 !important; }
  .hero-desc { font-size: 14px !important; padding: 0 4px !important; line-height: 1.8 !important; }

  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 8px !important;
    margin-bottom: 40px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }
  .stat-item { padding: 16px 10px !important; }
  .stat-num { font-size: 24px !important; }
  .stat-lbl { font-size: 11px !important; }

  .section { padding: 50px 0 !important; }
  .section-title { font-size: 24px !important; margin-bottom: 30px !important; }

  .features-grid,
  .packages-grid,
  .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .feature-card,
  .package-card,
  .post-card { padding: 22px 18px !important; }
  .package-icon, .feature-icon { font-size: 38px !important; }
  .package-title, .feature-card h3 { font-size: 16px !important; }
  .package-price { font-size: 18px !important; }

  .cta-section { padding: 50px 0 !important; }
  .cta-section h2 { font-size: 22px !important; }
  .cta-section p { font-size: 14px !important; }
  .cta-actions { flex-direction: column !important; }
  .cta-actions .btn { width: 100% !important; }

  .form-card { padding: 20px 16px !important; }
  .form-group input, .form-group textarea, .form-group select {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .auth-card { padding: 28px 20px !important; margin: 0 12px !important; }
  .auth-title { font-size: 22px !important; }

  .dash-header {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
  }
  .dash-title { font-size: 18px !important; }
  .dash-avatar { width: 60px !important; height: 60px !important; font-size: 22px !important; }

  .dash-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dash-stat { padding: 16px 10px !important; }
  .dash-stat-num { font-size: 22px !important; }

  .dash-actions { flex-direction: column !important; }
  .dash-actions .btn { width: 100% !important; }

  .table-wrap {
    border-radius: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 600px !important; }
  .data-table th, .data-table td { padding: 10px 12px !important; font-size: 12px !important; }

  .package-detail { grid-template-columns: 1fr !important; gap: 24px !important; }
  .package-detail-title { font-size: 22px !important; }
  .package-icon-lg { font-size: 56px !important; }
  .price-value { font-size: 24px !important; }
  .price-box { position: static !important; padding: 22px !important; }

  .contact-grid, .support-topics {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .contact-card, .support-topic { padding: 20px 14px !important; }
  .contact-icon, .st-icon { font-size: 32px !important; }

  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; }

  .admin-nav { flex-direction: column !important; }
  .admin-nav a { text-align: center !important; }
  .admin-stats { grid-template-columns: 1fr 1fr !important; }
  .admin-packages { grid-template-columns: 1fr !important; }

  .dropzone { padding: 40px 16px !important; }
  .dz-icon { font-size: 44px !important; }
  .dz-text { font-size: 15px !important; }

  .flash-container { top: 70px !important; width: 92% !important; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 34px !important; }
  .hero-stats { grid-template-columns: 1fr !important; }
  .contact-grid, .support-topics, .dash-stats, .admin-stats { grid-template-columns: 1fr !important; }
  .header-actions .btn { padding: 6px 10px !important; font-size: 11px !important; }
  .logo-text { font-size: 14px !important; }
}