/* --- Accessibility: visible focus ring (injected) --- */
:focus-visible { outline: 2px solid var(--purple, #3F1993); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--purple, #3F1993);
  outline-offset: 3px;
}
.skip-to-content {
  position: absolute; left: -9999px; top: 0;
  background: var(--purple, #3F1993); color: #fff; padding: 8px 16px;
  text-decoration: none; z-index: 10000; border-radius: 0 0 8px 0;
}
.skip-to-content:focus { left: 0; }

  :root {
    --purple: #3F1993;
    --purple-deep: #2a0f66;
    --purple-soft: #ede7f8;
    --purple-softer: #f5f2fb;
    --lilac: #C9A4F5;
    --blush: #F8C8DC;
    --blush-soft: #fdf0f4;
    --charcoal: #09090A;
    --ink: #1a1a1f;
    --gray-700: #4a4a52;
    --gray-500: #8a8a92;
    --gray-400: #b4b4bb;
    --gray-300: #d6d6dc;
    --gray-200: #e3e3e8;
    --gray-100: #eaeaee;
    --gray-50: #f4f4f6;
    --cream: #f6f4ef;
    --cream-2: #efece4;
    --paper: #ffffff;
    --cosmic: #0D0521;
    --cosmic-2: #170833;
    --green-accent: #10b981;
    --red-text: #991b1b;
    --amber-text: #92400e;
    
    --display: "Big Shoulders Display", Impact, "Arial Black", sans-serif;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --container: 1280px;
    --radius: 14px;
    --radius-lg: 22px;
    --ease: cubic-bezier(.2,.7,.2,1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  body {
    margin: 0;
    font-family: var(--sans);
    color: var(--charcoal);
    background: var(--cream);
    line-height: 1.5;
    font-size: 16px;
    overflow-x: hidden;
  }

  /* subtle paper grain across the whole page */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 1;
    mix-blend-mode: multiply;
  }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  img, svg { display: block; max-width: 100%; }

  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
  }

  /* ---------- Typography ---------- */
  .display {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 0.88;
    text-transform: none;
  }
  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
  }
  .eyebrow .dot { color: var(--purple); margin-right: 8px; }
  h1 { margin: 0; }
  h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; }
  p { margin: 0; }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    background: color-mix(in srgb, var(--cream) 78%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--charcoal) 8%, transparent);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
  }
  .nav-logo svg { height: 22px; width: auto; }
  .nav-links {
    display: flex;
    gap: 26px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-links > a,
  .nav-links > .nav-dropdown > .nav-trigger {
    opacity: 0.85;
    transition: opacity .2s var(--ease);
  }
  .nav-links > a:hover,
  .nav-links > .nav-dropdown > .nav-trigger:hover { opacity: 1; }
  .nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

  .nav-links a.active {
    opacity: 1;
    color: var(--purple);
  }
  /* Hamburger menu trigger — circular, matches Sign in button height */
  .nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--gray-100);
    border-radius: 50%;
    cursor: pointer;
    color: black !important;
    flex-shrink: 0;
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .nav-burger:hover {
    background: var(--purple-softer);
    border-color: color-mix(in srgb, var(--purple) 25%, transparent);
  }
  .nav-burger span {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
    transform-origin: center;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Slide-in drawer — full-width on phones, right-aligned panel on tablet */
  .nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--cream);
    box-shadow: -24px 0 48px -16px rgba(20, 10, 50, 0.18);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }
  .nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
  }
  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--gray-100);
    min-height: 68px;
  }
  .nav-drawer-header .brand {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
  }
  .nav-drawer-close {
    width: 36px; height: 36px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--charcoal);
    display: grid;
    place-items: center;
  }
  .nav-drawer-close svg { width: 20px; height: 20px; }
  .nav-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 24px;
  }
  .nav-drawer-body a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--charcoal);
    border-radius: 10px;
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .nav-drawer-body a:hover {
    background: var(--purple-softer);
    color: var(--purple);
  }
  .nav-drawer-body a.active {
    color: var(--purple);
    background: var(--purple-softer);
  }
  .nav-drawer-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
  }
  .nav-drawer-section h4 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0 16px 8px;
  }
  .nav-drawer-footer {
    padding: 16px 24px 24px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav-drawer-footer .btn { width: 100%; justify-content: center; }
  .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 5, 32, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
    z-index: 999;
  }
  .nav-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  /* ---------- Solutions mega-dropdown (light mode, constrained width) ---------- */
  .nav-dropdown { position: relative; }
  .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity .2s var(--ease);
  }
  .nav-trigger:hover,
  .nav-dropdown:hover .nav-trigger,
  .nav-dropdown.open .nav-trigger { opacity: 1; }
  .nav-trigger .chev {
    width: 10px;
    height: 10px;
    transition: transform .25s var(--ease);
    margin-top: 1px;
  }
  .nav-dropdown:hover .nav-trigger .chev,
  .nav-dropdown.open .nav-trigger .chev { transform: rotate(180deg); }

  /* The mega card itself — light mode, constrained, not full-bleed */
  .nav-mega {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    left: auto;
    width: 820px;
    max-width: calc(100vw - 48px);
    background: var(--paper);
    color: var(--charcoal);
    border: 1px solid var(--gray-100);
    border-radius: 18px;
    padding: 28px 32px 32px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
    z-index: 50;
    box-shadow: 0 30px 60px -20px rgba(20, 10, 50, 0.22), 0 8px 16px -8px rgba(20, 10, 50, 0.08);
  }
  /* Tiny bridge so moving from trigger -> dropdown doesn't lose hover */
  .nav-mega::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
  }
  .nav-dropdown:hover .nav-mega,
  .nav-dropdown.open .nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .nav-mega-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
  .nav-mega-col h4 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
  }
  .nav-mega-item {
    display: block;
    padding: 10px 12px;
    margin: 0 -12px 4px;
    border-radius: 10px;
    transition: background .2s var(--ease);
  }
  .nav-mega-item:hover { background: var(--purple-softer); }
  .nav-mega-logo {
    display: flex;
    align-items: center;
    height: 31px;
    margin-bottom: 6px;
  }
  .nav-mega-logo svg {
    height: 100%;
    width: auto;
    max-width: 208px;
  }
  .nav-mega-logo.xs { height: 25px; }
  .nav-mega-logo.xs svg { max-height: 25px; max-width: 166px; }
  .nav-mega-logo.ureed-sm { height: 28px; }
  .nav-mega-logo.ureed-sm svg { max-height: 28px; max-width: 187px; }
  /* Taller height for full-body logos with tall viewBoxes (Tarjama, Media, TCL) */
  .nav-mega-logo.tall { height: 31px; }
  .nav-mega-logo.tall svg { max-height: 31px; }
  /* 0.6x smaller variant for ContentLab logo */
  .nav-mega-logo.tall.sm { height: 14.4px; }
  .nav-mega-logo.tall.sm svg { max-height: 14.4px; }
  .nav-mega-logo.tall.lg { height: 33px; }
  .nav-mega-logo.tall.lg svg { max-height: 33px; max-width: 192px; }
  /* LLM square-ish logo */
  .nav-mega-logo.llm-mark { height: 28px; }
  .nav-mega-logo.llm-mark svg { max-width: 64px; }
  .nav-mega-logo.llm-mark.lg { height: 34px; }
  .nav-mega-logo.llm-mark.lg svg { max-width: 77px; }
  /* Enlarged dropdown logos (Tarjama & Media Services at 1.5x) */
  .nav-mega-logo.xl { height: 32px; }
  .nav-mega-logo.xl svg { max-height: 32px; max-width: 180px; }
  .nav-mega-logo.xl.sm { height: 19.2px; }
  .nav-mega-logo.xl.sm svg { max-height: 19.2px; max-width: 108px; }
  .nav-mega-logo.xl.xxl { height: 38.4px; }
  .nav-mega-logo.xl.xxl svg { max-height: 38.4px; max-width: 216px; }

  .nav-mega-item p {
    margin: 0;
    font-size: 12.5px;
    color: var(--gray-500);
    line-height: 1.5;
    max-width: 46ch;
  }
  .nav-mega-item:hover p { color: var(--gray-700); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: all .25s var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .btn-primary {
    background: var(--charcoal);
    color: #fff;
    border: 1px solid var(--charcoal);
  }
  .btn-primary:hover {
    background: var(--purple);
    border-color: var(--purple);
    transform: translateY(-1px);
  }
  .btn-primary .arrow { transition: transform .25s var(--ease); }
  .btn-primary:hover .arrow { transform: translateX(3px); }
  .btn-ghost {
    background: transparent;
    color: var(--charcoal);
    border: 1px solid color-mix(in srgb, var(--charcoal) 18%, transparent);
  }
  .btn-ghost:hover {
    border-color: var(--charcoal);
    background: color-mix(in srgb, var(--charcoal) 5%, transparent);
  }
  .btn-lg { padding: 16px 28px; font-size: 15px; }
  .btn-light {
    background: #fff;
    color: var(--charcoal);
    border: 1px solid #fff;
  }
  .btn-light:hover { background: var(--blush); border-color: var(--blush); transform: translateY(-1px); }
  .btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
  .cta-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  @media (max-width: 1200px) {
    .nav-links { display: none; }
    .nav-burger { display: inline-flex; }
  }
  @media (max-width: 860px) {
    .nav-actions > .btn-ghost { display: none; }
  }
  @media (max-width: 1024px) {
    .nav-mega {
      right: -24px;
      left: auto;
      width: 720px;
      padding: 24px 24px 28px;
    }
    .nav-mega-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .nav-mega-col:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 720px) {
    .nav-dropdown { display: none; }
  }
  /* ---------- Footer ---------- */
  footer { padding: 80px 0 48px; border-top: 1px solid var(--gray-100); background: var(--cream); }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 72px;
  }
  .footer-brand svg { height: 26px; margin-bottom: 20px; }
  .footer-brand p { font-size: 14px; color: var(--gray-700); max-width: 34ch; line-height: 1.55; }
  .footer-col h4 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 20px;
    font-weight: 500;
  }
  .footer-col a {
    display: block;
    font-size: 14px;
    color: var(--charcoal);
    margin-bottom: 12px;
    transition: color .2s var(--ease);
  }
  .footer-col a:hover { color: var(--purple); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--gray-100);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
  }

  @media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  }

  /* --- EN/AR Language toggle: perfect circle in navbar, labelled pill in drawer --- */
.lang-toggle {
  /* Perfect circle, same height as .btn (12px+14px*1.4+12px ≈ 44px) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--charcoal, #1a1a1f) 18%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal, #1a1a1f);
  font-family: "JetBrains Mono", "DM Sans", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--ease, ease), background .25s var(--ease, ease), color .25s var(--ease, ease);
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: var(--charcoal, #1a1a1f);
  background: color-mix(in srgb, var(--charcoal, #1a1a1f) 5%, transparent);
}
.lang-toggle .lang-glyph { display: block; }

/* In the mobile drawer footer, expand to a labelled pill so it reads clearly */
.nav-drawer-footer .lang-toggle {
  width: auto;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  gap: 8px;
  margin-right: auto;
}
/* Default label for English pages (suggesting Arabic) */
[data-lang="en"] .nav-drawer-footer .lang-toggle::before {
  content: "العربية";
  font-family: "Alexandria", sans-serif;
}

/* Label for Arabic pages (suggesting English) */
[data-lang="ar"] .nav-drawer-footer .lang-toggle::before {
  content: "English";
  font-family: "DM Sans", sans-serif;
}
.nav-drawer-footer .lang-toggle .lang-glyph { display: none; }

/* Hide the circle toggle at the first nav breakpoint (where nav-links collapse to burger) */
@media (max-width: 1200px) {
  .nav-actions .lang-toggle { display: none; }
}
  /* ---------- Reveal on scroll ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in { opacity: 1; transform: none; }

/* --- Typography: switch all body text to Alexandria, keep Big Shoulders for English headlines --- */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .nav-mega-item p,
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .section-intro,
html[dir="rtl"] .footprint-label,
html[dir="rtl"] .footprint-desc,
html[dir="rtl"] .meta,
html[dir="rtl"] .deploy-name,
html[dir="rtl"] .deploy-desc,
html[dir="rtl"] .compliance-pill,
html[dir="rtl"] .assistant-tag,
html[dir="rtl"] .assistant-desc,
html[dir="rtl"] .assistant-tags span,
html[dir="rtl"] .footer-col a,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-brand p,
html[dir="rtl"] .cta-body,
html[dir="rtl"] .engine-stat-label,
html[dir="rtl"] .engine-stat-desc,
html[dir="rtl"] .engine-point-title,
html[dir="rtl"] .engine-point-desc,
html[dir="rtl"] .nav-drawer a,
html[dir="rtl"] .nav-drawer h4 {
  font-family: "Alexandria", "IBM Plex Sans Arabic", "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Headlines: Alexandria 800 reads as bold/display weight in Arabic */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .section-title,
html[dir="rtl"] .engine-title,
html[dir="rtl"] .cta h2 {
  font-family: "Alexandria", "IBM Plex Sans Arabic", "Big Shoulders Display", "DM Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;  /* less aggressive than English's -0.04em */
  line-height: 1.25;
}

/* Footer columns — make sure links align right */
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .footer-col a,
html[dir="rtl"] .footer-bottom {
  text-align: right;
}

/* --- EN/AR Language toggle: perfect circle in navbar, labelled pill in drawer --- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--charcoal, #1a1a1f) 18%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal, #1a1a1f);
  font-family: "JetBrains Mono", "DM Sans", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--ease, ease), background .25s var(--ease, ease), color .25s var(--ease, ease);
  flex-shrink: 0;
}
/* Win specificity against the broad `html[dir="rtl"] a` Alexandria fallback.
   The lang-toggle and its glyph must render in JetBrains Mono so that "EN"
   on the AR page and "AR" on the EN page are the same typeface. */
html[dir="rtl"] a.lang-toggle,
html[dir="rtl"] a.lang-toggle .lang-glyph {
  font-family: "JetBrains Mono", "DM Sans", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-toggle:hover {
  border-color: var(--charcoal, #1a1a1f);
  background: color-mix(in srgb, var(--charcoal, #1a1a1f) 5%, transparent);
}
.lang-toggle .lang-glyph { display: block; }

/* Drawer footer: expand to a labelled pill */
.nav-drawer-footer .lang-toggle {
  width: auto;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-family: "DM Sans", sans-serif;
  gap: 8px;
  margin-inline-end: auto;
}
.nav-drawer-footer .lang-toggle::before {
  content: "English";
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.nav-drawer-footer .lang-toggle .lang-glyph { display: none; }

.indexHero{
  height:350px
}

@media(max-width: 1200px){
  .indexHero{
    height:200px;
  }
}

/* Hide the circle toggle at the first nav breakpoint */
@media (max-width: 1200px) {
  .nav-actions .lang-toggle { display: none; }
}

/* === Arabic navbar: tighten size & gap so all labels fit on one line ===
   Official translations are 3-4× longer than the English single-words
   (e.g. "تحويل المحادثات إلى نصوص" vs "Speech"), which forces multi-line
   wrap. Smaller type + tighter gap + nowrap-per-item solves it.
   Also adds margin-inline so the link group never butts up against the logo
   or the action buttons (which happens because the content fills the nav). */
html[dir="rtl"] .nav-links {
  gap: 18px;
  font-size: 12px;
  font-weight: 500;
  margin-inline: 28px;
}
html[dir="rtl"] .nav-links > a,
html[dir="rtl"] .nav-links > .nav-dropdown > .nav-trigger {
  white-space: nowrap;
}
/* Tighten the dropdown chevron's inline gap too */
html[dir="rtl"] .nav-trigger {
  gap: 4px;
}

/* Raise the burger breakpoint to 1280px on the Arabic page.
   The default 1200px works for short EN words but the longer Arabic
   labels overflow between 1200 and 1280, so we collapse to burger
   slightly earlier. The circle toggle hides at the same point. */
@media (max-width: 1280px) {
  html[dir="rtl"] .nav-links { display: none; }
  html[dir="rtl"] .nav-burger { display: inline-flex; }
  html[dir="rtl"] .nav-actions .lang-toggle { display: none; }
}

/* Compact navbar action buttons: match nav-links font (12px) and 38px height
   so the whole control row sits on a uniform typographic scale. Saves ~50px
   of horizontal space, freeing room for the logo on the right. */
html[dir="rtl"] .nav-actions .btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  height: 38px;
  line-height: 1;
}
html[dir="rtl"] .nav-actions .btn .arrow {
  width: 12px;
  height: 12px;
}
/* Burger button: same 38px circle so it aligns with toggle + buttons */
html[dir="rtl"] .nav-burger {
  width: 38px;
  height: 38px;
}
html[dir="rtl"] .nav-actions {
  gap: 8px;
}

/* Mega-menu (Solutions dropdown): the LTR rule anchors with `right: 0`
   so it extends LEFT from the trigger. In RTL the trigger sits at the visual
   left of the navlink group, so extending further left pushes the dropdown
   off the viewport. Flip the anchor to `left: 0` so it extends rightward
   into the page where there's real estate. */
html[dir="rtl"] .nav-mega {
  right: auto;
  left: 0;
}
@media (max-width: 1024px) {
  html[dir="rtl"] .nav-mega {
    right: auto;
    left: -24px;
  }
}

/* Force the logo to its natural width — never shrink — so the Arabic page
   shows the full wordmark identically to the English page (~123px wide). */
html[dir="rtl"] .nav-logo {
  flex-shrink: 0;
}
html[dir="rtl"] .nav-logo svg {
  width: 123px !important;
  height: auto !important;
}

/* Tighten nav-links margins now that the logo is bigger; otherwise the link
   group runs into the logo at 1290px. Also let the link group flex-shrink so
   labels can use any spare or borrowed space without breaking the line. */
html[dir="rtl"] .nav-links {
  margin-inline: 16px;  /* down from 28px */
  flex-shrink: 0;       /* labels are nowrap so the group itself shouldn't shrink */
}

/* ===== Layout fixes from visual review ===== */

/* Prevent horizontal scrollbar from drawer/dropdown elements positioned off-screen
   (in RTL the right-edge transforms push elements past the viewport's right edge) */
html[dir="rtl"], html[dir="rtl"] body {
  overflow-x: hidden;
}

/* Footer copyright row: ensure it reads right-to-left */
html[dir="rtl"] .footer-bottom {
  text-align: right;
  direction: rtl;
}

  /*About Page Arabic Adjustments*/
  html[dir="rtl"] .subsection-cta {
    /* default fine */
  }
  
  html[dir="rtl"] .footprint-value,
  html[dir="rtl"] .engine-stat-value,
  html[dir="rtl"] .deploy-num,
  html[dir="rtl"] .suite-num,
  html[dir="rtl"] .engine-point-num,
  html[dir="rtl"] .speech-metric,
  html[dir="rtl"] .model-score-num,
  html[dir="rtl"] .bench-pct,
  html[dir="rtl"] .lang-toggle,
  html[dir="rtl"] .lang-glyph,
  html[dir="rtl"] .crumbs,
  html[dir="rtl"] .section-index,
  html[dir="rtl"] .meta,
  html[dir="rtl"] .footprint-label,
  html[dir="rtl"] code,
  html[dir="rtl"] pre {
    font-family: "Alexandria", "Big Shoulders Display", "JetBrains Mono", "DM Sans", sans-serif !important;
  }
  
  
  /* === Sub-page tweaks (May 2026): smaller hero h1, right-aligned stats === */
  html[dir="rtl"] .hero h1 {
    font-size: clamp(24px, 3.85vw, 64px);
  }
  html[dir="rtl"] .stat-item {
    text-align: right;
  }
  html[dir="rtl"] .stat-num {
    font-size: 29px;
  }
  
  /* === Bullet alignment + section-index wrap (May 2026 round 2) === */
  /* Flip bullet markers from the left edge to the right (start in RTL).
     These selectors cover every bulleted list across the AR pages. */
  html[dir="rtl"] .speech-card ul li,
  html[dir="rtl"] .package-list li,
  html[dir="rtl"] .cap-popup-activities li {
    padding-left: 0;
    padding-right: 16px;
  }
  html[dir="rtl"] .speech-card ul li::before,
  html[dir="rtl"] .package-list li::before,
  html[dir="rtl"] .cap-popup-activities li::before {
    left: auto;
    right: 0;
  }
  html[dir="rtl"] .partner-type ul li {
    padding: 6px 22px 6px 0;
  }
  html[dir="rtl"] .partner-type ul li::before {
    left: auto;
    right: 0;
  }
  html[dir="rtl"] .preview-bullets li::before {
    left: auto;
    right: -14px;
  }
  
  /* When the section-index wraps, put the number on the TOP line.
     `wrap-reverse` flips the cross-axis direction so the second flex
     item goes ABOVE, not below. The existing source order is
     `<label> <bdi>NN /</bdi>` so the bdi (number) becomes the upper line.
     On a single line nothing changes. */
  html[dir="rtl"] .section-index,
  html[dir="rtl"] .meta {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 0.5ch;
    row-gap: 4px;
  }

  /* Numerals in body text inside buttons / badges: keep LTR for "100+", "20B+", etc. */
html[dir="rtl"] .suffix,
html[dir="rtl"] .unit {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Compliance pills: icon should sit after text in RTL or before based on flex */
html[dir="rtl" ] .compliance-pill {
  flex-direction: row-reverse;
}

/* Assistant cards: align text right, keep icons in their flex cells */
html[dir="rtl"] .assistant {
  text-align: right;
}
html[dir="rtl"] .assistant-head {
  /* head has icon (left) + badge (right) in EN; in RTL flex auto-reverses */
}

/* Demo OCR: keep contract numbers / dates LTR */
html[dir="rtl"] .demo-ocr-field {
  text-align: right;
}
html[dir="rtl"] .demo-ocr-field .k {
  margin-inline-end: 8px;
}

/* Demo speech meta — already mixed, keep flow natural */
html[dir="rtl"] .demo-speech-meta {
  direction: rtl;
}

/* Demo translate pair: keep EN box LTR even on Arabic page (it shows English source) */
html[dir="rtl"] .demo-tr-box.en {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .demo-tr-box.ar {
  direction: rtl;
  text-align: right;
}
/* The arrow between EN and AR points down in original; in RTL keep down (vertical) */
html[dir="rtl"] .demo-tr-arrow svg {
  transform: rotate(0deg);  /* vertical arrow stays vertical */
}

/* Suite accordion: vertical name labels — English uses writing-mode rotation,
   in RTL we want them upright */
   html[dir="rtl"] .suite-name-vertical {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
  }
  
  /* Suite collapsed strip: number stays at top, icon at bottom (the writing-mode
     flip above means the layout collapses; let's keep it simple) */
  html[dir="rtl"] .suite-item-collapsed {
    /* Original uses absolute positioning for vertical text — keep number readable */
  }

  /* Arrow icons (→) inside buttons should mirror so they "lead" RTL */
html[dir="rtl"] .btn .arrow,
html[dir="rtl"] .arrow {
  transform: scaleX(-1);
}

/* Section index labels like "/ 01 المنصة" — mixed slash + Arabic, keep readable */
html[dir="rtl"] .section-index,
html[dir="rtl"] .meta {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-family: "JetBrains Mono", "Alexandria", monospace;
}
html[dir="rtl"] .section-index > *,
html[dir="rtl"] .meta > * {
  direction: rtl;
}

html[dir="rtl"] .suite-expanded-content h3 {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 100%;
  text-wrap: balance;
  text-wrap: pretty;  /* better fallback for browsers without 'balance' */
}
@media (max-width: 1024px) {
  html[dir="rtl"] .suite-expanded-content h3 {
    font-size: 20px;
    line-height: 1.6;
  }
}
@media (max-width: 720px) {
  html[dir="rtl"] .suite-expanded-content h3 {
    font-size: 17px;
    line-height: 1.56;
  }
}

/* Assistant card headlines */
html[dir="rtl"] .assistants .assistant h3 {
  font-size: 23px;
  line-height: 1.59;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

html[dir="rtl"] h1{
  font-size: 30px !important;
  max-width: 22ch !important;
}

html[dir="rtl"] .section-title{
  font-size: 30px !important;
  max-width: 22ch !important;
}

html[dir="rtl"] .case-title{
  font-size: 18px !important;
  max-width: 22ch !important;
}