/* ==========================================================================
   LimTAG — سیستم طراحی سایت عمومی
   --------------------------------------------------------------------------
   پالت: آبی برند روشن‌تر شده تا سایت سنگین و تیره به نظر نرسد؛ رنگ اصلی لوگو
   (#000091) فقط برای خود لوگو و عمیق‌ترین سطح پس‌زمینه نگه داشته شده است.
   موتیف بصری: نوار چهاررنگ نمایشگر کاغذ الکترونیکی (قرمز/زرد/مشکی/سفید).
   ========================================================================== */

/* ---------- فونت ---------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@supports not (font-variation-settings: normal) {
    @font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
    @font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
    @font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
}

/* ==========================================================================
   ۱. توکن‌ها
   ========================================================================== */
:root {
    /* آبی برند — روشن‌تر و زنده‌تر از سرمه‌ای لوگو */
    --b-50:  #eef2ff;
    --b-100: #e0e7ff;
    --b-200: #c7d2fe;
    --b-300: #a5b4fc;
    --b-400: #818cf8;
    --b-500: #6172f3;
    --b-600: #4c5ce8;   /* رنگ اصلی کنش‌ها */
    --b-700: #3d49cc;
    --b-800: #333da3;
    --b-900: #2a3180;
    --b-950: #1a1f52;   /* عمیق‌ترین سطح، برای فوتر و هیرو */

    /* لوگو — فقط برای خود نشان برند */
    --logo-navy: #000091;

    /* لهجه کهربایی از نسخه روشن لوگو */
    --a-400: #ffc84d;
    --a-500: #ffb300;
    --a-600: #e89b00;
    --a-100: #fff4d9;

    /* رنگ‌های نمایشگر کاغذ الکترونیکی */
    --e-red: #e02b3c;
    --e-yellow: #f7c948;
    --e-black: #1b1f2e;

    /* خنثی — حالت روشن */
    --ink-950: #0d1220;
    --ink-900: #161d31;
    --ink-700: #333d59;
    --ink-500: #5d6885;
    /* متن‌های ثانویه کوچک با این رنگ نوشته می‌شوند؛ روشن‌تر از این،
       نسبت کنتراست روی سفید زیر ۴.۵ می‌افتد. */
    --ink-400: #656f8a;
    --ink-300: #98a1ba;
    --ink-200: #d4dae7;

    --line: #e6eaf3;
    --line-2: #d2d9e8;
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-3: #eef2f9;

    /* نقش‌های وابسته به تم — در حالت تیره بازتعریف می‌شوند */
    --tint: var(--b-50);          /* پس‌زمینه ملایم برندی (eyebrow، هاور، هایلایت) */
    --tint-line: var(--b-100);
    --tint-ink: var(--b-700);     /* متن روی سطح ملایم */
    --brand-text: var(--b-700);   /* لینک و عنوان برندی روی سطح روشن */
    --header-bg: rgba(255, 255, 255, .82);
    --header-bg-stuck: rgba(255, 255, 255, .94);
    --glass: rgba(255, 255, 255, .92);
    --signal-ink: 76, 92, 232;    /* رنگ رد ماوس روی سطح روشن */
    --shadow-tone: 26, 31, 82;

    --ok: #10b981;
    --warn: #f59e0b;
    --danger: #ef4444;
    /* رنگ متن خطا باید تیره‌تر از رنگ زمینه‌ای خطا باشد تا روی سفید خوانا بماند. */
    --danger-text: #c81e1e;

    /* رنگ‌های نقشی که در دو تم مقدار متفاوت دارند */
    --warn-bg: #fffbeb;
    --warn-line: #fde68a;
    --warn-ink: #92400e;
    --cold-bg: #cffafe;
    --cold-ink: #0e7490;
    --pdf-bg: #fee2e2;
    --pdf-ink: #dc2626;
    --quote-bg: var(--a-100);

    /* شعاع */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-2xl: 36px;

    /* سایه — آبی‌فام تا با پس‌زمینه یکی شود */
    --sh-xs: 0 1px 2px rgba(26, 31, 82, .05);
    --sh-sm: 0 2px 6px rgba(26, 31, 82, .06), 0 1px 2px rgba(26, 31, 82, .04);
    --sh-md: 0 8px 20px rgba(26, 31, 82, .08), 0 2px 6px rgba(26, 31, 82, .04);
    --sh-lg: 0 20px 44px rgba(26, 31, 82, .11), 0 6px 14px rgba(26, 31, 82, .06);
    --sh-xl: 0 32px 70px rgba(26, 31, 82, .15);
    --sh-brand: 0 10px 28px rgba(76, 92, 232, .32);
    --sh-amber: 0 10px 28px rgba(255, 179, 0, .32);

    /* حرکت */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .18s;
    --t: .3s;
    --t-slow: .55s;

    --wrap: 1240px;
    --pad: clamp(1.15rem, .6rem + 2.2vw, 2.5rem);
    --header-h: 76px;

    color-scheme: light;
}

/* ==========================================================================
   ۱-۲. حالت تیره
   --------------------------------------------------------------------------
   فقط نقش‌ها بازتعریف می‌شوند، نه تک‌تک قاعده‌ها. بخش‌های همیشه‌تیره
   (هیرو، فراخوان، فوتر) در این حالت هم تیره می‌مانند اما یک پله عمیق‌تر
   می‌شوند تا از سطح صفحه جدا بمانند.
   ========================================================================== */
:root[data-theme="dark"] {
    --ink-950: #f2f5fc;
    --ink-900: #e4e9f5;
    --ink-700: #c2cadd;
    --ink-500: #9aa4bf;
    --ink-400: #7c86a3;
    --ink-300: #5c6683;
    --ink-200: #414b66;

    --line: #232a44;
    --line-2: #2e3757;
    --surface: #151b30;
    --surface-2: #0e1324;
    --surface-3: #1c2338;

    --tint: #1b2340;
    --tint-line: #2a3358;
    --tint-ink: #a8b4ff;
    --brand-text: #a5b4fc;
    --header-bg: rgba(14, 19, 36, .82);
    --header-bg-stuck: rgba(14, 19, 36, .95);
    --glass: rgba(21, 27, 48, .92);
    --signal-ink: 148, 163, 255;
    --danger-text: #fca5a5;
    --shadow-tone: 0, 0, 0;

    /* نسخه تیره رنگ‌های نقشی — روشن‌تر روی زمینه تیره تا خوانا بماند */
    --warn-bg: #3a2a10;
    --warn-line: #5c431a;
    --warn-ink: #fbbf24;
    --cold-bg: #0d3b45;
    --cold-ink: #67e8f9;
    --pdf-bg: #40201f;
    --pdf-ink: #fca5a5;
    --quote-bg: #33280d;

    /* در پس‌زمینه تیره، سایه‌ها باید عمیق‌تر باشند تا اصلاً دیده شوند. */
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .32);
    --sh-sm: 0 2px 6px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .28);
    --sh-md: 0 8px 20px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --sh-lg: 0 20px 44px rgba(0, 0, 0, .52), 0 6px 14px rgba(0, 0, 0, .34);
    --sh-xl: 0 32px 70px rgba(0, 0, 0, .6);
    --sh-brand: 0 10px 28px rgba(76, 92, 232, .42);

    color-scheme: dark;
}

/* ==========================================================================
   ۲. پایه
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* هنگام تعویض تم، انتقال رنگ‌ها یک لحظه خاموش می‌شود. بدون این، عناصری که
   رنگشان ارثی است (مثل عنوان داخل کارت) وسط انتقال گیر می‌کنند و ممکن است
   با رنگ تم قبلی روی زمینه تم جدید بمانند. */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
    transition: none !important;
}

/* قواعد display روی کلاس‌ها، قاعده پیش‌فرض مرورگر برای [hidden] را بی‌اثر می‌کنند. */
[hidden] { display: none !important; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--ink-700);
    background: var(--surface-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

a { color: var(--brand-text); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-text); filter: brightness(1.15); }

h1, h2, h3, h4, h5 {
    margin: 0 0 .55em;
    color: var(--ink-950);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(1.85rem, 1.1rem + 3vw, 3.35rem); line-height: 1.2; }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.35rem); line-height: 1.26; }
h3 { font-size: clamp(1.1rem, .98rem + .6vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-inline-start: 1.3em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
    outline: 3px solid var(--a-500);
    outline-offset: 3px;
    border-radius: 6px;
}
::selection { background: var(--b-200); color: var(--b-950); }

/* اعداد لاتین در متن راست‌چین باید جهت خودشان را حفظ کنند. */
.num-latin { font-variant-numeric: lining-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ==========================================================================
   ۳. چیدمان
   ========================================================================== */
.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--pad) * 2), 840px); margin-inline: auto; }

.section { padding: clamp(3.25rem, 2rem + 5vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.25rem, 1.6rem + 2.5vw, 3.75rem) 0; }
.section--alt { background: var(--surface); }
.section--tinted { background: linear-gradient(180deg, var(--tint), var(--surface-2)); }

.grid { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ==========================================================================
   ۴. عنوان بخش
   ========================================================================== */
.section-head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.25rem); max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--brand-text);
    background: var(--tint);
    border: 1px solid var(--tint-line);
    padding: .38rem .9rem;
    border-radius: 100px;
    margin-bottom: 1.1rem;
}
/* نوار چهاررنگ کاغذ الکترونیکی — امضای بصری برند */
.eyebrow::before {
    content: '';
    width: 22px; height: 7px;
    border-radius: 2px;
    background: linear-gradient(to left,
        var(--e-red) 0 25%, var(--e-yellow) 25% 50%,
        var(--e-black) 50% 75%, #fff 75% 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.section-head p { color: var(--ink-500); font-size: clamp(.98rem, .94rem + .2vw, 1.1rem); }

/* ==========================================================================
   ۵. دکمه‌ها
   ========================================================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-weight: 600;
    font-size: .96rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    isolation: isolate;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
                transform .45s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:active { transform: scale(.98) !important; }

.btn-primary { background: var(--b-600); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--b-700); color: #fff; box-shadow: 0 14px 34px rgba(76, 92, 232, .42); }

/* دکمهٔ کهربایی شیشه‌ای. این دکمه همیشه روی پس‌زمینهٔ تیره می‌نشیند (عکس
   اسلایدر یا کارت فراخوان)، پس شفافیت پایین نگه داشته شده تا متن تیرهٔ روی
   آن حتی روی تیره‌ترین نقطه هم خوانا بماند؛ لبهٔ روشن بالا و تاری پشت،
   همان حس شیشه را می‌سازد. */
.btn-accent {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--a-500) 88%, transparent),
        color-mix(in srgb, var(--a-500) 76%, transparent));
    color: #2b1d02;
    border-color: rgba(255, 255, 255, .45);
    box-shadow: var(--sh-amber), inset 0 1px 0 rgba(255, 255, 255, .62);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
}
.btn-accent:hover {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--a-400) 94%, transparent),
        color-mix(in srgb, var(--a-400) 84%, transparent));
    color: #2b1d02;
    border-color: rgba(255, 255, 255, .62);
    box-shadow: 0 14px 34px rgba(255, 179, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.btn-outline { background: var(--surface); color: var(--brand-text); border-color: var(--line-2); }
.btn-outline:hover { background: var(--tint); border-color: var(--b-400); color: var(--brand-text); }

.btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .5); }

.btn-sm { padding: .5rem 1.05rem; font-size: .86rem; border-radius: var(--r-xs); }
.btn-lg { padding: 1rem 2.15rem; font-size: 1.02rem; border-radius: var(--r-md); }
.btn-block { width: 100%; }

/* ==========================================================================
   ۶. کارت
   ========================================================================== */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
                border-color var(--t) var(--ease);
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--b-200); }
.card-body { padding: clamp(1.1rem, .9rem + .5vw, 1.5rem); }

/* ==========================================================================
   ۷. کرسر متنی (فقط ماوس دقیق)
   ========================================================================== */
.cursor {
    position: fixed;
    top: 0; inset-inline-start: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-140px, -140px, 0);
    transition: opacity var(--t) var(--ease);
    will-change: transform;
}
.cursor__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 12px; height: 12px;
    padding: 0;
    border-radius: 999px;
    background: var(--b-600);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition: min-width .3s var(--ease-out), height .3s var(--ease-out),
                padding .3s var(--ease-out), background-color .25s var(--ease);
}
.cursor__label { opacity: 0; transition: opacity .18s var(--ease); }
.cursor.is-labelled .cursor__inner { min-width: 86px; height: 86px; padding: 0 16px; }
.cursor.is-labelled .cursor__label { opacity: 1; }
.cursor.is-down .cursor__inner { background: var(--a-500); color: #2b1d02; }

/* کرسر فقط برای اشاره‌گر دقیق معنا دارد؛ روی لمسی پنهان می‌ماند. */
@media (hover: none), (pointer: coarse) {
    .cursor { display: none !important; }
}

/* ==========================================================================
   ۷-۲. میدان سیگنال — دنباله‌ای که پشت ماوس کشیده می‌شود
   بوم ثابت، بدون دریافت رویداد، زیر هدر (۱۲۰) و زیر کرسر (۲۰۰).
   ========================================================================== */
.signal-field {
    position: fixed;
    inset: 0;
    /* canvas عنصر replaced است و فقط با inset کشیده نمی‌شود؛
       بدون width/height صریح روی اندازه ذاتی ۳۰۰×۱۵۰ می‌ماند. */
    width: 100%;
    height: 100%;
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s var(--ease);
}
.signal-field.is-on { opacity: 1; }

@media (hover: none), (pointer: coarse) {
    .signal-field { display: none !important; }
}

/* ==========================================================================
   ۸. انیمیشن ورود (Reveal)
   کلاس js روی html توسط اسکریپت اضافه می‌شود؛ بدون جاوااسکریپت همه‌چیز دیده می‌شود.
   ========================================================================== */
.js [data-rv] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js [data-rv].is-in { opacity: 1; transform: none; }

.js [data-rv="right"] { transform: translateX(28px); }
.js [data-rv="left"]  { transform: translateX(-28px); }
.js [data-rv="zoom"]  { transform: scale(.94); }
.js [data-rv="right"].is-in,
.js [data-rv="left"].is-in,
.js [data-rv="zoom"].is-in { transform: none; }

/* پرده تصویر: قاب از پایین باز می‌شود و تصویر داخلش از ۱.۱۲ به ۱ می‌رسد. */
.js [data-mask] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path .8s var(--ease-out);
}
.js [data-mask].is-in { clip-path: inset(0 0 0 0); }
.js [data-mask] img { transform: scale(1.12); transition: transform 1.1s var(--ease-out); }
.js [data-mask].is-in img { transform: scale(1); }

/* ==========================================================================
   ۹. هدر
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 120;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
                box-shadow var(--t) var(--ease);
}
.site-header.is-stuck {
    background: var(--header-bg-stuck);
    border-bottom-color: var(--line);
    box-shadow: var(--sh-sm);
}
/* نوار چهاررنگ زیر هدر که هم‌زمان نوار پیشرفت اسکرول است:
   بخش رنگی به اندازه درصد پیمایش صفحه پر می‌شود. */
.site-header::after {
    content: '';
    display: block;
    height: 3px;
    background:
        linear-gradient(to left,
            var(--e-red) 0 25%, var(--e-yellow) 25% 50%,
            var(--b-500) 50% 75%, var(--b-300) 75% 100%) no-repeat,
        var(--line);
    /* --scroll از جاوااسکریپت به‌روز می‌شود (۰ تا ۱). */
    background-size: calc(var(--scroll, 0) * 100%) 100%;
    background-position: right center;
    transition: background-size .08s linear;
}
[dir="ltr"] .site-header::after { background-position: left center; }

.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-h);
    transition: min-height var(--t) var(--ease);
}
.site-header.is-stuck .header-inner { min-height: 64px; }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand-logo {
    height: 44px; width: auto;
    transition: height var(--t) var(--ease);
}
.site-header.is-stuck .brand-logo { height: 38px; }

/* لوگوی سرمه‌ای روی زمینه تیره محو می‌شود و نسخه روشن روی زمینه سفید؛
   هر تم نسخه خودش را نشان می‌دهد. */
.brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: none; }
:root[data-theme="dark"] .brand-logo--light { display: block; }

.mobile-nav__head .brand-logo { height: 38px; }
.brand-text { display: none; line-height: 1.25; }
.brand-text strong { display: block; color: var(--brand-text); font-size: 1.02rem; font-weight: 800; }
.brand-text span { font-size: .67rem; color: var(--ink-400); letter-spacing: .02em; }
@media (min-width: 520px) { .brand-text { display: block; } }

/* --- منوی دسکتاپ --- */
.main-nav { display: none; margin-inline-start: auto; }
.main-nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    position: relative;
    display: block;
    padding: .6rem .95rem;
    border-radius: var(--r-xs);
    color: var(--ink-700);
    font-weight: 500;
    font-size: .95rem;
    transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
/* زیرخط از وسط باز می‌شود */
.main-nav a::after {
    content: '';
    position: absolute;
    inset-inline: .95rem;
    bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--b-600);
    transform: scaleX(0);
    transition: transform var(--t) var(--ease-out);
}
.main-nav a:hover { color: var(--brand-text); background: var(--tint); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--brand-text); font-weight: 700; }
.main-nav a.is-active::after { transform: scaleX(1); }
@media (min-width: 1060px) { .main-nav { display: block; } }

.header-actions { display: flex; align-items: center; gap: .55rem; margin-inline-start: auto; }
@media (min-width: 1060px) { .header-actions { margin-inline-start: 0; } }
.header-actions .btn { display: none; }
@media (min-width: 760px) { .header-actions .btn { display: inline-flex; } }

/* --- کلید روشن/تیره --- */
.theme-toggle {
    position: relative;
    width: 44px; height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink-700);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
                background-color var(--t) var(--ease);
}
.theme-toggle:hover { border-color: var(--b-400); color: var(--brand-text); background: var(--tint); }
.theme-toggle__icon {
    grid-area: 1 / 1;
    display: grid; place-items: center;
    transition: transform .45s var(--ease-spring), opacity .28s var(--ease);
}
.theme-toggle__icon svg { width: 20px; height: 20px; }
/* خورشید در حالت روشن دیده می‌شود و ماه در حالت تیره؛ جابه‌جایی با چرخش. */
.theme-toggle__icon--moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(70deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; transform: none; }

/* --- دکمه همبرگری با انیمیشن به ضربدر --- */
.nav-toggle {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    /* در RTL، flex-start روی محور عرضی یعنی سمت راست؛ خطوط از همان لبه‌ای
       شروع می‌شوند که خواندن از آن آغاز می‌شود. */
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    padding: 0 12px;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
                transform var(--t-fast) var(--ease-spring), box-shadow var(--t) var(--ease);
}
.nav-toggle:hover { border-color: var(--b-400); box-shadow: var(--sh-sm); }
.nav-toggle:active { transform: scale(.93); }
.nav-toggle:focus-visible { outline: 2px solid var(--b-500); outline-offset: 2px; }

.nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-700);
    transition: width var(--t) var(--ease-spring), transform var(--t) var(--ease-spring),
                opacity var(--t-fast) var(--ease), background-color var(--t) var(--ease);
}
/* طول‌های نامساوی، آیکون را از حالت سه‌خط خشک بیرون می‌آورد. */
.nav-toggle span:nth-child(1) { width: 19px; }
.nav-toggle span:nth-child(2) { width: 12px; }
.nav-toggle span:nth-child(3) { width: 15px; }
.nav-toggle:hover span { width: 19px; }

/* باز که شد: کادر رنگ برند می‌گیرد و سه خط به ضربدر تبدیل می‌شوند. */
.nav-toggle[aria-expanded="true"] {
    background: var(--tint);
    border-color: var(--b-400);
}
.nav-toggle[aria-expanded="true"] span { width: 19px; background: var(--b-600); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-toggle span { transition: opacity var(--t-fast) var(--ease); }
    .nav-toggle:active { transform: none; }
}
@media (min-width: 1060px) { .nav-toggle { display: none; } }

/* --- کشوی موبایل --- */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 130;
    /* تیرگی از سمت کشو غلیظ‌تر است تا کشو از پس‌زمینه جدا دیده شود. */
    background: linear-gradient(to left, rgba(9, 12, 24, .62), rgba(9, 12, 24, .42));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s,
                backdrop-filter .45s var(--ease);
}
.nav-scrim.is-open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* کشو از سمت راست باز می‌شود: در رابط فارسی، راست سمت شروع است و
   کاربر انتظار دارد منو از همان سمتی بیاید که خواندن از آن آغاز می‌شود. */
.mobile-nav {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 140;
    width: min(88vw, 350px);
    background: var(--surface);
    box-shadow: var(--sh-xl);
    /* در گوشی‌های دارای بریدگی، پایین کشو نباید زیر نوار خانه برود. */
    padding: max(1.15rem, env(safe-area-inset-top)) var(--pad)
             max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .55s var(--ease-spring), visibility .55s;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }

/* لبه برندی باریک در سمت باز شدن، تا کشو با پس‌زمینه یکی نشود. */
.mobile-nav::before {
    content: '';
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--b-500), var(--a-500));
}
@media (min-width: 1060px) { .mobile-nav, .nav-scrim { display: none !important; } }

.mobile-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-bottom: 1rem; margin-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.mobile-nav__close {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink-700); cursor: pointer;
    transition: transform var(--t) var(--ease-spring), background-color var(--t) var(--ease),
                border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.mobile-nav__close:hover {
    transform: rotate(90deg);
    background: var(--tint);
    border-color: var(--b-400);
    color: var(--b-600);
}
.mobile-nav__close svg { width: 18px; height: 18px; }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
/* فقط لینک‌های فهرست؛ وگرنه رنگ متن دکمه CTA پایین کشو هم بازنویسی می‌شود. */
.mobile-nav ul a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem .75rem;
    margin-bottom: .15rem;
    border-radius: var(--r-sm);
    color: var(--ink-700);
    font-weight: 500;
    font-size: 1rem;
    transform-origin: right center;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* ورود پلکانی با انیمیشن، نه با ترنزیشن از حالت نامرئی: اگر انیمیشن به هر
   دلیلی اجرا نشود، آیتم در حالت عادی و دیده‌شدنی خودش می‌ماند و منو خالی
   باز نمی‌شود. تأخیر هر آیتم را جاوااسکریپت می‌گذارد. */
.mobile-nav.is-open ul a { animation: navItemIn .5s var(--ease-spring); }
@keyframes navItemIn { from { opacity: 0; transform: translateX(30px) scale(.97); } }
.mobile-nav ul li + li a { border-top: 1px solid var(--line); }
.mobile-nav ul a:hover,
.mobile-nav ul a:focus-visible { background: var(--tint); color: var(--brand-text); }
/* پیکان به سمت جهت حرکت (در RTL چپ). با ترکیب دو ضلع منطقی و چرخش،
   در هر دو جهت نوشتار درست می‌ماند. */
.mobile-nav ul a::after {
    content: '';
    width: 7px; height: 7px;
    border-block-start: 2px solid var(--ink-300);
    border-inline-end: 2px solid var(--ink-300);
    transform: rotate(-45deg);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
[dir="ltr"] .mobile-nav ul a::after { transform: rotate(45deg); }
.mobile-nav ul a:hover::after { border-color: var(--b-500); }
.mobile-nav ul a.is-active {
    color: var(--brand-text);
    font-weight: 700;
    background: var(--tint);
}
/* نوار برندی کنار آیتم فعال، برای تشخیص سریع صفحه جاری */
.mobile-nav ul a.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 22%; bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--b-500);
}
.mobile-nav .btn { margin-top: 1.35rem; }
.mobile-nav__contact {
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    color: var(--ink-500);
}
.mobile-nav__contact a {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem 0;
    color: var(--ink-700);
}
.mobile-nav__contact a:hover { color: var(--brand-text); }
.mobile-nav__contact svg { width: 16px; height: 16px; color: var(--b-500); flex: none; }

/* ==========================================================================
   ۱۰. هیرو / اسلایدر
   ========================================================================== */
.hero {
    position: relative;
    background: var(--b-950);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hero-viewport {
    position: relative;
    display: grid;
    min-height: clamp(500px, 74vh, 720px);
}
/* همه اسلایدها روی هم؛ فقط فعال دیده می‌شود. */
.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--ease-out), visibility .9s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

/* --- تعویض اسلاید ---
   اسلاید تازه مثل یک پرده از لبه شروع باز می‌شود و روی اسلاید قبلی می‌نشیند؛
   قبلی همان‌جا می‌ماند تا زیرش پُر باشد و بین دو تصویر، پس‌زمینه خالی نبینیم.
   بدون جاوااسکریپت این افکت اصلاً اعمال نمی‌شود و همه‌چیز ساده و سالم است. */
/* پنهان‌سازی با clip-path انجام می‌شود، نه opacity/visibility؛ اسلایدی که در
   لحظه شروع visibility: hidden باشد، انیمیشنش اجرا نمی‌شود.
   شکل هم polygon است نه inset: مرورگر مقدارِ بازِ inset را به شکل کوتاه
   «inset(0px)» نرمال می‌کند و آن‌وقت دو سرِ ترنزیشن تعداد مؤلفه‌شان یکی
   نیست و اصلاً درون‌یابی نمی‌شوند. polygon همیشه نقطه‌به‌نقطه حرکت می‌کند. */
.js .hero-slide {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    transition: clip-path 1s var(--ease-out);
    z-index: 0;
}
.js .hero-slide.is-active {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    pointer-events: auto;
    z-index: 2;
}
[dir="ltr"] .js .hero-slide { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
[dir="ltr"] .js .hero-slide.is-active { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

/* اسلاید در حال خروج تا پایان پرده، کامل و زیر اسلاید تازه باقی می‌ماند. */
.js .hero-slide.is-leaving {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
    transition: none;
}

/* تصویر اسلاید تازه با یک جابه‌جایی کوچک وارد می‌شود تا حرکت پرده عمق بگیرد. */
.js .hero-slide .hero-bg { transform: translateX(3%); }
.js .hero-slide.is-active .hero-bg,
.js .hero-slide.is-leaving .hero-bg {
    transform: none;
    transition: transform 1.1s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    /* بدون حرکت: همان محو ساده قبلی، بدون پرده و بدون جابه‌جایی تصویر. */
    .js .hero-slide {
        clip-path: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s linear, visibility .3s;
    }
    .js .hero-slide.is-active,
    .js .hero-slide.is-leaving { clip-path: none; opacity: 1; visibility: visible; }
    .js .hero-slide .hero-bg { transform: none; transition: none; }
}

.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 8s linear;
}
/* کن‌برنز: تصویر اسلاید فعال آرام بزرگ‌نمایی می‌شود. */
.hero-slide.is-active .hero-bg img { transform: scale(1); }
/* پوشش روی عکس فقط باید متن را خوانا کند، نه اینکه کل تصویر را آبی نشان دهد.
   پس رنگش تقریباً خنثی است و فقط در همان نواری که متن می‌نشیند غلیظ می‌ماند؛
   سمت دیگر قاب، عکس با رنگ خودش دیده می‌شود. */
.hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to left,
            rgba(9, 11, 20, .78) 0%,
            rgba(9, 11, 20, .68) 40%,
            rgba(10, 13, 24, .32) 68%,
            rgba(12, 15, 28, .06) 100%),
        linear-gradient(to top, rgba(9, 11, 20, .5), transparent 42%);
}

.hero-content { position: relative; padding: 4rem 0 5.5rem; max-width: 660px; }

/* عناصر متن اسلاید فعال، پلکانی وارد می‌شوند. */
.hero-slide [data-hero-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.hero-slide.is-active [data-hero-anim] { opacity: 1; transform: none; }
.hero-slide.is-active [data-hero-anim]:nth-child(1) { transition-delay: .15s; }
.hero-slide.is-active [data-hero-anim]:nth-child(2) { transition-delay: .28s; }
.hero-slide.is-active [data-hero-anim]:nth-child(3) { transition-delay: .41s; }
.hero-slide.is-active [data-hero-anim]:nth-child(4) { transition-delay: .54s; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 600; letter-spacing: .06em;
    color: var(--a-500);
    background: rgba(255, 179, 0, .12);
    border: 1px solid rgba(255, 179, 0, .38);
    padding: .35rem 1rem;
    border-radius: 100px;
    margin-bottom: 1.3rem;
}
.hero-content h1 { color: #fff; margin-bottom: .9rem; text-wrap: balance; }
.hero-content p {
    color: #ccd2f0;
    font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
    margin-bottom: 2rem;
    max-width: 54ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --- کنترل اسلایدر --- */
.hero-controls {
    position: absolute;
    inset-inline: 0; bottom: 1.75rem;
    z-index: 4;
    display: flex; align-items: center; justify-content: center; gap: .7rem;
}
/* هر نقطه یک نوار است که نشان می‌دهد تا تعویض بعدی چقدر مانده. */
.hero-dot {
    position: relative;
    width: 56px; height: 5px;
    border: 0; padding: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .26);
    cursor: pointer;
    overflow: hidden;
    transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .42); transform: scaleY(1.4); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-dot.is-active { background: rgba(255, 255, 255, .3); }

.hero-dot::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to left, var(--a-500), #ffd166);
    transform: scaleX(0);
    transform-origin: right;
    border-radius: 5px;
}
[dir="ltr"] .hero-dot::after { transform-origin: left; }

/* نوار پیشرفت دقیقاً با همان مدت چرخش اسلاید پر می‌شود. */
.hero-dot.is-active::after { animation: heroProgress var(--hero-delay, 7s) linear forwards; }
@keyframes heroProgress { to { transform: scaleX(1); } }

/* وقتی چرخش متوقف است (اشاره‌گر روی اسلایدر، فوکوس، یا تب پنهان) نوار هم
   باید بایستد؛ وگرنه پیشرفتی را نشان می‌دهد که در حال شمردن نیست. */
.hero.is-paused .hero-dot.is-active::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .hero-dot.is-active::after { animation: none; transform: scaleX(1); }
    .hero-dot:hover { transform: none; }
}

.hero-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 4;
    width: 48px; height: 48px;
    display: none; place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff; cursor: pointer;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hero-arrow:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow--prev { inset-inline-end: var(--pad); }
.hero-arrow--next { inset-inline-start: var(--pad); }
@media (min-width: 900px) { .hero-arrow { display: grid; } }

/* ==========================================================================
   ۱۱. نوار آمار
   ========================================================================== */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
    margin-top: clamp(-4rem, -3vw, -2.5rem);
    position: relative;
    z-index: 5;
}
.stat {
    background: var(--surface);
    padding: clamp(1.3rem, 1rem + .8vw, 1.9rem) 1.25rem;
    text-align: center;
    transition: background-color var(--t) var(--ease);
}
.stat:hover { background: var(--tint); }
.stat-icon {
    width: 30px; height: 30px;
    margin: 0 auto .65rem;
    color: var(--b-500);
    transition: transform var(--t) var(--ease-spring), color var(--t) var(--ease);
}
.stat:hover .stat-icon { transform: translateY(-3px) scale(1.08); color: var(--b-600); }
.stat-value { font-size: clamp(1.65rem, 1.4rem + .8vw, 2.1rem); font-weight: 800; color: var(--brand-text); line-height: 1.1; }
.stat-value span { font-size: .92rem; font-weight: 600; color: var(--ink-500); margin-inline-start: .25rem; }
.stat-label { font-size: .87rem; color: var(--ink-500); margin-top: .4rem; }

/* ==========================================================================
   ۱۲. کارت دسته‌بندی
   ========================================================================== */
.cat-card {
    display: flex; flex-direction: column; height: 100%;
    padding: clamp(1.4rem, 1.1rem + .7vw, 1.85rem);
}
.cat-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(140deg, var(--tint), transparent 55%);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}
.cat-card > * { position: relative; }
.card-hover:hover .cat-card::before,
.cat-card.card-hover:hover::before { opacity: 1; }

.cat-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--b-600), var(--b-400));
    color: #fff;
    margin-bottom: 1.1rem;
    box-shadow: var(--sh-brand);
    transition: transform var(--t) var(--ease-spring);
}
.cat-card:hover .cat-icon { transform: rotate(-6deg) scale(1.06); }
.cat-icon svg { width: 27px; height: 27px; }
.cat-card h3 { margin-bottom: .5rem; }
.cat-card p { color: var(--ink-500); font-size: .94rem; flex: 1; }
.cat-link {
    margin-top: 1.1rem;
    font-weight: 700; font-size: .92rem;
    color: var(--brand-text);
    display: inline-flex; align-items: center; gap: .4rem;
}
.cat-link svg { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease-out); }
.cat-card:hover .cat-link svg { transform: translateX(-5px); }

/* ==========================================================================
   ۱۳. کارت محصول
   ========================================================================== */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    overflow: hidden;
}
.product-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-out);
}
.card-hover:hover .product-media img { transform: scale(1.07); }
/* روکش هنگام هاور، برای برجسته کردن کارت */
.product-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26, 31, 82, .28), transparent 45%);
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}
.card-hover:hover .product-media::after { opacity: 1; }

.product-badges {
    position: absolute; top: .8rem; inset-inline-start: .8rem;
    display: flex; flex-direction: column; gap: .4rem; z-index: 2;
}
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .26rem .65rem;
    border-radius: var(--r-xs);
    font-size: .73rem; font-weight: 700;
    background: var(--glass);
    color: var(--ink-700);
    box-shadow: var(--sh-xs);
    backdrop-filter: blur(4px);
}
/* برچسب شیشه‌ای: تصویر پشتش کمی دیده می‌شود، ولی شفافیت آن‌قدر پایین نگه
   داشته شده که متن تیره روی هر تصویری — حتی بخش‌های تاریک — خوانا بماند.
   لبهٔ روشن و درخشش داخلی، همان حسی را می‌دهد که از شیشه انتظار می‌رود. */
.badge-accent {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--a-500) 86%, transparent),
        color-mix(in srgb, var(--a-500) 74%, transparent));
    color: #2b1d02;
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow: 0 4px 14px rgba(150, 100, 0, .26),
                inset 0 1px 0 rgba(255, 255, 255, .65);
    backdrop-filter: blur(10px) saturate(1.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
}

.badge-cold {
    background: color-mix(in srgb, var(--cold-bg) 86%, transparent);
    color: var(--cold-ink);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 4px 14px rgba(20, 60, 90, .2),
                inset 0 1px 0 rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.badge-brand {
    background: color-mix(in srgb, var(--b-600) 88%, transparent);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 4px 14px rgba(30, 40, 120, .3),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* روی کارتی که اشاره‌گر رویش است، برچسب کمی شفاف‌تر و زنده‌تر می‌شود. */
.product-card:hover .badge { box-shadow: 0 6px 18px rgba(20, 25, 60, .22), inset 0 1px 0 rgba(255, 255, 255, .6); }

.product-card .card-body { display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: .78rem; color: var(--brand-text); font-weight: 700; margin-bottom: .4rem; }
.product-card h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.product-card h3 a { color: inherit; }
.product-card h3 a:hover { color: var(--brand-text); }
.product-card .desc { font-size: .9rem; color: var(--ink-500); flex: 1; margin-bottom: 1rem; }

.spec-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.chip {
    font-size: .75rem;
    padding: .28rem .65rem;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--ink-700);
    border: 1px solid var(--line);
}

/* ==========================================================================
   ۱۴. صفحه محصول
   ========================================================================== */
.product-layout { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); }
@media (min-width: 980px) {
    .product-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
    /* گالری هنگام خواندن مشخصات در دید بماند. */
    .product-gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.gallery-main {
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .35s var(--ease);
}
.gallery-main.is-swapping img { opacity: 0; }

.gallery-thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.gallery-thumb {
    width: 78px; height: 62px;
    border: 2px solid var(--line);
    border-radius: var(--r-xs);
    overflow: hidden; padding: 0; cursor: pointer;
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.is-active, .gallery-thumb:hover { border-color: var(--b-500); }

.product-head h1 { margin-bottom: .35rem; }
.product-subtitle { color: var(--ink-500); font-size: clamp(1rem, .96rem + .25vw, 1.12rem); margin-bottom: 1.1rem; }
.product-sku { font-size: .85rem; color: var(--ink-400); }

/* ۲۰۰ پیکسل باعث می‌شود در ستون محصول دو ستونه بچیند (۲×۲) نه ۳+۱ نامتوازن. */
.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .75rem; margin: 1.6rem 0; }
.highlight {
    background: linear-gradient(150deg, var(--tint), var(--surface-2));
    border: 1px solid var(--tint-line);
    border-radius: var(--r-sm);
    padding: .85rem .95rem;
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.highlight:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.highlight dt { font-size: .77rem; color: var(--ink-400); margin-bottom: .22rem; }
.highlight dd { margin: 0; font-weight: 700; color: var(--ink-950); font-size: .96rem; }

/* --- جدول مشخصات فنی --- */
.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spec-table caption {
    text-align: start; font-weight: 800; color: var(--ink-950);
    padding: 1.1rem 1.1rem .7rem; font-size: 1rem;
}
.spec-table th, .spec-table td { padding: .85rem 1.1rem; text-align: start; border-bottom: 1px solid var(--line); }
.spec-table th { width: 45%; font-weight: 500; color: var(--ink-500); background: var(--surface-2); }
.spec-table td { font-weight: 600; color: var(--ink-950); }
.spec-table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.spec-table tbody tr:hover th { background: var(--tint); }
.spec-table tbody tr:hover td { background: var(--tint); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-xs);
}

/* ==========================================================================
   ۱۵. تب‌ها
   ========================================================================== */
.tabs {
    position: relative;
    border-bottom: 2px solid var(--line);
    display: flex; gap: .2rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1.85rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .85rem 1.15rem;
    border: 0; background: none;
    font: inherit; font-weight: 600; font-size: .96rem;
    color: var(--ink-500); cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color var(--t-fast) var(--ease), border-color var(--t) var(--ease);
}
.tab:hover { color: var(--brand-text); }
.tab.is-active { color: var(--brand-text); border-bottom-color: var(--b-600); }

.tab-panel { animation: panelIn .45s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   ۱۶. فایل پیوست
   ========================================================================== */
.file-row {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.file-row:hover { border-color: var(--b-300); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.file-icon {
    width: 46px; height: 46px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--pdf-bg); color: var(--pdf-ink);
}
.file-icon svg { width: 22px; height: 22px; }
.file-meta { flex: 1; min-width: 0; }
.file-meta strong { display: block; font-size: .96rem; color: var(--ink-950); }
.file-meta span { font-size: .8rem; color: var(--ink-400); }
.file-actions { display: flex; gap: .5rem; flex: none; flex-wrap: wrap; }

/* ==========================================================================
   ۱۷. فرآیند اجرا
   ========================================================================== */
.steps { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); }
.step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.65rem 1.4rem 1.4rem;
    box-shadow: var(--sh-xs);
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.step::before {
    content: '';
    position: absolute; inset-inline: 0; top: 0;
    height: 3px;
    background: var(--step-accent, var(--b-600));
    border-radius: var(--r-md) var(--r-md) 0 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--t-slow) var(--ease-out);
}
[dir="ltr"] .step::before { transform-origin: left; }
.step:hover::before { transform: scaleX(1); }
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--b-200); }

.step-num {
    position: absolute; top: -15px; inset-inline-start: 1.4rem;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 11px;
    font-weight: 800; font-size: .95rem;
    color: #fff;
    /* رنگ لهجه از پنل مدیریت می‌آید و می‌تواند روشن باشد؛ کمی تیره‌تر می‌شود
       تا عدد سفید روی آن در هر رنگی خوانا بماند (نسبت کنتراست ≥ ۴.۵). */
    background: var(--step-accent, var(--b-600));
    background: color-mix(in srgb, var(--step-accent, var(--b-600)), #000 20%);
    box-shadow: 0 6px 16px rgba(26, 31, 82, .22);
    transition: transform var(--t) var(--ease-spring);
}
.step:hover .step-num { transform: scale(1.1) rotate(-5deg); }
.step-icon { width: 31px; height: 31px; color: var(--step-accent, var(--b-600)); margin: .6rem 0 .9rem; }
.step h3 { font-size: 1.05rem; color: var(--step-accent, var(--b-800)); margin-bottom: .75rem; }

/* رنگ لهجه مرحله از پنل مدیریت می‌آید و ممکن است هر مقداری باشد؛
   در حالت روشن کمی تیره و در حالت تیره کمی روشن می‌شود تا عنوان و آیکون
   در هر دو تم نسبت کنتراست کافی داشته باشند. */
.step h3, .step-icon {
    color: color-mix(in srgb, var(--step-accent, var(--b-800)), #000 22%);
}
:root[data-theme="dark"] .step h3,
:root[data-theme="dark"] .step-icon {
    color: color-mix(in srgb, var(--step-accent, var(--b-500)), #fff 45%);
}
:root[data-theme="dark"] .step li::before {
    background: color-mix(in srgb, var(--step-accent, var(--b-500)), #fff 30%);
}
.step ul { list-style: none; padding: 0; margin: 0; }
.step li {
    position: relative;
    padding-inline-start: 1.15rem;
    font-size: .88rem;
    color: var(--ink-500);
    margin-bottom: .38rem;
}
.step li::before {
    content: '';
    position: absolute; inset-inline-start: 0; top: .68em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--step-accent, var(--b-500));
}

/* ==========================================================================
   ۱۸. چرا ما
   ========================================================================== */
.value-card { padding: clamp(1.4rem, 1.15rem + .6vw, 1.8rem); height: 100%; }
.value-icon {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: linear-gradient(140deg, var(--b-600), var(--b-400));
    color: #fff;
    margin-bottom: 1.1rem;
    box-shadow: var(--sh-brand);
    transition: transform var(--t) var(--ease-spring);
}
.value-card:hover .value-icon { transform: translateY(-4px) rotate(-6deg); }
.value-icon svg { width: 25px; height: 25px; }
.value-card h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.value-card p { font-size: .92rem; color: var(--ink-500); }

/* ==========================================================================
   ۱۹. بخش معرفی
   ========================================================================== */
.about-split { display: grid; gap: clamp(2rem, 1.3rem + 3vw, 3.75rem); align-items: center; }
@media (min-width: 940px) { .about-split { grid-template-columns: 1fr 1fr; } }
.about-media {
    /* اگر تصویر هنوز نرسیده باشد، این قاب یک حفرهٔ سفید نشود. */
    background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    aspect-ratio: 4 / 3;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-points { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.about-points li {
    display: flex; gap: .75rem; align-items: flex-start;
    margin-bottom: .85rem; font-size: .97rem;
}
.about-points svg { width: 21px; height: 21px; flex: none; color: var(--ok); margin-top: .3em; }

/* ==========================================================================
   ۲۰. فراخوان
   ========================================================================== */
.cta {
    position: relative;
    background: linear-gradient(135deg, var(--b-950), var(--b-700) 55%, var(--b-500));
    border-radius: var(--r-2xl);
    padding: clamp(2.4rem, 1.5rem + 3.5vw, 4rem) clamp(1.4rem, .8rem + 3vw, 3rem);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute; inset-block-start: -55%; inset-inline-end: -12%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255, 179, 0, .26), transparent 68%);
}
.cta::after {
    content: '';
    position: absolute; inset-block-end: -60%; inset-inline-start: -10%;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(165, 180, 252, .22), transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; text-wrap: balance; }
.cta p { color: #ccd2f0; max-width: 58ch; margin-inline: auto; margin-bottom: 1.9rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ==========================================================================
   ۲۱. پرسش متداول
   ========================================================================== */
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: .8rem;
    overflow: hidden;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item:hover { border-color: var(--b-200); }
.faq-item[open] { border-color: var(--b-300); box-shadow: var(--sh-sm); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.35rem;
    font-weight: 600; color: var(--ink-950);
    cursor: pointer; list-style: none;
    transition: color var(--t-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* پیکان باز/بسته عمودی است، پس اضلاع فیزیکی درست‌اند و نباید با جهت نوشتار بچرخد. */
.faq-item summary::after {
    content: '';
    width: 10px; height: 10px; flex: none;
    margin-block-start: -4px;
    border-right: 2px solid var(--ink-400);
    border-bottom: 2px solid var(--ink-400);
    transform: rotate(45deg);
    transition: transform var(--t) var(--ease-spring), border-color var(--t-fast);
}
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--b-600); }
.faq-item[open] summary { color: var(--brand-text); }
.faq-body { padding: 0 1.35rem 1.25rem; color: var(--ink-500); font-size: .95rem; }
.faq-item[open] .faq-body { animation: panelIn .4s var(--ease-out); }

/* ==========================================================================
   ۲۲. ارتباط مستقیم
   ========================================================================== */
.contact-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.contact-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xs);
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
a.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--b-200); }
.contact-icon {
    width: 48px; height: 48px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--tint); color: var(--brand-text);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease-spring);
}
a.contact-card:hover .contact-icon { background: var(--b-600); color: #fff; transform: scale(1.06); }
.contact-icon svg { width: 22px; height: 22px; }
.contact-card .label { font-size: .79rem; color: var(--ink-400); display: block; }
.contact-card .value { font-weight: 700; color: var(--ink-950); font-size: .98rem; word-break: break-word; }

/* ---------- چیدمان صفحه تماس ---------- */
.contact-layout { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; }
@media (min-width: 940px) {
    .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    /* ستون ارتباط مستقیم هنگام پر کردن فرم در دید بماند. */
    .contact-aside { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.contact-aside__title { font-size: 1.15rem; margin-bottom: 1rem; }
.contact-list { display: grid; gap: .7rem; }
.contact-social { margin-top: 1.5rem; }
.contact-social h3 { font-size: 1rem; margin-bottom: .7rem; }
.muted-text { color: var(--ink-500); font-size: .95rem; }

.map-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); line-height: 0; }
.map-frame iframe { width: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- فرم تماس ---------- */
.contact-form-card .card-body { padding: clamp(1.35rem, 1rem + 1.2vw, 2rem); }
.contact-form { margin-top: 1.4rem; display: grid; gap: 1.05rem; }
.form-row { display: grid; gap: 1.05rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.form-field > label { font-size: .88rem; font-weight: 600; color: var(--ink-900); }
.form-field .req { color: var(--danger-text); }

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: .72rem .95rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-900);
    font: inherit;
    font-size: .95rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.85; }
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover { border-color: var(--b-300); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--b-500);
    box-shadow: 0 0 0 3px rgba(97, 114, 243, .16);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-300); }
.contact-form .input-validation-error,
.contact-form .is-invalid {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger), transparent 96%);
}
.contact-form .is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger), transparent 82%); }
.form-error { color: var(--danger-text); font-size: .82rem; min-height: 1px; }
.form-error:empty { display: none; }
/* خطایی که با جاوااسکریپت نشانده می‌شود، آرام وارد شود تا چشم آن را بگیرد. */
.form-error.is-shown { animation: errIn .28s var(--ease-out); }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* چرخانک داخل دکمه ارسال */
.spinner {
    display: inline-block;
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
    .form-error.is-shown { animation: none; }
}

.form-actions { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; margin-top: .3rem; }
.form-note { font-size: .82rem; color: var(--ink-400); margin: 0; flex: 1 1 240px; }

/* ---- پرسش امنیتی ----
   خود پرسش یک کادر خوانده‌نشدنی برای ربات‌های ساده نیست، ولی برای انسان در یک
   نگاه حل می‌شود. عدد پرسش با ارقام فارسی و ورودی چپ‌به‌راست است تا تایپ عدد
   طبیعی باشد. */
/* ردیف پرسش چپ‌به‌راست است، به سه دلیل که هر سه یکی‌اند:
   ۱) عبارت ریاضی از چپ خوانده می‌شود، پس «۷ − ۳ = ▭» ترتیب طبیعی‌اش است؛
   ۲) در جهت راست‌به‌چپ، الگوریتم دوجهته ارقام و علامت منها را جابه‌جا می‌کرد و
      «۷ − ۳» روی صفحه «۳ − ۷» دیده می‌شد — یعنی کاربر پرسش دیگری می‌خواند؛
   ۳) کل گروه به لبه چپ فیلد می‌چسبد. */
.captcha-row {
    display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap;
    direction: ltr;
    justify-content: flex-start;
}
.captcha-question {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 5.5rem;
    padding: .62rem .9rem;
    border-radius: var(--r-md, 10px);
    background: var(--surface-2, #f4f6fc);
    border: 1px dashed var(--line);
    font-size: 1.05rem; font-weight: 700;
    color: var(--ink-900);
    letter-spacing: .06em;
    /* انتخاب و کپی متن پرسش را سخت‌تر می‌کند؛ سد محکمی نیست، ولی جلوی
       ساده‌ترین اسکریپت‌های کپی‌کننده را می‌گیرد. */
    user-select: none;
}
.captcha-equals { font-size: 1.05rem; font-weight: 700; color: var(--ink-400); }
.contact-form .captcha-input {
    inline-size: 5.5rem;
    flex: none;
    text-align: center;
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .08em;
}

/* تله ربات: باید برای انسان و صفحه‌خوان نامرئی باشد ولی برای ربات در DOM بماند. */
.hp-field {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.alert-ok {
    background: color-mix(in srgb, var(--ok), transparent 88%);
    border-color: color-mix(in srgb, var(--ok), transparent 65%);
    color: color-mix(in srgb, var(--ok), var(--ink-950) 32%);
}
:root[data-theme="dark"] .alert-ok { color: #6ee7b7; }

.social-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-btn {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink-700);
    border: 1px solid var(--line);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
                transform var(--t) var(--ease-spring), border-color var(--t) var(--ease);
}
.social-btn:hover { background: var(--b-600); color: #fff; border-color: var(--b-600); transform: translateY(-4px); }
.social-btn svg { width: 21px; height: 21px; }

/* ==========================================================================
   ۲۳. فوتر
   ========================================================================== */
.site-footer {
    background: var(--b-950);
    color: #a8b0dc;
    padding: clamp(2.75rem, 2rem + 3vw, 4.25rem) 0 0;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute; top: -40%; inset-inline-end: -8%;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(97, 114, 243, .18), transparent 70%);
}
.site-footer > * { position: relative; }
.footer-grid {
    display: grid;
    gap: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    /* ستون برند پهن‌تر است تا لوگو و توضیح جا شوند؛ بقیه مساوی. */
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 1fr));
    padding-bottom: 2.5rem;
}
.footer-brand img { height: 48px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .9rem; color: #939bd0; max-width: 36ch; line-height: 1.9; }
.footer-social { margin-top: 1.25rem; }
/* دکمه‌های اجتماعی فوتر روی زمینه تیره‌اند و نباید از توکن سطح روشن رنگ بگیرند. */
.site-footer .social-btn {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: #cdd3f0;
}
.site-footer .social-btn:hover { background: var(--b-600); border-color: var(--b-600); color: #fff; }

.site-footer h4 { color: #fff; font-size: .98rem; margin-bottom: 1.05rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: #a8b0dc; font-size: .92rem; }
.site-footer a:hover { color: var(--a-500); }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.footer-contact svg { width: 17px; height: 17px; flex: none; margin-top: .35em; color: var(--a-500); }
.footer-contact span { min-width: 0; overflow-wrap: anywhere; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 1.4rem 0;
    display: flex; flex-wrap: wrap; gap: .6rem 1.25rem;
    align-items: center; justify-content: space-between;
    font-size: .85rem;
}
/* ---- امضای سازنده ----
   همان الگوی پروژه DetailStore: کارت کوچکی که متن و نشان را کنار هم دارد، و
   یادداشت زردی که فقط با رفتن نشانگر ماوس (یا رسیدن فوکوس صفحه‌کلید) روی کارت
   باز می‌شود. اندازه‌ها و رنگ‌ها عمداً همان مقادیر آن پروژه‌اند. */
/* انتخابگر عمداً a.site-credit است نه .site-credit: کارت داخل فوتر می‌نشیند و
   قاعدهٔ ‎.site-footer a رنگ آبی روشن پیوندهای فوتر را روی متن تیرهٔ این کارت
   سفید می‌نشاند — نسبت کنتراست ۱٫۹ و عملاً ناخوانا. */
a.site-credit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid rgba(209, 216, 224, .9);
    border-radius: 13px;
    color: #4b5563;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 7px 18px rgba(31, 41, 55, .06);
    direction: rtl;
    font-size: 11px;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.site-credit:hover,
a.site-credit:focus-visible {
    border-color: rgba(0, 100, 0, .28);
    color: #166534;
    box-shadow: 0 11px 24px rgba(31, 41, 55, .11);
    outline: none;
    transform: translateY(-2px);
}

.site-credit__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.65;
    color: inherit;
}
.site-credit__identity strong {
    color: #006400;
    direction: ltr;
    font-size: 12px;
}
.site-credit img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex: none;
}

/* یادداشت: تا وقتی نشانگر روی کارت نرفته، پنهان است. با visibility پنهان
   می‌شود نه display، تا هم محو شدنش نرم باشد و هم صفحه‌خوان آن را وقتی بسته
   است نخواند. */
.datary-tooltip {
    position: absolute;
    inset-block-end: calc(100% + 11px);
    inset-inline-start: 50%;
    z-index: 40;
    width: min(320px, calc(100vw - 32px));
    padding: 6px 10px;
    transform: translateX(50%);
    border: 2px solid #7710c6;
    border-radius: 15px;
    background: #ffc533;
    color: #000;
    font-size: 10px;
    line-height: 1.8;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
}
.datary-tooltip span {
    font-size: 13px;
    font-weight: 700;
}
.datary-tooltip::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    margin-inline-start: -7px;
    border: 7px solid transparent;
    border-block-start-color: #7710c6;
}

.datary-hover:hover .datary-tooltip,
.datary-hover:focus-visible .datary-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 560px) {
    .datary-tooltip { max-width: calc(100vw - 24px); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-credit, .datary-tooltip { transition: none; }
}

/* زیر ۹۰۰ پیکسل، چهار ستون فوتر بیش از حد باریک می‌شوند. */
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-brand p { max-width: none; }
    .footer-bottom { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; }
}

/* ==========================================================================
   ۲۴. سربرگ صفحه داخلی
   ========================================================================== */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, var(--b-950), var(--b-800) 60%, var(--b-600));
    color: #fff;
    /* سربرگ صفحه فقط باید عنوان را معرفی کند، نه نصف صفحه را بگیرد. */
    padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) 0;
    overflow: hidden;
}
/* نسخه کوتاه‌تر برای صفحه‌هایی که محتوایشان بلافاصله شروع می‌شود. */
.page-hero--sm { padding: clamp(1.35rem, 1rem + 1.2vw, 2rem) 0; }
.page-hero::after {
    content: '';
    position: absolute; inset-block-end: -65%; inset-inline-start: -6%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255, 179, 0, .18), transparent 70%);
}
.page-hero > * { position: relative; }
.page-hero h1 {
    color: #fff;
    margin-bottom: .4rem;
    text-wrap: balance;
    /* در سربرگ فشرده، عنوان نباید به بزرگی تیتر صفحه اصلی باشد. */
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
}
.page-hero p { color: #c6cdf0; max-width: 64ch; margin: 0; font-size: .98rem; }

.breadcrumb {
    display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
    font-size: .83rem; margin-bottom: .7rem; padding: 0; list-style: none;
}
.breadcrumb li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.breadcrumb li + li::before { content: '‹'; color: rgba(255, 255, 255, .45); }
.breadcrumb a { color: rgba(255, 255, 255, .78); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: var(--a-500); }

/* ==========================================================================
   ۲۵. فیلتر و صفحه‌بندی
   ========================================================================== */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    padding: 0 0 2rem;
}
.filter-chip {
    padding: .55rem 1.15rem;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    background: var(--surface);
    color: var(--ink-700);
    font-size: .9rem; font-weight: 500;
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
                color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.filter-chip:hover { border-color: var(--b-400); color: var(--brand-text); transform: translateY(-2px); }
.filter-chip.is-active {
    background: var(--b-600); border-color: var(--b-600); color: #fff; font-weight: 600;
    box-shadow: var(--sh-brand);
}

.search-field {
    display: flex; gap: .5rem;
    margin-inline-start: auto;
}
.search-field input {
    padding: .55rem 1rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    font: inherit; font-size: .9rem;
    min-width: 200px;
    background: var(--surface);
    color: var(--ink-900);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-field input:focus {
    outline: none;
    border-color: var(--b-500);
    box-shadow: 0 0 0 3px rgba(97, 114, 243, .16);
}

.pagination { display: flex; gap: .4rem; justify-content: center; align-items: center; margin-top: 2.75rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 42px; height: 42px;
    display: grid; place-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink-700);
    font-size: .92rem; font-weight: 500;
    transition: all var(--t-fast) var(--ease);
}
.pagination a:hover { border-color: var(--b-400); color: var(--brand-text); transform: translateY(-2px); }
.pagination .is-current { background: var(--b-600); border-color: var(--b-600); color: #fff; font-weight: 700; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

/* ==========================================================================
   ۲۶. محتوای متنی
   ========================================================================== */
.prose { font-size: 1.02rem; color: var(--ink-700); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2.3rem; padding-bottom: .5rem; border-bottom: 2px solid var(--tint-line); }
.prose h3 { margin-top: 1.85rem; }
.prose .lead { font-size: 1.14rem; color: var(--ink-950); font-weight: 500; }
.prose ul li::marker { color: var(--b-500); }
.prose img { border-radius: var(--r-md); margin: 1.6rem 0; }
.prose blockquote {
    margin: 1.7rem 0; padding: 1.1rem 1.4rem;
    border-inline-start: 4px solid var(--a-500);
    background: var(--quote-bg);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-700);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .94rem; }
.prose th, .prose td { padding: .75rem .95rem; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--surface-2); font-weight: 600; }

/* ==========================================================================
   ۲۷. کارت خبر
   ========================================================================== */
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-media { display: block; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card-hover:hover .news-media img { transform: scale(1.07); }
.news-card .card-body { display: flex; flex-direction: column; flex: 1; }
.news-date { font-size: .8rem; color: var(--ink-400); margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem; }
.news-date svg { width: 14px; height: 14px; }
.news-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.news-card h3 a { color: inherit; }
.news-card h3 a:hover { color: var(--brand-text); }
.news-card p { font-size: .9rem; color: var(--ink-500); flex: 1; }

/* ==========================================================================
   ۲۸. ابزارک‌ها
   ========================================================================== */
.empty-state { text-align: center; padding: clamp(2.5rem, 2rem + 2vw, 4rem) 1.5rem; color: var(--ink-400); }
.empty-state svg { width: 64px; height: 64px; margin: 0 auto 1.25rem; color: var(--ink-200); }
.empty-state h3 { color: var(--ink-700); }

.alert {
    padding: 1.05rem 1.25rem;
    border-radius: var(--r-sm);
    border: 1px solid;
    font-size: .94rem;
    display: flex; gap: .8rem; align-items: flex-start;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: .15em; }
.alert-info { background: var(--tint); border-color: var(--tint-line); color: var(--tint-ink); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
/* همان مورد سایت عمومی: خلاصهٔ اعتبارسنجیِ بدون خطا نباید یک کادر خالی
   روی فرم تماس بگذارد. */
.alert:empty,
.alert.validation-summary-valid { display: none; }

.skip-link {
    position: absolute; inset-inline-start: -9999px; top: 0;
    background: var(--b-700); color: #fff;
    padding: .8rem 1.3rem; z-index: 300;
    border-radius: 0 0 var(--r-xs) 0;
}
.skip-link:focus { inset-inline-start: 0; color: #fff; }

.pdf-frame {
    width: 100%;
    height: min(80vh, 900px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-3);
}

/* دکمه بازگشت به بالا */
.to-top {
    position: fixed;
    inset-block-end: 1.4rem; inset-inline-start: 1.4rem;
    z-index: 110;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    /* خط دور را خودِ حلقهٔ پیشرفت می‌کشد؛ نبودِ حاشیه یعنی جعبهٔ داخلی و
       بیرونی دکمه یکی است و حلقه بدون محاسبهٔ اضافی دقیقاً جا می‌افتد. */
    border: 0;
    border-radius: 50%;
    background: var(--glass);
    backdrop-filter: blur(8px);
    color: var(--brand-text);
    box-shadow: var(--sh-md);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(14px);
    transition: opacity var(--t) var(--ease), visibility var(--t),
                transform var(--t) var(--ease-out), background-color var(--t) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--b-600); color: #fff; }
.to-top__icon { width: 20px; height: 20px; position: relative; z-index: 1; }

/* حلقهٔ پیشرفت اسکرول دور دکمه */
.to-top__ring {
    /* SVG عنصری جایگزین‌شونده است و فقط با inset کشیده نمی‌شود؛ اندازه باید
       صریح باشد. چون دکمه حاشیه ندارد، ۱۰۰٪ همان اندازهٔ کامل دکمه است. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* شروع پرشدن از بالای دایره */
    transform: rotate(-90deg);
    pointer-events: none;
}
.to-top__track {
    fill: none;
    stroke: var(--line);
    stroke-width: 2.5;
}
.to-top__bar {
    fill: none;
    stroke: var(--b-600);
    stroke-width: 2.5;
    stroke-linecap: round;
    /* محیط دایره‌ای به شعاع ۲۰ ≈ ۱۲۵.۶۶ */
    stroke-dasharray: 125.66;
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset .12s linear;
}
/* در تم تیره، آبی پررنگ روی مسیر تیره کم‌تشخیص می‌شود؛ آبی روشن‌تر
   فاصلهٔ لازم را با بخش خالی حلقه نگه می‌دارد. */
:root[data-theme="dark"] .to-top__bar { stroke: var(--b-400); }

.to-top:hover .to-top__bar { stroke: #fff; }
.to-top:hover .to-top__track { stroke: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) {
    .to-top__bar { transition: none; }
}

/* ==========================================================================
   ۲۹. نقاط شکست
   ========================================================================== */
@media (max-width: 640px) {
    .hero-viewport { min-height: clamp(460px, 78vh, 560px); }
    .hero-content { padding: 3rem 0 4.5rem; }
    .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .stats-bar { margin-top: -2rem; }
    .stat { padding: 1.15rem .85rem; }
    .stat-value { font-size: 1.45rem; }
    .stat-label { font-size: .78rem; }
    .cta-actions .btn { width: 100%; }
    .gallery-thumb { width: 62px; height: 50px; }
    .file-row { flex-wrap: wrap; }
    .file-actions { width: 100%; }
    .file-actions .btn { flex: 1; }
    .search-field { width: 100%; margin-inline-start: 0; }
    .search-field input { min-width: 0; flex: 1; }
    .spec-table th, .spec-table td { padding: .7rem .8rem; font-size: .88rem; }
    .spec-table th { width: 42%; }
}

/* در صفحه‌های خیلی باریک، آمار دو ستونه بهتر از تک‌ستونه است. */
@media (max-width: 420px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* در عرض تبلت، چیدمان خودکار سه‌ستونه می‌شود و خانه چهارم تنها می‌ماند؛
   دو ستون ثابت، شبکه ۲×۲ متوازنی می‌سازد. */
@media (min-width: 641px) and (max-width: 1023px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

@media print {
    .site-header, .site-footer, .hero-controls, .hero-arrow, .btn, .tabs,
    .cursor, .signal-field, .to-top, .mobile-nav, .nav-scrim { display: none !important; }
    body { background: #fff; }
    .js [data-rv], .js [data-mask] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==========================================================================
   ۳۰. احترام به کاهش حرکت
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-rv] { opacity: 1 !important; transform: none !important; }
    .js [data-mask] { clip-path: none !important; }
    .js [data-mask] img { transform: none !important; }
    .hero-slide [data-hero-anim] { opacity: 1 !important; transform: none !important; }
    .hero-bg img { transform: none !important; }
    .cursor, .signal-field { display: none !important; }
}

/* --- بهبود کشوی موبایل --- */

/* دستهٔ کوچک بالای کشو، نشانهٔ اینکه با کشیدن انگشت هم بسته می‌شود. */
.mobile-nav__grip {
    width: 42px; height: 4px;
    border-radius: 4px;
    background: var(--line-2);
    margin: 0 auto .9rem;
}

/* هنگام کشیدن، انیمیشن خاموش می‌شود تا کشو دقیقاً زیر انگشت بماند. */
.mobile-nav.is-dragging { transition: none; }

/* سطح لمسی راحت: هر آیتم دست‌کم ۵۲ پیکسل ارتفاع دارد. */
.mobile-nav ul a { min-height: 52px; }


/* دکمه فراخوان و اطلاعات تماس، از پایین وارد می‌شوند. حالت پایه دیده‌شدنی
   است تا نبودِ انیمیشن، آن‌ها را پنهان نکند. */
.mobile-nav.is-open .btn-block,
.mobile-nav.is-open .mobile-nav__contact { animation: navFootIn .45s var(--ease-out) .2s; }
@keyframes navFootIn { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    .mobile-nav.is-open .btn-block,
    .mobile-nav.is-open .mobile-nav__contact,
    .mobile-nav.is-open ul a,
    .mobile-nav.is-open .mobile-nav__head,
    .mobile-nav.is-open .mobile-nav__grip,
    .mobile-nav.is-open::before { animation: none; }
}

/* ==========================================================================
   ۲۹. ابزار مدیر روی سایت عمومی
   ========================================================================== */

/* نوار باریک بالای صفحه، فقط برای مدیرِ واردشده */
.admin-bar {
    background: var(--b-950);
    color: #dfe4ff;
    font-size: .84rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.admin-bar__inner {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem 1.25rem;
    padding: .5rem 0;
}
.admin-bar__who { display: inline-flex; align-items: center; gap: .4rem; }
.admin-bar__who svg { width: 16px; height: 16px; color: var(--a-400); }
.admin-bar__who strong { color: #fff; font-weight: 700; }
.admin-bar__hint { color: rgba(223, 228, 255, .68); }
.admin-bar__link {
    margin-inline-start: auto;
    color: #fff; font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 1px;
}
.admin-bar__link:hover { border-bottom-color: #fff; }
@media (max-width: 720px) {
    .admin-bar__hint { display: none; }
    .admin-bar__link { margin-inline-start: auto; }
}

/* دکمهٔ «ویرایش همین بخش» که کنار محتوا می‌نشیند */
.edit-spot {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-end: .75rem;
    z-index: 20;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .75rem;
    border-radius: 20px;
    background: var(--b-600);
    color: #fff;
    font-size: .78rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(13, 18, 32, .28);
    /* تا وقتی روی بخش نرفته‌ایم، کم‌رنگ می‌ماند تا جلوی دیدن طرح را نگیرد. */
    opacity: .45;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                background-color var(--t) var(--ease);
}
.edit-spot svg { width: 14px; height: 14px; }
.edit-spot:hover,
.edit-spot:focus-visible {
    opacity: 1;
    background: var(--b-700);
    color: #fff;
    transform: translateY(-1px);
}
.has-edit-spot:hover .edit-spot { opacity: 1; }

/* هر بخشی که دکمه ویرایش دارد باید مبنای موقعیت‌دهی داشته باشد. */
.has-edit-spot { position: relative; }

/* مداد کنار خودِ عنوان؛ کوچک‌تر از edit-spot و درون خط متن. */
.edit-inline {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 1.6em; block-size: 1.6em;
    margin-inline-start: .4em;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--b-600);
    color: #fff;
    opacity: .45;
    box-shadow: 0 2px 8px rgba(13, 18, 32, .24);
    transition: opacity var(--t) var(--ease), background-color var(--t) var(--ease);
}
.edit-inline svg { inline-size: .82em; block-size: .82em; }
.edit-inline:hover, .edit-inline:focus-visible { opacity: 1; background: var(--b-700); color: #fff; }
.section-head:hover .edit-inline, .about-split:hover .edit-inline { opacity: 1; }

@media (max-width: 560px) {
    .edit-spot span { display: none; }
    .edit-spot { padding: .45rem; border-radius: 50%; }
}

/* پایین فوتر روی دسکتاپ: کپی‌رایت سر جای خود، اعتبار طراح دقیقاً وسط نوار.
   ستون سوم خالی می‌ماند تا مرکز واقعی نوار به دست بیاید. */
@media (min-width: 561px) {
    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: .6rem 1.25rem;
    }
    .footer-bottom > :first-child { justify-self: start; }
    .footer-bottom .site-credit {
        grid-column: 2;
        justify-self: center;
        text-align: center;
    }
}

/* نوار آمار خودش روی اسلایدر سوار می‌شود و بالایش فضای خالی ندارد؛
   بج ویرایش را بالای کارت می‌بریم تا روی عددها نیفتد. */
.wrap.has-edit-spot > .edit-spot { inset-block-start: -2.6rem; }

/* ==========================================================================
   ۳۰. صفحه کاتالوگ و مستندات
   ========================================================================== */

/* کارت شاخص: کاتالوگ اصلی، با تصویرسازی برگه‌های روی هم */
.doc-feature {
    display: grid;
    gap: clamp(1.5rem, 1rem + 3vw, 3rem);
    align-items: center;
    padding: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);
    margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    border-radius: var(--r-2xl);
    border: 1px solid var(--line);
    background: linear-gradient(135deg, var(--tint), var(--surface));
    box-shadow: var(--sh-md);
}
@media (min-width: 820px) { .doc-feature { grid-template-columns: 260px 1fr; } }

.doc-feature__body h2 { margin: .35rem 0 .6rem; }
.doc-feature__body p { color: var(--ink-500); margin-bottom: 1.4rem; }

/* سه برگه که پشت هم چیده شده‌اند تا حس «سند» بدهند */
.doc-feature__art {
    position: relative;
    height: 200px;
    display: grid;
    place-items: center;
}
.doc-feature__sheet {
    position: absolute;
    width: 120px; height: 158px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    transition: transform .5s var(--ease-out);
}
.doc-feature__sheet--back  { transform: rotate(-11deg) translate(14px, 6px); opacity: .55; }
.doc-feature__sheet--mid   { transform: rotate(-5deg) translate(7px, 3px); opacity: .8; }
.doc-feature__sheet--front {
    display: grid; place-items: center;
    box-shadow: var(--sh-lg);
    border-color: var(--b-200);
}
.doc-feature__sheet--front svg { width: 46px; height: 46px; color: var(--e-red); }
.doc-feature:hover .doc-feature__sheet--back { transform: rotate(-15deg) translate(20px, 8px); }
.doc-feature:hover .doc-feature__sheet--mid { transform: rotate(-8deg) translate(11px, 4px); }
.doc-feature:hover .doc-feature__sheet--front { transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
    .doc-feature__sheet, .doc-feature:hover .doc-feature__sheet--back,
    .doc-feature:hover .doc-feature__sheet--mid,
    .doc-feature:hover .doc-feature__sheet--front { transition: none; transform: none; }
    .doc-feature__sheet--back, .doc-feature__sheet--mid { display: none; }
}

/* گروه‌های مستندات */
.doc-group { margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }
.doc-group:last-of-type { margin-bottom: 0; }
.doc-group .section-head { margin-bottom: 1.4rem; }

.doc-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.doc-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1rem;
    align-items: start;
    padding: 1.15rem 1.25rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}
.doc-card:hover {
    transform: translateY(-3px);
    border-color: var(--b-300);
    box-shadow: var(--sh-md);
}
.doc-card__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--e-red), transparent 90%);
    color: var(--e-red);
}
.doc-card__icon svg { width: 22px; height: 22px; }
.doc-card__body { min-width: 0; }
.doc-card__body h3 { font-size: 1rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.doc-card__meta {
    margin: 0;
    display: flex; flex-wrap: wrap; gap: .35rem;
    font-size: .82rem; color: var(--ink-400);
}
.doc-card__size {
    background: var(--surface-3);
    border-radius: 20px;
    padding: .1rem .55rem;
    font-weight: 600;
    color: var(--ink-500);
}
.doc-card__actions {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: .35rem;
}

/* پیش‌نمایش PDF که فقط با کلیک ساخته می‌شود */
.pdf-viewer {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--sh-sm);
}
.pdf-viewer__bar {
    display: flex; flex-wrap: wrap; gap: .75rem 1rem;
    align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.pdf-viewer__frame { background: var(--surface-3); }
.pdf-viewer__frame iframe {
    display: block;
    width: 100%;
    height: min(80vh, 900px);
    border: 0;
}

/* ==========================================================================
   ۳۱. تصویر بخش معرفی
   ========================================================================== */

/* قاب تصویر روی یک شکل رنگی می‌نشیند تا سمت خالی صفحه پر و عمق‌دار دیده شود. */
.about-visual { position: relative; }
.about-visual__accent {
    position: absolute;
    inset-block: 1.75rem -1.75rem;
    inset-inline: -1.5rem 3rem;
    border-radius: var(--r-2xl);
    background: linear-gradient(150deg, var(--b-500), var(--a-500) 120%);
    opacity: .13;
    z-index: 0;
}
.about-visual .about-media { position: relative; z-index: 1; }

/* کارت شناور روی گوشه پایین تصویر */
.about-badge {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    max-width: 20rem;
    margin-block-start: -3.25rem;
    margin-inline-start: 1.25rem;
    padding: .95rem 1.1rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--sh-lg);
}
.about-badge__mark {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--tint);
    color: var(--b-600);
}
.about-badge__mark svg { width: 20px; height: 20px; }
.about-badge__text { min-width: 0; }
.about-badge__text strong { display: block; font-size: .92rem; color: var(--ink-900); }
.about-badge__text small {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    line-height: 1.75;
    color: var(--ink-500);
}

@media (max-width: 560px) {
    .about-visual__accent { inset-inline: -1rem 1.5rem; }
    .about-badge { margin-inline: .75rem; max-width: none; }
}

/* --- جزئیات ظاهری کشوی موبایل --- */

/* همهٔ ورودها با انیمیشن انجام می‌شوند نه با ترنزیشن از حالت نامرئی؛ پس
   حالت پایهٔ هر عنصر «دیده‌شدن» است و اگر انیمیشن اجرا نشود چیزی گم نمی‌شود. */

/* لبهٔ برندی سمت باز شدن کشو، از بالا به پایین کشیده می‌شود. */
.mobile-nav.is-open::before { animation: navEdgeIn .65s var(--ease-out) .1s; }
@keyframes navEdgeIn { from { transform: scaleY(0); transform-origin: top; } }

/* سربرگ کشو (لوگو و دکمه بستن) و دستهٔ بالای آن. */
.mobile-nav.is-open .mobile-nav__head,
.mobile-nav.is-open .mobile-nav__grip { animation: navHeadIn .45s var(--ease-out); }
@keyframes navHeadIn { from { opacity: 0; transform: translateY(-8px); } }

/* هاله‌ای بسیار ملایم پشت آیتم فعال، تا انتخاب جاری زنده‌تر دیده شود. */
.mobile-nav ul a.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-500), transparent 82%);
}

/* پیکان هر آیتم موقع لمس/هاور کمی به سمت حرکت می‌رود. */
.mobile-nav ul a::after { transition: transform var(--t) var(--ease-spring), border-color var(--t-fast) var(--ease); }
.mobile-nav ul a:hover::after,
.mobile-nav ul a:focus-visible::after { transform: rotate(-45deg) translate(2px, -2px); }
[dir="ltr"] .mobile-nav ul a:hover::after { transform: rotate(45deg) translate(2px, 2px); }

@media (prefers-reduced-motion: reduce) {
    .mobile-nav::before,
    .mobile-nav__head,
    .mobile-nav__grip { transition: none; opacity: 1; transform: none; }
    .mobile-nav ul a:hover::after { transform: rotate(-45deg); }
}