@charset "utf-8";
/* =========================================================================
   آلاسبز — سیستم طراحیِ جدید (ui.css)
   از صفر نوشته شده؛ جایگزینِ کاملِ site.css.
   ترتیب: فونت → ریست → توکن → پایه → ابزارک → هدر → فوتر
   ========================================================================= */


/* ---------------------------------------------------------------- ۱) فونت */
/* ایران‌یکان‌ایکس یک فونتِ متغیر است و همه‌ی وزن‌ها در همین یک فایل‌اند.
   اعلامِ بازه‌ی ‎font-weight: 100 1000‎ اجباری است: اگر ننویسیم، مرورگر
   فونت را وزنِ ۱۰۰ (مویی و ناخوانا) رندر می‌کند. */
@font-face {
  font-family: 'IRANYekanX';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/IRANYekanXVF.woff2') format('woff2');
}

/* ایران‌سانس فقط فالبکِ لحظه‌ی بارگذاری است و عمداً پیش‌بارگذاری نمی‌شود.
   ‎size-adjust‎ ارتفاعِ ایکسِ آن را به ایران‌یکان نزدیک می‌کند تا هنگام
   سواپ‌شدنِ فونت، متن نپرد. */
@font-face { font-family: 'IRANSans'; font-weight: 300; font-display: swap; size-adjust: 83%; src: url('/fonts/IRANSansWeb_Light.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-weight: 400; font-display: swap; size-adjust: 83%; src: url('/fonts/IRANSansWeb.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-weight: 500; font-display: swap; size-adjust: 83%; src: url('/fonts/IRANSansWeb_Medium.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-weight: 700; font-display: swap; size-adjust: 83%; src: url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'); }


/* ---------------------------------------------------------------- ۲) ریست */
*, *::before, *::after { box-sizing: border-box; }

/* قاعده‌ی ‎[hidden]‎ ِ خودِ مرورگر ویژگیِ (۰,۱,۰) دارد و هر کلاسی که ‎display‎ ست
   کند آن را می‌پوشاند — یعنی ‎<p class="x" hidden>‎ اگر ‎.x‎ مقدارِ ‎display‎ داشته
   باشد، دیده می‌شود. این یک بار واقعاً اتفاق افتاد (نوارِ «در پاسخ به» در بخشِ
   نظرها). ‎!important‎ این‌جا درست است، همان کاری که normalize می‌کند. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---------------------------------------------------------------- ۳) توکن */
:root {
  /* --- مقیاسِ تایپوگرافی ---
     نردبانِ استانداردِ رابطِ کاربری. پیش‌تر ۳۹ عددِ پراکنده بود (۱۱.۵،
     ۱۲.۵، ۱۴.۵، ۱۵.۵، ۱۶.۵…) که نه سیستم بود نه قابلِ تنظیمِ یک‌جا.
     هیچ ‎font-size‎ ِ خامی نباید بیرونِ این نردبان نوشته شود. */
  --fs-1: 11px;   /* ریزنوشت: برچسبِ بالای شماره، زیرنویسِ آیتم‌ها */
  --fs-2: 12px;   /* نوارِ بالا، کپی‌رایت */
  --fs-3: 13px;   /* متنِ فرعی، دکمه‌ی کوچک، عنوانِ ستونِ فوتر */
  --fs-4: 14px;   /* پیش‌فرضِ رابطِ کاربری: منو، دکمه، لینکِ مگامنو */
  --fs-5: 15px;   /* بدنه */
  --fs-6: 17px;   /* برندِ فوتر، برندِ موبایل */
  --fs-7: 19px;   /* نامِ برند در هدر */
  --fs-8: 22px;

  /* --- مقیاسِ متنِ خواندنی: سه پله، جدا از نردبانِ بالا ---
     آن نردبان برای رابطِ کاربری است (دکمه، منو، برچسب) و متنِ بلندِ فارسی
     از همه‌ی پله‌هایش درشت‌تر می‌خواهد.

       ‎--fs-read-sm‎  متنِ خواندنیِ فرعی: پاسخِ سؤال، کال‌اوت، خانه‌ی جدول
       ‎--fs-read‎     متنِ اصلیِ مقاله و بدنه‌ی لندینگ
       ‎--fs-lead‎     لیدِ هیرو

     ‎--fs-lead‎ عمداً یک پله **بالای** متنِ بدنه است. پیش‌تر ‎--fs-6‎ (۱۷px)
     بود و در صفحه‌هایی که زیرش متنِ ۱۸پیکسلی داشتند، مقدمه کوچک‌تر از خودِ
     متن دیده می‌شد — سلسله‌مراتبِ برعکس. */
  --fs-read-sm: 16px;
  --fs-read: 18px;
  --fs-lead: clamp(17px, 1.5vw, 20px);

  /* ‎h1‎ ِ هیروی صفحات. پیش‌تر هر صفحه عددِ خودش را داشت (۴۰، ۴۴، ۴۶، ۵۰)
     و شش نوعِ صفحه شش اندازه‌ی تیترِ اصلی داشتند. */
  --fs-h1: clamp(27px, 4.2vw, 46px);

  /* دو پله‌ی عرضِ صفحه‌ی مقاله. همه‌ی متنِ خواندنی روی پله‌ی باریک می‌نشیند
     و فقط عکس، کارتِ اقدام و شبکه‌ی مقالاتِ مرتبط یک پله بازتر می‌شوند.
     پیش‌تر پنج عددِ مختلف در کار بود (۸۰۰، ۸۲۰، ۶۸ch، ۷۰ch و تمام‌عرض) و
     لبه‌ی چپ و راستِ صفحه پلکانی می‌شکست. */
  --at-w: 700px;
  --at-w-wide: 880px;

  /* --- پالتِ برند: سبزِ زمردیِ عمیق، هیو ۱۶۹.۳ ---
     لنگرِ برند ‎#004D3A‎ است (انتخابِ کاربر). با ‎oklch‎ نوشته شده تا
     پله‌های روشنایی دقیق بمانند؛ ‎L=37.4٪ C=0.075 H=169.3‎ همان هگز است.

     ‎--g-900‎ و ‎--g-800‎ عمداً هر دو دقیقاً همان ‎#004D3A‎اند: یکی بدنه‌ی
     نوارِ بالا و دکمه‌ی اقدام است و دیگری رنگِ متن — و هر دو باید خودِ
     رنگِ برند باشند، نه مشتقی از آن. */
  --g-950: oklch(23.2% .060 169.3);
  --g-900: #004D3A;              /* نوارِ بالا و دکمه‌ی اقدام */
  --g-800: #004D3A;              /* متن و آیکونِ سبز */
  --g-700: oklch(56.6% .063 169.3);
  --g-600: oklch(71% .075 169.3);   /* لهجه‌ی سبزِ روشن: چیپ، خطِ زیرِ منو */
  --g-500: oklch(75.1% .071 169.3);
  --g-400: oklch(81.2% .053 169.3);
  --g-200: oklch(91.3% .026 169.3);
  --g-100: oklch(95.4% .016 169.3);
  --g-50:  oklch(98.3% .008 169.3);

  /* --- سبزِ متن، جدا از سبزِ برند ---
     ریشه‌ی گیرِ قبلی این بود که یک توکن هم رنگِ برند بود هم رنگِ لینک، پس
     هر بار روشن‌ترش می‌کردیم کنتراستِ متن می‌شکست و عقب می‌کشیدیم. حالا
     جدا شده‌اند: لهجه هرچه بخواهد روشن شود، متن از این‌ها می‌آید. */
  --brand-ink:  var(--g-800);              /* متن و آیکونِ سبز — ۷.۱:۱ روی سفید */
  --brand-fill: var(--g-800);              /* پُرکننده هرجا متن/آیکونِ سفید رویش است */
  /* ‎--g-700‎ در این پالت به ۵۶٪ رسیده و برای متنِ کوچک ضعیف است، پس
     سبزِ فرعی مستقل تعریف می‌شود نه ارجاع به رمپ. */
  --brand-soft: oklch(48% .072 169.3);     /* متنِ فرعی و شِوران — ۴.۸:۱ */

  /* --- لهجه‌ی گرم: کرم. جای لیموییِ قبلی را کامل گرفته ---
     چیپِ فلشِ دکمه، برگِ لوگو و دکمه‌ی روی کارتِ تیره از این می‌آیند. */
  --accent:    #C89F74;
  --accent-hi: #D8B48D;
  --on-accent: var(--g-950);   /* متنِ روی کرم */

  /* --- کاغذِ کرم ---
     زمینه‌ی بخش‌هایی که باید از سفید جدا شوند. خاکستریِ خنثی هم این کار را
     می‌کرد ولی صفحه را سرد و اداری نشان می‌داد؛ این‌ها از خانواده‌ی همان
     کرمِ لهجه‌اند، پس جدایی حس می‌شود بدونِ اینکه رنگِ تازه‌ای وارد شود. */
  --cream-50:  #FAF6F0;   /* زمینه‌ی بخش */
  --cream-100: #F3E8DA;   /* بلوکِ پررنگ‌تر */
  --cream-200: #E8D6C1;   /* خطِ جداکننده روی کرم */

  /* --- خنثی --- */
  --n-000: #FFFFFF;
  --n-25:  #FAFBFA;
  --n-50:  #F5F7F4;
  --n-100: #EDF0EC;
  --n-200: #E1E6DF;
  --n-300: #C7CFC5;
  --n-500: #74806F;
  --n-700: #3D473A;
  --n-900: #131A11;

  /* --- نقشِ رنگ‌ها --- */
  --paper: var(--n-000);
  --wash:  var(--n-50);
  --ink:   var(--n-900);
  --muted: var(--n-500);
  --line:  var(--n-200);
  --ring:  var(--brand-ink);

  /* --- اندازه --- */
  --wmax: 1260px;
  --gut: clamp(16px, 4.2vw, 34px);

  /* --- گردی --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- سایه: مایل به سبز، نه خاکستریِ مرده --- */
  --sh-1: 0 1px 2px rgba(0, 45, 34, .05), 0 1px 3px rgba(0, 45, 34, .04);
  --sh-2: 0 10px 26px -14px rgba(0, 45, 34, .22);
  --sh-3: 0 28px 64px -28px rgba(0, 45, 34, .34);

  /* --- حرکت --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .16s;
  --mid:  .26s;

  /* --- ارتفاعِ هدر؛ ‎ui.js‎ حالتِ چسبیده را عوض می‌کند --- */
  --tbar-h: 40px;
  --mbar-h: 78px;
  --hd-h: calc(var(--tbar-h) + var(--mbar-h));

  /* --- آیکونِ ماسک ---
     آیکون‌هایی که چند جا فقط به‌عنوانِ «شکل» لازم‌اند (تیک، ضربدر). با
     ‎mask‎ کشیده می‌شوند نه ‎background-image‎، پس رنگشان از ‎currentColor‎ ِ
     همان جا می‌آید و لازم نیست برای هر رنگ یک نسخه‌ی تازه‌ی داده‌ای ساخته
     شود. رنگِ ‎stroke‎ ِ داخلشان بی‌اثر است؛ ماسک فقط آلفا را می‌خواند. */
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");

  --z-hd: 100;
  --z-mega: 90;
  --z-drawer: 120;
}


/* ----------------------------------------------------------------- ۴) پایه */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IRANYekanX', 'IRANSans', system-ui, sans-serif;
  font-size: var(--fs-5);
  font-weight: 400;
  line-height: 1.85;
  /* فارسی با ‎letter-spacing‎ می‌شکند — هرگز روی متنِ فارسی اعمال نشود. */
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.42;
  color: var(--g-950);
  text-wrap: balance;
}

h1 { font-size: clamp(25px, 4.2vw, 40px); line-height: 1.28; }
h2 { font-size: clamp(20px, 2.9vw, 29px); line-height: 1.34; }
h3 { font-size: clamp(17px, 2vw, 21px); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

::selection { background: var(--g-200); color: var(--g-950); }

/* لنگرها زیرِ هدرِ چسبان پنهان نشوند */
:target { scroll-margin-top: calc(var(--mbar-h) + 20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -------------------------------------------------------------- ۵) ابزارک */
.wrap {
  width: 100%;
  max-width: var(--wmax);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 999;
  transform: translateY(-160%);
  background: var(--g-700);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: transform var(--fast) var(--ease);
}
.skip:focus { transform: none; }

/* --- دکمه --- */
.btn {
  --btn-bg: var(--brand-fill);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { flex: none; }

.btn-primary { box-shadow: 0 8px 20px -12px rgba(0, 77, 58, .9); }
.btn-primary:hover { --btn-bg: var(--g-700); box-shadow: 0 12px 26px -12px rgba(0, 77, 58, .95); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--brand-ink); --btn-bd: var(--line); }
.btn-ghost:hover { --btn-bd: var(--g-400); --btn-bg: var(--g-50); }

.btn-sm { padding: 9px 16px; font-size: var(--fs-3); }
.btn-block { width: 100%; }


/* ========================================================================= */
/*                                 ۶) هــدر                                  */
/* ========================================================================= */
/* دو طبقه: نوارِ باریکِ اطلاعاتی (tbar) + نوارِ اصلی (mbar).
   کلِ هدر چسبان است؛ با اسکرول فقط نوارِ باریک جمع می‌شود و نوارِ اصلی
   می‌ماند. کلاسِ ‎.is-stuck‎ را ‎ui.js‎ روی ‎.hd‎ می‌گذارد. */

.hd {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-hd);
  background: var(--paper);
}

/* --------------------------------------------------- ۶.۱) نوارِ باریکِ بالا */
.tbar {
  height: var(--tbar-h);
  overflow: hidden;
  background: var(--g-900);
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-2);
  line-height: 1;
  transition: height var(--mid) var(--ease), opacity var(--fast) var(--ease);
}

.hd.is-stuck .tbar { height: 0; opacity: 0; }

.tbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--tbar-h);
}

.tbar a { transition: color var(--fast) var(--ease); }
.tbar a:hover { color: #fff; }

.tbar-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tbar-loc svg { color: var(--g-400); }
.tbar-loc b { color: #fff; font-weight: 600; }

/* «همه‌ی مناطق» تا وقتی موس نیامده پنهانِ نرم است تا نوار شلوغ نشود */
.tbar-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 4px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
  color: var(--g-400);
  font-size: var(--fs-1);
  opacity: .75;
  transition: opacity var(--fast) var(--ease);
}
.tbar-loc:hover .tbar-more { opacity: 1; }

.tbar-end {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.tbar-hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tbar-hours svg { color: rgba(255, 255, 255, .42); }

.tbar-sep {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, .16);
}

.tbar-soc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tbar-soc a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  color: rgba(255, 255, 255, .6);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tbar-soc a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* روی موبایل نوار حذف نمی‌شود، جمع می‌شود. پیش‌تر کاملاً ‎display: none‎ بود
   و «۲۴ ساعته بودن» — که مهم‌ترین مزیتِ عملیاتیِ کسب‌وکار است — فقط روی
   دسکتاپ دیده می‌شد. حالا یک نوارِ باریکِ تک‌خطیِ متقارن می‌ماند:
   شهرها + ساعتِ کاری. با اسکرول هم مثلِ حالتِ دسکتاپ جمع می‌شود. */
@media (max-width: 940px) {
  :root { --tbar-h: 34px; }
  .tbar { font-size: var(--fs-1); }
  .tbar-in { justify-content: center; gap: 14px; }
  .tbar-more,
  .tbar-sep,
  .tbar-soc { display: none; }
  .tbar-loc { gap: 7px; }
  .tbar-loc svg { width: 13px; height: 13px; }
  .tbar-hours { gap: 7px; }
  .tbar-hours svg { width: 12px; height: 12px; }
}

/* زیرِ ۴۲۰px هر دو با هم جا نمی‌شوند و نوار می‌شکند؛ ساعتِ کاری می‌ماند
   چون همان چیزی است که کاربر باید بداند. */
@media (max-width: 420px) {
  .tbar-loc { display: none; }
}

/* -------------------------------------------------------- ۶.۲) نوارِ اصلی */
.mbar {
  border-block-end: 1px solid var(--line);
  background: var(--paper);
  transition: box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.hd.is-stuck .mbar {
  border-color: transparent;
  box-shadow: 0 6px 24px -16px rgba(0, 45, 34, .45);
}

.mbar-in {
  /* ‎position: relative‎ اینجا لازم است: پنلِ مگامنو نسبت به همین کانتینر
     تراز می‌شود تا بتواند پهن‌تر از آیتمِ منو باشد. */
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  height: var(--mbar-h);
  transition: height var(--mid) var(--ease);
}
.hd.is-stuck .mbar-in { height: 66px; }

/* --- نشانِ برند --- */
.bmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.bmark-i {
  width: 42px;
  height: 42px;
  flex: none;
  transition: transform var(--mid) var(--ease);
}
.bmark:hover .bmark-i { transform: rotate(-4deg) scale(1.04); }

.bmark-t {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
.bmark-t b {
  font-size: var(--fs-7);
  font-weight: 800;
  color: var(--g-950);
}
.bmark-t small {
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--muted);
}

/* --- منوی افقی --- */
/* منو بلافاصله بعدِ برند می‌نشیند؛ فاصله‌ی خالی به بخشِ تماس داده می‌شود
   (‎margin‎ ِ خودکار روی ‎.hd-act‎) تا منو و تلفن به هم نچسبند. */
.mnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: clamp(6px, 2vw, 24px);
  /* تا ارتفاعِ کاملِ نوار کش می‌آید تا پنلِ مگامنو از لبه‌ی پایینِ نوار باز
     شود، نه از وسطِ آن. ضمناً ناحیه‌ی هاور بلندتر می‌شود و ماوس هنگام
     پایین‌آمدن از دکمه به پنل، از منو خارج نمی‌شود. */
  align-self: stretch;
}

/* لنگرِ پنلِ مگامنو. اگر ‎position‎ نداشته باشد، پنل به کانتینرِ هدر تراز
   می‌شود و زیرِ لوگو باز می‌شود نه زیرِ «خدمات». */
.mnav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.mnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--n-700);
  font-size: var(--fs-4);
  font-weight: 600;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.mnav-link:hover { color: var(--brand-ink); background: var(--g-50); }

/* خطِ کوتاهِ زیرِ آیتمِ جاری */
.mnav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-600);
  transform: scaleX(0);
  transition: transform var(--mid) var(--ease);
}
.mnav-link[aria-current]::after,
.mnav-item.is-current > .mnav-link::after { transform: scaleX(1); }

.mnav-link .chev {
  transition: transform var(--mid) var(--ease);
  opacity: .55;
}
.mnav-item.is-open > .mnav-link { color: var(--brand-ink); background: var(--g-50); }
.mnav-item.is-open > .mnav-link .chev { transform: rotate(180deg); opacity: 1; }

/* --- بخشِ اقدام: تلفن + دکمه --- */
.hd-act {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-inline-start: auto;
  padding-inline-start: clamp(10px, 3vw, 40px);
}

.hd-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-inline-end: 4px;
}
.hd-tel-i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--g-50);
  color: var(--brand-ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.hd-tel:hover .hd-tel-i { background: var(--brand-fill); color: #fff; }
.hd-tel-t {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hd-tel-t small { font-size: var(--fs-1); font-weight: 500; color: var(--muted); }
.hd-tel-t b { font-size: var(--fs-5); font-weight: 700; color: var(--g-900); }

/* --- لهجه‌ی روشن: همان سبزِ برگِ لوگو --- */
.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--g-950); }
.btn-accent:hover { --btn-bg: var(--accent-hi); }

/* --- دکمه‌ی اصلیِ اقدام --- */
/* تخت و بدونِ گرادیان: بدنه‌ی سبزِ خیلی تیره + یک چیپِ لیمویی که رنگش را از
   برگِ لوگو می‌گیرد. در حالتِ سکون هیچ سایه‌ای ندارد؛ عمق فقط لحظه‌ی هاور
   می‌آید. تضادِ تیره/لیمویی کارِ «دیده‌شدن» را انجام می‌دهد، نه سایه. */
.btn-cta {
  --btn-bg: var(--g-900);
  --btn-fg: #fff;
  gap: 12px;
  padding-block: 7px;
  padding-inline: 22px 7px;
  box-shadow: none;
  font-size: var(--fs-4);
  font-weight: 700;
}
.btn-cta:hover {
  --btn-bg: var(--g-950);
  box-shadow: 0 14px 26px -16px rgba(0, 32, 24, .9);
}
.btn-cta:active { transform: scale(.985); }

.cta-i {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--g-950);
  overflow: hidden;
  transition: width var(--mid) var(--ease), background var(--fast) var(--ease);
}
.btn-cta:hover .cta-i { width: 44px; background: var(--accent-hi); }

/* دو فلشِ روی هم: اولی با هاور از سمتِ چپ بیرون می‌رود و دومی از راست
   جایش می‌آید. ‎translateX‎ در CSS فیزیکی است و با ‎dir=rtl‎ آینه نمی‌شود،
   پس «جلو» را دستی منفی گرفته‌ایم. */
/* ‎inset: 0‎ + ‎margin: auto‎ فلش را دقیقاً وسطِ چیپ می‌نشاند. با ‎position:
   absolute‎ ِ تنها، فرزندِ گرید به گوشه می‌چسبد — همان باگِ قبلی. */
.cta-i svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: transform .34s var(--ease);
}
/* درصدِ ‎translateX‎ نسبت به عرضِ خودِ آیکون است (۱۷px)، نه چیپ. با ۱۵۰٪
   جابه‌جایی ۲۵px می‌شد و چون آیکون از مرکزِ چیپِ ۳۴پیکسلی حرکت می‌کرد،
   یک باریکه‌اش لبه‌ی چیپ باقی می‌ماند. ۲۳۰٪ کاملاً بیرونش می‌برد. */
.cta-i svg + svg { transform: translateX(230%); }
.btn-cta:hover .cta-i svg { transform: translateX(-230%); }
.btn-cta:hover .cta-i svg + svg { transform: none; }

/* در حالتِ تمام‌عرض (کشوی موبایل) متن و چیپ به دو سر می‌روند */
.btn-cta.btn-block {
  justify-content: space-between;
  padding-block: 8px;
  padding-inline: 22px 8px;
  font-size: var(--fs-5);
}

/* --- دکمه‌ی همبرگری --- */
.burg {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--g-900);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.burg:hover { background: var(--g-50); border-color: var(--g-200); }
.burg span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease);
}
/* خطِ وسط محو می‌شود و دو خطِ دیگر ضربدر می‌سازند.
   جابه‌جاییِ ۷px = ارتفاعِ خط (۲) + فاصله (۵). */
.burg[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burg[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burg[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------- ۶.۳) نقاطِ شکستِ هدر */
/* جا که تنگ می‌شود فقط برچسبِ «مشاوره و رزرو» می‌رود؛ خودِ شماره می‌ماند.
   پیش‌تر کلِ بلوک حذف می‌شد و در بازه‌ی ۶۲۰ تا ۱۱۸۰ یک آیکونِ گنگِ تنها
   باقی می‌ماند. */
@media (max-width: 1180px) {
  .hd-tel-t small { display: none; }
  .hd-tel-t b { font-size: var(--fs-4); }
  .hd-tel { padding-inline-end: 0; }
  .mnav-link { padding-inline: 10px; }
  .mnav-link::after { inset-inline: 10px; }
}

@media (max-width: 1000px) {
  .mnav { display: none; }
  /* ‎flex‎ نه ‎grid‎ — پایه‌ی ‎.burg‎ فلکسِ ستونی است و با ‎grid‎ خط‌ها
     به‌جای وسط، به لبه می‌چسبیدند. */
  .burg { display: flex; }
}

/* زیرِ ۶۲۰px دکمه‌ی «بازدید رایگان» جا نمی‌شود و حذف می‌شود؛ اگر تلفن هم
   یک آیکونِ تنها بماند، هدر بی‌اقدام می‌شود. پس خودِ تلفن به یک قرصِ تیره‌ی
   کامل با شماره تبدیل می‌شود تا زبانِ بصری‌اش با دکمه‌ی اصلی یکی باشد. */
@media (max-width: 620px) {
  :root { --mbar-h: 66px; }
  /* فضا برای «لوگو + زیرنویس + شماره + همبرگری» تنگ است؛ فاصله‌های
     تزئینی کوچک می‌شوند تا هیچ‌کدام از این چهار حذف نشوند. */
  .mbar-in { gap: 10px; }
  .hd-act { gap: 8px; padding-inline-start: 8px; }
  .hd-act .btn-cta { display: none; }
  .bmark { gap: 9px; }
  .bmark-i { width: 38px; height: 38px; }
  .bmark-t b { font-size: var(--fs-6); }

  .hd-tel {
    gap: 8px;
    /* پدینگ باید منطقی باشد نه فیزیکی: چیپ در RTL سمتِ راست است، پس
       ‎inline-start‎ (راست) باریک و ‎inline-end‎ (چپ، بعدِ شماره) پهن.
       با شورت‌هندِ فیزیکیِ قبلی دقیقاً برعکس شده بود. */
    padding-block: 4px;
    padding-inline: 4px 14px;
    border-radius: var(--r-pill);
    background: var(--g-900);
    color: #fff;
  }
  .hd-tel-i {
    width: 30px;
    height: 30px;
    background: var(--accent);
    color: var(--g-950);
  }
  .hd-tel:hover .hd-tel-i { background: var(--accent-hi); color: var(--g-950); }
  .hd-tel-t b { font-size: var(--fs-4); color: #fff; }
  .burg { width: 40px; height: 40px; }
}

/* زیرنویسِ برند در همه‌ی عرض‌ها یکی است. زیرِ ۴۲۰px کنارِ شماره و همبرگری
   جا نمی‌شود، پس آن‌جا نه حذفش می‌کنیم نه سه‌نقطه می‌گذاریم — نامِ برند و
   زیرنویس روی هم فشرده می‌شوند و زیرنویس یک پله کوچک‌تر می‌شود. */
@media (max-width: 420px) {
  .bmark-i { width: 34px; height: 34px; }
  .bmark-t b { font-size: var(--fs-5); }
  .bmark-t small { font-size: 10px; }
  .mbar-in { gap: 8px; }
  .hd-act { gap: 6px; padding-inline-start: 4px; }
  .hd-tel { padding-inline: 3px 11px; }
  .hd-tel-i { width: 28px; height: 28px; }
}


/* --------------------------------------------------------- ۶.۴) مگـامـنـو */
/* پنل نسبت به ‎.mbar-in‎ تراز می‌شود، نه نسبت به آیتمِ منو — تا بتواند
   پهنِ سه‌ستونه باشد و در RTL هم بدونِ محاسبه‌ی دستیِ ‎transform‎ درست بنشیند. */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 1px);
  /* در RTL ‎inset-inline-start‎ یعنی لبه‌ی راست. منفیِ ۹ = تفاضلِ پدینگِ
     پنل (۲۲) و پدینگِ دکمه (۱۳)، تا متنِ ستونِ اول دقیقاً زیرِ «خدمات»
     بیفتد. پنل از همان‌جا به سمتِ چپ باز می‌شود. */
  inset-inline-start: -9px;
  z-index: var(--z-mega);
  width: min(860px, calc(100vw - var(--gut) * 2));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--fast) var(--ease),
              transform var(--mid) var(--ease),
              visibility 0s linear var(--mid);
}
.mnav-item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* پلِ نامرئیِ بالای پنل — ماوس هنگام عبور از فاصله‌ی یک‌پیکسلیِ زیرِ نوار
   از ناحیه‌ی هاور بیرون نمی‌افتد. */
.mega::before {
  content: '';
  position: absolute;
  inset-block-start: -12px;
  inset-inline: 0;
  height: 12px;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 268px;
  gap: 10px 26px;
}

.mega-col h6 {
  margin: 0 0 10px;
  padding-block-end: 9px;
  border-block-end: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 700;
}

.mega-col a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--n-700);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.5;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mega-col a small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 400;
}
.mega-col a:hover { background: var(--g-50); color: var(--brand-ink); }
.mega-col a:hover small { color: var(--brand-soft); }

/* ستونِ سوم: کارتِ راهنمایی برای کسی که نمی‌داند کدام خدمت را بخواهد */
.mega-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(168, 217, 198, .22), transparent 62%),
    var(--g-900);
  color: rgba(255, 255, 255, .76);
}
.mega-card b {
  color: #fff;
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1.5;
}
.mega-card p { font-size: var(--fs-3); line-height: 1.75; margin: 0; }
.mega-card .btn { margin-block-start: 4px; }
.mega-card .mega-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 700;
}
.mega-card .mega-tel svg { color: var(--g-400); }

.mega-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 18px;
  padding-block-start: 15px;
  border-block-start: 1px solid var(--line);
}
.mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-ink);
  font-size: var(--fs-3);
  font-weight: 700;
  transition: gap var(--fast) var(--ease);
}
.mega-foot a:hover { gap: 11px; }
.mega-foot svg { transition: transform var(--fast) var(--ease); }


/* ------------------------------------------------------ ۶.۵) کشوی موبایل */
.dr-back {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(0, 32, 24, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
body.dr-on .dr-back { opacity: 1; visibility: visible; transition-delay: 0s; }

.dr {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(390px, 88vw);
  background: var(--paper);
  box-shadow: var(--sh-3);
  transform: translateX(-100%); /* RTL: کشو از سمتِ راست بیرون است */
  visibility: hidden;
  transition: transform var(--mid) var(--ease), visibility 0s linear var(--mid);
}
body.dr-on .dr { transform: none; visibility: visible; transition-delay: 0s; }

/* سرِ کشو یک بلوکِ سبزِ تیره است تا کشو «صفحه‌ی دوم» به‌نظر برسد، نه یک
   لیستِ سفیدِ چسبیده به هدر. */
.dr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 20px;
  background:
    radial-gradient(130% 140% at 100% 0%, rgba(168, 217, 198, .32), transparent 62%),
    var(--g-900);
  color: #fff;
}
.dr-top .bmark { align-items: flex-start; }
.dr-top .bmark-t { gap: 4px; }
.dr-top .bmark-t b { color: #fff; }

/* ریزنوشتِ زیرِ برند: دو نکته‌ی تصمیم‌ساز، جداشده با نقطه */
.dr-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-1);
  font-weight: 500;
}
.dr-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}

.dr-x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background var(--fast) var(--ease), transform var(--mid) var(--ease);
}
.dr-x:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }

.dr-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px 20px;
}

/* ورودِ پلکانیِ آیتم‌ها. ‎--i‎ را مارک‌آپ می‌دهد؛ فقط وقتی کشو باز است
   اجرا می‌شود تا با بسته‌شدن ریست شود و دفعه‌ی بعد دوباره پخش شود. */
@keyframes drIn {
  from { opacity: 0; transform: translateX(18px); }
}
body.dr-on .dr-body > * {
  animation: drIn .42s var(--ease) both;
  animation-delay: calc(90ms + var(--i, 0) * 45ms);
}
body.dr-on .dr-body > .dr-sub { animation: none; }

.dr-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 8px;
  color: var(--n-900);
  text-align: start;
  transition: color var(--fast) var(--ease);
}
/* خطِ مویی بینِ آیتم‌ها — از لبه‌ی متن شروع می‌شود نه از لبه‌ی کشو،
   تا ستونِ آیکون‌ها یک‌دست و بی‌وقفه دیده شود. */
.dr-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 61px 8px;
  height: 1px;
  background: var(--line);
}
.dr-link:last-child::after { display: none; }

.dr-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 13px;
  background: var(--g-50);
  color: var(--brand-ink);
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--mid) var(--ease);
}

.dr-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.4;
  min-width: 0;
}
.dr-tx b { font-size: var(--fs-5); font-weight: 700; }
.dr-tx small {
  color: var(--muted);
  font-size: var(--fs-1);
  font-weight: 500;
  transition: color var(--fast) var(--ease);
}

.dr-link:hover { color: var(--brand-ink); }
.dr-link:hover .dr-ic { background: var(--g-100); transform: scale(1.05); }

.dr-link[aria-current] { color: var(--brand-ink); }
.dr-link[aria-current] .dr-ic { background: var(--brand-fill); color: #fff; }
.dr-link[aria-current] .dr-tx small { color: var(--brand-soft); }

.dr-link .chev {
  margin-inline-start: auto;
  flex: none;
  color: var(--n-300);
  transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}
.dr-link:hover .chev { color: var(--brand-soft); }
.dr-link[aria-expanded="true"] { color: var(--brand-ink); }
.dr-link[aria-expanded="true"] .dr-ic { background: var(--brand-fill); color: #fff; }
.dr-link[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--brand-ink); }
.dr-link[aria-expanded="true"]::after { display: none; }

/* آکاردئونِ خدمات — ارتفاع را ‎ui.js‎ ست می‌کند تا انیمیشن نرم باشد */
.dr-sub {
  overflow: hidden;
  height: 0;
  transition: height var(--mid) var(--ease);
}
.dr-sub-in {
  margin: 4px 0 10px;
  padding: 4px 14px 14px;
  border-radius: var(--r);
  background: var(--g-50);
}
.dr-sub h6 {
  margin: 14px 2px 6px;
  color: var(--brand-ink);
  font-size: var(--fs-1);
  font-weight: 800;
}
.dr-sub h6:first-child { margin-block-start: 10px; }

.dr-sub a {
  position: relative;
  display: block;
  padding: 7px 18px 7px 4px;
  color: var(--n-700);
  font-size: var(--fs-4);
  font-weight: 500;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
/* نقطه‌ی کوچکِ سبز به‌جای بولتِ پیش‌فرض */
.dr-sub a::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-200);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.dr-sub a:hover { color: var(--brand-ink); transform: translateX(-3px); }
.dr-sub a:hover::before { background: var(--g-600); transform: scale(1.5); }

.dr-sub-all {
  margin-block-start: 10px;
  padding-block-start: 12px !important;
  border-block-start: 1px solid var(--g-200);
  color: var(--brand-ink) !important;
  font-weight: 700 !important;
}
.dr-sub-all::before { display: none; }

/* --- پایینِ کشو: یک کارتِ تیره که تماس را جمع می‌کند --- */
.dr-foot {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: var(--n-25);
}

.dr-cta {
  padding: 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(168, 217, 198, .3), transparent 62%),
    var(--g-900);
}
.dr-cta > b {
  display: block;
  margin-block-end: 13px;
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.6;
}

.dr-tel {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(255, 255, 255, .12);
}
.dr-tel-i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: var(--accent);
  transition: background var(--fast) var(--ease);
}
.dr-tel:hover .dr-tel-i { background: rgba(255, 255, 255, .18); }
.dr-tel span { display: flex; flex-direction: column; line-height: 1.35; }
.dr-tel small { color: rgba(255, 255, 255, .55); font-size: var(--fs-1); font-weight: 500; }
.dr-tel b { color: #fff; font-size: var(--fs-5); font-weight: 700; }

.dr-soc {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-block-start: 14px;
}
.dr-soc a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--brand-ink);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.dr-soc a:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }

/* دکمه‌ی لیمویی روی کارتِ تیره — چیپِ فلش وارونه می‌شود */
.btn-accent .cta-i { background: var(--g-900); color: var(--accent); }
.btn-accent:hover .cta-i { background: var(--g-950); }

body.dr-on { overflow: hidden; }


/* ---------------------------------------------------------- ۸) فـوتـر */
/* ساختار همان پنج‌ستونه است؛ فقط رنگ و فاصله‌ها با سیستمِ جدید هم‌خانواده
   شدند. زمینه‌ی قبلی ‎--wash‎ (خاکستریِ خنثی) بود و کنارِ پالتِ گرمِ صفحه
   سرد و اداری دیده می‌شد. */
.ft {
  position: relative;
  margin-block-start: clamp(56px, 8vw, 96px);
  padding-block: clamp(40px, 5.6vw, 72px) 0;
  background: var(--cream-50);
  font-size: var(--fs-4);
}

/* خطِ بالای فوتر با یک قطعه‌ی کرمِ کوتاه — همان موتیفِ نشانگرِ بخش‌های
   صفحه، تا فوتر جزوِ همان زبانِ بصری بماند نه یک تکه‌ی چسبیده. */
.ft::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--cream-200);
}
.ft::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: clamp(70px, 16vw, 190px);
  height: 3px;
  background: var(--accent);
}

.ft-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: clamp(24px, 3.4vw, 40px);
}
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft-grid { grid-template-columns: 1fr; } }

/* عنوانِ ستون‌ها سبزِ کم‌رنگ و درشت‌تر از قبل تا از لینک‌ها جدا شوند؛
   پیش‌تر هم‌رنگ و هم‌وزنِ لینک‌ها بودند و ستون یک توده‌ی متن می‌شد. */
.ft h2 {
  margin-block-end: 16px;
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}

.ft ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.ft li { color: var(--n-700); }
.ft a {
  color: var(--n-700);
  transition: color var(--fast) var(--ease);
}
.ft a:hover { color: var(--brand-ink); }

/* --- ستونِ برند --- */
.ft .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--g-950);
  font-weight: 800;
  font-size: var(--fs-7);
}
.ft .brand .mark { width: 38px; height: 38px; }
.ft-about p {
  max-width: 32ch;
  margin-block: 14px 18px;
  color: var(--muted);
  line-height: 1.9;
}

.ft .socials { display: flex; gap: 8px; }
.ft .socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cream-200);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--brand-soft);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.ft .socials a:hover {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}

/* --- ستونِ تماس --- */
/* شماره تنها عنصرِ تبدیل‌سازِ فوتر است، پس از حالتِ «یک آیتمِ فهرست» بیرون
   می‌آید و درشت و سبز می‌شود. */
.ft-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 12px;
  color: var(--brand-ink) !important;
  font-size: var(--fs-7);
  font-weight: 800;
  direction: ltr;
}
.ft-tel svg { color: var(--accent); flex: none; }

/* «۲۴ ساعته» از یک آیتمِ گمِ فهرست به یک نشانِ کوچک تبدیل می‌شود */
.ft-24 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block-start: 4px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  background: var(--g-50);
  color: var(--brand-ink);
  font-size: var(--fs-2);
  font-weight: 700;
}
.ft-24-d {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.ft-24-d::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: arLive 2.8s var(--ease) infinite;
}

/* --- نوارِ پایین --- */
.ft-bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin-block-start: clamp(30px, 4.4vw, 52px);
  padding-block: 20px;
  border-block-start: 1px solid var(--cream-200);
  color: var(--muted);
  font-size: var(--fs-2);
}
.ft-bot a { color: var(--n-700); font-weight: 600; }

/* روی موبایل نوارِ تماسِ چسبان پایینِ صفحه است و فوتر زیرش می‌ماند */
@media (max-width: 620px) {
  .ft-bot { padding-block-end: 76px; }
}


/* نوارِ تماسِ چسبانِ پایینِ موبایل */
.cdock { display: none; }
@media (max-width: 620px) {
  .cdock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-block-start: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .cdock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px;
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--n-700);
  }
  .cdock a svg { width: 20px; height: 20px; }
  .cdock a.pri { color: var(--brand-ink); }
  body { padding-block-end: 62px; }
}


/* ══════════════════════════════════════════════════════════════════════
   ۷) صفحه‌ی مناطق  (/areas)
   نِیم‌اسپیسِ ‎ar-‎ مخصوصِ همین صفحه است.
   ══════════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------------ ۷.۱) هیرو */
/* جهتِ «مجله‌ای»: هیچ کارت و چیپی ندارد. سلسله‌مراتب فقط از اندازه‌ی تایپ،
   فضای خالی و خطِ مویی می‌آید. چیپِ گردِ قبلی همان الگویی بود که در چهار
   بخشِ صفحه تکرار می‌شد و صفحه را تخت می‌کرد. */
.ar-hero {
  padding-block: clamp(44px, 8vw, 96px) clamp(30px, 5vw, 56px);
  /* هاله از بالای وسط می‌آید نه از گوشه، چون ترکیب متقارن است */
  background:
    radial-gradient(78% 62% at 50% -12%, var(--cream-50), transparent 64%),
    var(--paper);
  text-align: center;
}
.ar-hero-in { max-width: 940px; }

/* همه‌ی سرتیترهای صفحه متقارن‌اند. فقط متنِ بلندِ داخلِ آکاردئونِ سؤالات و
   کارتِ اقدام چپ‌چین می‌مانند، چون پاراگرافِ وسط‌چین سخت خوانده می‌شود. */
.ar-eyebrow { justify-content: center; }

/* شماره‌ی بخش + خطِ کرم + برچسب. جای عنوانِ کوچکِ توی کادر را می‌گیرد. */
.ar-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: clamp(16px, 2.4vw, 24px);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
}
.ar-eyebrow-n {
  color: var(--brand-ink);
  font-size: var(--fs-3);
  font-weight: 800;
}
.ar-eyebrow-r {
  width: clamp(28px, 6vw, 56px);
  height: 2px;
  flex: none;
  background: var(--accent);
}

.ar-hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: var(--fs-h1);
  line-height: 1.22;
}

.ar-lead {
  max-width: 54ch;
  margin-block-start: clamp(18px, 2.6vw, 26px);
  margin-inline: auto;
  color: var(--n-700);
  font-size: var(--fs-lead);
  line-height: 1.95;
}
.ar-lead b { color: var(--brand-ink); font-weight: 700; }

/* آمارها با خطِ عمودی از هم جدا می‌شوند، نه با کادر */
.ar-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: clamp(32px, 4.5vw, 48px);
  padding-block-start: clamp(22px, 3vw, 30px);
  border-block-start: 1px solid var(--line);
}
.ar-stat { padding-inline-end: clamp(24px, 4vw, 52px); }
.ar-stat + .ar-stat {
  padding-inline-start: clamp(24px, 4vw, 52px);
  border-inline-start: 1px solid var(--line);
}
.ar-stat:last-child { padding-inline-end: 0; }
.ar-stat dt {
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 600;
}
.ar-stat dd {
  margin: 0;
  color: var(--brand-ink);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 800;
  line-height: 1.4;
}

/* زیرِ ۶۲۰px خطِ عمودی بین آمارها جا نمی‌شود و به هم می‌ریزد */
@media (max-width: 620px) {
  .ar-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    justify-items: center;
  }
  .ar-stat,
  .ar-stat + .ar-stat { padding: 0; border: 0; }
  .ar-stat:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ ۷.۳) فهرست */
/* کلِ بخش متقارن است: سرتیتر، عنوانِ شهر و ابرِ چیپ‌ها.
   پدینگِ بالا کم است چون هیرو خودش پدینگِ پایین دارد؛ پدینگِ پایین زیاد است
   چون بلافاصله بعدش بلوکِ سبز شروع می‌شود و چیپ‌ها نباید به لبه‌ی رنگ بچسبند. */
.ar-main {
  padding-block: clamp(18px, 2.6vw, 32px) clamp(48px, 7vw, 88px);
  text-align: center;
}
.ar-main .ar-shd { margin-inline: auto; }
.ar-group-hd { justify-content: center; }
.ar-grid { justify-content: center; }
.ar-list { display: grid; gap: clamp(28px, 4vw, 44px); }


.ar-group-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-block-end: 16px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-6);
  font-weight: 800;
}
.ar-group-hd small {
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: 600;
}

.ar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* چیپِ محله. کم‌ارتفاع‌ترین حالتِ ممکن است و همین باعث می‌شود اگر فهرست
   روزی از ۱۷ به ۵۰ محله برسد، بخش بلند و خسته‌کننده نشود. */
.ar-item {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  background: var(--g-50);
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.5;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.ar-item:hover,
.ar-item.is-hot {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}


/* ------------------------------------------------------- ۷.۴) موبایل */
@media (max-width: 760px) {
  /* چیپ‌ها خودشان می‌پیچند و ستون‌بندی لازم ندارند؛ فقط جمع‌تر می‌شوند */
  .ar-grid { gap: 7px; }
  .ar-item { padding: 8px 14px; }
}

@media (max-width: 460px) {
  .ar-stats { gap: 14px 22px; }
  .ar-stat dd { font-size: var(--fs-6); }
}


/* ------------------------------------------------- ۷.۵) سرتیترِ بخش‌ها */
.ar-shd {
  max-width: 68ch;
  margin-inline: auto;
  margin-block-end: clamp(22px, 3.5vw, 38px);
  text-align: center;
}
.ar-shd p {
  margin-block-start: 12px;
  margin-inline: auto;
  color: var(--n-700);
  font-size: var(--fs-5);
}

/* ------------------------------------------------- ۷.۶) خدمات */
/* تنها بلوکِ تیره‌ی صفحه. لنگرِ کنتراست است و بخشِ اقدامِ پایین را عمداً
   روشن نگه می‌داریم تا دو سطحِ تیره پشتِ هم نیفتد. */
.ar-band {
  padding-block: clamp(42px, 7vw, 84px);
  background:
    radial-gradient(85% 70% at 50% -8%, rgba(200, 159, 116, .16), transparent 62%),
    var(--g-900);
}
.ar-band .ar-shd h2 { color: #fff; }
.ar-band .ar-shd p { color: rgba(255, 255, 255, .68); }
.ar-band .ar-eyebrow { color: rgba(255, 255, 255, .5); }
.ar-band .ar-eyebrow-n { color: var(--accent); }

/* --- گروه‌های خدمات --- */
.ar-sgrp + .ar-sgrp { margin-block-start: clamp(26px, 3.6vw, 40px); }

/* عنوانِ گروه با خطِ مویی در دو طرف. یک‌طرفه (فقط خطِ چپ) با چیدمانِ
   متقارنِ بخش جور نبود. */
.ar-sgrp-h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 14px;
  color: var(--accent);
  font-size: var(--fs-3);
  font-weight: 800;
}
.ar-sgrp-h::before,
.ar-sgrp-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .14);
}

/* --- کارتِ خدمت --- */
.ar-svc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}
.ar-svc a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  text-align: start;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.ar-svc a:hover {
  background: rgba(200, 159, 116, .13);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.ar-svc b {
  display: block;
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.6;
}
.ar-svc span {
  display: block;
  margin-block-start: 3px;
  color: rgba(255, 255, 255, .5);
  font-size: var(--fs-2);
  line-height: 1.7;
}

/* دو کارت در هر ردیفِ موبایل. در این عرض هر کارت ~۱۵۵px می‌شود و
   زیرعنوان چهار-پنج خط می‌شکند، پس همان‌جا کنار می‌رود و فقط عنوان می‌ماند. */
@media (max-width: 620px) {
  .ar-svc { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ar-svc a { padding: 13px 14px; }
  .ar-svc b { font-size: var(--fs-3); }
  .ar-svc span { display: none; }
  .ar-sgrp-h { font-size: var(--fs-2); gap: 10px; }
}


/* ------------------------------------------------- ۷.۷) مراحل */
.ar-steps { padding-block: clamp(40px, 7vw, 82px); }

/* روی دسکتاپ چهار ستونِ هم‌عرض با خطِ بالا و یک قطعه‌ی کرم روی همان خط —
   شماره یک برچسبِ کوچک است، نه دایره. روی موبایل کاملاً عوض می‌شود:
   ردیف‌های زیرِ هم با دایره‌ی توپُر (پایینِ همین فایل). */
.ar-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ar-flow > li {
  position: relative;
  padding-block-start: 20px;
  border-block-start: 2px solid var(--line);
  text-align: center;
}
/* نشانگرِ کرم روی خطِ بالای هر مرحله */
.ar-flow > li::before {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  /* در RTL ‎inset-inline-start‎ یعنی لبه‌ی راست؛ برای وسط‌چین‌کردن باید
     نصفِ عرضِ خودش به راست برود، و ‎translateX‎ فیزیکی است. */
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 36px;
  height: 2px;
  background: var(--accent);
}
.ar-flow-n {
  display: block;
  margin-block-end: 7px;
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}
.ar-flow h3 {
  margin-block-end: 7px;
  font-size: var(--fs-6);
  font-weight: 800;
}
.ar-flow p { color: var(--n-700); font-size: var(--fs-3); line-height: 1.9; }

/* چهار ستون زیرِ ۱۰۰۰px هر کدام کمتر از ۲۰۰px می‌شوند و متن تکه‌تکه
   می‌شکند؛ دو ستون حدِ وسطِ سالمی است. */
@media (max-width: 1000px) {
  .ar-flow { grid-template-columns: 1fr 1fr; }
}

/* موبایل: از چهار ستون به یک تایم‌لاینِ عمودی.
   خطِ اتصال بینِ دایره‌ها کارِ مهمی می‌کند — بی آن، چهار ردیفِ خط‌کشی‌شده
   «چهار مطلبِ جدا» خوانده می‌شوند نه «چهار مرحله‌ی پشتِ سرِ هم». */
@media (max-width: 700px) {
  .ar-flow { display: block; }

  .ar-flow > li {
    position: relative;
    display: block;
    padding: 0 46px 0 0;
    margin-block-end: 26px;
    border: 0;
    text-align: start;
  }
  .ar-flow > li:last-child { margin-block-end: 0; }

  /* خطِ اتصال: از زیرِ دایره تا شروعِ مرحله‌ی بعد.
     ‎inset-inline-start: 15px‎ مرکزِ دایره‌ی ۳۲پیکسلی است (۳۲÷۲ − ۱). */
  .ar-flow > li::before {
    inset-block: 38px -26px;
    inset-inline-start: 15px;
    width: 2px;
    height: auto;
    background: var(--g-100);
    transform: none;
  }
  .ar-flow > li:last-child::before { display: none; }

  /* شماره از برچسبِ کوچک به دایره‌ی توپُر تبدیل می‌شود چون این‌جا نقطه‌ی
     روی خطِ تایم‌لاین است، نه یک زیرنویس. */
  .ar-flow-n {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: var(--brand-fill);
    color: #fff;
    font-size: var(--fs-3);
    font-weight: 800;
  }

  .ar-flow h3 {
    /* هم‌ترازِ عمودی با مرکزِ دایره */
    min-height: 32px;
    display: flex;
    align-items: center;
    margin-block-end: 8px;
  }
  .ar-flow p { font-size: var(--fs-4); }
}


/* ------------------------------------------------- ۷.۸) سؤالات متداول */
/* کاغذِ کرم با کارت‌های سفیدِ سایه‌دار. جدایی از بخشِ سبزِ بالا و از بخشِ
   اقدامِ پایین، فقط با رنگِ کاغذ ساخته می‌شود نه با خط. */
.ar-faq {
  padding-block: clamp(42px, 7vw, 84px);
  background: var(--cream-50);
}

.ar-qs {
  display: grid;
  gap: 10px;
  max-width: 80ch;
  margin-inline: auto;
  /* ظرف وسط می‌آید ولی متنِ داخلش از راست شروع می‌شود؛ پاراگرافِ
     وسط‌چین سخت خوانده می‌شود. */
  text-align: start;
}

.ar-q {
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--sh-2);
  transition: box-shadow var(--mid) var(--ease);
}
.ar-q:hover,
.ar-q[open] { box-shadow: var(--sh-3); }

.ar-q summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 19px;
  cursor: pointer;
  color: var(--g-950);
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1.65;
  list-style: none;
}
/* مثلثِ پیش‌فرضِ ‎details‎ در وبکیت با ‎list-style‎ برداشته نمی‌شود */
.ar-q summary::-webkit-details-marker { display: none; }
.ar-q summary:hover { color: var(--brand-ink); }
.ar-q summary:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -2px;
  border-radius: var(--r);
}

/* بعلاوه که با باز شدن به ضربدر می‌چرخد */
.ar-q summary svg {
  margin-inline-start: auto;
  flex: none;
  color: var(--brand-soft);
  transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}
.ar-q[open] summary svg { transform: rotate(135deg); color: var(--accent); }

.ar-q p {
  margin: 0;
  /* پدینگِ راست با پدینگِ ‎summary‎ یکی است تا متنِ پاسخ زیرِ متنِ سؤال
     تراز بیفتد، نه زیرِ لبه‌ی کارت. */
  padding: 0 19px 18px;
  color: var(--n-700);
  font-size: var(--fs-read-sm);
  line-height: 2;
}


/* ------------------------------------------------- ۷.۹) اقدام و فرم */
.ar-cta { padding-block: clamp(42px, 7vw, 84px); }

/* یک کارتِ یکپارچه با دو نیمه‌ی هم‌ارتفاع: سبز (چرایی و تلفن) و سفید (فرم).
   دو کارتِ جدا هم می‌شد، ولی این‌طور «یک تصمیم» به‌نظر می‌رسد نه دو چیز. */
.ar-cta-in {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: stretch;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-3);
  text-align: start;
}

.ar-cta-t {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 54px);
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(168, 217, 198, .18), transparent 62%),
    var(--g-900);
  color: rgba(255, 255, 255, .76);
}
.ar-cta-t h2 { color: #fff; font-size: clamp(20px, 2.4vw, 27px); }
.ar-cta-t > p {
  margin-block-start: 15px;
  margin-block-end: clamp(24px, 4vw, 40px);
  max-width: 42ch;
  font-size: var(--fs-5);
  line-height: 2;
}


/* راهِ دوم: تماسِ مستقیم.
   ‎margin-block-start: auto‎ آن را به کفِ نیمه‌ی سبز می‌چسباند تا هر دو
   نیمه هم‌ارتفاع و متوازن دیده شوند. */
.ar-cta-tel { margin-block-start: auto; padding-block-start: clamp(24px, 3.5vw, 36px); }

/* کلِ کارت یک لینکِ ‎tel:‎ است. روی سطحِ سبز، کارت با یک زمینه‌ی روشن‌ترِ
   نیمه‌شفاف از پس‌زمینه جدا می‌شود — نه با خط، تا سبکِ بقیه‌ی صفحه بماند. */
.ar-cta-call {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.ar-cta-call:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--accent);
}

/* چیپِ کرم — همان زبانِ چیپِ دکمه‌ی اصلیِ هدر */
.ar-cta-call-i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--g-950);
  transition: background var(--fast) var(--ease);
}
.ar-cta-call:hover .ar-cta-call-i { background: var(--accent-hi); }

.ar-cta-call-t { display: grid; gap: 2px; min-width: 0; }
.ar-cta-call-t small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .58);
  font-size: var(--fs-2);
  font-weight: 600;
}
.ar-cta-call-t b {
  color: #fff;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.35;
}

/* نقطه‌ی نبض‌دار — تنها حرکتِ خودکارِ صفحه، عمداً کوچک و آرام */
.ar-cta-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.ar-cta-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: arLive 2.8s var(--ease) infinite;
}
@keyframes arLive {
  0%   { transform: scale(.5); opacity: .85; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { opacity: 0; }
}

.ar-cta-call-c {
  margin-inline-start: auto;
  flex: none;
  color: rgba(255, 255, 255, .38);
  transition: color var(--fast) var(--ease), transform var(--mid) var(--ease);
}
.ar-cta-call:hover .ar-cta-call-c { color: var(--accent); transform: translateX(-4px); }

/* زیرِ ۴۲۰px شماره و برچسب کنارِ چیپ و شِوران جا نمی‌شوند */
@media (max-width: 420px) {
  .ar-cta-call { gap: 11px; padding: 12px 13px; }
  .ar-cta-call-i { width: 40px; height: 40px; }
  .ar-cta-call-c { display: none; }
}

/* --- فرم --- */
.ar-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 54px);
  background: var(--paper);
}
.ar-form > b {
  display: block;
  margin-block-end: clamp(20px, 3vw, 28px);
  color: var(--g-950);
  font-size: var(--fs-5);
  font-weight: 800;
}
.ar-form form { display: grid; gap: 16px; }

/* برچسبِ واقعیِ بالای فیلد به‌جای فقط ‎placeholder‎: وقتی کاربر شروع به
   تایپ می‌کند، ‎placeholder‎ محو می‌شود و دیگر معلوم نیست فیلد چه بود. */
.ar-fld { display: grid; gap: 7px; }
.ar-fld label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: 600;
}
.ar-fld label i {
  color: var(--n-300);
  font-size: var(--fs-1);
  font-style: normal;
  font-weight: 600;
}
.ar-form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--n-25);
  color: var(--ink);
  font-size: var(--fs-4);
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.ar-form input::placeholder { color: var(--n-300); }
.ar-form input:focus {
  outline: none;
  border-color: var(--brand-ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--g-100);
}
.ar-form input.ltr { direction: ltr; text-align: start; }
.ar-form input.err { border-color: #C0392B; background: #FDF3F2; }

/* فلش با ‎::after‎ کشیده می‌شود نه با ‎<svg>‎: ‎site.js‎ هنگام ارسال
   ‎textContent‎ ِ دکمه را عوض می‌کند و هر فرزندِ داخلش پاک می‌شد. */
.ar-form button {
  position: relative;
  width: 100%;
  margin-block-start: 8px;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  background: var(--brand-fill);
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 700;
  transition: background var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.ar-form button:hover {
  background: var(--g-950);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -16px rgba(0, 32, 24, .9);
}
.ar-form button:disabled { opacity: .6; cursor: default; transform: none; }


.ar-form-note {
  margin-block-start: 16px;
  color: var(--muted);
  font-size: var(--fs-2);
  text-align: center;
}

.ar-form .gs-err { margin: 4px 0 0; color: #C0392B; font-size: var(--fs-3); }
/* ‎site.js‎ همین کلاس را برمی‌دارد تا خطا دیده شود */
.ar-form .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* پیامِ موفقیت جای فرم را می‌گیرد */
.ar-form .gs-done { display: none; }
.ar-form.done form,
.ar-form.done .ar-form-note { display: none; }
.ar-form.done .gs-done {
  display: block;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--g-200);
  border-radius: var(--r);
  background: var(--g-50);
  color: var(--brand-ink);
  font-size: var(--fs-4);
  font-weight: 700;
}

@media (max-width: 860px) {
  .ar-cta-in { grid-template-columns: 1fr; }
  .ar-cta-tel { margin-block-start: 26px; }
}


/* =========================================================================
   ۹) وبلاگ — فهرستِ مقالات (نِیم‌اسپیسِ ‎bx-‎)
   ========================================================================= */

/* ---------------------------------------------------------- ۹.۱) هیرو */
.bx-hero {
  padding-block: clamp(26px, 4vw, 48px) clamp(24px, 3.6vw, 40px);
  background:
    radial-gradient(78% 62% at 50% -14%, var(--cream-50), transparent 64%),
    var(--paper);
  text-align: center;
}
.bx-hero-in { max-width: 900px; }

/* مسیرِ صفحه — ریز و کم‌رنگ، ولی برای خزنده و کاربر لازم */
.bx-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-end: clamp(16px, 2.4vw, 24px);
  color: var(--n-300);
  font-size: var(--fs-2);
  font-weight: 600;
}
.bx-crumb a { color: var(--muted); transition: color var(--fast) var(--ease); }
.bx-crumb a:hover { color: var(--brand-ink); }
.bx-crumb [aria-current] { color: var(--brand-ink); font-weight: 700; }

/* نوارِ برند با خطِ کرم در دو طرف */
.bx-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-block-end: 14px;
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}
.bx-eyebrow-r {
  width: clamp(22px, 5vw, 44px);
  height: 2px;
  flex: none;
  background: var(--accent);
}

.bx-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--fs-h1);
  line-height: 1.24;
}
.bx-lead {
  max-width: 56ch;
  margin: clamp(16px, 2.4vw, 22px) auto 0;
  color: var(--n-700);
  font-size: var(--fs-lead);
  line-height: 1.95;
}

/* ------------------------------------------------------- ۹.۲) فیلترِ دسته */
/* نوار روی اسکرول می‌چسبد: در فهرستِ بلند، جابه‌جایی بینِ دسته‌ها بدونِ
   برگشت به بالای صفحه ممکن می‌شود. */
.bx-filter {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  padding-block: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.bx-filter-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.bx-fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--n-700);
  font-size: var(--fs-3);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.bx-fchip span {
  color: var(--n-300);
  font-size: var(--fs-1);
  font-weight: 700;
}
.bx-fchip:hover { border-color: var(--g-200); color: var(--brand-ink); }
.bx-fchip.is-on {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}
.bx-fchip.is-on span { color: var(--accent); }

/* روی موبایل به‌جای پیچیدن، افقی اسکرول می‌شود تا نوار بلند نشود و
   جای اسکرولِ عمودی را نگیرد. */
@media (max-width: 620px) {
  .bx-filter-in {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut));
    padding-inline: var(--gut);
  }
  .bx-filter-in::-webkit-scrollbar { display: none; }
  .bx-fchip { padding: 7px 14px; }
}

/* ------------------------------------------------- ۹.۳) تصویر و جانشین */
/* نسبتِ ۱۶:۹ روی خودِ ظرف قفل است، پس چه عکس باشد چه نباشد ارتفاعِ کارت
   یکی است و شبکه با اضافه‌شدنِ تدریجیِ عکس‌ها جابه‌جا نمی‌شود. */
.bx-card-ph,
.bx-feat-ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--g-100);
}
.bx-card-ph { aspect-ratio: 16 / 9; }

.bx-card-ph img,
.bx-feat-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

/* جانشینِ بی‌عکس: گرادیانِ سبز↔کرم با برگِ محو. عمداً «جای خالی» نیست. */
.bx-ph-fb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, var(--g-100), var(--cream-100));
}
.bx-ph-fb svg {
  width: 26%;
  max-width: 84px;
  color: var(--g-400);
  opacity: .55;
}

.bx-badge {
  position: absolute;
  inset-block-start: 11px;
  inset-inline-start: 11px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93);
  color: var(--brand-ink);
  font-size: var(--fs-1);
  font-weight: 800;
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------- ۹.۴) مقاله‌ی شاخص */
.bx-featwrap { padding-block: clamp(26px, 4vw, 46px) 0; }

.bx-feat {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.bx-feat:hover { border-color: var(--g-200); box-shadow: var(--sh-3); }
.bx-feat:hover img { transform: scale(1.03); }

.bx-feat-ph { min-height: 300px; }

.bx-feat-bd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3.4vw, 44px);
}

.bx-flag {
  align-self: flex-start;
  margin-block-end: 14px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--cream-100);
  color: var(--brand-ink);
  font-size: var(--fs-1);
  font-weight: 800;
}

.bx-feat-t {
  display: block;
  color: var(--g-950);
  font-size: clamp(20px, 2.6vw, 29px);
  font-weight: 800;
  line-height: 1.45;
  text-wrap: balance;
}
.bx-feat-x {
  display: block;
  margin-block-start: 12px;
  max-width: 48ch;
  color: var(--n-700);
  font-size: var(--fs-5);
  line-height: 1.95;
}

.bx-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block-start: 20px;
  color: var(--brand-ink);
  font-size: var(--fs-4);
  font-weight: 800;
}
.bx-go svg { transition: transform var(--mid) var(--ease); }
.bx-feat:hover .bx-go svg { transform: translateX(-4px); }

/* ------------------------------------------------------ ۹.۵) متادیتا */
.bx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-block-end: 10px;
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 600;
}
.bx-meta b { color: var(--brand-soft); font-weight: 800; }
.bx-meta i { color: var(--n-300); font-style: normal; }

/* ------------------------------------------------------- ۹.۶) شبکه‌ی کارت */
.bx-list { padding-block: clamp(26px, 4vw, 46px) clamp(40px, 6vw, 76px); }

.bx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}

.bx-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.bx-card:hover {
  border-color: var(--g-200);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.bx-card:hover img { transform: scale(1.04); }

/* کلِ کارت یک لینک است؛ ‎h3‎ داخلِ ‎a‎ می‌ماند تا ساختارِ عنوان‌ها برای
   خزنده حفظ شود ولی ناحیه‌ی کلیک کلِ کارت باشد. */
.bx-card > a { display: flex; flex-direction: column; height: 100%; }

.bx-card-bd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 20px;
}
.bx-card h3 {
  margin: 0;
  color: var(--g-950);
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1.6;
  transition: color var(--fast) var(--ease);
}
.bx-card:hover h3 { color: var(--brand-ink); }
.bx-card-x {
  display: block;
  margin-block-start: 9px;
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.85;
}

/* ------------------------------------------------------ ۹.۷) صفحه‌بندی */
.bx-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-block-start: clamp(28px, 4vw, 44px);
}
.bx-pager-n,
.bx-pager-e {
  display: inline-grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 7px;
  min-width: 42px;
  height: 42px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--n-700);
  font-size: var(--fs-4);
  font-weight: 700;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.bx-pager-n { padding-inline: 8px; }
.bx-pager-n:hover,
.bx-pager-e:hover { border-color: var(--g-200); color: var(--brand-ink); }
.bx-pager-n.is-on {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}

/* ---------------------------------------------------- ۹.۸) حالتِ خالی */
.bx-empty {
  max-width: 52ch;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 34px);
  border: 1px dashed var(--g-200);
  border-radius: var(--r-xl);
  background: var(--cream-50);
  text-align: center;
}
.bx-empty p + p { margin-block-start: 8px; }
.bx-empty b { color: var(--g-950); font-size: var(--fs-6); }
.bx-empty p:last-of-type { color: var(--n-700); font-size: var(--fs-4); }
.bx-empty-a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-block-start: 22px;
}

/* ------------------------------------------------ ۹.۹) از خواندن تا انجام */
/* لنگرِ تیره‌ی صفحه‌ی وبلاگ. بقیه‌ی صفحه سفید و کرم است و بدونِ این بلوک
   هیچ نقطه‌ی کنتراستی نداشت؛ ضمناً پایانِ صفحه همان‌جایی است که خواننده‌ی
   مقاله باید به خدمات پل بخورد. */
.bx-next {
  padding-block: clamp(42px, 6.4vw, 84px);
  background:
    radial-gradient(80% 70% at 50% -8%, rgba(200, 159, 116, .16), transparent 62%),
    var(--g-900);
}
.bx-next .ar-shd h2 { color: #fff; }
.bx-next .ar-shd p { color: rgba(255, 255, 255, .68); }
.bx-next .ar-eyebrow { color: rgba(255, 255, 255, .5); }
.bx-next .ar-eyebrow-n { color: var(--accent); }

.bx-next-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* هر کاشی: آیکون در چیپ، عنوان، توضیح، و شِوران که کفِ کارت می‌چسبد تا
   ارتفاعِ نامساویِ متن‌ها ردیفِ فلش‌ها را به‌هم نریزد. */
.bx-next-g a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.bx-next-g a:hover {
  background: rgba(200, 159, 116, .13);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.bx-next-i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-block-end: 15px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .08);
  color: var(--accent);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.bx-next-g a:hover .bx-next-i { background: var(--accent); color: var(--g-950); }

.bx-next-g b {
  display: block;
  margin-block-end: 8px;
  color: #fff;
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.55;
}
.bx-next-x {
  display: block;
  color: rgba(255, 255, 255, .55);
  font-size: var(--fs-3);
  line-height: 1.85;
}

.bx-next-c {
  margin-block-start: auto;
  padding-block-start: 16px;
  color: rgba(255, 255, 255, .32);
  transition: color var(--fast) var(--ease), transform var(--mid) var(--ease);
}
.bx-next-g a:hover .bx-next-c { color: var(--accent); transform: translateX(-4px); }

/* اگر آخرین بخشِ صفحه یک بلوکِ رنگی باشد، مارجینِ بالای فوتر یک نوارِ
   سفیدِ بی‌دلیل بینشان می‌سازد (زمینه‌ی ‎body‎ سفید است). این‌جا صفر می‌شود
   تا بلوکِ سبز مستقیم به کرمِ فوتر برسد. */
main:has(> .bx-next:last-child) + .ft { margin-block-start: 0; }

/* -------------------------------------------------------- ۹.۱۰) موبایل */
@media (max-width: 860px) {
  .bx-feat { grid-template-columns: 1fr; }
  .bx-feat-ph { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .bx-grid { grid-template-columns: 1fr; gap: 12px; }
  .bx-pager-n:not(.is-on) { display: none; }
  .bx-pager-n.is-on { min-width: 64px; }
}


/* =========================================================================
   ۱۰) صفحه‌ی مقاله (نِیم‌اسپیسِ ‎at-‎)
   ========================================================================= */

/* -------------------------------------------- ۱۰.۱) نوارِ پیشرفتِ مطالعه */
/* عرضش را ‎site.js‎ از نسبتِ اسکرولِ ‎[data-art-body]‎ ست می‌کند. */
.rprog {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 130;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.rprog span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--g-600));
  transition: width .1s linear;
}

/* ----------------------------------------------------- ۱۰.۲) سرِ مقاله */
.at-hd {
  padding-block: clamp(24px, 3.6vw, 44px) clamp(20px, 3vw, 32px);
  background:
    radial-gradient(72% 58% at 50% -16%, var(--cream-50), transparent 66%),
    var(--paper);
  text-align: center;
}
.at-hd-in { max-width: var(--at-w-wide); }

.at-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-end: clamp(14px, 2.2vw, 22px);
  color: var(--n-300);
  font-size: var(--fs-2);
  font-weight: 600;
}
.at-crumb a { color: var(--muted); transition: color var(--fast) var(--ease); }
.at-crumb a:hover { color: var(--brand-ink); }
.at-crumb a:last-of-type { color: var(--brand-ink); font-weight: 700; }

/* عنوانِ مقاله بلندترین تیترِ سایت است، پس ‎max-width‎ ِ کاراکتری می‌گیرد تا
   خط‌ها کوتاه بمانند و ‎text-wrap: balance‎ آخرین خطِ تک‌کلمه‌ای نسازد. */
.at-hd h1 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: var(--fs-h1);
  line-height: 1.3;
  letter-spacing: 0;
}

.at-lead {
  max-width: 56ch;
  margin: clamp(16px, 2.4vw, 24px) auto 0;
  color: var(--n-700);
  font-size: var(--fs-lead);
  line-height: 1.9;
}

/* --- خطِ متادیتا --- */
.at-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-block-start: clamp(18px, 2.6vw, 26px);
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: 600;
}
.at-meta b { color: var(--g-950); font-weight: 700; }
.at-meta i { color: var(--n-300); font-style: normal; }
.at-av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--g-100);
  color: var(--brand-ink);
}

/* «به‌روزرسانی» یک نشانِ جدا می‌گیرد نه یک آیتمِ دیگرِ همان خط: سیگنالِ
   تازگیِ محتواست و باید دیده شود. */
.at-upd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--cream-100);
  color: var(--brand-ink);
  font-size: var(--fs-2);
  font-weight: 700;
}
.at-upd time { font-weight: 800; }

/* --------------------------------------------------- ۱۰.۳) تصویرِ شاخص */
/* عکس یک پله بازتر از متن است، نه تمام‌عرضِ صفحه. تمام‌عرض بودنش باعث
   می‌شد لبه‌ی عکس با لبه‌ی متن ۲۸۰ پیکسل فاصله بگیرد و صفحه دو مرکز داشته باشد. */
.at-cover { margin: 0; padding-block-end: clamp(20px, 3vw, 34px); }
.at-cover .wrap { max-width: var(--at-w-wide); }
.at-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
  background: var(--g-100);
}

/* -------------------------------------------------- ۱۰.۴) ستون‌بندی */
/* تک‌ستونه و وسط‌چین. ریلِ کناری حذف شد و محتوایش (فهرست، کارتِ اقدام،
   خدمات) به جریانِ متن آمد — در متنِ بلندِ فارسی، نبودِ ستونِ کناری تمرکز
   را بیشتر می‌کند و روی موبایل هم چیزی جابه‌جا نمی‌شود. */
.at-body-wrap { padding-block-end: clamp(40px, 6vw, 76px); }
.at-col { max-width: var(--at-w-wide); }
.at-main { min-width: 0; }

/* ------------------------------------------------- ۱۰.۵) فهرستِ مطالب */
/* یک آکاردئونِ بسته بالای متن، در همه‌ی عرض‌ها. بسته است چون خواننده‌ی
   موبایل نباید برای رسیدن به جمله‌ی اول ده خط اسکرول کند. */
.at-toc {
  max-width: var(--at-w);
  margin-inline: auto;
  margin-block-end: clamp(26px, 3.6vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--cream-50);
}
.at-toc > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  cursor: pointer;
  color: var(--g-950);
  font-size: var(--fs-5);
  font-weight: 800;
  list-style: none;
}
.at-toc > summary::-webkit-details-marker { display: none; }
.at-toc > summary > svg:first-child { color: var(--brand-soft); flex: none; }
.at-toc-c {
  margin-inline-start: auto;
  flex: none;
  color: var(--n-300);
  transition: transform var(--mid) var(--ease);
}
.at-toc[open] .at-toc-c { transform: rotate(180deg); }
.at-toc-b { padding: 0 18px 16px; }

.at-toc-b ol {
  counter-reset: toc;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}
.at-toc-b ol > li { counter-increment: toc; }
.at-toc-b a {
  position: relative;
  display: block;
  padding-block: 8px;
  padding-inline-start: 28px;
  color: var(--n-700);
  font-size: var(--fs-4);
  line-height: 1.8;
  transition: color var(--fast) var(--ease);
}
.at-toc-b ol > li > a::before {
  content: counter(toc, persian);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 8px;
  color: var(--n-300);
  font-size: var(--fs-3);
  font-weight: 800;
  transition: color var(--fast) var(--ease);
}
.at-toc-b a:hover { color: var(--brand-ink); }
.at-toc-b ol > li > a:hover::before { color: var(--accent); }

.at-toc-b ul {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  padding-inline-start: 28px;
}
.at-toc-b ul a {
  padding-block: 6px;
  padding-inline-start: 16px;
  color: var(--muted);
  font-size: var(--fs-3);
}
.at-toc-b ul a::before {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  inset-block-start: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-200);
  transition: background var(--fast) var(--ease);
}
.at-toc-b ul a:hover::before { background: var(--accent); }

/* --------------------------------------------------- ۱۰.۶) کارتِ اقدام */
/* حالا در جریانِ متن است و تمام‌عرضِ ستون؛ پس افقی می‌شود نه عمودی. */
.at-ask {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  margin-block-start: clamp(32px, 4.6vw, 50px);
  padding: clamp(22px, 3.2vw, 34px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 100% at 100% 0%, rgba(168, 217, 198, .18), transparent 62%),
    var(--g-900);
}
.at-ask-h {
  color: #fff;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 800;
  line-height: 1.55;
}
.at-ask-x {
  margin-block-start: 9px;
  max-width: 44ch;
  color: rgba(255, 255, 255, .7);
  font-size: var(--fs-4);
  line-height: 1.9;
}
.at-ask-a {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}
.at-ask-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  font-size: var(--fs-6);
  font-weight: 800;
  direction: ltr;
  transition: color var(--fast) var(--ease);
}
.at-ask-tel:hover { color: var(--accent); }
.at-ask-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.at-ask-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: arLive 2.8s var(--ease) infinite;
}

/* ------------------------------------------------- ۱۰.۶ب) خدمات مرتبط */
/* ردیفِ چیپ به‌جای فهرستِ عمودیِ ریل — کم‌ارتفاع و مناسبِ جریانِ متن. */
.at-svc {
  max-width: var(--at-w);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-block-start: clamp(24px, 3.4vw, 34px);
}
.at-svc-h {
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}
.at-svc-l { display: flex; flex-wrap: wrap; gap: 7px; }
.at-svc-l a {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--n-700);
  font-size: var(--fs-3);
  font-weight: 600;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.at-svc-l a:hover {
  background: var(--g-50);
  border-color: var(--g-200);
  color: var(--brand-ink);
}

/* ------------------------------------------------- ۱۰.۷) بدنه‌ی مقاله */
/* مهم‌ترین بلوکِ تایپوگرافیِ سایت. اصولی که این‌جا رعایت شده:
     • طولِ خط ≈ ۷۰ کاراکتر — بیشتر از این چشم خطِ بعدی را گم می‌کند.
     • ‎line-height: 2‎ — فارسی به‌خاطرِ زیرنویس و بالانویس فاصله‌ی بیشتری
       از لاتین می‌خواهد.
     • فاصله‌ی بالای تیتر بیشتر از پایینِ آن است تا تیتر به بخشِ خودش
       بچسبد نه به پاراگرافِ قبلی.
     • ‎letter-spacing‎ صفر می‌ماند؛ روی فارسی حروف را از هم می‌پاشد. */
.at-body {
  max-width: var(--at-w);
  margin-inline: auto;
  color: var(--n-900);
  font-size: var(--fs-read);
  line-height: 2.05;
}
.at-body > *:first-child { margin-block-start: 0; }
.at-body > *:last-child { margin-block-end: 0; }

.at-body p {
  margin-block: 0 1.15em;
  color: var(--n-700);
}
.at-body > p:first-of-type { color: var(--n-900); }

/* --- تیترها --- */
.at-body h2 {
  margin-block: 2.05em .6em;
  color: var(--g-950);
  font-size: clamp(22px, 2.6vw, 29px);
  font-weight: 800;
  line-height: 1.5;
  scroll-margin-top: calc(var(--mbar-h) + 24px);
}

.at-body h3 {
  margin-block: 1.75em .5em;
  color: var(--g-950);
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 800;
  line-height: 1.55;
  scroll-margin-top: calc(var(--mbar-h) + 24px);
}
.at-body h4 {
  margin-block: 1.4em .45em;
  color: var(--g-950);
  font-size: var(--fs-6);
  font-weight: 800;
}

/* --- لینکِ درون‌متنی --- */
/* زیرخطِ کرم به‌جای زیرخطِ آبیِ پیش‌فرض: در متنِ بلند دیده می‌شود ولی
   خواندن را قطع نمی‌کند. */
.at-body a:not(.gs) {
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--fast) var(--ease);
}
.at-body a:not(.gs):hover { text-decoration-color: var(--accent); }

.at-body strong,
.at-body b { color: var(--g-950); font-weight: 700; }
.at-body em { font-style: normal; color: var(--brand-ink); font-weight: 600; }

/* --- فهرست‌ها --- */
.at-body ul,
.at-body ol {
  margin-block: 0 1.3em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55em;
}
.at-body li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--n-700);
}
.at-body ul > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: .82em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-400);
}
.at-body ol { counter-reset: at-ol; }
.at-body ol > li { counter-increment: at-ol; }
.at-body ol > li::before {
  content: counter(at-ol, persian);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  min-width: 20px;
  color: var(--brand-soft);
  font-size: var(--fs-4);
  font-weight: 800;
  text-align: center;
}
/* فهرستِ تودرتو */
.at-body li > ul,
.at-body li > ol { margin-block: .5em 0; }

/* --- نقل‌قول --- */
.at-body blockquote {
  margin-block: 1.6em;
  margin-inline: 0;
  padding: 20px 24px;
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--cream-50);
  color: var(--g-950);
  font-size: var(--fs-read);
  font-weight: 600;
  line-height: 1.95;
}
.at-body blockquote p:last-child { margin-block-end: 0; }

/* --- تصویر و شرحِ آن --- */
.at-body img {
  width: 100%;
  height: auto;
  margin-block: 1.6em;
  border-radius: var(--r-lg);
  background: var(--g-100);
}
.at-body figure { margin: 1.6em 0; }
.at-body figure img { margin-block: 0; }
.at-body figcaption {
  margin-block-start: 10px;
  color: var(--muted);
  font-size: var(--fs-3);
  text-align: center;
}

/* --- جدول --- */
/* ظرفِ اسکرولِ افقی لازم است: جدولِ سه‌ستونی در موبایل بدنه را پهن می‌کرد
   و کلِ صفحه افقی اسکرول می‌شد. */
.at-body table {
  width: 100%;
  margin-block: 1.6em;
  border-collapse: collapse;
  font-size: var(--fs-5);
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line);
}
.at-body thead th {
  padding: 12px 15px;
  background: var(--g-50);
  color: var(--brand-ink);
  font-size: var(--fs-3);
  font-weight: 800;
  text-align: start;
  border-block-end: 1px solid var(--g-200);
}
.at-body tbody td {
  padding: 12px 15px;
  border-block-end: 1px solid var(--line);
  color: var(--n-700);
  line-height: 1.85;
  vertical-align: top;
}
.at-body tbody tr:last-child td { border-block-end: 0; }
.at-body tbody tr:nth-child(even) td { background: var(--n-25); }

/* --- خطِ جداکننده --- */
.at-body hr {
  margin-block: 2.2em;
  border: 0;
  height: 1px;
  background: var(--line);
}

/* --- کد --- */
.at-body code {
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--n-50);
  color: var(--brand-ink);
  font-family: ui-monospace, monospace;
  font-size: .88em;
  direction: ltr;
  display: inline-block;
}

/* ------------------------------------------- ۱۰.۸) کامپوننتِ شورت‌کدها */
/* استایلشان پیش‌تر در ‎site.css‎ بود؛ با جایگزینیِ آن، این کامپوننت‌ها داخلِ
   متن بی‌قالب می‌ماندند. مارک‌آپ دست‌نخورده است و فقط ظاهر بازنویسی شده. */
.at-body .gs {
  display: block;
  margin-block: 2em;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-4);
  line-height: 1.85;
}
.at-body .gs b { color: var(--g-950); font-weight: 800; }

.at-body .gs-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 13px;
  background: var(--g-100);
  color: var(--brand-ink);
}
.at-body .gs-ic svg { width: 21px; height: 21px; }

/* دکمه‌ی مشترکِ همه‌ی کارت‌ها */
.at-body .gs-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--brand-fill);
  color: #fff;
  font-size: var(--fs-3);
  font-weight: 700;
  white-space: nowrap;
  border: 0;
  transition: background var(--fast) var(--ease);
}
.at-body a.gs:hover .gs-go,
.at-body .gs-go:hover { background: var(--g-950); }

/* --- [[فرم]] --- */
.at-body .gs-form {
  border: 0;
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(168, 217, 198, .16), transparent 62%),
    var(--g-900);
  padding: clamp(20px, 3vw, 28px);
}
.at-body .gs-hd { display: flex; gap: 14px; align-items: flex-start; }
.at-body .gs-form .gs-ic { background: var(--accent); color: var(--g-950); }
.at-body .gs-form .gs-hd b {
  display: block;
  color: #fff;
  font-size: var(--fs-5);
  line-height: 1.6;
}
.at-body .gs-form .gs-hd span {
  display: block;
  margin-block-start: 5px;
  color: rgba(255, 255, 255, .66);
  font-size: var(--fs-3);
}
.at-body .gs-form form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 9px;
  margin-block-start: 18px;
}
.at-body .gs-form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font: inherit;
  font-size: var(--fs-4);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.at-body .gs-form input::placeholder { color: rgba(255, 255, 255, .34); }
.at-body .gs-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, .34);
}
.at-body .gs-form input.ltr { direction: ltr; text-align: start; }
.at-body .gs-form input.err { border-color: #E8A19A; background: rgba(192, 57, 43, .22); }
.at-body .gs-form button {
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: var(--fs-4);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease);
}
.at-body .gs-form button:hover { background: var(--accent-hi); }
.at-body .gs-form button:disabled { opacity: .6; cursor: default; }
.at-body .gs-form .gs-err { margin: 6px 0 0; color: #F0B7B0; font-size: var(--fs-3); }
.at-body .gs-form .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.at-body .gs-done { display: none; margin: 0; }
.at-body .gs-form.done form { display: none; }
.at-body .gs-form.done .gs-done {
  display: block;
  margin-block-start: 18px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 700;
}

/* --- [[بازدید]] --- */
.at-body .gs-visit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--cream-50);
  border-color: var(--cream-200);
}
.at-body .gs-visit .gs-ic { background: var(--paper); color: var(--brand-ink); }
.at-body .gs-visit-t b { display: block; font-size: var(--fs-5); line-height: 1.6; }
.at-body .gs-visit-t span {
  display: block;
  margin-block-start: 5px;
  color: var(--n-700);
  font-size: var(--fs-3);
}

/* --- [[مشاوره]] --- */
.at-body .gs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  background: var(--g-50);
  border-color: var(--g-200);
}
.at-body .gs-cta b { font-size: var(--fs-5); line-height: 1.6; }

/* --- [[هزینه]] --- */
.at-body a.gs-price {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.at-body a.gs-price:hover { border-color: var(--g-200); box-shadow: var(--sh-2); }
.at-body .gs-price-t b { display: block; font-size: var(--fs-5); line-height: 1.6; }
.at-body .gs-price-t span {
  display: block;
  margin-block-start: 4px;
  color: var(--muted);
  font-size: var(--fs-3);
}

/* --- [[تماس]] --- */
.at-body .gs-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  background: var(--cream-50);
  border-color: var(--cream-200);
}
.at-body .gs-contact > b { font-size: var(--fs-5); }
.at-body .gs-ch { display: flex; flex-wrap: wrap; gap: 9px; }
.at-body .gs-ch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-4);
  font-weight: 800;
  border: 0;
  transition: background var(--fast) var(--ease);
}
.at-body .gs-ch svg { width: 17px; height: 17px; }
.at-body .gs-ch .call { background: var(--brand-fill); color: #fff; direction: ltr; }
.at-body .gs-ch .call:hover { background: var(--g-950); }
.at-body .gs-ch .wa { background: var(--accent); color: var(--on-accent); }
.at-body .gs-ch .wa:hover { background: var(--accent-hi); }

/* --- [[خدمت]] --- */
.at-body a.gs-svc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.at-body a.gs-svc:hover { border-color: var(--g-200); box-shadow: var(--sh-2); }
.at-body .gs-svc-k {
  display: block;
  color: var(--brand-soft);
  font-size: var(--fs-1);
  font-weight: 800;
}
.at-body .gs-svc-t b { display: block; margin-block-start: 3px; font-size: var(--fs-5); }

/* --- [[نکته]] / [[هشدار]] / [[فصل]] --- */
/* سه حالتِ یک خانواده. هر کدام چهار متغیر دارد: نوارِ کناری، زمینه، رنگِ
   برچسب و آیکون. آیکون لازم است چون در نسخه‌ی قبل تنها تفاوتِ سه حالت رنگ
   بود و رنگِ هشدار (‎--clay-100 = #F6E7DA‎) تقریباً همان کرمِ عادیِ سایت
   (‎--cream-100 = #F3E8DA‎) بود — پس «اخطار» شبیه یک کارتِ معمولی می‌شد. */
.at-body .gs-note {
  --nt-bar: var(--g-400);
  --nt-bg: var(--g-50);
  --nt-ink: var(--brand-ink);
  --nt-txt: var(--n-700);
  --nt-chip: var(--g-100);

  position: relative;
  padding: 17px 20px;
  padding-inline-start: 54px;
  border: 0;
  border-inline-start: 3px solid var(--nt-bar);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--nt-bg);
}

/* چیپِ آیکون. آیکون به‌شکلِ ‎data:‎ می‌آید تا مارک‌آپِ شورت‌کد دست‌نخورده
   بماند — ‎BlogShortcode‎ فقط ‎<b>‎ و ‎<p>‎ تولید می‌کند. */
.at-body .gs-note::before {
  content: '';
  position: absolute;
  inset-inline-start: 17px;
  inset-block-start: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nt-chip) var(--nt-icon) center / 15px 15px no-repeat;
}

.at-body .gs-note b {
  display: block;
  margin-block-end: 5px;
  color: var(--nt-ink);
  font-size: var(--fs-4);
  font-weight: 800;
}
.at-body .gs-note p {
  margin: 0;
  color: var(--nt-txt);
  font-size: var(--fs-read-sm);
  line-height: 1.9;
}

/* نکته — سبزِ برند. لامپ. */
.at-body .gs-note-tip {
  --nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004D3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21.5h3'/%3E%3Cpath d='M12 2.5a7 7 0 0 0-4 12.8V17h8v-1.7a7 7 0 0 0-4-12.8Z'/%3E%3C/svg%3E");
}

/* هشدار — آجریِ گرم. عمداً از کرم دور است تا با کارتِ عادی اشتباه نشود.
   مثلثِ اخطار. */
.at-body .gs-note-warn {
  --nt-bar: #C2603A;
  --nt-bg: #FDF0E8;
  --nt-ink: #8F3F1C;
  --nt-txt: #6E4B37;
  --nt-chip: #F7DCCB;
  --nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F3F1C' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4.5M12 17.3h.01'/%3E%3C/svg%3E");
}

/* تقویمِ کار — آبیِ لجنی که هیوش به سبزِ برند نزدیک است، نه آبیِ خالص.
   تقویم. */
.at-body .gs-note-season {
  --nt-bar: #4E8296;
  --nt-bg: #EDF4F6;
  --nt-ink: #2C5A6B;
  --nt-txt: #40606C;
  --nt-chip: #D5E6EB;
  --nt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5A6B' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 11h18'/%3E%3C/svg%3E");
}

/* --------------------------------------------- ۱۰.۹) سؤالاتِ همین مقاله */
.at-faq {
  max-width: var(--at-w);
  margin-inline: auto;
  margin-block-start: clamp(34px, 5vw, 56px);
  padding-block-start: clamp(26px, 3.6vw, 38px);
  border-block-start: 1px solid var(--line);
}
.at-faq > h2 {
  margin-block-end: 16px;
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 800;
}
.at-faq-l { display: grid; gap: 9px; }

.at-q {
  border-radius: var(--r);
  background: var(--cream-50);
  transition: background var(--fast) var(--ease);
}
.at-q[open] { background: var(--paper); box-shadow: var(--sh-2); }
.at-q summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 17px;
  cursor: pointer;
  color: var(--g-950);
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1.65;
  list-style: none;
}
.at-q summary::-webkit-details-marker { display: none; }
.at-q summary:hover { color: var(--brand-ink); }
.at-q summary svg {
  margin-inline-start: auto;
  flex: none;
  color: var(--brand-soft);
  transition: transform var(--mid) var(--ease), color var(--fast) var(--ease);
}
.at-q[open] summary svg { transform: rotate(135deg); color: var(--accent); }
.at-q p {
  margin: 0;
  padding: 0 17px 17px;
  color: var(--n-700);
  font-size: var(--fs-read-sm);
  line-height: 1.95;
}

/* ------------------------------------------ ۱۰.۱۰) برچسب و هم‌رسانی */
.at-foot {
  max-width: var(--at-w);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 34px;
  justify-content: space-between;
  margin-block-start: clamp(30px, 4.4vw, 46px);
  padding-block-start: clamp(20px, 3vw, 28px);
  border-block-start: 1px solid var(--line);
}
.at-foot > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.at-foot b {
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}

/* برچسب‌ها لینک نیستند: مسیرِ آرشیوِ تگ در سایت وجود ندارد و لینکِ مرده
   بدتر از متنِ ساده است. اگر روزی روت اضافه شد، فقط تگ عوض می‌شود. */
.at-tags-l { display: flex; flex-wrap: wrap; gap: 6px; }
.at-tag {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--g-50);
  border: 1px solid var(--g-200);
  color: var(--brand-ink);
  font-size: var(--fs-2);
  font-weight: 600;
}

.at-share-l { display: flex; gap: 7px; }
.at-share-l a,
.at-share-l button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--brand-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.at-share-l a:hover,
.at-share-l button:hover {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}
/* ‎site.js‎ بعد از کپیِ موفق کلاسِ ‎ok‎ را می‌گذارد */
.at-share-l .at-copy.ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ------------------------------------------- ۱۰.۱۱) مقاله‌ی قبلی و بعدی */
.at-nav {
  max-width: var(--at-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-block-start: clamp(26px, 3.6vw, 40px);
}
.at-nav-i {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.at-nav-i:hover {
  border-color: var(--g-200);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.at-nav-i > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 800;
}
.at-nav-i b {
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.7;
}
/* «قبلی» راست‌چین می‌شود تا جهتِ حرکت با جای کارت بخواند */
.at-nav-p { text-align: end; }
.at-nav-p > span { justify-content: flex-end; }

/* ----------------------------------------------- ۱۰.۱۲) مقالات مرتبط */
.at-more .wrap { max-width: var(--at-w-wide); }
.at-more .bx-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.at-more {
  padding-block: clamp(40px, 6vw, 78px);
  background: var(--cream-50);
  border-block-start: 1px solid var(--cream-200);
}

/* -------------------------------------------------- ۱۰.۱۳) موبایل */

@media (max-width: 700px) {
  .at-body { font-size: var(--fs-6); line-height: 1.98; }
  .at-body table { font-size: var(--fs-3); }
  .at-body .gs-form form { grid-template-columns: 1fr; }
  .at-body .gs-visit,
  .at-body a.gs-price,
  .at-body a.gs-svc { grid-template-columns: auto 1fr; }
  .at-body .gs-visit .gs-go,
  .at-body a.gs-price .gs-go,
  .at-body a.gs-svc .gs-go { grid-column: 1 / -1; justify-content: center; }
  .at-nav { grid-template-columns: 1fr; }
  .at-nav-p { text-align: start; }
  .at-nav-p > span { justify-content: flex-start; }
  .at-cover img { border-radius: var(--r-lg); }
}


/* =========================================================================
   ۱۱) خدمات — فهرست (نِیم‌اسپیسِ ‎sv-‎)
   ========================================================================= */

/* ---------------------------------------------------------- ۱۱.۱) هیرو */
.sv-hero {
  padding-block: clamp(26px, 4vw, 48px) clamp(34px, 5vw, 58px);
  background:
    radial-gradient(78% 62% at 50% -14%, var(--cream-50), transparent 64%),
    var(--paper);
  text-align: center;
}
.sv-hero-in { max-width: 940px; }
.sv-hero .bx-crumb { margin-block-end: clamp(14px, 2.2vw, 22px); }

/* ------------------------------------------------------- ۱۱.۲) گروه‌ها */
.sv-list { padding-block-end: clamp(40px, 6vw, 80px); }

.sv-grp + .sv-grp { margin-block-start: clamp(34px, 5vw, 58px); }

/* سرتیترِ گروه چپ‌چین است نه وسط‌چین: ردیفِ کارت‌های زیرش هم از راست شروع
   می‌شود و وسط‌چینیِ عنوان، لبه‌ی مشترکشان را می‌شکست. */
.sv-grp-h {
  max-width: 62ch;
  margin-block-end: clamp(16px, 2.4vw, 24px);
}
.sv-grp-h h2 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  font-size: clamp(20px, 2.4vw, 26px);
}
.sv-grp-h h2 span {
  color: var(--brand-soft);
  font-size: var(--fs-2);
  font-weight: 700;
}
.sv-grp-h p {
  margin-block-start: 9px;
  color: var(--n-700);
  font-size: var(--fs-4);
  line-height: 1.9;
}

/* -------------------------------------------------------- ۱۱.۳) کارت */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.sv-card:hover {
  border-color: var(--g-200);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

/* نسبت روی ظرف قفل است، نه روی عکس — با اضافه‌شدنِ تدریجیِ عکس‌ها ارتفاعِ
   کارت‌ها و چیدمانِ شبکه جابه‌جا نمی‌شود. */
.sv-card-ph {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--g-100);
}
.sv-card-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.sv-card:hover .sv-card-ph img { transform: scale(1.04); }

/* جانشین: آیکونِ خودِ خدمت، درشت و کم‌رنگ روی گرادیانِ سبز↔کرم */
.sv-ph-fb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, var(--g-100), var(--cream-100));
}
.sv-ph-fb svg {
  width: 30%;
  max-width: 92px;
  color: var(--g-400);
  opacity: .6;
  transition: transform var(--mid) var(--ease);
}
.sv-card:hover .sv-ph-fb svg { transform: scale(1.06); }

.sv-card-bd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 17px 19px 19px;
}
.sv-card-bd > b {
  color: var(--g-950);
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1.6;
  transition: color var(--fast) var(--ease);
}
.sv-card:hover .sv-card-bd > b { color: var(--brand-ink); }

.sv-card-x {
  display: block;
  margin-block-start: 8px;
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.85;
}

/* ‎margin-block-start: auto‎ خطِ اقدام را به کفِ کارت می‌چسباند تا با
   زیرعنوان‌های نامساوی، ردیفِ فلش‌ها به‌هم نریزد. */
.sv-card-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: auto;
  padding-block-start: 15px;
  color: var(--brand-soft);
  font-size: var(--fs-3);
  font-weight: 700;
  transition: color var(--fast) var(--ease);
}
.sv-card-go svg { transition: transform var(--mid) var(--ease); }
.sv-card:hover .sv-card-go { color: var(--brand-ink); }
.sv-card:hover .sv-card-go svg { transform: translateX(-4px); }

/* ------------------------------------------------- ۱۱.۴) راهنمای انتخاب */
.sv-pick {
  padding-block: clamp(42px, 6.4vw, 84px);
  background: var(--cream-50);
  border-block: 1px solid var(--cream-200);
}
.sv-pick-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sv-pick-g a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 19px 20px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-1);
  transition: transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.sv-pick-g a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

/* جمله‌ی «وضعیت» به‌شکلِ نقل‌قولِ کاربر است، پس ایتالیک نمی‌شود (روی فارسی
   بد می‌نشیند) و به‌جایش با گیومه و رنگِ لهجه از عنوان جدا می‌شود. */
.sv-pick-q {
  display: block;
  margin-block-end: 11px;
  padding-block-end: 11px;
  border-block-end: 1px solid var(--line);
  color: var(--brand-soft);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.8;
}
.sv-pick-q::before { content: '«'; }
.sv-pick-q::after { content: '»'; }

.sv-pick-g b {
  display: block;
  color: var(--g-950);
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.6;
}
.sv-pick-g a > span:last-child {
  display: block;
  margin-block-start: 6px;
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.85;
}

@media (max-width: 620px) {
  .sv-grid { grid-template-columns: 1fr; gap: 12px; }
  .sv-pick-g { grid-template-columns: 1fr; }
}


/* =========================================================================
   ۱۲) صفحه‌ی خدمت (نِیم‌اسپیسِ ‎sd-‎)
   ========================================================================= */

/* ---------------------------------------------------------- ۱۲.۱) هیرو */
/* دو ستونه با فرمِ چسبان. فرم بالای صفحه است نه پایینش: این صفحه‌ی خرید
   است و کاربری که آماده است نباید تا انتهای متن اسکرول کند. */
.sd-hero {
  padding-block: clamp(24px, 3.6vw, 44px) clamp(34px, 5vw, 60px);
  background:
    radial-gradient(70% 60% at 88% -10%, var(--cream-50), transparent 62%),
    var(--paper);
}
.sd-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(24px, 3.6vw, 54px);
  align-items: start;
}

.sd-intro .bx-crumb {
  justify-content: flex-start;
  margin-block-end: clamp(16px, 2.4vw, 24px);
}

.sd-ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 18px;
  background: var(--g-100);
  color: var(--brand-ink);
}
.sd-ic svg { width: 29px; height: 29px; }

.sd-hero h1 {
  max-width: 22ch;
  font-size: var(--fs-h1);
  line-height: 1.3;
}
.sd-lead {
  max-width: 52ch;
  margin-block-start: clamp(14px, 2.2vw, 20px);
  color: var(--n-700);
  font-size: var(--fs-lead);
  line-height: 1.95;
}


/* کارتِ تماس روی زمینه‌ی روشن — نسخه‌ی سبزِ آن در کارتِ اقدام است، پس
   این‌جا رنگ‌ها برعکس می‌شوند. */

/* ------------------------------------------------- ۱۲.۲) فرمِ درخواست */
.sd-modal-in form { display: grid; gap: 14px; }

.sd-fld { display: grid; gap: 7px; }
.sd-fld label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.7;
}
/* ستاره‌ی اجباری کرم است تا در متنِ روشن دیده شود؛ «اختیاری» کم‌رنگ */
.sd-fld label em { color: var(--accent); font-style: normal; font-weight: 800; }
.sd-fld label i {
  color: rgba(255, 255, 255, .4);
  font-size: var(--fs-1);
  font-style: normal;
  font-weight: 600;
}
.sd-unit {
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .6);
  font-size: var(--fs-1);
  font-weight: 700;
}

.sd-modal input[type="text"],
.sd-modal input[type="tel"],
.sd-modal textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
  color: #fff;
  font: inherit;
  font-size: var(--fs-4);
  line-height: 1.8;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sd-modal textarea { resize: vertical; min-height: 62px; }
.sd-modal ::placeholder { color: rgba(255, 255, 255, .32); }
.sd-modal input:focus,
.sd-modal textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, .34);
}
.sd-modal input.ltr { direction: ltr; text-align: start; }

/* سؤالِ گزینه‌ای — الان در داده نیست ولی پنل می‌تواند بسازد */
.sd-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.sd-opt { position: relative; }
.sd-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sd-opt span {
  display: block;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-3);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.sd-opt input:hover + span { border-color: var(--accent); color: #fff; }
.sd-opt input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.sd-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.sd-modal-in form button {
  width: 100%;
  margin-block-start: 6px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: var(--fs-4);
  font-weight: 800;
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sd-modal-in form button:hover { background: var(--accent-hi); transform: translateY(-1px); }

.sd-form-note {
  margin-block-start: 15px;
  color: rgba(255, 255, 255, .45);
  font-size: var(--fs-2);
  line-height: 1.8;
}


/* ---------------------------------------------------------- ۱۲.۳) گالری */
.sd-gal { padding-block-end: clamp(26px, 4vw, 44px); }
.sd-gal ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sd-gal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--g-100);
}

/* ------------------------------------------------- ۱۲.۴) پلِ برگشت به فرم */
/* روی موبایل فرم بالای صفحه ماند و کاربر بعد از خواندنِ متن راهی به آن
   ندارد؛ این بلوک همان راه است. */
.sd-back {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 30px);
  align-items: center;
  max-width: var(--at-w);
  margin: clamp(32px, 4.6vw, 50px) auto 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-xl);
  border: 1px solid var(--cream-200);
  background: var(--cream-50);
}
.sd-back-h {
  color: var(--g-950);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 800;
}
.sd-back-x {
  margin-block-start: 7px;
  color: var(--n-700);
  font-size: var(--fs-4);
}
/* فلشِ چیپ در این دکمه به بالا اشاره می‌کند (لنگرِ ‎#request‎ بالای صفحه است)،
   پس جهتِ انیمیشنِ مشترکِ ‎.cta-i‎ باید عمودی شود. */
.sd-back .cta-i svg + svg { transform: translateY(230%); }
.sd-back .btn-cta:hover .cta-i svg { transform: translateY(-230%); }
.sd-back .btn-cta:hover .cta-i svg + svg { transform: none; }
.sd-back .btn-cta:hover .cta-i { width: 34px; }

/* ---------------------------------------------------- ۱۲.۵) خدمات دیگر */
.sd-rel {
  padding-block: clamp(40px, 6vw, 78px);
  background: var(--n-25);
  border-block-start: 1px solid var(--line);
}

/* ------------------------------------------ ۱۲.۷) آیکون و برچسبِ دسته */
.sd-top {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-block-end: 18px;
}
.sd-grp {
  padding: 6px 15px;
  border: 1px solid var(--g-200);
  border-radius: var(--r-pill);
  background: var(--g-50);
  color: var(--brand-ink);
  font-size: var(--fs-2);
  font-weight: 800;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sd-grp:hover { background: var(--g-100); border-color: var(--g-400); }

/* ------------------------------------------------- ۱۲.۸) نوارِ تضمین */
/* سه خانه‌ی جدا با خطِ مرزی. نسخه‌ی قبلی سه سطرِ ساده بود و در ستونِ بلندِ
   کنارِ فرم به‌چشم نمی‌آمد. */
.sd-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-block-start: clamp(22px, 3vw, 30px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  list-style: none;
  overflow: hidden;
}
.sd-facts li {
  display: grid;
  gap: 4px;
  padding: 16px 17px;
}
.sd-facts li + li { border-inline-start: 1px solid var(--line); }
.sd-facts svg { color: var(--brand-soft); }
.sd-facts span {
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 600;
}
.sd-facts b {
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.55;
}

/* --------------------------------------------------- ۱۲.۹) روند کار */
.sd-flow {
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--cream-50);
  border-block: 1px solid var(--cream-200);
}
/* خطِ بالای هر مرحله روی کاغذِ کرم باید تیره‌تر از ‎--line‎ باشد وگرنه دیده
   نمی‌شود؛ نشانگرِ کرمِ رویش هم به سبز عوض می‌شود تا کرم روی کرم گم نشود. */
.sd-flow .ar-flow > li { border-block-start-color: var(--cream-200); }
.sd-flow .ar-flow > li::before { background: var(--brand-fill); }
.sd-flow .ar-flow-n { color: var(--brand-ink); }

/* ----------------------------------------------------- ۱۲.۱۰) هزینه */
.sd-price { padding-block: clamp(40px, 6vw, 76px); }


@media (max-width: 620px) {
  /* سه خانه در این عرض هر کدام ~۱۰۰px می‌شوند و متن تکه‌تکه می‌شکند */
  .sd-facts { grid-template-columns: 1fr; }
  .sd-facts li + li { border-inline-start: 0; border-block-start: 1px solid var(--line); }
}

/* --------------------------------------------------- ۱۲.۱۱) نوارِ اقدام */
/* فرم از هیرو بیرون رفت، پس هیرو تک‌ستونه شد و این نوار جایش را گرفت:
   دکمه‌ی درخواست + کارتِ تماس، کنارِ هم. */
.sd-hero-in { display: block; max-width: 980px; }
.sd-intro { max-width: none; }

.sd-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-start: clamp(24px, 3.4vw, 34px);
}
.sd-open {
  padding-block: 12px;
  padding-inline: 26px 10px;
  font-size: var(--fs-5);
}
.sd-call { flex: 1 1 320px; min-width: 0; }
.sd-call .ar-cta-call-t small { color: var(--muted); }
.sd-call .ar-cta-call-t b { color: var(--g-950); }

/* کارتِ تماس روی زمینه‌ی روشن — نسخه‌ی سبزش در کارتِ اقدام است */
.sd-hero .ar-cta-call {
  border-color: var(--line);
  background: var(--cream-50);
}
.sd-hero .ar-cta-call:hover { background: var(--cream-100); border-color: var(--accent); }

/* پیامِ نتیجه‌ی ارسال */
.sd-msg {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-block-start: 16px;
  padding: 13px 17px;
  border-radius: var(--r);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.8;
}
.sd-msg svg { flex: none; margin-block-start: 3px; }
.sd-msg-ok { background: var(--g-50); border: 1px solid var(--g-200); color: var(--brand-ink); }
.sd-msg-ok svg { color: var(--brand-soft); }
.sd-msg-err { background: #FDF0E8; border: 1px solid #F0C9B2; color: #8F3F1C; }

/* ------------------------------------------------ ۱۲.۱۲) مودالِ درخواست */
/* ‎<dialog>‎ ِ بومی؛ قفلِ فوکوس و بستن با Escape را خودش می‌دهد. */
.sd-modal {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(168, 217, 198, .16), transparent 62%),
    var(--g-900);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 32, 24, .9);
}
.sd-modal::backdrop {
  background: rgba(0, 32, 24, .58);
  backdrop-filter: blur(4px);
}
/* انیمیشنِ ورود — با ‎prefers-reduced-motion‎ در بخشِ پایه خنثی می‌شود */
.sd-modal[open] { animation: sdIn .26s var(--ease); }
@keyframes sdIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
}

.sd-modal-x { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 2; }
.sd-modal-x button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sd-modal-x button:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); }

/* بدنه اسکرول می‌شود نه کلِ مودال، تا دکمه‌ی بستن سرِ جایش بماند */
.sd-modal-in {
  max-height: min(88vh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 4vw, 34px);
}
.sd-modal-k {
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: 800;
}
.sd-modal-h {
  margin-block-start: 6px;
  color: #fff;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  max-width: 26ch;
}
.sd-modal-x2 {
  margin-block: 10px 22px;
  color: rgba(255, 255, 255, .66);
  font-size: var(--fs-4);
  line-height: 1.9;
}

/* ----------------------------------------------------- ۱۲.۱۳) هزینه */
/* سرتیتر بالا و سه عامل زیرش. پیش‌تر دو ستونه بود و چشم بین عنوان و
   گزینه‌ها رفت‌وبرگشت می‌کرد. */
.sd-price-l {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: pf;
}
.sd-price-l li {
  counter-increment: pf;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
}
/* شماره روی سطرِ خودش می‌نشیند، نه کنارِ متن — سه کارتِ هم‌عرض این‌طور
   منظم‌تر خوانده می‌شوند. */
.sd-price-l li::before {
  content: counter(pf, persian);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-block-end: 14px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-ink);
  font-size: var(--fs-4);
  font-weight: 800;
}
.sd-price-l b {
  display: block;
  color: var(--g-950);
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.55;
}
.sd-price-l span {
  display: block;
  margin-block-start: 7px;
  color: var(--n-700);
  font-size: var(--fs-3);
  line-height: 1.9;
}
.sd-price-foot { margin-block-start: clamp(20px, 3vw, 28px); text-align: center; }
.sd-price-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-ink);
  font-size: var(--fs-4);
  font-weight: 800;
}
.sd-price-go svg { transition: transform var(--mid) var(--ease); }
.sd-price-go:hover svg { transform: translateX(-4px); }

@media (max-width: 860px) {
  .sd-price-l { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sd-act { flex-direction: column; align-items: stretch; }
  .sd-open { justify-content: center; padding-inline: 22px 10px; }
}

/* -------------------------------------------------------- ۱۲.۶) موبایل */
@media (max-width: 1020px) {
  /* فرم از ستونِ چسبان به بلوکِ زیرِ معرفی می‌آید. ۴۰۰px در عرضِ کمتر
     فشرده می‌شد و فیلدها باریک و بدقلق. */
}
@media (max-width: 700px) {
  .sd-back { grid-template-columns: 1fr; }
  .sd-hero h1 { max-width: none; }
  .sd-gal ul { grid-template-columns: 1fr 1fr; gap: 8px; }
}


/* =========================================================================
   ۱۳) لندینگ‌ها (نِیم‌اسپیسِ ‎lp-‎)
   =========================================================================
   شش صفحه با یک استخوان‌بندی: روف گاردن، دیوار سبز، باغبان سیار، اداری و
   تجاری، هزینه‌ها و صفحه‌ی محله.

   این بخش عمداً کوچک است. صفحه‌ی لندینگ از قطعاتی ساخته می‌شود که پیش‌تر
   جای دیگری تأیید شده‌اند و همان‌جا هم می‌مانند:
     • سرتیترِ بخش و ابرو  → ‎.ar-shd‎ / ‎.ar-eyebrow‎   (بخش ۷)
     • تایپوگرافیِ متنِ بلند → ‎.at-body‎ + ‎.gs-*‎        (بخش ۱۰)
     • چیپِ خدماتِ مرتبط    → ‎.at-svc‎                   (بخش ۱۰)
     • مراحل                → ‎.ar-flow‎                  (بخش ۷)
     • سؤالات متداول        → ‎.ar-faq‎ / ‎.ar-q‎          (بخش ۷)
     • کارتِ اقدام و فرم    → ‎.ar-cta‎ / ‎.ar-form‎       (بخش ۷)
     • کارتِ مقاله و پروژه  → ‎.bx-card‎                  (بخش ۹)
     • بلوکِ پایانیِ تیره   → ‎.bx-next‎                  (بخش ۹)
   آن‌چه این‌جا اضافه می‌شود فقط چیزهایی است که هیچ صفحه‌ی دیگری ندارد:
هیرویِ راهنما، نوارِ تعهد، جدولِ مقایسه، و بلوکِ «مناسب / نامناسب».

   ترتیبِ کاغذِ بخش‌ها عمدی است و هیچ دو بخشِ هم‌رنگ پشتِ هم نمی‌افتد:
   بدنه سفید ← مراحل کرم ← نمونه‌کار خاکستری ← محله‌ها سفید ← سؤالات کرم ←
   مقالات خاکستری ← اقدام سفید (با کارتِ سبزِ تیره داخلش).   */

/* ---------------------------------------------------------- ۱۳.۱) هیرو */
/* همان دستورِ هاله‌ی کرمِ صفحه‌ی خدمات، تا سه صفحه‌ی ورودیِ سایت (خدمت،
   مقاله، لندینگ) یک‌جور شروع شوند. */
.lp-hero {
  padding-block: clamp(26px, 4vw, 48px) clamp(32px, 5vw, 56px);
  background:
    radial-gradient(78% 62% at 50% -14%, var(--cream-50), transparent 64%),
    var(--paper);
  text-align: center;
}
.lp-hero-in { max-width: 960px; }
.lp-hero .bx-crumb { margin-block-end: clamp(14px, 2.2vw, 22px); }

.lp-hero h1 {
  max-width: 21ch;
  margin-inline: auto;
  font-size: var(--fs-h1);
  line-height: 1.24;
}

.lp-lead {
  max-width: 58ch;
  margin-block-start: clamp(16px, 2.4vw, 24px);
  margin-inline: auto;
  color: var(--n-700);
  font-size: var(--fs-lead);
  line-height: 1.95;
}
.lp-lead b { color: var(--brand-ink); font-weight: 700; }

.lp-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin-block-start: clamp(22px, 3.2vw, 32px);
}

/* --- ردیفِ تیک: چهار قولِ کوتاه ---
   کارت نیست و کادر ندارد؛ فقط یک خطِ مویی آن را از دکمه‌ها جدا می‌کند.
   دو ستون است نه چهار: هر قول در فارسی حدود ۳۰ کاراکتر است و چهار ستون
   هرکدام را سه‌خطی می‌کرد. */
.lp-tick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 30px;
  max-width: 680px;
  margin-block-start: clamp(26px, 3.6vw, 36px);
  margin-inline: auto;
  padding-block-start: clamp(20px, 2.8vw, 28px);
  border-block-start: 1px solid var(--line);
  list-style: none;
  padding-inline: 0;
  /* ظرف وسط می‌آید ولی خودِ آیتم‌ها از راست شروع می‌شوند */
  text-align: start;
}
.lp-tick li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--n-700);
  font-size: var(--fs-3);
  line-height: 1.75;
}
/* تیک با ‎mask‎ کشیده می‌شود نه ‎<svg>‎ ِ درون‌مارک‌آپ: چهار بار تکرارِ یک
   آیکونِ ثابت در HTML ارزشی ندارد و با ‎currentColor‎ هم رنگ‌پذیر می‌ماند. */
.lp-tick li::before {
  content: '';
  flex: none;
  width: 17px;
  height: 17px;
  margin-block-start: 4px;
  background: var(--brand-soft);
  -webkit-mask: var(--ic-check) center / contain no-repeat;
  mask: var(--ic-check) center / contain no-repeat;
}

/* ----------------------------------------------------- ۱۳.۲) نوارِ تعهد */
/* چهار اصلِ کار، هرکدام با یک جمله‌ی «چرا».
   جداکننده‌ها با ترفندِ ‎gap‎ ساخته می‌شوند: زمینه‌ی ظرف رنگِ خط است و
   خانه‌ها سفید. برخلافِ ‎li + li { border-inline-start }‎ این روش با هر
   تعداد ستون و هر شکستِ سطری درست کار می‌کند — در ۲×۲ ِ تبلت هم خطِ
   افقیِ میانی خودش می‌آید. */
.lp-vow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-block-start: clamp(30px, 4.4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--line);
  list-style: none;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.lp-vow > li,
.lp-vow > div {
  padding: 19px 20px 21px;
  background: var(--paper);
  /* هیرو وسط‌چین است و این ارث می‌رسید؛ متنِ داخلِ خانه‌ها باید از راست
     شروع شود وگرنه سه‌خطیِ وسط‌چین سخت خوانده می‌شود. */
  text-align: start;
}
.lp-vow b {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--g-950);
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.5;
}
.lp-vow b::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.lp-vow span {
  display: block;
  margin-block-start: 9px;
  color: var(--n-700);
  font-size: var(--fs-3);
  line-height: 1.9;
}

/* ---------------------------------------------------------- ۱۳.۳) بدنه */
.lp-main { padding-block: clamp(34px, 5vw, 62px) clamp(40px, 6vw, 76px); }

/* --- بازشدنِ محتوای پهن ---
   متنِ خواندنی روی ۷۰۰px می‌ماند و فقط جدول و بلوکِ مقایسه یک پله بازتر
   می‌شوند. با مارجینِ منفی، نه با ظرفِ جدا: این‌طور جدول در همان جریانِ
   متن می‌ماند و ترتیبِ ‎margin‎ ِ تیترها به‌هم نمی‌خورد. */
.at-body .lp-wide,
.at-body .lp-tbl,
.at-body .lp-cmp {
  margin-inline: calc((var(--at-w) - var(--at-w-wide)) / 2);
}
/* زیرِ این عرض، ‎.wrap‎ خودش باریک‌تر از پله‌ی پهن می‌شود و مارجینِ منفی
   محتوا را از لبه‌ی صفحه بیرون می‌زد. */
@media (max-width: 1000px) {
  .at-body .lp-wide,
  .at-body .lp-tbl,
  .at-body .lp-cmp { margin-inline: 0; }
}

/* --- خانه‌ی عنوانِ سطر ---
   جدول‌های این صفحات ستونِ اولشان ‎<th>‎ ِ داخلِ ‎<tbody>‎ است (نامِ لایه،
   نامِ عاملِ هزینه…). ‎.at-body‎ فقط ‎thead th‎ را می‌شناخت و این خانه‌ها
   بی‌قالب و هم‌رنگِ متنِ معمولی می‌ماندند. */
.at-body tbody th {
  padding: 12px 15px;
  border-block-end: 1px solid var(--line);
  background: var(--g-50);
  color: var(--g-950);
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.75;
  text-align: start;
  vertical-align: top;
}
.at-body tbody tr:last-child th { border-block-end: 0; }

/* --- ظرفِ اسکرولِ جدول --- */
/* جدولِ سه‌ستونی روی موبایل پهن‌تر از صفحه می‌شود؛ بی این ظرف کلِ صفحه
   افقی اسکرول می‌شد. گردیِ گوشه روی ظرف است نه جدول، چون
   ‎border-collapse: collapse‎ گوشه‌ی جدول را نمی‌بُرد. */
.lp-tbl,
.lp-cmp {
  margin-block: 1.6em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r);
  box-shadow: 0 0 0 1px var(--line);
}
.lp-tbl table,
.lp-cmp table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- جدولِ مقایسه ---
   شکلِ «الف یا ب؟». تفاوتش با جدولِ معمولی این است که خانه‌ی خالیِ گوشه
   واقعاً خالی می‌ماند و دو گزینه، سرِ سبزِ توپُر می‌گیرند تا چشم بین دو
   ستون مقایسه کند، نه بین سطرها. */
.lp-cmp { min-width: 0; }
.lp-cmp thead th {
  padding: 13px 15px;
  background: var(--g-900);
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 800;
  text-align: start;
  border-block-end: 0;
}
/* گوشه‌ی خالی رنگ نمی‌گیرد؛ سرِ سبز باید فقط روی دو گزینه بنشیند. */
.lp-cmp thead th:first-child {
  background: var(--paper);
  width: 26%;
}
.lp-cmp tbody th {
  background: var(--cream-50);
  color: var(--g-950);
  font-size: var(--fs-3);
}
.lp-cmp tbody td { font-size: var(--fs-4); }

/* --- فهرستِ تیک‌دار --- */
/* جانشینِ نقطه‌ی معمولیِ ‎.at-body ul‎ برای فهرست‌هایی که «انجام می‌شود»
   معنا می‌دهند، نه فقط «آیتم». */
.at-body ul.lp-chk > li::before {
  inset-inline-start: 0;
  inset-block-start: .62em;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--brand-soft);
  -webkit-mask: var(--ic-check) center / contain no-repeat;
  mask: var(--ic-check) center / contain no-repeat;
}
.at-body ul.lp-chk > li { padding-inline-start: 30px; }

/* ------------------------------------------- ۱۳.۴) مناسب / نامناسب */
/* دو ستونِ روبه‌روی هم: «کجا جواب می‌دهد» و «کجا نه».
   نگفتنِ دومی صفحه را تبلیغاتی می‌کند؛ گفتنش هم اعتماد می‌سازد و هم لیدِ
   بی‌ربط را قبلِ تماس فیلتر می‌کند. */
.lp-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-block: 1.7em;
}
.lp-fit > div {
  padding: 21px 23px 23px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}
.lp-fit-y { border-color: var(--g-200); background: var(--g-50); }
.lp-fit-n { border-color: var(--cream-200); background: var(--cream-50); }

.lp-fit > div > b,
.lp-fit > div > h3 {
  margin-block-start: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 14px;
  padding-block-end: 13px;
  border-block-end: 1px solid;
  font-size: var(--fs-5);
  font-weight: 800;
}
.lp-fit-y > b,
.lp-fit-y > h3 { border-block-end-color: var(--g-200); color: var(--brand-ink); }
.lp-fit-n > b,
.lp-fit-n > h3 { border-block-end-color: var(--cream-200); color: #8F5A2C; }

/* آیکونِ سرِ ستون: تیک و ضربدر، هر دو با ‎mask‎ */
.lp-fit > div > b::before,
.lp-fit > div > h3::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
}
.lp-fit-y > b::before,
.lp-fit-y > h3::before {
  -webkit-mask: var(--ic-check) center / contain no-repeat;
  mask: var(--ic-check) center / contain no-repeat;
}
.lp-fit-n > b::before,
.lp-fit-n > h3::before {
  -webkit-mask: var(--ic-x) center / contain no-repeat;
  mask: var(--ic-x) center / contain no-repeat;
}

/* فهرستِ داخلِ ستون، مستقل از ‎.at-body ul‎ نوشته می‌شود چون نشانگرش
   باید هم‌رنگِ خودِ ستون باشد. */
.lp-fit ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-fit li {
  position: relative;
  padding-inline-start: 19px;
  color: var(--n-700);
  font-size: var(--fs-4);
  line-height: 1.85;
}
.lp-fit li::before {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  inset-block-start: .78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.lp-fit-y li::before { background: var(--g-400); }
.lp-fit-n li::before { background: var(--cream-200); }

/* ---------------------------------------------------- ۱۳.۵) مراحلِ کار */
/* ‎.ar-flow‎ ِ صفحه‌ی مناطق، این‌بار روی خاکستریِ بسیار روشن نه کرم:
   سؤالاتِ متداولِ همین صفحه کاغذِ کرم دارد و دو بلوکِ کرمِ پشتِ هم مرزشان
   را گم می‌کنند. این‌طور ترتیبِ کاغذ می‌شود سفید ← خاکستری ← کرم. */
.lp-flow {
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--cream-50);
  border-block: 1px solid var(--cream-200);
}
/* خطِ بالای هر مرحله باید تیره‌تر از ‎--line‎ باشد وگرنه روی کرم دیده نمی‌شود،
   و نشانگرِ کرمِ رویش به سبز عوض می‌شود تا کرم روی کرم گم نشود. */
.lp-flow .ar-flow > li { border-block-start-color: var(--cream-200); }
.lp-flow .ar-flow > li::before { background: var(--brand-fill); }
.lp-flow .ar-flow-n { color: var(--brand-ink); }

/* -------------------------------------------------------- ۱۳.۶) محله‌ها */
/* لینک‌دهیِ محلی. چیپ‌ها همان ‎.ar-item‎ ِ صفحه‌ی مناطق‌اند تا کاربر یک
   شکلِ آشنا ببیند؛ فقط چیپِ «همه‌ی مناطق» رنگِ کرم می‌گیرد چون مقصدش
   یک صفحه‌ی دیگر است نه یک محله. */
.lp-areas {
  padding-block: clamp(38px, 5.6vw, 72px);
  border-block-start: 1px solid var(--line);
}
.lp-areas .ar-grid { justify-content: center; }

.lp-areas-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--cream-50);
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.5;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lp-areas-all:hover { background: var(--accent); }
.lp-areas-all svg { transition: transform var(--mid) var(--ease); }
.lp-areas-all:hover svg { transform: translateX(-4px); }

/* شهرِ محله، کم‌رنگ‌تر از نامش */
.ar-item i {
  color: var(--muted);
  font-size: var(--fs-2);
  font-style: normal;
  font-weight: 600;
}
.ar-item:hover i { color: rgba(255, 255, 255, .62); }

/* -------------------------------------------- ۱۳.۷) مقالات و پروژه‌ها */
.lp-rel {
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--n-25);
  border-block-start: 1px solid var(--line);
}
.lp-rel-g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}

/* -------------------------------------------------- ۱۳.۹) صفحه‌ی محله */
/* نقاطِ شناخته‌شده‌ی محله زیرِ هیرو. سیگنالِ محلیِ قوی برای سئو و در عمل
   همان چیزی که به کاربر می‌گوید «بله، منظورشان همین‌جاست».
   عمداً پیلِ کرم است نه چیپِ سبزِ ‎.ar-item‎: آن‌ها لینک‌اند و این‌ها فقط
   نشانه، و اگر هم‌شکل بودند کاربر انتظار کلیک داشت. */
.lp-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 10px;
  max-width: 760px;
  margin-block-start: clamp(24px, 3.4vw, 34px);
  margin-inline: auto;
  padding-block-start: clamp(20px, 2.8vw, 28px);
  border-block-start: 1px solid var(--line);
}
.lp-marks b {
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 800;
}
.lp-marks i {
  padding: 5px 13px;
  border: 1px solid var(--cream-200);
  border-radius: var(--r-pill);
  background: var(--cream-50);
  color: var(--n-700);
  font-size: var(--fs-3);
  font-style: normal;
  line-height: 1.6;
}

/* کارتِ محله‌ی مجاور — همان کارتِ «راهنمای انتخاب» ِ صفحه‌ی خدمات.
   ‎Lead‎ ِ محله یک پاراگرافِ کامل است و بی این بُرش، ارتفاعِ کارت‌ها
   به‌اندازه‌ی بلندترین متن کشیده می‌شد. */
.lp-near .sv-pick-q { color: var(--muted); font-weight: 700; }
.lp-near .sv-pick-q::before,
.lp-near .sv-pick-q::after { content: none; }
.lp-near a > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* هابِ منطقه‌ها در بالای فهرستِ محله‌ها (`/areas`). همان کارت است؛ فقط
   ‎Coverage‎ کوتاه‌تر از ‎Lead‎ ِ محله است و بُرشِ چهار خطی لازم ندارد. */
.ar-regions { margin-bottom: 2.6rem; }
.ar-regions a > span:last-child { -webkit-line-clamp: 3; }

/* ------------------------------- ۱۳.۱۰) کارتِ اقدام در جریانِ متن */
/* در صفحه‌ی مقاله ‎.at-ask‎ بیرونِ ‎.at-body‎ است (فرزندِ ‎.at-col‎)، ولی در
   لندینگ‌ها وسطِ خودِ متن می‌نشیند — و تایپوگرافیِ متنِ بلند رویش می‌افتاد:

     • ‎.at-body p‎ با ویژگیِ (۰,۱,۱) از ‎.at-ask-h‎ با (۰,۱,۰) قوی‌تر است، پس
       ‎color: var(--n-700)‎ برنده می‌شد: تیتر و توضیح، خاکستریِ متنِ معمولی
       روی کارتِ سبزِ تیره. مارجینِ ‎1.15em‎ ِ پاراگراف هم اضافه می‌ماند.
     • ‎.at-body a:not(.gs)‎ با (۰,۲,۱) از ‎.btn‎ قوی‌تر است، پس متنِ دکمه و
       شماره سبز و زیرخط‌دار می‌شد.

   همه‌ی کامپوننت‌های درون‌متنیِ این فایل (‎gs-*‎) به همین دلیل با ‎.at-body X‎
   اسکوپ شده‌اند؛ این هم همان الگو را می‌گیرد. */

/* در عرضِ ۷۰۰px ِ متن، دو ستونه نمی‌شود: ستونِ متن به ~۳۸۰px می‌رسد و تیترِ
   ۲۲پیکسلی سه‌خطی می‌شکند. پس عمودی می‌شود و ردیفِ اقدام زیرِ متن می‌آید. */
.at-body .at-ask {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.at-body .at-ask p { margin-block: 0; }
.at-body .at-ask .at-ask-h { color: #fff; }
.at-body .at-ask .at-ask-x {
  margin-block-start: 10px;
  max-width: 52ch;
  color: rgba(255, 255, 255, .7);
}

/* ردیفِ اقدام: دکمه و شماره کنارِ هم، با خطِ مویی از متن جدا.
   ‎justify-items: stretch‎ ِ حالتِ ستونی این‌جا دکمه را تمام‌عرض می‌کرد. */
.at-body .at-ask-a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-block-start: clamp(18px, 2.6vw, 24px);
  padding-block-start: clamp(16px, 2.4vw, 22px);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
}
.at-body .at-ask-a a { text-decoration: none; }
.at-body .at-ask-a .btn { font-weight: 700; }
.at-body .at-ask-a .btn-accent { color: var(--on-accent); }
/* ⚠️ این دو باید ‎a.at-ask-tel‎ باشند نه ‎.at-ask-tel‎: رقیبشان
   ‎.at-body a:not(.gs)‎ با ویژگیِ (۰,۲,۱) است و ‎.at-body .at-ask-tel‎ با
   (۰,۲,۰) یک پله کم می‌آورد. نتیجه‌اش این بود که شماره‌ی تماس با رنگِ
   ‎--brand-ink‎ روی کارتِ سبزِ تیره می‌افتاد و عملاً نامرئی می‌شد — روی
   همه‌ی لندینگ‌ها و صفحه‌ی پروژه. با ‎a‎ ویژگی برابر می‌شود و چون این قاعده
   پایین‌تر از قاعده‌ی متنِ بلند است، برنده می‌شود. */
.at-body a.at-ask-tel { justify-content: flex-start; color: #fff; font-weight: 800; }
.at-body a.at-ask-tel:hover { color: var(--accent); }

@media (max-width: 560px) {
  /* در این عرض دکمه و شماره کنارِ هم جا نمی‌شوند و شماره زیرِ دکمه
     نصفه می‌افتد؛ هر کدام یک سطرِ کامل می‌گیرند. */
  .at-body .at-ask-a { display: grid; gap: 14px; justify-items: stretch; }
  .at-body .at-ask-a .btn { justify-content: center; }
  .at-body .at-ask-tel { justify-content: center; }
}

/* ------------------------------------------------------- ۱۳.۸) موبایل */
@media (max-width: 1000px) {
  .lp-vow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .lp-fit { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lp-tick { grid-template-columns: 1fr; gap: 9px; }
  .lp-vow { grid-template-columns: 1fr; }
  .lp-acts .btn { width: 100%; }
  .lp-rel-g { grid-template-columns: 1fr; gap: 12px; }
  /* جدول روی موبایل اسکرول می‌شود؛ یک اشاره‌ی بصری لازم دارد که
     می‌شود اسکرولش کرد، وگرنه ستونِ سوم دیده نمی‌شود. */
  .lp-tbl,
  .lp-cmp {
    background:
      linear-gradient(to left, var(--paper) 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to left, rgba(0, 45, 34, .1), rgba(255, 255, 255, 0) 22px) 0 0 / 100% 100%;
    background-attachment: local, scroll;
  }
}


/* =========================================================================
   ۱۴) صفحه‌ی اصلی (نِیم‌اسپیسِ ‎hm-‎)
   =========================================================================
   مثلِ بخشِ لندینگ‌ها، این بخش هم عمداً کوچک است. صفحه‌ی اصلی از قطعاتی
   ساخته می‌شود که پیش‌تر جای دیگری تأیید شده‌اند:
     • ابرو و سرتیترِ بخش  → ‎.ar-eyebrow‎ / ‎.ar-shd‎      (بخش ۷)
     • نوارِ آمار          → ‎.ar-stats‎ / ‎.ar-stat‎        (بخش ۷)
     • مراحلِ کار          → ‎.ar-flow‎                     (بخش ۷)
     • کارتِ خدمت          → ‎.sv-grid‎ / ‎.sv-card‎         (بخش ۱۱)
     • کارتِ «کدام مدل؟»   → ‎.sv-pick‎ / ‎.sv-pick-g‎       (بخش ۱۱)
     • کارتِ مقاله و پروژه → ‎.bx-card‎ + شبکه‌ی ‎.lp-rel-g‎  (بخش ۹ و ۱۳)
     • ردیفِ قول‌ها         → ‎.lp-tick‎                     (بخش ۱۳)
     • نوارِ تعهد          → ‎.lp-vow‎                      (بخش ۱۳)
     • پیلِ نشانه          → ‎.lp-marks‎                    (بخش ۱۳)
     • کارتِ اقدام و فرم   → ‎.ar-cta‎ (پارشالِ ‎_LeadCta‎)   (بخش ۷)
   چیزی که این‌جا تازه است فقط دو تاست: هیرویِ تیره، و نقلِ مشتری.

   ترتیبِ کاغذ — برخلافِ بقیه‌ی صفحات، لنگرِ کنتراست این‌جا **بالای** صفحه
   است نه پایینش. پس زنجیره از یک بلوکِ تیره شروع می‌شود و بعد هیچ دو
   بخشِ هم‌رنگ پشتِ هم نمی‌افتد:
   هیرو سبزِ تیره ← نوارِ اعتماد سفید ← خدمات سفید ← تعهدها کرم ←
   مراحل سفید ← نمونه‌کار ‎--n-25‎ ← مدلِ همکاری کرم ← نقلِ مشتری سفید ←
   مجله ‎--n-25‎ ← اقدام سفید (با کارتِ سبزِ تیره داخلش).
   ========================================================================= */

/* ---------------------------------------------------------- ۱۴.۱) هیرو */
/* تنها هیرویِ تیره‌ی سایت. بقیه‌ی صفحات با هاله‌ی کرم روی کاغذِ سفید شروع
   می‌شوند؛ صفحه‌ی اصلی عمداً برعکس است تا لحظه‌ی ورود، صفحه‌ی خانه با
   صفحه‌ی داخلی اشتباه نشود. دستورِ رنگ همان ‎.ar-band‎ و ‎.bx-next‎ است تا
   سه بلوکِ تیره‌ی سایت یک رنگ باشند. */
.hm-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(46px, 7.4vw, 96px) clamp(38px, 6vw, 76px);
  background:
    radial-gradient(84% 68% at 50% -10%, rgba(200, 159, 116, .17), transparent 62%),
    var(--g-900);
  text-align: center;
}
.hm-hero-in { position: relative; z-index: 1; max-width: 940px; }

/* بافتِ برگ. تزئینی و بی‌نقش در معنا، پس در لایه‌ی جدا و ‎aria-hidden‎
   می‌نشیند تا با متن قاطی نشود. شفافیت عمداً خیلی کم است: باید حس شود که
   سطح تخت نیست، نه اینکه دیده شود. */
.hm-art {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
}
.hm-art svg { position: absolute; opacity: .05; }
.hm-art .l1 {
  width: clamp(260px, 32vw, 480px);
  inset-block-start: -12%;
  inset-inline-start: -7%;
  transform: rotate(-16deg);
}
.hm-art .l2 {
  width: clamp(170px, 21vw, 300px);
  inset-block-end: -20%;
  inset-inline-end: -4%;
  transform: rotate(22deg);
}

.hm-hero .ar-eyebrow { color: rgba(255, 255, 255, .52); }
.hm-hero .ar-eyebrow-n { color: var(--accent); }

.hm-hero h1 {
  max-width: 19ch;
  margin-inline: auto;
  color: #fff;
  font-size: var(--fs-h1);
  line-height: 1.24;
}
.hm-hero h1 span { color: var(--accent); }

.hm-lead {
  max-width: 56ch;
  margin-block-start: clamp(16px, 2.4vw, 24px);
  margin-inline: auto;
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-lead);
  line-height: 1.95;
}
.hm-lead b { color: #fff; font-weight: 700; }

/* دکمه‌ی دومِ هیرو روی زمینه‌ی تیره است و ‎--line‎ ِ ‎.btn-ghost‎ آن‌جا دیده
   نمی‌شود؛ کادر و متنش سفید می‌شوند. */
.hm-hero .btn-ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); }
.hm-hero .btn-ghost:hover { --btn-bd: var(--accent); --btn-bg: rgba(255, 255, 255, .08); }

/* ردیفِ قول‌ها و نوارِ آمار هر دو قرضی‌اند، ولی این‌جا نمی‌شد همان‌طور که
   بودند گذاشتشان: در لندینگ‌ها ‎.lp-tick‎ آخرین عنصرِ هیروست و خطِ بالایش
   تنها جداکننده است، اما این‌جا زیرش نوارِ آمار هم می‌آید و دو خطِ مویی با
   دو عرضِ متفاوت (۶۸۰px و ۹۴۰px) روی هم می‌افتاد. پس خطِ فهرستِ تیک برداشته
   می‌شود و تنها جداکننده‌ی هیرو، خطِ تمام‌عرضِ بالای آمار می‌ماند.

   ضمناً دو ستونِ ‎1fr 1fr‎ در هیرویِ وسط‌چین یک حفره‌ی خالی وسط می‌ساخت،
   چون طولِ چهار جمله یکی نیست. ستون‌ها ‎auto‎ می‌شوند (به‌اندازه‌ی متنِ خودشان)
   و کلِ بلوک با ‎justify-content‎ وسط می‌آید. ‎flex-wrap‎ این‌جا جواب نداد:
   سه آیتم در سطرِ اول جا می‌شدند و چهارمی تنها می‌ماند. */
.hm-hero .lp-tick {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 9px 30px;
  max-width: none;
  margin-block-start: clamp(20px, 2.8vw, 28px);
  padding-block-start: 0;
  border-block-start: 0;
}
.hm-hero .lp-tick li { color: rgba(255, 255, 255, .74); }
.hm-hero .lp-tick li::before { background: var(--accent); }

.hm-hero .ar-stats {
  margin-block-start: clamp(28px, 3.8vw, 42px);
  border-block-start-color: rgba(255, 255, 255, .16);
}
.hm-hero .ar-stat + .ar-stat { border-inline-start-color: rgba(255, 255, 255, .16); }
.hm-hero .ar-stat dt { color: rgba(255, 255, 255, .5); }
.hm-hero .ar-stat dd { color: #fff; }

@media (max-width: 620px) {
  /* چهار آمار روی موبایل باید ۲×۲ بماند. قاعده‌ی بخش ۷ اولی را تمام‌عرض
     می‌کند (آن‌جا سه آمار است و بی آن، ردیفِ آخر تک می‌ماند)؛ این‌جا با
     چهار آیتم، تمام‌عرض‌کردنِ اولی همان مشکل را برعکس می‌ساخت. */
  .hm-hero .ar-stat:first-child { grid-column: auto; }

  /* قاعده‌ی تک‌ستونیِ ‎.lp-tick‎ در بخش ۱۳ ویژگیِ (۰,۱,۰) دارد و بازنویسیِ
     بالا (۰,۲,۰) از آن قوی‌تر است، پس باید این‌جا دوباره اعلام شود وگرنه
     روی موبایل دو ستون می‌ماند. */
  .hm-hero .lp-tick { grid-template-columns: auto; gap: 9px; }
}

/* ------------------------------------------------- ۱۴.۲) نوارِ اعتماد */
/* یک نوارِ باریک بینِ هیرویِ تیره و خدمات: کجاها کار می‌کنیم.
   پیلِ کرمِ ‎.lp-marks‎ است، نه چیپِ سبزِ ‎.ar-item‎ — چون این‌ها لینک
   نیستند و اگر هم‌شکلِ چیپِ محله بودند، انتظارِ کلیک می‌ساختند. */
.hm-strip {
  padding-block: clamp(16px, 2.4vw, 24px);
  border-block-end: 1px solid var(--line);
}
.hm-strip .lp-marks {
  max-width: 920px;
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

/* ------------------------------------------------- ۱۴.۳) کاغذِ بخش‌ها */
.hm-svc,
.hm-flow,
.hm-say { padding-block: clamp(42px, 6.4vw, 84px); }

.hm-vows {
  padding-block: clamp(42px, 6.4vw, 84px);
  background: var(--cream-50);
  border-block: 1px solid var(--cream-200);
}
/* سرتیترِ بخش خودش مارجینِ پایین دارد؛ مارجینِ بالای نوارِ تعهد روی آن
   جمع می‌شد و فاصله دو برابر می‌افتاد. */
.hm-vows .lp-vow { margin-block-start: 0; }

.hm-work {
  padding-block: clamp(42px, 6.4vw, 84px);
  background: var(--n-25);
  border-block-start: 1px solid var(--line);
}
/* خطِ پایین فقط وقتی لازم است که بخشِ بعدی خودش خط نداشته باشد. بخشِ
   بعدیِ صفحه‌ی اصلی ‎.sv-pick‎ است و خطِ بالای خودش را دارد؛ با هر دو، مرز
   دو خطِ مویی با دو رنگِ نزدیک می‌شد و دولا دیده می‌شد. */
.hm-work:not(:has(+ .sv-pick)) { border-block-end: 1px solid var(--line); }

/* ------------------------------------------------- ۱۴.۴) ردیفِ «بیشتر» */
/* زیرِ شبکه‌ی خدمات و نمونه‌کارها: یک دکمه و یک جمله‌ی توضیح.
   جمله کنارِ دکمه می‌نشیند نه زیرش، تا ردیف یک خط بماند. */
.hm-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-block-start: clamp(24px, 3.4vw, 34px);
}
.hm-more p {
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.8;
}

/* --------------------------------------------------- ۱۴.۵) نقلِ مشتری */
/* کارت نیست. صفحه تا این‌جا چند ردیفِ کارت دارد و یکی دیگر آن را یکنواخت
   می‌کرد؛ این‌جا فقط خطِ بالای هر نقل با یک قطعه‌ی کرم — همان موتیفِ
   نشانگرِ ‎.ar-flow‎ — کارِ جداکردن را می‌کند. */
.hm-say-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(22px, 3vw, 36px);
}

.hm-quote {
  position: relative;
  margin: 0;
  padding-block-start: clamp(19px, 2.4vw, 25px);
  border-block-start: 2px solid var(--line);
  text-align: start;
}
.hm-quote::before {
  content: '';
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  width: 42px;
  height: 2px;
  background: var(--accent);
}

/* ستاره‌ها متنِ تزئینی‌اند و امتیاز به‌صورت متنِ خوانا هم اعلام می‌شود.
   ‎letter-spacing‎ فقط روی همین المان مجاز است چون محتوایش فارسی نیست. */
.hm-stars {
  margin-block-end: 11px;
  color: var(--accent);
  font-size: var(--fs-6);
  line-height: 1;
  letter-spacing: 2px;
}
.hm-stars .off { color: var(--n-300); }

.hm-quote blockquote { margin: 0; }
.hm-quote blockquote p {
  color: var(--n-700);
  font-size: var(--fs-read-sm);
  line-height: 2;
}

.hm-who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-block-start: clamp(14px, 2vw, 18px);
  padding-block-start: clamp(13px, 1.8vw, 16px);
  border-block-start: 1px solid var(--line);
}
.hm-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--g-100);
  color: var(--brand-ink);
  font-size: var(--fs-5);
  font-weight: 800;
}
.hm-av img { width: 100%; height: 100%; object-fit: cover; }
.hm-who-n {
  display: block;
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.6;
}
.hm-who-t {
  display: block;
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: 1.6;
}

/* ------------------------------------------------------- ۱۴.۶) موبایل */
@media (max-width: 620px) {
  .hm-more .btn { width: 100%; justify-content: center; }
  .hm-more p { text-align: center; }
}


/* =========================================================================
   ۱۵) تماس و درباره (نِیم‌اسپیسِ ‎ct-‎)
   =========================================================================
   دو صفحه‌ی کوچک که تقریباً هیچ چیزِ تازه‌ای لازم ندارند:
     • هیرو                → ‎.lp-hero‎ / ‎.lp-lead‎ / ‎.lp-tick‎   (بخش ۱۳)
     • کارتِ تماس و فرم    → ‎.ar-cta‎ / ‎.ar-form‎                (بخش ۷)
     • مراحل               → ‎.ar-flow‎                           (بخش ۷)
     • سؤالات              → ‎.ar-faq‎ / ‎.ar-q‎                    (بخش ۷)
     • متنِ روایت          → ‎.at-body‎ + ‎.gs-*‎                   (بخش ۱۰)
     • نوارِ آمار و تعهد   → ‎.ar-stats‎ / ‎.lp-vow‎                (بخش ۷ و ۱۳)
     • بلوکِ پایانیِ تیره  → ‎.bx-next‎                            (بخش ۹)
   آن‌چه این‌جا اضافه می‌شود: فیلدِ متنِ چندخطی (هیچ فرمِ دیگری تا امروز
   توضیحِ بلند نمی‌گرفت) و ردیف‌های اطلاعاتِ تماس در نیمه‌ی سبزِ کارت.

   ترتیبِ کاغذِ صفحه‌ی تماس:
   هیرو سفید ← کارت سفید (با نیمه‌ی سبز) ← «بعد از ثبت» ‎--n-25‎ ←
   سؤالات کرم ← مناطق سفید ← پایان سبزِ تیره.
   ========================================================================= */

/* ------------------------------------------- ۱۵.۱) متنِ چندخطیِ فرم */
/* ‎.ar-form‎ فقط ‎input‎ را می‌شناخت. مقادیر عیناً از همان قاعده می‌آیند تا
   دو فیلد در یک فرم دو ظاهرِ متفاوت نداشته باشند. */
.ar-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--n-25);
  color: var(--ink);
  font-size: var(--fs-4);
  line-height: 1.9;
  /* افقی تغییرِ اندازه ندهد: از عرضِ ستونِ فرم بیرون می‌زد */
  resize: vertical;
  min-height: 104px;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.ar-form textarea::placeholder { color: var(--n-300); }
.ar-form textarea:focus {
  outline: none;
  border-color: var(--brand-ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--g-100);
}

/* --------------------------------------- ۱۵.۲) ردیف‌های اطلاعاتِ تماس */
/* ایمیل، نشانی و ساعتِ کاری در نیمه‌ی سبزِ کارت. جداکننده با همان ترفندِ
   ‎gap‎ ِ ‎.lp-vow‎ ساخته می‌شود: زمینه‌ی ظرف رنگِ خط است و خانه‌ها روشن‌تر. */
.ct-rows {
  display: grid;
  gap: 1px;
  margin-block-start: clamp(18px, 2.6vw, 26px);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.ct-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .045);
}
.ct-row > svg {
  flex: none;
  margin-block-start: 3px;
  color: var(--accent);
}
.ct-row b {
  display: block;
  color: rgba(255, 255, 255, .5);
  font-size: var(--fs-2);
  font-weight: 700;
}
.ct-row span {
  display: block;
  margin-block-start: 2px;
  color: #fff;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.85;
}
.ct-row a { transition: color var(--fast) var(--ease); }
.ct-row a:hover { color: var(--accent); }
/* نشانیِ ایمیل و لینک‌های لاتین وسطِ متنِ راست‌به‌چپ می‌شکنند */
.ct-row .ltr { direction: ltr; text-align: start; }

/* ------------------------------------------------- ۱۵.۳) «بعد از ثبت» */
/* بینِ کارتِ سفید و سؤالاتِ کرم می‌نشیند، پس کاغذش خاکستریِ بسیار روشن است. */
.ct-next {
  padding-block: clamp(40px, 6vw, 78px);
  background: var(--n-25);
  border-block: 1px solid var(--line);
}

/* ----------------------------------------- ۱۵.۴) نوارِ آمارِ «درباره» */
/* در هیرویِ صفحه‌ی اصلی، نوارِ آمار روی سطحِ تیره است. این‌جا روی کاغذِ
   کرمِ یک بخشِ مستقل می‌نشیند و خطِ بالایش باید تیره‌تر از ‎--line‎ باشد
   وگرنه روی کرم دیده نمی‌شود — همان کاری که ‎.lp-flow‎ با مراحل کرد. */
.ct-nums {
  padding-block: clamp(38px, 5.6vw, 72px);
  background: var(--cream-50);
  border-block: 1px solid var(--cream-200);
  text-align: center;
}
.ct-nums .ar-stats {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}
.ct-nums .ar-stat + .ar-stat { border-inline-start-color: var(--cream-200); }


/* =========================================================================
   ۱۶) نمونه‌کارها (نِیم‌اسپیسِ ‎pf-‎)
   =========================================================================
   فهرستِ نمونه‌کارها هیچ چیزِ تازه‌ای لازم ندارد: دقیقاً همان استخوان‌بندیِ
   فهرستِ وبلاگ است (هیرو، چیپِ فیلتر، کارتِ شاخص، شبکه، صفحه‌بندی) با
   داده‌ی ‎Project‎ به‌جای ‎Blog‎ — و همین یکسانی عمدی است: کاربر در هر دو
   بخش یک الگوی آشنا می‌بیند.

   صفحه‌ی خودِ پروژه هم قرضی است: کاور ‎.at-cover‎، متن ‎.at-body‎، گالری
   ‎.sd-gal‎، تگ ‎.at-tag‎، مرتبط‌ها ‎.lp-rel‎ + ‎.bx-card‎.
   تنها دو چیز این‌جا اضافه می‌شود: جدولِ مشخصاتِ پروژه و جانشینِ کاورِ
   بی‌عکس.
   ========================================================================= */

/* ------------------------------------------------ ۱۶.۱) مشخصاتِ پروژه */
/* نسخه‌ی اول شبکه‌ای بود (‎auto-fill‎ + ترفندِ ‎gap: 1px‎). دو ایراد داشت:
   تعدادِ مشخصات هیچ‌وقت مضربِ تعدادِ ستون‌ها نیست، پس خانه‌ی آخر خالی
   می‌ماند و رنگِ زمینه‌ی خطوط از زیرش بیرون می‌زد؛ و چون ستون‌ها هم‌عرض
   بودند، «کرج» همان‌قدر جا می‌گرفت که «چمن‌زنی، هرس، سمپاشی، کوددهی» —
   یکی خالی می‌ماند و دیگری دوخطی می‌شکست.

   حالا یک «شناسنامه»ی تک‌ستونی است: برچسب راست، مقدار چپ، با خطِ مویی
   میانِ ردیف‌ها. با هر تعداد مشخصه و هر طولِ متنی درست می‌ماند و مقدارها
   روی یک ستونِ عمودی تراز می‌شوند. */
.pf-facts {
  margin-block: 1.9em;
  padding: 2px clamp(17px, 2.3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-1);
}

/* سرِ کارت: یک برچسبِ ریز با نقطه‌ی برنزی، هم‌خانواده‌ی ‎.ar-eyebrow‎ */
.pf-facts-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 14px 12px;
  border-block-end: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
}
.pf-facts-h::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.at-body .pf-facts-h { margin-block: 0; }

.pf-facts dl { display: grid; gap: 0; margin: 0; }
.pf-facts dl > div {
  display: grid;
  grid-template-columns: minmax(84px, 23%) 1fr;
  gap: 5px 18px;
  align-items: baseline;
  padding-block: 13px;
}
.pf-facts dl > div + div { border-block-start: 1px solid var(--line); }

.pf-facts dt {
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: 600;
}
.pf-facts dd {
  margin: 0;
  color: var(--g-950);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.8;
}

/* در عرضِ کم، ستونِ برچسب دیگر جا نمی‌شود و مقدار سه‌خطی می‌شکند؛
   برچسب می‌رود بالای مقدار. */
@media (max-width: 540px) {
  .pf-facts dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------- ۱۶.۲) جانشینِ کاور */
/* پروژه‌ی بی‌عکس نباید صفحه را بی‌سر بگذارد. همان گرادیانِ سبز↔کرمِ
   کارت‌هاست، فقط در ابعادِ کاور. */
.pf-cover-fb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--g-100), var(--cream-100));
}
.pf-cover-fb svg {
  width: 15%;
  max-width: 118px;
  color: var(--g-400);
  opacity: .5;
}

/* -------------------------------------------------- ۱۶.۳) نوارِ متا */
/* دسته و تاریخِ پروژه زیرِ لیدِ هیرو. ‎.bx-meta‎ ِ کارت‌ها همین کار را
   می‌کند ولی چپ‌چین است؛ هیرو وسط‌چین است. */
.pf-meta { justify-content: center; margin-block: clamp(14px, 2vw, 20px) 0; }


/* ══════════════════════════════════════════════════════════════════════
   ۱۷) نظرهای مقاله
   ══════════════════════════════════════════════════════════════════════
   روی زمینه‌ی کرم می‌نشیند تا از بدنه‌ی مقاله جدا دیده شود — گفت‌وگو بخشِ
   دیگری از صفحه است، نه ادامه‌ی متن. کارت‌ها عمداً بدونِ سایه و با خطِ
   نازک‌اند: در فهرستِ بلند، سایه روی سایه صفحه را سنگین می‌کند. */
.cm {
  padding-block: clamp(40px, 6vw, 76px);
  background: var(--cream-50);
  border-block-start: 1px solid var(--cream-200);
}

.cm-in { max-width: var(--at-w-wide); }

.cm-hd { margin-block-end: clamp(20px, 3vw, 30px); }
.cm-hd h2 { margin-block: 6px 8px; }
.cm-hd-x { color: var(--muted); max-width: 60ch; }

/* ------------------------------------------------ ۱۷.۱) پیامِ نتیجه */
.cm-flash {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-block-end: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.cm-flash b { display: block; margin-block-end: 2px; }
.cm-flash p { margin: 0; color: var(--muted); font-size: var(--fs-4); }
.cm-flash-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); }

.cm-flash-ok .cm-flash-i { background: var(--g-100); color: var(--g-800); }
.cm-flash-err { border-color: #E9C6A8; }
.cm-flash-err .cm-flash-i { background: #FDEFE2; color: #9A5B22; }

/* ------------------------------------------------ ۱۷.۲) فهرستِ نظرها */
.cm-list { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: grid; gap: 14px; }
.cm-item > .cm-card { margin: 0; }

.cm-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

/* پاسخِ تیم: نوارِ سبزِ کنار، تا در فهرستِ بلند فوری از نظرِ کاربر جدا شود. */
.cm-card.is-team {
  background: var(--g-50);
  border-color: var(--g-200);
  box-shadow: inset 3px 0 0 var(--g-700);
}

.cm-av {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--g-100);
  color: var(--g-800);
  font-weight: 800;
  font-size: var(--fs-6);
  line-height: 1;
}
.cm-card.is-team .cm-av { background: var(--g-900); color: #fff; }

.cm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 6px;
  font-size: var(--fs-3);
}
.cm-meta b { font-size: var(--fs-4); }
.cm-meta time { color: var(--muted); }

.cm-badge {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--g-900);
  color: #fff;
  font-size: var(--fs-2);
  font-weight: 700;
}

/* ‎pre-line‎ تا خطوطی که کاربر با Enter جدا کرده حفظ شوند. متن با Razor
   اسکیپ می‌شود، پس HTMLِ داخلش هیچ‌وقت اجرا نمی‌شود.

   اندازه از **مقیاسِ متنِ خواندنی** برداشته می‌شود نه نردبانِ رابطِ کاربری:
   نظر، پاراگرافِ نثرِ فارسی است نه برچسبِ رابط. پیش‌تر ‎font-size‎ نداشت و
   ۱۵px ِ ‎body‎ را ارث می‌برد که یک پله زیرِ کوچک‌ترین پله‌ی متنِ خواندنی بود.
   ‎--fs-read-sm‎ (۱۶) درست است و نه ‎--fs-read‎ (۱۸)، چون نظر باید یک پله
   فرعی‌تر از خودِ مقاله دیده شود. */
.cm-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--fs-read-sm);
  line-height: 1.95;
}

.cm-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 10px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.cm-reply-btn:hover { color: var(--g-800); border-color: var(--g-200); background: var(--g-50); }

/* پاسخ‌ها: تورفتگیِ منطقی (‎margin-inline-start‎) تا در RTL هم درست بیفتد. */
.cm-kids {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  margin-inline-start: clamp(16px, 4vw, 42px);
  border-inline-start: 2px solid var(--g-100);
  padding-inline-start: clamp(10px, 2vw, 16px);
}
.cm-card-sm { padding: 13px 15px; grid-template-columns: 34px 1fr; }
.cm-card-sm .cm-av { width: 34px; height: 34px; font-size: var(--fs-5); }

/* ------------------------------------------------ ۱۷.۳) فرم */
.cm-form-wrap {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  scroll-margin-top: 90px;
}
.cm-form-h { margin: 0 0 14px; }

.cm-replying {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--g-50);
  border: 1px solid var(--g-200);
  font-size: var(--fs-3);
}
.cm-replying-x {
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--g-800);
  font: inherit;
  font-size: var(--fs-3);
  text-decoration: underline;
  cursor: pointer;
}

.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .cm-row { grid-template-columns: 1fr; } }

.cm-fld { position: relative; display: grid; gap: 6px; margin-block-end: 12px; }
.cm-fld label { font-size: var(--fs-3); font-weight: 700; }
.cm-fld label i { color: var(--muted); font-style: normal; font-weight: 400; }

.cm-fld input,
.cm-fld textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-5);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

/* کادرِ متن یک پله بالاتر از ورودی‌های تک‌خطی: این‌جا کاربر چند خط فارسی تایپ
   می‌کند و ۱۴px برای نوشتن (نه خواندن) کوچک است. هم‌اندازه‌ی ‎.cm-text‎ هم
   نمی‌شود چون نوشتن و خواندن دو کارند و کادر نباید از خودِ نظرِ منتشرشده
   درشت‌تر دیده شود. */
.cm-fld textarea {
  resize: vertical;
  min-height: 130px;
  font-size: var(--fs-read-sm);
  line-height: 1.95;
}

.cm-fld input:focus,
.cm-fld textarea:focus {
  outline: 0;
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px var(--g-100);
}
.cm-fld input.err,
.cm-fld textarea.err { border-color: #C9603A; }

.cm-count {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 12px;
  color: var(--muted);
  font-size: var(--fs-2);
  pointer-events: none;
}

.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cm-note { flex: 1 1 240px; margin: 0; color: var(--muted); font-size: var(--fs-3); line-height: 1.7; }

/* هانی‌پات: از دید و از جریانِ صفحه خارج، ولی برای رباتی که DOM را می‌خواند
   یک ‎input‎ ِ عادی. ‎display:none‎ عمداً استفاده نشده چون بعضی ربات‌ها آن را رد می‌کنند. */
.cm-hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* شمارنده‌ی نظر در نوارِ متای کارت. */
.bx-cmt { display: inline-flex; align-items: center; gap: 4px; }
.bx-cmt svg { opacity: .75; }

/* لنگرِ «n نظر» در نوارِ متای سربرگِ مقاله. */
.at-cmt-jump { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.at-cmt-jump:hover { color: var(--g-800); }
.at-cmt-jump svg { opacity: .75; }