/* ============================================================
   TARYNIX — Arabic / RTL layer. Loaded only by /ar/ pages.
   ============================================================ */

:root {
  --font-display: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
}

/* Arabic has no uppercase and needs no tight tracking */
[dir="rtl"] body { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0; line-height: 1.28; font-weight: 700;
}
[dir="rtl"] .display-xl { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
[dir="rtl"] .display-lg { font-size: clamp(2rem, 4vw, 3.2rem); }
[dir="rtl"] .display-md { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
[dir="rtl"] .eyebrow {
  letter-spacing: 0; font-size: 0.78rem; font-weight: 600; text-transform: none;
}
[dir="rtl"] .lede, [dir="rtl"] p, [dir="rtl"] li { line-height: 1.85; }
[dir="rtl"] .footer h5 { letter-spacing: 0; font-size: 0.8rem; text-transform: none; }
[dir="rtl"] .jcat { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }

/* ---- flip directional decoration ---- */
[dir="rtl"] .btn { padding: 0.72rem 1.5rem 0.72rem 0.72rem; }
[dir="rtl"] .btn .orb svg,
[dir="rtl"] .nav-cta .orb svg,
[dir="rtl"] .card-link svg,
[dir="rtl"] .jgo svg,
[dir="rtl"] .mega-foot .mf-orb svg { transform: scaleX(-1); }
[dir="rtl"] .card-link:hover svg { transform: scaleX(-1) translate(3px, -3px); }
[dir="rtl"] .btn:hover .orb { transform: translate(-2px, -2px) scale(1.07); }
[dir="rtl"] .nav-cta { margin-left: 0; margin-right: 0.4rem; padding: 0.5rem 1.1rem 0.5rem 0.55rem; }
[dir="rtl"] .nav-logo { margin-right: 0; margin-left: 0.9rem; }
[dir="rtl"] .jgo { right: auto; left: 1.4rem; }
[dir="rtl"] .jcard:hover .jgo { transform: translate(-3px, -3px); }

/* rails and floating chrome move to the other edge */
[dir="rtl"] .rail { right: auto; left: 1.6rem; }
[dir="rtl"] .rail em { right: auto; left: calc(100% + 0.7rem); transform: translateX(-6px); }
[dir="rtl"] .rail a:hover em { transform: translateX(0); }
[dir="rtl"] .float-actions { right: auto; left: 1.6rem; align-items: flex-start; }
@media (max-width: 620px) { [dir="rtl"] .float-actions { left: 1rem; right: auto; } }

/* progress bar fills from the right */
[dir="rtl"] .progress i { transform-origin: 100% 50%; }

/* quote mark and list ticks */
[dir="rtl"] .tcard blockquote { padding-right: 0; }
[dir="rtl"] .tcard blockquote::before { left: auto; right: -0.2rem; content: "\201D"; }
/* A tick is not directional — mirroring it just makes it read as a stray
   chevron. Only the layout flips, the glyph does not. */
[dir="rtl"] .checks li svg { transform: none; }
[dir="rtl"] .checks li:hover svg { transform: scale(1.25) rotate(6deg); }

/* the seam glow and hero bloom are symmetric, but the aurora blobs are not */
[dir="rtl"] .aurora .b1 { left: auto; right: -140px; }
[dir="rtl"] .aurora .b2 { right: auto; left: -100px; }

/* Marquee + logo rail scroll the other way.
   animation-direction:reverse is WRONG here: an RTL flex track is laid out
   right-aligned, so reversing a translateX(-50%) parks most of the track
   off-screen left and the rail renders almost empty. Translate positive
   instead — the track is duplicated, so +50% reveals the second copy. */
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@keyframes logo-scroll-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; animation-direction: normal; }
[dir="rtl"] .logo-track { animation-name: logo-scroll-rtl; animation-direction: normal; }

/* legal pages read from the right */
[dir="rtl"] .legal { margin-right: 0; margin-left: auto; }
[dir="rtl"] .legal-block a { text-underline-offset: 4px; }

/* language switch */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 0.85rem; margin-inline-start: 0.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s;
}
.lang-switch:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Latin numbers, phone numbers and emails stay left-to-right ----
   Without isolation the bidi algorithm reorders "+971 54 738 9262" into
   "9262 738 54 971+", which is unreadable. */
[dir="rtl"] .btn-wa,
[dir="rtl"] .wa-fab,
[dir="rtl"] .footer a[href^="https://wa.me"],
[dir="rtl"] .legal-block a[href^="https://wa.me"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .tnum,
[dir="rtl"] .stat-num,
[dir="rtl"] .step .num,
[dir="rtl"] .rb-n {
  direction: ltr;
  unicode-bidi: isolate;
}
/* keep the trailing orb on the correct side of the LTR-isolated button */
[dir="rtl"] .btn-wa { flex-direction: row-reverse; }
[dir="rtl"] .btn-wa .orb svg { transform: scaleX(-1); }