/*
  اینوست کلاب — شیوه نامه مشترک صفحه اصلی و صفحه های خرید/حقوقی
  ─────────────────────────────────────────────────────────────
  این پرونده مرجع بصری کل سایت است (نگاه کنید invc/docs/classes.md برای
  فهرست کلاس های عمومی). قواعد پرفورمنس سنجیده شده مالک این جا رعایت
  شده و نباید نقض شود:

    · هیچ عنصر متحرکی filter یا box-shadow ندارد؛ لایه فیلتردار/سایه دار
      متحرک هر فریم از نو رستر می شود و روی گوشی های معمولی فریم می اندازد.
      فقط transform و opacity انیمیت می شوند.
    · دوره تکرار انیمیشن ها عدد اول است (۱۱، ۱۳، ۱۷، ۱۹، ۲۳ ثانیه) تا
      چند پس زمینه متحرک هیچ وقت هم زمان به اوج نرسند (ضربان جمعی چشم آزار).
    · prefers-reduced-motion همه چیز را خاموش می کند.

  واحدهای منطقی (margin-inline/inset-inline-start و…) به جای left/right
  استفاده شده چون کل سایت راست به چپ (فارسی) است؛ اگر روزی چپ به راست هم
  لازم شد، شیوه نامه بدون تغییر کار می کند.
*/

/* ───────────────────────── فونت وزیرمتن ───────────────────────── */

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────── متغیرهای طرح ───────────────────────── */

:root {
  /* DNA تایید شده مالک: «سیاه واقعی» — پس زمینه تقریبا مشکی خنثی؛ سطح ها
     ته رنگ آبی نگه می دارند تا کارت ها از زمینه جدا بمانند (کارت بنتو) */
  --bg: #050608;
  --bg-soft: #0a0d14;
  --surface: #0e1626;
  --surface-2: #131e33;
  --border: rgba(233, 238, 250, 0.10);
  --border-strong: rgba(233, 238, 250, 0.18);

  --ink: #eef2fb;
  --ink-dim: #a7b2c8;
  --ink-faint: #6f7b95;

  /* سبز-فیروزه ای: رشد سرمایه. طلایی: کیفیت/پرمیوم. هرگز قرمز/سبز خام بورسی
     چون این جا مشاوره است نه تابلوخوانی زنده. */
  --accent: #22d3a8;
  --accent-ink: #04140f;
  --accent-2: #f2c14e;
  --accent-2-ink: #251a02;

  --danger: #f2617a;

  /* امضای رنگین (iridescent) — نعنایی → فیروزه → بنفش → طلایی؛ در حلقه
     قهرمان، قاب عکس «ما که هستیم» و ریزنقش های دیگر تکرار می شود */
  --iris: conic-gradient(from 40deg,
      #22d3a8, #35c8e8 22%, #7a7bff 45%, #c86bd6 62%, #f2c14e 82%, #22d3a8);

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;

  --container: 1180px;
  --gap: clamp(1rem, 2vw, 1.75rem);

  --shadow-card: 0 18px 45px -25px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 24px 60px -20px rgba(34, 211, 168, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ───────────────────────── پایه و ریست ───────────────────────── */

/* ───────────────────────── صفت hidden ─────────────────────────
   قاعده پیش فرض مرورگر برای [hidden] همان display:none است ولی کم وزن ترین
   قاعده است، پس هر کلاسی که display می دهد (‎.btn‎ که inline-flex است،
   ‎.card‎، هر چیز flex) آن را می شکند و عنصر با وجود hidden دیده می شود.
   این دقیقا در فاکتور خرید رخ داده بود: ‎form.hidden = true‎ هیچ اثری نداشت،
   پس روی نشانی خراب یک «فاکتور شبح» با دکمه فعال زیر پیام خطا می ماند و روی
   سفارش پرداخت شده دکمه پرداخت پنهان نمی شد. یک جا و برای همیشه: */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* روی موبایل ۳۹۰ پیکسل: هیچ فرزندی مجاز نیست عرض را بترکاند.
     clip و نه hidden: hidden یک ظرف اسکرول می سازد و هر position:sticky
     داخلش را بی اثر می کند — نوار بالای سایت دقیقا به همین دلیل با اسکرول
     بالا می رفت (سنجیده: بعد از ۱۲۰۰px اسکرول، top=-1200). clip همان
     بریدن را می کند بدون ساختن ظرف اسکرول. */
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, ul, figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* لینک پرش برای صفحه‌خوان و کیبورد — اول عنصر صفحه */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -3rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ───────────────────────── ابزارهای عمومی ───────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  /* لینک‌های #packages و مانند آن نباید زیر نوار چسبان بالای صفحه پنهان شوند */
  scroll-margin-top: 4.5rem;
}

.section-head {
  max-width: 640px;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}
.section-head.center {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-block-end: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 1.5em;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.section-title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* اندازه/رنگِ عنوان از پنل (cms4-home). فهرستِ محدود و معنادار — روی
   همان .hero-title/.section-title می‌نشینند (وزن و letter-spacing دست‌نخورده
   می‌ماند) و فقط اندازه یا رنگ را عوض می‌کنند. رنگ‌ها از همان دو رنگِ برند. */
.hd-sz-sm {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
}
.hd-sz-lg {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
}
.hd-sz-xl {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
}
.hd-c-accent {
  color: var(--accent);
}
.hd-c-gold {
  color: var(--accent-2);
}
.hd-c-grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-lead {
  margin-block-start: 0.85rem;
  color: var(--ink-dim);
  font-size: 1.05rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───────────────────────── دکمه ها ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
              background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  transform: translateY(0);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: #37e0ba;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
}

/* ───────────────────────── نوار بالای صفحه ───────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 11, 20, 0.88);
  border-block-end: 1px solid var(--border);
}
/* بدون backdrop-filter عمدا: پشت نوار موقع اسکرول پیوسته رندر می شود و
   فیلتر روی چیزی که پیوسته حرکت می کند (محتوای زیرش) گران است. */

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
}
.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  color: var(--ink-dim);
  font-weight: 500;
}
.nav-links a:hover {
  color: var(--ink);
}
/* روی دسکتاپ ورود/ثبت‌نام همان دکمه nav-actions است؛ این لینک تکراری فقط
   داخل منوی کشویی موبایل دیده می‌شود که آن دکمه‌ها در آن پنهانند */
@media (min-width: 861px) {
  .nav-auth-link {
    display: none;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle-bar::before { transform: translateY(-6px); }
.nav-toggle-bar::after { transform: translateY(4px); }
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after { position: absolute; inset-inline-start: 0; }

body.nav-open .nav-toggle-bar { background: transparent; }
body.nav-open .nav-toggle-bar::before { transform: translateY(0) rotate(45deg); }
body.nav-open .nav-toggle-bar::after { transform: translateY(0) rotate(-45deg); }

/* ───────────────────────── سربرگ قهرمان ───────────────────────── */

.hero {
  position: relative;
  min-height: min(90vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* پوستر جایگزین ویدیو در موبایل (app.js فقط <img class="hero-media-img"> می سازد)
   باید مثل بقیه رسانه ها لایه پس زمینه باشد، نه عنصر داخل جریان صفحه */
.hero-media-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* گرادیان زنده جایگزین، وقتی رسانه ای از پنل تنظیم نشده — خودش زیباست،
   نه یک جای خالی خاکستری. دو لایه شعاعی که با transform جابه جا می شوند. */
.hero-fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  overflow: hidden;
}
.hero-blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  border-radius: 50%;
  will-change: transform;
}
.hero-blob--a {
  top: -10%;
  inset-inline-start: -8%;
  background: radial-gradient(circle at 35% 35%, rgba(34, 211, 168, 0.55), rgba(34, 211, 168, 0) 70%);
  animation: float-a 17s var(--ease) infinite;
}
.hero-blob--b {
  bottom: -18%;
  inset-inline-end: -10%;
  background: radial-gradient(circle at 60% 60%, rgba(242, 193, 78, 0.4), rgba(242, 193, 78, 0) 70%);
  animation: float-b 23s var(--ease) infinite;
}
.hero-blob--c {
  top: 30%;
  inset-inline-start: 35%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(90, 140, 255, 0.28), rgba(90, 140, 255, 0) 70%);
  animation: float-c 11s var(--ease) infinite;
}

@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50% { transform: translate(4%, 6%) scale(1.08); opacity: 1; }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-5%, -4%) scale(1.12); opacity: 1; }
}
@keyframes float-c {
  0%, 100% { transform: translate(-50%, -20%) scale(1); opacity: 0.55; }
  50% { transform: translate(-46%, -26%) scale(1.15); opacity: 0.75; }
}

/* ─────────────── امضای رنگین قهرمان: حلقه + پرتو جارو + ذره ها ───────────────
   همه لایه ها فقط transform/opacity انیمیت می کنند (بدون filter/box-shadow —
   سنجیده مالک: ۶۰→۲۵ فریم). نرمی لبه حلقه با mask شعاعی ساخته شده که ایستاست
   و روی کامپوزیت اعمال می شود، نه هر فریم. دوره ها عدد اول: ۱۱/۱۳/۱۷/۱۹. */

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: -1; /* هم لایه با scrim ولی در DOM بعد از آن، پس رویش نقش می بندد */
  pointer-events: none;
}

.hero-ring,
.hero-sweep {
  --ring-size: min(78vmin, 700px);
  position: absolute;
  top: 50%;
  inset-inline-end: -12%; /* در راست به چپ یعنی لبه چپ صفحه؛ قوس وارد کادر می شود */
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  margin-block-start: calc(var(--ring-size) / -2);
  -webkit-mask: radial-gradient(closest-side,
      transparent 55%, #000 66%, #000 76%, transparent 86%);
  mask: radial-gradient(closest-side,
      transparent 55%, #000 66%, #000 76%, transparent 86%);
  will-change: transform;
}
.hero-ring {
  background: var(--iris);
  opacity: 0.42;
  animation: ring-spin 19s linear infinite;
}
/* پرتو جارو: همان هندسه حلقه، فقط یک قاچ روشن که تندتر می چرخد */
.hero-sweep {
  background: conic-gradient(from 0deg,
      transparent 0 68%, rgba(255, 255, 255, 0.85) 74%, transparent 80% 100%);
  opacity: 0.5;
  animation: ring-spin 11s linear infinite;
}
@keyframes ring-spin {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}

.hero-particle {
  position: absolute;
  display: block;
  will-change: transform;
}
.hero-particle--dot {
  top: 22%;
  inset-inline-start: 12%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  animation: drift-a 13s ease-in-out infinite;
}
.hero-particle--ring {
  top: 64%;
  inset-inline-start: 24%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent-2);
  opacity: 0.45;
  animation: drift-b 17s ease-in-out infinite;
}
.hero-particle--diamond {
  top: 30%;
  inset-inline-end: 20%;
  width: 12px;
  height: 12px;
  border: 2px solid #7a7bff;
  opacity: 0.4;
  animation: drift-c 19s ease-in-out infinite;
}
.hero-particle--spark {
  top: 74%;
  inset-inline-end: 34%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c86bd6;
  opacity: 0.5;
  animation: drift-a 11s ease-in-out infinite reverse;
}
@keyframes drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -26px); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 20px) scale(1.15); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) rotate(45deg); }
  50% { transform: translate(12px, 24px) rotate(100deg); }
}

/* ─────────────── صحنه مالی متحرک سربرگ ───────────────
   شبکه مختصات ایستا + نوار شمع روان (حلقه بی درز از دو نسخه یکسان) + نمودار
   روند دوخطه (سبد ممتد نعنایی، معیار نقطه چین طلایی — عمدا بی عدد، چون سایت
   وعده بازده نمی دهد) + موج بازده کم رنگ. لایه در DOM قبل از scrim است تا
   تیرگی خوانایی همیشه رویش بنشیند. فقط transform/opacity انیمیت می شود و
   دوره ها عدد اول اند: ۳ (تپش)، ۴۳ (موج)، ۵۳ (شمع ها). */

.hero-market {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* رسانه پنل مقدم است: صحنه کاملا خاموش می شود تا هم روی ویدیو نویز نیندازد
   و هم هزینه انیمیشن ها صفر شود (display:none انیمیشن را متوقف می کند) */
.hero.hero-has-media .hero-market {
  display: none;
}

.hm-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 84px);
  opacity: 0.5;
  /* پایین صفحه زودتر محو می شود: متن اعتماد (ink-faint) روی زمینه خالص هم
     مرزی است (۴.۷:۱) و حتی خط شبکه کم رنگ زیرش تضاد را می شکند — سنجیده شد */
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 24%, #000 58%, transparent 75%);
  mask: linear-gradient(180deg, transparent 0, #000 24%, #000 58%, transparent 75%);
}

/* نوار شمع: دو SVG یکسان کنار هم؛ جابه جایی نصف عرض = یک نسخه کامل → حلقه بی درز */
.hm-candles-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* سمت متن (راست در راست به چپ) محو می شود تا تضاد متن اعتماد — که روی همین
     پس زمینه مرزی است — دست نخورد. ماسک ایستاست؛ گرادیان ماسک جهت منطقی ندارد
     و چون سایت فقط راست به چپ است ۲۷۰ درجه (شروع از راست) درست است. */
  -webkit-mask: linear-gradient(270deg, transparent 0 30%, #000 56%);
  mask: linear-gradient(270deg, transparent 0 30%, #000 56%);
}
.hm-candles {
  position: absolute;
  /* بالاتر از ردیف متن اعتماد (~۷۷٪ ارتفاع) تا هیچ بدنه شمعی زیر آن نلغزد */
  bottom: 24%;
  inset-inline-start: 0;
  width: 200%;
  height: clamp(90px, 17vh, 150px);
  display: flex;
  will-change: transform;
  animation: hm-scroll 53s linear infinite;
}
.hm-candles svg {
  flex: none;
  width: 50%;
  height: 100%;
}
.cu { fill: var(--accent); opacity: 0.7; }
.cu-w { stroke: var(--accent); stroke-width: 2; opacity: 0.45; }
.cd { fill: none; stroke: var(--accent-2); stroke-width: 1.6; opacity: 0.55; }
.cd-w { stroke: var(--accent-2); stroke-width: 2; opacity: 0.4; }

/* موج بازده: همان الگوی marquee، جهت مخالف و آرام تر */
.hm-wave {
  position: absolute;
  top: 13%;
  inset-inline-start: 0;
  width: 200%;
  height: clamp(44px, 8vh, 72px);
  display: flex;
  opacity: 0.5;
  will-change: transform;
  animation: hm-scroll-rev 43s linear infinite;
}
.hm-wave svg {
  flex: none;
  width: 50%;
  height: 100%;
}
.hm-wave path,
.hm-wave use {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  opacity: 0.35;
}

@keyframes hm-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
@keyframes hm-scroll-rev {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* نمودار روند: سمت خالی سربرگ (چپ در راست به چپ)؛ ورود یک باره از پایین */
.hm-trend {
  position: absolute;
  bottom: 13%;
  inset-inline-end: 2%;
  width: min(44vw, 620px);
  aspect-ratio: 640 / 360;
  animation: hm-rise 1.3s var(--ease) 0.25s both;
}
.hm-trend svg {
  width: 100%;
  height: 100%;
}
.hm-stop { stop-color: var(--accent); }
.hm-area { fill: url(#hmArea); }
/* سر پیکان: همان رنگ و ضخامت خط روند تا یک تکه دیده شود. بدون فیلتر و
   بدون سایه — روی عنصری که انیمیت می شود ممنوع است. */
.hm-arrow {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0.95;
}

.hm-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.75;
}
.hm-bench {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  opacity: 0.5;
}
.hm-tip {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: hm-tip 3s ease-in-out infinite;
}
.hm-ping {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: hm-ping 3s ease-out infinite;
}
/* ── حرکت پله ای: پرده برش کنار می رود و پله ها یکی یکی ساخته می شوند ──
   عمدا transform روی مستطیل برش، نه stroke-dashoffset: آن یکی composite
   نمی شود و هر فریم خط را از نو رستر می کند.
   steps(6) یعنی پرده جهشی و پله به پله جلو می رود نه پیوسته — همان حسی که
   مالک خواست: «پله ای زیاد میشه». شش جهش برای شش پله. */
.hm-veil {
  transform-box: view-box;
  /* پیوسته و نرم، نه جهشی. steps(6) قبلی حس پله می داد که مالک نخواست.
     شتاب ملایم در شروع و پایان، بدون تکان. */
  animation: hm-draw 17s cubic-bezier(0.32, 0, 0.28, 1) infinite;
}
@keyframes hm-draw {
  0%   { transform: translateX(0); }
  47%  { transform: translateX(660px); }
  100% { transform: translateX(660px); }
}

/* سر پیکان و نقطه تپنده فقط وقتی ظاهر می شوند که پرده به آن جا رسیده
   باشد؛ وگرنه پیکانی که هنوز ساخته نشده در هوا معلق می ماند. */
.hm-head {
  animation: hm-head 17s ease-out infinite;
}
@keyframes hm-head {
  0%, 44%   { opacity: 0; }
  52%, 100% { opacity: 1; }
}

@keyframes hm-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hm-tip {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.35); opacity: 1; }
}
@keyframes hm-ping {
  0% { transform: scale(0.5); opacity: 0.7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* تیره شونده به سمت پایین برای خوانایی متن روی ویدیو/عکس، نه روی خود
     گرادیان زنده که چیزی زیرش نیست و نیازی به تیرگی اضافه ندارد.
     ایستگاه ۸۲٪ در ۷۶٪: ردیف متن اعتماد (ink-faint، ذاتا مرزی) زیر ۷۷٪ است
     و این پله تضادش را روی هر پس زمینه ای بالای ۴.۵:۱ نگه می دارد — سنجیده شد */
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.35) 0%, rgba(7, 11, 20, 0.55) 55%, rgba(7, 11, 20, 0.82) 76%, var(--bg) 92%);
}

.hero-content {
  position: relative;
  padding-block: clamp(3rem, 10vw, 4rem);
  max-width: 760px;
  animation: rise-in 0.9s var(--ease) both;
}

.hero-title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  margin-block-start: 1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-dim);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-block-start: 2rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-block-start: 2.75rem;
  /* ink-dim به جای ink-faint: متن ریز روی گرادیان زنده با ink-faint حتی بدون
     هیچ تزیینی فقط ~۴.۵:۱ می گیرد و هاله blob آن را می شکست — سنجیده شد */
  color: var(--ink-dim);
  font-size: 0.88rem;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.hero-trust li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────── تزیین بخش ها: هاله های رونده و امضای رنگین ───────────────
   پاسخ به «پس زمینه یه جاهایی خیلی خلوته»: هاله های شعاعی بسیار کم رنگ که با
   transform می خزند (۲۹/۳۱ ثانیه — عدد اول). isolation تضمین می کند z-index
   منفی داخل همان بخش بماند و overflow جلوی اسکرول افقی را می گیرد. */

.section-decor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-glow {
  position: absolute;
  z-index: -1;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.section-glow--why {
  top: -18%;
  inset-inline-end: -16%;
  background: radial-gradient(circle at 40% 40%, rgba(34, 211, 168, 0.09), transparent 70%);
  animation: glow-drift-a 29s var(--ease) infinite;
}
.section-glow--faq {
  bottom: -22%;
  inset-inline-start: -14%;
  background: radial-gradient(circle at 60% 60%, rgba(122, 123, 255, 0.09), transparent 70%);
  animation: glow-drift-b 31s var(--ease) infinite;
}
@keyframes glow-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 9%) scale(1.12); }
}
@keyframes glow-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(7%, -8%) scale(1.1); }
}

/* امضای رنگین کنار معرفی مشاور — خواسته مالک: «اون افکت اولی رو کنارش
   بفرست». حلقه دور قاب عکس می پیچد؛ عکس پس زمینه مات دارد پس خوانایی
   چیزی را خراب نمی کند. ستون متن رزومه عمدا خالی نگه داشته می شود. */
.hero-decor--about .hero-ring,
.hero-decor--about .hero-sweep {
  --ring-size: min(60vmin, 540px);
}
.hero-decor--about .hero-ring { opacity: 0.3; }
.hero-decor--about .hero-sweep { opacity: 0.36; }
/* ذره ها فقط در حاشیه های خالی؛ هرگز پشت متن (تضاد ذره نعنایی پشت متن
   کم رنگ به ۱.۴:۱ می رسید — سنجیده شد) */
.hero-decor--about .hero-particle--dot { top: 18%; inset-inline-end: 14%; }
.hero-decor--about .hero-particle--ring { top: 74%; inset-inline-end: 26%; }
.hero-decor--about .hero-particle--diamond { top: 8%; inset-inline-end: 38%; }
.hero-decor--about .hero-particle--spark { top: 88%; inset-inline-end: 8%; }

/* بخش باید لنگر موقعیت باشد و دکور از آن بیرون نزند، وگرنه روی موبایل
   اسکرول افقی می سازد. */
#about { position: relative; overflow: hidden; }
.hero-decor--about { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-decor--about ~ .container { position: relative; z-index: 1; }

@media (max-width: 780px) {
  /* یک ستونه: متن روی تمام عرض می آید، پس حلقه بزرگ پشتش می افتد. */
  .hero-decor--about .hero-ring,
  .hero-decor--about .hero-sweep { --ring-size: min(46vmin, 300px); }
  .hero-decor--about .hero-ring { opacity: 0.18; }
  .hero-decor--about .hero-sweep { opacity: 0.2; }
}

/* ───────────────────────── شبکه و کارت عمومی ───────────────────────── */

.grid {
  display: grid;
  gap: var(--gap);
}
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* ───────────────────────── پکیج های مشاوره ───────────────────────── */

/* تعداد پکیج/چرا-ما/گام از داده می آید نه ثابت؛ auto-fit خودش ستون را با
   تعداد واقعی وفق می دهد، نیازی به محاسبه کلاس در جاوااسکریپت نیست */
.pkg-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: stretch;
}

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  /* سایه این جا مجاز است چون کارت در حالت سکون است؛ فقط روی هاور با
     transition کوتاه تغییر می کند، نه انیمیشن پیوسته هر فریم */
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pkg-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
}

.pkg-card--featured {
  border-color: rgba(34, 211, 168, 0.5);
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.08), var(--surface-2));
  box-shadow: var(--shadow-pop);
}

.pkg-badge {
  position: absolute;
  top: -0.85rem;
  inset-inline-start: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.pkg-title {
  font-size: 1.3rem;
  font-weight: 800;
}
.pkg-tagline {
  margin-block-start: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

.pkg-price {
  margin-block-start: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.pkg-price-amount {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pkg-price-unit {
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.pkg-duration {
  margin-block-start: 0.3rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.pkg-features {
  margin-block-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.pkg-features li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-block-start: 0.15rem;
  border-radius: 50%;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}

.pkg-cta {
  margin-block-start: 1.75rem;
}

.pkg-empty {
  color: var(--ink-faint);
  text-align: center;
  padding-block: 2rem;
}

/* درخشش لغزنده روی کارت برجسته: نوار نور داخل یک پوشش جدا با overflow
   پنهان، چون خود کارت نمی تواند overflow:hidden بگیرد (نشان «پیشنهاد ما»
   بیرون لبه کارت می نشیند و بریده می شد). فقط transform انیمیت می شود؛
   بیشتر دوره ۱۳ ثانیه ای، نوار ساکن و نامرئی است. */
.pkg-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.pkg-shine::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 38%;
  background: linear-gradient(105deg,
      transparent 0%, rgba(255, 255, 255, 0.05) 38%,
      rgba(34, 211, 168, 0.14) 50%, rgba(255, 255, 255, 0.05) 62%, transparent 100%);
  transform: translateX(0) skewX(-16deg);
  will-change: transform;
  animation: card-shine 13s var(--ease) infinite;
}
@keyframes card-shine {
  0% { transform: translateX(0) skewX(-16deg); }
  18% { transform: translateX(480%) skewX(-16deg); }
  100% { transform: translateX(480%) skewX(-16deg); }
}

/* ───────────────────────── پلتفرم سرمایه‌گذاری (جانبی) ─────────────────────────
   خالی‌بودنِ نشانی یعنی این بخش اصلا در HTML نیست (homerender.go)، پس این
   کلاس‌ها فقط وقتی روی صفحه هستند که مالک نشانی را از پنل پر کرده باشد. */

.platform-band {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.platform-desc {
  color: var(--ink-dim);
  font-size: 0.92rem;
}

/* ───────────────────────── شمارنده های آماری ───────────────────────── */

.stats-band {
  border-block: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(34, 211, 168, 0.05), rgba(122, 123, 255, 0.04));
  padding-block: clamp(2rem, 5vw, 3.25rem);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  text-align: center;
}
@media (max-width: 780px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  margin-block-start: 0.35rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

/* ───────────────────────── ما که هستیم ───────────────────────── */

.about-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 780px) {
  .about-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* قاب رنگین دور عکس: خود گرادیان لایه بیرونی است و عکس با حاشیه داخلی
   رویش می نشیند — بدون فیلتر و بدون انیمیشن، فقط امضای رنگ */
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: var(--iris);
}
.about-media img,
.about-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px);
}

/* عکس واقعی مربع است. با نسبت ۴:۳ بالا و پایین قاب بریده می‌شد — یعنی
   بخشی از سر یا میز. پس وقتی عکس هست، خود قاب مربع می‌شود و چیزی بریده
   نمی‌شود. جای‌خالی بی‌عکس همان ۴:۳ می‌ماند تا چیدمان صفحه عوض نشود. */
.about-media:has(img) {
  aspect-ratio: 1 / 1;
}
.about-media img {
  aspect-ratio: 1 / 1;
  height: 100%;
}

/* «توی افکت صفحه بکنجونش»: لبه مربع نباید مثل عکس چسبانده دیده شود.
   یک لایه روی عکس، از مرکز شفاف به سمت گوشه‌ها به رنگ خود صفحه می‌رود، پس
   مرز عکس در پس‌زمینه حل می‌شود و فقط قاب رنگین می‌ماند.
   عمدا mask نیست: mask کل عکس را نیمه‌شفاف می‌کند و پس‌زمینه سبزش را
   می‌شوید؛ این‌طور رنگ عکس دست‌نخورده می‌ماند و فقط لبه محو می‌شود.
   pointer-events هیچ، تا لایه جلوی انتخاب یا کلیک را نگیرد. */
.about-media:has(img)::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--radius-lg) - 2px);
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 45%,
      transparent 52%,
      color-mix(in srgb, var(--bg) 55%, transparent) 82%,
      color-mix(in srgb, var(--bg) 88%, transparent) 100%);
}
.about-placeholder {
  background:
    radial-gradient(circle at 25% 25%, rgba(34, 211, 168, 0.22), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(242, 193, 78, 0.16), transparent 55%),
    var(--bg-soft);
  display: grid;
  place-items: center;
}
.about-placeholder .brand-mark {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 18px;
}

.about-body {
  margin-block-start: 1.1rem;
  color: var(--ink-dim);
  line-height: 2;
}

.about-sign {
  margin-block-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.about-name {
  font-weight: 700;
}
.about-role {
  color: var(--ink-faint);
  font-size: 0.88rem;
}

/* مدارک مشاور — بدون شماره و بدون گلوله عددی (خواسته صریح مالک).
   نشانه هر سطر یک خط کوتاه لهجه‌رنگ است، نه bullet، تا فهرست «رزومه» به نظر
   برسد نه «مراحل». list-style پاک می‌شود چون در RTL جای گلوله سمت اشتباه
   می‌افتد وقتی متن سطر بشکند. */
.about-creds {
  margin-block-start: 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.about-creds[hidden] {
  display: none;
}
.about-creds li {
  position: relative;
  padding-inline-start: 1.1rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.85;
}
.about-creds li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  width: 0.6rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, currentColor);
  opacity: 0.75;
}

/* ───────────────────────── نظرات مشتریان ───────────────────────── */

/* بدون کتابخانه: اسکرول افقی بومی + scroll-snap؛ لمس و کشیدن رایگان از
   مرورگر می آید و دکمه ها فقط scrollBy می کنند */
.testi-wrap {
  position: relative;
}

.testi-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 0.5rem 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.testi-track::-webkit-scrollbar {
  display: none;
}

.testi-card {
  flex: 0 0 min(360px, 86%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* عکس کارت نظر (ماموریت cms2). اختیاری است: کارت بی عکس دقیقا مثل قبل
   می ماند، پس هیچ چیدمانی با افزودن این قاعده عوض نمی شود.
   ابعاد ثابت است تا رسیدن عکس، کارت را جابه جا نکند (CLS). */
/* picture (بهینه سازی WebP، ماموریت cms4) خودش جعبه ای نمی سازد؛ فقط img
   درونش در چیدمان flex شرکت می کند، دقیقا مثل قبل از این تگ. */
.testi-card picture {
  display: contents;
}
.testi-photo {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex: 0 0 auto;
  align-self: flex-start;
}
.testi-quote {
  color: var(--ink-dim);
  font-size: 0.96rem;
  line-height: 2;
  flex: 1;
}
.testi-quote::before {
  content: '«';
  color: var(--accent);
  font-size: 1.4em;
  font-weight: 800;
  margin-inline-end: 0.15em;
}
.testi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--border);
  padding-block-start: 0.9rem;
}
.testi-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.testi-stars {
  display: inline-flex;
  gap: 0.1em;
  font-size: 0.9rem;
  color: var(--accent-2);
  letter-spacing: 0.05em;
}
.testi-stars .star-off {
  color: var(--ink-faint);
  opacity: 0.5;
}

.testi-nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-block-start: 0.5rem;
}
.testi-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.testi-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ───────────────────────── ورود پلکانی بخش ها ─────────────────────────
   کلاس reveal را فقط جاوااسکریپت اضافه می کند (IntersectionObserver، یک بار)؛
   اگر جاوااسکریپت اجرا نشود هیچ چیز پنهان نمی ماند. تاخیر پلکانی را app.js
   با transition-delay درون خطی می دهد. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ───────────────────────── چرا ما ───────────────────────── */

.why-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.why-card {
  text-align: start;
}
.why-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgba(34, 211, 168, 0.12);
  color: var(--accent);
  font-size: 1.3rem;
  margin-block-end: 1rem;
}
.why-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.why-body {
  margin-block-start: 0.5rem;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

/* ───────────────────────── مراحل کار ───────────────────────── */

.steps {
  counter-reset: step;
  position: relative;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.steps::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
@media (max-width: 620px) {
  .steps::before {
    top: 0;
    bottom: 0;
    inset-inline-start: 1.4rem;
    inset-inline-end: auto;
    width: 1px;
    height: auto;
  }
}

.step {
  position: relative;
  z-index: 1;
}
.step-num {
  counter-increment: step;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--accent);
  margin-block-end: 1rem;
}
.step-num::before {
  content: counter(step);
}
.step-title {
  font-weight: 700;
}
.step-body {
  margin-block-start: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* ───────────────────────── پرسش های متداول ───────────────────────── */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 780px;
  margin-inline: auto;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] > summary .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.4rem 1.25rem;
  color: var(--ink-dim);
  font-size: 0.94rem;
}

/* ───────────────────────── تماس با ما ───────────────────────── */

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 780px) {
  .contact-wrap { grid-template-columns: minmax(0, 1fr); }
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-block-start: 1.5rem;
}
.contact-info-list li {
  display: flex;
  gap: 0.75rem;
  color: var(--ink-dim);
  font-size: 0.94rem;
}
.contact-info-list b {
  color: var(--ink);
  font-weight: 600;
}
.contact-info-list .footer-pending {
  color: var(--ink-faint);
  font-size: 0.86rem;
}

.form-field {
  margin-block-end: 1rem;
}
.form-field label {
  display: block;
  margin-block-end: 0.45rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent);
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-note {
  margin-block-start: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  min-height: 1.2em;
}
.form-note[data-state="ok"] { color: var(--accent); }
.form-note[data-state="error"] { color: var(--danger); }

/* ───────────────────────── پاورقی اعتماد ───────────────────────── */

.footer {
  border-block-start: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--bg-soft);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

.footer-col-title {
  font-weight: 700;
  margin-block-end: 0.9rem;
  font-size: 0.92rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: var(--accent);
}

.footer-identity {
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 2;
}

.footer-identity-compact {
  margin-block-start: 0;
}

.enamad-slot {
  width: 92px;
  height: 92px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink-faint);
  padding: 0.4rem;
}

.footer-bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* ───────────────────────── واکنش گرا: نوار بالا در موبایل ───────────────────────── */

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: 3.9rem 0.75rem auto 0.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .nav-links a {
    padding: 0.7rem 0.6rem;
    border-radius: var(--radius-sm);
  }
  .nav-links a:hover {
    background: var(--surface-2);
  }
  body.nav-open .nav-links {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-actions .btn-ghost {
    display: none;
  }
}

/* مالک ۱۴۰۵/۰۷/۱۸ («اون بالا هم فقط ورود به داشبورد باشه»): دکمهٔ نوار بالا «ورود به داشبورد» شد که از
   «خرید اشتراک» بلندتر است و روی گوشی ۳۶۰ پیکسلی هم متن دکمه و هم نام برند را دو سطری می‌کرد. هیچ‌کدام
   نمی‌شکنند؛ روی گوشی‌های باریک فاصله‌ها کمی جمع‌تر می‌شوند تا هر سه (برند، دکمه، منو) در یک ردیف جا شوند. */
.brand,
.nav-actions .btn {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .nav-row {
    gap: 0.5rem;
  }
  .nav-actions {
    gap: 0.4rem;
  }
  .nav-actions .btn-sm {
    padding-inline: 0.8rem;
  }
  .brand {
    gap: 0.45rem;
    font-size: 1.05rem;
  }
}

/* ───────────────────────── ویدیوی سربرگ فقط دسکتاپ ───────────────────────── */
/* الزام مالک: داده موبایل کاربر ایرانی گران است. app.js اصلا تگ <video> را
   روی نمای موبایل به DOM اضافه نمی کند، ولی این قانون شیوه نامه هم پشتیبان
   است تا اگر ویدیو به هر دلیلی در HTML ماند، روی موبایل دیده نشود. */
@media (max-width: 760px) {
  .hero-media video {
    display: none;
  }
  /* صحنه مالی روی موبایل ساده می شود، نه له: موج و نمودار روند حذف،
     شبکه و نوار شمع (هویت مالی صحنه) با ارتفاع کمتر می مانند */
  .hm-wave,
  .hm-trend {
    display: none;
  }
  .hm-candles {
    bottom: 6%;
    height: 84px;
  }
  /* این ناحیه زیر scrim تقریبا مات است و متنی هم آن جا نیست؛
     کدری بیشتر فقط جبران تیرگی است، نه رقابت با متن */
  .cu { opacity: 0.95; }
  .cu-w { opacity: 0.6; }
  .cd { opacity: 0.8; }
  .cd-w { opacity: 0.55; }
  /* روی موبایل نوار شمع زیر متن هاست و هم پوشانی ندارد؛ ماسک لازم نیست */
  .hm-candles-clip {
    -webkit-mask: none;
    mask: none;
  }
  /* در بخش تماس روی موبایل، متن تمام عرض را می گیرد: ذره ها حذف و حلقه به
     نیمه پایین (پشت کارت فرم) می رود تا زیر هیچ متنی نیفتد */
  .hero-decor--about .hero-particle {
    display: none;
  }
  .hero-decor--about .hero-ring,
  .hero-decor--about .hero-sweep {
    top: 72%;
  }
}

/* ───────────────────────── حرکت کاهش یافته ───────────────────────── */

/* ═══════════════ سازگاری موبایل ═══════════════
   این بلوک از یک بازرسی روی چهار عرض واقعی گوشی آمده (۳۲۰، ۳۹۰، ۴۳۰، ۷۶۸)
   و هر قاعده اش یک ایراد سنجیده شده را می بندد، نه یک احتیاط کلی. */

/* ۱) سافاری iOS روی ورودی با فونت زیر ۱۶ پیکسل، هنگام تپ خودش صفحه را
   زوم می کند و کاربر گم می شود. شرط pointer:coarse یعنی فقط روی دستگاه
   لمسی؛ روی دسکتاپ اندازه ها دست نخورده می ماند. */
@media (pointer: coarse) {
  input, select, textarea {
    font-size: 16px;
  }

  /* ۲) کف هدف لمس. ۲۴ پیکسل کمینه ای است که انگشت رویش می نشیند؛ با
     padding بزرگ می شود نه با فونت، تا چیدمان جابه جا نشود. */
  .footer-links a,
  .legal-links a,
  footer a,
  .nav-actions a,
  .nav-actions button,
  /* صفحه های حقوقی (terms/privacy/refund/guide/contact) شیوه نامه درون خطی
     خودشان را دارند و کلاس هاشان lg- پیشوند دارد؛ بدون این چند خط، همان
     صفحه ها روی گوشی هدف لمسی ۲۲ تا ۲۷ پیکسلی می دادند — سنجیده شد. */
  .lg-footer-links a,
  .lg-nav a,
  .lg-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-block: 2px;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .forgot-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* ۴) چک باکس کوچک می ماند ولی ناحیه لمسش گسترده می شود. inset منفی
     روی شبه عنصر، هیچ فضایی در چیدمان نمی گیرد. */
  input[type="checkbox"],
  input[type="radio"] {
    position: relative;
  }
  input[type="checkbox"]::after,
  input[type="radio"]::after {
    content: '';
    position: absolute;
    inset: -9px;
  }
}

/* ۳) کف خوانایی روی گوشی. ۱۱٫۲ پیکسل در پاورقی دیده شد. */
@media (max-width: 780px) {
  .trust-note,
  .enamad-slot,
  .footer-note,
  .tiny {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* پرده کنار رفته بماند، وگرنه نمودار نیمه ساخته یخ می زند */
  .hm-veil { transform: translateX(660px); animation: none; }
  .hm-head { opacity: 1; animation: none; }
  html {
    scroll-behavior: auto;
  }
  .hero-blob--a,
  .hero-blob--b,
  .hero-blob--c,
  .hero-content,
  .hero-ring,
  .hero-sweep,
  .hero-particle,
  .hm-candles,
  .hm-wave,
  .hm-trend,
  .hm-tip,
  .hm-ping,
  .section-glow,
  .pkg-shine::after {
    animation: none !important;
  }
  /* بی انیمیشن، حلقه تپش دیده نشود و روند کامل نمایش داده شود */
  .hm-ping {
    opacity: 0;
  }
  /* app.js زیر reduced-motion اصلا کلاس reveal نمی دهد؛ این خط پشتیبان CSS است */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ───────────── گ۳: پس‌زمینه‌های خلوت — لایه‌های محیطی ─────────────
   خواسته مالک: «پس زمینه یه جاهایی خیلی خلوته با opacity کم، میخوام یه
   مقدار پویاتر بشه» و «روندی باشه نه پلکانی و روون تر». پس: حرکت پیوسته،
   فقط transform/opacity (بدون filter و box-shadow روی عنصر متحرک)،
   دوره ها عدد اول (۱۳/۱۷/۱۹/۲۳/۴۳/۵۳) تا هم فاز نشوند.
   سقف شفافیت از محاسبه تضاد: متن faint روی زمینه فقط ۴٫۶۹:۱ است، پس اوج
   هاله ها ≤۰٫۰۶ (نعنایی/نیلی) و ≤۰٫۰۴ (طلایی) و مرکزشان دور از ستون متن؛
   نقطه ها فقط در نوارهای بی متن (ماسک ایستا). فضای نام g3- تا با کار
   موازی و به روزرسانی های بعدی شیوه نامه برخورد نکند. */

/* سه بخش برهنه لنگر و برش می گیرند تا دکور بیرون نزند (الگوی section-decor) */
#packages,
#testimonials,
#steps {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#packages::before,
#packages::after,
#testimonials::before,
#testimonials::after,
#steps::before,
#steps::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* پکیج ها — دو گوشه بالای سرصفحه وسط چین خالی است. نعنایی (رشد) در یک سو،
   طلایی بسیار کم رنگ (پرمیوم، پژواک نشان «پیشنهاد ما») در سوی دیگر. */
#packages::before {
  top: -14%;
  inset-inline-end: -12%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, rgba(34, 211, 168, 0.06), transparent 68%);
  animation: g3-drift-a 43s var(--ease) infinite;
}
#packages::after {
  top: -16%;
  inset-inline-start: -10%;
  width: min(38vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(242, 193, 78, 0.04), transparent 66%);
  animation: g3-drift-b 19s var(--ease) infinite;
}

/* نظرات — هاله بنفش/نیلی (از امضای رنگین) در حاشیه بالا-کنار سرصفحه،
   و یک خط امضای رنگین کمانی باریک در نوار خالی زیر کارت ها که آرام سر
   می خورد و نفس می کشد؛ حرکتش روان است نه پله ای. */
#testimonials::before {
  top: -12%;
  inset-inline-start: -10%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 50%, rgba(200, 107, 214, 0.05), transparent 66%),
              radial-gradient(circle at 40% 65%, rgba(122, 123, 255, 0.05), transparent 70%);
  animation: g3-drift-b 17s var(--ease) infinite;
}
#testimonials::after {
  bottom: clamp(1.5rem, 4vw, 3rem);
  inset-inline-start: 12%;
  width: 76%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
      transparent, #22d3a8 18%, #35c8e8 38%, #7a7bff 58%, #c86bd6 76%, #f2c14e 90%, transparent);
  opacity: 0.22;
  animation: g3-slide 43s var(--ease) infinite, g3-breathe 17s ease-in-out infinite;
}

/* مراحل کار — مسیر نقطه چین: میدان نقطه های ریز با رانش خطی بی درز
   (translate دقیقا یک کاشی در هر دور => لوپ نامرئی)، ماسک شده به نوار
   خالی پایین بخش تا هرگز زیر متن گام ها نیفتد. */
#steps::before {
  /* بیشتر از دامنه translate (۱۹۰px) تا در طول لوپ لبه پیدا نشود */
  inset: -200px;
  background-image:
      radial-gradient(1.6px 1.6px at 34px 42px, rgba(34, 211, 168, 0.10), transparent 100%),
      radial-gradient(1.3px 1.3px at 128px 118px, rgba(111, 123, 149, 0.10), transparent 100%),
      radial-gradient(1.1px 1.1px at 82px 152px, rgba(53, 200, 232, 0.08), transparent 100%);
  background-size: 190px 170px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 58%, #000 74%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0 58%, #000 74%, #000 94%, transparent);
  animation: g3-dots 53s linear infinite;
}
#steps::after {
  bottom: -18%;
  inset-inline-end: -12%;
  width: min(40vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(53, 200, 232, 0.05), transparent 68%);
  animation: g3-drift-a 23s var(--ease) infinite;
}

@keyframes g3-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, 7%) scale(1.1); }
}
@keyframes g3-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, -6%) scale(1.08); }
}
@keyframes g3-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4%); }
}
@keyframes g3-breathe {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.1; }
}
/* یک کاشی کامل (۱۹۰×۱۷۰) در هر دور؛ linear تا رانش پیوسته و بی مکث باشد */
@keyframes g3-dots {
  from { transform: translate(0, 0); }
  to { transform: translate(190px, 170px); }
}

@media (max-width: 780px) {
  /* تک ستونه: متن تمام عرض را می گیرد؛ هاله ها کوچک تر و کم رنگ تر تا
     زیر متن نیفتند، نقطه ها فقط در همان نوار خالی می مانند. */
  #packages::before, #packages::after,
  #testimonials::before, #steps::after {
    width: min(70vw, 340px);
    opacity: 0.7;
  }
  #testimonials::after { inset-inline-start: 6%; width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  #packages::before, #packages::after,
  #testimonials::before, #testimonials::after,
  #steps::before, #steps::after {
    animation: none !important;
  }
}

/* ───────────── گ۳: لایه محیطی صفحه های فرعی ─────────────
   حاشیه های دور کارت مرکزی در login/contact/terms/… تخت و مرده بود؛
   خواسته مالک: «یه مقدار پویاتر». دو هاله گوشه ای با رانش آرام + نقطه های
   ریز فقط در ۱۲٪ لبه های چپ/راست (ماسک ایستا) تا هرگز زیر متن نیفتند؛
   زیر ۷۲۰px حاشیه ای نمی ماند و نقطه ها کلا حذف می شوند.
   فقط transform/opacity، دوره ها عدد اول (۴۳/۵۳)، fixed و z:−۱ پس پشت
   پس زمینه های خود صفحه های اینمادی (که توکن ها را بازتعریف می کنند) هم
   درست می نشیند چون پس زمینه body به بوم منتشر می شود.
   :not([data-ssr]) صفحهٔ اصلی را کنار می گذارد: آن صفحه صحنهٔ مالی و هاله های
   خودش را دارد (بخش «تزیین بخش‌ها» بالاتر)، این لایه رویش اضافه/شلوغ می شد. */

body:not([data-ssr])::before,
body:not([data-ssr])::after {
  content: '';
  position: fixed;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body:not([data-ssr])::before {
  /* بزرگ تر از viewport تا در طول رانش لبه پیدا نشود */
  inset: -12%;
  background:
      radial-gradient(circle at 82% 12%, rgba(34, 211, 168, 0.05), transparent 32%),
      radial-gradient(circle at 12% 88%, rgba(122, 123, 255, 0.05), transparent 34%);
  animation: g3-amb-a 53s var(--ease, ease-in-out) infinite;
}
body:not([data-ssr])::after {
  /* فقط bleed عمودی؛ رانش هم فقط عمودی است تا ماسک درصدیِ افقی دقیقا با
     viewport بخواند و لبه ای هم پیدا نشود */
  inset: -240px 0;
  background-image:
      radial-gradient(1.5px 1.5px at 36px 44px, rgba(34, 211, 168, 0.09), transparent 100%),
      radial-gradient(1.2px 1.2px at 132px 124px, rgba(111, 123, 149, 0.09), transparent 100%),
      radial-gradient(1.1px 1.1px at 86px 158px, rgba(53, 200, 232, 0.07), transparent 100%);
  background-size: 200px 180px;
  -webkit-mask-image: linear-gradient(to right, #000 0 11%, transparent 19% 81%, #000 89%);
  mask-image: linear-gradient(to right, #000 0 11%, transparent 19% 81%, #000 89%);
  animation: g3-amb-dots 43s linear infinite;
}

@keyframes g3-amb-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-1.5%, 2%) scale(1.05); }
}
/* یک کاشی کامل عمودی (۱۸۰px) در هر دور => لوپ بی درز و روان */
@keyframes g3-amb-dots {
  from { transform: translate(0, 0); }
  to { transform: translate(0, 180px); }
}

@media (max-width: 720px) {
  /* موبایل: حاشیه خالی کنار کارت نداریم؛ نقطه ها حذف، هاله کم رنگ تر */
  body:not([data-ssr])::after { display: none; }
  body:not([data-ssr])::before { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  body:not([data-ssr])::before,
  body:not([data-ssr])::after {
    animation: none !important;
  }
}

/* ───────────── پلتفرم و طرح اشتراک (مالک ۱۴۰۵/۰۷/۱۴: «سایت تبدیل بشه به پیش زمینه برای ورود به پلتفرم») ───────────── */
/* بخش معرفی پلتفرم فاصلهٔ یک بخش کامل را دارد؛ نوار باریک قبلی فقط برای یک دکمهٔ تنها بود. */
.platform-band--intro {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
/* شش کارت امکانات: سه‌تایی روی رایانه، دوتایی روی تبلت، تکی روی گوشی — هیچ ردیف ناقصی نمی‌ماند. */
.platform-grid {
  counter-reset: pf;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-end: var(--gap);
}
.platform-grid .why-card {
  counter-increment: pf;
}
.platform-num::before {
  content: counter(pf, persian);
}
@media (max-width: 900px) {
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .platform-grid { grid-template-columns: minmax(0, 1fr); }
}
/* شمارهٔ گام‌ها با رقم فارسی، مثل بقیهٔ عددهای صفحه */
.step-num::before {
  content: counter(step, persian);
}
/* طرح تنها: یک کارت در میانه، نه یک کارت چسبیده به یک سو */
.pkg-grid--one {
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
}
.pkg-cta .btn + .btn {
  margin-block-start: 0.6rem;
}
/* «حالت سایت» خاموش (assets/sitemode.js): راهنمای مشتری به پلتفرم، جای فرم یا صفحه‌ای که بسته است */
.site-closed {
  display: grid;
  /* ستون به پهنای خود کارت: بی این، جدول دو دکمه ستون را از صفحهٔ ۳۶۰ پیکسلی پهن‌تر می‌کرد و دکمهٔ
     «بازگشت به صفحهٔ اصلی» ۴۳ پیکسل بیرون می‌زد (سنجیده ۱۴۰۵/۰۷/۱۸) */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  margin-block: 1.25rem;
}
.site-closed-title {
  font-size: 1.15rem;
  font-weight: 800;
}
.site-closed-body {
  color: var(--ink-dim);
}
/* دو دکمه هم‌پهنا: کنار هم روی رایانه، زیر هم روی گوشی */
.site-closed-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 26rem;
}
.site-closed-wrap {
  padding-block: 2rem;
}