/* صفحهٔ خانه — تنها شیوه‌نامهٔ اختصاصی‌اش.

   قاعدهٔ سختِ سند بازطراحی: هر صفحه یا `ds.css` را بار می‌کند یا شیوه‌نامه‌های
   قدیمی، هرگز هر دو. اینجا هیچ توکن و هیچ کامپوننتی از نو تعریف نمی‌شود —
   فقط چیدمانِ همین صفحه. رنگ‌ها همه از توکن‌های ds.css می‌آیند، پس نمای تیره
   بدون یک خط اضافه کار می‌کند. */

/* ═══ تیترها ═══════════════════════════════════════════════════════
   ★ ‎ds.css‎ تیترها را با وزن ۹۰۰ تعریف می‌کند و برای رابطِ برنامه درست است:
   آنجا تیتر باید در میان انبوهِ کنترل و جدول، خودش را نشان بدهد. ولی روی
   صفحه‌ای که کارش *خواندن* است، ۹۰۰ در فارسی سنگین می‌افتد — حروف به هم
   می‌چسبند و متن «فریاد» می‌زند، در حالی که شخصیتِ برند آرام است (۹ از ۱۰).
   پس فقط در همین صفحه یک پله پایین‌تر: ۷۰۰، و اندازه کمی کوچک‌تر.
   سلسله‌مراتب را اندازه می‌سازد (۴۲ / ۳۱ / ۲۰)، نه وزن. */
.hm h1, .hm h2, .hm .t-hero, .hm .t-h1 { font-weight: 700; }
.hero-copy h1 { font-size: 42px; }
.sec-head .t-h1, .split-copy .t-h1, .cta-end .t-h1 { font-size: 31px; }
.hero-stats b { font-weight: 700; }

/* ═══ ظرف و ریتم ═══════════════════════════════════════════════════ */
:root { --top-h: 78px; }

/* ★ `ds.css` روی `html, body` ارتفاعِ ثابتِ ۱۰۰٪ می‌گذارد. بلوکِ دربرگیرندهٔ
   یک عنصرِ `sticky` والدش است، پس نوار بالا فقط تا انتهای یک صفحهٔ نمایش
   می‌توانست بچسبد و بعد با صفحه بالا می‌رفت — دقیقاً همان چیزی که دیده شد.
   `min-height` همان تضمین را می‌دهد بی‌آنکه سقف بگذارد. فقط برای همین صفحه،
   تا رفتارِ بقیهٔ برنامه عوض نشود. */
html:has(> body.hm) { height: auto; min-height: 100%; }
body.hm { height: auto; min-height: 100%; }

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 28px; }

/* ★ یک ریتمِ عمودی برای همهٔ بخش‌ها. نسخهٔ اول هر بخش را جدا تنظیم کرده بود
   و نتیجه‌اش این بود که فاصله‌ها با هم نمی‌خواندند و صفحه «مجموعه‌ای از
   تکه‌ها» به‌نظر می‌رسید. حالا یک عدد، و استثنا فقط جایی که دلیل دارد. */
/* ★ ارتفاعِ یکسان از بخش دوم به بعد. بلندترین بخش (گام‌ها) معیار است و بقیه
   به آن می‌رسند؛ محتوا در ارتفاعِ خودش وسط می‌نشیند. بدون این، هر بخش قدِ
   محتوایش را داشت و اسکرول ریتمِ نامنظمی می‌گرفت — یکی ۳۴۵ پیکسل، یکی ۷۱۳.
   `min-height` است نه `height`: اگر روزی محتوا بلندتر شد بخش کش می‌آید و
   چیزی بریده نمی‌شود. */
.sec {
  position: relative;
  padding-block: 92px;
  min-height: 760px;
  display: flex; align-items: center;
  border-block-start: 1px solid var(--line);
}
.sec > .wrap { width: 100%; }

/* ★ سه آهنگِ زمینه به‌جای دو. پیش‌تر فقط کاغذِ سفید و خاکستریِ گرم یک‌درمیان
   می‌آمدند و صفحه یکنواخت بود. آهنگِ میانی تهرنگِ رنگِ برند است — همان
   فیروزه، فقط بسیار رقیق. هر سه از توکن‌های همان پالت ساخته می‌شوند، پس نمای
   تیره بدون یک خط اضافه درست درمی‌آید. */
.sec-t1 { background: var(--surface); }
.sec-t2 { background: color-mix(in oklab, var(--a-100) 72%, var(--surface)); }
.sec-t3 { background: var(--bg); }

/* ترنزیشنِ خودِ بخش: کلِ بخش یک‌جا محو می‌شود و می‌آید.
   ★ نسخهٔ قبلی یک خطِ رنگیِ ۲ پیکسلی بود که از راست کشیده می‌شد. اشکالش این
   بود که خط، *خودش* یک عنصرِ تازه روی صفحه است: چشم به آن نگاه می‌کند، نه به
   محتوایی که وارد شده. فید این مشکل را ندارد چون چیزی به صفحه اضافه نمی‌کند،
   فقط همان چیزی را که هست ظاهر می‌کند.
   عمداً فقط شفافیت و بدون جابه‌جایی: اگر خودِ بخش هم بلغزد، لبهٔ پایینش یک
   نوارِ خالی از زمینهٔ صفحه باقی می‌گذارد. جابه‌جایی کارِ محتوای داخل است
   (`.rv` پایین‌تر)، نه کارِ ظرف. */
.js-rv .sec { opacity: 0; }
.js-rv .sec.in { opacity: 1; transition: opacity .85s ease; }

/* سرِ هر بخش: ابرو، تیتر، بندهای مقدمه. همیشه یک شکل. */
.sec-head { max-width: 64ch; }
/* ★ در بخش گام‌ها، سرِ بخش عمداً تا کلِ عرض کشیده می‌شود تا لبهٔ چپش دقیقاً
   روی لبهٔ چپِ سومین کارت بنشیند. با ۶۴ نویسه، متن وسطِ راه تمام می‌شد و آن
   لبهٔ مشترک اصلاً ساخته نمی‌شد. بندِ متن هم جاستیفای است، پس هر دو لبه‌اش
   صاف است. */
.sec-head-wide { max-width: none; }
.sec-head-wide .lead { max-width: none; }
.sec-head .t-eyebrow { display: block; margin-block-end: var(--s2); }
/* ★ فارسی با فاصلهٔ حرفیِ کمی منفی جمع‌تر و «چاپی‌تر» می‌شود. بیش از
   این نرود: حروفِ چسبان در فارسی به هم می‌خورند و خوانایی می‌افتد. */
.sec-head .t-h1 { letter-spacing: -.026em; }
/* ★ متنِ فارسی با هم‌ترازیِ دوطرفه لبهٔ چپِ صافی می‌گیرد و ستون «تمام‌شده»
   به‌نظر می‌رسد. فقط برای بندهای چندسطری — روی تیتر و برچسبِ تک‌سطری،
   جاستیفای هیچ کاری نمی‌کند جز اینکه فاصله‌ها را در سطرِ آخر خراب کند.
   `text-wrap: pretty` که در ds.css روی `p` است با جاستیفای نمی‌خواند و
   اینجا خنثی می‌شود. */
.lead, .hero-sub, .why-card p, .steps-num p,
.faq details > p, .status-steps p {
  text-align: justify;
  text-wrap: wrap;
  hanging-punctuation: allow-end;
}
.lead { font-size: 17px; line-height: 1.9; color: var(--ink-2); max-width: 62ch; }
.sec-head .t-h1 + .lead, .lead + .lead { margin-block-start: var(--s4); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3);
           margin-block-start: var(--s6); }

/* تصویرها رنگشان را از متن می‌گیرند، پس در هر دو نما خودشان را تنظیم می‌کنند */
figure { margin: 0; color: var(--a-700); }
figure svg { width: 100%; height: auto; display: block; }

/* ═══ حرکت ═════════════════════════════════════════════════════════
   بدونِ کلاسِ `js-rv` روی ریشه، هیچ‌کدام از این‌ها فعال نیست — یعنی بدون
   جاوااسکریپت، و برای کسی که «حرکت کمتر» خواسته، صفحه کاملاً ثابت و کامل
   دیده می‌شود. پنهان‌کردنِ محتوا هرگز نباید به اجرای اسکریپت وابسته بماند. */
/* ★ نسخهٔ اول ۱۶ پیکسل جابه‌جایی در ۰٫۵۵ ثانیه داشت. عددها درست کار می‌کردند
   ولی آن‌قدر کم بودند که کاربر گفت «هیچ موشنی در کار نیست» — و از دید او
   درست بود: حرکتی که دیده نشود، وجود ندارد. حالا ۳۲ پیکسل، کمی مقیاس، و
   پلکانِ روشن‌تر. */
.js-rv .rv { opacity: 0; transform: translateY(32px); }
.js-rv .rv.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .85s cubic-bezier(.16, .8, .24, 1);
}
/* تصویرها علاوه بر بالا آمدن، کمی هم باز می‌شوند — جسمِ بزرگ اگر فقط
   بلغزد، «جابه‌جا» به‌نظر می‌رسد نه «وارد». */
.js-rv figure.rv { transform: translateY(32px) scale(.965); }
.js-rv figure.rv.in { transform: none; }

/* پلکان: تیتر، متن، دکمه‌ها، آمار — نه همه با هم. حرکت باید چشم را
   *هدایت* کند، پس ترتیبش همان ترتیبِ خواندن است. */
.js-rv .rv-1.in { transition-delay: .12s; }
.js-rv .rv-2.in { transition-delay: .24s; }
.js-rv .rv-3.in { transition-delay: .36s; }

/* کارت‌ها و گام‌ها هم یکی‌یکی می‌آیند، نه سه‌تا با هم */
.js-rv .why-card.rv-1.in, .js-rv .steps-num li.rv-1.in { transition-delay: .10s; }
.js-rv .why-card.rv-2.in, .js-rv .steps-num li.rv-2.in { transition-delay: .22s; }
.js-rv .why-card.rv-3.in, .js-rv .steps-num li.rv-3.in { transition-delay: .34s; }

/* ★ ورودِ نقشه دومرحله‌ای است: اول خشکی و مرز، بعد نقطه‌ها. همان ترتیبی که
   کسی نقشه را می‌خواند — اول «کجا»، بعد «چه چیزی آنجاست». `transform-box`
   لازم است، وگرنه مبدأ مقیاس روی گروهِ SVG جای عجیبی می‌افتد. */
.js-rv .hero-map svg > g { opacity: 0; }
.js-rv .hero-map.in svg > g:first-of-type { animation: hz-land .9s .15s ease both; }
.js-rv .hero-map.in svg > g:last-of-type {
  animation: hz-dots 1s .6s cubic-bezier(.16, .8, .24, 1) both;
  transform-box: fill-box; transform-origin: 50% 55%;
}
@keyframes hz-land { from { opacity: 0 } to { opacity: 1 } }
@keyframes hz-dots { from { opacity: 0; transform: scale(.86) }
                     to   { opacity: .8; transform: none } }

/* ═══ ۱ · قهرمان ═══════════════════════════════════════════════════ */
/* ★ قهرمان یک بخشِ کامل است، نه سرِ صفحه. ارتفاعش تا انتهای پنجره می‌رود و
   محتوا وسطش می‌نشیند، پس چشم می‌فهمد اینجا یک واحدِ تمام‌شده است و بخشِ بعدی
   — که زمینه‌اش هم فرق می‌کند — چیزِ تازه‌ای است.
   `dvh` بعد از `vh` می‌آید: روی گوشی `vh` ثابت است و ته صفحه زیر نوار مرورگر
   می‌رود؛ مرورگرِ قدیمی `dvh` را نمی‌فهمد و همان `vh` برایش می‌ماند. */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  /* از همان متغیری که ارتفاع نوار بالا را تعیین می‌کند — تا اگر روزی نوار
     بلندتر شد، قهرمان خودش را با آن تنظیم کند و کسی یادش نرود. */
  min-height: calc(100vh - var(--top-h));
  min-height: calc(100dvh - var(--top-h));
  padding-block: 48px 56px;
}

/* همان دو لایه‌ای که صفحهٔ ورود دارد — تابشِ فیروزه‌ای و تورِ مختصات. تکرارش
   عمدی است: کسی که از خانه به درِ ورود می‌رود باید حس کند در همان محصول
   مانده. هیچ تصویری دانلود نمی‌شود؛ هر دو از توکن ساخته می‌شوند. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 50% at 66% 34%,
      color-mix(in oklab, var(--a-500) 15%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 64px);
  opacity: .62;
  mask-image: radial-gradient(120% 100% at 62% 28%, #000 32%, transparent 82%);
}

.hero-in {
  position: relative; z-index: 1;
  max-width: 1160px; margin-inline: auto; padding-inline: 28px;
  width: 100%;
  /* ★ نسبت را که به ۱ به ۱٫۳۸ بردم، ستونِ متن آن‌قدر باریک شد که دو دکمه در
     یک سطر جا نشدند و روی هم افتادند — «نقشه بزرگ‌تر» نباید به قیمتِ شکستنِ
     ردیفِ کنش‌ها تمام شود. این نسبت هر دو را نگه می‌دارد. */
  display: grid; grid-template-columns: 1.12fr 1.3fr;
  gap: var(--s6); align-items: center;
}
.hero-copy h1 { letter-spacing: -.032em; margin-block-end: var(--s4); }
.hero-sub { font-size: 18.5px; line-height: 1.8; color: var(--ink-2);
            max-width: 44ch; }
/* ★ دکمهٔ دوم `btn-line` بود، یعنی قاب داشت و دکمهٔ اول نداشت. دو کنشِ
   هم‌ردیف با دو ظاهرِ متفاوت، ردیف را نامرتب نشان می‌دهد و ارتفاعِ دیداری‌شان
   هم یکی به‌نظر نمی‌رسد. حالا هر دو یک ارتفاع دارند و هیچ‌کدام قاب ندارد —
   تفاوتشان را وزنِ زمینه می‌گوید، نه خط. */
.hero-cta { margin-block-start: var(--s5); gap: var(--s2); }
.hero-cta .btn { height: 50px; padding-inline: 22px; font-size: 15.5px;
                 border-color: transparent; }
.hero-cta .btn-line { background: var(--a-100); color: var(--a-900); }
.hero-cta .btn-line:hover:not(:disabled) { background: var(--a-200);
                                           border-color: transparent;
                                           color: var(--a-900); }

/* شمارِ آنچه *همین حالا* در اطلس هست. عدد بزرگ، برچسبِ کوچک — و هیچ عددی
   که پشتش داده نباشد اینجا نمی‌آید. */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  /* ★ خطِ افقیِ بالای آمار برداشته شد. کارِ آن خط «جدا کردنِ آمار از کلیدها»
     بود، ولی همان کار را فاصله بهتر می‌کند: خط یک عنصرِ دیگر روی صفحه است و
     شمارشِ عناصر هزینهٔ توجه دارد، فاصله ندارد. جای آن ۴۸ پیکسل هوا. */
  margin-block-start: var(--s7);
}
/* ★ جداکنندهٔ عمودی *بین* آمارها، نه دورشان. چون `li` در فلکسِ ردیفی به‌طور
   پیش‌فرض کشیده می‌شود، ارتفاعِ خط خودبه‌خود قدِ همان آمار می‌شود — عدد و
   برچسب با هم — و اگر روزی اندازهٔ عدد عوض شد، خط هم با آن عوض می‌شود.
   `padding-inline-start` برابرِ `gap` است تا خط دقیقاً وسطِ فاصله بنشیند؛
   با دو عددِ نابرابر، خط به یکی از دو آمار می‌چسبد و «مالِ» آن به‌نظر می‌رسد. */
.hero-stats li + li {
  border-inline-start: 2px solid var(--line-2);
  padding-inline-start: var(--s6);
}
/* ★ `font-variant-numeric` صریحاً خاموش می‌شود. ds.css آن را برای `.num`
   روشن می‌کند تا عدد در ستونِ جدول نلغزد؛ ولی در عددِ درشتِ نمایشی نتیجه‌اش
   این است که «۱» به عرضِ «۵» کش می‌آید و «۳۱» با یک شکافِ آشکار دیده می‌شود. */
.hero-stats b { display: block; font-size: 30px; font-weight: 700;
                line-height: 1.15; color: var(--ink); letter-spacing: -.02em;
                font-variant-numeric: normal; font-feature-settings: normal; }
.hero-stats span { display: block; font-size: 13px; color: var(--ink-3);
                   margin-block-start: 3px; }

/* ═══ ۲ و ۴ · بخش‌های دوستونی ═══════════════════════════════════════ */
.split { display: grid; grid-template-columns: 1fr 1fr;
         gap: var(--s8); align-items: center; }
/* ★ «متن راست، تصویر چپ» در همهٔ بخش‌ها، صفحه را یکنواخت می‌کرد. `is-flip`
   جای دو ستون را عوض می‌کند تا چشم بین بخش‌ها یک تکانِ کوچک بخورد — همان
   کاری که یک مجله با صفحهٔ روبه‌رو می‌کند. */
.sec-split.is-flip .split-copy { order: 2; }
.sec-split.is-flip .split-art { order: 1; }
.split-copy .t-h1 { letter-spacing: -.026em; }
.split-copy .lead { margin-block-start: var(--s4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2);
         margin-block-start: var(--s5); }
.chips .chip { cursor: default; }

/* ═══ ۳ · سه گامِ ادعای مالکیت ══════════════════════════════════════ */

/* سه ستون. فاصله عمداً بزرگ است: پیکانِ میانِ گام‌ها در همین فاصله کشیده
   می‌شود و هرچه فاصله کوتاه‌تر، پیکان بی‌رمق‌تر. */
.steps-num {
  --gap: 104px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap); margin-block-start: var(--s8);
}
.steps-num li { position: relative; }
/* ★ حالتِ hover: کارت کمی بالا می‌آید، سایه می‌گیرد، و نشانِ داخلش
   (تیک یا نشانِ مکان) یک پله بزرگ‌تر می‌شود. عمداً `cursor: pointer` ندارد —
   این کارت‌ها جایی نمی‌روند و وعدهٔ کلیکی که وجود ندارد، بدتر از نبودِ
   بازخورد است. هدف فقط این است که بخش «زنده» حس شود. */
.step-art { margin-block-end: var(--s5); transition: transform .25s ease; }
.step-art svg { transition: filter .25s ease, opacity .25s ease; }
.step-art .hz-mark { transition: transform .25s cubic-bezier(.2, .8, .3, 1);
                     transform-box: fill-box; transform-origin: center; }
.steps-num li:hover .step-art { transform: translateY(-5px); }
.steps-num li:hover .step-art svg {
  filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--a-700) 22%, transparent));
}
.steps-num li:hover .step-art .hz-mark { transform: scale(1.14); }
/* ★ با «حرکت کمتر»، *حرکت* برداشته می‌شود نه *بازخورد*. سایه می‌ماند، پس
   کاربر همچنان می‌فهمد کجاست؛ فقط چیزی جابه‌جا نمی‌شود. برداشتنِ هر دو،
   دسترس‌پذیری نیست — حذفِ اطلاعات است. */
@media (prefers-reduced-motion: reduce) {
  .step-art, .step-art svg, .step-art .hz-mark { transition: none; }
  .steps-num li:hover .step-art { transform: none; }
  .steps-num li:hover .step-art .hz-mark { transform: none; }
}

/* ★ پیکان از خودِ فاصلهٔ ستون‌ها می‌آید، نه از داخل تصویر. `inset-inline-end`
   یعنی در راست‌به‌چپ سمتِ چپ — همان جهتی که خواندن پیش می‌رود. */
.steps-num {
  --arw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M63 8H3M11 2L3 8l8 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ★ لنگرِ پیکان خودِ تصویر است نه ستون. با لنگرِ ستون، «۵۰٪» یعنی نصفِ
   ستون — که متنِ زیر را هم می‌شمارد و پیکان بالاتر از میانهٔ کارت می‌افتاد.
   ارتفاعِ کارت هم ثابت نیست (از نسبتِ SVG می‌آید)، پس عددِ ثابت جواب
   نمی‌داد. */
.step-art { position: relative; }
.steps-num li:not(:last-child) .step-art::after {
  content: ''; position: absolute; z-index: 1;
  inset-inline-end: calc(-1 * var(--gap) + 8px);
  inset-block-start: 50%; transform: translateY(-50%);
  width: calc(var(--gap) - 16px); height: 16px;
  background: var(--a-700); opacity: .75;
  -webkit-mask: var(--arw) center / 100% 100% no-repeat;
          mask: var(--arw) center / 100% 100% no-repeat;
}

/* خطِ بالای متنِ هر گام — همان خطی که ستون‌ها را به هم می‌دوزد */
.step-body { padding-block-start: var(--s4);
             border-block-start: 2px solid var(--a-300); }
.steps-num i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-block-end: var(--s3);
  border-radius: var(--r-pill); background: var(--a-700); color: var(--surface);
  font-style: normal; font-size: 14px; font-weight: 700;
}
.steps-num h3 { margin-block-end: var(--s2); }
.steps-num p { color: var(--ink-2); font-size: 15px; line-height: 1.8; }

/* ═══ ۵ · سه کارتِ روش ══════════════════════════════════════════════ */
.why { display: grid; grid-template-columns: repeat(3, 1fr);
       gap: var(--s4); margin-block-start: var(--s7); }
/* ★ کارت بلندتر و آیکن بزرگ‌تر. نسخهٔ قبلی یک آیکنِ ۲۱ پیکسلی در جعبهٔ ۴۰
   پیکسلی گوشهٔ کارت داشت: در کارتی به این پهنا، آن جعبه یک لکهٔ کوچکِ گوشه بود
   که نه دیده می‌شد نه چیزی می‌گفت. حالا آیکن *بدون جعبه* و ۵۶ پیکسلی، وسطِ
   بالای کارت — خودش تصویر است نه نشانِ کنارِ تیتر.
   `min-height` است نه `height`: اگر متنِ یک کارت بلندتر شد، هر سه با هم بلند
   می‌شوند (گرید) و چیزی بریده نمی‌شود. */
.why-card { display: flex; flex-direction: column; justify-content: center;
            min-height: 320px; padding: var(--s6) var(--s5); }
.why-ico { display: flex; align-self: center; margin-block-end: var(--s5);
           color: var(--a-700); }
.why-ico svg { width: 56px; height: 56px; }
/* ★ ضخامتِ خط در فایلِ SVG برای اندازهٔ ۲۱ پیکسل تنظیم شده بود؛ همان عدد در
   ۵۶ پیکسل نزدیکِ ۴ پیکسل دیده می‌شود و آیکن «چاق» می‌شود. ضخامت اپتیکی باید
   با اندازه کم شود، نه ثابت بماند. CSS بر صفتِ داخلِ SVG اولویت دارد. */
.why-ico svg { stroke-width: 1.25; }
/* تیتر هم وسط‌چین می‌شود تا با آیکن یک محور بسازد؛ متن جاستیفای می‌ماند چون
   کارش خوانده‌شدن است نه قرینه‌بودن. */
.why-card h3 { margin-block-end: var(--s3); text-align: center; }
.why-card p { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
/* همان تعاملی که کارت‌های گام گرفتند — یک زبانِ واحد در کلِ صفحه */
.why-ico { transition: transform .25s ease, color .25s ease; }
.why-card { transition: transform .25s ease, box-shadow .25s ease,
                        border-color .25s ease; }
.why-card:hover { transform: translateY(-5px); border-color: var(--a-300);
                  box-shadow: var(--shadow-md); }
.why-card:hover .why-ico { transform: scale(1.06); color: var(--a-800); }
@media (prefers-reduced-motion: reduce) {
  .why-card { transition: box-shadow .2s ease, border-color .2s ease; }
  .why-card:hover { transform: none; }
  .why-card:hover .why-ico { transform: none; }
}

/* ═══ ۶ · وضعیت امروز ══════════════════════════════════════════════ */
/* ★ گرید با فاصلهٔ صفر: خطِ رابط باید *پیوسته* باشد، و هر فاصلهٔ ستونی یک
   بریدگی در آن می‌ساخت. فاصلهٔ متن‌ها با padding داخل خودشان می‌آید، پس
   ستون‌ها به هم نمی‌چسبند ولی خط قطع نمی‌شود. */
.status-steps { display: grid; grid-template-columns: repeat(3, 1fr);
                gap: 0; margin-block-start: var(--s8); text-align: center; }
.st-node { display: flex; align-items: center; justify-content: center;
           height: 44px; margin-block-end: var(--s4); color: var(--a-700); }
.st-node svg { width: 40px; height: 40px; flex: none; }
/* دو نیمهٔ خط، چپ و راستِ هر گره. `flex: 1` یعنی خودشان تا لبهٔ ستون کش
   می‌آیند — هر عرضی که ستون داشته باشد. */
.st-node::before, .st-node::after {
  content: ''; flex: 1; height: 2px; background: var(--a-300);
}
/* در راست‌به‌چپ، ‎::before‎ سمتِ راست می‌افتد و ‎::after‎ سمتِ چپ. */
.status-steps li:first-child .st-node::before,
.status-steps li:last-child  .st-node::after { visibility: hidden; }
/* بخشِ طی‌شدهٔ مسیر پررنگ‌تر است: از گرهِ «انجام‌شده» تا گرهِ «جاری» */
.status-steps li:first-child .st-node::after,
.status-steps li:nth-child(2) .st-node::before {
  height: 3px; background: var(--a-700); opacity: .8;
}
/* ★ همان بخشِ طی‌شده، هنگامِ رسیدن به این بخش، *کشیده* می‌شود: از گرهِ «لایهٔ
   پایه» تا گرهِ «شرکت‌ها». دو نیمه در دو ستونِ جداست، پس دو انیمیشنِ پشت‌سرهم
   با تأخیرِ متفاوت — نه یکی. مبدأ هر دو `right` است چون در راست‌به‌چپ مسیر از
   راست به چپ خوانده می‌شود و خط باید از گرهِ اول *دور* شود، نه به آن نزدیک.
   بدونِ جاوااسکریپت هیچ‌کدام اجرا نمی‌شوند و خط از اول پر است. */
.js-rv .status-steps li:first-child .st-node::after,
.js-rv .status-steps li:nth-child(2) .st-node::before {
  transform: scaleX(0); transform-origin: right;
}
.js-rv .status-steps li:first-child.in .st-node::after {
  animation: hz-line .55s .15s cubic-bezier(.3, .8, .3, 1) both;
}
.js-rv .status-steps li:nth-child(2).in .st-node::before {
  animation: hz-line .55s .62s cubic-bezier(.3, .8, .3, 1) both;
}
@keyframes hz-line { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ★ حلقهٔ گرهِ «جاری» بی‌وقفه می‌چرخد. `transform-box: view-box` لازم است،
   وگرنه مبدأ چرخش گوشهٔ جعبهٔ خودِ دایره می‌افتد و حلقه به‌جای چرخیدن، دور
   می‌زند. تأخیرِ ۱٫۱۷ ثانیه یعنی چرخش دقیقاً وقتی شروع می‌شود که کشیده‌شدنِ
   خط تمام شده — اول «تا اینجا آمده‌ایم»، بعد «و اینجا در جریان است». */
.hm .hz-spin { transform-box: view-box; transform-origin: 50% 50%;
               animation: hz-spin 1.7s linear infinite; }
.js-rv .st-now .hz-spin { animation: none; }
.js-rv .status-steps li.in .hz-spin {
  animation: hz-spin 1.7s linear 1.17s infinite;
}
@keyframes hz-spin { from { transform: rotate(-90deg) }
                     to   { transform: rotate(270deg) } }
@media (prefers-reduced-motion: reduce) { .hm .hz-spin { animation: none } }
.status-steps h3 { font-size: 17px; margin-block-end: 2px;
                   padding-inline: var(--s4); }
.status-steps p { color: var(--ink-3); font-size: 14px; line-height: 1.75;
                  padding-inline: var(--s4); }
/* مرحلهٔ جاری پررنگ‌تر از انجام‌شده و پیشِ‌رو — چشم باید بداند کجا ایستاده‌ایم */
.status-steps .st-done h3 { color: var(--ink-2); }
.status-steps .st-now  h3 { color: var(--a-700); }
.status-steps .st-next h3 { color: var(--ink-3); }
.status-steps .st-next .st-node { color: var(--ink-3); }

/* ═══ ۷ · پرسش‌ها ═══════════════════════════════════════════════════ */
/* ★ دو ستون بود و عرضش ۷۶۰ پیکسل — یعنی نه با لبهٔ راستِ بقیهٔ بخش‌ها
   می‌خواند نه با لبهٔ چپشان. حالا یک ستون، تمام‌عرض: هر دو لبه دقیقاً روی
   همان خطی است که بقیهٔ صفحه رویش نشسته. */
.faq { margin-block-start: var(--s6); }
.faq details { border-block-start: 1px solid var(--line); }
.faq details:last-child { border-block-end: 1px solid var(--line); }
/* در دو ستون، آخرینِ *هر ستون* باید خط پایین بگیرد؛ با nth-last فقط یکی
   می‌گرفت. سادگیِ قابل‌اتکا: خط پایین را به همه بده. */
.faq details { border-block-end: 1px solid var(--line); }
.faq details + details { border-block-start: 0; }
.faq summary {
  display: flex; align-items: center; gap: var(--s3);
  padding-block: var(--s4); cursor: pointer;
  font-size: 16.5px; font-weight: 700; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* ★ نشانهٔ باز/بسته با نویسه ساخته نمی‌شود: هیچ نویسه‌ای در فونت فارسی شکلِ
   + و − قابل‌اتکا ندارد — همان چیزی که «›» در فهرست اطلس نشان داد. */
.faq {
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq summary::after {
  content: ''; margin-inline-start: auto; flex: none;
  width: 13px; height: 13px; background: var(--ink-3);
  -webkit-mask: var(--plus) center / contain no-repeat;
          mask: var(--plus) center / contain no-repeat;
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--a-700); }
.faq details > p { padding-block-end: var(--s5); color: var(--ink-2);
                   font-size: 15px; line-height: 1.85; }

/* ═══ ۸ · دعوت پایانی ══════════════════════════════════════════════ */
.cta-end { text-align: center; }
.cta-end .lead { margin-inline: auto; margin-block-start: var(--s4); }
.cta-end .cta-row { justify-content: center; }

/* ═══ پابرگ ═════════════════════════════════════════════════════════
   ★ رنگ‌های فوتر عمداً *ثابت*‌اند، نه از توکن‌های نما. سبزِ تیرهٔ برند در هر
   دو نما همان سبزِ تیره می‌ماند — فوتر لنگرِ صفحه است و نباید با تغییر نما
   جای خودش را عوض کند. تنها جای صفحه که این استثنا را می‌گیرد. */
.foot {
  --f-bg:   oklch(0.255 0.055 205);   /* سبزِ تیرهٔ برند، یک پله تیره‌تر از --a-900 */
  --f-line: oklch(0.355 0.045 205);
  --f-ink:  oklch(0.980 0.005 205);   /* سفید — تیترها و نشان */
  --f-ink2: oklch(0.800 0.014 205);   /* طوسیِ روشن — متنِ بدنه */
  --f-ink3: oklch(0.700 0.016 205);   /* طوسی — ریزنوشت */
  background: var(--f-bg); color: var(--f-ink2);
  padding-block: 104px 0;
  border-block-start: 0;
}

.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--s8); align-items: start;
  padding-block-end: 76px;
}
.foot .foot-h { font-size: 15px; font-weight: 700; color: var(--f-ink);
           margin-block-end: var(--s4); }

/* ── ستون یک: نشان، معرفی، شبکه‌ها */
.foot-brand { display: inline-flex; align-items: center; gap: 10px;
              text-decoration: none; color: var(--f-ink); }
.foot-brand b { font-size: 18px; font-weight: 900; }
.foot .mark { background: rgba(255, 255, 255, .16); color: var(--f-ink); }
.foot .brand-tag { color: var(--f-ink3); border-inline-start-color: var(--f-line); }
.foot-about p { margin-block-start: var(--s4); max-width: 40ch;
                font-size: 15px; line-height: 1.9; color: var(--f-ink2); }

.foot-social { display: flex; gap: var(--s2); margin-block-start: var(--s5); }
.foot-social a, .foot-social span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07); color: var(--f-ink2);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.foot-social a:hover { background: rgba(255, 255, 255, .16); color: var(--f-ink);
                       transform: translateY(-2px); }
/* نشانی که هنوز نشانی ندارد: دیده می‌شود، ولی وانمود نمی‌کند پیوند است */
.foot-social span { opacity: .5; cursor: default; }
.foot-social a svg, .foot-social span svg { width: 19px; height: 19px; }

/* ── ستون دو: تماس */
.foot-contact { display: grid; gap: var(--s3); }
.foot-contact li { display: flex; align-items: flex-start; gap: 10px;
                   font-size: 15px; line-height: 1.8; color: var(--f-ink2); }
.foot-contact svg { width: 18px; height: 18px; flex: none;
                    margin-block-start: 4px; color: var(--f-ink3); }
.foot-contact a { color: inherit; text-decoration: none; }
.foot-contact a:hover { color: var(--f-ink); text-decoration: underline; }
/* نشانی و ایمیل با ارقامِ ستونی، تا در دو خط نلغزند */
.foot-contact .mono { letter-spacing: .01em; }

/* ── ستون سه: پیوندها */
.foot-links { display: grid; gap: var(--s3); }
.foot-links a { color: var(--f-ink2); text-decoration: none; font-size: 15px; }
.foot-links a:hover { color: var(--f-ink); text-decoration: underline; }

/* ── نوارِ پایین */
.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  align-items: center; justify-content: center; text-align: center;
  padding-block: 30px 40px;
  border-block-start: 1px solid var(--f-line);
  font-size: 13.5px; color: var(--f-ink3);
}
.foot-base p { margin: 0; }
.foot .foot-note { max-width: 62ch; color: var(--f-ink3); }

/* ═══ نوار بالا ═════════════════════════════════════════════════════ */
.hm-nav a { text-decoration: none; }
.hm-top {
  position: sticky; inset-block-start: 0; z-index: 60;
  min-height: var(--top-h);
  padding-block: 18px;
  transition: transform .3s cubic-bezier(.3, .8, .3, 1), box-shadow .25s ease;
}
/* هنگام رفتن به پایین کنار می‌رود؛ کلاسش را اسکریپتِ داخلِ صفحه می‌گذارد */
.hm-top.is-away { transform: translateY(-102%); }
.hm-top.is-stuck { box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) { .hm-top { transition: none; } }

/* ═══ صفحهٔ متوسط ═══════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hero-in, .split { grid-template-columns: 1fr; gap: var(--s6); }
  /* روی ستونِ واحد، متن همیشه اول — تصویر توضیحِ متن است، نه برعکس */
  .hero-copy, .split-copy { order: 1; }
  /* ★ `width: 100%` اینجا لازم است و حذف‌شدنی نیست: حاشیهٔ خودکار روی یک
     آیتمِ گرید، تراز `stretch` را خاموش می‌کند و آیتم «به‌اندازهٔ محتوا»
     می‌شود. محتوای این آیتم یک SVG بدون width است، و عرضِ پیش‌فرضِ SVG در
     CSS برابر ۳۰۰ پیکسل است — پس نقشه در عرض‌های میانی به ۳۰۰ می‌افتاد
     در حالی که ۵۶۰ جا داشت. */
  .hero-map, .split-art { order: 2; width: 100%; max-width: 560px;
                          margin-inline: auto; }
  .sec-split.is-flip .split-copy { order: 1; }
  .sec-split.is-flip .split-art { order: 2; }
  .why { grid-template-columns: 1fr; }
  .hero-sub { max-width: none; }
}

/* ═══ موبایل ════════════════════════════════════════════════════════
   ★ اینجا چیدمان *دوباره طراحی* می‌شود، نه فقط کوچک. سه چیز عوض می‌شود:

     • ناوبریِ بخش‌ها از نوار بالا می‌رود. روی گوشی، نواری که دو ردیف شود
       و نصفِ صفحهٔ اول را بخورد، هزینه است نه کمک؛ همان پیوندها در متن و
       در پابرگ هستند.
     • سه گام و سه مرحلهٔ وضعیت از «سه ستون» به یک *خطِ زمانیِ عمودی*
       تبدیل می‌شوند — با خطِ پیوند در کنارشان، تا ترتیبشان خوانده شود.
     • تصویرهای توضیح‌دهنده که افقی‌اند روی گوشی خیلی کوچک می‌شوند؛ آن‌ها
       که قابل‌قبول نیستند، پنهان می‌شوند به‌جای اینکه ناخوانا بمانند. */
@media (max-width: 720px) {
  .wrap, .hero-in { padding-inline: 18px; }
  .sec { padding-block: 58px; min-height: 0; display: block; }
  /* روی گوشی، «تمام‌قد» یعنی کاربر باید اسکرول کند تا آمار را ببیند. ارتفاع
     آزاد می‌شود و خودِ محتوا اندازه را تعیین می‌کند. */
  .hero { min-height: 0; padding-block: 32px 48px; }

  .hm-nav { display: none; }

  .hero-copy h1 { font-size: 33px; }
  .hero-sub { font-size: 16.5px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero-stats { gap: var(--s5) var(--s6); margin-block-start: var(--s6); }
  /* روی گوشی آمار در دو ردیف می‌شکند و آن‌وقت اولین آمارِ ردیفِ دوم یک
     خطِ جداکننده می‌گیرد که چیزی سمتِ راستش نیست. خط می‌رود. */
  .hero-stats li + li { border-inline-start: none; padding-inline-start: 0; }
  .hero-stats b { font-size: 22px; }

  /* گام‌ها روی گوشی: هر گام یک بلوکِ کامل با تصویرِ خودش، پشت سر هم.
     پیکانِ افقی اینجا معنا ندارد و برداشته می‌شود؛ ترتیبِ عمودی خودش
     ترتیب را می‌گوید. */
  .steps-num { grid-template-columns: 1fr; --gap: var(--s6);
               margin-block-start: var(--s6); }
  .steps-num li:not(:last-child) .step-art::after { display: none; }
  /* ★ کارت وسط‌چین بود ولی متنِ زیرش راست‌چین — دو لبهٔ ناهم‌راستا در یک
     ستون. تمام‌عرض، هر دو لبه با متن یکی می‌شود. */
  .step-art { max-width: none; }

  /* وضعیت روی گوشی: خطِ زمانیِ عمودی. گره‌ها همان SVGهای ستونی می‌مانند،
     فقط ردیف می‌شوند و خطِ رابط عمودی می‌شود. */
  .status-steps { grid-template-columns: 1fr; text-align: start;
                  margin-block-start: var(--s6); }
  .status-steps li { display: grid; grid-template-columns: 44px 1fr;
                     column-gap: var(--s4); align-items: start;
                     padding-block-end: var(--s5); position: relative; }
  .st-node { margin-block-end: 0; }
  .st-node::before, .st-node::after { display: none; }
  .status-steps li:not(:last-child)::before {
    content: ''; position: absolute; inset-inline-start: 21px;
    inset-block-start: 44px; bottom: 0; width: 2px; background: var(--a-300);
  }
  .status-steps li:first-child::before { background: var(--a-700); opacity: .8; }
  .status-steps h3, .status-steps p { padding-inline: 0; }
  .status-steps li:last-child { padding-block-end: 0; }

  .flow-art { margin-block: var(--s6) var(--s5); }
}

/* ★ اینجا اول تصویرها را روی گوشی پنهان می‌کردم چون برچسب‌هایشان ریز
   می‌شد. اشتباه بود: تصویر پنهان یعنی سکشن دوباره «فقط متن» می‌شود — همان
   چیزی که قرار بود درست شود. درمانِ درست، بزرگ‌کردنِ متن *داخل خودِ تصویر*
   بود تا در مقیاس کوچک هم خوانده شود. */

@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .foot { padding-block-start: 52px; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s6);
               padding-block-end: 40px; }
  .foot-about p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
  .foot-social a { transition: background .2s ease, color .2s ease; }
  .foot-social a:hover { transform: none; }
}
@media (prefers-contrast: more) {
  .hero::before { display: none; }
}