/* ── ALWAYS HIDDEN BY DEFAULT ── */
.mobile-menu { display: none !important; }
.mobile-menu.open { display: flex !important; }
.hamburger { display: none; }

/* ═══════════════════════════════════════════════
   INFYTRIX UAE — Mobile Responsive Styles
   Applies to all pages via <link> tag
   Breakpoints: 768px (tablet), 480px (mobile)
═══════════════════════════════════════════════ */

/* ── TABLET (768px and below) ── */
@media (max-width: 768px) {

  /* TOP BAR */
  .top-bar { padding: 6px 16px; gap: 8px; }
  .top-bar-text { display: none; }

  /* NAV */
  nav { padding: 0 16px; position: sticky; top: 0; z-index: 200; }
  .nav-geo { display: none; }
  .nav-center { display: none; }
  .logo-block { padding: 12px 0; }
  .logo-svg { height: 22px; }
  .logo-ar { font-size: 9px; }

  /* HAMBURGER */
  .nav-right { display: flex; align-items: center; gap: 10px; }
  .btn-demo { display: none; }
  .hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    z-index: 300;
  }
  .hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #12182b;
    border-radius: 2px;
    transition: all 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* MOBILE MENU OVERLAY */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #12182b;
    z-index: 250;
    flex-direction: column;
    padding: 80px 24px 40px;
    gap: 0;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
  }
  .mobile-menu a:hover { color: #00C2CB; }
  .mobile-menu-cta {
    margin-top: 32px;
    background: #00C2CB;
    color: #12182b !important;
    border: none;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    border-radius: 3px;
    text-align: center;
    border-bottom: none !important;
  }
  .mobile-menu-close {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* PAGE HERO */
  .page-hero { padding: 40px 16px; }
  .page-hero-geo { display: none; }
  .page-hero-fade { display: none; }
  .page-hero-title { font-size: 28px; }
  .page-hero-sub { font-size: 13px; }
  .page-hero-belief { font-size: 14px; }

  /* HOMEPAGE HERO */
  .hero {
    flex-direction: column;
    padding: 40px 16px 32px;
    min-height: auto;
    gap: 32px;
  }
  .hero-geo-right { display: none; }
  .hero-fade { display: none; }
  .hero-left { max-width: 100%; }
  .hero-h1 { font-size: 28px; }
  .hero-sub { font-size: 13px; }
  .hero-right { width: 100%; }
  .dash-mock { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
  .btns { flex-wrap: wrap; }
  .btn-primary, .btn-outline, .btn-hero-primary, .btn-hero-outline { width: 100%; text-align: center; justify-content: center; }

  /* TICKER */
  .ticker { padding: 10px 16px; gap: 20px; }
  .ti { font-size: 10px; }

  /* SECTIONS */
  .agentic { padding: 40px 16px; }
  .agentic-grid { grid-template-columns: 1fr; gap: 32px; }
  .pillars { padding: 40px 16px; }
  .pillars-grid { grid-template-columns: 1fr; gap: 1px; }
  .uae-built { padding: 40px 16px; }
  .uae-geo-bg { display: none; }
  .uae-fade { display: none; }
  .uae-grid { grid-template-columns: 1fr; gap: 32px; }
  .mkt-grid { grid-template-columns: 1fr 1fr; }
  .team { padding: 40px 16px; }
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .table-sec { padding: 40px 16px; overflow-x: auto; }
  .ai-table { font-size: 12px; min-width: 600px; }
  .table-sec { overflow-x: auto; }

  /* WHY INFYTRIX */
  .advantage { padding: 40px 16px; }
  .advantage-grid { grid-template-columns: 1fr; gap: 32px; }
  .pillars-band { padding: 40px 16px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .two-col-sec { padding: 40px 16px; }
  .two-col-grid { grid-template-columns: 1fr; }
  .scale-sec { padding: 40px 16px; }
  .scale-grid { grid-template-columns: 1fr; gap: 32px; }
  .scale-stats { grid-template-columns: 1fr 1fr; }
  .vm-sec { padding: 40px 16px; }
  .vm-grid { grid-template-columns: 1fr; gap: 16px; }
  .security-sec { padding: 40px 16px; }
  .security-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-band { padding: 40px 16px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-cta-primary, .btn-cta-outline { width: 100%; max-width: 320px; justify-content: center; }

  /* FEATURES PAGE */
  .feature-tabs { padding: 0 16px; }
  .tab-link { padding: 12px 10px; font-size: 11px; }
  .feature-sec { padding: 40px 16px; }
  .feature-grid { grid-template-columns: 1fr; gap: 32px; direction: ltr !important; }
  .feature-grid.reverse { direction: ltr !important; }
  .conclusion { padding: 40px 16px; }
  .conclusion-grid { grid-template-columns: 1fr; gap: 32px; }
  .conclusion-stats { grid-template-columns: 1fr 1fr; }
  .table-sec.dark { padding: 40px 16px; }
  .it-tabs { gap: 4px; }
  .it-tab { font-size: 10px; padding: 6px 10px; }
  .it-panel { padding: 20px 16px; }
  .it-panel-grid { grid-template-columns: 1fr; gap: 20px; }

  /* PRODUCT PAGE */
  .page-hero { flex-direction: column; gap: 32px; min-height: auto; }
  .page-hero-left { max-width: 100%; }
  .page-hero-right { width: 100%; }
  .hero-badge-stack { gap: 8px; }
  .hero-badge { min-width: auto; }
  .modules-sec { padding: 40px 16px; }
  .modules-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .module-detail-inner { grid-template-columns: 1fr; }
  .md-left { border-right: none; border-bottom: 0.5px solid var(--border); padding: 24px 20px; }
  .md-right { padding: 24px 20px; }
  .arch-sec { padding: 40px 16px; }
  .arch-modules-row { flex-wrap: wrap; gap: 8px; }
  .arch-module { max-width: calc(33% - 6px); min-width: 80px; }
  .arch-arrows { flex-wrap: wrap; }
  .arch-arrow { max-width: calc(33% - 6px); }
  .arch-output { flex-direction: column; gap: 10px; }
  .values-sec { padding: 40px 16px; }
  .values-grid { grid-template-columns: 1fr; }
  .support-sec { padding: 40px 16px; }
  .support-grid { grid-template-columns: 1fr; }

  /* PRICING PAGE */
  .pricing-sec { padding: 40px 16px; }
  .plans-grid { grid-template-columns: 1fr; max-width: 100%; }
  .audience-sec { padding: 40px 16px; }
  .audience-grid { grid-template-columns: 1fr; }
  .faq-sec { padding: 40px 16px; }
  .faq-grid { grid-template-columns: 1fr; }

  /* CAREERS PAGE */
  .about-sec { padding: 40px 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .values-sec { padding: 40px 16px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .perks-sec { padding: 40px 16px; }
  .perks-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .roles-sec { padding: 40px 16px; }
  .apply-sec { padding: 40px 16px; }
  .apply-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }

  /* CONNECT PAGE */
  .contact-sec { padding: 40px 16px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .modal-form-row { grid-template-columns: 1fr; gap: 10px; }

  /* ABOUT PAGE */
  .story-sec { padding: 40px 16px; }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-strip { padding: 20px 16px; gap: 0; flex-wrap: wrap; }
  .stat-block { min-width: 50%; padding: 16px; border-right: none; border-bottom: 0.5px solid rgba(18,24,43,0.1); }
  .stat-block:nth-child(odd) { border-right: 0.5px solid rgba(18,24,43,0.1); }
  .legal-sec { padding: 40px 16px; }
  .legal-sec-grid { grid-template-columns: 1fr; gap: 32px; }

  /* LEGAL PAGES */
  .legal-layout { grid-template-columns: 1fr; padding: 32px 16px; gap: 24px; }
  .legal-nav { position: static; display: none; }
  .legal-section { margin-bottom: 32px; padding-bottom: 32px; }
  .legal-section-title { font-size: 18px; }

  /* FOOTER */
  .footer-top { padding: 40px 16px 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { padding: 16px; flex-direction: column; gap: 12px; text-align: center; }
  .legal-right { text-align: center; }
  .footer-divider { margin: 0 16px; }

  /* SECTION LABELS & TITLES */
  .sec-title { font-size: 22px; }
  section { padding: 40px 16px; }
}

/* ── MOBILE (480px and below) ── */
@media (max-width: 480px) {

  .page-hero-title { font-size: 24px; }
  .hero-h1 { font-size: 24px; }
  .sec-title { font-size: 20px; }
  .stats-strip { flex-direction: column; }
  .stat-block { min-width: 100%; border-right: none; }
  .modules-grid { grid-template-columns: 1fr 1fr; }
  .arch-module { max-width: calc(50% - 5px); }
  .arch-arrow { max-width: calc(50% - 5px); }
  .mkt-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .perks-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .scale-stats { grid-template-columns: 1fr; }
  .conclusion-stats { grid-template-columns: 1fr; }
  .it-tabs { flex-direction: column; }
  .it-tab { border-radius: 3px !important; }
  .hero-badge-stack { display: none; }
  .modal-overlay { padding: 12px; }
  .plan-badge { font-size: 9px; padding: 3px 12px; }
}