/* ============================================================
   Aqaris · Arabic AI Agents page (Figma "Aqaris ar version",
   frames 79:15556 / 79:16000 / 79:16427)
   Loaded only by ar/ai-agents.html, after home-ar.css and
   ai-agents.css. body is "home home-ar agents". Flex/grid rows
   mirror on their own under dir="rtl"; these rules flip the
   physical sides ai-agents.css sets and the Cairo sizes.
   ============================================================ */

/* ---------- Hero ---------- */
.home-ar .ag-hero h1 { font-size: 68px; line-height: 1.3; }

/* Product vignette: the glow, the bubble tails and the work-order
   card all swap sides, as in the Figma. */
.home-ar .ag-visual::before { right: auto; left: -60px; }
.home-ar .ag-chat-channels { margin-left: 0; margin-right: auto; }
.home-ar .ag-msg-in  { border-radius: 14px 14px 4px 14px; }
.home-ar .ag-msg-out { border-radius: 14px 14px 14px 4px; }
.home-ar .ag-workorder { left: auto; right: -36px; }

/* ---------- Section headings ---------- */
@media (min-width: 1025px) {
  .home-ar.agents .hp-section h2 { font-size: 46px; line-height: 1.32; }
}
.home-ar .ag-how-card h3 { line-height: 1.45; }

/* ---------- The seven agents ---------- */
.home-ar .ag-agent h3 { line-height: 1.43; }
.home-ar .ag-agent-stat strong { transform-origin: right center; }
.home-ar .ag-agent::after { left: auto; right: -24px; }

/* ============================================================
   Small desktop (1025–1240)
   ============================================================ */
@media (max-width: 1240px) {
  .home-ar .ag-hero h1 { font-size: clamp(54px, 5.2vw, 68px); }
  .home-ar .ag-workorder { right: -24px; }
}

/* ============================================================
   Tablet (≤ 1024) — 768 frame
   ============================================================ */
@media (max-width: 1024px) {
  .home-ar .ag-hero h1 { font-size: 52px; line-height: 1.3; }
  .home-ar .ag-workorder { right: 24px; }
  .home-ar .ag-agent::after { right: -20px; }
}

/* ============================================================
   Mobile (≤ 640) — 390 frame
   ============================================================ */
@media (max-width: 640px) {
  .home-ar .ag-hero h1 { font-size: 36px; line-height: 1.3; }
  .home-ar .ag-chat-channels { margin-right: 0; }
  .home-ar .ag-workorder { left: 16px; right: 16px; }
  .home-ar .ag-agent::after { right: -12px; }
}