/* ===== تحسين العرض على الجوال والتابلت ===== */
@media (max-width: 768px) {
  html { font-size: 15px; }

  .header-inner { flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .logo img { height: 52px; width: auto; }
  .brand-name { font-size: 1.1rem; }
  .tagline { font-size: .95rem; text-align: center; margin: 0; }

  .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
  .nav a { font-size: 1rem; }

  .hero { padding: 36px 0; text-align: center; }
  .hero-logo { max-width: 170px; height: auto; }
  .hero h1 { font-size: 1.9rem; line-height: 1.35; }
  .hero p { font-size: 1.1rem; }

  .section { padding: 44px 0; }
  .section h2 { font-size: 1.8rem; }

  .services-grid,
  .agencies-grid,
  .product-grid { grid-template-columns: 1fr; }

  .brand-cards { grid-template-columns: 1fr; gap: 16px; }
  .service, .a-card, .brand-card { padding: 20px; }
  .service h3, .a-card h3 { font-size: 1.25rem; }

  .location-card { padding: 24px 16px; }
  .loc-lines p { font-size: 1.05rem; }
  .loc-en { font-size: .85rem; }
  .loc-btns { flex-direction: column; width: 100%; }
  .waze-btn { justify-content: center; width: 100%; }

  .contact-cards { flex-direction: column; align-items: stretch; }
  .contact-card { max-width: none; flex: none; padding: 24px 16px; }
  .contact-card p { font-size: 1.25rem; }

  .page-hero { padding: 44px 0; }
  .page-hero h1 { font-size: 2.2rem; }
  .agency-title img { height: 44px; }
  .cat-row { gap: 18px 12px; }
  .cat-circle { width: 90px; height: 90px; }
}

@media (max-width: 400px) {
  html { font-size: 14px; }
  .nav { gap: 6px 12px; }
}