@charset "UTF-8";
/* ==========================================================================
   آذران کارتن خراسان — سامانهٔ طراحی بخش عمومی
   RTL · فارسی · تیره‌محور با لهجهٔ کرافت
   ========================================================================== */

/* ─────────────────────────── فونت ─────────────────────────── */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────── نشانه‌ها ─────────────────────────── */

:root {
    /* ── رنگ برند (برگرفته از لوگو) ──────────────────
       #201553  سرمه‌ای بنفش عمیق — رنگ اصلی
       #F8A600  کهربایی طلایی      — رنگ لهجه
       ───────────────────────────────────────────── */

    /* ── بنفش برند — از تیره به روشن ─────────────── */
    --brand-900: #0d0820;
    --brand-800: #150e38;
    --brand-700: #201553;   /* رنگ اصلی لوگو */
    --brand-600: #2b1d6b;
    --brand-500: #3a2989;
    --brand-400: #55429f;
    --brand-300: #8b7ac4;
    --brand-100: #e9e5f6;

    /* ── سطوح روشن ────────────────────────────────
       مقیاس ink اینجا «سطح» است، نه تیرگی:
       ۸۰۰ روشن‌ترین (پس‌زمینهٔ صفحه) → ۴۰۰ کم‌رنگ‌ترین خاکستری  */
    --ink-900: #ebe8f6;   /* ریل نوار پیمایش، بلوک کد */
    --ink-850: #f5f3fb;   /* بخش فرورفته (یک‌درمیان) */
    --ink-800: #ffffff;   /* پس‌زمینهٔ اصلی */
    --ink-750: #ffffff;   /* کارت‌ها */
    --ink-700: #f4f2fc;   /* جای‌گیر تصویر و ورودی */
    --ink-600: #ffffff;   /* دکمهٔ خنثی */
    --ink-500: #cdc6e6;   /* دستهٔ نوار پیمایش */
    --ink-400: #b3a9d6;   /* آیکون کم‌رنگ */

    /* ── لهجه — کهربایی برند ──────────────────────
       ۵۰۰ رنگ خالص لوگو برای پُرکردن؛
       ۳۰۰ و ۴۰۰ تیره‌ترند تا روی سفید خوانا بمانند */
    --kraft-300: #9a6500;   /* متن و پیوند لهجه‌دار */
    --kraft-400: #c07d00;
    --kraft-500: #f8a600;   /* رنگ لهجهٔ لوگو */
    --kraft-600: #d98f00;
    --kraft-700: #a86e00;

    /* ── بنفش مکمل ────────────────────────────── */
    --pine-400: #5f4bd4;
    --pine-500: #4a37b8;
    --pine-600: #3a2989;

    /* ── متن — تیره روی روشن ──────────────────── */
    --text-100: #16102f;   /* عنوان */
    --text-200: #2a2150;   /* متن اصلی */
    --text-300: #443a6e;
    --text-400: #6a608f;   /* کم‌رنگ */
    --text-500: #8b83a8;   /* کم‌رنگ‌ترین */

    /* سطوح */
    --surface: var(--ink-800);
    --surface-raised: var(--ink-750);
    --surface-sunken: var(--ink-850);
    --border: #e6e2f2;
    --border-strong: #d3ccea;

    /* وضعیت */
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #2563eb;

    /* اندازه */
    --container: 1280px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    /* سایه */
    --shadow-sm: 0 1px 3px rgba(32, 21, 83, .07);
    --shadow: 0 8px 26px rgba(32, 21, 83, .10);
    --shadow-lg: 0 24px 60px rgba(32, 21, 83, .16);
    --glow: 0 0 46px rgba(248, 166, 0, .3);

    /* حرکت */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur: .38s;
    --dur-fast: .2s;
    --dur-slow: .7s;

    /* لایه */
    --z-header: 100;
    --z-nav: 110;
    --z-float: 90;
    --z-modal: 200;
}

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

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

* { margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    -webkit-text-size-adjust: 100%;
    /* clip و نه hidden: برش می‌دهد ولی html را به ظرف اسکرول تبدیل نمی‌کند،
       پس سربرگ sticky سر جایش می‌ماند. مرورگرهای قدیمی این مقدار را
       نادیده می‌گیرند و رفتار قبلی را نگه می‌دارند. */
    overflow-x: clip;
}

body {
    font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-200);
    background: var(--surface);
    /* hidden برای مرورگرهای قدیمی، clip برای بقیه.
       با hidden‌ِ تنها، موبایل هنوز اجازهٔ کشیدن افقی و برگشت فنری می‌داد. */
    overflow-x: hidden;
    overflow-x: clip;
    /* نشانی‌های بلند لاتین و شماره‌های طولانی نباید ستون را پهن کنند */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'ss02';
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

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

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

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-100);
    text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
    background: var(--kraft-500);
    color: #3a2400;
}

:focus-visible {
    outline: 2px solid var(--kraft-400);
    outline-offset: 3px;
    border-radius: 4px;
}

/* نوار پیمایش */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: var(--ink-500);
    border-radius: 6px;
    border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover { background: var(--kraft-600); }

/* ─────────────────────────── ابزار ─────────────────────────── */

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -100px;
    z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--kraft-500);
    color: #fff;
    border-radius: var(--radius-sm);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* دام ربات — با برش پنهان می‌شود، نه با پرتاب به بیرون صفحه.
   inset-inline-start در چیدمان راست‌به‌چپ به right نگاشته می‌شد و فیلد را
   ۹۹۹۹ پیکسل بیرون از لبهٔ راست می‌گذاشت؛ نتیجه‌اش اسکرول افقی صفحه بود. */
.hp-field {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon { flex-shrink: 0; }

/* ─────────────────────────── انیمیشن ─────────────────────────── */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInEnd {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: none; }
}
@keyframes slideInStart {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: none; }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 166, 0, .5); }
    70%      { box-shadow: 0 0 0 18px rgba(248, 166, 0, 0); }
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes drawLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* آشکارسازی هنگام پیمایش */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal="start"] { transform: translateX(36px); }
[data-reveal="end"]   { transform: translateX(-36px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ─────────────────────────── دکمه ─────────────────────────── */

.btn {
    --btn-bg: var(--ink-600);
    --btn-fg: var(--text-100);
    --btn-border: var(--border-strong);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .82rem 1.7rem;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition:
        transform var(--dur-fast) var(--ease),
        box-shadow var(--dur) var(--ease),
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease);
}

/* درخشش لغزان روی دکمه */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .75s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* دکمهٔ اصلی: بنفش برند با متن سفید — روی زمینهٔ روشن بیشترین کنتراست را دارد */
.btn--primary {
    --btn-bg: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    --btn-fg: #fff;
    --btn-border: transparent;
    box-shadow: 0 6px 20px rgba(32, 21, 83, .26);
}
.btn--primary:hover { box-shadow: 0 12px 30px rgba(32, 21, 83, .34); }

/* دکمهٔ لهجه: کهربایی با متن تیره — سفید روی نارنجی خوانا نیست */
.btn--pine {
    --btn-bg: linear-gradient(135deg, var(--kraft-400), var(--kraft-500));
    --btn-fg: #3a2400;
    --btn-border: transparent;
    box-shadow: 0 6px 20px rgba(248, 166, 0, .34);
}
.btn--pine:hover { box-shadow: 0 12px 30px rgba(248, 166, 0, .42); }

.btn--ghost {
    --btn-bg: transparent;
    border-color: var(--border-strong);
    backdrop-filter: blur(8px);
}
.btn--ghost:hover {
    border-color: var(--kraft-400);
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .08);
}

.btn--light {
    --btn-bg: #fff;
    --btn-fg: var(--ink-800);
}

.btn--sm  { padding: .6rem 1.1rem; font-size: .85rem; border-radius: 10px; }
.btn--lg  { padding: 1.05rem 2.3rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

/* ─────────────────────────── نوار بالا ─────────────────────────── */

/* نوار بالا تنها بخش تیرهٔ صفحه است — نوار برند */
.topbar {
    background: var(--brand-700);
    border-bottom: 1px solid var(--brand-600);
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}
.topbar a { color: rgba(255, 255, 255, .82); }
/* شماره‌های تلفن رشته‌های نشکستنی‌اند؛ بدون اجازهٔ شکستن سطر، این ردیف
   روی نمایشگر باریک از عرض صفحه بیرون می‌زد و صفحه افقی اسکرول می‌شد. */
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    min-height: 42px;
    min-width: 0;
}
.topbar__contact {
    display: flex;
    align-items: center;
    gap: .5rem 1.6rem;
    flex-wrap: wrap;
    min-width: 0;
}
.topbar__link,
.topbar__hours {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.topbar__link:hover { color: var(--kraft-300); }
.topbar__link .icon,
.topbar__hours .icon { width: 15px; height: 15px; opacity: .7; }

.topbar__social { display: flex; gap: .35rem; flex-shrink: 0; }
.topbar__icon {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topbar__icon:hover {
    background: var(--kraft-600);
    color: #fff;
}
.topbar__icon .icon { width: 16px; height: 16px; }

@media (max-width: 860px) {
    .topbar__hours { display: none; }
}

/* ─────────────────────────── سربرگ ─────────────────────────── */

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--dur) var(--ease);
}

/* بلور روی شبه‌عنصر اجرا می‌شود، نه روی خود سربرگ.
   اگر backdrop-filter مستقیم روی سربرگ باشد، سربرگ برای فرزندانِ
   position:fixed تبدیل به containing block می‌شود و منوی کشویی موبایل
   به‌جای صفحه، نسبت به کادر سربرگ جای می‌گیرد. */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(160%);
    transition: background var(--dur) var(--ease);
}
.header.is-stuck::before { background: rgba(255, 255, 255, .97); }
.header.is-stuck { box-shadow: var(--shadow); }
.header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 76px;
    min-width: 0;
}

/* برند */
/* برند باید بتواند جمع شود. با flex-shrink: 0، نام بلند فارسی روی
   نمایشگر باریک ردیف سربرگ را از عرض صفحه پهن‌تر می‌کرد و کل صفحه
   افقی اسکرول می‌خورد. حالا نشانه ثابت می‌ماند و فقط متن کوتاه می‌شود. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}
.brand__mark {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--kraft-500), var(--kraft-700));
    color: #fff;
    box-shadow: 0 6px 18px rgba(248, 166, 0, .35);
    transition: transform var(--dur) var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__mark .icon { width: 25px; height: 25px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand__name,
.brand__tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__name { font-size: 1.06rem; font-weight: 900; color: var(--text-100); }
.brand__tagline { font-size: .7rem; color: var(--text-400); font-weight: 400; }
.brand__logo { max-height: 48px; width: auto; flex-shrink: 0; }

/* ناوبری */
.nav { margin-inline-start: auto; }
.nav__head, .nav__foot { display: none; }
.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .6rem .95rem;
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-300);
    border-radius: 10px;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link::after {
    content: '';
    position: absolute;
    inset-inline: .95rem;
    bottom: .35rem;
    height: 2px;
    background: var(--kraft-400);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: inline-end;
    transition: transform var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link.is-active {
    color: var(--text-100);
}
.nav__link:hover::after,
.nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: inline-start;
}

/* مرزها فیزیکی‌اند چون rotate هم فیزیکی است؛ با border-inline-end این فلش
   در چیدمان راست‌به‌چپ به‌جای پایین، به چپ اشاره می‌کرد. */
.nav__caret {
    width: 6px; height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur-fast) var(--ease);
    opacity: .6;
}
.nav__item:hover .nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* زیرمنو */
.nav__sub {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline-start: 0;
    min-width: 230px;
    padding: .5rem;
    background: var(--ink-750);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        visibility var(--dur);
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav__sublink {
    display: block;
    padding: .58rem .8rem;
    font-size: .88rem;
    color: var(--text-300);
    border-radius: 9px;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                padding-inline-start var(--dur-fast) var(--ease);
}
.nav__sublink:hover {
    background: rgba(248, 166, 0, .12);
    color: var(--kraft-300);
    padding-inline-start: 1.1rem;
}

/* کنش‌های سربرگ */
.header__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--text-300);
    border: 1px solid var(--border);
    border-radius: 11px;
    transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover {
    color: var(--kraft-300);
    border-color: var(--kraft-600);
    background: rgba(248, 166, 0, .1);
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
}
.burger span {
    display: block;
    height: 2px;
    background: var(--text-200);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* جستجوی کشویی */
.searchbar {
    border-top: 1px solid var(--border);
    background: var(--ink-850);
    animation: fadeIn var(--dur) var(--ease);
}
.searchbar__form {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0;
}
.searchbar__form .icon { color: var(--text-400); }
.searchbar__form input {
    flex: 1;
    padding: .8rem 1rem;
    background: var(--ink-700);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-100);
    transition: border-color var(--dur-fast) var(--ease);
}
.searchbar__form input:focus {
    outline: none;
    border-color: var(--kraft-500);
}

/* موبایل */
@media (max-width: 1080px) {
    .header__cta { display: none; }
    .burger { display: flex; }

    /* کشوی منو — موقعیت‌دهی فیزیکی تا در RTL هم قابل پیش‌بینی بماند.
       margin از حالت دسکتاپ باید صفر شود وگرنه جای کشو جابه‌جا می‌شود. */
    .nav {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        width: min(86vw, 340px);
        max-width: 100vw;
        margin: 0;
        padding: 5.5rem 1.25rem 2rem;
        background: #fff;
        border-inline-start: 1px solid var(--border-strong);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        /* در حالت بسته کاملاً از رندر خارج می‌شود: نه به ناحیهٔ اسکرول افقی
           اضافه می‌کند، نه با Tab یا صفحه‌خوان قابل دسترسی می‌ماند.
           visibility بدون مدت‌زمان و با تأخیر تغییر می‌کند تا انیمیشن لغزش
           هنگام بسته شدن دیده شود. */
        visibility: hidden;
        transition: transform var(--dur-slow) var(--ease-out),
                    visibility 0s linear var(--dur-slow);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: var(--z-nav);
    }
    .nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--dur-slow) var(--ease-out),
                    visibility 0s;
    }

    /* ── اجزای کشو ── */
    .nav__head, .nav__foot { display: block; }

    .nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-block-end: 1.1rem;
        margin-block-end: 1.1rem;
        border-block-end: 1px solid var(--border);
    }
    .nav__logo { max-height: 40px; width: auto; }
    .nav__close {
        display: grid;
        place-items: center;
        width: 40px; height: 40px;
        color: var(--text-400);
        background: var(--ink-850);
        border: 1px solid var(--border);
        border-radius: 12px;
        transform: rotate(45deg);
        transition: all var(--dur-fast) var(--ease);
    }
    .nav__close:hover {
        color: var(--danger);
        border-color: rgba(220, 38, 38, .35);
        transform: rotate(135deg);
    }

    .nav__list { flex-direction: column; align-items: stretch; gap: .25rem; }

    .nav__link {
        justify-content: space-between;
        padding: .85rem 1rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-200);
        border-radius: 12px;
        border: 1px solid transparent;
    }
    .nav__link::after { display: none; }
    .nav__link:hover,
    .nav__link.is-active {
        color: var(--brand-700);
        background: var(--ink-850);
        border-color: var(--border);
    }
    .nav__link.is-active {
        font-weight: 700;
        background: linear-gradient(90deg, rgba(248, 166, 0, .16), transparent);
        border-color: rgba(248, 166, 0, .3);
    }

    /* فلش زیرمنو روی موبایل بزرگ‌تر و واضح‌تر */
    .nav__caret {
        width: 9px; height: 9px;
        border-width: 2px;
        opacity: .5;
    }

    /* ── پای کشو ── */
    .nav__foot {
        display: grid;
        gap: .8rem;
        margin-block-start: 1.6rem;
        padding-block-start: 1.3rem;
        border-block-start: 1px solid var(--border);
    }

    .nav__call {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .7rem .9rem;
        background: var(--ink-850);
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    .nav__call-icon {
        display: grid;
        place-items: center;
        width: 38px; height: 38px;
        flex-shrink: 0;
        color: #fff;
        background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
        border-radius: 50%;
    }
    .nav__call span { display: flex; flex-direction: column; line-height: 1.4; }
    .nav__call small { font-size: .72rem; color: var(--text-500); }
    .nav__call strong {
        font-size: 1rem;
        font-weight: 900;
        color: var(--text-100);
        font-variant-numeric: tabular-nums;
    }

    .nav__hours {
        display: flex;
        align-items: flex-start;
        gap: .45rem;
        font-size: .8rem;
        line-height: 1.8;
        color: var(--text-400);
    }
    .nav__hours .icon { flex-shrink: 0; margin-block-start: .25rem; color: var(--kraft-400); }

    .nav__social { display: flex; flex-wrap: wrap; gap: .5rem; }
    .nav__social a {
        display: grid;
        place-items: center;
        width: 40px; height: 40px;
        color: var(--text-400);
        background: var(--ink-850);
        border: 1px solid var(--border);
        border-radius: 12px;
        transition: all var(--dur-fast) var(--ease);
    }
    .nav__social a:hover {
        color: #fff;
        background: var(--social-color, var(--brand-600));
        border-color: transparent;
        transform: translateY(-2px);
    }

    /* ورود پلکانی آیتم‌ها هنگام باز شدن کشو */
    .nav.is-open .nav__item {
        animation: navIn .38s var(--ease-out) both;
    }
    .nav.is-open .nav__item:nth-child(1) { animation-delay: .04s; }
    .nav.is-open .nav__item:nth-child(2) { animation-delay: .08s; }
    .nav.is-open .nav__item:nth-child(3) { animation-delay: .12s; }
    .nav.is-open .nav__item:nth-child(4) { animation-delay: .16s; }
    .nav.is-open .nav__item:nth-child(5) { animation-delay: .20s; }
    .nav.is-open .nav__item:nth-child(6) { animation-delay: .24s; }
    .nav.is-open .nav__item:nth-child(7) { animation-delay: .28s; }
    .nav.is-open .nav__foot { animation: navIn .38s var(--ease-out) .3s both; }

    .nav__sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-inline-start: 2px solid var(--kraft-500);
        border-radius: 0;
        margin-inline-start: 1.1rem;
        margin-block-end: .5rem;
        padding: .25rem .5rem;
        background: transparent;
        display: none;
    }
    .nav__item.is-expanded .nav__sub { display: block; }

    /* پوشش تیره باید *زیر* سربرگ بنشیند.
       منو فرزند سربرگ است و سربرگ خودش یک stacking context می‌سازد،
       پس z-index منو در سطح صفحه به اندازهٔ سربرگ دیده می‌شود. اگر پوشش
       عددی بالاتر از سربرگ بگیرد، روی منو می‌افتد و منو نامرئی می‌شود. */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(13, 8, 32, .58);
        backdrop-filter: blur(3px);
        z-index: calc(var(--z-header) - 5);
        opacity: 0;
        transition: opacity var(--dur) var(--ease);
    }
    .nav-backdrop.is-visible { opacity: 1; }
}

/* ─────────────────────────── پیام موقت ─────────────────────────── */

.flash-stack {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-block: 1.2rem 0;
}
.flash {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.15rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: .93rem;
    animation: fadeUp var(--dur) var(--ease);
}
.flash--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}
.flash--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}
.flash--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.flash span { flex: 1; }
.flash__close {
    font-size: 1.4rem;
    line-height: 1;
    opacity: .6;
    transition: opacity var(--dur-fast) var(--ease);
}
.flash__close:hover { opacity: 1; }

/* ─────────────────────────── بخش‌بندی ─────────────────────────── */

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sunken { background: var(--surface-sunken); }
.section--raised { background: var(--surface-raised); }

.section-head {
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
}
.section-head--start {
    margin-inline: 0;
    text-align: start;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .95rem;
    margin-block-end: 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .12);
    border: 1px solid rgba(248, 166, 0, .25);
    border-radius: 100px;
}
.eyebrow .icon { width: 15px; height: 15px; }

.section-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -.015em;
    margin-block-end: .8rem;
}
.section-title em {
    font-style: normal;
    color: var(--kraft-400);
}

.section-sub {
    font-size: clamp(.98rem, 2vw, 1.1rem);
    color: var(--text-400);
    line-height: 1.9;
}

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

.stats {
    position: relative;
    z-index: 2;
    margin-block-start: -3.5rem;
}
.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1.25rem;
    text-align: center;
    background: var(--ink-750);
    transition: background var(--dur) var(--ease);
}
.stat:hover { background: var(--ink-700); }
.stat__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .12);
    margin-block-end: .3rem;
}
.stat__value {
    font-size: clamp(1.7rem, 3.5vw, 2.35rem);
    font-weight: 900;
    color: var(--text-100);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat__label {
    font-size: .84rem;
    color: var(--text-400);
    line-height: 1.6;
}

/* ─────────────────────────── کارت ─────────────────────────── */

/**
 * شبکهٔ کارت‌ها
 *
 * هر ستون یک سقف عرض دارد؛ بنابراین وقتی تعداد کارت‌ها کم است، کشیده و
 * غول‌پیکر نمی‌شوند. با justify-content: center ردیفِ ناقص به‌جای چسبیدن
 * به لبه، وسط‌چین می‌شود.
 *
 * min(100%, …) از سرریز روی نمایشگرهای بسیار باریک جلوگیری می‌کند.
 */
/*
 * چیدمان کارت‌ها.
 *
 * چرا flex و نه grid: با grid و auto-fit، ردیف آخر همیشه از ابتدای ردیف
 * پر می‌شد و اگر تعداد کارت‌ها مضرب تعداد ستون‌ها نبود، یک یا دو خانهٔ
 * خالی کنارش می‌ماند — با ۵ کارت در سه ستون، یک جای خالی. flex-wrap
 * به‌همراه justify-content: center کارت‌های ردیف آخر را وسط می‌چیند و
 * چون عرض پایه ثابت است، همهٔ کارت‌ها هم‌اندازه می‌مانند.
 *
 * --cols تعداد ستون‌ها و --cap سقف عرض هر کارت است تا روی نمایشگر پهن
 * چند کارتِ تنها بیش از حد کشیده نشوند.
 */
.grid {
    --gap:  clamp(1rem, 2.2vw, 1.75rem);
    --cols: 3;
    --cap:  400px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
}
.grid > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: min(100%, var(--cap));
}

.grid--2 { --cols: 2; --cap: 620px; }
.grid--3 { --cols: 3; --cap: 400px; }
.grid--4 { --cols: 4; --cap: 320px; }

@media (max-width: 1100px) { .grid--4 { --cols: 3; } }
@media (max-width: 860px)  { .grid--3 { --cols: 2; } .grid--4 { --cols: 2; } }
@media (max-width: 580px)  { .grid--2 { --cols: 1; } .grid--3 { --cols: 1; } }
@media (max-width: 500px)  { .grid--4 { --cols: 1; } }

/* در حالت تک‌ستونی سقف عرض معنا ندارد — کارت باید تمام عرض را بگیرد */
@media (max-width: 580px) {
    .grid--2, .grid--3 { --cap: 100%; }
}
@media (max-width: 500px) {
    .grid--4 { --cap: 100%; }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        transform var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    pointer-events: none;
}
.card:hover {
    transform: translateY(-7px);
    border-color: rgba(248, 166, 0, .4);
    box-shadow: var(--shadow-lg);
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ink-700);
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.07); }

.card__placeholder {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    color: var(--ink-400);
    background:
        repeating-linear-gradient(45deg,
            rgba(32, 21, 83, .05) 0 12px,
            transparent 12px 24px);
}
.card__placeholder .icon { width: 54px; height: 54px; }

.card__badge {
    position: absolute;
    inset-block-start: .8rem;
    inset-inline-start: .8rem;
    padding: .3rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-600);
    border-radius: 7px;
    box-shadow: var(--shadow-sm);
}
.card__badge--pine { background: var(--pine-500); }

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .6rem;
    padding: 1.3rem;
}
.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    font-size: .78rem;
    color: var(--text-500);
}
.card__meta > * {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.card__meta .icon { width: 14px; height: 14px; }

.card__title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.55;
}
.card__title a { transition: color var(--dur-fast) var(--ease); }
.card:hover .card__title a { color: var(--kraft-300); }

.card__text {
    font-size: .89rem;
    color: var(--text-400);
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
}
.card__price {
    font-weight: 900;
    color: var(--kraft-400);
    font-size: .98rem;
}
.card__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-300);
}
.card__link .icon {
    width: 16px; height: 16px;
    transition: transform var(--dur) var(--ease);
}
.card:hover .card__link { color: var(--kraft-300); }
.card:hover .card__link .icon { transform: translateX(-4px); }

/* کارت دسته‌بندی */
.cat-card {
    position: relative;
    display: block;
    padding: 1.8rem 1.5rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--kraft-500), var(--kraft-700));
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur) var(--ease);
}
.cat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(248, 166, 0, .35);
}
.cat-card:hover::before { transform: scaleX(1); }

.cat-card__icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    margin-block-end: 1.1rem;
    border-radius: 15px;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .12);
    transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease);
}
.cat-card:hover .cat-card__icon {
    transform: rotate(-8deg) scale(1.08);
    background: rgba(248, 166, 0, .2);
}
.cat-card__icon .icon { width: 27px; height: 27px; }

.cat-card__title {
    font-size: 1.05rem;
    margin-block-end: .45rem;
}
.cat-card__text {
    font-size: .86rem;
    color: var(--text-400);
    line-height: 1.8;
}
.cat-card__count {
    display: inline-block;
    margin-block-start: .9rem;
    font-size: .78rem;
    color: var(--text-500);
}

/* ─────────────────────────── ویژگی‌ها ─────────────────────────── */

.feature {
    display: flex;
    gap: 1.1rem;
    padding: 1.6rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature:hover {
    transform: translateY(-5px);
    border-color: rgba(124, 102, 245, .35);
}
.feature__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 13px;
    color: var(--pine-400);
    background: rgba(124, 102, 245, .12);
}
.feature__title { font-size: 1rem; margin-block-end: .4rem; }
.feature__text { font-size: .88rem; color: var(--text-400); line-height: 1.85; }

/* ─────────────────────────── فرایند ─────────────────────────── */

.steps {
    --gap:  1.5rem;
    --cols: 4;
    --cap:  300px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
    counter-reset: step;
}
.steps > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: min(100%, var(--cap));
}
@media (max-width: 1000px) { .steps { --cols: 2; } }
@media (max-width: 480px)  { .steps { --cols: 1; --cap: 100%; } }
.step {
    position: relative;
    padding: 2.2rem 1.5rem 1.5rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    counter-increment: step;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step::before {
    content: counter(step, persian);
    position: absolute;
    inset-block-start: -20px;
    inset-inline-start: 1.5rem;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--kraft-500), var(--kraft-700));
    border: 3px solid var(--surface);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(248, 166, 0, .35);
}
.step:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 166, 0, .3);
}
.step__title { font-size: 1.02rem; margin-block-end: .5rem; }
.step__text { font-size: .88rem; color: var(--text-400); line-height: 1.85; }

/* ─────────────────────────── نظر مشتری ─────────────────────────── */

.testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.8rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.testimonial:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 166, 0, .3);
}
.testimonial__quote {
    position: absolute;
    inset-block-start: 1.2rem;
    inset-inline-end: 1.2rem;
    color: var(--ink-500);
    opacity: .5;
}
.testimonial__quote .icon { width: 34px; height: 34px; }

.testimonial__stars {
    display: flex;
    gap: .15rem;
    color: var(--kraft-400);
}
.testimonial__stars .icon { width: 16px; height: 16px; fill: currentColor; }

.testimonial__body {
    font-size: .93rem;
    line-height: 2;
    color: var(--text-300);
}
.testimonial__author {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
}
.testimonial__avatar {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    font-weight: 900;
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .15);
}
.testimonial__name { font-weight: 700; font-size: .93rem; color: var(--text-100); }
.testimonial__role { font-size: .8rem; color: var(--text-500); }

/* ─────────────────────────── آکاردئون ─────────────────────────── */

.accordion { display: grid; gap: .75rem; }

.acc-item {
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.acc-item.is-open { border-color: rgba(248, 166, 0, .4); }

.acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.4rem;
    text-align: start;
    font-size: .98rem;
    font-weight: 700;
    color: var(--text-100);
    transition: color var(--dur-fast) var(--ease);
}
.acc-btn:hover { color: var(--kraft-300); }

.acc-icon {
    position: relative;
    flex-shrink: 0;
    width: 22px; height: 22px;
}
.acc-icon::before,
.acc-icon::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 13px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(50%, -50%);
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.acc-icon::after { transform: translate(50%, -50%) rotate(90deg); }
.acc-item.is-open .acc-icon::after { transform: translate(50%, -50%) rotate(0); opacity: 0; }

.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p {
    padding: 0 1.4rem 1.3rem;
    font-size: .91rem;
    line-height: 2;
    color: var(--text-400);
}

/* ─────────────────────────── صفحه‌بندی ─────────────────────────── */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-block-start: 3rem;
}
.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: .7rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-300);
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: 11px;
    transition: all var(--dur-fast) var(--ease);
}
.pagination a:hover {
    color: var(--kraft-300);
    border-color: var(--kraft-600);
    transform: translateY(-2px);
}
.pagination .is-current {
    color: #fff;
    background: linear-gradient(135deg, var(--kraft-500), var(--kraft-700));
    border-color: transparent;
}
.pagination .is-gap {
    background: transparent;
    border-color: transparent;
    color: var(--text-500);
}

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

.breadcrumb {
    padding-block: 1.1rem;
    border-block-end: 1px solid var(--border);
    background: var(--surface-sunken);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--text-500);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li:not(:last-child)::after {
    content: '';
    width: 5px; height: 5px;
    border-block-start: 1.5px solid currentColor;
    border-inline-start: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
}
.breadcrumb a:hover { color: var(--kraft-300); }
.breadcrumb [aria-current] { color: var(--text-200); }

/* ─────────────────────────── سربرگ صفحه ─────────────────────────── */

.page-head {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--surface-sunken);
    border-block-end: 1px solid var(--border);
    overflow: hidden;
}
.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(46rem 26rem at 82% 0%, rgba(248, 166, 0, .12), transparent 65%);
}
.page-head__inner { position: relative; }
.page-head__title {
    font-size: clamp(1.75rem, 4.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -.015em;
    margin-block-end: .7rem;
}
.page-head__sub {
    max-width: 720px;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    color: var(--text-400);
    line-height: 1.95;
}

/* ─────────────────────────── فرم ─────────────────────────── */

.form { display: grid; gap: 1.15rem; }
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.15rem;
}

.field { display: grid; gap: .45rem; }
.field__label {
    font-size: .87rem;
    font-weight: 700;
    color: var(--text-300);
}
.field__label .req { color: var(--danger); }
.field__hint { font-size: .78rem; color: var(--text-500); }
.field__error { font-size: .8rem; color: #fca5a5; }

.input,
.textarea,
.select {
    width: 100%;
    padding: .85rem 1.05rem;
    font-size: .93rem;
    color: var(--text-100);
    background: var(--ink-800);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-500); }

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--kraft-500);
    background: var(--ink-750);
    box-shadow: 0 0 0 3px rgba(248, 166, 0, .14);
}
.input.has-error,
.textarea.has-error { border-color: rgba(248, 113, 113, .55); }

.textarea { resize: vertical; min-height: 130px; line-height: 1.9; }

.select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-400) 50%),
        linear-gradient(135deg, var(--text-400) 50%, transparent 50%);
    background-position:
        left 1.1rem top 55%,
        left .75rem top 55%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-inline-start: 2.4rem;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .89rem;
    color: var(--text-300);
    cursor: pointer;
    user-select: none;
}
.checkbox input {
    appearance: none;
    width: 20px; height: 20px;
    background: var(--ink-800);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    position: relative;
    flex-shrink: 0;
}
/*
 * تیک با تصویر SVG کشیده می‌شود، نه با مرزِ چرخانده‌شده.
 * روش قبلی از border-inline-end استفاده می‌کرد که در چیدمان راست‌به‌چپ
 * به لبهٔ چپ نگاشته می‌شد و چون rotate فیزیکی است، تیک آینه و کج درمی‌آمد.
 */
.checkbox input:checked {
    background: var(--kraft-500)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7.2'/%3E%3C/svg%3E")
        center / 13px 13px no-repeat;
    border-color: var(--kraft-500);
}

/* ─────────────────────────── جعبهٔ محتوا ─────────────────────────── */

.prose {
    font-size: 1rem;
    line-height: 2.05;
    color: var(--text-300);
}
.prose > * + * { margin-block-start: 1.35rem; }

.prose h2 {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin-block-start: 2.8rem;
    padding-block-end: .6rem;
    border-block-end: 1px solid var(--border);
    scroll-margin-top: 110px;
}
.prose h3 {
    font-size: clamp(1.12rem, 2.4vw, 1.32rem);
    margin-block-start: 2.2rem;
    color: var(--kraft-300);
    scroll-margin-top: 110px;
}
.prose h4 { font-size: 1.05rem; margin-block-start: 1.8rem; }

.prose a {
    color: var(--kraft-300);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 197, 92, .4);
}
.prose a:hover { text-decoration-color: currentColor; }

.prose strong { color: var(--text-100); font-weight: 700; }

.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose ul li, .prose ol li { margin-block-end: .6rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.15rem;
    inset-block-start: .78em;
    width: 6px; height: 6px;
    background: var(--kraft-500);
    border-radius: 2px;
}
.prose ol { list-style: persian; }
.prose ol li::marker { color: var(--kraft-400); font-weight: 700; }

.prose blockquote {
    padding: 1.15rem 1.4rem;
    border-inline-start: 3px solid var(--kraft-500);
    background: rgba(248, 166, 0, .07);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-200);
    font-size: .97rem;
}

.prose img {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-inline: auto;
}

.prose figure figcaption {
    margin-block-start: .6rem;
    font-size: .82rem;
    color: var(--text-500);
    text-align: center;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .89rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.prose thead { background: var(--ink-700); }
.prose th, .prose td {
    padding: .8rem 1rem;
    text-align: start;
    border-block-end: 1px solid var(--border);
}
.prose th { font-weight: 700; color: var(--text-100); }
.prose tbody tr:hover { background: rgba(32, 21, 83, .03); }
.prose tbody tr:last-child td { border-block-end: 0; }

.prose pre {
    padding: 1.1rem;
    background: var(--ink-900);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    font-size: .85rem;
}
.prose code {
    padding: .15em .4em;
    background: rgba(32, 21, 83, .07);
    border-radius: 5px;
    font-size: .88em;
    direction: ltr;
    display: inline-block;
}
.prose pre code { padding: 0; background: none; }

.prose hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin-block: 2.5rem;
}

/* جدول‌های عریض باید داخل خودشان بلغزند */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────── خالی ─────────────────────────── */

.empty {
    display: grid;
    place-items: center;
    gap: 1rem;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    text-align: center;
    background: var(--ink-750);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}
.empty__icon {
    display: grid;
    place-items: center;
    width: 70px; height: 70px;
    color: var(--ink-400);
    background: var(--ink-850);
    border-radius: 20px;
}
.empty__icon .icon { width: 34px; height: 34px; }
.empty__title { font-size: 1.15rem; }
.empty__text { font-size: .92rem; color: var(--text-400); max-width: 440px; }

/* ─────────────────────────── پابرگ ─────────────────────────── */

.footer {
    margin-block-start: clamp(3rem, 7vw, 6rem);
    background: var(--ink-850);
    border-block-start: 1px solid var(--border);
}

.footer__cta {
    position: relative;
    background: linear-gradient(120deg, var(--brand-700), var(--brand-500) 58%, var(--brand-600));
    overflow: hidden;
}
.footer__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,.05) 0 18px,
            transparent 18px 36px);
}
.footer__cta-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
    padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
.footer__cta-title {
    font-size: clamp(1.3rem, 3.2vw, 1.9rem);
    font-weight: 900;
    color: #fff;
    margin-block-end: .5rem;
}
.footer__cta-sub {
    color: rgba(255, 255, 255, .88);
    font-size: .97rem;
}
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.footer__cta .btn--primary {
    --btn-bg: #fff;
    --btn-fg: var(--brand-700);
    --btn-border: transparent;
    box-shadow: 0 10px 26px rgba(13, 8, 32, .28);
}
.footer__cta .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.footer__cta .btn--ghost:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: #fff;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 900px) {
    .footer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.brand--footer { margin-block-end: 1.1rem; }

.footer__about {
    font-size: .89rem;
    color: var(--text-400);
    line-height: 2;
    margin-block-end: 1.2rem;
}

.footer__social { display: flex; gap: .5rem; }
.footer__social-link {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    color: var(--text-400);
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: 11px;
    transition: all var(--dur-fast) var(--ease);
}
.footer__social-link:hover {
    color: #fff;
    background: var(--kraft-600);
    border-color: transparent;
    transform: translateY(-3px);
}

.footer__title {
    font-size: .97rem;
    font-weight: 700;
    color: var(--text-100);
    margin-block-end: 1.1rem;
    padding-block-end: .6rem;
    border-block-end: 1px solid var(--border);
}

.footer__links { display: grid; gap: .6rem; }
.footer__links a {
    display: inline-flex;
    align-items: center;
    font-size: .88rem;
    color: var(--text-400);
    transition: color var(--dur-fast) var(--ease),
                padding-inline-start var(--dur-fast) var(--ease);
}
.footer__links a::before {
    content: '';
    width: 4px; height: 4px;
    margin-inline-end: .6rem;
    background: var(--ink-400);
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease);
}
.footer__links a:hover {
    color: var(--kraft-300);
    padding-inline-start: .35rem;
}
.footer__links a:hover::before { background: var(--kraft-400); }

.footer__contact { display: grid; gap: .85rem; }
.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .87rem;
    color: var(--text-400);
    line-height: 1.8;
}
.footer__contact .icon {
    flex-shrink: 0;
    width: 17px; height: 17px;
    margin-block-start: .3rem;
    color: var(--kraft-500);
}
.footer__contact a:hover { color: var(--kraft-300); }

.footer__bottom {
    border-block-start: 1px solid var(--border);
    background: var(--ink-900);
}
.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding-block: 1.2rem;
    font-size: .82rem;
    color: var(--text-500);
}
.footer__meta { display: flex; align-items: center; gap: .6rem; }
.footer__meta a:hover { color: var(--kraft-300); }

/* ─────────────────────────── شناور ─────────────────────────── */

.floating {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 1.5rem;
    z-index: var(--z-float);
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.floating__btn {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    color: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.floating__btn:hover { transform: translateY(-4px) scale(1.05); }
.floating__btn .icon { width: 24px; height: 24px; }

.floating__btn--whatsapp {
    background: #25d366;
    animation: pulseGlow 3s ease-out infinite;
}
.floating__btn--top {
    background: var(--brand-600);
    color: #fff;
    border: 1px solid transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
}
.floating__btn--top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* نوار پیشرفت خواندن */
.progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 999;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--kraft-400), var(--pine-400));
    transition: width .1s linear;
}

/* ─────────────────────────── صفحهٔ محصول ─────────────────────────── */

.product {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 940px) {
    .product { grid-template-columns: 1fr; }
}

.gallery { display: grid; gap: .85rem; }
.gallery__main {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gallery__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--dur) var(--ease);
}
.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .6rem;
}
.gallery__thumb {
    aspect-ratio: 1;
    background: var(--ink-750);
    border: 2px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { transform: translateY(-3px); }
.gallery__thumb.is-active { border-color: var(--kraft-500); }

.product__title {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    font-weight: 900;
    line-height: 1.4;
    margin-block-end: .9rem;
}
.product__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding-block-end: 1.3rem;
    margin-block-end: 1.3rem;
    border-block-end: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text-500);
}
.product__meta > span { display: inline-flex; align-items: center; gap: .4rem; }

.product__summary {
    font-size: 1rem;
    line-height: 2;
    color: var(--text-300);
    margin-block-end: 1.6rem;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-block-end: 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.spec-table tr { border-block-end: 1px solid var(--border); }
.spec-table tr:last-child { border-block-end: 0; }
.spec-table tr:nth-child(odd) { background: rgba(32, 21, 83, .028); }
.spec-table th {
    width: 40%;
    padding: .8rem 1rem;
    text-align: start;
    font-weight: 500;
    color: var(--text-400);
}
.spec-table td {
    padding: .8rem 1rem;
    color: var(--text-100);
    font-weight: 700;
}

.product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    padding-block-start: 1.4rem;
    border-block-start: 1px solid var(--border);
}

/* ─────────────────────────── مقاله ─────────────────────────── */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-aside { order: -1; }
}

.article__hero {
    aspect-ratio: 21 / 9;
    margin-block-end: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding-block-end: 1.5rem;
    margin-block-end: 2rem;
    border-block-end: 1px solid var(--border);
    font-size: .85rem;
    color: var(--text-500);
}
.article__meta > span,
.article__meta > a { display: inline-flex; align-items: center; gap: .4rem; }
.article__meta .icon { width: 15px; height: 15px; }

.takeaways {
    padding: 1.5rem 1.7rem;
    margin-block-end: 2rem;
    background: linear-gradient(135deg, rgba(124, 102, 245, .09), rgba(124, 102, 245, .03));
    border: 1px solid rgba(124, 102, 245, .25);
    border-radius: var(--radius-lg);
}
.takeaways__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1rem;
    color: var(--pine-400);
    margin-block-end: .9rem;
}
.takeaways ul { display: grid; gap: .65rem; }
.takeaways li {
    position: relative;
    padding-inline-start: 1.6rem;
    font-size: .92rem;
    line-height: 1.9;
    color: var(--text-300);
}
.takeaways li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .62em;
    width: 8px; height: 8px;
    background: var(--pine-500);
    border-radius: 3px;
}

.toc {
    position: sticky;
    top: 100px;
    padding: 1.3rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.toc__title {
    font-size: .93rem;
    margin-block-end: .9rem;
    padding-block-end: .6rem;
    border-block-end: 1px solid var(--border);
}
.toc ol { display: grid; gap: .3rem; counter-reset: toc; }
.toc a {
    display: block;
    padding: .45rem .6rem;
    font-size: .85rem;
    color: var(--text-400);
    border-inline-start: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    line-height: 1.7;
    transition: all var(--dur-fast) var(--ease);
}
.toc a:hover,
.toc a.is-active {
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .08);
    border-inline-start-color: var(--kraft-500);
}
.toc .is-sub { padding-inline-start: 1.5rem; font-size: .81rem; }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border);
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .85rem;
    font-size: .81rem;
    color: var(--text-400);
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--dur-fast) var(--ease);
}
.tag:hover {
    color: var(--kraft-300);
    border-color: var(--kraft-600);
    transform: translateY(-2px);
}
.tag .icon { width: 13px; height: 13px; }

/* دیدگاه‌ها */
.comments { margin-block-start: 3rem; }
.comment {
    display: flex;
    gap: 1rem;
    padding: 1.3rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-block-end: 1rem;
}
.comment--reply {
    margin-inline-start: clamp(1rem, 4vw, 3rem);
    background: var(--ink-800);
}
.comment__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    font-weight: 900;
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .14);
    border-radius: 13px;
}
.comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .7rem;
    margin-block-end: .5rem;
}
.comment__name { font-weight: 700; color: var(--text-100); font-size: .93rem; }
.comment__date { font-size: .78rem; color: var(--text-500); }
.comment__body { font-size: .91rem; line-height: 1.95; color: var(--text-300); }

/* ─────────────────────────── نوار فیلتر ─────────────────────────── */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    margin-block-end: 2rem;
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.toolbar__count { font-size: .87rem; color: var(--text-400); }
.toolbar__count strong { color: var(--kraft-300); }
.toolbar__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 2rem; }
.chip {
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-300);
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--dur-fast) var(--ease);
}
.chip:hover {
    color: var(--kraft-300);
    border-color: var(--kraft-600);
    transform: translateY(-2px);
}
.chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--kraft-500), var(--kraft-700));
    border-color: transparent;
}

/* ─────────────────────────── نقشه ─────────────────────────── */

.map-frame {
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-750);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ─────────────────────────── چاپ ─────────────────────────── */

@media print {
    .topbar, .header, .footer__cta, .floating, .progress-bar,
    .toolbar, .pagination, .comments, .toc { display: none !important; }
    body { background: #fff; color: #000; }
    .prose { color: #000; }
    a::after { content: ' (' attr(href) ')'; font-size: .8em; }
}

/* ─────────────────── نشان‌های اعتماد ─────────────────── */

.badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding-block: 1.6rem;
    border-block-start: 1px solid var(--border);
}
.badges--inline {
    padding-block: 0;
    border: 0;
    gap: .7rem;
}

.badge-item {
    display: grid;
    place-items: center;
    padding: .5rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.badge-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.badge-item img { width: 100%; height: auto; display: block; }
.badges--inline .badge-item { padding: .3rem; border-radius: 9px; }

/* ─────────────────── رنگ اختصاصی شبکهٔ اجتماعی ─────────────────── */

.topbar__icon:hover,
.footer__social-link:hover {
    background: var(--social-color, var(--kraft-600));
    border-color: transparent;
    color: #fff;
}

.floating__btn--social {
    background: var(--pine-500);
}

/* ─────────────────── لوگو در کنار نام ─────────────────── */

.brand__logo {
    max-height: 52px;
    width: auto;
}
.brand__text--beside { display: flex; flex-direction: column; line-height: 1.25; }

@media (max-width: 560px) {
    .brand__text--beside { display: none; }
    .brand__logo { max-height: 44px; }
}

/* ─────────────────── صفحهٔ اعتبار سازندگان ─────────────────── */

.card-credit {
    background: var(--ink-750);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.card-credit:hover { border-color: rgba(248, 166, 0, .35); }

.credit {
    position: relative;
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: start;
    padding: clamp(1.5rem, 4vw, 2.6rem);
}
.credit::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kraft-500), transparent);
}
.credit--alt::before {
    background: linear-gradient(90deg, var(--pine-500), transparent);
}

.credit__logo {
    display: grid;
    place-items: center;
    padding: 1.4rem;
    background: var(--ink-850);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease-spring);
}
.credit__logo:hover { transform: translateY(-4px) scale(1.02); }
.credit__logo img { width: 100%; height: auto; object-fit: contain; }

.eyebrow--alt {
    color: var(--pine-400);
    background: rgba(124, 102, 245, .12);
    border-color: rgba(124, 102, 245, .28);
}

.credit__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .7rem;
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: 900;
    margin-block-end: .9rem;
}
.credit__title a { transition: color var(--dur-fast) var(--ease); }
.credit__title a:hover { color: var(--kraft-300); }
.credit__latin {
    font-size: .95rem;
    font-weight: 400;
    color: var(--text-500);
    letter-spacing: .04em;
    direction: ltr;
}

.credit__lead {
    font-size: 1rem;
    line-height: 2.05;
    color: var(--text-300);
    margin-block-end: 1.3rem;
}
.credit__lead a {
    color: var(--kraft-300);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 197, 92, .4);
}
.credit__lead a:hover { text-decoration-color: currentColor; }

.credit__list {
    display: grid;
    gap: .65rem;
    margin-block-end: 1.6rem;
}
.credit__list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .91rem;
    line-height: 1.85;
    color: var(--text-300);
}
.credit__list .icon {
    flex-shrink: 0;
    margin-block-start: .3rem;
    color: var(--pine-400);
}

.credit-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    margin-block-start: 3rem;
    padding: clamp(1.5rem, 4vw, 2.2rem);
    background: linear-gradient(135deg, rgba(248, 166, 0, .1), rgba(124, 102, 245, .07));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
}
.credit-cta__title {
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    margin-block-end: .4rem;
}
.credit-cta__sub {
    font-size: .93rem;
    color: var(--text-400);
}

@media (max-width: 720px) {
    .credit { grid-template-columns: 1fr; }
    .credit__logo { max-width: 150px; }
}

/* پیوند اعتبار در پابرگ */
.footer__credit {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-500);
    transition: color var(--dur-fast) var(--ease);
}
.footer__credit:hover { color: var(--kraft-300); }
.footer__credit strong { color: var(--text-400); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   بخش قهرمان
   ═══════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    display: grid;
    align-items: center;
    padding-block: clamp(2.5rem, 7vw, 6rem) 0;
    overflow: hidden;
    background: #fff;
}

/* ── لایهٔ پس‌زمینه ── */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(48rem 34rem at 82% 6%,  rgba(248, 166, 0, .20), transparent 60%),
        radial-gradient(42rem 32rem at 6% 30%,  rgba(95, 75, 212, .14), transparent 62%),
        radial-gradient(38rem 30rem at 60% 92%, rgba(32, 21, 83, .07),  transparent 60%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(32, 21, 83, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 21, 83, .05) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse 85% 75% at 55% 35%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 55% 35%, #000 25%, transparent 78%);
}

.hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: drift 14s ease-in-out infinite;
    will-change: transform;
}
.hero__glow--a {
    width: 30rem; height: 30rem;
    inset-block-start: -6rem;
    inset-inline-end: -6rem;
    background: radial-gradient(circle, rgba(248, 166, 0, .38), transparent 68%);
}
.hero__glow--b {
    width: 26rem; height: 26rem;
    inset-block-end: -8rem;
    inset-inline-start: -5rem;
    background: radial-gradient(circle, rgba(95, 75, 212, .3), transparent 68%);
    animation-delay: -7s;
}

@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-2rem, 1.6rem, 0) scale(1.07); }
}

/* ── چیدمان ── */
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

.hero__content { max-width: 40rem; }

/* ── نشان بالای عنوان ── */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem 1rem .42rem .8rem;
    margin-block-end: 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-600);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    box-shadow: var(--shadow-sm);
    animation: fadeUp .7s var(--ease-out) both;
}
.hero__badge-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kraft-500);
    box-shadow: 0 0 0 0 rgba(248, 166, 0, .6);
    animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(248, 166, 0, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(248, 166, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(248, 166, 0, 0); }
}

/* ── عنوان ── */
.hero__title {
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 900;
    /* ارتفاع خط بازتر تا دو سطر عنوان روی هم نیفتند */
    line-height: 1.62;
    letter-spacing: -.015em;
    margin-block: .6rem 1.3rem;
    max-width: 22ch;
    text-wrap: balance;
    animation: fadeUp .8s var(--ease-out) .08s both;
}
.hero__title em {
    font-style: normal;
    color: var(--brand-700);
}

.hero__lead {
    font-size: clamp(1rem, 2vw, 1.14rem);
    line-height: 2.05;
    color: var(--text-300);
    margin-block-end: 2rem;
    animation: fadeUp .8s var(--ease-out) .16s both;
}

/* ── دکمه‌ها ── */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-block-end: 2.2rem;
    animation: fadeUp .8s var(--ease-out) .24s both;
}

.hero__call {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .5rem .5rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero__call:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.hero__call-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border-radius: 50%;
    flex-shrink: 0;
}
.hero__call-text { display: flex; flex-direction: column; line-height: 1.35; }
.hero__call-text small { font-size: .72rem; color: var(--text-500); }
.hero__call-text strong {
    font-size: 1.02rem;
    font-weight: 900;
    color: var(--text-100);
    font-variant-numeric: tabular-nums;
}

/* ── مزیت‌های کوتاه ── */
.hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.6rem;
    animation: fadeUp .8s var(--ease-out) .32s both;
}
.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: var(--text-300);
}
.hero__points .icon { color: var(--pine-400); flex-shrink: 0; }

/* ── ستون تصویر ── */
.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    animation: zoomIn .9s var(--ease-out) .2s both;
}

.hero__art {
    position: relative;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 26px 40px rgba(32, 21, 83, .18));
    animation: float 7s ease-in-out infinite;
}
.hero__photo {
    width: min(100%, 26rem);
    height: auto;
    border-radius: var(--radius-xl);
}

@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { order: -1; margin-block-end: 1rem; }
    .hero__art { transform: scale(.86); animation: none; }
    .hero__content { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════
   سربرگ بخش‌ها — حالت ردیفی
   ═══════════════════════════════════════════════════════════ */

.section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: none;
    text-align: start;
}
.section-head--row .section-sub { margin-block-start: .5rem; }
.section-head__action { flex-shrink: 0; }

@media (max-width: 700px) {
    .section-head--row { flex-direction: column; align-items: stretch; }
    .section-head__action { align-self: flex-start; }
}


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

.stats { position: relative; z-index: 2; padding-block: clamp(2rem, 4vw, 3rem); }

.stats__band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* جداکننده روی خودِ خانه کشیده می‌شود، نه با gap —
   وگرنه خانه‌های ردیف ناقص بدون خط می‌مانند */
.stat {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.4rem 1.2rem;
    background: #fff;
    border-inline-start: 1px solid var(--border);
    transition: background var(--dur) var(--ease);
}
.stat:first-child { border-inline-start: 0; }
.stat:hover { background: var(--ink-850); }

.stat__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .13);
    border-radius: 13px;
}
.stat__body { display: flex; flex-direction: column; min-width: 0; }
.stat__value {
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-100);
    font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .83rem; color: var(--text-400); line-height: 1.6; }

/* حالت کارتی */
.stats--cards .stats__band {
    background: transparent;
    border: 0;
    gap: 1rem;
    box-shadow: none;
}
.stats--cards .stat {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* حالت خطی فشرده */
.stats--inline .stats__band {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.stats--inline .stat { flex-direction: column; text-align: center; gap: .4rem; padding: 1.1rem .8rem; }
.stats--inline .stat__body { align-items: center; }


/* ═══════════════════════════════════════════════════════════
   دسته‌بندی محصولات
   ═══════════════════════════════════════════════════════════ */

.cat-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(.9rem, 2vw, 1.4rem);
}

/* حالت کارتی: ردیف آخر وسط بنشیند، نه اینکه خانهٔ خالی کنارش بماند */
.cat-mosaic--even {
    --gap:  clamp(.9rem, 2vw, 1.4rem);
    --cols: 3;
    --cap:  340px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
    grid-template-columns: none;
}
.cat-mosaic--even > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: min(100%, var(--cap));
}
@media (max-width: 860px) { .cat-mosaic--even { --cols: 2; } }
@media (max-width: 540px) { .cat-mosaic--even { --cols: 1; --cap: 100%; } }

.cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.6rem 1.4rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        transform var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.cat-tile::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kraft-500), var(--brand-500));
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur) var(--ease);
}
.cat-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(248, 166, 0, .4);
    box-shadow: var(--shadow);
}
.cat-tile:hover::before { transform: scaleX(1); }

/*
 * تعداد ستون‌ها اینجا صریح است، نه auto-fit.
 * چون کاشی شاخص دو ستون در دو ردیف را می‌گیرد، برای اینکه خانهٔ خالی
 * نماند باید در PHP بدانیم دقیقاً چند ستون داریم. با auto-fit این عدد
 * به عرض صفحه گره می‌خورد و محاسبه ممکن نبود.
 */
.cat-mosaic:not(.cat-mosaic--even) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .cat-mosaic:not(.cat-mosaic--even) { grid-template-columns: 1fr; }
}

/* کاشی شاخص — دو ستون عرض روی صفحهٔ بزرگ */
@media (min-width: 901px) {
    .cat-mosaic:not(.cat-mosaic--even) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cat-tile--lead {
        grid-column: span 2;
        grid-row: span 2;
        justify-content: space-between;
        padding: 2.2rem 2rem;
        background: linear-gradient(150deg, var(--ink-850), #fff 60%);
    }
    .cat-tile--lead .cat-tile__title { font-size: 1.5rem; }
    .cat-tile--lead .cat-tile__text  { font-size: .96rem; }
}

/*
 * کاشی پایانی خانه‌های باقی‌مانده را پر می‌کند تا ردیف آخر نیمه‌کاره نماند.
 * مقدار span را PHP بر پایهٔ تعداد واقعی دسته‌ها حساب و تزریق می‌کند.
 */
@media (min-width: 901px) {
    .cat-tile--tail { grid-column: span var(--tail-3col, 1); }
}
@media (min-width: 561px) and (max-width: 900px) {
    .cat-tile--tail { grid-column: span var(--tail-2col, 1); }
}

.cat-tile__icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .12);
    border-radius: 15px;
    transition: transform var(--dur) var(--ease-spring), background var(--dur) var(--ease);
}
.cat-tile:hover .cat-tile__icon {
    transform: rotate(-8deg) scale(1.07);
    background: rgba(248, 166, 0, .2);
}
.cat-tile--lead .cat-tile__icon { width: 66px; height: 66px; border-radius: 19px; }

.cat-tile__body { display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.cat-tile__title { font-size: 1.08rem; font-weight: 700; color: var(--text-100); }
.cat-tile__text  { font-size: .88rem; color: var(--text-400); line-height: 1.85; }

.cat-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding-block-start: .9rem;
    border-block-start: 1px solid var(--border);
}
.cat-tile__count { font-size: .8rem; color: var(--text-500); }
.cat-tile__go {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    color: var(--brand-500);
    background: var(--brand-100);
    border-radius: 10px;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cat-tile:hover .cat-tile__go {
    transform: translateX(-4px);
    background: var(--brand-500);
    color: #fff;
}

/* حالت فهرستی */
.cat-list { display: grid; gap: .7rem; }
.cat-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-row:hover { transform: translateX(-5px); border-color: rgba(248, 166, 0, .4); }
.cat-row__icon {
    display: grid; place-items: center;
    width: 46px; height: 46px; flex-shrink: 0;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .12);
    border-radius: 13px;
}
.cat-row__body { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cat-row__body strong { font-size: 1rem; color: var(--text-100); }
.cat-row__body small { font-size: .85rem; color: var(--text-400); }
.cat-row__go { color: var(--brand-400); flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════
   ریل افقی (اسلایدی)
   ═══════════════════════════════════════════════════════════ */

.rail {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.rail__item {
    flex: 0 0 clamp(240px, 78vw, 296px);
    scroll-snap-align: start;
}


/* ═══════════════════════════════════════════════════════════
   چرا آذران — دوستونی
   ═══════════════════════════════════════════════════════════ */

.why {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.why__aside { position: sticky; top: 110px; }
.why__aside .section-title { margin-block-end: .9rem; }
.why__aside .section-sub { margin-block-end: 1.6rem; }

.why__art {
    display: none;
    margin-block-end: 1.6rem;
    opacity: .9;
}

.why__list {
    display: grid;
    gap: .8rem;
    counter-reset: why;
}

.why__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition:
        transform var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.why__item:hover {
    transform: translateX(-6px);
    border-color: rgba(95, 75, 212, .4);
    box-shadow: var(--shadow-sm);
}

.why__num {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1.2rem;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    color: var(--brand-100);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.why__icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    color: var(--pine-400);
    background: rgba(95, 75, 212, .1);
    border-radius: 13px;
}
.why__body { flex: 1; min-width: 0; }
.why__title { font-size: 1rem; margin-block-end: .35rem; }
.why__title a:hover { color: var(--kraft-300); }
.why__text { font-size: .89rem; color: var(--text-400); line-height: 1.9; }

@media (min-width: 1000px) {
    .why__art { display: block; }
}
@media (max-width: 900px) {
    .why { grid-template-columns: 1fr; }
    .why__aside { position: static; }
}


/* ═══════════════════════════════════════════════════════════
   فرایند سفارش — خط زمانی
   ═══════════════════════════════════════════════════════════ */

.flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.2rem);
}

/* خط رابط پشت نشانگرها */
.flow::before {
    content: '';
    position: absolute;
    inset-block-start: 33px;
    inset-inline: 12%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--border-strong) 0 8px,
        transparent 8px 16px
    );
    z-index: 0;
}

.flow__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.flow__marker { position: relative; }
.flow__ring {
    display: grid;
    place-items: center;
    width: 68px; height: 68px;
    color: var(--brand-600);
    background: #fff;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur) var(--ease-spring),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}
.flow__item:hover .flow__ring {
    transform: scale(1.08);
    border-color: var(--kraft-500);
    color: var(--kraft-400);
}
.flow__num {
    position: absolute;
    inset-block-end: -4px;
    inset-inline-start: -4px;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    font-size: .82rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border: 3px solid #fff;
    border-radius: 50%;
}

.flow__body { max-width: 22rem; }
.flow__title { font-size: 1.02rem; margin-block-end: .4rem; }
.flow__text  { font-size: .88rem; color: var(--text-400); line-height: 1.85; }

@media (max-width: 760px) {
    .flow { grid-template-columns: 1fr; gap: 1.2rem; }
    .flow::before {
        inset-block: 34px 34px;
        inset-inline-start: 33px;
        inset-inline-end: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(
            180deg,
            var(--border-strong) 0 8px,
            transparent 8px 16px
        );
    }
    .flow__item { flex-direction: row; align-items: flex-start; text-align: start; }
    .flow__body { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════
   نمونه‌کارها — موزاییک
   ═══════════════════════════════════════════════════════════ */

.work {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(.9rem, 2vw, 1.3rem);
}

/* ردیف آخر وسط می‌نشیند تا با تعداد فرد، خانهٔ خالی نماند */
.work--even {
    --gap:  clamp(.9rem, 2vw, 1.3rem);
    --cols: 3;
    --cap:  380px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--gap);
    grid-template-columns: none;
}
.work--even > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: min(100%, var(--cap));
}
@media (max-width: 900px) { .work--even { --cols: 2; } }
@media (max-width: 540px) { .work--even { --cols: 1; --cap: 100%; } }

.work__item {
    position: relative;
    display: block;
    min-height: 260px;
    background: var(--ink-850);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.work__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

@media (min-width: 900px) {
    .work:not(.work--even) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .work__item--lead { grid-column: span 2; grid-row: span 2; min-height: 100%; }
}

.work__media { display: block; width: 100%; height: 100%; }
.work__media img {
    width: 100%; height: 100%;
    min-height: 260px;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.work__item:hover .work__media img { transform: scale(1.06); }

.work__ph {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 260px;
    background:
        repeating-linear-gradient(45deg, rgba(32,21,83,.03) 0 14px, transparent 14px 28px),
        var(--ink-850);
}

.work__overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.6rem 1.3rem 1.2rem;
    color: #fff;
    background: linear-gradient(to top, rgba(13, 8, 32, .92), rgba(13, 8, 32, .55) 55%, transparent);
}
.work__tag {
    align-self: flex-start;
    padding: .22rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    color: #3a2400;
    background: var(--kraft-500);
    border-radius: 6px;
}
.work__title { font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.work__item--lead .work__title { font-size: 1.35rem; }
.work__text { font-size: .88rem; color: rgba(255, 255, 255, .82); line-height: 1.8; }
.work__client {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
}


/* ═══════════════════════════════════════════════════════════
   نظر مشتریان — یکی شاخص
   ═══════════════════════════════════════════════════════════ */

.voices {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: start;
}

.voice-lead {
    position: relative;
    padding: clamp(1.8rem, 4vw, 2.6rem);
    background: linear-gradient(150deg, var(--brand-700), var(--brand-500));
    border-radius: var(--radius-xl);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.voice-lead::before {
    content: '';
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -15%;
    width: 22rem; height: 22rem;
    background: radial-gradient(circle, rgba(248, 166, 0, .22), transparent 66%);
    pointer-events: none;
}
.voice-lead__mark {
    position: absolute;
    inset-block-start: 1.4rem;
    inset-inline-end: 1.6rem;
    color: rgba(255, 255, 255, .16);
}
.voice-lead .testimonial__stars { color: var(--kraft-400); margin-block-end: 1.1rem; }
.voice-lead__body {
    position: relative;
    font-size: clamp(1rem, 2.2vw, 1.16rem);
    line-height: 2.1;
    color: rgba(255, 255, 255, .94);
    margin-block-end: 1.6rem;
}
.voice-lead__author {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-block-start: 1.2rem;
    border-block-start: 1px solid rgba(255, 255, 255, .18);
}
.voice-lead__avatar {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    font-weight: 900;
    color: var(--brand-700);
    background: var(--kraft-400);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.voice-lead .testimonial__name { color: #fff; }
.voice-lead .testimonial__role { color: rgba(255, 255, 255, .7); }

.voices__rest { display: grid; gap: 1rem; }

.voice {
    padding: 1.4rem 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.voice:hover { transform: translateX(-5px); border-color: rgba(248, 166, 0, .4); }
.voice__body {
    font-size: .92rem;
    line-height: 1.95;
    color: var(--text-300);
    margin-block-end: 1rem;
}
.voice__author { display: flex; align-items: center; gap: .7rem; }
.voice__avatar {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    font-weight: 900;
    font-size: .9rem;
    color: var(--kraft-300);
    background: rgba(248, 166, 0, .15);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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


/* ═══════════════════════════════════════════════════════════
   مقالات — یکی بزرگ + فهرست
   ═══════════════════════════════════════════════════════════ */

.reads {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2rem);
    align-items: start;
}

.read-lead {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.read-lead:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* یک مکانیزم و بس. با aspect-ratio در کنار max-height، ارتفاعِ کادر بریده
   می‌شد ولی عرضش دست‌نخورده می‌ماند و ارتفاعِ درصدیِ تصویر نسبت به کادرِ
   بریده‌نشده حساب می‌شد؛ برای همین عکس با قابش جور درنمی‌آمد.
   ۱۶:۱۰ هم به نسبت ۴:۳ تصویرهای جلد نزدیک است و برش کمی می‌خواهد،
   برخلاف ۱۶:۸ که یک‌سوم ارتفاع تصویر را می‌برید. */
.read-lead__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink-850);
}
.read-lead__media img { width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out); }
.read-lead:hover .read-lead__media img { transform: scale(1.05); }
.read-lead__ph {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, rgba(32,21,83,.03) 0 14px, transparent 14px 28px);
}

.read-lead__body { padding: 1.2rem 1.3rem; display: grid; gap: .6rem; }
.read-lead__title { font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.6; }
.read-lead__title a:hover { color: var(--kraft-300); }
.read-lead__text {
    font-size: .89rem;
    color: var(--text-400);
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pill-soft {
    padding: .2rem .6rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--brand-600);
    background: var(--brand-100);
    border-radius: 6px;
}

.read-list { display: grid; gap: .7rem; }
.read-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.read-row:hover { transform: translateX(-5px); border-color: rgba(248, 166, 0, .4); }
.read-row__thumb {
    display: grid;
    place-items: center;
    width: 74px; height: 74px;
    flex-shrink: 0;
    color: var(--ink-400);
    background: var(--ink-850);
    border-radius: 11px;
    overflow: hidden;
}
.read-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.read-row__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.read-row__body strong { font-size: .95rem; line-height: 1.65; color: var(--text-100); }
.read-row__body small { font-size: .78rem; color: var(--text-500); }

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


/* ═══════════════════════════════════════════════════════════
   پرسش‌های متداول — دوستونی
   ═══════════════════════════════════════════════════════════ */

.ask {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.ask__aside { position: sticky; top: 110px; }
.ask__aside .section-title { margin-block-end: .9rem; }
.ask__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.5rem; }
.ask__list { max-width: none; }

@media (max-width: 900px) {
    .ask { grid-template-columns: 1fr; }
    .ask__aside { position: static; }
}


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

.closer {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.8rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--ink-850), #fff 55%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.closer::before {
    content: '';
    position: absolute;
    inset-block-start: -40%;
    inset-inline-start: -10%;
    width: 26rem; height: 26rem;
    background: radial-gradient(circle, rgba(248, 166, 0, .16), transparent 65%);
    pointer-events: none;
}
.closer__art {
    position: relative;
    flex-shrink: 0;
    filter: drop-shadow(0 14px 24px rgba(32, 21, 83, .16));
    animation: float 8s ease-in-out infinite;
}
.closer__body { position: relative; flex: 1; }
.closer__title {
    font-size: clamp(1.25rem, 3.2vw, 1.9rem);
    font-weight: 900;
    line-height: 1.45;
    margin-block-end: .6rem;
}
.closer__sub {
    font-size: .97rem;
    color: var(--text-400);
    line-height: 1.95;
    margin-block-end: 1.5rem;
    max-width: 44rem;
}
.closer__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

@media (max-width: 760px) {
    .closer { flex-direction: column; text-align: center; }
    .closer__art { transform: scale(.85); }
    .closer__actions { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   اصلاحات ریسپانسیو موبایل
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    html { font-size: 15px; }

    .container { width: min(100% - 1.6rem, var(--container)); }

    .section { padding-block: clamp(2.5rem, 8vw, 3.5rem); }

    /* عنوان‌ها روی صفحهٔ کوچک نباید بشکنند */
    .section-title { font-size: clamp(1.35rem, 6.5vw, 1.8rem); }
    .hero__title   { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
    .hero__title em { white-space: normal; }

    /* دکمه‌ها تمام‌عرض تا هدف لمسی بزرگ باشد */
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
    .hero__call { width: 100%; justify-content: center; }

    .closer__actions .btn,
    .footer__cta-actions .btn { width: 100%; }
    .footer__cta-actions { width: 100%; }

    /* جدول‌های عریض داخل خودشان بلغزند */
    .prose table, .spec-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* فاصله‌های فشرده‌تر */
    .card__body   { padding: 1.1rem; }
    .why__item    { padding: 1.1rem; }
    .voice-lead   { padding: 1.4rem; }
    .work__overlay { padding: 1.2rem 1rem 1rem; }

    /* شمارهٔ بزرگ پس‌زمینه روی موبایل مزاحم است */
    .why__num { font-size: 1.6rem; inset-block-start: .8rem; }

    /* گالری محصول */
    .gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }

    /* مسیر راهنما */
    .breadcrumb ol { font-size: .78rem; }

    /* دکمه‌های شناور کوچک‌تر */
    .floating { inset-block-end: 1rem; inset-inline-start: 1rem; gap: .5rem; }
    .floating__btn { width: 46px; height: 46px; border-radius: 14px; }
}

@media (max-width: 420px) {
    .topbar__inner { justify-content: center; }
    .topbar__contact { justify-content: center; }
    .stat { padding: 1.1rem .9rem; }
    .stat__icon { width: 40px; height: 40px; }
    .cat-tile { padding: 1.3rem 1.1rem; }
}

/* هدف لمسی حداقل ۴۴ پیکسل روی دستگاه لمسی */
@media (hover: none) and (pointer: coarse) {
    .nav__link, .footer__links a, .pagination a, .chip, .tag {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .icon-btn, .burger { min-width: 44px; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   صفحهٔ تماس
   ═══════════════════════════════════════════════════════════ */

.contact {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.contact__aside { position: sticky; top: 110px; }
.contact__heading { font-size: 1.3rem; margin-block-end: 1.3rem; }

.contact__list { display: grid; gap: .8rem; margin-block-end: 1.6rem; }
.contact__item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact__item:hover { transform: translateX(-4px); border-color: rgba(248, 166, 0, .4); }

.contact__icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    color: var(--kraft-400);
    background: rgba(248, 166, 0, .12);
    border-radius: 12px;
}
.contact__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact__label { font-size: .78rem; color: var(--text-500); }
.contact__value {
    font-size: .97rem;
    font-weight: 700;
    color: var(--text-100);
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
a.contact__value:hover { color: var(--kraft-300); }
.contact__value--plain { font-weight: 500; font-size: .9rem; color: var(--text-300); }

.contact__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.6rem; }
.contact__map { margin-block-start: 0; }

/* ── جعبهٔ فرم با تب ── */
.formbox {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.formbox__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-block-end: 1px solid var(--border);
}

.formbox__tab {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.1rem 1.2rem;
    text-align: start;
    background: var(--ink-850);
    color: var(--text-400);
    border-block-end: 3px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.formbox__tab:hover { background: #fff; color: var(--text-200); }
.formbox__tab.is-active {
    background: #fff;
    color: var(--text-100);
    border-block-end-color: var(--kraft-500);
}
.formbox__tab .icon { flex-shrink: 0; }
.formbox__tab span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.formbox__tab strong { font-size: .95rem; font-weight: 700; }
.formbox__tab small { font-size: .76rem; color: var(--text-500); }
.formbox__tab.is-active .icon { color: var(--kraft-400); }

.formbox__panel { padding: clamp(1.3rem, 3vw, 2rem); animation: fadeIn .3s var(--ease); }
.formbox__panel[hidden] { display: none; }

.formbox__intro {
    font-size: .92rem;
    line-height: 1.95;
    color: var(--text-400);
    padding-block-end: 1.2rem;
    margin-block-end: 1.4rem;
    border-block-end: 1px solid var(--border);
}

.formbox__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-block-start: 1rem;
    font-size: .8rem;
    color: var(--text-500);
}
.formbox__note .icon { color: var(--pine-400); }

@media (max-width: 900px) {
    .contact { grid-template-columns: 1fr; }
    .contact__aside { position: static; }
}
@media (max-width: 560px) {
    .formbox__tabs { grid-template-columns: 1fr; }
    .formbox__tab { border-block-end-width: 2px; }
    .formbox__tab small { display: none; }
}

/* ─────────── کاشی شاخص دسته‌بندی: پر کردن فضای خالی ─────────── */

.cat-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.cat-tile__flag {
    padding: .24rem .7rem;
    font-size: .74rem;
    font-weight: 700;
    color: #3a2400;
    background: var(--kraft-500);
    border-radius: 100px;
}

.cat-tile__items {
    display: grid;
    gap: .45rem;
    margin-block-start: .3rem;
}
.cat-tile__item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .87rem;
    line-height: 1.75;
    color: var(--text-300);
}
.cat-tile__item .icon { flex-shrink: 0; margin-block-start: .28rem; color: var(--pine-400); }

.cat-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-start: .5rem;
    font-size: .89rem;
    font-weight: 700;
    color: var(--brand-600);
}
.cat-tile:hover .cat-tile__cta { color: var(--kraft-300); }

/* کاشی بزرگ محتوایش را در ارتفاع پخش کند تا ته آن خالی نماند */
@media (min-width: 900px) {
    .cat-tile--lead .cat-tile__body {
        justify-content: space-between;
        gap: .9rem;
    }
}
/* روی صفحهٔ کوچک، فهرست محصولات کاشی بزرگ حذف می‌شود تا بلند نشود */
@media (max-width: 899px) {
    .cat-tile__items { display: none; }
}

/* هیرو تک‌ستونی — وقتی تصویر از پنل خاموش شده باشد */
.hero--solo .hero__inner { grid-template-columns: 1fr; }
.hero--solo .hero__content { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero--solo .hero__title { max-width: none; margin-inline: auto; }
.hero--solo .hero__actions,
.hero--solo .hero__points { justify-content: center; }

/* ─────────── نوار هشدار حالت تعمیر (فقط برای مدیر وارد‌شده) ─────────── */

.maint-bar {
    position: relative;
    z-index: calc(var(--z-header) + 1);
    background: linear-gradient(90deg, var(--kraft-600), var(--kraft-500));
    color: #3a2400;
    font-size: .86rem;
}
.maint-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding-block: .6rem;
}
.maint-bar__text { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.7; }
.maint-bar__text .icon { flex-shrink: 0; }
.maint-bar__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.maint-bar__link {
    padding: .3rem .8rem;
    font-weight: 700;
    border: 1px solid rgba(58, 36, 0, .32);
    border-radius: 100px;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease);
}
.maint-bar__link:hover { background: rgba(255, 255, 255, .32); }
.maint-bar__link--solid { background: #3a2400; color: var(--kraft-300); border-color: transparent; }
.maint-bar__link--solid:hover { background: #241600; }

@media (max-width: 640px) {
    .maint-bar__inner { flex-direction: column; align-items: stretch; text-align: center; }
    .maint-bar__actions { justify-content: center; }
}

@keyframes navIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
}

/* تصویر دلخواه بخش فراخوان — جای طرح پیش‌فرض */
.closer__img {
    width: clamp(140px, 22vw, 210px);
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
}