/* =====================================================
   ARABIC FONT OVERRIDE (RTL) — Tajawal (similar to Hacen: modern, clean, geometric)
===================================================== */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] button, html[dir="rtl"] input,
html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] a,
html[dir="rtl"] span, html[dir="rtl"] p, html[dir="rtl"] div,
html[dir="rtl"] label, html[dir="rtl"] li {
  font-family: 'Tajawal', 'Cairo', Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* =====================================================
   RESET & BASE
===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  color: var(--brand-text);
  background: var(--brand-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', Arial, sans-serif; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* =====================================================
   LAYOUT
===================================================== */
.container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 96px 0; }
.section-gray { background: var(--brand-gray); }
.section-blue { background: var(--brand-blue); color: var(--brand-white); }
.section-dark { background: var(--brand-dark); color: var(--brand-white); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* =====================================================
   TYPOGRAPHY
===================================================== */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-blue); margin-bottom: 10px;
  font-family: 'IBM Plex Sans', sans-serif;
}
html[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 13px; }
.section-blue .eyebrow, .section-dark .eyebrow { color: var(--brand-yellow); }
.section-title {
  font-size: clamp(28px, 4.2vw, 50px); font-weight: 700;
  letter-spacing: -.03em; margin-bottom: 16px;
}
html[dir="rtl"] .section-title { letter-spacing: 0; }
.section-sub {
  font-size: 18px; color: var(--brand-muted); max-width: 680px; line-height: 1.7;
}
.section-blue .section-sub, .section-dark .section-sub { color: rgba(255,255,255,.7); }

/* RTL: direction:rtl is already inherited from html[dir="rtl"],
   so flex/grid containers reverse automatically — no extra rules needed here. */

/* Accessibility */
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }