/* =============================================================================
   Liquid Intelligence — سیستم طراحی وب‌سایت پویا سیستم
   -----------------------------------------------------------------------------
   منبع توکن‌ها: PooyaWeb/DESIGN.md
   مرجع بصری:   PooyaWeb/code.html (نوار شناور، بنتو گرید، کارت شیشه‌ای، پابرگ روشن)

   ⚠️ مقادیر خام رنگ/فاصله/شعاع فقط در بخش «توکن‌های اولیه» نوشته می‌شوند؛
   بقیهٔ فایل از var() استفاده می‌کند تا تغییر برند در یک نقطه انجام شود.

   چرا Tailwind و فونت آیکون گوگل از مرجع برداشته نشد: هر دو از CDN بیرونی
   می‌آیند. برای سایتی که مخاطبش داخل ایران است این هم ریسک دسترسی دارد و هم
   دو درخواست مسدودکنندهٔ رندر به مسیر بحرانی اضافه می‌کند. همان زبان بصری
   با CSS محلی و آیکون SVG درون‌خطی بازتولید شده است.
   ============================================================================= */

/* ── فونت ────────────────────────────────────────────────────────────────────
   وزیرمتن با unicode-range محدود به فارسی/عربی. اگر فایل فونت هنوز اضافه نشده
   باشد مرورگر بی‌صدا به فونت سیستمی برمی‌گردد و صفحه سالم می‌ماند.
   راهنمای ساخت فایل زیرمجموعه‌شده: wwwroot/fonts/README.md */

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/vazirmatn-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

/* =============================================================================
   لایهٔ ۱ — توکن‌های اولیه (عیناً از DESIGN.md)
   ============================================================================= */

:root {
    --surface: #f9f9fe;
    --surface-dim: #dad9de;
    --surface-bright: #f9f9fe;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f4f3f8;
    --surface-container: #eeedf2;
    --surface-container-high: #e8e8ed;
    --surface-container-highest: #e2e2e7;
    --surface-variant: #e2e2e7;
    --on-surface: #1a1c1f;
    --on-surface-variant: #43474f;
    --inverse-surface: #2f3034;
    --inverse-on-surface: #f1f0f5;
    --outline: #737780;
    --outline-variant: #c3c6d1;
    --surface-tint: #3a5f94;

    /* آبی نهادی — لنگر ناوبری و کنش اصلی */
    --primary: #001e40;
    --on-primary: #ffffff;
    --primary-container: #003366;
    --on-primary-container: #799dd6;
    --inverse-primary: #a7c8ff;
    --primary-fixed: #d5e3ff;
    --primary-fixed-dim: #a7c8ff;
    --on-primary-fixed: #001b3c;
    --on-primary-fixed-variant: #1f477b;

    /* سبز زمردی — سلامت مالی، رشد، تأیید */
    --secondary: #006c49;
    --on-secondary: #ffffff;
    --secondary-container: #6cf8bb;
    --on-secondary-container: #00714d;
    --secondary-fixed: #6ffbbe;
    --secondary-fixed-dim: #4edea3;
    --on-secondary-fixed: #002113;
    --on-secondary-fixed-variant: #005236;

    --tertiary: #381300;
    --on-tertiary: #ffffff;
    --tertiary-container: #592300;
    --on-tertiary-container: #d8885c;
    --tertiary-fixed: #ffdbca;
    --tertiary-fixed-dim: #ffb690;
    --on-tertiary-fixed: #341100;
    --on-tertiary-fixed-variant: #723610;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    --background: #f9f9fe;
    --on-background: #1a1c1f;

    /* فاصله — سیستم ۸ واحدی */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --space-section: 96px;

    /* شعاع */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;    /* 24px — کارت، دکمه، ظرف شیشه‌ای (rounded-xxl مرجع) */
    --radius-hero: 40px;    /* بلوک‌های بزرگ تیره */
    --radius-full: 9999px;

    /* تایپوگرافی */
    --fs-display-xl: clamp(40px, 4vw + 1rem, 72px);
    --fs-display-lg: clamp(36px, 3.4vw + 1rem, 64px);
    --fs-h1: clamp(32px, 3vw + 1rem, 52px);
    --fs-h2: clamp(28px, 2vw + 1rem, 40px);
    --fs-h3: clamp(24px, 1.4vw + 1rem, 32px);
    --fs-h4: clamp(20px, 1vw + 1rem, 26px);
    --fs-body-lg: 20px;
    --fs-body-md: 18px;
    --fs-body-sm: 16px;

    --lh-heading: 1.2;
    --lh-heading-loose: 1.3;
    --lh-heading-h4: 1.4;
    /* ⚠️ ۱۸۰٪ عمدی: جلوگیری از «خون‌ریزی خطوط» هنگام اسکن دفاتر و گزارش‌های بلند. */
    --lh-body: 1.8;

    --font: 'Vazirmatn', 'Segoe UI', Tahoma, 'Iranian Sans', system-ui, sans-serif;

    --container: 1320px;
    --nav-height: 84px;
}

/* =============================================================================
   لایهٔ ۲ — توکن‌های معنایی
   ============================================================================= */

:root {
    --c-text: var(--on-surface);
    --c-text-muted: var(--on-surface-variant);
    --c-border: var(--outline-variant);

    /* ⚠️ «لایهٔ هوش مصنوعی» در DESIGN.md با نام Electric Cyan توصیف شده ولی
       توکن رنگی برایش تعریف نشده. تا تعیین تکلیف، روشن‌ترین آبیِ تعریف‌شدهٔ
       پالت استفاده می‌شود تا رنگی خارج از پالت اختراع نشود. */
    --c-accent-ai: var(--inverse-primary);
    --c-accent-ai-soft: var(--primary-fixed);

    /* شیشهٔ لایه‌ای — اعداد عیناً از مرجع code.html § .glass-card */
    --glass-bg: rgba(255, 255, 255, .75);
    --glass-bg-nav: rgba(255, 255, 255, .85);
    --glass-bg-nav-scrolled: rgba(255, 255, 255, .95);
    --glass-border: rgba(255, 255, 255, .4);
    --glass-blur: 16px;

    /* ⚠️ سایه هرگز سیاه خالص نیست؛ همیشه با آبی نهادی رنگ گرفته تا رابط
       «مایع» و یکپارچه دیده شود (DESIGN.md § Elevation). */
    --shadow-1: 0 8px 32px rgba(0, 30, 64, .08);
    --shadow-2: 0 12px 40px rgba(0, 30, 64, .15);
    --shadow-3: 0 20px 40px rgba(0, 30, 64, .12);
    --shadow-focus: 0 0 0 4px rgba(167, 200, 255, .45);
    --shadow-cta: 0 0 20px rgba(0, 108, 73, .3);
    --shadow-cta-hover: 0 0 35px rgba(0, 108, 73, .5);

    --ease-glass: cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================================
   بازنشانی
   ============================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* فاصله از بالا هنگام پرش به لنگر، تا سرتیتر زیر نوار شناور پنهان نشود. */
    scroll-padding-top: calc(var(--nav-height) + var(--space-md));
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--background);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* نوار شناور fixed است، پس محتوا باید از زیرش شروع شود. */
    padding-top: var(--nav-height);
}

::selection { background: var(--secondary-container); color: var(--on-secondary-fixed); }

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--space-md);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--on-surface);
    letter-spacing: -.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-heading-loose); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-heading-loose); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-heading-h4); }
h5 { font-size: var(--fs-body-md); font-weight: 700; }

p { margin: 0 0 var(--space-md); }

a { color: var(--primary-container); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--primary); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; }
ul, ol { padding-inline-start: 1.4em; }

/* شماره تلفن، نسخه و کد همیشه چپ‌به‌راست، حتی داخل متن فارسی. */
[dir="ltr"], code, kbd, samp { direction: ltr; unicode-bidi: isolate; }

code, kbd, samp {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: .9em;
    background: var(--surface-container);
    padding: 2px var(--space-xs);
    border-radius: var(--radius-sm);
}

/* آیکون‌های SVG درون‌خطی — ضخامت خط ۲ با سرِ گرد (DESIGN.md § Icons). */
.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

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

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-md) var(--space-lg);
    background: var(--primary);
    color: var(--on-primary);
    border-end-end-radius: var(--radius-lg);
}

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

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

/* متنی که فقط صفحه‌خوان می‌خواند — برای دکمه‌های آیکونی بدون برچسب دیداری. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    /* عناصری که با انیمیشن ظاهر می‌شوند باید بدون انیمیشن هم دیده شوند. */
    .reveal { opacity: 1 !important; transform: none !important; }
}

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) { .container { padding-inline: var(--space-lg); } }
@media (min-width: 1320px) { .container { padding-inline: var(--space-xxl); } }

.container-narrow { max-width: 900px; }

.section { padding-block: clamp(var(--space-xxl), 6vw, var(--space-section)); }

.section-soft {
    background: var(--surface-container-low);
    border-block: 1px solid var(--surface-container-high);
}

/* سرتیتر بخش با زیرخط تأکید — الگوی مرجع code.html. */
.section-head { text-align: center; margin-bottom: var(--space-xl); }

.section-head h2 { color: var(--primary); margin-bottom: var(--space-md); }

.section-head p {
    max-width: 60ch;
    margin-inline: auto;
    color: var(--c-text-muted);
    font-size: var(--fs-body-md);
}

.section-head::after {
    content: '';
    display: block;
    width: 96px;
    height: 6px;
    margin: var(--space-md) auto 0;
    border-radius: var(--radius-full);
    background: var(--secondary);
}

.section-head-start { text-align: start; }
.section-head-start p { margin-inline: 0; }
.section-head-start::after { margin-inline: 0; }

/* =============================================================================
   انیمیشن ظهور
   ============================================================================= */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

.reveal {
    opacity: 0;
    animation: fadeInUp 1s var(--ease-glass) forwards;
}

.reveal-1 { animation-delay: .1s; }
.reveal-2 { animation-delay: .25s; }
.reveal-3 { animation-delay: .4s; }
.reveal-4 { animation-delay: .55s; }

/* =============================================================================
   شیشه — پایهٔ مشترک
   ============================================================================= */

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
}

/* =============================================================================
   دکمه
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    /* برچسب دکمه هرگز وسط عبارت نمی‌شکند؛ «پورتال مشتری» در سربرگ دوسطری می‌شد. */
    white-space: nowrap;
    /* هدف لمسی حداقل ۴۴ پیکسل طبق راهنمای دسترس‌پذیری. */
    min-height: 48px;
    transition: background .3s var(--ease-glass), border-color .3s var(--ease-glass),
                box-shadow .3s var(--ease-glass), transform .2s var(--ease-glass);
}

.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* اصلی: سبز زمردی — «رشد و اقدام مثبت» با درخشش هم‌رنگ خودش. */
.btn-primary {
    background: var(--secondary);
    color: var(--on-secondary);
    box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
    background: var(--on-secondary-container);
    color: var(--on-secondary);
    box-shadow: var(--shadow-cta-hover);
}

/* آبی نهادی — کنش ثانویهٔ پرتأکید. */
.btn-navy {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-1);
}

.btn-navy:hover {
    background: var(--primary-container);
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
}

/* شیشه‌ای: سفید نیمه‌شفاف با کادر روشن. */
.btn-ghost {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-color: rgba(0, 30, 64, .1);
    color: var(--primary);
}

.btn-ghost:hover {
    background: var(--surface-container-lowest);
    border-color: var(--primary-container);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}

.btn-lg {
    padding: var(--space-lg) var(--space-xxl);
    font-size: var(--fs-body-lg);
    min-height: 60px;
}

.btn-sm { padding: var(--space-sm) var(--space-md); min-height: 40px; }

/* پیکان متحرک — در RTL به چپ حرکت می‌کند. */
.btn .icon, .card-link .icon { transition: transform .25s var(--ease-glass); }
.btn:hover .icon, .card-link:hover .icon { transform: translateX(-4px); }

/* =============================================================================
   نوار ناوبری شناور
   ============================================================================= */

.campaign-banner {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 60;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
    color: var(--on-primary);
    font-size: var(--fs-body-sm);
    padding-block: var(--space-sm);
}

.campaign-banner .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.campaign-banner a { color: var(--c-accent-ai); font-weight: 700; }
.campaign-banner a:hover { color: var(--on-primary); }

/* وقتی بنر کمپین فعال است، نوار و بدنه پایین‌تر می‌آیند. */
body.has-banner { padding-top: calc(var(--nav-height) + 44px); }
body.has-banner .site-header { top: 44px; }

/* نوار قرص‌شکل شناور — الگوی مرجع code.html. */
.site-header {
    position: fixed;
    top: var(--space-md);
    inset-inline: 0;
    z-index: 50;
    width: min(94%, var(--container));
    margin-inline: auto;
    border-radius: var(--radius-full);
    background: var(--glass-bg-nav);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: var(--shadow-1);
    transition: background .3s var(--ease-glass), box-shadow .3s var(--ease-glass);
}

/* پررنگ‌تر شدن نوار بعد از اسکرول — بدون جاوااسکریپت با scroll-timeline
   ممکن نیست در همهٔ مرورگرها، پس با کلاس از اسکریپت کوچک سایت انجام می‌شود. */
.site-header.is-scrolled {
    background: var(--glass-bg-nav-scrolled);
    box-shadow: var(--shadow-2);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-lg);
    min-height: 60px;
    padding-inline: var(--space-lg);
}

/* ستون‌های کناری برابرند (هر دو 1fr) پس منو — ستون وسط — همیشه دقیقاً
   وسط نوار می‌ماند، مهم نیست عرض لوگو و جستجو چقدر باشد. */
.brand { justify-self: start; }

@media (min-width: 1024px) { .header-inner { padding-inline: var(--space-xl); } }

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--on-surface);
    font-weight: 700;
    font-size: var(--fs-body-md);
}

.brand:hover { text-decoration: none; color: var(--primary); }

.brand-logo {
    display: block;
    width: auto;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
    color: var(--on-primary);
    font-size: var(--fs-body-md);
    font-weight: 700;
    box-shadow: var(--shadow-1);
}

/* لوگوی تصویری — نسبت تصویر حفظ می‌شود و ارتفاع ثابت است. */
.brand-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* روی موبایل نام برند حذف می‌شود تا نوار شناور جا داشته باشد. */
@media (max-width: 479px) {
    .brand-name { display: none; }
}

.site-nav { justify-self: center; }

/* ⚠️ حتماً «‎> ul‎» بماند، نه «ul».
   با انتخابگر عمومی `.site-nav ul`، این قاعده زیرمنو را هم می‌گرفت و چون
   اختصاصیتش (۰,۱,۱) از `.site-submenu` (۰,۱,۰) بیشتر است، `display: flex`
   روی `display: none` غالب می‌شد: زیرمنو همیشه باز و به‌صورت افقی رندر می‌شد. */
.site-nav > ul {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav li { position: relative; }

/* آیتمی که زیرمنو دارد، با یک نشانگر فلش کوچک مشخص می‌شود.
   ⚠️ پیشوند `.site-nav` لازم است: `.site-nav a` پایین‌تر همین فایل
   `display: inline-block` می‌دهد و با اختصاصیت برابر، چون بعدتر آمده برنده
   می‌شد. آن‌وقت فلشِ ::after داخل یک جعبهٔ inline می‌افتاد که width/height
   نمی‌پذیرد و به‌جای فلش، یک خط عمودی نازک شبیه «|» دیده می‌شد. */
.site-nav .has-children > a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.has-children > a::after {
    content: "";
    display: inline-block; /* تضمین اعمال‌شدن width/height حتی اگر والد inline باشد */
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .55;
}

/* زیرمنوی کشویی — با hover و focus (کیبورد) باز می‌شود. */
.site-submenu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-sm));
    inset-inline-start: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
    background: var(--surface-container-high);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: 20;
}

.site-nav li:hover > .site-submenu,
.site-nav li:focus-within > .site-submenu { display: block; }

/* 🔴 پل نامرئی روی فاصلهٔ بین آیتم منو و زیرمنو.
   زیرمنو با `top: calc(100% + var(--space-sm))` کمی پایین‌تر می‌نشیند و آن
   فاصله «مرده» است: تا کاربر موس را پایین می‌برد تا روی زیرمنو کلیک کند، از
   `li` خارج می‌شود، `li:hover` باطل می‌شود و زیرمنو قبل از رسیدن موس بسته
   می‌شود — یعنی عملاً غیرقابل انتخاب.

   این شبه‌عنصر همان نوار را می‌پوشاند. چون محتوای تولیدشدهٔ خودِ `li` است،
   وقتی موس رویش باشد `li:hover` همچنان برقرار می‌ماند و زیرمنو باز می‌ماند.
   عرضش دست‌کم به اندازهٔ زیرمنو است تا حرکت مورب موس هم پوشش داده شود. */
.site-nav .has-children:hover::after,
.site-nav .has-children:focus-within::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    /* کمی پهن‌تر از زیرمنو (min-width آن ۲۲۰px است + بوردر و padding) تا لبه‌ها هم
       پوشش داده شوند؛ چند پیکسل اضافه بی‌ضرر است چون نامرئی است. */
    width: max(100%, 240px);
    height: var(--space-sm);
    /* بدون پس‌زمینه — فقط ناحیهٔ hover است، نه چیزی دیدنی. */
}

.site-submenu a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    border-bottom: 0;
}

.site-submenu a:hover {
    background: var(--surface-container);
    color: var(--primary);
}

.site-nav a {
    display: inline-block;
    color: var(--c-text-muted);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.site-nav a:hover { color: var(--primary); text-decoration: none; }

/* صفحهٔ جاری با زیرخط پررنگ مشخص می‌شود. */
.site-nav a[aria-current="page"] {
    color: var(--primary);
    font-weight: 700;
    border-bottom-color: var(--primary);
}

/* ستون سوم گرید: جستجو + فراخوان در سمت مخالف منو. */
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
}

.header-actions { display: flex; gap: var(--space-sm); }

/* دکمه‌های داخل منوی موبایل — فقط در عرض‌های باریک دیده می‌شوند. */
.nav-actions-mobile { display: none; }

/* منوی موبایل بدون جاوااسکریپت: checkbox پنهان + label. */
.nav-toggle-label { display: none; }

@media (max-width: 1023px) {
    .header-inner { display: flex; }

    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-inline-start: auto;
        cursor: pointer;
    }

    .nav-toggle-label span {
        display: block;
        height: 2px;
        background: var(--on-surface);
        border-radius: var(--radius-full);
    }

    .site-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: calc(100% + var(--space-sm));
        margin: 0;
        padding: var(--space-sm) var(--space-lg) var(--space-md);
        background: var(--glass-bg-nav-scrolled);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-2);
    }

    .nav-toggle:checked ~ .site-nav { display: block; }

    /* اینجا هم «‎> ul‎»: وگرنه همان قاعده روی زیرمنو می‌نشیند و
       `display: block` مخصوص موبایل را می‌شکند. */
    .site-nav > ul { flex-direction: column; gap: 0; padding: 0; }
    .site-nav li { border-bottom: 1px solid var(--surface-container-high); }
    .site-nav li:last-child { border-bottom: 0; }
    .site-nav a { display: block; padding: var(--space-md) 0; border-bottom: 0; }

    /* زیرمنو در موبایل همان‌جا تو-در-تو باز می‌شود (بدون hover قابل اتکا
       روی لمس) — همیشه دیده می‌شود. */
    .site-submenu {
        position: static;
        display: block;
        margin: 0 0 0 var(--space-lg);
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .site-submenu a { padding: var(--space-sm) 0; white-space: normal; }
    .has-children > a::after { display: none; }

    /* در موبایل زیرمنو ثابت و همیشه باز است، پس پل لازم نیست و نباید روی
       محتوای زیرش بیفتد و لمس را بگیرد. */
    .site-nav .has-children:hover::after,
    .site-nav .has-children:focus-within::after { display: none; }

    .header-actions .btn-ghost { display: none; }
}

/* زیر ۶۴۰ پیکسل نوار قرص‌شکل فقط جای لوگو و دکمهٔ منو دارد؛ فراخوان‌ها
   به داخل منو منتقل می‌شوند تا نوار نشکند. */
@media (max-width: 639px) {
    .header-actions { display: none; }

    .nav-actions-mobile {
        display: grid;
        gap: var(--space-sm);
        padding-top: var(--space-md);
        margin-top: var(--space-sm);
        border-top: 1px solid var(--surface-container-high);
    }

    .nav-actions-mobile .btn { width: 100%; }
}

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

.hero {
    position: relative;
    padding-block: clamp(var(--space-xxl), 7vw, var(--space-section));
    /* پس‌زمینهٔ «مایع»: آبی نهادی لنگر است و سبز فقط اشاره‌ای کم‌رمق —
       طبق DESIGN.md سبز «راهبردی» است، نه پرده‌ای که هویت آبی را بپوشاند. */
    background:
        radial-gradient(ellipse 90% 70% at 85% -15%, var(--primary-fixed) 0%, transparent 62%),
        radial-gradient(ellipse 55% 45% at 5% -5%, rgba(111, 251, 190, .28) 0%, transparent 60%),
        var(--background);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    gap: var(--space-xxl);
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

/* نشان کوچک بالای عنوان. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-full);
    background: rgba(108, 248, 187, .22);
    border: 1px solid rgba(0, 108, 73, .3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--on-secondary-container);
    font-size: var(--fs-body-sm);
    font-weight: 700;
}

.hero h1 {
    max-width: 18ch;
    font-size: var(--fs-display-lg);
    line-height: 1.1;
    color: var(--primary);
}

/* خط دوم عنوان با رنگ رشد — الگوی مرجع. */
.hero h1 .accent { color: var(--secondary); }

.hero .lead {
    max-width: 56ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}

.hero-proof {
    margin: 0;
    padding: 0;
    margin-top: var(--space-xl);
}

.hero-proof .check-item {
    background: rgba(255, 255, 255, .6);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* قاب تصویر شیشه‌ای — تصویر داخل یک لایهٔ شیشه «گهواره» می‌شود. */
.hero-visual { position: relative; }

.hero-frame {
    padding: var(--space-sm);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3);
}

.hero-frame img { display: block; width: 100%; border-radius: var(--radius-lg); }

/* کارت شناور روی گوشهٔ تصویر. */
.hero-float {
    position: absolute;
    bottom: calc(var(--space-xl) * -1);
    inset-inline-start: calc(var(--space-lg) * -1);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-2);
}

@media (max-width: 767px) { .hero-float { display: none; } }

.hero-float-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.hero-float-label { font-size: var(--fs-body-sm); color: var(--c-text-muted); }
.hero-float-value { font-weight: 700; font-size: var(--fs-h4); color: var(--primary); }

/* اعداد کلیدی — هم برای کاربر و هم ادعای عددیِ قابل‌نقل برای موتورهای پاسخ. */
.stat-row {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: var(--space-xxl);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
}

.stat-value {
    display: block;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--primary);
}

.stat-label { font-size: var(--fs-body-sm); color: var(--c-text-muted); }

/* =============================================================================
   کارت و بنتو گرید
   ============================================================================= */

.card-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
    transition: box-shadow .4s var(--ease-glass), transform .4s var(--ease-glass);
}

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

.card h2, .card h3 { font-size: var(--fs-h4); color: var(--primary); margin-bottom: var(--space-sm); }
.card h2 a, .card h3 a { color: inherit; }
.card h2 a:hover, .card h3 a:hover { text-decoration: none; color: var(--primary-container); }

.card p { color: var(--c-text-muted); font-size: var(--fs-body-sm); margin-bottom: var(--space-md); }

/* تصویر شاخص در کارت‌های فهرست مطالب — مثل بقیهٔ چیدمان شیشه‌ای کارت،
   گوشه‌ها گرد و تصویر با object-fit برش می‌خورد تا نسبت‌های ناهمسان کارت‌ها
   را ناتراز نکند. */
.card .card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    background: var(--surface-container-high);
}

.card .card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: auto;
    font-size: var(--fs-body-sm);
    font-weight: 700;
}

/* یادداشت انتشار آخرین نسخه در صفحهٔ دانلود — جدول‌بندی ساده. */
.release-notes { margin-top: var(--space-xl); }
.release-notes .prose { max-width: none; }

.card .card-link:hover { text-decoration: none; }

/* ── قیمت ────────────────────────────────────────────────────────────────── */

/* بستهٔ «محبوب‌ترین» با کادر سبز رشد از بقیه جدا می‌شود. */
.card-featured {
    border-color: var(--secondary);
    border-width: 2px;
    box-shadow: var(--shadow-2);
}

.price { margin-bottom: var(--space-xs); }

.price-value {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--primary);
}

.price-unit { font-size: var(--fs-body-sm); color: var(--c-text-muted); }

.price-alt { font-size: var(--fs-body-sm); color: var(--c-text-muted); margin-bottom: var(--space-xs); }

.price-seats {
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--c-border);
}

/* ستون‌های مبلغ در جدول قیمت چپ‌به‌راست و هم‌تراز می‌مانند تا مقایسه ساده باشد. */
.data-table td { font-variant-numeric: tabular-nums; }

/* کارت فراخوان اقدام — پایان صفحهٔ ماژول. */
.cta-card { align-items: flex-start; }
.cta-card h2 { font-size: var(--fs-h3); }
.cta-card p { max-width: 60ch; font-size: var(--fs-body-md); }
.cta-card:hover { transform: none; box-shadow: var(--shadow-1); }

/* آیکون دایره‌ای بالای کارت. */
.card-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--surface-container-high);
    color: var(--primary);
}

.card-icon-accent { background: rgba(0, 108, 73, .1); color: var(--secondary); }

/* بنتو: کارت‌های نامساوی روی شبکهٔ ۳ ستونه. */
.bento {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) { .bento { grid-template-columns: repeat(3, 1fr); } }

.bento-wide { grid-column: span 1; }
@media (min-width: 768px) { .bento-wide { grid-column: span 2; } }

/* کارت تیره داخل بنتو — تضاد و لنگر بصری. */
.card-dark {
    background: var(--primary);
    border-color: rgba(255, 255, 255, .1);
    color: var(--primary-fixed);
}

.card-dark h2, .card-dark h3 { color: var(--on-primary); }
.card-dark p { color: var(--primary-fixed); opacity: .85; }
.card-dark .card-icon { background: rgba(255, 255, 255, .1); color: var(--on-primary); }
.card-dark .card-link { color: var(--c-accent-ai); }

.compact-list { margin-top: var(--space-lg); }

.compact-list .check-item {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-container-low);
}

/* =============================================================================
   چیدمان معرفی ماژول‌ها
   ============================================================================= */

.plan-grid {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
}

@media (min-width: 1024px) {
    .plan-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
}

.plan-sidebar {
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    position: sticky;
    top: calc(var(--nav-height) + var(--space-xl));
}

.plan-sidebar h2 { color: var(--primary); }

.plan-sidebar p {
    color: var(--c-text-muted);
    font-size: var(--fs-body-sm);
}

.plan-menu {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.plan-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    color: var(--c-text-muted);
    background: var(--surface-container-lowest);
    border: 1px solid transparent;
    transition: border-color .25s var(--ease-glass), background .25s var(--ease-glass),
                color .25s var(--ease-glass), transform .25s var(--ease-glass);
}

.plan-link::after {
    content: '←';
    font-size: 1rem;
    color: inherit;
}

.plan-link:hover {
    text-decoration: none;
    color: var(--primary);
    border-color: var(--outline-variant);
    transform: translateY(-2px);
}

.plan-link.is-active {
    color: var(--on-primary-fixed);
    background: var(--primary-fixed);
    border-color: rgba(0, 30, 64, .08);
}

.plan-feature {
    padding: clamp(var(--space-xl), 3vw, var(--space-xxl));
}

.plan-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--primary);
    font-size: var(--fs-body-sm);
    font-weight: 700;
}

.plan-version {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    background: rgba(108, 248, 187, .18);
    color: var(--on-secondary-container);
    font-size: var(--fs-body-sm);
    font-weight: 700;
}

.plan-body {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 960px) {
    .plan-body { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
}

.plan-art {
    padding: var(--space-sm);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-1);
}

.plan-art img {
    display: block;
    width: 100%;
    border-radius: calc(var(--radius-xl) - 8px);
}

/* =============================================================================
   بلوک تیرهٔ بزرگ (بخش هوش مصنوعی)
   ============================================================================= */

.feature-dark {
    position: relative;
    padding: clamp(var(--space-xl), 5vw, var(--space-section));
    border-radius: var(--radius-hero);
    background: var(--primary);
    color: var(--primary-fixed);
    overflow: hidden;
}

.feature-dark h2 { color: var(--on-primary); }

.feature-dark-grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 1024px) { .feature-dark-grid { grid-template-columns: 1fr 1fr; } }

.pill {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--on-secondary);
    font-size: var(--fs-body-sm);
    font-weight: 700;
}

.feature-list { display: grid; gap: var(--space-xl); }

.feature-item { display: flex; gap: var(--space-md); }

.feature-item-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--on-primary);
}

.feature-item h4 { color: var(--on-primary); margin-bottom: var(--space-xs); }
.feature-item p { opacity: .75; font-size: var(--fs-body-sm); margin: 0; }

/* هالهٔ تپنده پشت آیکون بزرگ. */
.feature-orb {
    display: grid;
    place-items: center;
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, .1);
}

.feature-orb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 108, 73, .18);
    filter: blur(48px);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.feature-orb .icon { position: relative; width: 120px; height: 120px; color: var(--secondary-fixed-dim); }

.feature-orb-img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 252px;
    border-radius: 28px;
    box-shadow: 0 18px 36px rgba(0, 30, 64, .18);
}

/* =============================================================================
   رویدادها و مقالات
   ============================================================================= */

.content-split {
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 1024px) {
    .content-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.content-panel {
    padding: clamp(var(--space-xl), 2.2vw, var(--space-xxl));
}

.stacked-list {
    display: grid;
    gap: var(--space-md);
}

.stacked-item {
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    background: var(--surface-container-low);
    border: 1px solid rgba(0, 30, 64, .06);
}

.stacked-item h3 {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-sm);
}

.stacked-item p:last-child { margin-bottom: 0; }

.panel-link {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

/* =============================================================================
   فراخوان نهایی
   ============================================================================= */

.cta-panel {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    padding: clamp(var(--space-xl), 4vw, var(--space-section));
    border-radius: var(--radius-hero);
    background:
        radial-gradient(circle at top right, rgba(167, 200, 255, .34), transparent 34%),
        radial-gradient(circle at bottom left, rgba(108, 248, 187, .18), transparent 28%),
        var(--primary);
    color: var(--primary-fixed);
}

@media (min-width: 960px) {
    .cta-panel { grid-template-columns: minmax(0, 1.3fr) auto; }
}

.cta-panel h2 { color: var(--on-primary); }

.cta-panel p {
    margin-bottom: 0;
    max-width: 58ch;
    color: var(--primary-fixed);
}

.cta-panel .eyebrow {
    background: rgba(255, 255, 255, .1);
    color: var(--on-primary);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

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

.timeline { position: relative; display: grid; gap: var(--space-lg); }

.timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 23px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-border);
}

.timeline-item { display: flex; gap: var(--space-lg); align-items: flex-start; }

.timeline-num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.timeline-item:nth-child(2) .timeline-num { background: var(--secondary); }
.timeline-item:nth-child(3) .timeline-num { background: var(--surface-container-highest); color: var(--primary); }

.timeline-item h4 { color: var(--primary); margin-bottom: var(--space-xs); }
.timeline-item p { color: var(--c-text-muted); font-size: var(--fs-body-sm); margin: 0; }

/* =============================================================================
   بلوک «پاسخ اول» — لایهٔ هوشمند و کلید AEO
   -----------------------------------------------------------------------------
   عمداً برجسته و در بالای صفحه: کاربر پاسخش را فوری می‌گیرد و موتورهای پاسخ
   همین بند را نقل می‌کنند (در JSON-LD با speakable به همین کلاس اشاره شده).
   ============================================================================= */

.answer-summary {
    margin: 0 0 var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--c-accent-ai-soft) 0%, var(--surface-container-lowest) 100%);
    border: 1px solid var(--c-accent-ai);
    border-inline-start-width: 4px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body);
    color: var(--on-primary-fixed);
}

.answer-summary p:last-child { margin-bottom: 0; }

/* =============================================================================
   محتوای مقاله
   ============================================================================= */

.prose { max-width: 68ch; font-size: var(--fs-body-md); }

/* متن کامل مطلب باید از عرض موجود صفحه استفاده کند؛ محدودیت 68ch فقط برای
   قطعه‌های متنی کوتاه/کارت‌ها مناسب است و در صفحهٔ مستقل باعث خروجی باریک می‌شد. */
.content-article .prose { max-width: none; width: 100%; }
.wp-preview-pane { max-width: none; width: 100%; min-height: 16rem; }
.content-url { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.content-url:hover { color: var(--primary); }
.content-title-link { color: inherit; font-weight: 700; }
.content-title-link:hover { color: var(--primary); }

.prose h2 { margin-top: var(--space-xxl); padding-top: var(--space-sm); border-top: 1px solid var(--c-border); }
.prose h3 { margin-top: var(--space-xl); }
.prose > ul, .prose > ol { margin-bottom: var(--space-md); }
.prose li { margin-bottom: var(--space-sm); }

.prose blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-sm) var(--space-lg);
    border-inline-start: 3px solid var(--c-accent-ai);
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
}

.prose img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    margin-block: var(--space-lg);
    box-shadow: var(--shadow-1);
}

/* ویدئوی درج‌شده در متن مطلب — خروجی ContentRenderer برای `![alt](clip.mp4)`. */
.prose .content-video,
.content-video {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: var(--space-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-1);
    background: #000;
}

/* جدول: باید HTML واقعی باشد تا هم گوگل و هم موتورهای پاسخ بخوانندش. */
.prose table, .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-block: var(--space-lg);
    font-size: var(--fs-body-sm);
    background: var(--surface-container-lowest);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.prose table th, .prose table td,
.data-table th, .data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--surface-container-high);
    text-align: start;
}

.prose table th, .data-table th { background: var(--surface-container); font-weight: 700; }
.prose table tr:last-child td, .data-table tr:last-child td { border-bottom: 0; }
.prose table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--surface-container-low); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ردیف ویژگی با تیک — الگوی مرجع. */
.check-list { display: grid; gap: var(--space-md); list-style: none; padding: 0; margin: 0; }

.check-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--surface-container);
    font-size: var(--fs-body-sm);
}

.check-item .icon { color: var(--secondary); }

/* =============================================================================
   فهرست مطالب
   ============================================================================= */

.toc {
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-body-sm);
}

.toc h2 { font-size: var(--fs-body-md); margin-bottom: var(--space-sm); border: 0; padding: 0; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: var(--space-xs); }
.toc li.level-3 { padding-inline-start: var(--space-md); }

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

.faq-list { max-width: 68ch; margin-inline: auto; }

/* داخل مقاله، پرسش‌ها با ستون متن هم‌تراز می‌مانند نه وسط‌چین. */
.faq-list-start { margin-inline: 0; }
.faq-list-start > h2 { margin-bottom: var(--space-md); }

.faq-item {
    background: var(--surface-container-lowest);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
    transition: border-color .3s var(--ease-glass), box-shadow .3s var(--ease-glass);
}

.faq-item[open] { border-color: var(--c-accent-ai); box-shadow: var(--shadow-1); }

/* details/summary بومی مرورگر — بدون جاوااسکریپت، و محتوایش همیشه در DOM
   هست پس خزنده و موتور پاسخ آن را می‌بینند. */
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-weight: 700;
    font-size: var(--fs-body-sm);
    cursor: pointer;
    list-style: none;
}

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

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--surface-container);
    color: var(--primary);
    font-size: var(--fs-body-md);
    line-height: 1;
}

.faq-item[open] summary::after { content: '−'; background: var(--c-accent-ai-soft); }
.faq-item .faq-answer { padding: 0 var(--space-lg) var(--space-md); color: var(--c-text-muted); font-size: var(--fs-body-sm); }

/* =============================================================================
   فرم
   ============================================================================= */

.form-field { margin-bottom: var(--space-md); }
.form-field label { display: block; margin-bottom: var(--space-xs); font-size: var(--fs-body-sm); font-weight: 700; }

.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: var(--space-md);
    background: var(--surface-container-lowest);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    font: inherit;
    font-size: var(--fs-body-sm);
    color: var(--c-text);
    min-height: 48px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* روی فوکوس کادر به رنگ لایهٔ هوشمند می‌رود با درخشش نرم ۴ پیکسلی. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--c-accent-ai);
    box-shadow: var(--shadow-focus);
}

.form-field .hint { margin-top: var(--space-xs); font-size: var(--fs-body-sm); color: var(--c-text-muted); }
.field-error { margin-top: var(--space-xs); font-size: var(--fs-body-sm); color: var(--error); }

/* شماره موبایل و کد یک‌بارمصرف همیشه چپ‌به‌راست وارد می‌شوند. */
input[inputmode="numeric"], input[type="tel"] { direction: ltr; text-align: start; }

/* جستجوی نوار ناوبری. */
.nav-search { position: relative; display: none; }
@media (min-width: 1120px) { .nav-search { display: block; width: 300px; } }
@media (min-width: 1440px) { .nav-search { width: 360px; } }

.nav-search input {
    width: 100%;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .4);
    font: inherit;
    font-size: var(--fs-body-sm);
    min-height: 40px;
}

.nav-search input:focus { outline: none; box-shadow: var(--shadow-focus); }
.nav-search .icon { position: absolute; inset-inline-end: var(--space-sm); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-text-muted); pointer-events: none; }

/* =============================================================================
   پیام و چیپ
   ============================================================================= */

.alert { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-md); font-size: var(--fs-body-sm); border: 1px solid transparent; }
.alert-success { background: var(--secondary-container); border-color: var(--secondary); color: var(--on-secondary-fixed); }
.alert-error { background: var(--error-container); border-color: var(--error); color: var(--on-error-container); }
.alert-info { background: var(--c-accent-ai-soft); border-color: var(--c-accent-ai); color: var(--on-primary-fixed); }
.alert-warning { background: var(--tertiary-fixed); border-color: var(--on-tertiary-fixed-variant); color: var(--on-tertiary-fixed); }

.chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--fs-body-sm); font-weight: 700; line-height: 1.5; }
.chip-paid { background: var(--secondary-container); color: var(--on-secondary-fixed); }
.chip-pending { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed); }
.chip-overdue { background: var(--error-container); color: var(--on-error-container); }
.chip-neutral { background: var(--surface-container-high); color: var(--c-text-muted); }

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

.breadcrumb { font-size: var(--fs-body-sm); color: var(--c-text-muted); margin-bottom: var(--space-md); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.breadcrumb li::after { content: '/'; margin-inline-start: var(--space-xs); color: var(--c-border); }
.breadcrumb li:last-child::after { content: ''; }

.entry-meta { font-size: var(--fs-body-sm); color: var(--c-text-muted); margin-bottom: var(--space-lg); }
.entry-meta > * + *::before { content: '·'; margin-inline: var(--space-sm); color: var(--c-border); }

/* =============================================================================
   واژه‌نامه و صفحه‌بندی
   ============================================================================= */

.glossary-list { margin: 0; }
.glossary-list dt { margin-top: var(--space-lg); font-weight: 700; font-size: var(--fs-body-md); }
.glossary-list dd { margin: var(--space-xs) 0 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--c-border); color: var(--c-text-muted); font-size: var(--fs-body-sm); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--c-border); font-size: var(--fs-body-sm); }
.pagination a { font-weight: 700; }
.pagination-status { color: var(--c-text-muted); }

/* =============================================================================
   پابرگ — روشن، مطابق مرجع
   ============================================================================= */

.site-footer {
    margin-top: var(--space-section);
    padding-block: var(--space-section) var(--space-xl);
    background: var(--surface-container-lowest);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-body-sm);
    color: var(--c-text-muted);
}

.site-footer .brand-name {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--primary);
    font-size: var(--fs-h4);
    font-weight: 700;
}

.site-footer a { color: var(--c-text-muted); }
.site-footer a:hover { color: var(--primary); }

.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-about p { max-width: 40ch; }
.footer-contact { margin-bottom: var(--space-sm); }

.footer-col h2 { color: var(--primary); font-size: var(--fs-body-md); margin-bottom: var(--space-lg); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--space-md); }

.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-xl) 0 0; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--surface-container); color: var(--primary); }
.footer-social a:hover { background: var(--primary-fixed); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xxl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--c-border);
}

.footer-bottom p { margin: 0; }
.footer-machine { opacity: .8; }

/* =============================================================================
   صفحات محصولات (فهرست + معرفی)
   ============================================================================= */

.product-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    background: var(--surface-container-high);
}

.product-page { max-width: 900px; }

.product-page-head { margin-bottom: var(--space-xl); }

.product-page-head h1 { margin: var(--space-sm) 0; }

.product-page-head .lead { font-size: var(--fs-h4); color: var(--c-text-muted); }

.product-hero-img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: 320px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    margin: var(--space-xl) 0;
    background: var(--surface-container-high);
}

.product-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--c-border);
}

.product-page-actions .price { margin: 0; }

/* =============================================================================
   چاپ
   ============================================================================= */

@media print {
    body { padding-top: 0; font-size: 11pt; line-height: 1.6; background: #fff; }
    .site-header, .site-footer, .campaign-banner, .skip-link, .toc, .pagination, .hero-float { display: none; }
    .prose { max-width: none; }
    .card, .stat-row, .answer-summary, .glass, .hero-frame {
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid #ccc;
    }
    .reveal { opacity: 1; animation: none; }
    a::after { content: ' (' attr(href) ')'; font-size: .85em; color: #555; }
}

/* ── برچسب‌های مطلب (صفحهٔ عمومی) ────────────────────────────────────────── */

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--c-border, rgba(0, 0, 0, .1));
}

.entry-tags-label {
    color: var(--c-text-muted);
    font-size: 14px;
}

.entry-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-container, rgba(0, 0, 0, .04));
    color: inherit;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.entry-tag:hover,
.entry-tag:focus-visible {
    background: var(--primary);
    color: var(--on-primary, #fff);
}