/* ── Brand Pattern Utilities (May 2026) ──────────────────────── */
.pattern-yantra {
  background-image:
    linear-gradient(60deg, rgba(229,180,55,0.07) 0.5px, transparent 0.5px),
    linear-gradient(-60deg, rgba(229,180,55,0.07) 0.5px, transparent 0.5px),
    linear-gradient(0deg, rgba(229,180,55,0.04) 0.5px, transparent 0.5px);
  background-size: var(--pattern-yantra-size);
}
.pattern-constellation {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 20%, rgba(229,180,55,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 35%, rgba(229,180,55,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(249,243,232,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(229,180,55,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 80%, rgba(229,180,55,0.2) 0%, transparent 100%);
  background-size: 100px 100px;
}
/* ═══════════════════════════════════════════════════════════
   PUBLIC PAGE MOBILE - SEO/CITY/HUB PAGES
   ═══════════════════════════════════════════════════════════ */

/* ── Public nav on mobile (≤1300px - raised from 960px 2026-07-09, see base.css §9) ─ */
@media (max-width: 1300px) {
  .nav-inner {
    flex-wrap: wrap;
    position: relative;
  }
  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    padding: 8px 0 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 8px;
    gap: 2px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li { list-style: none; }
  .mobile-nav-toggle { display: flex !important; }
}

/* ── Hero sections on mobile ────────────────────────────── */
@media (max-width: 640px) {
  .cwa-hero, .tta-hero, section[style*="padding:100px 0"] {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }
  .hero-cta, div[style*="display:flex;gap:12px;justify-content:center"] {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn, div[style*="display:flex;gap:12px;justify-content:center"] .btn {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  /* Stats bars */
  div[style*="display:flex;gap:28px;justify-content:center;flex-wrap:wrap"] {
    gap: 16px !important;
  }
  /* Ticker bar */
  .ticker-bar { height: 32px; }
}

/* ── City page specific grids ────────────────────────────── */
@media (max-width: 560px) {
  /* Comparison/benefits 2-col → 1-col */
  .comparison, .benefits {
    grid-template-columns: 1fr !important;
  }
  /* Steps grid already fixed to auto-fit but ensure min-width */
  .steps {
    grid-template-columns: 1fr !important;
  }
  /* Astro grid cards min-width */
  .astro-grid {
    grid-template-columns: 1fr !important;
  }
  /* Loc grid */
  .loc-grid, .loc-intl {
    grid-template-columns: 1fr !important;
  }
  /* 5-tier pricing */
  .tiers-5 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Footer mobile ───────────────────────────────────────── */
@media (max-width: 900px) {
  #acx-footer .acx-fg {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
  }
}
@media (max-width: 560px) {
  #acx-footer .acx-fg {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 0 18px !important;
  }
  #acx-footer .acx-fp {
    font-size: 10.5px !important;
    padding: 3px 9px !important;
  }
}

/* ── General mobile polish ───────────────────────────────── */
@media (max-width: 480px) {
  /* Prevent horizontal overflow - targeted (not * which breaks position:fixed) */
  body, div, section, article, header, nav, main { max-width: 100%; }
  /* Exempt fixed/absolute positioned elements */
  #acx-wa-fab, #acx-fab { max-width: none !important; position: fixed !important; }
  img, svg, video { max-width: 100%; }
  /* FAQ items readable */
  .fq, .faq-q { font-size: 13.5px !important; padding: 13px 16px !important; }
  .fa, .faq-a { font-size: 13px !important; padding: 0 16px 12px !important; }
  /* Section headings */
  h1 { font-size: clamp(26px, 8vw, 40px) !important; }
  /* Geo pills wrap tightly */
  .acx-geo { gap: 5px !important; }
}


/* ── Free Tools Dropdown - Card Style ────────────────────────── */
.has-dropdown { position: relative; }

.nav-dropdown {
  display: none;
  position: fixed;
  z-index: 99999;
  min-width: 300px;
  background: rgba(12,12,45,.97);
  border: 1px solid rgba(229,180,55,.2);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.75), 0 0 0 1px rgba(229,180,55,.08);
  list-style: none;
  margin: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-dropdown li { list-style: none; margin: 0; }

.nav-dropdown a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background .15s !important;
  white-space: nowrap !important;
}
.nav-dropdown a:hover { background: rgba(229,180,55,.08) !important; }

.dd-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dd-text { display: flex; flex-direction: column; gap: 1px; }
.dd-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.dd-item-sub {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}
.nav-dropdown a:hover .dd-item-title { color: var(--gold); }

.dd-arrow {
  font-size: 8px;
  color: var(--gold);
  transition: transform .2s;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}
.has-dropdown:hover .dd-arrow { transform: rotate(180deg); }

/* Mobile */
@media (max-width: 960px) {
  .nav-dropdown {
    position: static;
    background: rgba(229,180,55,.04);
    border: none;
    border-left: 2px solid rgba(229,180,55,.25);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 6px 0 6px 6px;
    margin: 6px 0 6px 8px;
    min-width: 0;
    display: none;
  }
  /* JS toggles display:block directly on mobile */
  .dd-icon-wrap { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
  .nav-dropdown a {
    padding: 9px 10px !important;
    gap: 10px !important;
    border-radius: 8px !important;
    white-space: normal !important;
  }
  .nav-dropdown a:hover { background: rgba(229,180,55,.1) !important; }
  .dd-item-title { font-size: 13.5px; }
  .dd-item-sub { font-size: 11px; color: var(--text-dim); }
  /* Keep dd-arrow visible on mobile for toggle indicator */
  .dd-arrow { display: inline-block; font-size: 8px; margin-left: 4px; }
}