/* ==========================================================================
   Arshan – Stats / KPI sections (15 styles)
   Load after style.css, placeholders.css and about.css (uses the .ab
   section shell). Numbers count up when scrolled into view: give the
   number element data-count="250" and optional data-suffix="+" / data-prefix.
   The final value is written in the HTML, so it reads correctly without JS.
   --------------------------------------------------------------------------
   1. Stat items & rows   3. Rings              5. Timeline
   2. Cards & lists       4. Map & gradient     6. Responsive
   ========================================================================== */

/* 1. Stat items & rows -------------------------------------------------- */
.st-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; margin-top: 30px; list-style: none; padding: 0; }
.st { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.st strong, .st-num { font-size: clamp(22px, 4.2cqi, 32px); font-weight: 800; letter-spacing: 0; line-height: 1.1; color: var(--ab-head); font-variant-numeric: tabular-nums; }
.st span { font-size: 12.5px; }
.st-row--divided .st + .st { border-left: 1px solid var(--ab-line); }
.st-row--left .st { align-items: flex-start; text-align: left; }
.st-row--2 { --n: 2; gap: 20px 24px; }
.st-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; background: var(--bg, var(--primary-50)); color: var(--c, var(--primary)); }
.st-ico .icon { width: 22px; height: 22px; }
.st-ico--round { border-radius: 50%; }
.st-ico--plain { width: auto; height: auto; background: none; margin-bottom: 10px; }
.st-ico--ring { border-radius: 50%; background: rgba(255,255,255,.04); border: 1.5px solid var(--c, #a99bff); color: var(--c, #a99bff); box-shadow: 0 0 24px -6px var(--c, #a99bff); }
.st-ico--sm { width: 36px; height: 36px; margin: 0; border-radius: 10px; }
.st-ico--sm .icon { width: 17px; height: 17px; }
.st-inline { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
.st-inline > span:last-child { display: flex; flex-direction: column; }
.st-inline strong { font-size: clamp(18px, 3.4cqi, 24px); }
.st-v { --bg: #f2efff; --c: #6d4cf0; }
.st-b { --bg: #e8f1ff; --c: #3d8ef5; }
.st-t { --bg: #e3f6f2; --c: #16a58f; }
.st-o { --bg: #fff1e6; --c: #e07a1f; }
.st-p { --bg: #ffeef4; --c: #e0408a; }

/* 2. Cards & lists ------------------------------------------------------ */
.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.st-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: var(--bg, #f4f2ff); border: 1px solid rgba(18,22,47,.04); }
.st-card .st-ico { margin: 0; background: #fff; }
.st-card strong { display: block; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.st-card span { font-size: 12.5px; color: var(--muted); }
.st-list { display: grid; gap: 10px; list-style: none; padding: 0; }
.st-list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ab-line); box-shadow: var(--shadow-sm); }
.st-list strong { display: block; font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.st-list span { font-size: 12px; color: var(--muted); }
.st-glass { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-lg); list-style: none; }
.st-glass .st strong { color: var(--ink); font-size: 20px; }
.st-glass .st span { color: var(--muted); font-size: 11.5px; }
.st-glass .st-ico { width: auto; height: auto; margin-bottom: 6px; background: none; }
.st-glass .st-ico .icon { width: 20px; height: 20px; }
.st-circle { position: absolute; z-index: 1; right: 4%; top: 50%; width: min(78%, 280px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px rgba(91,76,240,.08), var(--shadow-lg); }

/* 3. Rings -------------------------------------------------------------- */
.st-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; list-style: none; padding: 0; }
.st-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12.5px; }
.st-ring__gfx { position: relative; width: min(100%, 110px); aspect-ratio: 1; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 3.2; }
.st-ring .track { stroke: #eef0f8; }
.st-ring .bar { stroke: var(--c, var(--primary)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 75)); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.st-ring.is-pending .bar { stroke-dashoffset: 100; }
.st-ring strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(16px, 3.4cqi, 22px); font-weight: 800; color: var(--ink); }

/* 4. Map & gradient ----------------------------------------------------- */
.st-map { position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, #bdb4f2 1.2px, transparent 1.5px); background-size: 7px 7px;
  -webkit-mask: radial-gradient(ellipse 20% 24% at 20% 32%, #000 70%, transparent 72%), radial-gradient(ellipse 9% 22% at 29% 70%, #000 70%, transparent 72%),
    radial-gradient(ellipse 12% 14% at 50% 26%, #000 70%, transparent 72%), radial-gradient(ellipse 11% 24% at 53% 60%, #000 70%, transparent 72%),
    radial-gradient(ellipse 24% 22% at 74% 32%, #000 70%, transparent 72%), radial-gradient(ellipse 9% 10% at 85% 74%, #000 70%, transparent 72%);
  mask: radial-gradient(ellipse 20% 24% at 20% 32%, #000 70%, transparent 72%), radial-gradient(ellipse 9% 22% at 29% 70%, #000 70%, transparent 72%),
    radial-gradient(ellipse 12% 14% at 50% 26%, #000 70%, transparent 72%), radial-gradient(ellipse 11% 24% at 53% 60%, #000 70%, transparent 72%),
    radial-gradient(ellipse 24% 22% at 74% 32%, #000 70%, transparent 72%), radial-gradient(ellipse 9% 10% at 85% 74%, #000 70%, transparent 72%); }
.st-pin { position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(91,76,240,.18); }
.st-pin::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(91,76,240,.35); animation: st-pulse 2.4s ease-out infinite; }
@keyframes st-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.ab--gradient { --ab-bg: #fff; }
.ab--gradient::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(186,170,255,.55), rgba(255,200,230,.55) 50%, rgba(170,210,255,.55));
  clip-path: path("M0 60 C 160 0 320 120 520 50 S 820 0 1200 40 V 600 H 0 Z"); }
.ab--gradient > * { position: relative; z-index: 1; }

/* 5. Timeline ----------------------------------------------------------- */
.st-tl { position: relative; display: grid; gap: 22px; list-style: none; padding: 0; }
.st-tl::before { content: ""; position: absolute; left: 64px; top: 6px; bottom: 6px; width: 2px; background: var(--primary-100); }
.st-tl li { display: grid; grid-template-columns: 48px 34px 1fr; align-items: start; }
.st-tl time { padding-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ab-head); }
.st-tl .dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 3px 0 0 9px; border-radius: 50%; background: #fff; border: 3.5px solid var(--primary); }
.st-tl strong { display: block; font-size: 20px; font-weight: 800; color: var(--ab-head); line-height: 1.1; }
.st-tl span { font-size: 12px; }

/* 6. Responsive --------------------------------------------------------- */
@container ab (max-width: 500px) {
  .st-row:not(.st-row--2), .st-rings, .st-glass { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .st-row--divided .st:nth-child(3) { border-left: 0; }
}
@container ab (max-width: 420px) {
  .st-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .st-pin::after { animation: none; } }