/* ============================================================
   Aqaris · Arabic homepage (Figma "Aqaris ar version",
   frames 70:10563 / 70:11118 / 70:11652)
   Loaded only by ar/index.html, after home.css. body gets
   class="home home-ar" and <html dir="rtl">; these rules mirror
   the direction-sensitive parts of home.css and swap the type
   to Cairo with the Figma sizes and line heights.
   ============================================================ */

.home-ar {
  --font-display: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body:    'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-family: var(--font-body);
}
/* Arabic script must never be tracked; home.css tightens most headings. */
.home-ar, .home-ar * { letter-spacing: 0 !important; }

/* ---------- Base type (Cairo needs taller lines than Inter) ---------- */
.home-ar h2 { font-size: 42px; line-height: 1.32; }
.home-ar .hp-grad       { background-image: linear-gradient(270deg, #6C6AF0 0%, var(--hp-indigo-deep) 100%); }
.home-ar .hp-grad-light { background-image: linear-gradient(270deg, #C4C0FF 0%, #8E8BFF 100%); }
.home-ar .hp-grad, .home-ar .hp-grad-light { padding-bottom: .3em; margin-bottom: -.3em; }

.home-ar .hp-nowrap { white-space: nowrap; }

/* ---------- Header ---------- */
.home-ar .nav-dropdown-menu { left: auto; right: 0; }

/* ---------- Hero (photo is mirrored, so the copy sits on the right) ---------- */
.home-ar .hp-hero-img { object-position: 30% center; }
.home-ar .hp-hero::after {
  background: linear-gradient(270deg, #F8FAFC 0%, #F8FAFC 36%, rgba(248,250,252,.82) 48%, rgba(248,250,252,0) 66%);
}
.home-ar .hp-hero-copy { max-width: 620px; }
.home-ar .hp-hero h1 { font-size: 58px; line-height: 1.3; }

/* ---------- Systems bar ---------- */
.home-ar .hp-systems-list li { font-size: 18px; line-height: 28px; }
.home-ar .hp-marquee .hp-systems-list { padding-right: 0; padding-left: 56px; }
.home-ar .hp-marquee-track { animation-name: hp-marquee-rtl; }
@keyframes hp-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(25%); }
}

/* ---------- Stats ---------- */
.home-ar .hp-stat { padding: 26px 0 30px 40px; }
.home-ar .hp-stat:nth-child(even) {
  border-left: 0; border-right: 1px solid rgba(255,255,255,.2);
  padding: 26px 40px 30px 0;
}

/* Figures are laid out left-to-right as in Figma ("+٥٬٠٠٠", "١٠٠٪"), still flush right. */
.home-ar .hp-stat dt { direction: ltr; text-align: right; }

/* ---------- Before and after ---------- */
.home-ar .hp-compare-head span + span { padding-left: 0; padding-right: 43px; }
.home-ar .hp-compare-row:not(.hp-compare-head) p { padding: 32px 0 32px 64px; }
.home-ar .hp-compare-row:not(.hp-compare-head) p + p {
  padding: 32px 40px 32px 0;
  border-left: 0; border-right: 3px solid var(--hp-accent);
}

/* ---------- Roles ---------- */
.home-ar .hp-role:first-child { padding-left: 28px; padding-right: 0; }
.home-ar .hp-role + .hp-role { border-left: 0; border-right: 1px solid rgba(15,23,42,.14); }
.home-ar .hp-role:first-child::before { left: 0; right: -20px; }
.home-ar .hp-role:last-child::before { right: 0; left: -20px; }
.home-ar .hp-role::after { transform-origin: right; }
.home-ar .hp-role h3 { line-height: 1.45; }

/* ---------- Solutions ---------- */
.home-ar .hp-panel-copy h3 { line-height: 1.45; }

/* ---------- Compliance band ---------- */
.home-ar .hp-band::after {
  background: linear-gradient(270deg, rgba(22,20,46,.94) 0%, rgba(22,20,46,.82) 46%, rgba(26,22,52,.585) 73%, rgba(36,28,66,.35) 100%);
}

/* ---------- Integrations ---------- */
.home-ar .hp-integrations { border-left: 0; border-right: 1px solid var(--hp-line); }
.home-ar .hp-integrations li { border-right: 0; border-left: 1px solid var(--hp-line); }

/* ---------- Resources ---------- */
.home-ar .hp-resource-type { color: var(--hp-muted); }
.home-ar .hp-pill { justify-self: end; }

/* ---------- Final CTA ---------- */
.home-ar .hp-cta h2 { font-size: 54px; line-height: 1.32; }

/* ---------- Footer ---------- */
.home-ar .hp-footer li a { font-size: 15.5px; }
/* Figma keeps the Latin order: LinkedIn · YouTube · Instagram, left to right. */
.home-ar .hp-footer-social { flex-direction: row-reverse; }

/* ============================================================
   Small desktop (1025–1240)
   ============================================================ */
@media (max-width: 1240px) {
  .home-ar .hp-hero h1 { font-size: clamp(48px, 4.6vw, 58px); }
  .home-ar .hp-cta h2 { font-size: 48px; }
}

/* ============================================================
   Tablet (≤ 1024) — 768 frame
   ============================================================ */
@media (max-width: 1024px) {
  .home-ar h2 { font-size: 38px; line-height: 1.3; }

  .home-ar .nav-actions { margin-left: 0; margin-right: auto; }
  .home-ar .nav-dropdown-menu { padding: 0 12px 0 0; }

  .home-ar .hp-hero-img { object-position: center; }
  .home-ar .hp-hero-copy { max-width: none; }
  .home-ar .hp-hero h1 { font-size: 52px; line-height: 1.28; }
  .home-ar .hp-hero-lead { margin-top: 28px !important; }
  .home-ar .hp-hero-cta { margin-top: 40px; }

  .home-ar .hp-compare-row:not(.hp-compare-head) p { padding: 32px 0 32px 34px; }
  .home-ar .hp-compare-row:not(.hp-compare-head) p + p { padding: 32px 20px 32px 0; }
  .home-ar .hp-compare-head span + span { padding-left: 0; padding-right: 23px; }

  .home-ar .hp-role { padding: 28px 0 28px 24px; }
  .home-ar .hp-role + .hp-role { border-right: 0; }
  .home-ar .hp-role:nth-child(even) {
    border-left: 0; border-right: 1px solid rgba(15,23,42,.14);
    padding-right: 24px; padding-left: 20px;
  }
  .home-ar .hp-role:nth-child(odd)::before { left: 0; right: -20px; }
  .home-ar .hp-role:nth-child(even)::before { left: -20px; right: 0; }

  .home-ar .hp-plan-price { font-size: 32px; }

  .home-ar .hp-cta h2 { font-size: 40px; line-height: 1.3; }
}

/* ============================================================
   Mobile (≤ 640) — 390 frame
   ============================================================ */
@media (max-width: 640px) {
  .home-ar h2 { font-size: 30px; line-height: 1.32; }

  .home-ar .nav-toggle { margin-left: 0; margin-right: auto; }

  .home-ar .hp-hero h1 { font-size: 36px; line-height: 1.32; }
  .home-ar .hp-hero-lead { margin-top: 27px !important; }
  .home-ar .hp-hero-cta { margin-top: 38px; }
  .home-ar .hp-hero-img { object-position: 28% center; }

  .home-ar .hp-pill { justify-self: start; }

  .home-ar .hp-stat, .home-ar .hp-stat:nth-child(even) { border-right: 0; padding: 23px 0 22px; }

  .home-ar .hp-compare-row:not(.hp-compare-head) p { padding: 24px 0 10px; }
  .home-ar .hp-compare-row:not(.hp-compare-head) p + p { padding: 0 16px 0 0; }

  .home-ar .hp-role, .home-ar .hp-role:nth-child(even) { border-right: 0; padding: 24px 0; }
  .home-ar .hp-role::before,
  .home-ar .hp-role:nth-child(odd)::before,
  .home-ar .hp-role:nth-child(even)::before { left: -12px; right: -12px; }
  .home-ar .hp-role h3 { font-size: 20px; }

  .home-ar .hp-plan-price { font-size: 30px; }

  .home-ar .hp-cta h2 { font-size: 32px; line-height: 1.32; }
}