/* ═══ صفحه‌ی اول: آمار درونِ قهرمان و نوارِ قابلیت‌ها (D-757) ═══
   کارفرما (با تصویر): ردیفِ آمار با همان شکل در نوارِ خالیِ زیرِ قهرمان، و جای قبلی‌اش «زیرنویسِ پیمایشِ راست به
   چپ» با «قابلیت‌های پیاده‌سازی‌شده» و «قابلیت‌های در حال اجرا» — الگو از پروژه‌ی هوش مصنوعی (یک نوار، دو فهرست به
   نوبت؛ برچسبِ ثابت در راست درست در لحظه‌ی خروجِ آخرین مورد عوض می‌شود)، محتوا از `notifications/releases.py`.
   `landing.css` تیلویندِ ساخته‌شده است و کلاسِ تازه نمی‌سازد (D-618)، پس قاب این‌جاست؛ حرکت در `landing.js`. */

/* نوارِ خالیِ زیرِ قهرمان همین فاصله بود (pb-20 lg:pb-28) — حالا آمار در آن می‌نشیند */
.lp-hero { padding-bottom: 36px; }
.lp-stats { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(203, 213, 225, .7); }
@media (min-width: 1024px) {
  .lp-hero { padding-bottom: 44px; }
  .lp-stats { margin-top: 56px; padding-top: 32px; }
}

/* نوار: همان نوارِ سفیدِ لبه‌دارِ آمار، جای آن */
.lp-tk { background: #fff; border-block: 1px solid #e2e8f0; overflow: hidden; }
.lp-tk-row { display: flex; align-items: center; direction: rtl; height: 54px; }
.lp-tk-label { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-width: 200px; height: 100%; padding: 0 clamp(16px, 4vw, 48px) 0 20px; background: #fff; color: #334155;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; }
/* متنِ زیرِ برچسب محو می‌شود، نه اینکه یک‌دفعه قطع شود */
.lp-tk-label::after { content: ""; position: absolute; top: 0; bottom: 0; left: -32px; width: 32px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.lp-tk-text { transition: opacity .25s ease; }
.lp-tk-row.is-swapping .lp-tk-text { opacity: 0; }
.lp-tk-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
  transition: background .25s ease, box-shadow .25s ease; }
.lp-tk-row.is-wip .lp-tk-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .16); }
.lp-tk-view { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.lp-tk-track { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 28px; width: max-content;
  transform: translate(100vw, -50%); visibility: hidden; direction: ltr; color: #475569; font-size: 13.5px; font-weight: 600; }
.lp-tk-track.is-live { visibility: visible; }
/* نوار برای حرکت ltr است؛ هر مورد یک پاراگرافِ rtlِ جدا، تا واژه‌ی لاتین («Moodle») پس‌وپیش نشود */
.lp-tk-track span { white-space: nowrap; direction: rtl; unicode-bidi: isolate; }
.lp-tk-track i { color: #2563eb; font-style: normal; font-size: 11px; }
.lp-tk-row.is-wip .lp-tk-track i { color: #d97706; }
/* بی جاوااسکریپت یا با «کاهشِ حرکت»: فهرستِ نخست ثابت و پیمایش‌پذیر */
.lp-tk-row.is-static .lp-tk-view { overflow-x: auto; scrollbar-width: none; }
.lp-tk-row.is-static .lp-tk-track { position: static; transform: none; visibility: visible; height: 100%; padding-left: 16px; }
.lp-tk-row.is-static .lp-tk-track[data-ticker="wip"] { display: none; }

@media (max-width: 640px) {
  .lp-tk-row { height: 48px; }
  /* min-width تا با عوض‌شدنِ برچسب (پیاده‌سازی‌شده ↔ در حال اجرا) کادرِ متن نلرزد */
  .lp-tk-label { min-width: 156px; padding: 0 16px 0 14px; font-size: 11.5px; gap: 6px; }
  .lp-tk-track { font-size: 12.5px; gap: 22px; }
}

/* تیره — همان متغیرهای پوسته‌ی تیره‌ی صفحه‌ی اول (`landing-dark.css`، D-739) */
:root[data-theme="dark"] .lp-stats { border-top-color: var(--line); }
:root[data-theme="dark"] .lp-tk { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .lp-tk-label { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .lp-tk-label::after { background: linear-gradient(90deg, transparent, var(--surface)); }
:root[data-theme="dark"] .lp-tk-track { color: var(--ink-soft); }
:root[data-theme="dark"] .lp-tk-track i { color: var(--accent-2); }
:root[data-theme="dark"] .lp-tk-row.is-wip .lp-tk-track i { color: #f2b45c; }