/*
  استایل عمومی سایت — بر پایه tokens.css
  فقط utility منطقی (ms/me/ps/pe/start/end) — هرگز ml/mr/left/right.
  منبع قواعد: design-system.md
*/

/* ------------------------------------------------------------- ریست پایه */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0; /* هرگز منفی روی فارسی */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { margin: 0; }

small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }

/* دو استثنای مجاز dir="ltr": اعداد فنی/مسیر */
[dir="ltr"] {
  unicode-bidi: plaintext;
}

/* --------------------------------------------------------- دسترس‌پذیری */

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  inset-inline-start: 0;
}

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

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

/* -------------------------------------------------------------- چیدمان */

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
}

section {
  padding-block: var(--space-24);
}

@media (max-width: 768px) {
  section { padding-block: var(--space-16); }
}

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- دکمه */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 12px 26px;
  /* پیل، نه مستطیل. مرجع بصری برند همین است و مستطیلِ ۸ پیکسلی روی
     پوستر سینمایی مثل دکمه‌ی پیش‌فرضِ فریم‌ورک می‌خواند. */
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* transform جدا از بقیه — تا جاوااسکریپت مغناطیسی با هیچ transition دیگری تداخل نکند */
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}

/* دکمه‌ی اصلی هم شیشه است، نه یک مستطیلِ رنگیِ تخت: پس‌زمینه از پشتش
   می‌شکند، لبه‌اش برق می‌زند، و بالایش یک هایلایتِ نازک دارد.
   ⚠️ رنگ در ۰.۹ می‌ماند نه کمتر — این دکمه‌ی اصلیِ تبدیل است و کنتراست
   متنِ سفید رویش نباید زیر ۴.۵ برود. سنجیده شد. */
/* دکمه‌ی اصلی: شیشه‌ی رنگیِ صیقلی — نه مستطیلِ تخت، نه شیشه‌ی شفاف.

   ⚠️ اینجا عمداً backdrop-filter نداریم. با نسخه‌ی نیمه‌شفاف (آلفا ۰.۹۴)
   کنتراستِ متنِ سفید **اندازه‌گیری شد: ۴.۴۸:۱ روی هیرو و ۳.۷۵:۱ روی
   صفحه‌ی روشن** — هر دو زیر حدِ ۴.۵. متنِ دکمه ۱۷px است، یعنی «متن درشت»
   هم حساب نمی‌شود. این دکمه‌ی اصلیِ تبدیل است؛ خوانایی بر جلوه می‌چربد.

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

   ⚠️ روشن‌ترین نقطه‌ی گرادیان خودش باید ≥۴.۵ بدهد. rgb(202,69,30) →
   ۴.۸:۱. یک پله روشن‌تر (rgb(214,78,40)) می‌شود ۴.۲۲ و رد می‌شود. */
.btn-primary {
  background: linear-gradient(180deg, #ca451e, #a83210);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 236 214 / 0.45),
    inset 0 -1px 0 rgb(120 30 0 / 0.35),
    0 6px 18px rgb(150 45 10 / 0.28);
}

/* لبه‌ی درخشانِ دکمه — همان زبانِ کپسول، در مقیاس کوچک‌تر */
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(255 236 214 / 0.65), rgb(255 190 150 / 0.10) 55%, rgb(120 30 0 / 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 244 228 / 0.6),
    inset 0 -1px 0 rgb(120 30 0 / 0.35),
    0 10px 26px rgb(150 45 10 / 0.34);
}

/* فلشِ داخل دکمه — در RTL باید به چپ نگاه کند، پس آینه می‌شود.
   ⚠️ scaleX فیزیکی است؛ با [dir] گره می‌خورد نه با ویژگی منطقی. */
.btn-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

[dir="rtl"] .btn-arrow { transform: scaleX(-1); }
.btn:hover .btn-arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn-arrow { transform: none; }
  [dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1); }
}

/* روی زمینه‌ی تیره دکمه هاله می‌گیرد — همان چیزی که در مرجع «پرمیوم»
   نشانش می‌دهد. عمداً فقط روی .on-dark و صحنه، نه در کل سایت: هاله روی
   کاغذِ روشن کثیف دیده می‌شود. */
.on-dark .btn-primary,
.stage-copy .btn-primary,
.has-cinema-hero .header-cta {
  box-shadow:
    inset 0 1px 0 rgb(255 236 214 / 0.45),
    inset 0 -1px 0 rgb(120 30 0 / 0.35),
    0 8px 30px var(--glow-accent);
}

.on-dark .btn-primary:hover,
.stage-copy .btn-primary:hover,
.has-cinema-hero .header-cta:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 244 228 / 0.6),
    inset 0 -1px 0 rgb(120 30 0 / 0.35),
    0 10px 40px rgb(242 104 60 / 0.5);
}

/* هاله نرم زیر نور — همان جزئیاتی که حس «دست‌ساز» می‌دهد، نه پرزرق‌وبرق */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120px circle at var(--mx, 50%) var(--my, 50%),
    rgb(255 255 255 / 0.18),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}

.btn-secondary:hover {
  background: var(--surface);
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  padding-inline: 0;
  min-height: auto;
  position: relative;
}

/* زیرخط رسم‌شونده به‌جای underline خام — یک درجه دقیق‌تر */
.btn-ghost::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

html[dir="rtl"] .btn-ghost::after {
  transform-origin: left;
}

.btn-ghost:hover::after {
  transform: scaleX(1);
}

/* روی زمینه تیره */
.on-dark .btn-secondary {
  color: var(--ink-paper);
  border-color: var(--ink-line);
}

/* ---------------------------------------------------------------- هدر */

/* هدرِ صفحه‌های عادی: شیشه‌ی روشن. چسبان است (پایین‌تر position: sticky
   می‌گیرد)، پس محتوا از زیرش رد می‌شود و زمینه‌ی مات لازم است. */
.site-header {
  border-bottom: var(--border);
  background: rgb(250 250 248 / 0.72);
  backdrop-filter: var(--glass-fx, blur(16px) saturate(140%));
  -webkit-backdrop-filter: var(--glass-fx, blur(16px) saturate(140%));
}

@supports not (backdrop-filter: blur(4px)) {
  .site-header { background: var(--paper); }
}

.site-header nav {
  position: relative;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
  height: 76px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* درخشش روی شیشه — نقطه‌ی نوری که موس را دنبال می‌کند.

   ⚠️ عمداً CSS است نه WebGL. یک کانواس روی هدرِ fixed یعنی یک لایه‌ی
   کامپوزیت اضافه که در هر فریم روی کل صفحه ترکیب می‌شود، برای چیزی که
   یک radial-gradient دقیقاً همان را می‌دهد. WebGL جایی ارزش دارد که
   انکسار واقعی لازم است — آنجا شکافِ هیرو است، نه نوار ناوبری.

   ⚠️ روی ::after می‌نشیند نه ::before: با ::before باید z-index فرزندها
   دست‌کاری می‌شد و z-index:20 منوی موبایل می‌شکست. با شفافیت کم و
   screen، نشستن روی متن مشکلی ایجاد نمی‌کند.

   موقعیت از --mx/--my می‌آید که interactions.js ست می‌کند؛ همان قراردادی
   که کارت‌ها و دکمه‌ی مغناطیسی دارند. */
.site-header nav::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--sheen, 0);
  transition: opacity var(--dur) var(--ease);
  /* روی هدرِ روشن: یک شست‌وشوی گرمِ ملایم (screen اینجا نامرئی است،
     چون زمینه تقریباً سفید است). */
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                    rgb(199 67 26 / 0.07), transparent 70%);
}

/* روی شیشه‌ی تیره: نورِ واقعی — screen تا مثل بازتاب بخواند نه لکه‌ی رنگ */
.has-cinema-hero .site-header nav::after {
  mix-blend-mode: screen;
  background:
    radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
                    rgb(255 205 165 / 0.20), transparent 68%),
    radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%),
                    rgb(255 240 224 / 0.18), transparent 72%);
}

/* صفحه‌های داخلی: nav فقط ۱۱۲۰px عرض دارد و درخشش روی nav::after کنار لوگو با لبه‌ی
   صاف بریده می‌شد. آن‌جا درخشش روی خودِ نوار تمام‌عرض است (--hx/--hy به px از JS). */
body:not(.has-cinema-hero) .site-header nav::after { content: none; }

body:not(.has-cinema-hero) .site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--sheen, 0);
  transition: opacity var(--dur) var(--ease);
  background:
    radial-gradient(240px circle at var(--hx, 50%) var(--hy, 50%),
                    rgb(199 67 26 / 0.07), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav::after,
  .site-header::after { display: none; }
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-inline-end: auto;
}

/* لوگو با mask کشیده می‌شود، نه <img> — یک فایل، ولی رنگش currentColor
   است. پس روی هدرِ روشن تیره و روی هیروی تیره سفید می‌شود، بدون دو نسخه.
   ⚠️ mask به width/height نیاز دارد؛ نسبت ذاتی SVG اینجا معنا ندارد.
   نسبت لوگو 96.9/31 = 3.126 است. */
.brand-logo {
  display: block;
  width: calc(36px * 3.126);
  height: 36px;
  background: currentColor;
  -webkit-mask: url("../img/logo.9c65e8b10e92.svg") center / contain no-repeat;
  mask: url("../img/logo.9c65e8b10e92.svg") center / contain no-repeat;
}

@media (max-width: 900px) {
  .brand-logo { width: calc(26px * 3.126); height: 26px; }
}

.site-header ul {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header ul a {
  text-decoration: none;
  color: var(--ink);
  position: relative;
}

/* زیرخط رسم‌شونده — همان زبان .btn-ghost، برای یکدستی */
.site-header ul a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur) var(--ease);
}

.site-header ul a:hover::after,
.site-header ul a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header ul a[aria-current="page"] {
  color: var(--accent);
}

/* دکمه فهرست موبایل — سه خط، خط وسط با ماسک ساخته می‌شود نه المان اضافه */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border);
  /* گرد، نه مربع — کنارِ یک کپسولِ شیشه‌ای، کادرِ گوشه‌دار وصله می‌خورد */
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* داخل کپسول، حاشیه‌ی خودش اضافه است — کپسول خودش قاب است */
.has-cinema-hero .nav-toggle {
  width: 42px;
  height: 42px;
  border-color: transparent;
  background: rgb(255 236 214 / 0.07);
}

.has-cinema-hero .nav-toggle[aria-expanded="true"] {
  background: rgb(255 236 214 / 0.14);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
}

.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after { transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }

/* در دسکتاپ آیتم CTA داخل لیست لازم نیست — دکمه جدا هست */
.nav-cta { display: none; }

@media (max-width: 900px) {
  .site-header nav { position: relative; height: 64px; }

  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav-cta { display: block; }

  .site-header ul {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-block: var(--border);
    box-shadow: var(--shadow-2);
    /* بسته با visibility، نه display — تا انتقال قابل انیمیت بماند و
       آیتم‌ها هم‌زمان از ترتیب تب بیرون بروند */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
      visibility 0s linear var(--dur);
  }

  .site-header nav.is-open ul {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-header ul a {
    display: block;
    padding: var(--space-4) 20px;
    border-bottom: var(--border);
  }

  .site-header ul a::after { display: none; }

  /* ⚠️ باید .site-header داشته باشد — `.site-header ul a` بالاتر از
     `.nav-cta a` است و رنگ --ink را برمی‌گرداند. */
  .site-header .nav-cta a {
    color: var(--accent);
    font-weight: 700;
    border-bottom: none;
  }
}

/* ------------------------------------------------------------- کارت */

.card {
  position: relative;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}

/* نور نرم زیر نشانگر — فقط جایی که موس هست، نه کل کارت.
   روی --paper رنگ می‌گیرد نه --surface: کارت‌ها خودشان روی surface
   هستند، پس یک گرادیان تیره‌تر لازم است تا اصلاً دیده شود. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    var(--paper),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
}

.alt-bg .card::before {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    var(--surface),
    transparent 70%
  );
}

.card > * {
  position: relative;
}

.card h3 {
  margin-bottom: var(--space-2);
}

/* دو ساختار مختلف در کارت‌ها هست: کارت خدمت لینک را فقط دور تیتر
   می‌گذارد (h3 > a)، کارت نمونه‌کار/مقاله لینک را دور تصویر+تیتر
   می‌گذارد (a > h3) — این قاعده باید هر دو جهت را بگیرد. */
.card h3 a,
.card > a {
  text-decoration: none;
  color: inherit;
}

.card > a:hover h3,
.card h3 a:hover {
  color: var(--accent);
}

.card .tagline,
.card .summary,
.card .excerpt {
  color: var(--muted);
  margin-top: var(--space-2);
}

.card .for-whom,
.card .meta {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--space-3);
}

/* کاور کارت — تصویر واقعی و جایگزین طراحی‌شده هر دو یک قاب دارند،
   وگرنه کارتِ بی‌تصویر ارتفاع کوتاه‌تری می‌گیرد و گرید ناهموار می‌شود. */
.card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  object-fit: cover;
}

.card-cover-fallback {
  position: relative;
  background: var(--paper);
  border: var(--border);
  color: var(--muted);
  overflow: hidden;
}

.alt-bg .card-cover-fallback { background: var(--surface); }

.card-cover-fallback svg {
  width: 100%;
  height: 100%;
  display: block;
}

.card-cover-label {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* کارت‌های یک ردیف هم‌ارتفاع می‌شوند و متن‌ها از بالا تراز می‌مانند */
.grid > .card {
  display: flex;
  flex-direction: column;
}

/* کارت شاخص تنها — یک کارت در گرید سه‌ستونه بدقواره است. وقتی تنهاست،
   تمام عرض را می‌گیرد و افقی می‌شود؛ با :only-child بدون منطق در ویو. */
.grid > .card:only-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8);
}

.grid > .card:only-child > a {
  display: contents;
}

.grid > .card:only-child .card-cover {
  grid-row: 1 / 4;
  margin-bottom: 0;
  aspect-ratio: 16 / 10;
  height: 100%;
}

.grid > .card:only-child h3 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  grid-column: 2;
}

.grid > .card:only-child .meta,
.grid > .card:only-child .excerpt,
.grid > .card:only-child .summary {
  grid-column: 2;
  margin-top: 0;
  padding-top: 0;
}

.grid > .card:only-child .excerpt,
.grid > .card:only-child .summary {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

@media (max-width: 768px) {
  .grid > .card:only-child {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }

  .grid > .card:only-child .card-cover { grid-row: auto; aspect-ratio: 4 / 3; }
  .grid > .card:only-child h3,
  .grid > .card:only-child .meta,
  .grid > .card:only-child .excerpt,
  .grid > .card:only-child .summary { grid-column: 1; }
}

.grid > .card > a { text-decoration: none; color: inherit; }
.grid > .card .summary,
.grid > .card .excerpt { margin-top: auto; padding-top: var(--space-2); }

/* ---------------------------------------------------------- بخش سربرگ */

.section-header {
  margin-bottom: var(--space-12);
  max-width: var(--prose-width);
}

/* eyebrow جدا از section-header هم استفاده می‌شود (هدر صفحات داخلی) */
.eyebrow {
  display: inline-block;
  position: relative;
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-bottom: var(--space-2);
  padding-inline-start: var(--space-6);
}

/* خط تأکید کوتاه قبل از eyebrow — همان «یک انحراف کوچک و عمدی» استعاره برند */
.eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: var(--space-4);
  height: 2px;
  background: var(--accent);
  transform: translateY(-50%);
}

.on-dark .eyebrow {
  color: var(--accent-bright);
}

.on-dark .eyebrow::before {
  background: var(--accent-bright);
}

.section-header h2 {
  margin-bottom: var(--space-3);
}

.section-header p {
  color: var(--muted);
}

/* ============================================================ هیرو سینمایی

   ⚠️ max-width هرگز روی خودِ <section> نمی‌نشیند — بخش را از ستون .wrap
   بقیه صفحه بیرون می‌برد. محدودیت عرض داخل .wrap اعمال می‌شود.

   ساختار سه‌لایه: میدان (پرتوها) → ویگنت → محتوا.
   میدان با پارالاکس موس حرکت می‌کند (interactions.js متغیر --px/--py را
   می‌دهد)؛ بدون جاوااسکریپت هم کاملاً سالم است، فقط ثابت می‌ماند. */

.hero-cinema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 92svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--ink-paper);
  /* بالا فضای هدر شناور را باز می‌کند */
  padding-block: calc(76px + var(--space-16)) var(--space-24);
}

.hero-cinema > .wrap {
  position: relative;
  z-index: 2;
}

.hero-cinema .wrap > h1,
.hero-cinema .wrap > .hero-eyebrow {
  max-width: 17ch;
}

.hero-cinema .hero-lede,
.hero-cinema .actions {
  max-width: var(--prose-width);
}

/* --- لایه میدان ------------------------------------------------------- */

.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* پارالاکس: مقادیر از -0.5 تا 0.5 می‌آیند */
  transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px), 0);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* هاله‌ای که دقیقاً روی مبدأ بادبزن می‌نشیند — کانون نگاه */
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 620px at 6% 50%, rgb(199 67 26 / 0.34), transparent 68%),
    radial-gradient(900px 700px at 42% 8%, rgb(120 160 210 / 0.10), transparent 70%);
  animation: glow-breathe 7s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
  from { opacity: 0.75; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.06); }
}

.hero-fan {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  /* ⚠️ پرتوها نباید روی تیتر پررنگ بمانند — نیمه‌ای که متن دارد محو
     می‌شود، نه اینکه کامل حذف شود. در RTL متن سمت راست است، پس محوشدن
     هم به راست می‌رود. */
  -webkit-mask-image: linear-gradient(to right, #000 0 30%, rgb(0 0 0 / 0.16) 88%);
  mask-image: linear-gradient(to right, #000 0 30%, rgb(0 0 0 / 0.16) 88%);
}

html[dir="ltr"] .hero-fan {
  -webkit-mask-image: linear-gradient(to left, #000 0 30%, rgb(0 0 0 / 0.16) 88%);
  mask-image: linear-gradient(to left, #000 0 30%, rgb(0 0 0 / 0.16) 88%);
}

/* --- پرتوها ----------------------------------------------------------
   هر پرتو یک درجه با بغلی‌اش فرق دارد. --i شماره درجه است (قرینه بالا و
   پایین) — هم برای تأخیر رسم استفاده می‌شود، هم برای موجِ نفس‌کشیدن، که
   حرکت را از مرکز به بیرون پخش می‌کند نه به‌صورت تصادفی. */

.fan-ray,
.fan-base,
.fan-drift,
.fan-spark {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.fan-ray {
  stroke: var(--ink-paper);
  stroke-width: 1;
  stroke-dasharray: 1600;
  animation:
    fan-draw 1500ms var(--ease) both,
    fan-breathe 5600ms ease-in-out infinite;
  animation-delay:
    calc(140ms + var(--i) * 42ms),
    calc(1100ms + var(--i) * 130ms);
}

@keyframes fan-draw {
  from { stroke-dashoffset: 1600; }
  to   { stroke-dashoffset: 0; }
}

@keyframes fan-breathe {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 0.17; }
}

/* مسیر مبنا: همان‌جایی که «همه» می‌روند */
.fan-base {
  stroke: var(--ink-muted);
  stroke-width: 1;
  opacity: 0.55;
  stroke-dasharray: 1600;
  animation: fan-draw 1400ms var(--ease) 240ms both;
}

/* مسیر یک‌درجه — تنها چیز پررنگ کل تصویر */
.fan-drift {
  stroke: var(--accent-bright);
  stroke-width: 1.5;
  stroke-dasharray: 1600;
  filter: drop-shadow(0 0 6px rgb(242 104 60 / 0.55));
  animation: fan-draw 1600ms var(--ease) 520ms both;
}

/* جرقه‌ای که مسیر را دوباره و دوباره می‌رود — dash کوتاه روی همان خط */
.fan-spark {
  stroke: #ffd9c9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 54 3000;
  filter: drop-shadow(0 0 8px rgb(255 160 120 / 0.9));
  animation: fan-spark 4200ms cubic-bezier(0.5, 0, 0.5, 1) 2100ms infinite;
}

@keyframes fan-spark {
  0%   { stroke-dashoffset: 60;    opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: -1010; opacity: 0; }
}

.fan-origin {
  fill: var(--accent-bright);
  filter: drop-shadow(0 0 10px rgb(242 104 60 / 0.9));
}

.fan-ring {
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: fan-ring 3200ms var(--ease) infinite;
}

@keyframes fan-ring {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* ویگنت: نیمه‌ای که متن روی آن می‌نشیند تیره‌تر می‌شود تا کنتراست بماند.
   ⚠️ در RTL متن سمت راست است، پس تیرگی هم باید سمت راست باشد (100%). */
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 100% at 100% 50%,
      rgb(15 23 32 / 0.94) 18%, rgb(15 23 32 / 0.55) 52%, transparent 78%),
    linear-gradient(to top, var(--ink) 2%, transparent 24%);
}

html[dir="ltr"] .hero-vignette {
  background:
    radial-gradient(115% 100% at 0% 50%,
      rgb(15 23 32 / 0.94) 18%, rgb(15 23 32 / 0.55) 52%, transparent 78%),
    linear-gradient(to top, var(--ink) 2%, transparent 24%);
}

/* دانه فیلم — چیزی که تخت بودن گرادیان را می‌گیرد. بدون فایل تصویر. */
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- محتوای هیرو ------------------------------------------------------ */

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

.hero-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  flex: none;
  animation: hero-pulse 2400ms ease-out infinite;
}

@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(242 104 60 / 0.55); }
  70%  { box-shadow: 0 0 0 10px rgb(242 104 60 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(242 104 60 / 0); }
}

.hero-cinema h1 {
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: 1.16;
  text-wrap: balance;
  margin-bottom: var(--space-6);
  background: linear-gradient(174deg, #ffffff 12%, #b9c2cc 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-cinema .hero-lede {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--ink-muted);
  line-height: var(--lh-h3);
  margin-bottom: var(--space-8);
}

.hero-cinema .actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.hero-cinema .btn-ghost {
  color: var(--ink-paper);
}

/* --- نوار آمار -------------------------------------------------------- */

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink-line);
  max-width: 640px;
}

.hero-stat dt {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ink-paper);
  font-variant-numeric: tabular-nums;
}

.hero-stat dd {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

/* --- نشانه اسکرول ----------------------------------------------------- */

.hero-scroll {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--space-8);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 48px;
  display: grid;
  place-items: center;
}

.hero-scroll-line {
  width: 1px;
  height: 48px;
  background: var(--ink-line);
  position: relative;
  overflow: hidden;
}

.hero-scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 16px;
  background: var(--accent-bright);
  animation: scroll-dot 2200ms var(--ease) infinite;
}

@keyframes scroll-dot {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* --- ورود محتوا ------------------------------------------------------- */

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

/* تیتر از پایین باز می‌شود، نه اینکه فقط محو شود */
@keyframes hero-unmask {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(22px); }
  to   { opacity: 1; clip-path: inset(0 0 -25% 0); transform: translateY(0); }
}

.hero-eyebrow,
.hero-cinema .hero-lede,
.hero-cinema .actions,
.hero-stats {
  animation: hero-rise 640ms var(--ease) both;
}

.hero-cinema h1 {
  animation: hero-unmask 900ms var(--ease) 140ms both;
}

.hero-eyebrow            { animation-delay: 60ms; }
.hero-cinema .hero-lede  { animation-delay: 460ms; }
.hero-cinema .actions    { animation-delay: 580ms; }
.hero-stats              { animation-delay: 700ms; }
.hero-scroll             { animation: hero-rise 600ms var(--ease) 1400ms both; }

/* --- موبایل ----------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-cinema {
    min-height: auto;
    padding-block: calc(64px + var(--space-12)) var(--space-16);
  }

  .hero-cinema .wrap > h1,
  .hero-cinema .wrap > .hero-eyebrow {
    max-width: none;
  }

  /* در موبایل ستون متن تمام‌عرض است — میدان فقط یک بافت پشت آن می‌ماند */
  .hero-fan {
    opacity: 0.5;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* هاله را از گوشه بالا-چپ می‌برد پایین، وگرنه از پشت هدرِ شفاف
     زیر دکمه فهرست نارنجی می‌زند */
  .hero-glow {
    background: radial-gradient(520px 520px at 12% 62%, rgb(199 67 26 / 0.26), transparent 70%);
  }

  .hero-vignette,
  html[dir="ltr"] .hero-vignette {
    background:
      linear-gradient(to bottom, rgb(15 23 32 / 0.55), rgb(15 23 32 / 0.88)),
      linear-gradient(to top, var(--ink) 2%, transparent 22%);
  }

  .hero-scroll { display: none; }

  .hero-stats {
    gap: var(--space-6);
    margin-top: var(--space-12);
  }
}

@media (max-width: 480px) {
  .hero-stats { gap: var(--space-4) var(--space-6); }
  .hero-stat dt { font-size: var(--fs-h3); }
}

/* --- حرکت کم --------------------------------------------------------- */
/* ⚠️ فقط انیمیشن‌ها خاموش می‌شوند، نه خودِ تصویر — کاربر باید همان صفحه
   را ببیند، فقط بی‌حرکت. clip-path تیتر هم باید باز بماند وگرنه پنهان است. */

@media (prefers-reduced-motion: reduce) {
  .hero-field,
  .hero-glow,
  .fan-ray,
  .fan-base,
  .fan-drift,
  .fan-origin,
  .fan-ring,
  .hero-pulse,
  .hero-eyebrow,
  .hero-cinema h1,
  .hero-cinema .hero-lede,
  .hero-cinema .actions,
  .hero-stats,
  .hero-scroll,
  .hero-scroll-line::after {
    animation: none;
    transition: none;
  }

  .fan-ray {
    stroke-dasharray: none;
    opacity: 0.1;
  }

  .fan-base,
  .fan-drift { stroke-dasharray: none; }

  .fan-spark { display: none; }

  .hero-cinema h1 { clip-path: none; opacity: 1; }
}

/* -------------------------------------------------------------- روایت */

.narrative,
.alt-bg {
  background: var(--surface);
}

.alt-bg .card {
  background: var(--paper);
}

/* ------------------------------------------------------ روایت یک درجه

   سه ستونِ افقی و بدون قاب: متن | درجه‌ها و وعده | کیوب معلق.
   ⚠️ عمداً پنل/کارت دورش نیست. نسخه‌ی قاب‌دار وسط صفحه یک «جزیره» بود و
   با بقیه‌ی سکشن‌ها (که لبه‌شان همان .wrap است) نمی‌خواند؛ چیدمان عمودیِ
   داخلش هم ارتفاع را به ۶۹۶px می‌رساند. */

.narrative {
  padding-block: var(--space-16);
}

.narrative-grid {
  display: grid;
  /* ستون وسط پهن‌تر: «استفاده از هوش مصنوعی» و باکس وعده در ستون برابر
     به سه سطر می‌شکستند. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 240px;
  grid-template-areas: "copy points visual";
  align-items: center;
  column-gap: clamp(28px, 3.4vw, 48px);
}

.narrative-copy   { grid-area: copy; }
.narrative-points { grid-area: points; }
.narrative-visual { grid-area: visual; }

.narrative-lead {
  margin-top: var(--space-2);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.45;
  text-wrap: balance;
}

.narrative-text {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.9;
}

/* --- چهار درجه ---------------------------------------------------------- */

.degree-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.degree-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  /* روی زمینه‌ی --surface سکشن، کارت یک پله روشن‌تر است */
  background: var(--paper);
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.degree-item:hover {
  border-color: rgb(199 67 26 / 0.25);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.degree-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.degree-icon svg { width: 20px; height: 20px; }

.degree-label {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.degree-label small {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--muted);
}

/* --- وعده --------------------------------------------------------------- */

.narrative-promise {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 12px var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft), rgb(253 237 230 / 0.35));
  /* ⚠️ border-inline-start منطقی — در RTL نوار تأکید سمت راست است، همان
     سمتی که خواندن شروع می‌شود. */
  border-inline-start: 3px solid var(--accent);
}

.promise-icon {
  flex: none;
  color: var(--accent);
  margin-top: 3px;
}

.promise-icon svg { width: 22px; height: 22px; display: block; }

.narrative-promise p {
  font-size: var(--fs-small);
  line-height: 1.85;
}

.narrative-promise strong { color: var(--ink); }

.narrative-close {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
  text-wrap: balance;
}

.narrative-close em {
  font-style: normal;
  color: var(--accent);
}

/* --- کیوب معلق ------------------------------------------------------------

   دو حرکت با دو دوره‌ی متفاوت (۷ و ۱۱ ثانیه) — شناوری عمودی و یک تاب
   ملایم. چون دوره‌ها هم‌نسبت نیستند، ترکیبشان تکراری به نظر نمی‌رسد؛
   با یک keyframe واحد، حرکت مکانیکی و پاندول‌وار می‌خواند.
   ⚠️ دو المانِ تو در تو، چون یک transform نمی‌تواند دو انیمیشن را
   هم‌زمان بگیرد — دومی اولی را بازنویسی می‌کند. */

.narrative-visual {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
}

.cube-float {
  position: relative;
  width: 100%;
  animation: cube-bob 7s ease-in-out infinite;
}

.cube-img {
  width: 100%;
  height: auto;
  animation: cube-sway 11s ease-in-out infinite;
  /* سایه‌ی رنگیِ خیلی نرم تا شیشه روی زمینه‌ی روشن «بنشیند» */
  filter: drop-shadow(0 30px 40px rgb(15 23 32 / 0.10));
}

/* درخشش «یک درجه» — روی کیوبِ کوچکِ نارنجی. مختصات از خودِ تصویر:
   مرکزش در ۷۴.۲٪ × ۶۹.۷٪ قابِ برش‌خورده. */
.cube-glow {
  position: absolute;
  left: 74.2%;
  top: 69.7%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 140 60 / 0.38), rgb(255 140 60 / 0) 62%);
  animation: cube-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}

.cube-float picture { position: relative; z-index: 2; display: block; }

/* سایه‌ی زمین: وقتی کیوب بالا می‌رود، کوچک‌تر و کم‌رنگ‌تر می‌شود */
/* ⚠️ اندازه از خودِ تصویر سنجیده شد، نه چشمی: کیوب ۸۸.۹٪ عرض قاب است و
   وجه پایینش در ۱۵٪ پایینی به ۷۲٪ و در ۲۵٪ به ۸۷٪ می‌رسد. سایه‌ی ۵۶٪
   قبلی از خودِ کیوب کوچک‌تر بود — یعنی جسمی معلق که سایه‌اش زیرش جا
   نمی‌شود. حالا ۸۴٪، و نسبتش با عرض مقیاس می‌گیرد نه ارتفاع ثابت. */
.cube-shadow {
  width: 84%;
  aspect-ratio: 6 / 1;
  margin-top: -5%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgb(15 23 32 / 0.26), rgb(15 23 32 / 0.10) 55%, transparent);
  animation: cube-shadow 7s ease-in-out infinite;
}

@keyframes cube-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

@keyframes cube-sway {
  0%, 100% { rotate: -2.2deg; }
  50%      { rotate: 2.2deg; }
}

@keyframes cube-shadow {
  0%, 100% { scale: 1;    opacity: 1; }
  50%      { scale: 0.78; opacity: 0.55; }
}

@keyframes cube-pulse {
  0%, 100% { opacity: 0.55; scale: 0.92; }
  50%      { opacity: 1;    scale: 1.06; }
}

@media (prefers-reduced-motion: reduce) {
  .cube-float, .cube-img, .cube-shadow, .cube-glow { animation: none; }
}

/* تبلت: کیوب کنار متن، درجه‌ها زیرشان در یک ردیفِ چهارتایی */
@media (max-width: 1100px) {
  .narrative-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "copy visual" "points points";
    row-gap: var(--space-6);
  }

  .degree-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .narrative { padding-block: var(--space-12); }

  .narrative-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "copy" "points";
    row-gap: var(--space-4);
  }

  .narrative-visual { justify-self: center; width: 150px; }

  /* ⚠️ دو ستون و افقی — تک‌ستونه، چهار آیتم ۳۰۸px می‌گرفتند؛ کارتِ عمودی
     هم هرکدام ~۱۱۰px. آیکون کوچک کنار برچسب، ارتفاع را نصف می‌کند. */
  .degree-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

  .degree-item { gap: var(--space-2); padding: 8px 10px; }
  .degree-icon { width: 30px; height: 30px; border-radius: 9px; }
  .degree-icon svg { width: 16px; height: 16px; }
  .degree-label { font-size: var(--fs-caption); }
  .degree-label small { font-size: 11px; }
}


/* -------------------------------------------------------------- فرآیند */

.process ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .process ol { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .process ol { grid-template-columns: 1fr; }
}

.process li {
  position: relative;
  padding-top: var(--space-8);
  border-top: 2px solid var(--line);
}

.process .step-number {
  position: absolute;
  top: -14px;
  inset-inline-start: 0;
  background: var(--paper);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-h3);
  padding-inline-end: var(--space-3);
}

.process h3 {
  margin-bottom: var(--space-2);
}

.process p {
  color: var(--muted);
}

/* ----------------------------------------------------- چرا یک درجه (تیره) */

.why {
  background: var(--ink);
  color: var(--ink-paper);
}

.why .section-header p { color: var(--ink-muted); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; }
}

.why-item {
  border-inline-start: 2px solid var(--accent-bright);
  padding-inline-start: var(--space-4);
}

.why-item .stat {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.why-item p {
  color: var(--ink-muted);
  font-size: var(--fs-small);
}

.see-all {
  margin-top: var(--space-8);
}

/* ------------------------------------------------------------------ CTA */

.cta {
  text-align: center;
}

.cta .section-header {
  margin-inline: auto;
  text-align: center;
  max-width: 560px;
}

.cta form {
  max-width: 480px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
  text-align: start;
}

.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}

.field select {
  /* پیکان سفارشی — پیش‌فرض مرورگر با فونت و رنگ سایت جور نیست */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 10px 7px;
  padding-inline-start: var(--space-8);
  cursor: pointer;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
}

.field-error input,
.field-error textarea,
.field-error select {
  border-color: var(--accent);
}

.error {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--accent);
}

.cta .help {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
}

.cta .help a {
  color: var(--accent);
}

/* --------------------------------------------------------------- فوتر */

.site-footer {
  background: var(--ink);
  color: var(--ink-paper);
  padding-block: var(--space-16) var(--space-8);
}

/* ⚠️ گرید روی .footer-grid است نه روی .wrap — .wrap فقط کانتینر عرض است.
   قبلاً گرید مستقیم روی `.site-footer .wrap` بود در حالی که فوتر اصلاً
   .wrap نداشت؛ یعنی قاعده هیچ‌وقت مچ نمی‌شد و متن به لبه صفحه می‌چسبید. */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--ink-line);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

.footer-brand p:not(.brand) {
  color: var(--ink-muted);
  max-width: 32ch;
}

.footer-heading {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-paper);
  margin-bottom: var(--space-4);
}

.site-footer .brand {
  font-weight: 700;
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.site-footer nav a {
  text-decoration: none;
  color: var(--ink-muted);
}

.site-footer nav a:hover {
  color: var(--ink-paper);
}

.site-footer address {
  font-style: normal;
  display: grid;
  gap: var(--space-3);
}

.site-footer address a {
  text-decoration: none;
  color: var(--ink-muted);
}

.site-footer .copyright {
  padding-top: var(--space-6);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

/* ============================================================ */
/*  صفحات داخلی — درباره، خدمات، نمونه‌کار، مجله، تماس           */
/* ============================================================ */

/* --------------------------------------------------------- مسیر (breadcrumb) */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
}

/* -------------------------------------------------------- هدر صفحه داخلی */

.detail-header,
.post-header {
  padding-block: var(--space-16) 0;
}

.detail-header h1,
.post-header h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  margin-bottom: var(--space-4);
}

.cover-frame {
  margin-block: var(--space-8);
}

.cover-frame picture {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cover-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* سوژه‌ی عکس‌های استوک معمولاً بالای وسط است؛ برش از پایین بیشتر باشد */
  object-position: center 35%;
}

.excerpt {
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--muted);
  max-width: var(--prose-width);
}

.for-whom {
  color: var(--muted);
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------- meta */

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border);
  max-width: 640px;
}

.meta-grid dt {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.meta-grid dd {
  margin: 0;
  font-weight: 700;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-small);
  margin-top: var(--space-6);
}

.byline-author {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.byline .role {
  color: var(--muted);
}

.freshness-badge {
  color: var(--accent);
}

/* ------------------------------------------------------------------ pill/tag */

.tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
}

.tag-list,
.topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
}

.topic-links {
  align-items: center;
  margin-bottom: var(--space-8);
}

.topic-links-label {
  font-size: var(--fs-small);
  color: var(--muted);
}

.badge {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.badge-pending {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --------------------------------------------------------------- فیلتر */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.filters a {
  text-decoration: none;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  border: var(--border);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.filters a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.filters a.is-active {
  background: var(--ink);
  color: var(--ink-paper);
  border-color: var(--ink);
}

/* -------------------------------------------------------------- جستجو */

.search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin-bottom: var(--space-8);
}

/* ⚠️ کنار یک دکمه‌ی پیل می‌نشیند؛ با شعاع ۸ پیکسلی، جفتشان ناهماهنگ
   می‌خوانند. فقط جستجو پیل می‌شود، نه همه‌ی ورودی‌ها — پیل روی textarea
   و فیلد چندسطری غلط است. */
.search-form input {
  flex: 1;
  padding: 12px var(--space-6);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--paper);
  color: var(--ink);
}

.search-form input:focus {
  border-color: var(--accent);
}

/* -------------------------------------------------------------- prose */

.prose-wide {
  max-width: var(--prose-width);
  margin-inline: auto;
  padding-block: var(--space-16);
}

.prose-page .prose {
  padding-block: var(--space-24);
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-6);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose blockquote {
  margin: var(--space-6) 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--accent);
  color: var(--muted);
  font-size: var(--fs-h3);
  font-weight: 400;
}

.prose code {
  direction: ltr;
  unicode-bidi: plaintext;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.prose pre {
  direction: ltr;
  background: var(--ink);
  color: var(--ink-paper);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.prose pre code {
  background: none;
  padding: 0;
}

/* جدول عریض نباید کل صفحه را افقی اسکرول کند — خودش داخل قابش
   اسکرول می‌شود. `display: block` تنها راهی است که بدون wrapper اضافه
   در HTML کار می‌کند، و ادیتور wrapper نمی‌سازد. */
.prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
}

.prose th,
.prose td {
  padding: var(--space-3);
  border-bottom: var(--border);
  text-align: start;
  vertical-align: top;
}

.prose th {
  font-weight: 700;
  background: var(--surface);
  border-bottom-width: 2px;
}

.prose tbody tr:last-child th,
.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose caption {
  caption-side: bottom;
  padding-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: start;
}

/* ------------------------------------------------- کلاس‌های کمکی نوشته
   اینها تنها راه استایل‌دادن داخل متن‌اند — صفت style عمداً در
   html_renderer پاک می‌شود تا نوشته‌ها از سیستم طراحی بیرون نزنند.
   هر کلاس جدید اینجا اضافه شود، نه به‌صورت inline در ادیتور. */

/* جعبه تأکید — برای نکته یا هشدار وسط متن */
.prose .note {
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

.prose .note > :last-child {
  margin-bottom: 0;
}

/* جعبه خنثی — نقل‌قول کلاینت، جمع‌بندی، متن جانبی */
.prose .panel {
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
}

.prose .panel > :last-child {
  margin-bottom: 0;
}

/* پاراگراف درشت — معمولاً بند اول */
.prose .lead {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--muted);
}

/* دو ستون در دسکتاپ، یک ستون در موبایل */
.prose .cols-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .prose .cols-2 { grid-template-columns: 1fr; }
}

/* داده لاتین وسط متن فارسی — قیمت، کد، نسخه */
.prose .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.prose img {
  border-radius: var(--radius-sm);
  margin-block: var(--space-4);
}

/* اینفوگرافی داخل مقاله — تصویر بلند عمودی (scripts/content/infographics).
   گوشه‌ی گرد در خود تصویر است، پس radius و margin تصویر را صفر می‌کنیم. */
.prose figure.infographic {
  /* بوم اینفوگرافی ۵۶۰px است؛ ستون مقاله در دسکتاپ پهن‌تر است و بدون این سقف
     تصویر عمودی تا ~۱۰۰۰px کش می‌آمد (بزرگ و تار). */
  max-width: 560px;
  margin: var(--space-8) auto;
}

.prose figure.infographic img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.prose figure.infographic figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: center;
}

.prose a {
  color: var(--accent);
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------- TOC */

.toc {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.toc h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.toc a {
  text-decoration: none;
  color: var(--muted);
  font-size: var(--fs-small);
}

.toc a:hover {
  color: var(--accent);
}

/* ---------------------------------------------------------------------- FAQ */

.faq-list {
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: var(--fs-h3);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding-top: var(--space-3);
  color: var(--muted);
}

/* -------------------------------------------------------------------- منابع */

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.source-list a {
  color: var(--accent);
  text-decoration: none;
}

.source-list a:hover {
  text-decoration: underline;
}

.source-list .publisher {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* -------------------------------------------------------------- نویسنده */

.author-box {
  display: flex;
  gap: var(--space-6);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-12) 0;
}

.author-avatar {
  border-radius: 999px;
  flex-shrink: 0;
  object-fit: cover;
}

.author-header {
  padding-block: var(--space-16);
}

.author-header .wrap {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  flex-wrap: wrap;
}

.author-avatar-lg {
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.author-name {
  margin-bottom: var(--space-2);
}

.topic-box {
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-12) 0;
}

/* ---------------------------------------------------------------- گالری */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
}

.gallery figure {
  margin: 0;
}

.gallery img {
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ------------------------------------------------------------------ تصمیم */

.decision-card {
  padding: var(--space-6) 0;
  border-top: var(--border);
}

.decision-card:first-of-type {
  border-top: none;
  padding-top: 0;
}

.decision-card h3 {
  margin-bottom: var(--space-2);
}

.rejected {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------- چک‌لیست */

.check-list,
.cross-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.check-list li,
.cross-list li {
  position: relative;
  padding-inline-start: var(--space-8);
}

.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 14px;
  height: 8px;
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.cross-list li {
  color: var(--muted);
}

.cross-list li::before {
  content: "×";
  position: absolute;
  inset-inline-start: 2px;
  top: -2px;
  color: var(--muted);
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* ------------------------------------------------------------ فرآیند خدمت */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

.step-list li {
  position: relative;
  padding-inline-start: var(--space-16);
}

.step-list .step-number {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.alt-bg-inset {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

/* ------------------------------------------------------------- خط زمانی */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--prose-width);
}

.timeline li {
  position: relative;
  padding-inline-start: var(--space-8);
  padding-bottom: var(--space-6);
  border-inline-start: 2px solid var(--line);
  margin-inline-start: 6px;
}

.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.timeline li:last-child {
  border-inline-start-color: transparent;
  padding-bottom: 0;
}

/* -------------------------------------------------------------- تماس */

.contact-form-wrap {
  max-width: 560px;
}

/* فرم + ستونِ «مستقیم در تماس باشید». زیر ۸۶۰px ستون‌ها روی هم می‌آیند. */
.contact-layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 860px) {
  .contact-layout { grid-template-columns: minmax(0, 560px) minmax(0, 340px); }
}

.contact-direct {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.contact-direct h2 { font-size: var(--fs-h3); margin: 0; }

.contact-promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--muted);
}

.contact-promises li::before {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-end: var(--space-2);
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.contact-channels { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.contact-channels a { font-weight: 600; }
.contact-phone { font-size: var(--fs-h3); }

.office { margin: 0; color: var(--muted); }
.office-city { display: block; font-weight: 600; color: inherit; }
.contact-offices { display: grid; gap: var(--space-3); }
.site-footer .office { color: var(--ink-muted); }
.site-footer .office-city { color: var(--ink-paper); }
/* شماره‌ی ltr در ستون راست‌چین فوتر به لبه‌ی چپ نپرد */
.site-footer address a[dir="ltr"] { justify-self: start; }

.contact-form-wrap form {
  display: grid;
  gap: var(--space-4);
}

.contact-form-wrap .field label span {
  color: var(--accent);
  margin-inline-start: var(--space-1);
}

.contact-form-wrap .help {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-top: var(--space-1);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

.alert-error {
  background: var(--accent-soft);
  color: var(--accent);
}

.thanks-page {
  padding-block: var(--space-32);
  max-width: 560px;
}

.thanks-page h1 {
  margin-bottom: var(--space-6);
}

.thanks-page p {
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------- درباره */

.about-hero {
  padding-block: var(--space-32) var(--space-16);
}

.about-hero h1 {
  font-size: var(--fs-h1);
  max-width: var(--prose-width);
}

.narrative-block .prose {
  padding-block: 0 var(--space-8);
}

.about-hero .lead {
  max-width: var(--prose-width);
  margin-top: var(--space-6);
  font-size: var(--fs-h3);
  color: var(--muted);
}

.narrative-block .signature {
  margin-top: var(--space-8);
  color: var(--muted);
}

/* -------------------------------------------------------------- حالت خالی */

.empty-state {
  padding: var(--space-24) 0;
  text-align: center;
  color: var(--muted);
}

/* ============================================================ */
/*  نظرها — سبک X، با انضباط design-system                      */
/*  طراحی کامل: vault/website/tech-comments.md                  */
/* ============================================================ */

.comments {
  border-top: var(--border);
}

.comments-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.comments-count {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--muted);
  padding: 2px var(--space-3);
  background: var(--surface);
  border-radius: 999px;
}

.comments-empty {
  color: var(--muted);
  padding-block: var(--space-8);
}

/* ------------------------------------------------------------ فرم نظر */

.comment-form-wrap {
  margin-bottom: var(--space-12);
}

.comment-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
}

.comment-form.is-reply {
  background: var(--paper);
  margin-top: var(--space-4);
}

.comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .comment-form-row { grid-template-columns: 1fr; }
}

.comment-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.comment-note {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-inline-start: auto;
}

.comment-replying-to {
  font-size: var(--fs-small);
  color: var(--muted);
}

.comment-sent {
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}

/* ⚠️ honeypot — با CSS پنهان می‌شود نه با type=hidden. ربات فیلد
   hidden را رد می‌کند ولی متنیِ پنهان‌شده با CSS را پر می‌کند. */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- نخ */

.comment-thread {
  display: grid;
  gap: var(--space-8);
}

.comment {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  user-select: none;
}

.comment.is-author > .comment-avatar {
  background: var(--ink);
  color: var(--paper);
}

.comment-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.comment-name {
  font-weight: 700;
  color: var(--ink);
}

.comment-badge {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.comment-sep { color: var(--line); }

.comment-replying {
  font-size: var(--fs-caption);
}

.comment-body {
  line-height: var(--lh-body);
}

.comment-body p { margin-bottom: var(--space-3); }
.comment-body p:last-child { margin-bottom: 0; }

.comment-body a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.comment-body blockquote {
  border-inline-start: 2px solid var(--line);
  padding-inline-start: var(--space-4);
  color: var(--muted);
  margin-block: var(--space-3);
}

.comment-body code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ------------------------------------------------------------- کنش‌ها */

.comment-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.comment-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* ⚠️ حداقل هدف لمسی ۴۴px (design-system §۸). پدینگ منفی حاشیه
     می‌گیرد تا از نظر بصری فشرده بماند ولی ناحیه لمس بزرگ باشد. */
  min-height: 44px;
  padding-inline: var(--space-2);
  margin-inline-start: calc(var(--space-2) * -1);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease);
}

.comment-action:hover { color: var(--ink); }

.comment-like:hover,
.comment-like.is-liked { color: var(--accent); }

.comment-like svg { transition: transform var(--dur-fast) var(--ease); }
.comment-like:active svg { transform: scale(0.86); }

.comment-reply-slot:not(:empty) { margin-top: var(--space-2); }

/* --------------------------------------------------------- پاسخ‌ها */

/* یک سطح تورفتگی و بس — نخ در RTL خیلی زود ناخوانا می‌شود.
   عمق بیشتر در مدل صاف می‌شود (tech-comments.md § نخ‌بندی). */
.comment-replies {
  margin-top: var(--space-6);
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--line);
  display: grid;
  gap: var(--space-6);
}

.comment-replies .comment {
  grid-template-columns: 32px 1fr;
}

.comment-replies .comment-avatar {
  width: 32px;
  height: 32px;
  font-size: var(--fs-body);
}

/* ==================================================== هدر شناور روی هیرو

   هدر در کل سایت چسبان است. در صفحه‌ای که هیرو سینمایی دارد (body با کلاس
   has-cinema-hero) شفاف روی هیرو می‌نشیند و بعد از اسکرول شیشه‌ای می‌شود.

   ⚠️ در حالت شفاف position: fixed است نه sticky — با sticky هدر جای خودش
   را در جریان صفحه نگه می‌دارد و یک نوار روشن بالای هیرو تیره می‌ماند.
   جبران ارتفاعش در padding-block خودِ .hero-cinema است. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* ⚠️ روی هیرو، هدر **هیچ‌وقت** یک نوارِ تمام‌عرض نمی‌شود. اندازه‌گیری
   نسخه‌ی قبلی: نوار rgb(15,23,32) با پرشِ ۳۹ واحدی روشنایی در y=77 —
   یک درزِ سختِ قابل‌تشخیص، و بدتر، آبیِ سرد روی تصویری که کهربایی است.
   حالا خودِ <nav> یک کپسولِ شناور است: لبه‌ای برای بریدن تصویر نمی‌ماند. */
.has-cinema-hero .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom-color: transparent;
  /* هیچ لبه‌ای نباید بماند */
  border-bottom: 0;
  /* ⚠️ این خط حیاتی است. backdrop-filter روی عنصری که پس‌زمینه‌اش شفاف
     است هم اثر می‌گذارد — کلِ نوارِ تمام‌عرض را blur و saturate می‌کند و
     یک باندِ روشنِ شبح‌مانند با لبه‌ی سخت پشت کپسول می‌سازد. شفاف‌بودن
     پس‌زمینه آن را خنثی نمی‌کند؛ باید صراحتاً خاموش شود. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* ⚠️ --glass-fx را liquid-glass.js بازنویسی می‌کند و url(#...) انکسار را
   اضافه می‌کند. مقدار پیش‌فرض همین‌جاست تا بدون جاوااسکریپت هم شیشه‌ی
   مات بماند، نه جعبه‌ی شفافِ بی‌شکل. */
.has-cinema-hero .site-header nav {
  position: relative;
  height: 62px;
  margin-block-start: 14px;
  padding-inline: 14px 10px;
  border-radius: var(--radius-pill);
  /* ⚠️ نکته‌ی کلیدی، با اندازه‌گیری: پشتِ این کپسول تقریباً **هیچ
     جزئیاتی نیست**. انرژی فرکانس‌بالای پس‌زمینه پشت هدر در سراسر
     اسکرول ۱.۸۴ است (فقط در انتها، وقتی برج‌ها بالا می‌آیند، ۹.۲۳).
     روی چنین سطحی هیچ فیلتری — تاری، انکسار، یا حتی WebGL — نمی‌تواند
     «شیشه» بسازد: چیزی نیست که خم شود.

     پس شیشه‌بودن از **لبه** می‌آید: نورِ باریکِ جهت‌دار بالا، پخِ داخلی،
     و سایه‌ی عمیقِ بیرونی. همان کاری که شیشه‌ی اپل روی زمینه‌ی یک‌دست
     می‌کند. انکسار سرِ جایش می‌ماند و در صفحه‌های روشن — جایی که متن از
     زیر هدر رد می‌شود — واقعاً دیده می‌شود (سنجش: ۳۰۲۸ پیکسل، Δ تا ۶۴).

     گرادیانِ زمینه از بالا روشن‌تر است: شیشه نورِ آسمان را می‌گیرد. */
  background: linear-gradient(180deg,
    rgb(255 236 214 / 0.09), rgb(20 13 9 / 0.16) 55%, rgb(12 8 5 / 0.24));
  border: 0;
  backdrop-filter: var(--glass-fx, blur(20px) saturate(150%));
  -webkit-backdrop-filter: var(--glass-fx, blur(20px) saturate(150%));
  box-shadow:
    /* عمق: کپسول باید **روی** صحنه شناور باشد، نه رویش چسبیده */
    0 24px 70px rgb(0 0 0 / 0.55),
    0 4px 14px rgb(0 0 0 / 0.30),
    /* پخِ داخلی — لبه‌ی بالا نور می‌گیرد، لبه‌ی پایین سایه */
    inset 0 1px 0 rgb(255 244 230 / 0.28),
    inset 0 10px 22px -14px rgb(255 226 200 / 0.40),
    inset 0 -1px 0 rgb(0 0 0 / 0.35);
  transition:
    background var(--dur) var(--ease),
    margin var(--dur) var(--ease);
}

/* وقتی انکسار واقعاً سوار شد، تاری کمتری لازم است — شیشه باید پشتش را
   نشان دهد، نه پنهان کند. */
.has-cinema-hero .site-header nav.is-liquid {
  background: linear-gradient(180deg,
    rgb(255 236 214 / 0.10), rgb(20 13 9 / 0.10) 55%, rgb(12 8 5 / 0.18));
}

@supports not (backdrop-filter: blur(4px)) {
  .has-cinema-hero .site-header nav { background: var(--glass-strong); }
}

/* لبه‌ی شیشه — نوارِ ۱ پیکسلیِ درخشان که موس را دنبال می‌کند.
   ⚠️ حاشیه‌ی معمولی یکنواخت است و مثل «کادر» می‌خواند. شیشه‌ی واقعی
   فقط جایی برق می‌زند که نور به لبه می‌خورد. با mask ساخته می‌شود تا
   فقط ۱ پیکسلِ کناره رنگ بگیرد. */
.has-cinema-hero .site-header nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background:
    /* نقطه‌ی نوری که موس را دنبال می‌کند */
    radial-gradient(300px circle at var(--mx, 26%) var(--my, 30%),
                    rgb(255 248 236 / 0.95), rgb(255 214 180 / 0.30) 38%,
                    rgb(255 255 255 / 0.05) 68%),
    /* نورِ ثابتِ بالا — بدون این، لبه در نبودِ موس مرده است */
    linear-gradient(180deg,
      rgb(255 246 232 / 0.55) 0%,
      rgb(255 214 180 / 0.10) 42%,
      rgb(255 190 150 / 0.03) 62%,
      rgb(255 220 190 / 0.16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* دکمه‌ی داخل کپسول کوتاه‌تر است تا کپسول را باد نکند */
.has-cinema-hero .header-cta { min-height: 42px; padding: 10px 20px; }

.has-cinema-hero .site-header .brand,
.has-cinema-hero .site-header ul a {
  color: var(--ink-paper);
}

.has-cinema-hero .site-header ul a[aria-current="page"] {
  color: var(--accent-bright);
}

.has-cinema-hero .site-header ul a::after {
  background: var(--accent-bright);
}

.has-cinema-hero .nav-toggle { border-color: var(--ink-line); }
.has-cinema-hero .nav-toggle-bars,
.has-cinema-hero .nav-toggle-bars::before,
.has-cinema-hero .nav-toggle-bars::after { background: var(--ink-paper); }
.has-cinema-hero .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }

/* بعد از اسکرول کپسول کمی جمع و مات‌تر می‌شود — نه اینکه به نوار تبدیل
   شود. تفاوت باید حس شود، نه دیده. */
.has-cinema-hero .site-header.is-stuck nav {
  margin-block-start: 8px;
  background: var(--glass-strong);
  border-color: rgb(255 214 180 / 0.22);
}

@media (max-width: 900px) {
  /* ⚠️ کپسول با margin-inline: auto تمام‌عرض می‌شد و گوشه‌های گردش دقیقاً
     روی لبه‌ی نمایشگر بریده می‌شد — شبیه نوارِ شکسته، نه کپسول. */
  .has-cinema-hero .site-header nav {
    height: 56px;
    margin-inline: 12px;
    padding-inline: 8px 6px;
  }

  /* منوی بازشونده در حالت تیره باید زمینه تیره بگیرد وگرنه متن سفید روی
     کاغذ روشن می‌افتد.
     ⚠️ حالا از زیر یک کپسولِ گرد می‌آید، پس خودش هم باید گرد و جدا باشد،
     وگرنه مستطیلی می‌شود چسبیده به یک پیل. */
  /* ⚠️ زمینه‌ی منو تقریباً مات است، نه شیشه‌ی رقیق. علتش سنجیده شد:
     این <ul> فرزندِ یک عنصرِ backdrop-filter-دار (خودِ کپسول) است و
     تاریِ خودش روی پس‌زمینه‌ی صفحه اعمال نمی‌شود — تصویرِ پشت، **تیز**
     می‌ماند. با ۰.۷۸ آلفا، «شروع پروژه» دقیقاً روی سیلوئت و خط افق
     می‌افتاد و خوانده نمی‌شد. خوانایی اینجا بر جلوه می‌چربد. */
  .has-cinema-hero .site-header ul {
    top: calc(100% + 8px);
    background: rgb(16 11 8 / 0.96);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
    overflow: hidden;
  }

  .has-cinema-hero .site-header ul a { border-bottom-color: var(--glass-line); }
  .has-cinema-hero .site-header ul li:last-child a { border-bottom: 0; }

  /* ⚠️ باید .has-cinema-hero داشته باشد — `.has-cinema-hero .site-header
     ul a` رنگ روشن را برمی‌گرداند و CTA از بقیه‌ی آیتم‌ها جدا نمی‌شود. */
  .has-cinema-hero .site-header .nav-cta a {
    color: var(--accent-bright);
    background: rgb(242 104 60 / 0.10);
  }
}

/* =========================================== ظاهر شدن با اسکرول (بدون JS)

   با animation-timeline: view() انجام می‌شود، نه IntersectionObserver.
   در مرورگری که از آن پشتیبانی نمی‌کند، همان انیمیشن زمان‌محور اجرا و
   تمام می‌شود — یعنی المان در هر حال دیده می‌شود، نه اینکه پنهان بماند.
   ⚠️ هرگز حالت اولیه را در CSS جدا از انیمیشن ننویس؛ آن‌وقت مرورگر بدون
   پشتیبانی محتوا را برای همیشه مخفی می‌کند. */

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

.js .section-header,
.js .narrative-grid,
.js .grid > .card,
.js .why-item,
.js .process li,
.js .cta #short-form-wrapper {
  animation: reveal-in 700ms var(--ease) both;
}

@supports (animation-timeline: view()) {
  .js .section-header,
  .js .narrative-grid,
  .js .grid > .card,
  .js .why-item,
  .js .process li,
  .js .cta #short-form-wrapper {
    animation-timeline: view();
    animation-range: entry 6% cover 26%;
    animation-duration: auto;
  }
}

/* هیرو خودش انیمیشن ورود دارد — نباید دوباره اینجا هم بگیرد */
.hero-cinema .section-header { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js .section-header,
  .js .narrative-grid,
  .js .grid > .card,
  .js .why-item,
  .js .process li,
  .js .cta #short-form-wrapper {
    animation: none;
  }
}

/* ==================================================== صحنه هیرو: چرخش افق

   خط نارنجی روی خودِ خط افق می‌نشیند و از لولای سمت راست می‌چرخد.
   همان چرخش، «آینده» را باز می‌کند — و در پایان با یک دور کامل ۳۶۰
   درجه کل قاب را به تصویر دوم می‌رساند.

   ⚠️ زاویه یک متغیر است، نه دو انیمیشن موازی. `--a` هم خط را می‌چرخاند
   هم برش مخروطی را باز می‌کند، پس این دو **هرگز** نمی‌توانند از هم جدا
   شوند. نسخه‌ی قبلی دو کی‌فریم موازی داشت و همیشه یک قدم عقب‌وجلو بود.

   اعداد از خودِ تصاویر: نسبت 1.9131 ، افق 61.638%
   تقسیم تایم‌لاین: ۰–۷۰٪ روایت (۰→۱۸°) ، ۷۰–۱۰۰٪ دور کامل (۱۸→۳۶۰°) */

@property --a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.stage {
  --ratio: 1.9131;
  --horizon: 61.638%;
  position: relative;
  height: 560svh;
  /* ⚠️ قاعده‌ی سراسری section{padding-block: var(--space-24)} اینجا هم
     می‌افتاد و کادر چسبان را ۹۶px پایین می‌برد — نوار بالا و پایین
     نامتقارن می‌شد و یک درز افقی می‌ساخت. */
  padding-block: 0;
  /* ⚠️ --ink آبی‌فام است (15,23,32) ولی لبه‌های پلیت گرم‌اند
     (24,19,15 بالا / 11,8,6 پایین). با --ink، درزِ نوارِ بالا و پایین
     به‌صورت یک تغییر رنگ دیده می‌شد. */
  background: rgb(14 10 8);
  color: var(--ink-paper);
}

/* ⚠️ عمق واقعی، نه زوم. با perspective هر لایه به نسبت Z خودش جابه‌جا
   می‌شود؛ جابه‌جا کردن perspective-origin (نه خود لایه‌ها) پارالاکس
   واقعی می‌دهد. مقیاس جبرانی (P−z)/P اندازه‌ی ظاهری را حفظ می‌کند. */
.stage-pin {
  --px: 0;
  --py: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  perspective-origin:
    calc(50% + var(--px) * 9%)
    calc(50% + var(--py) * 7%);
  /* ⚠️ transition عمداً نیست — میرایی در حلقه‌ی rAF انجام می‌شود
     (hero-particles.js). transition خطی است و به هر حرکت موس یک بار
     می‌پرد؛ دنبال‌کردن فنری شتاب و اینرسی دارد. */
}

.stage-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* درزِ نوار تیره را محو می‌کند. روی خودِ تصویر نمی‌نشیند تا محتوایی
   از دست نرود — فقط یک گرادیان هم‌رنگ پس‌زمینه روی لبه‌ها. */
/* ⚠️ محو باید **داخل** تصویر برود، نه فقط روی نوار. لبه‌ی بالای قاب
   دقیقاً جایی است که شفق نور روشن است؛ اگر محو همان‌جا تمام شود، برش
   دیده می‌شود. با ورود به تصویر، مثل افت طبیعی نور به نظر می‌رسد. */
.stage-pin::before,
.stage-pin::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 4;
  pointer-events: none;
}

.stage-pin::before {
  top: 0;
  /* ⚠️ فقط کمی بیشتر از خودِ نوار تیره. مقدار قبلی ۳۰svh بود و ۲۸۰
     پیکسل داخل تصویر می‌رفت — بالای شفق نور را کم‌رنگ می‌کرد. */
  height: 8svh;
  background: linear-gradient(to bottom, rgb(14 10 8) 0 46%, transparent);
}

.stage-pin::after {
  bottom: 0;
  height: 7svh;
  background: linear-gradient(to top, rgb(14 10 8) 0 50%, transparent);
}

.stage-frame {
  position: absolute;
  top: 50%;
  /* ⚠️ left فیزیکی، نه inset-inline-start — clip-path و transform-origin
     در RTL آینه نمی‌شوند و قاب منطقی همه‌چیز را قرینه می‌کرد. */
  left: 50%;
  translate: -50% -50%;
  /* ⚠️ قبلاً max(100vw, 100svh × ratio) بود — رفتار cover. چون تصویر
     ۲.۳۳:۱ است و نمایشگرها ۱.۷۸:۱، برای پرکردن ارتفاع **۲۴٪ از عرض
     تصویر** بریده می‌شد و روی ۱۹۲۰ هم ۱.۳۲× بزرگ می‌شد.
     حالا با عرض جا می‌گیرد: صفر برش، و روی ۱۹۲۰ مقیاس ۱.۰۰×. */
  width: 100vw;
  aspect-ratio: 1915 / 1001;
  transform-style: preserve-3d;
}

.plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* برش مخروطی: از راستِ افق شروع می‌شود و به اندازه‌ی --a باز می‌شود.
   در ۰ درجه سطحش صفر است، در ۳۶۰ درجه کل قاب. همان یک متغیر. */
.plate-wedge {
  /* ⚠️ زاویه‌ی conic از ساعت ۱۲ شروع می‌شود و ساعتگرد است، پس «چپ» =
     ۲۷۰ درجه. خط با rotate مثبت سرِ چپش را **بالا** می‌برد، یعنی جهتش
     از ۲۷۰ ساعتگرد بالا می‌رود. پس قطاع باید [۲۷۰ , ۲۷۰+a] باشد.
     نسخه‌ی اول `from calc(270deg - a)` بود که قطاع را پادساعتگرد باز
     می‌کرد — ماسک پایین می‌رفت و خط بالا، روی دو طرف مخالف. */
  -webkit-mask-image: conic-gradient(
    from 270deg at 100% 61.638%,
    #000 0deg var(--a), transparent var(--a) 360deg);
  mask-image: conic-gradient(
    from 270deg at 100% 61.638%,
    #000 0deg var(--a), transparent var(--a) 360deg);
}

/* --- شکاف فضازمان ------------------------------------------------------

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

   ⚠️ ترفند هم‌ترازی: نوار حول لولا می‌چرخد (rotate: var(--a))، و عدسیِ
   داخلش **خلاف همان زاویه** می‌چرخد. پس محتوای عدسی نسبت به قاب ثابت
   می‌ماند و فقط از پنجره‌ی باریکِ چرخان دیده می‌شود — دقیقاً مثل یک
   برش واقعی در فضا، نه یک نوار چسبانده‌شده روی تصویر.

   اعداد از هندسه درآمده‌اند، نه چشمی:
     ضخامت نوار r = 1.4% از ارتفاع قاب
     top نوار      = افق − r/2 = 60.938%
     ارتفاع عدسی   = 100/r × 100 = 7142.86%   (یعنی ۱۰۰٪ قاب)
     top عدسی      = −(افق − r/2)/r × 100 = −4352.71%
   اگر افق یا ضخامت عوض شد، هر چهار عدد باید دوباره حساب شوند. */

.rift-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* عدسی WebGL — فقط نوار را می‌کشد، بیرونش شفاف است */
.rift-gl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ⚠️ وقتی WebGL بالا آمد، نسخه‌ی CSS باید برود وگرنه دو شکاف روی هم
   می‌افتند. تا آن لحظه CSS نمایش می‌دهد، پس هیچ پرشی دیده نمی‌شود. */
.has-gl-rift .rift,
.has-gl-rift .plate,
.has-gl-rift .stage-figure { display: none; }

.rift {
  --rift-h: 1.4%;
  position: absolute;
  left: 0;
  right: 0;
  top: 60.938%;
  height: var(--rift-h);
  transform-origin: 100% 50%;   /* لولا: انتهای راستِ افق */
  rotate: var(--a);
  z-index: 1;
}

/* ⚠️ برش اینجاست نه روی .rift — وگرنه هاله‌ی بیرونی هم بریده می‌شود. */
.rift-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* لبه‌ی زنده: جابه‌جایی نویزی (موج) + تنفس ضخامت.
     ⚠️ اندازه‌گیری اول این فیلتر را «فاجعه» نشان داد (۶ فریم) — ولی آن
     عدد از Chromium headless بدون شتاب گرافیکی بود. با GPU هزینه‌اش
     صفر است (۶۱ در برابر ۶۰). روی موبایل محض احتیاط خاموش می‌شود. */
  filter: url(#rift-wave);
  transform-origin: 50% 50%;
  animation: rift-breathe 9s ease-in-out infinite;
}

@keyframes rift-breathe {
  0%, 100% { transform: scaleY(1); }
  38%      { transform: scaleY(1.18); }
  64%      { transform: scaleY(0.9); }
}

/* شیمر: باریکه‌ی روشنی که در طول شکاف می‌دود. همان «drift» نور روی
   لبه‌ی شیشه، با یک translate ساده به‌جای شیدر. */
.rift-shimmer {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 34%;
  height: 3px;
  left: -34%;
  background: linear-gradient(to right,
    transparent, rgb(255 244 232 / 0.75) 48%, transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: rift-shimmer 7.5s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes rift-flow {
  from { background-position: 0% 0; }
  to   { background-position: 190% 0; }
}

@keyframes rift-shimmer {
  0%, 12%  { translate: 0 -50%; opacity: 0; }
  22%      { opacity: 0.9; }
  78%      { opacity: 0.9; }
  100%     { translate: 400% -50%; opacity: 0; }
}

.rift-lens {
  position: absolute;
  left: 0;
  width: 100%;
  top: -4352.71%;
  height: 7142.86%;
  /* چرخش معکوس، بعد بزرگ‌نمایی و جابه‌جایی عمودی — همان انکسار */
  rotate: calc(var(--a) * -1);
  /* ⚠️ درصدِ transform-origin نسبت به **جعبه‌ی عدسی** است، و جعبه‌ی
     عدسی دقیقاً هم‌اندازه‌ی قاب است — پس همان درصدِ افق درست است. */
  transform-origin: 100% 61.638%;
  scale: 1.09;
  /* جابه‌جایی به px، نه درصد: درصد نسبت به ارتفاع عدسی حساب می‌شود و
     مقدارهای ریز را غیرقابل‌کنترل می‌کند. */
  translate: 0 -9px;
  /* خمِ غیرخطی — عدسی دیگر فقط بزرگ نمی‌کند، محتوا را می‌پیچاند */
  filter: url(#rift-bend);
}

.rift-lens img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* داخل شکاف نور تندتر و اشباع‌تر است — حس «انرژی آن‌طرف» */
  filter: brightness(1.34) saturate(1.16) contrast(1.05);
}

/* --- لبه‌ها ------------------------------------------------------------
   ⚠️ در شیشه‌ی واقعی **مرز** می‌درخشد نه وسط (بازتاب کلی داخلی). نسخه‌ی
   اول یک هسته‌ی روشن وسطِ نوار داشت و برای همین «خط لیزری» به نظر
   می‌رسید. حالا دو لبه‌ی درخشان داریم و وسط، شیشه‌ی شفاف است. */

.rift-edge,
.rift-fringe {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  pointer-events: none;
}

.rift-edge {
  height: 2px;
  background: linear-gradient(to right,
    rgb(255 214 190 / 0) 0%,
    rgb(255 240 226 / 0.55) 8%,
    #fff 26%,
    rgb(255 236 220 / 0.7) 44%,
    #fff 58%,
    rgb(255 240 226 / 0.6) 78%,
    rgb(255 214 190 / 0) 100%);
  background-size: 190% 100%;
  /* ⚠️ لبه‌ها عمداً محوند نه خط. نسخه‌ی اول دو باریکه‌ی روشن داشت و
     همان بود که «خط لیزری» به نظر می‌رسید — خودِ انکسار باید نوار را
     تعریف کند. همین قاعده در شیدر WebGL هم اعمال شده (rimLine = 0). */
  opacity: 0.28;
  filter: blur(2.5px);
  box-shadow: 0 0 22px rgb(255 170 120 / 0.22);
  animation: rift-flow 13s linear infinite;
}

.rift-edge-a { top: 0; }
.rift-edge-b { bottom: 0; animation-direction: reverse; }

/* پاشش رنگ: نور که خم می‌شود طول‌موج‌ها جدا می‌شوند. هر لبه فرینج
   خودش را دارد و رنگ‌ها قرینه‌اند — همان چیزی که در شیشه می‌بینی. */
.rift-fringe {
  height: 1.5px;
  opacity: 0.4;
  mix-blend-mode: screen;
  filter: blur(1.6px);
}

.rift-fringe-warm {
  top: 2px;
  background: linear-gradient(to right, transparent, #ff6a28 38%, #ffa864 68%, transparent);
}

.rift-fringe-cool {
  bottom: 2px;
  background: linear-gradient(to right, transparent, #2f9bff 42%, #86dcff 74%, transparent);
}

/* شیمر: باریکه‌ی روشنی که در طول شکاف می‌دود */
.rift-shimmer {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 30%;
  height: 100%;
  left: -30%;
  background: linear-gradient(to right,
    transparent, rgb(255 248 240 / 0.5) 48%, transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: rift-shimmer 7.5s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes rift-flow {
  from { background-position: 0% 0; }
  to   { background-position: 190% 0; }
}

@keyframes rift-shimmer {
  0%, 12%  { translate: 0 -50%; opacity: 0; }
  22%      { opacity: 0.95; }
  78%      { opacity: 0.95; }
  100%     { translate: 430% -50%; opacity: 0; }
}

/* هاله‌ی بیرونی — شکاف باید روی تصویر «بنشیند» نه «بچسبد» */
.rift::after {
  content: "";
  position: absolute;
  inset: -260% 0;
  background: linear-gradient(to bottom,
    transparent, rgb(242 104 60 / 0.07) 44%, rgb(255 200 165 / 0.13) 50%,
    rgb(242 104 60 / 0.07) 56%, transparent);
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (max-width: 860px) {
  .rift { --rift-h: 2.1%; }
  /* فیلتر SVG روی دستگاه‌های ضعیف‌تر ریسک دارد — فقط تنفس می‌ماند */
  .rift-window { filter: none; }
}

/* --- سیلوئت ----------------------------------------------------------
   ⚠️ بالای خط — خط باید از **پشت** آدم رد شود.
   جلوتر از پلیت در عمق، چون واقعاً نزدیک‌تر به دوربین است. */
.stage-figure {
  position: absolute;
  left: 21.253%;
  /* ⚠️ 53.946% + 1.4% — همان FIG_SHIFT در hero-lens.js. سیلوئت روی خط
     افق ایستاده بود و شکاف هم روی همان افق لولا می‌زند، پس خط از وسط
     بدنش رد می‌شد. هر دو نسخه باید یک عدد داشته باشند. */
  top: 55.346%;
  width: 5.953%;
  height: 11.888%;
  z-index: 3;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateZ(55px) scale(0.9542);   /* (1200-55)/1200 */
}

/* --- مه ---------------------------------------------------------------
   ⚠️ mix-blend-mode: screen روی نزدیک‌سیاه، سیاه را خاکستری می‌کند —
   کف روشنایی از ۱۶ به ۲۶ رفت و تصویر «شسته» شد. ماسک، مه را به جایی
   می‌برد که نور هست؛ هم فیزیکی درست است هم سیاهیِ نیمه‌ی راست (جای متن)
   دست‌نخورده می‌ماند. */

.stage-fog {
  position: absolute;
  /* داخل قاب، نه روی نوارهای تیره */
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(130px) scale(0.8917);   /* (1200-130)/1200 */
  -webkit-mask-image: radial-gradient(72% 88% at 20% 76%, #000 0 30%, transparent 76%);
  mask-image: radial-gradient(72% 88% at 20% 76%, #000 0 30%, transparent 76%);
}

.stage-fog span {
  position: absolute;
  inset: -30%;
  mix-blend-mode: screen;
  will-change: transform;
}

.fog-1 {
  background: radial-gradient(48% 42% at 30% 62%, rgb(255 168 110 / 0.10), transparent 70%);
  animation: fog-a 46s ease-in-out infinite alternate;
}

.fog-2 {
  background: radial-gradient(38% 34% at 62% 48%, rgb(255 200 150 / 0.07), transparent 72%);
  animation: fog-b 63s ease-in-out infinite alternate;
}

.fog-3 {
  background: radial-gradient(60% 30% at 18% 78%, rgb(210 150 110 / 0.09), transparent 68%);
  animation: fog-c 81s ease-in-out infinite alternate;
}

@keyframes fog-a {
  from { translate: -6% 2%;  scale: 1;    }
  to   { translate: 10% -3%; scale: 1.18; }
}

@keyframes fog-b {
  from { translate: 8% -2%;  scale: 1.12; }
  to   { translate: -9% 4%;  scale: 1;    }
}

@keyframes fog-c {
  from { translate: -4% -3%; scale: 1.06; }
  to   { translate: 7% 3%;   scale: 1.22; }
}

/* --- ذرات (canvas) ----------------------------------------------------
   نزدیک‌ترین لایه به دوربین: غبار جلوی لنز. */

/* ⚠️ ترتیب لایه‌ها با z-index صریح تعیین می‌شود نه با ترتیب DOM —
   غبار نزدیک باید **بالای** سیلوئت بیفتد و غبار دور زیرش، و یک کانواس
   نمی‌تواند هم‌زمان هر دو باشد.
     ۱ شکاف · ۲ غبار دور+میانی · ۳ سیلوئت · ۴ مه · ۵ غبار نزدیک · ۶ زاویه */
.stage-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-dust-back {
  z-index: 2;
  transform: translateZ(150px) scale(0.875);    /* (1200-150)/1200 */
}

.stage-dust-front {
  z-index: 5;
  /* نزدیک‌ترین لایه به دوربین: غبار جلوی لنز */
  transform: translateZ(300px) scale(0.75);     /* (1200-300)/1200 */
}

/* --- دانه فیلم: حذف شد -----------------------------------------------
   ⚠️ عمداً نیست. باندینگِ منبع (آسمان تیره فقط ۱۶ سطح روشنایی داشت،
   پله‌های ۴۲px) حالا با بازسازی گرادیان + دیتر، **داخل خودِ فایل تصویر**
   حل شده — در نواحی سایه و به‌ازای هر تراز جدا. یک لایه‌ی گرین روی کل
   قاب فقط نویز را به جاهای روشن هم برمی‌گرداند، همان‌جایی که لازم نیست.
   جزئیات: scratchpad/build_assets3.py و imagery-hero-series.md بخش ۶. */

/* --- متن --------------------------------------------------------------- */

.stage-copy {
  position: absolute;
  z-index: 5;
  inset-block: 0;
  inset-inline-start: 0;   /* در RTL یعنی سمت راست — نیمه‌ی تاریک */
  width: min(56ch, 92vw);
  padding-inline: clamp(20px, 5vw, 80px);
  display: grid;
  align-content: center;
  /* ⚠️ وسط‌چین نه. اندازه‌گیری نسخه‌ی قبل: ستون ۳۵۳ پیکسل با text-align
     center، و «Over distance, it becomes another destination.» در چهار
     سطرِ ناهموارِ وسط‌چین می‌شکست. یک لبه‌ی محکم — همان چیزی که تفاوتِ
     «عکس با متن رویش» و «صفحه‌ی طراحی‌شده» است. */
  text-align: start;
}

.stage-copy::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0 -40%;
  z-index: -1;
  background: linear-gradient(to left, var(--ink) 14%, rgb(15 23 32 / 0.5) 62%, transparent);
  pointer-events: none;
}

html[dir="ltr"] .stage-copy::before {
  background: linear-gradient(to right, var(--ink) 14%, rgb(15 23 32 / 0.5) 62%, transparent);
}

/* ⚠️ align-self لازم است. هر سه بیت در یک خانه‌ی گرید روی هم می‌نشینند،
   پس ارتفاع ردیف را بلندترینشان (بیت سوم، با دکمه‌ها) تعیین می‌کند. با
   stretch پیش‌فرض، بیتِ کوتاه به **بالای** آن ردیف می‌چسبد و متنِ دو
   سطری بالای کادر می‌افتد نه وسطش. */
.beat {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
}

.beat-en {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink-paper);
  /* ⚠️ متن لاتین در صفحه‌ی RTL باید dir خودش را داشته باشد وگرنه
     نقطه و علائم به اول خط می‌پرند. */
  direction: ltr;
  /* متن لاتین است ولی بلوکش در RTL به راست لنگر دارد؛ با تگ‌لاین فارسی
     زیرش روی یک لبه می‌نشیند. همین هم‌لبه‌بودن است که «پخته» می‌خواند. */
  text-align: right;
}

/* تیترِ فارسیِ بیت‌های ۲ و ۳ — همان مقیاسِ نمایشی، ولی راست‌به‌چپ و بدون
   فشردگیِ حروفِ لاتین (letter-spacing منفی حروفِ متصلِ فارسی را می‌شکند). */
.beat-title-fa {
  direction: rtl;
  text-align: start;
  letter-spacing: 0;
  line-height: 1.3;
}

.beat-fa {
  margin-top: var(--space-5, 20px);
  font-size: var(--fs-h3);
  color: var(--ink-muted);
  text-wrap: balance;
  text-align: start;
}

.beat-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.stage-copy .btn-ghost { color: var(--ink-paper); }

.stage-angle {
  position: absolute;
  z-index: 6;
  inset-inline-end: clamp(20px, 5vw, 64px);   /* در RTL یعنی چپ */
  top: calc(61.638% - 3.2em);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--accent-bright);
  opacity: 0;
  white-space: nowrap;
}

.stage-angle span { font-size: var(--fs-h2); font-weight: 700; }

/* --- مختصات کاشمر، گوشه‌ی پایینِ چپ ---------------------------------- */

.stage-meta {
  position: absolute;
  z-index: 6;
  bottom: clamp(20px, 3.4vh, 34px);
  /* ⚠️ فیزیکی، نه inset-inline-*. خودِ این المان dir="ltr" دارد (مختصات
     لاتین است)، پس inline-end رویش یعنی **راست** نه چپ — همان‌جا که
     راهنمای اسکرول است و رویش می‌افتاد. گوشه‌ی پایینِ چپ خواسته شده. */
  left: clamp(20px, 5vw, 64px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  white-space: nowrap;
  pointer-events: none;
}

.stage-meta-rule {
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-bright));
  flex: none;
}

/* --- راهنمای اسکرول --------------------------------------------------- */

.stage-scroll {
  position: absolute;
  z-index: 6;
  bottom: clamp(20px, 3.4vh, 34px);
  /* فیزیکی — قرینه‌ی مختصات، تا این دو هیچ‌وقت روی هم نیفتند */
  right: clamp(20px, 5vw, 80px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  pointer-events: none;
}

.stage-scroll-line {
  position: relative;
  width: 60px;
  height: 1px;
  background: var(--ink-line);
  overflow: hidden;
}

/* نقطه‌ای که در خط می‌دود — تنها انیمیشنِ زمان‌محورِ صحنه؛ بقیه اسکرول‌محورند */
.stage-scroll-line::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 18px;
  background: linear-gradient(to right, transparent, var(--accent-bright), transparent);
  animation: scroll-hint 2.2s var(--ease) infinite;
}

@keyframes scroll-hint {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-scroll-line::after { animation: none; inset-inline-start: 0; }
}

@media (max-width: 900px) {
  /* در موبایل هر دو نمی‌گنجند؛ راهنمای اسکرول مهم‌تر است */
  .stage-meta { display: none; }
}

/* ================================================== حالت ثابت (پیش‌فرض)

   ⚠️ عمداً بیرون از @supports. مرورگری که view-timeline ندارد باید یک
   فریم کامل و خوانا ببیند، نه صفحه‌ای خالی. */

.stage { height: auto; --a: 1deg; }

/* ⚠️ width: 100% اجباری است. با `width: auto` + `aspect-ratio` + یک
   `min-height` قطعی، کروم عرض را **از روی نسبت** حساب می‌کند نه از
   والد: روی نمایشگر ۳۹۰ پیکسلی، .stage-pin عرض ۱۲۵۹px می‌گرفت
   (۶۵۸ × ۱.۹۱۳۱) و کلِ سند را پهن می‌کرد. اندازه‌گیری‌شده — والد ۳۹۰
   بود و فرزند ۱۲۵۹.

   این فقط در مسیرِ بدون‌انیمیشن دیده می‌شد (prefers-reduced-motion، یا
   مرورگرِ بدون view-timeline)، و روی دسکتاپ پنهان می‌ماند چون ۱۲۵۹ از
   عرض کادر کمتر است. یعنی دقیقاً همان‌جایی می‌شکست که کسی نگاه نمی‌کند. */
.stage-pin {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 1915 / 1001;
  min-height: 78svh;
}
.beat-1 { opacity: 1; }
.stage-angle { opacity: 1; }

/* ============================================== حالت متحرک (اسکرول‌محور) */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ⚠️ scroll(nearest) اینجا کار نمی‌کند: .stage-pin به‌خاطر
       overflow:hidden خودش اسکرول-کانتینر است و سرریز عمودی ندارد، پس
       تایم‌لاین غیرفعال می‌شود (currentTime = null). */
    .stage {
      height: 560svh;
      view-timeline-name: --stage-progress;
      view-timeline-axis: block;
    }

    .stage-pin {
      position: sticky;
      top: 0;
      height: 100svh;
      aspect-ratio: auto;
      min-height: 0;
    }

    .stage,
    .rift,
    .stage-angle,
    .stage-scroll,
    .beat-1,
    .beat-2,
    .beat-3 {
      animation-timeline: --stage-progress;
      animation-range: contain 0% contain 100%;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .stage       { animation-name: sweep; }
    .rift        { animation-name: rift-intensity; }
    .stage-angle { animation-name: angle-mark; }
    /* راهنما فقط تا وقتی لازم است بماند: با اولین حرکت می‌رود */
    .stage-scroll { animation-name: scroll-cue-out; }
    .beat-1      { animation-name: beat-1; }
    .beat-2      { animation-name: beat-2; }
    .beat-3      { animation-name: beat-3; }

    /* مه تایم‌محور است و باید مستقل بماند */
    .stage-fog span { animation-timeline: auto; }
  }
}

@keyframes scroll-cue-out {
  0%   { opacity: 1; }
  5%   { opacity: 1; }
  10%  { opacity: 0; }
  100% { opacity: 0; }
}

/* یک متغیر، یک منبع حقیقت — خط و برش هرگز از هم جدا نمی‌شوند */
@keyframes sweep {
  0%    { --a: 0deg; }
  9.6%  { --a: 1deg; }
  32%   { --a: 4deg; }
  56%   { --a: 9deg; }
  70%   { --a: 18deg; }
  /* دور کامل: همین چرخش است که تصویر دوم را می‌رساند */
  100%  { --a: 360deg; }
}

/* ⚠️ شکاف در لحظه‌ی «یک درجه» باید اشاره باشد نه فریاد. شدتش با باز
   شدن زاویه بالا می‌آید — همان چیزی که روایت می‌گوید. */
@keyframes rift-intensity {
  0%   { opacity: 0; }
  6%   { opacity: 0.5; }
  32%  { opacity: 0.72; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes angle-mark {
  0%, 5.6%     { opacity: 0; }
  10.4%, 17.6% { opacity: 1; }
  24%, 100%    { opacity: 0; }
}

@keyframes beat-1 {
  0%, 12.8%   { opacity: 1; translate: 0 0; }
  21.6%, 100% { opacity: 0; translate: 0 -14px; }
}

@keyframes beat-2 {
  0%, 25.6%   { opacity: 0; translate: 0 14px; }
  32%, 46.4%  { opacity: 1; translate: 0 0; }
  52.8%, 100% { opacity: 0; translate: 0 -14px; }
}

/* ⚠️ بیت آخر تا انتها می‌ماند — دکمه‌های CTA نباید محو شوند */
@keyframes beat-3 {
  0%, 57.6%  { opacity: 0; translate: 0 14px; }
  66%, 100%  { opacity: 1; translate: 0 0; }
}

/* --- موبایل -----------------------------------------------------------
   ⚠️ در قاب باریک و بلند، cover قاب را ~۵ برابر عرض دید می‌کند و سیلوئت
   از کادر بیرون می‌افتد. اینجا قاب را با عرض جا می‌دهیم. */

@media (max-width: 860px) {
  /* ⚠️ روی صفحه‌ی باریک، جا دادن با عرض قاب را به نواری ۲۰۴ پیکسلی
     تبدیل می‌کرد. اینجا قاب عمداً از کادر پهن‌تر است و به چپ کشیده
     می‌شود تا نور و سیلوئت در کادر بمانند — برش وسط، آدم را حذف می‌کرد.

     ⚠️ چیدمانِ موبایل عمداً «تمام‌قاب» نیست. عدد و علتش:
     برای پر کردن کاملِ ارتفاع، قاب باید ۸۴۴×۱.۹۱۳۱ ≈ ۱۶۱۵px عرض بگیرد،
     یعنی از هر قاب فقط ۳۹۰/۱۶۱۵ = **۲۴٪ عرض** دیده می‌شود. ستونِ نور که
     ۰ تا ۲۲٪ قاب است، تقریباً کامل بیرون می‌افتد — یعنی دراماتیک‌ترین
     بخشِ تصویر. پس به‌جای پر کردنِ ارتفاع، تصویر از **بالا** تمام‌عرض
     می‌شود و پایینِ کادر به متن می‌رسد: چیدمانِ مجله‌ای، نه نوارِ سیاه
     در بالا و پایین.

     با ۶۶svh: قاب ۱۰۶۶px، پنجره‌ی دید ۸٪ تا ۴۴.۶٪ قاب — دو‌سومِ ستون
     نور، سیلوئت در x≈۹۰..۱۵۰، و خط افق در y≈۳۴۳. */
  .stage-frame {
    width: calc(66svh * var(--ratio));
    top: 0;
    left: 0;
    translate: -8% 0;
  }

  .stage-pin { perspective: 900px; }

  /* ⚠️ بلوکِ متن باید **از بالای لبه‌ی پایینیِ تصویر** شروع شود، نه از
     زیرش. قاب ۶۶svh است، پس لبه‌اش در ۶۶٪ ارتفاع کادر می‌افتد؛ اگر پرده‌ی
     تیره از ۵۹٪ شروع نشود، آن لبه یک خطِ برشِ افقیِ واضح می‌ماند. */
  .stage-copy {
    inset-block: 34svh 0;
    width: 100%;
    padding-block: 0 var(--space-16);
    background: linear-gradient(to top,
      rgb(12 9 7) 0%, rgb(12 9 7) 56%, rgb(12 9 7 / 0.72) 78%, transparent 100%);
    /* ⚠️ هر دو لازم است. قاعده‌ی پایه align-content: center دارد؛ بدون
       بازنویسی، ردیفِ گرید وسطِ بلوک می‌نشیند و بیتِ کوتاه ۱۷۰ پیکسل
       بالاتر از ته کادر می‌ماند — درست وسطِ هیچ. */
    align-content: end;
    align-items: end;
  }

  /* ⚠️ در دسکتاپ بیت‌ها وسطِ ردیف می‌نشینند (align-self: center). در
     موبایل بلوک به ته کادر لنگر دارد، پس بیتِ کوتاه هم باید ته بنشیند
     وگرنه وسطِ فضای خالی شناور می‌شود. */
  .beat { align-self: end; }

  .stage-copy::before { display: none; }

  .beat-en { font-size: clamp(28px, 8.6vw, 42px); }
  .beat-fa { margin-top: var(--space-4); font-size: var(--fs-body); }

  /* دکمه‌ها در عرض کم نباید بشکنند */
  .beat-actions { gap: var(--space-4); margin-top: var(--space-6); }
  .beat-actions .btn-primary { padding-inline: 22px; }

  /* ⚠️ نشانگر زاویه داخل .stage-frame است و قاب ۸٪ به چپ کشیده شده؛
     پس لبه‌ی چپش بیرونِ کادر می‌افتد و این نشانگر دیده نمی‌شود. به‌جای
     جابه‌جا کردنش، در موبایل کنار گذاشته می‌شود — کادر جا ندارد. */
  .stage-angle { display: none; }

  .stage-scroll { right: 20px; bottom: 18px; }
  .stage-scroll-line { width: 44px; }
}

/* --- تبلت و موبایلِ پهن --------------------------------------------------
   کادر پهن‌تر است، پس ۶۶svh زیرِ تصویر فضای خالیِ زیادی می‌گذارد و تیترِ
   ۴۲ پیکسلی در عرض ۷۶۸ ریز می‌خواند. قاب بلندتر و تیتر بزرگ‌تر. */

@media (min-width: 620px) and (max-width: 860px) {
  .stage-frame { width: calc(78svh * var(--ratio)); }
  .stage-copy { inset-block: 42svh 0; }
  .beat-en { font-size: clamp(38px, 6.4vw, 56px); }
  .beat-fa { font-size: var(--fs-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-fog span { animation: none; }
  .stage-pin { transition: none; }
  .beat { position: relative; opacity: 1; grid-area: auto; }
  .stage-copy { align-content: end; gap: var(--space-6); }
}

/* ⚠️ موبایل + کاهش حرکت با هم: هر سه بیت روی هم چیده می‌شوند (~۶۰۰px)
   ولی بلوکِ متن فقط از ۳۴svh تا ته کادر جا دارد (~۳۷۰px). سرریز به بالا
   می‌رفت و «ONE DEGREE» درست روی روشن‌ترین بخشِ ستونِ نور می‌افتاد.
   اینجا کادر بلندتر می‌شود — در این حالت اصلاً چسبان نیست، پس بلندشدنش
   فقط یعنی اسکرولِ عادی، نه انیمیشن. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .stage-pin { min-height: 132svh; }
  .stage-copy { inset-block: 46% 0; }
}

/* ==================================================================== فروشگاه

   کارت محصول، پنجره‌ی دریافت، صفحه‌ی محصول، نظرها، حساب.
   قواعد اسکیل ui-ux-pro-max که اینجا اعمال شده‌اند:
     - هدف لمسی حداقل ۴۴px (دکمه‌ها از .btn با min-height ۴۶ ارث می‌برند)
     - فوکوس همیشه دیده می‌شود (:focus-visible سراسری سایت دست نخورده)
     - هاور + تغییر نشانگر روی هر چیز کلیک‌پذیر، ۱۵۰-۳۰۰ms
     - تصویر با نسبت رزروشده — صفحه هنگام بارگذاری نمی‌پرد (CLS)
     - prefers-reduced-motion همه‌ی جابه‌جایی‌ها را خاموش می‌کند
   پالت/فونتِ پیشنهادیِ اسکیل عمداً کنار گذاشته شد: tokens.css تنها منبع رنگ است. */

/* ----------------------------------------------------------- شبکه و بخش */

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

@media (max-width: 1024px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pgrid { grid-template-columns: 1fr; } }

/* ⚠️ یک محصول در شبکه‌ی سه‌ستونه یعنی یک کارت تنها و دو ستون خالی — صفحه
   ناتمام به نظر می‌رسد. با یک محصول، کارت افقی و تمام‌عرض می‌شود.
   :has() نه کلاس قالب: تعداد کارت‌ها ممکن است در فهرست/مرتبط‌ها هم یک باشد. */
@media (min-width: 861px) {
  .pgrid:has(> .pcard:only-child) { grid-template-columns: minmax(0, 760px); justify-content: center; }

  .pgrid > .pcard:only-child {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4);
  }

  .pgrid > .pcard:only-child .pcard-body { padding: var(--space-4) 0; }
  .pgrid > .pcard:only-child .pcard-foot { border-top: 0; }
  .pgrid > .pcard:only-child .pcard-title { font-size: var(--fs-h2); }
  .pgrid > .pcard:only-child .pcard-tagline { -webkit-line-clamp: 3; }
}

/* فاصله‌ی عمودی بخش صفحه‌ی اصلی همان section عمومی است؛ فقط «محصولات دیگر» جمع‌تر */
.products-related { padding-block: var(--space-16); }

/* ----------------------------------------------------------- کاروسل محصولات

   بازطراحی ۲۰۲۶-۰۹-۱۵ — هم‌زبان با بخش خدمات/نمونه‌کار:
   ترک داخل .wrap؛ عرض اسلاید طوری است که همیشه عدد صحیح کارت دیده شود
   (۳ / ۲)، پس نه کارت نیمه‌بریده داریم نه ماسک محوکننده.
   فقط موبایل: ترک تا لبه‌ی صفحه باز می‌شود و کارت بعدی سرک می‌کشد.
   ⚠️ overflow فقط روی خود ترک؛ body هرگز اسکرول افقی نمی‌گیرد. */

.pcarousel {
  --pc-gap: var(--space-6);
  --pc-cols: 3;
  --pc-edge: 0px;
}

.pcarousel-head { margin-block-end: var(--space-8); }

.pcarousel-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pcarousel-nav { display: flex; gap: var(--space-2); }
.pcarousel-nav[hidden] { display: none; }

.pcarousel-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.pcarousel-btn svg { width: 20px; height: 20px; }

/* ⚠️ فقط دستگاه با هاور واقعی — روی لمس، :hover بعد از تپ روی دکمه می‌چسبد */
@media (hover: hover) {
  .pcarousel-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
}

.pcarousel-btn:active:not(:disabled) { transform: scale(0.94); }
.pcarousel-btn:disabled { opacity: 0.35; cursor: default; }

.pcarousel-track {
  list-style: none;
  display: flex;
  gap: var(--pc-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pc-edge);
  /* padding-block: جا برای بلند شدن کارت و سایه‌ی هاور — وگرنه overflow می‌بُردش.
     margin منفی همان padding را جبران می‌کند تا فاصله‌ی بخش عوض نشود. */
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--pc-edge)) calc(-1 * var(--space-6));
  padding: var(--space-2) var(--pc-edge) var(--space-6);
}

.pcarousel-track:focus-visible { outline-offset: -4px; }

/* با JS دکمه‌ها هستند؛ اسکرول‌بار تکراری است. بدون JS می‌ماند. */
.pcarousel.is-enhanced .pcarousel-track { scrollbar-width: none; }
.pcarousel.is-enhanced .pcarousel-track::-webkit-scrollbar { display: none; }

.pcarousel.is-enhanced.has-overflow .pcarousel-track { cursor: grab; }

/* هنگام درگ snap خاموش — وگرنه ترک زیر دست موس به عقب می‌پرد */
.pcarousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pcarousel-track.is-dragging .pcard { pointer-events: none; }

.pcarousel-slide {
  flex: 0 0 calc((100% - 2 * var(--pc-edge) - (var(--pc-cols) - 1) * var(--pc-gap)) / var(--pc-cols));
  display: flex;
  scroll-snap-align: start;
}

.pcarousel-slide > .pcard { flex: 1; }

/* ورود پلکانی کارت‌ها وقتی بخش به دید می‌آید (کلاس از JS) */
.pcarousel.is-enhanced .pcarousel-slide {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.pcarousel.is-enhanced.is-inview .pcarousel-slide { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .pcarousel { --pc-cols: 2; }
}

@media (max-width: 640px) {
  /* ۲۰px = padding-inline همان .wrap؛ کارت بعدی از لبه‌ی واقعی صفحه سرک می‌کشد */
  .pcarousel { --pc-cols: 1.18; --pc-gap: var(--space-4); --pc-edge: 20px; }
  .pcarousel-slide { flex-basis: calc((100% - 2 * var(--pc-edge) - var(--pc-gap)) / 1.18); }
  .pcarousel-head { margin-block-end: var(--space-6); }
  .pcarousel-actions { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .pcarousel.is-enhanced .pcarousel-slide { opacity: 1; transform: none; transition: none; }
}

/* ⚠️ max-width: none — .section-header پایه به عرض پاراگراف محدود است و
   لینکِ «همه» به‌جای انتهای ردیف، زیر متن می‌افتاد. */
.section-header-row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ----------------------------------------------------------- کارت محصول

   هم‌خانواده‌ی .card سایت (بازطراحی ۲۰۲۶-۰۹-۱۵): زمینه‌ی surface، شعاع radius-md،
   خط نازک، هاور ۲px + shadow-2 + خط نارنجی — نه کارت ۲۸px با تصویر بیرون‌زده و سایه‌ی سنگین.
   تصویر مربعی داخل کارت با فاصله؛ کارت فقط عنوان، یک‌خط، نوع و قیمت دارد.
   کل کارت کلیک‌پذیر است با ::after لینک عنوان؛ دکمه‌ی دریافت روی آن لایه. */

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.alt-bg .pcard { background: var(--paper); }

@media (hover: hover) {
  .pcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--accent);
  }
}

.pcard-media {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-md) - var(--space-3) / 2);
  background: var(--paper);
  overflow: hidden;
}

.pcard-media picture, .pcard-media img { display: block; width: 100%; height: 100%; }

.pcard-media img {
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

@media (hover: hover) {
  .pcard:hover .pcard-media img { transform: scale(1.03); }
}

.pcard-media-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-weight: 700;
}

.pcard-badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.9;
}

.pcard-badge.is-free { background: var(--paper); color: var(--accent); }

.pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: var(--space-4) var(--space-2) var(--space-1);
}

.pcard-kind {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pcard-title {
  font-size: 18px;
  line-height: 1.5;
}

.pcard-link { text-decoration: none; color: inherit; }
.pcard-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcard:hover .pcard-link { color: var(--accent); }
.pcard-link:focus-visible { outline: none; }
.pcard:has(.pcard-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* یک خط — کارت‌ها هم‌قد می‌مانند؛ متن کامل در صفحه‌ی محصول است */
.pcard-tagline {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcard-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border);
  margin-block-start: var(--space-3);
}

.pcard-meta { display: grid; gap: 0; }

.pcard-get {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 16px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pcard-get svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }

@media (hover: hover) {
  .pcard-get:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
  .pcard-get:hover svg { transform: translateX(-3px); }
}

/* ---- قیمت (کارت، صفحه، نوار موبایل) */

.pprice {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  line-height: 1.3;
}

.pprice-now { font-weight: 900; font-size: 17px; color: var(--ink); }
.pprice-now.is-free { color: var(--accent); }

.pprice-was {
  color: var(--muted);
  font-size: var(--fs-caption);
  text-decoration-color: rgb(199 67 26 / 0.7);
}

.pprice-off {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.pprice--lg .pprice-now { font-size: 30px; }
.pprice--lg .pprice-was { font-size: var(--fs-small); }

/* -------------------------------------------------------- پنجره‌ی دریافت */

.product-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgb(15 23 32 / 0.35);
  overflow: auto;
}

/* ⚠️ blur پس‌زمینه کاربرد دارد، نه تزئین: یعنی «این پنجره روی صفحه است و
   با کلیک بیرونش بسته می‌شود» (قاعده‌ی blur-purpose اسکیل). */
.product-dialog::backdrop {
  background: rgb(15 23 32 / 0.55);
  backdrop-filter: blur(4px);
}

.product-dialog[open] { animation: dialog-in 220ms var(--ease); }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.product-dialog-close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.product-dialog-close:hover { background: var(--surface); color: var(--ink); }
.product-dialog-close svg { width: 20px; height: 20px; }

.pbox-host { padding: var(--space-8) var(--space-6) var(--space-6); }

.account-login.pbox-host {
  max-width: 440px;
  background: var(--paper);
  border: var(--border);
  border-radius: 20px;
}

.pbox-loading { color: var(--muted); padding-block: var(--space-6); text-align: center; }

.pbox-head { padding-inline-end: var(--space-8); }
.pbox-kind { color: var(--accent); font-size: var(--fs-caption); font-weight: 700; }
.pbox-title { font-size: var(--fs-h3); line-height: 1.5; margin-top: 2px; }

.pbox-steps {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.pbox-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding-block-end: var(--space-2);
  border-block-end: 2px solid var(--line);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pbox-steps span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  font-weight: 700;
}

.pbox-steps .is-current { color: var(--ink); border-color: var(--accent); font-weight: 700; }
.pbox-steps .is-current span { background: var(--accent); color: var(--paper); }
.pbox-steps .is-done { color: var(--ink); border-color: rgb(199 67 26 / 0.35); }
.pbox-steps .is-done span { background: var(--accent-soft); color: var(--accent); }

.pbox-form { display: grid; gap: var(--space-4); }
.pbox-form .field { margin: 0; }

.pbox-form .field input {
  font-size: 20px;
  letter-spacing: 0.04em;
  padding-block: 14px;
  text-align: center;
}

/* کد تأیید: ارقام بازتر تا تک‌تک خوانده شوند */
.pbox[data-step="code"] .pbox-form .field input { letter-spacing: 0.5em; font-weight: 700; }

.pbox-submit { width: 100%; justify-content: center; }

/* حالت در حال ارسال — htmx روی فرم کلاس htmx-request می‌گذارد */
.pbox-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: pbox-spin 700ms linear infinite;
}

.htmx-request .pbox-spinner { display: inline-block; }
.htmx-request .pbox-submit { opacity: 0.85; cursor: progress; }

@keyframes pbox-spin { to { transform: rotate(360deg); } }

.pbox-help { color: var(--muted); font-size: var(--fs-caption); line-height: 1.9; }
.pbox-sent { font-size: var(--fs-small); margin-bottom: var(--space-4); line-height: 1.9; }

.pbox-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pbox-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.pbox-resend { margin-top: var(--space-3); text-align: center; }

.pbox-notice {
  margin-bottom: var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.8;
}

.pbox-debug {
  margin-bottom: var(--space-4);
  padding: 8px 12px;
  border: 1px dashed var(--muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.pbox-ready { text-align: center; margin-bottom: var(--space-6); }

.pbox-ready-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  animation: pbox-pop 360ms var(--ease);
}

.pbox-ready-icon svg { width: 28px; height: 28px; }

@keyframes pbox-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.pbox-ready-title { font-size: var(--fs-h3); font-weight: 700; }
.pbox-dl-icon { width: 20px; height: 20px; }

.pbox-account {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border);
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 2;
  text-align: center;
}

.pbox-account a { color: var(--accent); font-weight: 700; }

.pbox-bill {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.pbox-bill div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-small); }
.pbox-bill dt { color: var(--muted); }
.pbox-bill dd { margin: 0; font-weight: 700; }
.pbox-bill .is-discount dd { color: var(--accent); }
.pbox-bill .is-total { padding-top: 6px; border-top: var(--border); font-size: var(--fs-body); }
.pbox-bill .is-total dd { font-size: var(--fs-h3); }

.pbox-coupon {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.pbox-coupon input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--space-4);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.pbox-coupon input[aria-invalid="true"] { border-color: var(--accent); }
.pbox-coupon + .error { margin-bottom: var(--space-3); }
.pbox[data-step="pay"] .pbox-coupon ~ form { margin-top: var(--space-4); }

/* ----------------------------------------------------------- صفحه‌ی محصول */

.product-detail .breadcrumb { margin-top: var(--space-8); }

/* ---- بالای صفحه: تصویر | اطلاعات و خرید */

.phero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-6) var(--space-12);
}

.phero-info { grid-column: 1; grid-row: 1; }
.phero-media { grid-column: 2; grid-row: 1; position: sticky; top: 100px; }

.phero-media picture img, .phero-media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 24px;
  border: var(--border);
  box-shadow: 0 24px 48px -28px rgb(15 23 32 / 0.35);
}

.phero-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 700;
}

.phero-version {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 500;
}

.phero-info h1 { margin-top: var(--space-2); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.35; }

.phero-tagline {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-h3);
  line-height: 1.7;
}

.pgallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
}

.pgallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  border: var(--border);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pgallery a:hover img { transform: translateY(-2px); border-color: var(--accent); }

/* ---- در یک نگاه */

.pglance {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.pglance li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: var(--border);
  border-radius: 14px;
  background: var(--paper);
}

.pglance svg {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.pglance-label { color: var(--muted); font-size: 12px; line-height: 1.5; }

.pglance-value {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pglance-value[dir="ltr"] { text-align: end; }

/* ---- پنل خرید */

.pbuy {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: var(--border);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
  scroll-margin-top: 120px;
}

.pbuy-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pbuy-cta { flex: 1 1 220px; justify-content: center; }
.pbuy-demo { justify-content: center; gap: 8px; }
.pbuy-demo svg { width: 18px; height: 18px; }

.pbuy-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-4);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pbuy-trust li { display: inline-flex; align-items: center; gap: 6px; }
.pbuy-trust svg { width: 15px; height: 15px; color: var(--accent); }

.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-small);
  text-decoration: none;
}

.rating-summary strong { color: var(--ink); }
.rating-summary:hover span:last-child { text-decoration: underline; }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: var(--line); }
.stars svg.on { fill: #f5a524; }

/* ---- نوار بخش‌ها (چسبان) */

.ptabs {
  position: sticky;
  top: var(--header-h, 77px);
  z-index: 20;
  background: rgb(250 250 248 / 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: var(--border);
}

.ptabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.ptabs ul::-webkit-scrollbar { display: none; }

.ptabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding-inline: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.ptabs a::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.ptabs a:hover, .ptabs a[aria-current] { color: var(--ink); }
.ptabs a[aria-current]::after { transform: scaleX(1); }

.ptabs-count {
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
}

/* ---- بدنه */

.pdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-12);
  align-items: start;
  padding-block: var(--space-4) var(--space-16);
}

.pdetail-section { margin-top: var(--space-12); scroll-margin-top: 150px; }
.pdetail-section > h2 { margin-bottom: var(--space-6); }
.pdetail-section .count { color: var(--muted); font-weight: 400; }

.pvideo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: var(--ink);
}

.pdetail-side { position: sticky; top: 150px; display: grid; gap: var(--space-4); }

.pside-buy {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-2);
}

.pside-title { font-weight: 700; line-height: 1.6; }
.pside-buy .pbuy-cta { width: 100%; }

.pside-points {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--fs-small);
}

.pside-points li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; }
.pside-points svg { flex: none; width: 15px; height: 15px; margin-top: 5px; color: var(--accent); }

.pdetail-upsell {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  font-size: var(--fs-small);
  line-height: 1.8;
}

.pdetail-upsell a { color: var(--accent); font-weight: 700; }

.changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.changelog > li { padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--line); }
.changelog > li:first-child { border-color: var(--accent); }
.changelog-more .changelog > li:first-child { border-color: var(--line); }
.changelog-head { display: flex; gap: var(--space-3); align-items: baseline; }
.changelog-head span { color: var(--muted); font-size: var(--fs-caption); }

.changelog ul {
  margin: 6px 0 0;
  padding-inline-start: var(--space-6);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.9;
}

.changelog-more { margin-top: var(--space-4); }

.changelog-more summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.changelog-more[open] summary { margin-bottom: var(--space-4); }

/* ---- نوار خرید موبایل */

.pbuybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgb(250 250 248 / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: var(--border);
  box-shadow: 0 -8px 24px -12px rgb(15 23 32 / 0.18);
  animation: pbuybar-in 240ms var(--ease);
}

.pbuybar[hidden] { display: none; }
.pbuybar-info { display: grid; min-width: 0; }
.pbuybar-title { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbuybar .btn { flex: none; }

@keyframes pbuybar-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@media (min-width: 901px) {
  .pbuybar { display: none !important; }
}


@media (max-width: 900px) {
  .phero { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-8); }
  .phero-info, .phero-media { grid-column: 1; grid-row: auto; }
  .phero-media { position: static; }
  /* گالری موبایل: یک ردیف افقی، نه دو ردیف بندانگشتی بزرگ */
  .pgallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pgallery li { flex: 0 0 30%; scroll-snap-align: start; }
  .pdetail { grid-template-columns: 1fr; gap: var(--space-8); }
  .pdetail-side { position: static; }
  .pside-buy { display: none; }
  .pdetail-section { scroll-margin-top: 130px; }
  body.has-buybar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .pbuy { padding: var(--space-4); }
  .pbuy-demo { flex: 1 1 100%; }
}

/* ----------------------------------------------------------------- نظرها */

.rsummary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border: var(--border);
  border-radius: 20px;
  background: var(--paper);
}

.rsummary-score { display: grid; justify-items: center; gap: 4px; min-width: 120px; }
.rsummary-score strong { font-size: 44px; line-height: 1; font-weight: 900; }
.rsummary-total { color: var(--muted); font-size: var(--fs-caption); }

.rsummary-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.rsummary-bars li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.rsummary-bar { height: 8px; border-radius: 8px; background: var(--surface); overflow: hidden; }
.rsummary-bar i { display: block; height: 100%; border-radius: inherit; background: #f5a524; }
.rsummary-count { text-align: end; }

.rhighlight-title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }

.rhighlight {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.rhighlight > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: 20px;
  background: var(--surface);
}

.rhighlight blockquote { margin: 0; line-height: 1.9; font-size: var(--fs-small); flex: 1; }
.rhighlight blockquote p { margin: 0; }

.rhighlight-who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); }
.rhighlight-who > span:nth-child(2) { display: grid; min-width: 0; }
.rhighlight-who .review-badge { margin-inline-start: auto; }

.review-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-4); }

.review {
  padding: var(--space-4) var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.review-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
}

.review-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.review-who { min-width: 0; }
.review-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.review-meta { color: var(--muted); font-size: var(--fs-caption); }
.review-meta bdi { white-space: nowrap; }

.review-side { margin-inline-start: auto; display: grid; justify-items: end; gap: 2px; }
.review-side time { color: var(--muted); font-size: var(--fs-caption); }

.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--radius-pill);
  background: rgb(22 163 74 / 0.1);
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
}

.review-badge svg { width: 14px; height: 14px; }

.review-body { margin-top: var(--space-3); line-height: 1.9; }

.review-reply {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-small);
}

.review-reply-label { font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.review-empty, .review-gate { color: var(--muted); margin-bottom: var(--space-4); }
.review-more { display: flex; justify-content: center; }

.review-compose {
  padding: var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

.review-form { display: grid; gap: var(--space-4); max-width: 640px; }
.review-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.review-form-row .field { margin: 0; }

@media (max-width: 640px) {
  .rsummary { grid-template-columns: 1fr; gap: var(--space-4); }
  .review-form-row { grid-template-columns: 1fr; }
  .review { padding: var(--space-4); }
}

.review-thanks-title { font-weight: 700; font-size: var(--fs-h3); }

.rating-input { margin: 0; padding: 0; border: 0; }
.rating-input legend { font-weight: 700; margin-bottom: var(--space-2); }

/* ⚠️ DOM از ۵ به ۱ است و ستاره‌ها با row-reverse از ۱ به ۵ نمایش داده
   می‌شوند — در RTL «row-reverse» خودش راست‌به‌چپ را برعکس می‌کند، پس
   ستاره‌ی ۱ سمت راست (شروع خواندن) می‌نشیند. */
.rating-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.rating-stars label {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.rating-stars svg {
  width: 30px;
  height: 30px;
  fill: var(--line);
  transition: fill var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* ستاره‌های «کمتر» در DOM بعد از انتخاب‌شده‌اند، پس با ~ پر می‌شوند */
.rating-stars input:checked ~ label svg,
.rating-stars label:hover svg,
.rating-stars label:hover ~ label svg { fill: var(--accent-bright); }

.rating-stars label:hover svg { transform: scale(1.1); }
.rating-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- حساب و نتیجه */

.account-page, .payment-result, .product-list-page { padding-block: var(--space-16); }
.product-list-page .filters { margin-bottom: 0; }

.plist-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.plist-sort {
  display: flex;
  align-items: center;
  gap: 2px var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: var(--fs-small);
}

.plist-sort::-webkit-scrollbar { display: none; }
.plist-sort-label { color: var(--muted); white-space: nowrap; }

.plist-sort a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.plist-sort a:hover { color: var(--ink); }
.plist-sort a.is-active { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.account-logout { margin-top: var(--space-6); }

.owned-list { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-3); }

.owned-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.owned-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.owned-media img { width: 100%; height: 100%; object-fit: cover; }
.owned-title { font-size: var(--fs-body); }
.owned-title a { text-decoration: none; }
.owned-meta { color: var(--muted); font-size: var(--fs-caption); line-height: 1.9; }

@media (max-width: 640px) {
  .owned-item { grid-template-columns: 88px minmax(0, 1fr); }
  .owned-dl { grid-column: 1 / -1; justify-content: center; }
}

.payment-card {
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-8);
  border: var(--border);
  border-radius: 20px;
  background: var(--paper);
  text-align: center;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.payment-card .meta { color: var(--muted); font-size: var(--fs-caption); }

.payment-receipt {
  width: 100%;
  margin: var(--space-2) 0;
  padding: var(--space-4);
  display: grid;
  gap: 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-small);
  text-align: start;
}

.payment-receipt div { display: flex; justify-content: space-between; gap: var(--space-4); }
.payment-receipt dt { color: var(--muted); }
.payment-receipt dd { margin: 0; font-weight: 700; }
.payment-link { color: var(--accent); font-weight: 700; font-size: var(--fs-small); }
.pbox-ready-icon.is-failed { background: var(--surface); color: var(--muted); }

.pbox-steps.is-four li { font-size: 12px; }

.pbox-trust {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pbox-trust li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7; }
.pbox-trust svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--accent); }
.payment-card.is-failed h1 { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-media img, .pgallery img, .product-dialog[open], .pbox-ready-icon, .rating-stars svg,
  .pbuybar, .ptabs a::after, .pcard-get svg {
    animation: none;
    transition: none;
  }

  .pcard:hover, .pcard:hover .pcard-media img { transform: none; }
}


/* ==================================================================== پنل مشتری و پشتیبانی

   منوی کناری در دسکتاپ؛ در موبایل نوار افقی اسکرول‌شونده بالای محتوا.
   ترتیب منو = ترتیب نیاز بعد از خرید. رنگ فقط از tokens.css (به‌جز سبز/کهربایی وضعیت). */

.account { padding-block: var(--space-12) var(--space-16); }

.account-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.account-side {
  position: sticky;
  top: calc(var(--header-h, 77px) + var(--space-4));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border);
  border-radius: 22px;
  background: var(--paper);
}

.account-who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.account-name { font-weight: 700; line-height: 1.5; }
.account-phone { color: var(--muted); font-size: var(--fs-caption); }

.account-nav { display: grid; gap: 2px; }

.account-nav a,
.account-nav button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.account-nav svg { width: 19px; height: 19px; flex: none; }
.account-nav a:hover, .account-nav button:hover { background: var(--surface); color: var(--ink); }
.account-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.account-logout-form { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: var(--border); }
.account-logout-form button { width: 100%; }

.account-main { min-width: 0; }

.account-head { margin-bottom: var(--space-8); }
.account-head h1 { font-size: var(--fs-h1); line-height: 1.35; }
.account-head p { margin-top: var(--space-2); color: var(--muted); }

.account-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.account-messages { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }

.account-messages li {
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--surface);
  font-size: var(--fs-small);
}

.account-messages .is-success { background: rgb(22 163 74 / 0.1); color: #15803d; }
.account-messages .is-error { background: var(--accent-soft); color: var(--accent); }

.account-muted { color: var(--muted); font-size: var(--fs-small); line-height: 1.9; }
.account-muted a { color: var(--accent); }

.account-stats {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.account-stats a {
  display: grid;
  gap: 2px;
  padding: var(--space-4) var(--space-6);
  border: var(--border);
  border-radius: 18px;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.account-stats strong { color: var(--ink); font-size: 30px; font-weight: 900; line-height: 1.2; }
.account-stats a:hover { border-color: var(--accent); transform: translateY(-2px); }
.account-stats .is-attention a { border-color: rgb(199 67 26 / 0.45); background: var(--accent-soft); }
.account-stats .is-attention strong { color: var(--accent); }

.account-block { margin-top: var(--space-8); }
.account-block > h2, .account-block-head h2 { font-size: var(--fs-h3); }
.account-block > h2 { margin-bottom: var(--space-4); }

.account-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.btn-icon { width: 18px; height: 18px; }

/* ---- محصولات من (کارت مربعی) */
.owned-item { grid-template-columns: 96px minmax(0, 1fr) auto; }
.owned-media { aspect-ratio: 1; border-radius: 14px; }
.owned-media picture, .owned-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.owned-item.has-update { border-color: rgb(199 67 26 / 0.45); }

.owned-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
}

.owned-links { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin-top: 4px; font-size: var(--fs-caption); }
.owned-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
.owned-links a:hover { text-decoration: underline; }

/* ---- سفارش‌ها و رسید */
.table-scroll { overflow-x: auto; border: var(--border); border-radius: 18px; background: var(--paper); }
.orders-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.orders-table th, .orders-table td { padding: var(--space-3) var(--space-4); text-align: start; white-space: nowrap; }
.orders-table th { color: var(--muted); font-weight: 700; border-bottom: var(--border); }
.orders-table tr + tr td { border-top: var(--border); }
.orders-table a { color: var(--accent); font-weight: 700; }

.order-status, .ticket-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.order-status.is-paid, .order-status.is-free { background: rgb(22 163 74 / 0.1); color: #15803d; }
.order-status.is-failed, .order-status.is-refunded { background: var(--accent-soft); color: var(--accent); }

.receipt { max-width: 640px; padding: var(--space-8); border: var(--border); border-radius: 22px; background: var(--paper); }

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.receipt-brand { color: var(--accent); font-weight: 900; }
.receipt-head h1 { font-size: var(--fs-h3); }
.payment-receipt .is-total { padding-top: 8px; border-top: var(--border); }
.payment-receipt .is-total dd { font-size: var(--fs-h3); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---- فرم‌های پنل */
.account-form { display: grid; gap: var(--space-4); max-width: 680px; }
.account-form .field { margin: 0; }
.account-form .help { margin-top: 6px; color: var(--muted); font-size: var(--fs-caption); }
.account-form input[type="file"] { padding: 10px; }

.check-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border);
  border-radius: 14px;
  cursor: pointer;
}

.check-field input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--accent); }
.check-field span { display: grid; gap: 2px; }
.check-field small { color: var(--muted); font-size: var(--fs-caption); line-height: 1.8; }

/* ---- تیکت */
.ticket-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.ticket-row a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: var(--border);
  border-radius: 16px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.ticket-row a:hover { border-color: var(--accent); }
.ticket-row-main { display: grid; gap: 2px; min-width: 0; }
.ticket-row-subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ticket-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.ticket-status.is-waiting_customer { background: rgb(22 163 74 / 0.12); color: #15803d; }
.ticket-status.is-waiting_team { background: var(--accent-soft); color: var(--accent); }
.ticket-row.is-waiting_customer a { border-color: rgb(22 163 74 / 0.35); }

.ticket-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.ticket-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border-radius: 16px;
  font-size: var(--fs-small);
  line-height: 1.9;
}

.ticket-notice svg { flex: none; width: 22px; height: 22px; margin-top: 3px; }
.ticket-notice-title { font-weight: 700; }
.ticket-notice.is-free { background: #fff7e6; color: #7a4b00; }
.ticket-notice.is-paid { background: rgb(22 163 74 / 0.08); color: #14532d; }
.ticket-notice-wrap:empty { display: none; }

.ticket-faq { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border); border-radius: 14px; }
.ticket-faq > summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.ticket-faq ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 6px; }
.ticket-faq li summary { cursor: pointer; font-size: var(--fs-small); }
.ticket-faq-answer { padding: 6px var(--space-4) 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.9; }

.ticket-crumb { color: var(--muted); font-size: var(--fs-caption); margin-bottom: 4px; }
.ticket-crumb a { color: var(--accent); }
.ticket-head .ticket-row-meta { margin-top: var(--space-2); }

.ticket-thread { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-3); }

.ticket-msg {
  max-width: 92%;
  padding: var(--space-4) var(--space-6);
  border: var(--border);
  border-radius: 18px;
  background: var(--paper);
}

/* پاسخ پشتیبانی سمت مقابل با زمینه‌ی متمایز — گفت‌وگو در یک نگاه خوانده می‌شود */
.ticket-msg.is-staff { justify-self: end; background: var(--surface); border-color: transparent; }
.ticket-msg-head { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); }
.ticket-msg-head .review-avatar { width: 34px; height: 34px; font-size: 13px; }
.ticket-msg.is-staff .review-avatar { background: var(--ink); color: var(--paper); }
.ticket-msg-head time { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-caption); }
.ticket-msg-body { margin-top: var(--space-3); line-height: 1.95; overflow-wrap: anywhere; }
.ticket-msg-body p + p { margin-top: var(--space-2); }
.ticket-file { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: var(--fs-small); }
.ticket-file svg { width: 16px; height: 16px; color: var(--muted); }
.ticket-file a { color: var(--accent); font-weight: 700; overflow-wrap: anywhere; }

.ticket-rate {
  display: grid;
  gap: var(--space-3);
  max-width: 480px;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border-radius: 18px;
  background: var(--accent-soft);
}

.ticket-reply { padding-top: var(--space-6); border-top: var(--border); }
.ticket-reply h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.ticket-close { margin-top: var(--space-3); }

@media (max-width: 900px) {
  .account { padding-top: var(--space-6); }
  .account-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .account-side { position: static; padding: var(--space-2); border-radius: 18px; }
  .account-who { display: none; }
  .account-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a, .account-nav button { white-space: nowrap; }
  .account-logout-form { margin: 0; padding: 0; border: 0; }
}

@media (max-width: 640px) {
  .account-stats { grid-template-columns: 1fr; }
  .account-stats a { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-3); }
  .ticket-form-row { grid-template-columns: 1fr; }
  .ticket-msg { max-width: 100%; padding: var(--space-4); }
  .ticket-row a { padding: var(--space-3) var(--space-4); }
  .receipt { padding: var(--space-6) var(--space-4); }
  .owned-item { grid-template-columns: 72px minmax(0, 1fr); }
}

@media print {
  .site-header, .site-footer, .account-side, .receipt-actions, .account-messages { display: none !important; }
  .account-layout { display: block; }
  .receipt { border: 0; padding: 0; }
}

/* ⚠️ قاعده‌ی سراسری section { padding-block: 96px } داخل پنل فاصله‌های خالی بزرگ می‌ساخت */
.account-main section { padding-block: 0; }
.account-main .ticket-reply { padding-top: var(--space-6); }

@media (max-width: 640px) {
  .ticket-row a { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .ticket-row-subject { white-space: normal; }
}


/* ==================================================================== پنل مشتری — موبایل

   نوار شیشه‌ای پایین (تب‌بار اپ): شناور با فاصله از لبه‌ها، blur + saturate، لبه‌ی روشن بالا
   برای حس شیشه، و safe-area آیفون. در دسکتاپ پنهان است (منوی کناری کافی است). */

.account-count {
  margin-inline-start: auto;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.account-tabbar { display: none; }

.profile-logout { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border); max-width: 680px; }
.profile-logout .btn { gap: 8px; }

/* ---- ورود: ستون وسط‌چین */
.account-login-page { padding-block: var(--space-16); }

.account-login-card {
  max-width: 460px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
}

.account-login-head { text-align: center; }
.account-login-head .eyebrow { justify-content: center; }
.account-login-head h1 { margin-top: var(--space-2); font-size: var(--fs-h1); }
.account-login-head p { margin-top: var(--space-2); color: var(--muted); line-height: 1.9; }
.account-login-card .account-login { max-width: none; margin: 0; }

@media (max-width: 900px) {
  .is-account .site-footer { display: none; }
  body.is-account { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  .account { padding-block: var(--space-6) var(--space-8); }
  .account-side { display: none; }

  .account-tabbar {
    position: fixed;
    z-index: 50;
    inset-inline: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px;
    border-radius: 24px;
    background: rgb(250 250 248 / 0.72);
    border: 1px solid rgb(255 255 255 / 0.7);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 0.9) inset,
      0 0 0 1px rgb(15 23 32 / 0.06),
      0 18px 40px -12px rgb(15 23 32 / 0.28);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
  }

  .account-tabbar a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-height: 56px;
    border-radius: 18px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  }

  .account-tab-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 28px;
    border-radius: var(--radius-pill);
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  }

  .account-tab-icon svg { width: 21px; height: 21px; }
  .account-tabbar a[aria-current="page"] { color: var(--accent); }
  .account-tabbar a[aria-current="page"] .account-tab-icon { background: var(--accent-soft); }
  .account-tabbar a:active .account-tab-icon { transform: scale(0.92); }

  .account-tab-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--paper);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgb(250 250 248);
  }

  /* ---- سربرگ و آمار فشرده */
  .account-head { margin-bottom: var(--space-6); }
  .account-head h1 { font-size: var(--fs-h2); }
  .account-head p { font-size: var(--fs-small); line-height: 1.8; }
  .account-head-row { align-items: center; }

  .account-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }

  .account-stats a {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding: var(--space-3) var(--space-2);
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.6;
  }

  .account-stats strong { font-size: 24px; }
  .account-stats a:hover { transform: none; }
  .account-block { margin-top: var(--space-6); }

  /* ---- محصولات: رسانه + متن، دکمه‌ها زیر */
  .owned-item { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
  .owned-media { border-radius: 12px; }
  .owned-title { font-size: var(--fs-small); }
  .owned-dl { grid-column: 1 / -1; min-height: 46px; justify-content: center; }
  .owned-links a { display: inline-flex; min-height: 32px; align-items: center; }

  /* ---- سفارش‌ها: جدول ⇒ کارت */
  .table-scroll { overflow: visible; border: 0; background: none; border-radius: 0; }
  .orders-table thead { display: none; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td { display: block; }
  .orders-table tbody { display: grid; gap: var(--space-3); }

  .orders-table tr {
    padding: var(--space-3) var(--space-4);
    border: var(--border);
    border-radius: 16px;
    background: var(--paper);
  }

  .orders-table tr + tr td { border-top: 0; }

  .orders-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 0;
    white-space: normal;
  }

  .orders-table td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-caption); }
  .orders-table td.orders-product { font-weight: 700; }
  .orders-table td.orders-action { padding-top: var(--space-2); }
  .orders-table td.orders-action::before { content: none; }
  .orders-table td.orders-action .btn { width: 100%; justify-content: center; min-height: 44px; }
  .orders-table td:empty { display: none; }

  /* ---- تیکت */
  .account-head-row .btn { min-height: 44px; }
  .ticket-row a { padding: var(--space-3) var(--space-4); }
  .ticket-thread { margin-bottom: var(--space-6); }
  .ticket-reply .account-form .btn { width: 100%; justify-content: center; }
  .ticket-close .btn { width: 100%; justify-content: center; min-height: 44px; }

  /* فرم‌ها: دکمه‌ی اصلی تمام‌عرض و در دسترس شست */
  .account-form > .btn-primary, .profile-logout .btn { width: 100%; justify-content: center; }
  .account-form input, .account-form select, .account-form textarea { font-size: 16px; }  /* iOS: بدون زوم خودکار */

  .account-login-page { padding-block: var(--space-8) var(--space-12); }
  .account-login-head h1 { font-size: var(--fs-h2); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .account-tabbar { background: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  .account-tabbar a, .account-tab-icon { transition: none; }
}

/* جعبه‌ی ورود داخل صفحه‌ی ورود: برچسب «حساب کاربری» تکرار عنوان صفحه است */
.account-login-card .pbox-kind { display: none; }

.account-stat-note {
  justify-self: start;
  margin-top: 4px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--paper);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

@media (max-width: 900px) {
  .account-stat-note { justify-self: center; }
  .owned-dl { min-height: 44px; padding-block: 8px; font-size: var(--fs-small); box-shadow: none; }
}


/* ==================================================================== فروشگاه — حرکت و موبایل

   بازخورد ۲۰۲۶-۰۹-۱۵: «کارت‌ها انیمیشن ندارند، ساده و ارزان به نظر می‌رسند؛ موبایل بد است.»
   قواعد از ui-ux-pro-max: stagger-sequence (۳۰–۵۰ms)، scroll reveal با جابه‌جایی کم،
   scale-feedback روی لمس (۰.۹۵–۱)، spring-physics، motion-meaning، prefers-reduced-motion.
   بدون کتابخانه (GSAP نه) — همان الگوی animation-timeline: view() سایت (بخش «ظاهر شدن با اسکرول»).

   ⚠️ ورود با translate/scale/opacity مستقل، نه transform: fill-mode both مقدار
   پایانی را نگه می‌دارد و اگر transform بود، هاور (transform) و فشار (scale) کارت را
   برای همیشه خنثی می‌کرد. هر لایه ویژگی خودش را دارد:
     ورود کارت ⇒ translate + opacity · فشار ⇒ scale · هاور ⇒ transform
     تصویر: ورود ⇒ scale · هاور ⇒ transform */

@keyframes pcard-in {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

/* تصویر کمی بزرگ‌تر وارد می‌شود و «می‌نشیند» — عمق، نه فقط محو شدن */
@keyframes pcard-media-in {
  from { scale: 1.14; }
  to   { scale: 1; }
}

/* برق نور یک‌باره روی تصویر هنگام ورود؛ بعد از آن کاملاً بیرون از قاب است */
@keyframes pcard-sheen {
  from { translate: 110% 0; }
  to   { translate: -110% 0; }
}

.pcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.22) 48%, transparent 66%);
  translate: -110% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .pgrid > .pcard { animation: pcard-in 620ms var(--ease) both; }
  .js .pgrid > .pcard .pcard-media img { animation: pcard-media-in 900ms var(--ease) both; }
  .js .pgrid > .pcard .pcard-media::after { animation: pcard-sheen 1100ms var(--ease) 250ms both; }

  /* stagger زمانی (مسیر بدون view-timeline): ۴۰ms برای هر کارت، سقف ۶ */
  .js .pgrid > .pcard:nth-child(2) { animation-delay: 40ms; }
  .js .pgrid > .pcard:nth-child(3) { animation-delay: 80ms; }
  .js .pgrid > .pcard:nth-child(4) { animation-delay: 120ms; }
  .js .pgrid > .pcard:nth-child(5) { animation-delay: 160ms; }
  .js .pgrid > .pcard:nth-child(n+6) { animation-delay: 200ms; }

  @supports (animation-timeline: view()) {
    .js .pgrid > .pcard,
    .js .pgrid > .pcard .pcard-media img,
    .js .pgrid > .pcard .pcard-media::after {
      animation-timeline: view();
      animation-delay: 0ms;
      animation-duration: auto;
    }

    .js .pgrid > .pcard { animation-range: entry 0% entry 90%; }
    .js .pgrid > .pcard .pcard-media img { animation-range: entry 0% cover 40%; }
    .js .pgrid > .pcard .pcard-media::after { animation-range: entry 60% cover 45%; }

    /* ستون‌های یک ردیف با اختلاف فاز وارد می‌شوند (stagger در زمان‌بندی اسکرول) */
    @media (min-width: 1025px) {
      .js .pgrid > .pcard:nth-child(3n+2) { animation-range: entry 8% entry 98%; }
      .js .pgrid > .pcard:nth-child(3n) { animation-range: entry 16% cover 18%; }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
      .js .pgrid > .pcard:nth-child(2n) { animation-range: entry 10% cover 12%; }
    }
  }

  /* فشار روی لمس/کلیک — فنری برمی‌گردد */
  .pcard { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), scale 380ms var(--ease-spring); }
  .pcard:active { scale: 0.975; transition-duration: var(--dur), var(--dur), var(--dur), 90ms; }
  .pcard-get { transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), scale 380ms var(--ease-spring); }
  .pcard-get:active { scale: 0.92; transition-duration: var(--dur), var(--dur), var(--dur), 90ms; }
}

/* ---- عمق: قاب تصویر سایه‌ی نرم و لبه‌ی روشن داخلی دارد تا «چاپ‌شده روی کارت» به نظر نرسد */
.pcard-media {
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 12px 28px -18px rgb(15 23 32 / 0.45);
  isolation: isolate;
  /* ⚠️ clip نه hidden: overflow:hidden قاب را «scroll container» می‌کند و view() تصویر و
     برق نور به‌جای صفحه به همین قابِ ثابت وصل می‌شود ⇒ انیمیشن هیچ‌وقت جلو نمی‌رود. */
  overflow: clip;
}

/* ==================================================================== فروشگاه — موبایل

   قبل: هر کارت عمودی ~۱.۵ صفحه ارتفاع داشت ⇒ ۶ محصول = ۹ صفحه اسکرول.
   بعد: ردیف افقی سبک فروشگاه اپ (تصویر مربعی + متن + دکمه‌ی «دریافت»)؛ ۴ محصول در یک صفحه.
   فقط فهرست محصولات (.product-list-page)؛ کاروسل صفحه‌ی اصلی کارت بزرگ می‌ماند. */

@media (max-width: 640px) {
  .product-list-page { padding-block: var(--space-8) var(--space-12); }

  .product-list-page .section-header-row {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .product-list-page .section-header h1 { font-size: var(--fs-h2); }
  .product-list-page .section-header p { font-size: var(--fs-small); line-height: 1.9; }

  .plist-mine {
    min-height: 40px;
    padding: 6px 14px;
    border: var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    gap: 6px;
  }

  .plist-mine .btn-icon { width: 16px; height: 16px; }

  /* مرتب‌سازی ⇒ تراشه‌ها، اسکرول افقی تا لبه‌ی صفحه (بدون گرادینت) */
  .plist-tools { margin-bottom: var(--space-4); gap: var(--space-3); }

  .plist-sort {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 20px;
    gap: var(--space-2);
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
  }

  .plist-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .plist-sort a {
    min-height: 40px;
    padding: 0 16px;
    border: var(--border);
    border-radius: var(--radius-pill);
    scroll-snap-align: start;
    font-size: var(--fs-small);
  }

  .plist-sort a.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-paper);
  }

  .product-list-page .pgrid { gap: var(--space-3); }

  .product-list-page .pgrid > .pcard {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: 20px;
  }

  .product-list-page .pcard-media {
    width: 112px;
    border-radius: 14px;
    align-self: start;
  }

  .product-list-page .pcard-badge {
    inset-block-start: 6px;
    inset-inline-start: 6px;
    padding: 0 8px;
    font-size: 11px;
  }

  .product-list-page .pcard-body {
    padding: 2px 0 0;
    gap: 2px;
    min-width: 0;
  }

  .product-list-page .pcard-title { font-size: 15px; line-height: 1.6; }

  .product-list-page .pcard-tagline { font-size: 12.5px; line-height: 1.8; }

  .product-list-page .pcard-foot {
    margin-block-start: var(--space-2);
    padding-top: var(--space-2);
    align-items: center;
  }

  .product-list-page .pcard-kind { font-size: 11px; }
  .product-list-page .pcard-meta .pprice { font-size: var(--fs-small); }

  .product-list-page .pcard-get {
    min-height: 36px;
    padding-inline: 14px;
    border: 0;
    background: var(--accent-soft);
  }

  /* هدف لمس ۴۴px با وجود دکمه‌ی ۳۶px: ناحیه‌ی نامرئی دور دکمه */
  .product-list-page .pcard-get::before { content: ""; position: absolute; inset: -4px -4px; }
  .product-list-page .pcard-get svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard-media::after { display: none; }
}


/* ==================================================================== جابه‌جایی نرم بین صفحه‌ها

   View Transitions بین سندها (۲۰۲۶-۰۹-۱۵): به‌جای سفید شدن و پرشِ بارگذاری کامل،
   صفحه‌ی قبلی سریع محو و صفحه‌ی بعدی با کمی بالا آمدن ظاهر می‌شود؛ هدر ثابت می‌ماند.
   بدون JS و بدون تغییر ساختار (نه hx-boost). مرورگر بدون پشتیبانی همان بارگذاری معمولی را دارد.
   - خروج کوتاه‌تر از ورود (exit-faster-than-enter).
   - فقط با prefers-reduced-motion: no-preference — کاهش حرکت ⇒ پیمایش عادی.
   - ⚠️ view-transition-name باید در هر صفحه یکتا باشد.
   - هدر صفحه‌ی اصلی (کپسول شفاف روی هیرو) با هدر نواری بقیه‌ی صفحه‌ها شکل متفاوتی دارد؛
     نام‌گذاری‌اش آن‌جا تبدیل کشیده/عجیب می‌ساخت ⇒ فقط وقتی هیرو سینمایی نیست.
   - ⚠️ رفت/برگشت صفحه‌ی اصلی اصلاً transition ندارد (pageswap/pagereveal در base.html):
     شیشه‌ی مایع هدر (backdrop-filter: url(#svg)) در عکس لحظه‌ای مات و لکه‌ای رندر می‌شد. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

body:not(.has-cinema-hero) .site-header { view-transition-name: site-header; }
.is-account .account-tabbar { view-transition-name: account-tabbar; }

@keyframes vt-page-out { to { opacity: 0; } }
@keyframes vt-page-in { from { opacity: 0; translate: 0 10px; } }

::view-transition-old(root) { animation: vt-page-out 140ms var(--ease) both; }
::view-transition-new(root) { animation: vt-page-in 260ms var(--ease) 40ms both; }

/* هدر و تب‌بار: بدون محو — همان‌جا می‌مانند (فقط اگر اندازه عوض شد نرم جابه‌جا می‌شوند) */
::view-transition-group(site-header),
::view-transition-group(account-tabbar) { animation-duration: 260ms; animation-timing-function: var(--ease); }
::view-transition-old(site-header),
::view-transition-old(account-tabbar) { display: none; }
::view-transition-new(site-header),
::view-transition-new(account-tabbar) { animation: none; }