/* =====================================================================
   Solution page — Sales & CRM   (prefix .sol-crm-)
   /ar/solutions/sales-crm/ and /solutions/sales-crm/
   ===================================================================== */

/* ---------- hero art: the opportunity pipeline (text-free, so LTR simply mirrors it) ---------- */
[dir="ltr"] .sol-crm-hero { transform: scaleX(-1); }
.sol-crm-col { animation: sol-crm-rise .9s var(--ease) both; animation-delay: calc(var(--k) * .14s + .1s); }
.sol-crm-col .panel { fill: rgba(255,255,255,.06); stroke: rgba(201,211,242,.28); stroke-width: 1.2; }
.sol-crm-col .ttl { fill: rgba(223,229,248,.55); }
.sol-crm-col .stage { fill: none; stroke: var(--lapis-300); stroke-width: 2; }
.sol-crm-col.s1 .stage { fill: var(--lapis-300); }
.sol-crm-col.s2 .stage { fill: var(--lapis-400); stroke: var(--lapis-400); }
.sol-crm-col.s3 .stage { fill: var(--gold); stroke: var(--gold); }
.sol-crm-col.s3 .panel { stroke: rgba(247,226,173,.55); }
.sol-crm-col .sum-track { fill: rgba(255,255,255,.1); }
.sol-crm-col .sum { fill: var(--lapis-300); }
.sol-crm-col.s3 .sum { fill: var(--gold); }
.sol-crm-card .bg { fill: #fbfcff; filter: drop-shadow(0 5px 6px rgba(0,0,0,.35)); }
.sol-crm-card .l1 { fill: #a9b7df; }
.sol-crm-card .l2 { fill: #d3dbf0; }
.sol-crm-card .dm { fill: var(--lapis-500); }
.sol-crm-card.won .bg { fill: var(--gold); }
.sol-crm-card.won .l1 { fill: rgba(9,18,58,.55); }
.sol-crm-card.won .l2 { fill: rgba(9,18,58,.3); }
.sol-crm-card.won .dm { fill: var(--lapis-900); }
.sol-crm-way { fill: none; stroke: rgba(247,226,173,.6); stroke-width: 1.6; stroke-dasharray: 3 8; stroke-linecap: round; animation: sol-crm-way 2.2s linear infinite; }
.sol-crm-way-end { fill: var(--gold); }

/* the travelling opportunity: rests as a won (gold) card in the last stage */
.sol-crm-move { transform: translate(30px, 150px); animation: sol-crm-move 10s var(--ease) 1.2s infinite; }
.sol-crm-move .bg { fill: var(--gold); animation: sol-crm-won 10s ease 1.2s infinite; }
.sol-crm-move .l1 { fill: rgba(9,18,58,.5); }
.sol-crm-move .l2 { fill: rgba(9,18,58,.28); }
.sol-crm-move .dm { fill: var(--lapis-900); }

@keyframes sol-crm-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes sol-crm-way { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 44; } }
@keyframes sol-crm-move {
  0% { transform: translate(366px, 266px); opacity: 0; }
  4%, 12% { transform: translate(366px, 266px); opacity: 1; }
  22%, 32% { transform: translate(254px, 208px); }
  42%, 52% { transform: translate(142px, 208px); }
  62% { transform: translate(30px, 150px); opacity: 1; }
  90% { transform: translate(30px, 150px); opacity: 1; }
  96%, 100% { transform: translate(30px, 150px); opacity: 0; }
}
@keyframes sol-crm-won {
  0%, 58% { fill: #fbfcff; }
  64%, 100% { fill: var(--gold); }
}

/* ---------- explainer: one customer, three companies, one record ---------- */
.sol-crm-x { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; overflow: visible; }
.sol-crm-x text { font-family: var(--f-ui); direction: rtl; }
[dir="ltr"] .sol-crm-x text { direction: ltr; }
.sol-crm-x polygon { stroke: rgba(14,27,82,.16); stroke-width: 1; stroke-linejoin: round; }
.sol-crm-x .f-top { fill: #ffffff; }
.sol-crm-x .f-left { fill: #d3dbf0; }
.sol-crm-x .f-right { fill: #a9b7df; }
.sol-crm-x-cube { animation: bob-s 4.4s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -1.3s); }
.sol-crm-x .co { font-size: 14.5px; font-weight: 500; fill: var(--ink); text-anchor: middle; }
.sol-crm-x-lines path { fill: none; stroke: var(--lapis-300); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; animation: sol-crm-down 1.6s linear infinite; }
.sol-crm-x .pg { fill: #fff; stroke: var(--line); stroke-width: 1.2; filter: drop-shadow(0 10px 12px rgba(14,27,82,.12)); }
.sol-crm-x .hd { fill: var(--lapis-800); }
.sol-crm-x .hd-t { font-size: 14.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.sol-crm-x-rings circle { fill: none; stroke-width: 2.6; stroke: var(--gold); }
.sol-crm-x-rings circle:last-child { stroke: var(--lapis-300); }
.sol-crm-x .rule { stroke: var(--line); stroke-width: 1; }
.sol-crm-x-row .hl { fill: var(--gold-soft); opacity: 0; }
.sol-crm-x-row .dm { fill: var(--lapis-500); }
.sol-crm-x-row .row-t { font-size: 13.5px; fill: var(--ink-2); text-anchor: start; }
.sol-crm-x-row .chip { fill: var(--lapis-100); stroke: var(--lapis-300); stroke-width: 1; }
.sol-crm-x-row .chip-t { font-size: 12px; font-weight: 500; fill: var(--lapis-800); text-anchor: middle; letter-spacing: .04em; direction: ltr; }
.sol-crm-x-row.r0 { animation: sol-crm-row0 9s ease infinite; }
.sol-crm-x-row.r1 { animation: sol-crm-row1 9s ease infinite; }
.sol-crm-x-row.r2 { animation: sol-crm-row2 9s ease infinite; }
.sol-crm-x-row.r0 .hl { animation: sol-crm-hl0 9s ease infinite; }
.sol-crm-x-row.r1 .hl { animation: sol-crm-hl1 9s ease infinite; }
.sol-crm-x-row.r2 .hl { animation: sol-crm-hl2 9s ease infinite; }
.sol-crm-x .lbl { font-size: 13.5px; font-weight: 500; fill: var(--ink); text-anchor: start; }
.sol-crm-x .g-track { fill: var(--stone-2); stroke: var(--line); stroke-width: 1; }
.sol-crm-x .g-limit { stroke: var(--clay-deep); stroke-width: 2.4; stroke-linecap: round; }
[dir="ltr"] .sol-crm-x .g-limit { transform: translateX(240px); }
.sol-crm-x-fill {
  fill: var(--gold-deep); transform-box: fill-box; transform-origin: right center; transform: scaleX(.82);
  animation: sol-crm-fill 9s var(--ease) infinite;
}
[dir="ltr"] .sol-crm-x-fill { transform-origin: left center; }
.sol-crm-x-tok rect { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.4; }

@keyframes sol-crm-down { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
@keyframes sol-crm-row0 { 0%, 19% { opacity: .25; } 23%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes sol-crm-row1 { 0%, 41% { opacity: .25; } 45%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes sol-crm-row2 { 0%, 63% { opacity: .25; } 67%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes sol-crm-hl0 { 0%, 19% { opacity: 0; } 22%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes sol-crm-hl1 { 0%, 41% { opacity: 0; } 44%, 52% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes sol-crm-hl2 { 0%, 63% { opacity: 0; } 66%, 74% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes sol-crm-fill {
  0%, 19% { transform: scaleX(.08); fill: var(--lapis-500); }
  25%, 41% { transform: scaleX(.34); fill: var(--lapis-500); }
  47%, 63% { transform: scaleX(.58); fill: var(--lapis-500); }
  70%, 94% { transform: scaleX(.82); fill: var(--gold-deep); }
  100% { transform: scaleX(.08); fill: var(--lapis-500); }
}

@media (max-width: 920px) {
  .sol-crm-x { max-width: 460px; }
}