/* ──────────────────────────────────────────────────────────────────────
   چیدمان صفحه‌ی اصلی
   ────────────────────────────────────────────────────────────────────── */

/* ── هدر ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 12px;
  transition: padding var(--t-mid) var(--ease-calm);
}
.topbar.stuck { padding-block: 8px; }

.topbar .bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 9px 9px 18px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition:
    box-shadow var(--t-mid) var(--ease-calm),
    background var(--t-theme) var(--ease-calm);
}
.topbar.stuck .bar {
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 18px 44px -26px var(--glass-shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-inline-start: 8px;
}
/* ⚠ لوگو با mask می‌آید نه <img>: فایل اصلی fill مشکی هارد‌کد داشت و
   روی تم تیره کاملاً نامرئی می‌شد. ماسک، شکل را از فایل می‌گیرد و رنگ
   را از `background` — پس با تم عوض می‌شود، بدون اینکه ۷ کیلوبایت مسیر
   داخل HTML تکرار شود. */
.logo {
  -webkit-mask: url("/assets/img/logo.svg") center / contain no-repeat;
  mask: url("/assets/img/logo.svg") center / contain no-repeat;
  background: currentColor;
  flex: none;
}
.brand .logo {
  width: 60px;
  height: 45px;
  color: var(--brand-600);
  transition: color var(--t-theme) var(--ease-calm);
}
.brand .txt { display: grid; line-height: 1.3; }
.brand .n { font-size: 15px; font-variation-settings: "wght" 600, "KASH" 2; }
.brand .r { font-size: 11.5px; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease-calm),
              background var(--t-fast) var(--ease-calm);
}
.nav a:hover { color: var(--brand-600); background: var(--brand-050); }
:root[data-theme="dark"] .nav a:hover { background: rgba(143, 211, 180, 0.08); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav a:hover { background: rgba(143, 211, 180, 0.08); }
}
.nav a[aria-current="page"] {
  color: var(--brand-600);
  font-variation-settings: "wght" 500, "KASH" 2;
}

.tools { display: flex; align-items: center; gap: 8px; flex: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast) var(--ease-glide);
}
.icon-btn:hover { color: var(--brand-600); border-color: var(--brand-400); }
.icon-btn:active { transform: scale(0.93); }
.icon-btn .ic { width: 19px; height: 19px; }

/* آیکون تم: ماه در تم روشن، خورشید در تم تیره */
.icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: block; }
:root[data-theme="dark"] .icon-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .sun { display: block; }
  :root:not([data-theme="light"]) .icon-btn .moon { display: none; }
}

.burger { display: none; }

/* کشوی موبایل */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-calm), visibility var(--t-mid);
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer nav { display: grid; gap: 6px; text-align: center; }
.drawer nav a {
  padding: 14px 40px;
  font-size: 20px;
  border-radius: var(--r-md);
  color: var(--fg);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-glide), transform 0.5s var(--ease-glide),
              background var(--t-fast);
}
.drawer.open nav a { opacity: 1; transform: none; }
.drawer nav a:nth-child(1) { transition-delay: 0.05s; }
.drawer nav a:nth-child(2) { transition-delay: 0.1s; }
.drawer nav a:nth-child(3) { transition-delay: 0.15s; }
.drawer nav a:nth-child(4) { transition-delay: 0.2s; }
.drawer nav a:nth-child(5) { transition-delay: 0.25s; }
.drawer nav a:nth-child(6) { transition-delay: 0.3s; }
.drawer nav a:hover { background: var(--glass); }
.drawer .close { position: absolute; top: 22px; left: 22px; }

/* ── قهرمان ──────────────────────────────────────────────────────── */

.hero {
  min-height: min(86svh, 820px);
  display: grid;
  align-items: center;
  padding-block: clamp(18px, 3vh, 44px) clamp(48px, 8vh, 96px);
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px;
  align-items: center;
}
/* ستون دوم عمداً خالی است: جای نفس‌کشیدنِ صحنه‌ی سه‌بعدی. سایت روانشناس
   با فضای خالی آرام می‌شود، نه با پرکردن هر پیکسل. */
.hero .stage { min-height: 320px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 13px;
  color: var(--muted);
}
.eyebrow b {
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-600);
  color: #fff;
  font-size: 12px;
  font-variation-settings: "wght" 500, "KASH" 2;
}

.hero h1 { margin-bottom: 20px; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  max-width: 46ch;
  margin-bottom: 32px;
  font-size: clamp(15.5px, 1.1vw, 18px);
  color: var(--muted);
}
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero .assure { display: flex; flex-wrap: wrap; gap: 8px; }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  pointer-events: none;
}
.scroll-cue span {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--brand-400), transparent);
  animation: cue 2.4s var(--ease-calm) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* ── بخش‌های عمومی ───────────────────────────────────────────────── */

.sec { padding-block: clamp(64px, 9vh, 120px); }

/* ⚠ تیترها روی شاخ و برگ می‌افتند و خوانایی‌شان می‌رود. راهِ ساده —
   یک پس‌زمینه‌ی نیمه‌شفاف — رد می‌اندازد: یک مستطیلِ کدر وسطِ نقاشی.
   به‌جایش یک هاله‌ی بیضویِ محو پشتِ متن می‌نشیند که در هیچ لبه‌ای خط
   ندارد، پس دیده نمی‌شود ولی متن را از برگ‌ها جدا می‌کند.

   ⚠ با `::before` می‌آید نه با `padding`، تا یک پیکسل هم چیدمان جابه‌جا
     نشود. `z-index: 0` روی خودِ سرتیتر یک بستر می‌سازد و فرزندها با
     `z-index: 1` رویش می‌نشینند؛ چون `.page` بعد از `#scene` است، کلِ
     این بستر بالای صحنه می‌ماند. */
.sec-head {
  max-width: 62ch;
  margin-bottom: clamp(32px, 4vh, 52px);
  position: relative;
  z-index: 0;
}
.sec-head::before {
  content: "";
  position: absolute;
  /* ⚠ هاله از دو طرف بیرون می‌زند، و روی صفحه‌ی باریک همین بیرون‌زدگی
     از لبه‌ی قاب رد می‌شد و سند را ۴۲۰ پیکسل پهنا می‌کرد (به‌ازای ۳۹۰) —
     یعنی همان اسکرولِ افقیِ موبایل. `max()` با عددهای منفی یعنی
     «هرگز بیشتر از فاصله‌ی حاشیه‌ی صفحه بیرون نزن»: روی دسکتاپ ۴۶
     پیکسل می‌ماند، روی موبایل دقیقاً تا لبه‌ی قاب می‌رسد و نه جلوتر. */
  inset-block: -30px -22px;
  inset-inline: max(-46px, calc(-1 * var(--gutter)));
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    49% 46% at 50% 48%,
    var(--halo-1) 0%,
    var(--halo-1) 36%,
    var(--halo-2) 63%,
    transparent 87%
  );
}
.sec-head > * { position: relative; z-index: 1; }
.sec-head .kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brand-600);
  font-variation-settings: "wght" 500, "KASH" 2;
}
.sec-head p { margin-top: 14px; color: var(--muted); }
.sec-head.center { margin-inline: auto; text-align: center; }

/* ── نوار اعتماد ─────────────────────────────────────────────────── */

.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 6px;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.trust li { padding: 24px 18px; text-align: center; }
.trust .num {
  display: block;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  color: var(--brand-600);
  font-variation-settings: "wght" 600, "KASH" 2;
  font-variant-numeric: tabular-nums;
}
.trust .lbl { font-size: 13.5px; color: var(--muted); }
/* جداکننده‌ها به‌جای border تا در RTL و در آخرین ستون دردسر نسازند */
.trust li + li { box-shadow: 1px 0 0 var(--line); }

/* ── معرفی ───────────────────────────────────────────────────────── */

.intro .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.intro .body p + p { margin-top: 16px; }
.intro .body p { color: var(--muted); }
.intro .body .first {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg);
  line-height: 1.75;
}
.intro .card { padding: 30px; border-radius: var(--r-xl); }
.intro .card dl { display: grid; gap: 16px; margin: 0; }
.intro .card dt {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.intro .card dd {
  margin: 0;
  font-size: 15.5px;
  font-variation-settings: "wght" 500, "KASH" 2;
}
.intro .card dd small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  font-variation-settings: "wght" 400, "KASH" 2;
}

/* ── خدمات ───────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.card-svc {
  display: block;
  padding: 30px 28px 26px;
  border-radius: var(--r-xl);
}
.card-svc:hover { transform: translateY(-4px); }
.card-svc .ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--brand-100), var(--brand-200));
  color: var(--brand-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 10px 22px -14px var(--brand-600);
  transition: background var(--t-theme) var(--ease-calm);
}
:root[data-theme="dark"] .card-svc .ico {
  background: linear-gradient(150deg, rgba(79, 184, 139, 0.22), rgba(79, 184, 139, 0.08));
  color: var(--brand-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-svc .ico {
    background: linear-gradient(150deg, rgba(79, 184, 139, 0.22), rgba(79, 184, 139, 0.08));
    color: var(--brand-300);
  }
}
.card-svc .ico .ic { width: 26px; height: 26px; }
.card-svc h3 { margin-bottom: 10px; }
.card-svc p { font-size: 14.5px; color: var(--muted); }
.card-svc .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--brand-600);
  font-variation-settings: "wght" 500, "KASH" 2;
}
.card-svc .more .ic { width: 15px; height: 15px; transition: transform var(--t-fast); }
.card-svc:hover .more .ic { transform: translateX(-4px); }

/* ── رویکرد درمانی ───────────────────────────────────────────────── */

.approach { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.approach li { padding: 26px 24px; border-radius: var(--r-lg); }
.approach .tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 12px;
  letter-spacing: 0.04em;
}
:root[data-theme="dark"] .approach .tag {
  background: rgba(79, 184, 139, 0.16); color: var(--brand-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .approach .tag {
    background: rgba(79, 184, 139, 0.16); color: var(--brand-300);
  }
}
.approach h3 { font-size: 18px; margin-bottom: 8px; }
.approach p { font-size: 14px; color: var(--muted); }

/* ── درباره‌ی من / تایم‌لاین ──────────────────────────────────────── */

.about .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ⚠ سرتیتر تا وسطِ صفحه می‌آید و همان‌جا می‌ماند تا تایم‌لاین تمام شود،
   بعد با هم پایین می‌روند.

   دو نکته که بدونشان کار نمی‌کند:
   ۱. بستر (containing block) یک آیتمِ گرید، **ناحیه‌ی گرید**ِ آن است —
      یعنی به بلندیِ ردیف، یعنی به بلندیِ خودِ تایم‌لاین. پس چسبندگی
      دقیقاً همان‌جا که خواسته شده تمام می‌شود.
   ۲. `top: 50vh` نقطه‌ی چسبیدن را می‌دهد و `translateY(-50%)` وسط‌چین
      می‌کند؛ ارتفاعِ سرتیتر را لازم نیست بدانیم. */
@media (min-width: 981px) {
  .about .sec-head {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    align-self: start;
    margin-bottom: 0;
  }
}
.tl {
  --rail: clamp(27px, 3vw, 37px);   /* فاصله‌ی خطِ عمودی از لبه‌ی کارت */
  --rail-gap: 26px;                 /* فاصله‌ی متن از خط */
  --dot: 12px;
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  padding-inline-start: calc(var(--rail) + var(--rail-gap));
  border-radius: var(--r-xl);
}
/* ⚠ خط عمودی با inset-inline-start می‌آید نه left، وگرنه در RTL سمت
     اشتباه می‌افتد و از نقطه‌ها جدا می‌شود. */
.tl::before {
  content: "";
  position: absolute;
  inset-block: clamp(30px, 3.4vw, 42px);
  inset-inline-start: var(--rail);
  width: 2px;
  background: linear-gradient(var(--brand-300), var(--brand-100));
}
.tl li { position: relative; padding-bottom: 26px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: "";
  position: absolute;
  /* مرکزِ نقطه = مرکزِ خط:  (رخنه − نصفِ نقطه) + ۱ پیکسل نصفِ پهنای خط */
  inset-inline-start: calc(1px - var(--rail-gap) - var(--dot) / 2);
  top: 9px;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--brand-500);
}
.tl .yr {
  font-size: 12.5px;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}
.tl h4 { margin: 2px 0 4px; }
.tl p { font-size: 14px; color: var(--muted); }

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

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.steps li { padding: 30px 26px; border-radius: var(--r-xl); }
.steps .n {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: 17px;
  font-variation-settings: "wght" 500, "KASH" 2;
  box-shadow: 0 10px 22px -12px var(--brand-600);
}
.steps h3 { margin-bottom: 9px; font-size: 19px; }
.steps p { font-size: 14.5px; color: var(--muted); }

/* ── سوالات متداول ───────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.faq details {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-variation-settings: "wght" 500, "KASH" 2;
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-600); }
.faq summary .ic {
  width: 20px; height: 20px;
  margin-inline-start: auto;
  flex: none;
  color: var(--brand-500);
  transition: transform var(--t-mid) var(--ease-glide);
}
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .ans { padding: 0 24px 22px; color: var(--muted); font-size: 14.8px; }

/* ── رزرو نوبت ───────────────────────────────────────────────────── */

.book .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.book .form { padding: clamp(26px, 3vw, 38px); border-radius: var(--r-xl); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13.5px; color: var(--muted); }
.field label .req { color: var(--bloom-500); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  color: var(--fg);
  font-size: 15px;
  /* ⚠ فیلدها عمداً رقم فارسی نمی‌گیرند: کاربر با کیبورد لاتین شماره
     می‌زند و دیدن رقم متفاوت از آنچه تایپ کرده گیج‌کننده است. */
  font-feature-settings: normal;
  transition: border-color var(--t-fast), background var(--t-theme);
}
.field textarea { min-height: 108px; resize: vertical; line-height: 1.75; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand-400); }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 0.65; }
.field .err { font-size: 12.5px; color: var(--bloom-500); min-height: 0; }
.field.bad input,
.field.bad select,
.field.bad textarea { border-color: var(--bloom-500); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two .field { margin-bottom: 0; }

/* تله‌ی ربات پنل: میدان `website`. باید از دید و از فوکوس هر دو خارج
   باشد؛ فقط display:none برای بعضی ربات‌ها کافی نیست ولی برای
   صفحه‌خوان‌ها اضافه‌کردن aria-hidden + tabindex=-1 لازم است. */
/* ⚠ `left: -9999px` — روشِ رایج — سندی به پهنای ۱۰۵۶۳ پیکسل می‌ساخت و
   روی موبایل کاربر می‌توانست کلِ صفحه را به چپ بکشد. `overflow-x` هم
   جلویش را نمی‌گرفت. این روش (بریدن با clip-path) هیچ سرریزی نمی‌سازد
   و همچنان از دید و از فوکوس خارج است. */
.hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0;
  pointer-events: none;
}

.form-note { margin-top: 14px; font-size: 12.8px; color: var(--muted); }
.form-msg {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.ok { background: var(--brand-100); color: var(--brand-800); }
.form-msg.no { background: rgba(217, 127, 156, 0.14); color: var(--bloom-500); }
:root[data-theme="dark"] .form-msg.ok {
  background: rgba(79, 184, 139, 0.16); color: var(--brand-300);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-msg.ok {
    background: rgba(79, 184, 139, 0.16); color: var(--brand-300);
  }
}

.book .side { display: grid; gap: 16px; }
.contact-card { padding: 26px; border-radius: var(--r-xl); }
.contact-card h3 { margin-bottom: 18px; font-size: 19px; }
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
}
.contact-row + .contact-row { border-top: 1px solid var(--line); }
.contact-row .ic { width: 20px; height: 20px; flex: none; color: var(--brand-500); margin-top: 4px; }
.contact-row .k { font-size: 12.5px; color: var(--muted); }
.contact-row .v { font-size: 15px; font-variation-settings: "wght" 500, "KASH" 2; }
.contact-row .v[dir="ltr"] { display: inline-block; font-feature-settings: normal; }

/* ── فراخوان پایانی ──────────────────────────────────────────────── */

.finale { text-align: center; padding-block: clamp(80px, 12vh, 150px); }
.finale .box {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(38px, 5vw, 64px) clamp(26px, 4vw, 56px);
  border-radius: var(--r-xl);
}
.finale p { margin: 16px auto 30px; max-width: 52ch; color: var(--muted); }
.finale .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── فوتر ────────────────────────────────────────────────────────── */

.site-footer { padding-block: 0 30px; }
.site-footer .box {
  padding: clamp(30px, 4vw, 48px);
  border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-md);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.foot-grid h4 { margin-bottom: 14px; font-size: 14.5px; }
.foot-grid p { font-size: 14px; color: var(--muted); }
.foot-grid li + li { margin-top: 9px; }
.foot-grid a { font-size: 14px; color: var(--muted); transition: color var(--t-fast); }
.foot-grid a:hover { color: var(--brand-600); }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.foot-brand .logo { width: 44px; height: 34px; color: var(--brand-600); }

.disclaimer {
  margin-top: 24px;
  padding: 15px 18px;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  font-size: 12.8px;
  color: var(--muted);
  line-height: 1.8;
}
:root[data-theme="dark"] .disclaimer { background: rgba(143, 211, 180, 0.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .disclaimer { background: rgba(143, 211, 180, 0.06); }
}

.copy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  margin-top: 22px;
  font-size: 12.8px;
  color: var(--muted);
}

/* ── ریسپانسیو ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: grid; }
  /* ⚠ با پنهان‌شدنِ `.nav` فقط دو آیتم در نوار می‌ماند و هر دو به سمتِ
     شروع (راست) جمع می‌شوند؛ چند پیکسل خالی سمت چپ می‌ماند و نوار
     نامتوازن دیده می‌شود. `space-between` فاصله را می‌برد وسط. */
  .topbar .bar { justify-content: space-between; }
  .hero .wrap { grid-template-columns: 1fr; }

  /* ⚠ روی موبایل، **عکس اول** می‌آید و بعد متن. در HTML ترتیب برعکس
     است (متن اول) چون روی دسکتاپ ستونِ راست باید متن باشد؛ اینجا با
     `order` جابه‌جا می‌شود نه با دستکاریِ مارک‌آپ، تا ترتیبِ منطقیِ
     سند برای صفحه‌خوان و سئو دست‌نخورده بماند. */
  .hero .stage { display: block; order: -1; min-height: 0; margin-bottom: 6px; }
  .hero .win { max-width: 440px; }
  /* ⚠ حاشیه‌ی افقیِ کادرِ پرواز پیکسلی است (نه درصدی)، پس روی موبایل
     هم سرریز نمی‌کند و پروانه‌ها اینجا هم می‌مانند. */
  .win-flock { inset: -22% -4px; }

  /* همه‌چیزِ هیرو وسط‌چین */
  .hero .lead { text-align: center; }
  .hero .cta,
  .hero .assure { justify-content: center; }
  /* ⚠ فاصله‌ی هیرو از نوار، جمعِ دو چیز است: پدینگِ پایینِ خودِ
     `.topbar` و پدینگِ بالای `.hero`. اندازه‌گیری: ۱۲ + ۳۰ = ۴۲
     پیکسل. برای رسیدن به ۱۰ پیکسل، پدینگِ هیرو صفر می‌شود و پدینگِ
     پایینِ نوار روی ۱۰ می‌نشیند. */
  .topbar { padding-block: 10px; }
  .hero {
    min-height: auto;
    align-items: start;
    padding-block: 0 60px;
  }
  .intro .wrap,
  .about .wrap,
  .book .wrap { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li:nth-child(2n) { box-shadow: none; }
  .trust li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; --glass-blur: 16px; }
  /* ⚠ در ۳۹۰ پیکسل، نوارِ ابزار ۹ پیکسل از لبه بیرون می‌زد (اندازه‌گیری
     شده) و دکمه‌ی رزرو بریده می‌شد. پدینگ و اندازه‌ها کوچک می‌شوند تا
     هر سه کنترل جا شوند. */
  .topbar .bar { padding: 7px 8px; gap: 8px; }
  .brand .logo { width: 50px; height: 45px; }
  .tools { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; }
  .topbar .tools .btn { min-height: 40px; padding: 0 15px; font-size: 14px; }
  .brand .r { display: none; }
  .two { grid-template-columns: 1fr; }
  .two .field:first-child { margin-bottom: 16px; }

  /* ⚠ دو دکمه‌ی هیرو باید در **یک** خط جا شوند. اندازه‌گیری در ۳۹۰
     پیکسل: ۱۹۱ + ۲۰۷ + ۱۲ فاصله = ۴۱۰، در حالی که فقط ۳۵۸ جا هست.
     پدینگ و اندازه‌ی قلم کم می‌شوند تا مجموع زیر ۳۵۸ بیاید. */
  .hero .cta { flex-wrap: nowrap; gap: 10px; }
  .hero .cta .btn {
    padding: 0 13px;
    font-size: 14.2px;
    gap: 7px;
    white-space: nowrap;
  }
  .hero .cta .btn .ic { width: 17px; height: 17px; }
  .trust { grid-template-columns: 1fr; }
  .trust li { box-shadow: none !important; }
  .trust li + li { border-top: 1px solid var(--line); }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .copy { justify-content: center; text-align: center; }
  .scroll-cue { display: none; }
}

/* ── نظرهای مراجعان ──────────────────────────────────────────────
   ابزارک از پنل می‌آید و CSS خودش را در زمان اجرا به `<head>` اضافه
   می‌کند — یعنی **بعد از** این فایل. پس با وزنِ برابر همیشه آن برنده
   می‌شد؛ هر قاعده اینجا زیر `#comments` قید خورده تا بالاتر بنشیند.

   ⚠ رنگ‌های ابزارک آبیِ ثابت‌اند (`#2E75B6`) چون برای سایت دیگری نوشته
     شده. اینجا به توکن‌های همین سایت وصل می‌شوند تا با بقیه یکی باشد. */

.cmt-wrap {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--r-xl);
}
.cmt-noscript { color: var(--muted); font-size: 14px; }

#comments .alefc { margin: 0; }
#comments .alefc-h b { font-variation-settings: "wght" 600, "KASH" 2; }
#comments .alefc-i { border-top-color: var(--line); }
#comments .alefc-k { border-inline-start-color: var(--line); }
#comments .alefc-nm { font-variation-settings: "wght" 600, "KASH" 2; }
#comments .alefc-bd { background: var(--brand-600); }
#comments .alefc-tx { color: var(--fg); }

/* ⚠ ابزارک به فرم `max-width:680px` می‌دهد ولی حاشیه‌ی خودکار نه. داخل
   کارتِ ۷۵۲پیکسلی، در RTL به لبه‌ی راست می‌چسبید و ۷۲ پیکسل فاصله سمت
   چپ می‌ماند — یعنی فرم وسط نبود (اندازه‌گیری: کارت ۳۱۰..۱۱۳۰، فرم
   ۴۱۵..۱۰۹۵). */
#comments .alefc-f { margin-inline: auto; }

#comments .alefc-f input,
#comments .alefc-f textarea {
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  color: var(--fg);
  font-size: 15px;
}
#comments .alefc-f textarea { min-height: 128px; }
#comments .alefc-f input:focus,
#comments .alefc-f textarea:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
  border-color: transparent;
}
#comments .alefc-f label { color: var(--muted); }

/* دقیقاً همان دکمه‌ی اصلی سایت — گرادیان، برجستگی داخلی، سایه و پرشِ
   هاور. بدون این‌ها فقط رنگش سبز بود، ولی جنسش با بقیه‌ی دکمه‌ها یکی نبود. */
#comments .alefc-s {
  min-height: 50px;
  padding: 0 30px;
  border-radius: var(--r-pill);
  background: linear-gradient(155deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-variation-settings: "wght" 500, "KASH" 2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 26px -12px var(--brand-600);
  transition: box-shadow var(--t-mid) var(--ease-calm),
              transform var(--t-fast) var(--ease-glide);
}
#comments .alefc-s:hover {
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 16px 34px -12px var(--brand-600);
  transform: translateY(-2px);
}
#comments .alefc-s:active { transform: translateY(1px) scale(0.985); }
#comments .alefc-s[disabled] { transform: none; opacity: 0.55; }
#comments .alefc-ok { background: var(--brand-100); color: var(--brand-800); }

/* ⚠ همان تله‌ی `left:-9999px` که در فرم رزرو، سند را ۱۰۵۶۳ پیکسل پهنا
   می‌کرد و روی موبایل اسکرول افقی می‌داد. ابزارک نسخه‌ی خودش را دارد؛
   اینجا هم با همان روشِ بی‌سرریز خنثی می‌شود. */
#comments .alefc-hp {
  position: absolute !important;
  left: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* ── پنجره‌ی هیرو و پروانه‌ها ─────────────────────────────────────
   ⚠ نورِ داخلِ پنجره در خودِ فایلِ تصویر پخته شده، نه با CSS.
     فایل **WebP** است نه PNG، و این عمدی است: نورِ پنجره یک گرادیانِ
     نرم است و PNGِ پالت‌دار آن را نوارنوار می‌کند. اندازه‌گیری روی
     همین تصویر — بیشترین پرشِ ناگهانی در برشِ افقیِ گرادیان:
       PNG اصلی (۱۱۰۰ کیلوبایت) → ۲     WebP q72 (۲۱۰ کیلوبایت) → ۱
     یعنی هم پنج برابر سبک‌تر، هم نرم‌تر. */

.win {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1038 / 846;
}
.win-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(44, 70, 52, 0.22));
}

/* ⚠ کادرِ پرواز عمداً خیلی از قاب بزرگ‌تر است. حلقه‌ی گردش بر حسب
   اندازه‌ی همین بوم حساب می‌شود؛ اگر بوم به‌اندازه‌ی قاب باشد، حلقه‌ای
   که دورِ قاب بچرخد از لبه‌ی بوم می‌زند بیرون و بریده می‌شود. با این
   حاشیه، حلقه دورِ خودِ قاب می‌افتد و باز هم داخلِ بوم می‌ماند.

   ⚠ ولی حاشیه‌ی افقی بر حسب **پیکسل** است نه درصد. با ۲۴ درصد، روی
     ۱۰۲۴ پیکسل بوم تا x=-۸۸ می‌رفت و سند ۱۱۱۲ پیکسل پهنا می‌شد —
     یعنی اسکرول افقی. ۱۸ پیکسل همیشه داخلِ حاشیه‌ی صفحه جا می‌شود.
     ارتفاع می‌تواند درصدی بماند؛ صفحه عمودی اسکرول می‌شود. */
.win-flock {
  position: absolute;
  z-index: 3;
  inset: -28% -18px;
  pointer-events: none;   /* نه کلیک می‌گیرد نه اسکرول را می‌بلعد */
  opacity: 0;
  transition: opacity 0.9s var(--ease-calm);
}
.win-flock.ready { opacity: 1; }
.win-flock canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── اسلایدشوِ تازه‌ترین نوشته‌ها ──────────────────────────────────
   ⚠ حرکت را خودِ مرورگر با `scroll-snap` انجام می‌دهد، نه جاوااسکریپت:
     لمس، چرخِ ماوس، کیبورد و اینرسیِ سیستم‌عامل همه رایگان به‌دست
     می‌آیند. جاوااسکریپت فقط دکمه‌ها و نقطه‌ها را می‌گرداند.

   ⚠ تعدادِ کارتِ هر نما **اینجا** تعیین می‌شود (سه روی دسکتاپ، یکی روی
     موبایل) — با `--per`. جاوااسکریپت همین را از روی عرضِ واقعی
     می‌خواند، پس یک منبعِ حقیقت بیشتر نیست. */

#latest[hidden] { display: none; }

.slider {
  /* ⚠ عرضِ کارت عمداً یک درصدِ ساده است، نه calc تودرتو با چند var.
     نسخه‌ی اول این بود:
       grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per))
     و **بی‌صدا** نامعتبر می‌شد: مرورگر مقدار را به `auto` برمی‌گرداند و
     هر کارت تمامِ عرضِ نوار را می‌گرفت (اندازه‌گیری: ۱۱۴۰ به‌جای ۳۶۵).
     هیچ خطایی هم در کنسول نبود. */
  --card: calc(33.333% - 15px);
  --gap: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.sl-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* نوارِ اسکرول پنهان، ولی خودِ اسکرول سرِ جایش */
  scrollbar-width: none;
  padding-block: 6px;
}
.sl-track::-webkit-scrollbar { display: none; }
.sl-item { scroll-snap-align: start; list-style: none; min-width: 0; }

.sl-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  color: var(--fg);
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-glide),
              border-color var(--t-fast);
}
.sl-nav:hover:not([disabled]) { border-color: var(--brand-400); transform: scale(1.06); }
.sl-nav[disabled] { opacity: 0.32; cursor: default; }
.sl-nav .ic { width: 20px; height: 20px; }

.sl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.sl-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-300);
  cursor: pointer;
  transition: width var(--t-fast) var(--ease-glide), background var(--t-fast);
}
.sl-dot.on { width: 26px; border-radius: 999px; background: var(--brand-600); }

.sl-more { margin-top: 26px; text-align: center; }

/* ── کارت نوشته ─────────────────────────────────────────────────── */

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform var(--t-mid) var(--ease-glide),
              box-shadow var(--t-mid) var(--ease-calm);
}
.post-card:hover { transform: translateY(-4px); }

.pc-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.pc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-none { background: linear-gradient(150deg, var(--brand-200), var(--brand-100)); }
.pc-cat {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  font-size: 12px;
  color: var(--brand-700);
}

.pc-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 20px; }
.pc-title {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--fg-strong);
  font-variation-settings: "wght" 600, "KASH" 2;
}
.pc-ex {
  font-size: 14px;
  line-height: 1.95;
  color: var(--muted);
  /* سه خط، بعدش سه‌نقطه — تا کارت‌ها هم‌قد بمانند */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-meta { margin-top: auto; padding-top: 6px; font-size: 12.6px; color: var(--muted); }

@media (max-width: 980px) {
  .slider { --card: calc(50% - 11px); }
}
@media (max-width: 620px) {
  /* موبایل: یک کارت در هر نما */
  .slider { --card: 100%; grid-template-columns: 1fr; }
  .sl-nav { display: none; }   /* با انگشت کشیده می‌شود؛ دکمه جا می‌گیرد */
}

@media (prefers-reduced-motion: reduce) {
  .sl-track { scroll-behavior: auto; }
  .post-card:hover { transform: none; }
}

/* زیرعنوانِ اسلایدشو روی دسکتاپ باید یک‌خطی بماند. `.sec-head` سقفِ
   ۶۲ نویسه دارد که برای این جمله دو خط می‌شود؛ فقط همین یک بخش بازتر
   می‌شود. زیر ۱۱۰۰ پیکسل دوباره می‌پیچد، که درست است. */
@media (min-width: 1100px) {
  #latest .sec-head { max-width: 84ch; }
  #latest .sec-head p { text-wrap: nowrap; }
}

/* اعتبارِ توسعه‌دهنده در فوتر */
.copy .credit a {
  color: var(--brand-700);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.copy .credit a:hover { border-bottom-color: currentColor; }