/* =========================================================
   TAJ GLOBAL STYLES
   Shared styles and template overrides
========================================================= */


/* =========================================================
   Brand Variables
========================================================= */

:root {
    --taj-navy: #003a5b;
    --taj-navy-dark: #082538;
    --taj-orange: #cc5501;

    --taj-text: #223743;
    --taj-text-muted: #647681;

    --taj-white: #ffffff;
    --taj-border: rgba(0, 58, 91, 0.08);

    --taj-header-height: 92px;
}


/* =========================================================
   رفع ریشه‌ای رنگ پیش‌فرض تیترها (h1 تا h6)
   ---------------------------------------------------------
   style.css متغیر --titleColor را روی #393737 (طوسی تیره،
   نزدیک به مشکی) تعریف کرده و همه h1..h6 سایت طبق قانون
   سراسری همان فایل از همین متغیر رنگ می‌گیرند مگر این‌که
   کلاس دیگری صراحتا رویشون رنگ ست کرده باشه. قبلا (برای رفع
   اولین نمونه گزارش‌شده در about-us.html) فقط کلاس .text-title
   ساخته و رنگش به سرمه‌ای صحیح تغییر داده شده بود، بدون دست‌زدن
   به خود --titleColor، از ترس اینکه این متغیر جای دیگه‌ای هم
   (مثل پس‌زمینه دکمه‌ها) استفاده شده باشه و تغییرش عوارض جانبی
   ناخواسته بسازه.

   با بررسی این‌بار مشخص شد نگرانی اون تصمیم در عمل واقعیت نداشت:
   هر جای دیگه‌ای که --titleColor به‌عنوان background به‌کار رفته
   (خط تزئینی کوچیک بالای نقل‌قول‌ها، بولت لیست‌ها، خط زیر لینک‌
   حین هاور، میله‌های آیکون منوی موبایل) صرفا جزئیات تزئینی کوچیکن
   که سرمه‌ای‌شدنشون هم‌جهت با هویت بصری کل سایته، نه یه عارضه؛
   و کلاس .bg-title (تنها جایی که این متغیر مستقیم پس‌زمینه یک
   عنصر بزرگ می‌شد) اصلا تو هیچ صفحه‌ای استفاده نشده (کد مرده).

   در همین حین با اسکن سراسری هر ۱۰ صفحه واقعی سایت مشخص شد این
   باگ فقط مال about-us.html نبود: appointment.html (۳ تیتر)،
   terms-conditions.html (۱۱ از ۱۲ تیتر)، privacy-policy.html
   (۱۶ از ۱۷ تیتر)، service.html و our-leaders.html (چند مورد)،
   و حتی ۳ تیتر باقی‌مانده تو خود صفحه اصلی (بخش دانش تخصصی) هم
   همین مشکل رو داشتن؛ یعنی رفع تک‌تک‌ِ کلاس .text-title روی هر
   المان به‌جای رفع خود ریشه، دقیقا همون الگوی ناقصی بود که این‌بار
   باعث این حجم گزارش شد. برای همین، این‌بار به‌جای اضافه‌کردن
   .text-title المان‌به‌المان، خود --titleColor به‌طور کامل به رنگ
   سرمه‌ای صحیح (همون‌رنگ .text-title) تغییر می‌کنه؛ این یعنی هر
   h1 تا h6 در کل سایت — چه الان وجود داشته باشه چه بعدا اضافه
   بشه — بدون نیاز به کلاس اضافه، از همون ابتدا رنگ درست می‌گیره.
========================================================= */

:root {
    --titleColor: #102f44;
}


/* =========================================================
   Global Anchor Offset
   Prevent sticky header from covering anchor targets
========================================================= */

html {
    scroll-padding-top: 110px;
}

#start-conversation {
    scroll-margin-top: 110px;
}


/* =========================================================
   Accessibility
========================================================= */

.skip-link {
    position: fixed;

    top: 12px;
    right: 12px;

    z-index: 99999;

    padding: 10px 16px;

    border-radius: 8px;

    background-color: var(--taj-white);
    color: var(--taj-navy);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;

    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(0, 37, 68, 0.16);

    transform: translateY(-160%);

    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}


.navbar-area a:focus-visible,
.navbar-area button:focus-visible {
    outline: 3px solid var(--taj-orange);
    outline-offset: 4px;
}


/* =========================================================
   HEADER
========================================================= */


/* =========================================================
   Header Base
========================================================= */

.navbar-area.style-three {
    position: sticky !important;

    top: 0;

    width: 100%;

    padding: 0 !important;
    margin: 0;

    z-index: 1000 !important;

    background-color: var(--taj-white) !important;

    border-bottom:
        1px solid var(--taj-border);

    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;

    animation: none !important;
}


/* Scrolled / Sticky State */

.navbar-area.style-three.sticky {
    background-color: var(--taj-white) !important;

    box-shadow:
        0 10px 30px rgba(0, 37, 68, 0.08);

    animation: none !important;
}


/* =========================================================
   Header Layout
========================================================= */

.navbar-area.style-three .navbar-wrapper {
    width: 100%;

    min-height: var(--taj-header-height);

    gap: 28px;
}


.navbar-area.style-three .other-options {
    display: flex;

    align-items: center;

    flex: 0 0 auto;

    margin: 0;
}


.navbar-area.style-three .other-options .option-item {
    margin: 0;
}


/* =========================================================
   Logo
========================================================= */

.navbar-area.style-three .navbar-brand {
    display: flex;

    align-items: center;

    flex: 0 0 auto;

    padding: 0;
    margin: 0;

    line-height: 1;
}


.navbar-area.style-three .navbar-brand img {
    display: block;

    width: 170px;
    max-width: 170px;

    height: auto;

    margin: 0;
}


/*
   Dark mode is not active in the current TAJ site.
   Prevent both logo versions from being displayed together.
*/

.navbar-area.style-three .navbar-brand .logo-light {
    display: block;
}

.navbar-area.style-three .navbar-brand .logo-dark {
    display: none !important;
}


/* =========================================================
   Header CTA — دکمه گفتگو (دور۳۶)
========================================================= */

/* دور۳۶: خواسته صریح سعیده - «عکس آخر [دکمه گفتگوی هدر] جا داره جذاب‌تر باشه
   و دوباره طراحی بشه که کاربر رو بکشه سمت خودش و اعتمادشو جلب کنه». این دکمه
   تنها CTAی ثابت/همیشه‌دیده سایته (تو هدر همه صفحات، پشت هر اسکرولی)، پس یک
   پوسته مجزا از استایل عمومی مشترک .btn.style-one گرفت (اون کلاس جای دیگه
   سایت - مثل دکمه «رفتن به صفحه تماس» - دست‌نخورده و سرمه‌ای تخت می‌مونه؛
   فقط همین نمونه هدر خاص شد، چون فقط همین یکی مورد نظر سعیده بود):
   ۱) گرادیان گرم به‌جای رنگ تخت (حس عمیق‌تر/باکیفیت‌تر، هم روی متن هم آیکون)،
   ۲) آیکون گفت‌وگو (ri-chat-3-line، هم‌خانواده با آیکون کارت تماس دانشنامه/
   صفحه اصلی - در base.html عوض شد) به‌جای فلش عمومی، چون این دکمه دعوت به
   مکالمه‌ست نه فقط لینک ساده به یک صفحه، ۳) یک درخشش نرم و آروم دور دکمه
   (breathing glow با رنگ نارنجی برند) که توجه رو به‌آرومی جلب می‌کنه بدون
   تبدیل‌شدن به المان مزاحم یا فریبنده (بدون هیچ ادعای دروغین مثل شمارش
   معکوس/تعداد بازدید ساختگی). مکانیزم اسلاید آیکون هاور (btn-icon-one/two،
   تعریف در style.css) دست‌نخورده موند چون خودش جلوه خوبیه؛ فقط پوسته رنگی و
   آیکون عوض شد. انیمیشن با prefers-reduced-motion غیرفعال می‌شه، دقیقا
   هم‌قانون با بقیه موشن‌های سایت (taj-motion-reveal و غیره). */

.taj-header-cta {
    border-radius: 999px;
    animation: taj-header-cta-glow 3.4s ease-in-out infinite;
}

.taj-header-cta.btn.style-one .btn-icon-one,
.taj-header-cta.btn.style-one .btn-icon-two {
    background: linear-gradient(135deg, var(--secondaryColor-1) 0%, var(--primaryColor-1) 100%);
}

.taj-header-cta.btn.style-one .btn-icon-one i,
.taj-header-cta.btn.style-one .btn-icon-two i {
    color: var(--whiteColor);
    font-size: 20px;
    line-height: 1;
}

.taj-header-cta.btn.style-one .btn-text {
    background: linear-gradient(90deg, var(--secondaryColor) 0%, #0e5c86 100%);
    letter-spacing: 0.01em;
}

@keyframes taj-header-cta-glow {

    0%,
    100% {
        box-shadow:
            0 4px 16px rgba(204, 85, 1, 0.16),
            0 0 0 0 rgba(204, 85, 1, 0.22);
    }

    50% {
        box-shadow:
            0 6px 22px rgba(204, 85, 1, 0.28),
            0 0 0 7px rgba(204, 85, 1, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-header-cta {
        animation: none;
    }
}


/* =========================================================
   Navigation Base
========================================================= */

.navbar-area.style-three .menu-area {
    min-width: 0;
}


.navbar-area.style-three .menu-section {
    list-style: none;
}


.navbar-area.style-three .menu-mobile-header {
    display: none;
}


/* =========================================================
   Submenu Toggle (دور بیست‌ودوم)
   ---------------------------------------------------------
   دکمه کوچک کنار «درباره تاج» و «تماس با ما» که زیرمنو را
   باز/بسته می‌کند. این بخش مستقل از عرض صفحه است: فقط ظاهر
   خود دکمه و چرخش آیکون را مشخص می‌کند؛ نمایش/جای زیرمنو
   خودش جدا برای دسکتاپ (min-width:1200px) و
   موبایل/تبلت (max-width:1199px) تعریف شده چون رفتارشان
   کاملا متفاوت است (هاور در برابر کلیک).
========================================================= */

.navbar-area.style-three .taj-submenu-toggle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 0;
    outline-offset: 2px;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


.navbar-area.style-three .taj-submenu-toggle i {
    transition: transform 0.25s ease;
}


.navbar-area.style-three .menu-item-has-children:hover > .taj-submenu-toggle i,
.navbar-area.style-three .menu-item-has-children:focus-within > .taj-submenu-toggle i,
.navbar-area.style-three .menu-item-has-children.taj-submenu-open > .taj-submenu-toggle i {
    transform: rotate(180deg);
}


/* =========================================================
   Desktop Navigation
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .navbar-area.style-three .menu {
        position: static;

        display: block;

        width: auto;
        height: auto;

        margin: 0;

        background: transparent;

        box-shadow: none;

        overflow: visible;

        transform: none !important;
    }


    .navbar-area.style-three .menu-area>.overlay {
        display: none !important;
    }


    .navbar-area.style-three .menu>ul {
        display: flex;

        align-items: center;

        gap: 30px;

        margin: 0;
        padding: 0;
    }


    .navbar-area.style-three .menu>ul>li {
        position: relative;

        display: block;

        margin: 0;
        padding: 0;
    }


    .navbar-area.style-three .menu>ul>li>a {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: center;

        min-height: 92px;

        padding: 0;

        color: var(--taj-text);

        font-size: 16px;
        line-height: 1;
        font-weight: 600;

        text-decoration: none;

        white-space: nowrap;

        transition: color 0.2s ease;
    }


    /* Active / Hover Indicator */

    .navbar-area.style-three .menu>ul>li>a::after {
        position: absolute;

        right: 50%;
        bottom: 22px;

        width: 22px;
        height: 2px;

        content: "";

        border-radius: 999px;

        background-color: var(--taj-orange);

        transform:
            translateX(50%) scaleX(0);

        transform-origin: center;

        transition:
            transform 0.25s ease;
    }


    .navbar-area.style-three .menu>ul>li>a:hover,
    .navbar-area.style-three .menu>ul>li>a.active,
    .navbar-area.style-three .menu>ul>li>a[aria-current="page"] {
        color: var(--taj-navy);
    }


    .navbar-area.style-three .menu>ul>li>a:hover::after,
    .navbar-area.style-three .menu>ul>li>a.active::after,
    .navbar-area.style-three .menu>ul>li>a[aria-current="page"]::after {
        transform:
            translateX(50%) scaleX(1);
    }


    /* Desktop CTA */

    .navbar-area.style-three .taj-header-cta {
        white-space: nowrap;
    }


    .navbar-area.style-three .taj-header-cta .btn-text {
        font-size: 15px;
    }

}


/* =========================================================
   Desktop / Laptop
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399px) {

    .navbar-area.style-three {
        --taj-header-height: 82px;
    }


    .navbar-area.style-three .navbar-wrapper {
        min-height: 82px;

        gap: 18px;
    }


    .navbar-area.style-three .navbar-brand img {
        width: 145px;
        max-width: 145px;
    }


    .navbar-area.style-three .menu {
        position: static;

        display: block;

        width: auto;
        height: auto;

        margin: 0;

        background: transparent;

        box-shadow: none;

        overflow: visible;

        transform: none !important;
    }


    .navbar-area.style-three .menu-area>.overlay {
        display: none !important;
    }


    .navbar-area.style-three .menu>ul {
        display: flex;

        align-items: center;

        gap: 20px;

        margin: 0;
        padding: 0;
    }


    .navbar-area.style-three .menu>ul>li {
        position: relative;

        display: block;

        margin: 0;
        padding: 0;
    }


    .navbar-area.style-three .menu>ul>li>a {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: center;

        min-height: 82px;

        padding: 0;

        color: var(--taj-text);

        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        text-decoration: none;

        white-space: nowrap;

        transition: color 0.2s ease;
    }


    .navbar-area.style-three .menu>ul>li>a::after {
        position: absolute;

        right: 50%;
        bottom: 18px;

        width: 20px;
        height: 2px;

        content: "";

        border-radius: 999px;

        background-color: var(--taj-orange);

        transform:
            translateX(50%) scaleX(0);

        transform-origin: center;

        transition:
            transform 0.25s ease;
    }


    .navbar-area.style-three .menu>ul>li>a:hover,
    .navbar-area.style-three .menu>ul>li>a.active,
    .navbar-area.style-three .menu>ul>li>a[aria-current="page"] {
        color: var(--taj-navy);
    }


    .navbar-area.style-three .menu>ul>li>a:hover::after,
    .navbar-area.style-three .menu>ul>li>a.active::after,
    .navbar-area.style-three .menu>ul>li>a[aria-current="page"]::after {
        transform:
            translateX(50%) scaleX(1);
    }


    .navbar-area.style-three .taj-header-cta {
        white-space: nowrap;
    }


    .navbar-area.style-three .taj-header-cta .btn-text {
        font-size: 14px;
    }

}


/* =========================================================
   Desktop Submenu (Dropdown)
   1200px+
   ---------------------------------------------------------
   یک بلوک واحد برای هر دو رنج دسکتاپ بالا (نه دو نسخه جدا
   مثل رنگ/سایز لوگو)، چون خودِ رفتار باز/بسته‌شدن زیرمنو در
   این دو رنج فرقی ندارد، فقط سایز لوگو/فونت‌هایی که از قبل
   جدا تعریف شده بودن فرق دارن.
========================================================= */

@media (min-width: 1200px) {

    .navbar-area.style-three .menu > ul > li.menu-item-has-children {
        display: flex;

        align-items: center;

        gap: 2px;
    }


    .navbar-area.style-three .taj-submenu-toggle {
        width: 22px;
        height: 22px;

        color: inherit;

        font-size: 18px;
        line-height: 1;
    }


    .navbar-area.style-three .menu > ul > li .menu-subs {
        position: absolute;

        top: 100%;
        right: 0;

        min-width: 210px;

        margin: 0;
        padding: 10px;

        border-radius: 12px;

        list-style: none;

        background-color: var(--taj-white);

        box-shadow: 0 20px 45px rgba(0, 37, 68, 0.14);

        opacity: 0;
        visibility: hidden;

        transform: translateY(8px);

        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }


    .navbar-area.style-three .menu > ul > li.menu-item-has-children:hover > .menu-subs,
    .navbar-area.style-three .menu > ul > li.menu-item-has-children:focus-within > .menu-subs,
    .navbar-area.style-three .menu > ul > li.menu-item-has-children.taj-submenu-open > .menu-subs {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    .navbar-area.style-three .menu > ul > li .menu-subs li a {
        display: block;

        padding: 11px 14px;

        border-radius: 8px;

        color: var(--taj-text);

        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;

        text-decoration: none;

        transition:
            background-color 0.2s ease,
            color 0.2s ease;
    }


    .navbar-area.style-three .menu > ul > li .menu-subs li a:hover,
    .navbar-area.style-three .menu > ul > li .menu-subs li a.active {
        background-color: var(--taj-tint);
        color: var(--taj-navy);
    }

}


/* =========================================================
   TABLET + MOBILE NAVIGATION
   0px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .cursor,
    .cursor-inner {
        display: none !important;
    }

    /* ---------------------------------------------------------
       Body
    --------------------------------------------------------- */

    body.menu-open {
        overflow: hidden !important;
        touch-action: none;
    }


    /* ---------------------------------------------------------
       Header
    --------------------------------------------------------- */

    .navbar-area.style-three {
        --taj-header-height: 74px;
    }


    .navbar-area.style-three .navbar-wrapper {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        min-height: 74px;

        gap: 16px;
    }


    /* ---------------------------------------------------------
       Logo
    --------------------------------------------------------- */

    .navbar-area.style-three .navbar-brand {
        position: relative !important;

        display: flex !important;

        align-items: center;

        flex: 0 0 auto;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
    }


    .navbar-area.style-three .navbar-brand img {
        width: 135px;
        max-width: 135px;

        height: auto;
    }


    /* ---------------------------------------------------------
       Menu Area
    --------------------------------------------------------- */

    .navbar-area.style-three .menu-area {
        position: static !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto;
    }


    /* =========================================================
       DRAWER
       CLOSED STATE
    ========================================================= */

    .navbar-area.style-three #main-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: min(86vw, 360px) !important;

        max-width: 360px !important;
        min-width: 0 !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 1099 !important;

        overflow: hidden !important;

        direction: rtl;

        background-color: var(--taj-navy) !important;

        box-shadow:
            -20px 0 50px rgba(0, 0, 0, 0.18) !important;

        /*
           IMPORTANT:
           Drawer is completely outside viewport
           while menu is closed.
        */

        transform:
            translate3d(0, 0, 0) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            transform 0.32s ease,
            opacity 0.2s ease,
            visibility 0.32s ease !important;
    }


    /* =========================================================
       DRAWER
       OPEN STATE
    ========================================================= */

    body.menu-open .navbar-area.style-three #main-menu,

    .navbar-area.style-three #main-menu.active {

        transform:
            translate3d(0, 0, 0) !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =========================================================
       OVERLAY
       CLOSED STATE
    ========================================================= */

    .navbar-area.style-three .menu-area>.overlay {

        position: fixed !important;

        inset: 0 !important;

        display: block !important;

        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;

        z-index: 1098 !important;

        margin: 0 !important;
        padding: 0 !important;

        background-color:
            rgba(0, 22, 36, 0.58) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }


    /* =========================================================
       OVERLAY
       OPEN STATE
    ========================================================= */

    body.menu-open .navbar-area.style-three .menu-area>.overlay,

    .navbar-area.style-three .menu-area>.overlay.active {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =========================================================
       Drawer Header
    ========================================================= */

    .navbar-area.style-three .menu-mobile-header {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        height: 64px !important;

        padding: 0 20px !important;
        margin: 0 !important;

        z-index: 2;

        background-color:
            var(--taj-navy) !important;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.14) !important;

        transform: none !important;
    }


    .navbar-area.style-three .menu-mobile-title {

        display: block;

        margin: 0;
        padding: 0;

        color: var(--taj-white);

        font-size: 16px;
        line-height: 1.5;
        font-weight: 700;

        text-align: right;
    }


    /* =========================================================
       Close Button
    ========================================================= */

    .navbar-area.style-three .menu-mobile-close {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px;

        flex: 0 0 44px;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        color: var(--taj-white) !important;

        background: transparent !important;

        font-size: 26px;
        line-height: 1;

        cursor: pointer;

        transform: none !important;
    }


    /* =========================================================
       Menu List
    ========================================================= */

    .navbar-area.style-three #main-menu .menu-section {

        display: block !important;

        width: 100% !important;

        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);

        margin: 0 !important;

        padding:
            12px 22px 32px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        list-style: none !important;

        background: transparent !important;
    }


    .navbar-area.style-three #main-menu .menu-section>li {

        position: relative;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.10) !important;

        background: transparent !important;
    }


    /* =========================================================
       Menu Links
    ========================================================= */

    .navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta) {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding:
            17px 4px !important;

        border: 0 !important;

        color:
            rgba(255, 255, 255, 0.90) !important;

        background: transparent !important;

        font-size: 16px !important;
        line-height: 1.65 !important;
        font-weight: 600 !important;

        text-align: right !important;

        text-decoration: none !important;

        transform: none !important;
    }


    /* Remove template desktop indicator */

    .navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta)::after {

        display: none !important;
        content: none !important;
    }


    .navbar-area.style-three #main-menu .menu-section>li>a:hover,

    .navbar-area.style-three #main-menu .menu-section>li>a.active,

    .navbar-area.style-three #main-menu .menu-section>li>a[aria-current="page"] {

        color: var(--taj-white) !important;
    }


    /* =========================================================
       Submenu (Accordion)
       ---------------------------------------------------------
       روی موبایل/تبلت هاور معنی ندارد؛ بنابراین این‌جا زیرمنو
       به‌جای پاپ‌آپ روی دسکتاپ، یک آکاردئون داخل همان ردیف است:
       با کلیک روی taj-submenu-toggle (کلاس taj-submenu-open در
       megamenu.js اضافه/حذف می‌شود)، فهرست زیرمنو زیر همان آیتم
       باز می‌شود؛ لینک اصلی (درباره تاج/تماس با ما) دست‌نخورده و
       مستقیم به مقصد خودش می‌رود.
    ========================================================= */

    .navbar-area.style-three #main-menu .menu-section>li.menu-item-has-children {

        display: flex !important;

        flex-wrap: wrap !important;
        align-items: center !important;
    }


    .navbar-area.style-three #main-menu .menu-section>li.menu-item-has-children>a:not(.taj-mobile-cta) {

        width: auto !important;

        flex: 1 1 auto !important;
    }


    .navbar-area.style-three #main-menu .taj-submenu-toggle {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;

        flex: 0 0 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255, 255, 255, 0.65) !important;

        font-size: 20px !important;
    }


    .navbar-area.style-three #main-menu .menu-subs {

        flex: 0 0 100% !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        max-height: 0;

        overflow: hidden;

        list-style: none !important;

        position: static !important;

        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 10px;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        transition:
            max-height 0.3s ease,
            padding 0.3s ease;
    }


    .navbar-area.style-three #main-menu li.taj-submenu-open > .menu-subs {

        max-height: 240px;

        padding: 2px 0 12px !important;
    }


    .navbar-area.style-three #main-menu .menu-subs li>a {

        display: block !important;

        width: 100% !important;

        padding: 12px 16px !important;

        color: rgba(255, 255, 255, 0.72) !important;

        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;

        text-align: right !important;
    }


    .navbar-area.style-three #main-menu .menu-subs li>a:hover,
    .navbar-area.style-three #main-menu .menu-subs li>a.active {

        color: var(--taj-white) !important;
    }


    /* =========================================================
       Mobile CTA
    ========================================================= */

    .navbar-area.style-three #main-menu .menu-mobile-cta-item {

        margin-top: 22px !important;

        border-bottom: 0 !important;
    }


    .navbar-area.style-three #main-menu .taj-mobile-cta {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        min-height: 52px;

        margin: 0 !important;

        padding:
            12px 18px !important;

        border:
            1px solid rgba(255, 255, 255, 0.15) !important;

        border-radius: 999px !important;

        background-color:
            var(--taj-white) !important;

        color:
            var(--taj-navy) !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;

        text-align: center !important;

        text-decoration: none !important;
    }


    .navbar-area.style-three #main-menu .taj-mobile-cta:active {

        transform: scale(0.98);
    }


    /* =========================================================
       Header Actions
    ========================================================= */

    .navbar-area.style-three .other-options {

        position: static !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        flex: 0 0 auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    .navbar-area.style-three .other-options .option-item {

        position: static !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /* =========================================================
       Hamburger
    ========================================================= */

    .navbar-area.style-three .menu-mobile-trigger {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px;

        flex: 0 0 44px;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        background: transparent !important;

        transform: none !important;

        cursor: pointer;
    }


    .navbar-area.style-three .menu-mobile-trigger span {

        position: absolute !important;

        right: 8px !important;
        left: auto !important;

        display: block !important;

        width: 28px !important;
        height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 999px;

        background-color:
            var(--taj-navy) !important;

        transform: none;
    }


    .navbar-area.style-three .menu-mobile-trigger span:nth-child(1) {

        top: 13px !important;
    }


    .navbar-area.style-three .menu-mobile-trigger span:nth-child(2),

    .navbar-area.style-three .menu-mobile-trigger span:nth-child(3) {

        top: 21px !important;
    }


    .navbar-area.style-three .menu-mobile-trigger span:nth-child(4) {

        top: 29px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    html {
        scroll-padding-top: 90px;
    }


    #start-conversation {
        scroll-margin-top: 90px;
    }


    .navbar-area.style-three {
        --taj-header-height: 68px;
    }


    .navbar-area.style-three .navbar-wrapper {

        min-height: 68px;
        gap: 12px;
    }


    .navbar-area.style-three .navbar-brand img {

        width: 120px;
        max-width: 120px;
    }


    .navbar-area.style-three #main-menu {

        width: min(90vw, 340px) !important;
        max-width: 340px !important;
    }


    .navbar-area.style-three #main-menu .menu-section {

        padding:
            10px 18px 28px !important;
    }


    .navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta) {

        padding:
            16px 4px !important;

        font-size:
            15px !important;
    }


    .navbar-area.style-three #main-menu .taj-mobile-cta {

        min-height: 50px;

        font-size:
            14px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   360px and below
========================================================= */

@media (max-width: 360px) {

    .navbar-area.style-three .navbar-brand img {

        width: 112px;
        max-width: 112px;
    }


    .navbar-area.style-three #main-menu {

        width: 92vw !important;
        max-width: none !important;
    }

}

/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .skip-link,
    .navbar-area.style-three,
    .navbar-area.style-three.sticky,
    .navbar-area.style-three .menu,
    .navbar-area.style-three .menu-area>.overlay,
    .navbar-area.style-three .menu>ul>li>a,
    .navbar-area.style-three .menu>ul>li>a::after,
    .navbar-area.style-three .taj-mobile-cta,
    .navbar-area.style-three .menu-mobile-trigger span {
        transition: none !important;
        animation: none !important;
    }

}

/* =========================================================
   TAJ Footer Slogan
========================================================= */

.footer-area.style-one .taj-footer-slogan {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: clamp(38px, 3vw, 50px);
    line-height: 1.5;
    font-weight: 600;

    white-space: normal !important;

    overflow-wrap: break-word;
    word-break: normal;

    color: #ffffff;
}


/* Tablet */

@media (max-width: 991px) {

    .footer-area.style-one .taj-footer-slogan {
        font-size: clamp(30px, 4.5vw, 38px);
        line-height: 1.55;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .footer-area.style-one .taj-footer-slogan {
        width: 100%;
        max-width: 100%;

        font-size: clamp(27px, 7.5vw, 32px);
        line-height: 1.6;

        white-space: normal !important;
    }

}


/* Small Mobile */

@media (max-width: 480px) {

    .footer-area.style-one .taj-footer-slogan {
        font-size: clamp(25px, 7vw, 29px);
        line-height: 1.65;
    }

}


/* =========================================================
   TAJ Section Material — سیستم پس‌زمینه و کارت یکپارچه
   همان طیف رنگی صفحه اصلی (home.css) برای استفاده در تمام
   صفحات داخلی سایت، تا حس بصری با صفحه اصلی یکدست شود.
========================================================= */

:root {
    --taj-tint: #eaf1f4;
    --taj-tint-soft: #f7f9fa;
    --taj-accent-navy: #0b4565;
}

.taj-bg-tint {
    background-color: var(--taj-tint);
}

.taj-bg-tint-soft {
    background-color: var(--taj-tint-soft);
}

.taj-bg-white {
    background-color: var(--taj-white);
}

.taj-bg-navy {
    /*
       !important عمدی است: این کلاس یک "کلاس ابزاری بازنویسی‌کننده" است و قرار
       است هر پس‌زمینه/رنگ متن قبلی کامپوننت‌های قدیمی قالب (مثل .sidebar-widget
       یا .faq-contact-box با specificity بالاتر) را در هر جای سایت بدون استثنا
       بازنویسی کند.
    */
    background-color: var(--taj-accent-navy) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.taj-bg-navy .text-title,
.taj-bg-navy h1,
.taj-bg-navy h2,
.taj-bg-navy h3,
.taj-bg-navy h4,
.taj-bg-navy h5,
.taj-bg-navy h6 {
    color: var(--taj-white) !important;
}

.taj-bg-navy a:not(.btn):not(.taj-ui-link) {
    color: var(--taj-white) !important;
}


/* کارت متن روی باند رنگی — مثلا صفحات قوانین و حریم خصوصی */

.taj-content-card {
    padding: 50px;
    border-radius: 20px;
    background-color: var(--taj-white);
    box-shadow: 0 20px 45px rgba(8, 37, 56, 0.06);
}

@media (max-width: 767px) {
    .taj-content-card {
        padding: 30px 22px;
    }
}


/* کارت برجسته دعوت‌به‌اقدام — مثلا بخش «به کمک فوری نیاز دارید؟» */

.taj-highlight-card {
    padding: 36px 38px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .taj-highlight-card {
        padding: 28px 24px;
    }
}


/* کارت «به کمک فوری نیاز دارید؟» — نسخه تقویت‌شده (دور بیست‌وسوم)
   ---------------------------------------------------------
   قبلا این بخش (در صفحه قرار ملاقات) فقط یک taj-highlight-card ساده
   (پس‌زمینه آبی یکدست + padding) با یک h6 و یک لیست خام contact-info
   بود؛ کاربر گفت این بخش نقش مهمی در جذب تماس داره و باید قوی‌تر و
   معتبرتر به‌نظر برسه. برای اینکه کاملا دست‌ساز نباشه و با زبان
   طراحی موجود سایت هماهنگ بمونه، از همون الگوی کارت «روش تاج» در
   صفحه اصلی (taj-diagnosis-method-inner در home.css) استفاده شده:
   یک نوار تاکید نارنجی کوچک بالای کارت + یک برچسب (kicker) نارنجی
   بالای عنوان، با همون رنگ/ضخامت/فاصله دقیق. ردیف‌های تماس (تلفن/
   ایمیل) هم عینا از کامپوننت taj-contact-detail/taj-contact-details
   صفحه تماس بازاستفاده شدن (نه یک نسخه شبیه‌سازی‌شده جدید)، چون
   پس‌زمینه آن کامپوننت (#0b4565) دقیقا با taj-bg-navy یکیه و بدون
   نیاز به هیچ بازنویسی رنگی این‌جا هم درست از آب درمیاد. */

.taj-urgent-card {
    position: relative;
}

.taj-urgent-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 38px;
    width: 52px;
    height: 3px;
    background: #d45c24;
    border-radius: 999px;
}

.taj-urgent-card-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #ff9b68;
    font-size: 12px;
    font-weight: 700;
}

.taj-urgent-card-intro {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .taj-urgent-card::before {
        right: 24px;
    }
}


/* =========================================================
   TAJ Principle Strip — فهرست ردیفی اصول همکاری (دور یازدهم)
   ---------------------------------------------------------
   قبلا این بخش هم (مثل صنایع هدف زیرش) یه گرید ۴تایی از کارت‌های
   جعبه‌ای با سایه بود؛ چون کاربر گفت این سکشن و «صنایع هدف» زیرش
   تقریبا یه‌جور به‌نظر می‌رسن، اینجا کامل به یه فرم دیگه (فهرست
   ردیفی/تحریری با شماره بزرگ کمرنگ، بدون قاب/سایه جعبه‌ای) تبدیل
   شد تا از نظر ریتم بصری کاملا از گرید کارتی صنایع هدف متمایز باشه.
   محتوای هر ۴ اصل دقیقا همون متن قبلی/تاییدشده است، فقط چیدمان و
   ظاهرش عوض شده. */

.taj-principle-strip {
    display: flex;
    flex-direction: column;
}

.taj-principle-strip-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;

    padding: 28px 6px;

    border-bottom: 1px solid rgba(16, 47, 68, 0.1);
}

.taj-principle-strip-item:first-child {
    padding-top: 4px;
}

.taj-principle-strip-item:last-child {
    padding-bottom: 4px;
    border-bottom: 0;
}

.taj-principle-strip-number {
    flex-shrink: 0;

    width: 62px;

    color: rgba(12, 68, 103, 0.14);

    font-family: Arial, sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.taj-principle-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background-color: var(--taj-tint);
    color: var(--taj-accent-navy);

    font-size: 21px;
    line-height: 1;
}

.taj-principle-strip-body {
    min-width: 0;
}

.taj-principle-strip-title {
    margin: 0 0 6px;

    color: #17384e;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.taj-principle-strip-desc {
    margin: 0;

    color: #5f6c75;

    font-size: 14.5px;
    line-height: 1.85;
}

@media (max-width: 767px) {

    .taj-principle-strip-item {
        gap: 16px;
        padding: 22px 2px;
    }

    .taj-principle-strip-number {
        width: 44px;
        font-size: 30px;
    }

    .taj-principle-strip-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

}

@media (max-width: 480px) {

    .taj-principle-strip-item {
        flex-wrap: wrap;
    }

    .taj-principle-strip-body {
        flex-basis: 100%;
        margin-inline-start: 60px;
        margin-top: 8px;
    }

}


/* =========================================================
   TAJ Contact Teaser Card — کارت فراخوان کوتاه تماس صفحه اصلی
   ---------------------------------------------------------
   دور۳۷: خواسته صریح سعیده (عکس چهارم) - این کارت («رفتن به صفحه
   تماس») جذاب‌تر و «قوی‌تر از قبل» بازطراحی بشه. قبلا یک کارت سفید
   کاملا تخت/بی‌نشان بود. الان: (۱) یک نشان دایره‌ای سرمه‌ای شناور
   روی لبه بالای کارت با آیکون گفت‌وگو + همون حلقه ضربان
   (taj-icon-pulse) که برای آیکون‌های دانشنامه ساخته شد - زبان
   بصری یکسان در کل سایت. (۲) سایه لایه‌ای سیستم عمق تازه (به‌جای
   سایه تک‌لایه قبلی). (۳) دو گلوی نرم نارنجی/سرمه‌ای پشت کارت
   (گوشه‌های مخالف) که به‌آرومی شناورن - همون حس «روی صفحه شناور
   است» که در سیستم عمق تصاویر هم به‌کار رفت. توجه: این کلاس فقط
   در نسخه «تیزر» تماس (صفحه اصلی/درباره‌تاج/دانشنامه) استفاده
   می‌شه، نه در خودِ contact.html (اونجا فرم واقعی/taj-contact-layout
   داره) - پس این افزودن‌ها هیچ اثری روی صفحه تماس واقعی ندارن. */

.taj-contact-teaser-card {
    position: relative;
    z-index: 1;

    max-width: 640px;

    margin: 0 auto;
    padding: 64px 50px 42px;

    border-radius: 24px;

    background-color: var(--taj-white);

    box-shadow: var(--taj-shadow-ambient), var(--taj-shadow-contact);
}

.taj-contact-teaser-card::before,
.taj-contact-teaser-card::after {
    content: "";
    position: absolute;
    z-index: -1;

    border-radius: 50%;
    pointer-events: none;
}

.taj-contact-teaser-card::before {
    width: 200px;
    height: 200px;
    top: -60px;
    right: -40px;

    background: radial-gradient(circle, rgba(246, 140, 65, 0.22) 0%, rgba(246, 140, 65, 0) 70%);
    filter: blur(20px);

    animation: moveVertical 10000ms ease-in-out infinite;
}

.taj-contact-teaser-card::after {
    width: 170px;
    height: 170px;
    bottom: -50px;
    left: -30px;

    background: radial-gradient(circle, rgba(11, 69, 101, 0.16) 0%, rgba(11, 69, 101, 0) 70%);
    filter: blur(20px);

    animation: moveHorizontal 12000ms ease-in-out infinite;
    animation-delay: 700ms;
}

.taj-contact-teaser-badge {
    position: absolute;
    top: -32px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border-radius: 50%;
    background: linear-gradient(155deg, #0f5075 0%, #072e46 100%);
    color: var(--taj-white);

    font-size: 26px;
    line-height: 1;

    box-shadow: var(--taj-shadow-lift-contact);
}

.taj-contact-teaser-badge::before {
    content: "";
    position: absolute;
    inset: -8px;

    border-radius: 50%;
    border: 1.5px solid rgba(11, 69, 101, 0.3);

    opacity: 0;
    pointer-events: none;

    animation: taj-icon-pulse 2800ms ease-out infinite;
}

/* دور۴۹: پیدا شد - علت واقعیِ «آیکن بالای کارت تماس نصفه‌ست» که محمدرضا از دور۴۷
   تکرار می‌کرد. taj-contact-teaser-badge با top:-32px عمدا نصفش بیرون از لبه بالای
   taj-contact-teaser-card می‌مونه (طراحی دور۳۷، خواسته صریح سعیده). اما این کارت
   همیشه داخل یک <div class="taj-motion-reveal"> جدا (فقط برای انیمیشن ورود با
   اسکرول) قرار داره؛ taj-motion-reveal خودش overflow:hidden داره (لازم برای جلوگیری
   از سرریز zoom عکس‌ها - بالای همین فایل) و چون این wrapper هیچ padding/فاصله‌ای
   از کارت نداره، دقیقا همون نیمه بالایی نشان رو همیشه می‌بره - نه یک حالت گذرا/میانه
   انیمیشن (دور۴۷ اشتباها این‌طور تشخیص داده بود)، نه فریم اسکرین‌شات (همون اشتباه) و
   نه ربطی به موس (دور۴۸) داشت؛ یک overflow:hidden دائمی و همیشگی بود. رفعش دقیقا
   هم‌الگو با تنها رفع مشابه قبلی در کل کدبیس (taj-knowledge-topic-card.taj-motion-reveal
   پایین‌تر همین فایل): یک کلاس اضافه فقط رو wrapper این سه‌مورد (index.html/about-us.html/
   blog-left-sidebar.html)، overflow رو باز می‌کنه بدون این‌که rule پایه taj-motion-reveal
   (که جاهای دیگه واقعا لازمه) تغییر کنه. */
.taj-motion-reveal.taj-contact-teaser-reveal {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {

    .taj-contact-teaser-card::before,
    .taj-contact-teaser-card::after,
    .taj-contact-teaser-badge::before {
        animation: none;
    }

}

@media (max-width: 575px) {

    .taj-contact-teaser-badge {
        width: 56px;
        height: 56px;
        top: -28px;
        font-size: 22px;
    }

}

.taj-contact-teaser-phone-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin-left: 8px;
    margin-bottom: -6px;

    border-radius: 50%;

    background-color: var(--taj-tint);
    color: var(--taj-accent-navy);

    font-size: 14px;
}

.taj-contact-teaser-or {
    margin-top: 32px;
    padding-top: 24px;

    border-top: 1px solid var(--taj-border);
}

@media (max-width: 575px) {

    /* دور۳۷: پدینگ بالا از ۳۴ به ۵۲ افزایش یافت تا جا برای نشان
       شناور تازه (taj-contact-teaser-badge، حالت موبایل ۵۶px) باز
       بمونه و روی پاراگراف اول کارت نیفته. */
    .taj-contact-teaser-card {
        padding: 52px 24px 30px;
    }

}


/* =========================================================
   TAJ Service Card Number — نشان شماره روی تصویر کارت خدمت
   برای هم‌راستایی زبان بصری با نوار اصول شماره‌دار.
========================================================= */

.taj-service-card-number {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background-color: var(--taj-accent-navy);
    color: var(--taj-white);

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;

    box-shadow: 0 10px 22px rgba(8, 37, 56, 0.3);
}


/* =========================================================
   TAJ Industry Card — کارت صنایع هدف صفحه خدمات
   جایگزین دکمه‌های قرصی‌شکل قبلی؛ همان آیکون‌های صنعت موجود،
   در قالب کارت با یک توضیح کوتاه و صادقانه برای هر صنعت.
========================================================= */

.taj-industry-card {
    display: block;
    height: 100%;

    padding: 34px 26px;

    border-radius: 20px;

    background-color: var(--taj-white);
    box-shadow: 0 15px 35px rgba(8, 37, 56, 0.05);

    text-align: center;
    text-decoration: none;

    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.taj-industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px rgba(8, 37, 56, 0.12);
}

.taj-industry-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 0 auto 22px;

    border-radius: 50%;

    background-color: rgba(204, 85, 1, 0.1);
}

.taj-industry-card-icon img {
    width: 28px;
    height: 28px;
}

.taj-industry-card-title {
    margin: 0 0 10px;

    color: #17384e;

    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
}

.taj-industry-card-desc {
    margin: 0;

    color: #5f6c75;

    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 767px) {

    .taj-industry-card {
        padding: 28px 22px;
    }

}


/* =========================================================
   TAJ Title Color — یکسان‌سازی رنگ تیترها با صفحه اصلی
   تیترهای صفحه اصلی (مثل «راهکارهایی متناسب با منطق هر
   کسب‌وکار») همیشه از رنگ آبی-سرمه‌ای #102f44 استفاده می‌کنند.
   اما کلاس عمومی قالب یعنی .text-title (که در تمام صفحات داخلی
   برای تیترها استفاده می‌شود) به‌جای آن از رنگ --titleColor
   (#393737 — طوسی تیره، نزدیک به مشکی) استفاده می‌کرد. این یعنی
   تیتر صفحاتی مثل خدمات، درباره ما و... با صفحه اصلی هم‌رنگ
   نبودند. این‌جا رنگ .text-title را مستقیماً به همان آبی-سرمه‌ای
   صفحه اصلی تغییر می‌دهیم — بدون دست‌زدن به متغیر --titleColor
   خود قالب، چون آن متغیر برای چیزهای دیگری هم (مثل پس‌زمینه
   دکمه‌ها) استفاده می‌شود و تغییرش می‌توانست جاهای دیگر را هم
   بدون قصد عوض کند.
========================================================= */

:root {
    --taj-title-navy: #102f44;
}

.text-title {
    color: var(--taj-title-navy);
}


/* =========================================================
   TAJ Image Motion System — سیستم موشن تصاویر صفحه اصلی
   این دو کلاس (.taj-motion-parallax و .taj-motion-reveal) قبلاً
   فقط در home.css تعریف شده بودند، یعنی فقط در صفحه اصلی کار
   می‌کردند. چون main.js (که در همه صفحات لود می‌شود) این کلاس‌ها
   را به‌صورت عمومی در کل سایت جستجو و انیمیت می‌کند، منطقی است که
   استایل پایه‌شان هم در فایل مشترک taj-global.css باشد تا هم روی
   تصویر بالای صفحه خدمات (و بقیه صفحات داخلی) درست کار کنند، هم
   جلوی هر مشکل احتمالی لبه/سرریز تصویر را بگیرند.
========================================================= */

.taj-motion-parallax,
.taj-motion-reveal {
    position: relative;
    overflow: hidden;
}

.taj-motion-parallax img,
.taj-motion-reveal img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
}

.taj-motion-reveal img {
    transition: transform 0.65s cubic-bezier(.2, .65, .3, 1);
}

.taj-motion-reveal:hover img {
    transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {

    .taj-motion-parallax img,
    .taj-motion-reveal,
    .taj-motion-reveal img {
        transition: none !important;
        transform: none !important;
    }

}


/* =========================================================
   TAJ Depth System — عمق/سه‌بعدی‌بودن تصاویر (دور۳۷)
   ---------------------------------------------------------
   خواسته صریح سعیده: «عکس‌ها حالت 3D داشته باشن، عمق داشته باشن،
   جذاب‌تر دیده بشن» + تاکید بسته: «دوست دارم 3D بودن عکس‌ها بیشتر
   به چشم بیاد». نکته مهم طراحی: افکت‌های قبلی مثل tilt-img (چرخش
   با موس) یا هاور-فقط فقط وقتی موس روشونه دیده می‌شن - رو موبایل/
   تاچ (که احتمالا بخشی از بازدیدها همونجاست) اصلا دیده نمی‌شن، پس
   نمی‌تونن جواب «بیشتر به چشم بیاد» باشن. اینجا برعکس: سایه‌ لایه‌ای
   (یک سایه محیطی نرم‌وپخش + یک سایه تماسی نزدیک‌تر) به‌صورت پیش‌فرض
   و همیشگی (نه فقط هاور) روی قاب تصاویر گذاشته می‌شه - همون‌چیزی که
   باعث می‌شه یک عکس «روی صفحه شناور» به‌نظر برسه، برای هر بازدیدکننده
   با هر دستگاهی از همون لحظه بارگذاری صفحه دیده می‌شه. هاور (فقط
   دستگاه‌های دارای موس واقعی، با media query hover:hover) یک لایه
   اضافه می‌ده: بلندشدن جزئی+تشدید سایه. رنگ سایه‌ها عمدا سرمه‌ای
   برند (rgba از --taj-navy) نه مشکی خنثی، تا با هویت بصری هماهنگ
   بمونه نه صرفا یک افکت جنریک.
========================================================= */

:root {
    --taj-shadow-ambient: 0 34px 64px -22px rgba(3, 20, 32, 0.28);
    --taj-shadow-contact: 0 8px 18px -6px rgba(3, 20, 32, 0.16);
    --taj-shadow-lift-ambient: 0 44px 80px -20px rgba(3, 20, 32, 0.34);
    --taj-shadow-lift-contact: 0 14px 26px -8px rgba(3, 20, 32, 0.22);
}

/* قاب پایه: سایه لایه‌ای همیشگی - روی wrapper بیرونی (تمیز، بدون
   overflow:hidden یا transform موجود) هر باکس تصویر گذاشته می‌شه،
   نه خود <img> - چون سایه باید بیرون از هر overflow:hidden احتمالی
   دیده بشه، و هرگز با transform های دیگه (پارالاکس/تیلت/کراس‌فید
   هاور) که ممکنه روی خود عکس یا کانتینر داخلی‌تر باشن تداخل نداره
   (سایه از خانواده box-shadow است، هیچ‌وقت transform را لمس نمی‌کند). */
.taj-depth-frame {
    box-shadow: var(--taj-shadow-ambient), var(--taj-shadow-contact);
    transition: box-shadow 0.4s cubic-bezier(.2, .65, .3, 1);
}

/* بلندشدن هاور: فقط دستگاه‌هایی که واقعا موس/imprecise-pointer ندارن
   (یعنی توانایی هاور واقعی دارن) - رو تاچ هیچ‌وقت اجرا نمی‌شه، پس
   هیچ خطر «گیر کردن حالت هاور» بعد لمس روی موبایل وجود نداره. */
@media (hover: hover) and (pointer: fine) {

    .taj-depth-frame.taj-depth-lift {
        transition: box-shadow 0.4s cubic-bezier(.2, .65, .3, 1), transform 0.4s cubic-bezier(.2, .65, .3, 1);
    }

    .taj-depth-frame.taj-depth-lift:hover {
        transform: translateY(-7px);
        box-shadow: var(--taj-shadow-lift-ambient), var(--taj-shadow-lift-contact);
    }

}

@media (prefers-reduced-motion: reduce) {

    .taj-depth-frame.taj-depth-lift {
        transition: box-shadow 0.4s ease;
    }

    .taj-depth-frame.taj-depth-lift:hover {
        transform: none;
    }

}


/* =========================================================
   TAJ Breadcrumb Motion — زنده‌کردن هدر (بردکرامب) صفحات داخلی
   تصویر پس‌زمینه با taj-motion-parallax (بالا) موشن می‌گیرد؛
   خط مسیر (خانه / نام صفحه) هم با یک محو-ظاهرشدن ساده وارد می‌شود
   تا کل ناحیه، هماهنگ با بقیه سایت، ایستا به‌نظر نرسد.
========================================================= */

.taj-breadcrumb-trail {
    animation: taj-fade-up-in 0.9s 0.35s cubic-bezier(.2, .65, .3, 1) both;
}

@keyframes taj-fade-up-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .taj-breadcrumb-trail {
        animation: none;
    }

}

/* =========================================================
   TAJ Footer — کل سیستم استایل فوتر (رفع باگ اصلی: فوتر صفحات داخلی)
   ------------------------------------------------------------
   یافته: تمام ۵۵ قانون CSS مربوط به فوتر (.taj-footer و زیرکلاس‌های آن —
   پس‌زمینه سرمه‌ای، چیدمان گرید سه‌ستونی، دایره‌های آیکون شبکه‌های
   اجتماعی و خبرنامه، فاصله‌گذاری‌ها) تنها در home.css تعریف شده بودند؛
   و home.css فقط در index.html (صفحه اصلی) از طریق بلوک page_css
   بارگذاری می‌شود، نه در base.html به‌صورت سراسری.
   نتیجه: HTML فوتر در همه صفحات داخلی یکسان است (تایید شد)، اما چون
   استایل آن بارگذاری نمی‌شد، به‌صورت خام/بدون‌استایل رندر می‌شد —
   پس‌زمینه شفاف به‌جای سرمه‌ای، چیدمان ستونی از هم پاشیده (grid از
   بین می‌رفت و همه بخش‌ها زیر هم و تمام‌عرض می‌افتادند)، و دایره‌های
   آیکون (خبرنامه/شبکه‌های اجتماعی) بدون قاب گرد و بدون‌اندازه رها
   می‌شدند. همین موضوع، توضیح محتمل «دایره شناور روی محتوا»یی است که
   کاربر در اسکرین‌شات دید — احتمالا یکی از همین آیکون‌های بدون قاب.
   راه‌حل: کل این بلوک عینا از home.css در اینجا (فایل سراسری) هم
   کپی شد تا در همه صفحات بارگذاری شود؛ چیزی از home.css حذف نشد تا
   صفحه اصلی که درست کار می‌کرد دست‌نخورده و بی‌خطر بماند.
========================================================= */

/* =========================================================
   FOOTER
========================================================= */

.taj-footer {
    position: relative;

    padding:
        86px
        0
        0;

    background: #082f48;

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   Main Layout
========================================================= */

.taj-footer-main {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(170px, 0.55fr)
        minmax(280px, 0.85fr);

    gap:
        clamp(55px, 7vw, 105px);

    align-items: start;

    padding-bottom: 62px;
}


/* =========================================================
   Brand
========================================================= */

.taj-footer-brand {
    min-width: 0;
}


.taj-footer-logo {
    display: inline-block;

    margin-bottom: 27px;
}


.taj-footer-logo img {
    display: block;

    width: 150px;
    height: auto;
}


.taj-footer-brand-text {
    max-width: 390px;

    margin:
        0
        0
        25px;

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 13px;

    line-height: 2;
}


/* =========================================================
   Contact
========================================================= */

.taj-footer-contact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin: 0;

    font-style: normal;
}


.taj-footer-contact a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, 0.87);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.7;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-footer-contact a:hover {
    color: #ffffff;
}


.taj-footer-contact i {
    color: #ef9468;

    font-size: 15px;
}


/* =========================================================
   Shared Heading
========================================================= */

.taj-footer-heading {
    display: block;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.8;
}


/* =========================================================
   Navigation
========================================================= */

.taj-footer-nav ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.taj-footer-nav li {
    margin-bottom: 11px;
}


.taj-footer-nav li:last-child {
    margin-bottom: 0;
}


.taj-footer-nav a {
    position: relative;

    display: inline-block;

    padding-bottom: 2px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 13px;
    font-weight: 500;

    line-height: 1.8;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.taj-footer-nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #ef9468;

    transition:
        width 0.3s ease;
}


.taj-footer-nav a:hover {
    color: #ffffff;
}


.taj-footer-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   Knowledge / Newsletter
========================================================= */

.taj-footer-knowledge p {
    max-width: 350px;

    margin:
        0
        0
        22px;

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 13px;

    line-height: 2;
}


.taj-footer-newsletter-status {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    max-width: 100%;

    padding:
        12px
        14px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.055);

    color:
        rgba(255, 255, 255, 0.67);

    font-size: 11.5px;

    line-height: 1.8;
}


.taj-footer-newsletter-icon {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        32px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ef9468;
}


.taj-footer-newsletter-icon i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 14px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


/* =========================================================
   Brand Statement
========================================================= */

.taj-footer-statement {
    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        27px
        0;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.90);

    font-size:
        clamp(16px, 1.25vw, 20px);

    font-weight: 700;

    line-height: 1.8;
}


.taj-footer-statement > span:nth-child(even) {
    flex:
        0
        0
        4px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #d45c24;
}


/* =========================================================
   Footer Bottom
========================================================= */

.taj-footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    min-height: 82px;

    padding:
        18px
        0;
}


.taj-footer-copyright {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.50);

    font-size: 11.5px;

    line-height: 1.8;
}


/* =========================================================
   Social
========================================================= */

.taj-footer-social {
    display: flex;

    align-items: center;

    gap: 8px;
}


.taj-footer-social-link {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        36px;

    width: 36px;
    height: 36px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        rgba(255, 255, 255, 0.82);

    text-decoration: none;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}


.taj-footer-social-link i {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0;

    font-size: 15px;

    line-height: 1;

    transform:
        translate(-50%, -50%);
}


a.taj-footer-social-link:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #0b4565;
}


.taj-footer-social-link.is-disabled {
    opacity: 0.38;

    cursor: default;
}


/* =========================================================
   Focus
========================================================= */

.taj-footer a:focus-visible {
    outline:
        3px solid #d45c24;

    outline-offset: 4px;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 991px) {

    .taj-footer {
        padding-top: 70px;
    }


    .taj-footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            48px
            40px;
    }


    .taj-footer-knowledge {
        grid-column:
            1 / -1;

        max-width: 600px;
    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .taj-footer {
        padding-top: 58px;
    }


    .taj-footer-main {
        grid-template-columns: 1fr;

        gap: 42px;

        padding-bottom: 46px;
    }


    .taj-footer-logo {
        margin-bottom: 22px;
    }


    .taj-footer-logo img {
        width: 135px;
    }


    .taj-footer-brand-text {
        max-width: none;

        font-size: 13px;
    }


    .taj-footer-knowledge {
        grid-column: auto;

        max-width: none;
    }


    .taj-footer-statement {
        flex-wrap: wrap;

        gap:
            8px
            11px;

        padding:
            24px
            0;

        font-size: 15px;
    }


    .taj-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 19px;

        padding:
            23px
            0
            28px;
    }


    .taj-footer-social {
        order: 1;
    }


    .taj-footer-copyright {
        order: 2;
    }

}


/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {

    .taj-footer-statement {
        display: grid;

        grid-template-columns:
            auto
            4px
            auto;

        justify-content: start;

        line-height: 1.9;
    }


    .taj-footer-statement > span:nth-child(5) {
        grid-column:
            1 / -1;
    }


    .taj-footer-statement > span:nth-child(4) {
        display: none;
    }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .taj-footer-contact a,
    .taj-footer-nav a,
    .taj-footer-nav a::after,
    .taj-footer-social-link {
        transition:
            none !important;
    }

}


/* =========================================================
   FOOTER — KNOWLEDGE LINK
========================================================= */

.taj-footer-knowledge-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.055);

    color: rgba(255, 255, 255, 0.78);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


.taj-footer-knowledge-link:hover {
    background: rgba(255, 255, 255, 0.09);

    border-color: rgba(255, 255, 255, 0.18);

    color: #ffffff;
}


.taj-footer-knowledge-link:focus-visible {
    outline: 3px solid #d45c24;
    outline-offset: 4px;
}


/* =========================================================
   TAJ Service Card Image — رفع کشیدگی نامتناسب عکس کارت‌های خدمات
   ------------------------------------------------------------
   یافته: هر کارت خدمت دو <img> روی هم داره (برای جلوه محو/آشکار حین
   هاور که در قالب اصلی طراحی شده بود). عکس اول (که واقعا روی صفحه
   دیده می‌شه) کلاس‌های w-100/h-100 داره ولی نسبت تصویرش (۵۷۰ در ۳۶۶)
   با عرض واقعی قاب کارت (که واکنش‌گراست و معمولا عریض‌تره) یکی
   نیست؛ چون object-fit تعریف نشده بود، مرورگر عکس رو به‌جای برش،
   کشیده بود (تقریبا ۱۲٪ کشیدگی افقی، یعنی صورت/بدن افراد در عکس
   کمی پهن‌تر از واقعیت دیده میشد). دلیل دوم: سلکتور جلوه هاور
   (:first-child) فرض کرده بود این دو عکس اولین و دومین فرزند
   مستقیم قاب هستن، ولی چون یک span شماره («۰۱»/«۰۲»/...) قبل از
   عکس‌ها اضافه شده بود، هیچ‌کدوم واقعا first-child نبودن و جلوه
   هاور اصلا فعال نمی‌شد.
   راه‌حل: هر دو عکس دقیقا با object-fit:cover کادر رو پر می‌کنن
   (بدون کشیدگی، با برش هوشمند مثل بقیه عکس‌های سایت)، قاب با
   aspect-ratio نسبت واقعی عکس‌های فعلی رو حفظ می‌کنه، و سلکتور
   جلوه هاور با first-of-type/nth-of-type اصلاح شد تا با وجود span
   شماره هم درست کار کنه.
========================================================= */

.service-card.style-three .service-img {
    aspect-ratio: 570 / 366;
}

.service-card.style-three .service-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-hover-scale .img-scale img:first-of-type {
    transform: translateX(-50%) scaleX(2);
    opacity: 0;
    filter: blur(10px);
}

.img-hover-scale:hover .img-scale img:first-of-type {
    transform: translateX(0) scaleX(1);
    opacity: 1;
    filter: blur(0);
}

.img-hover-scale:hover .img-scale img:nth-of-type(2) {
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    filter: blur(10px);
}
/* نکته: تا همین‌جا (بالای این خط) آخرین قانون فایل یک آکولاد بسته‌ی
   جاافتاده داشت (به‌جای «}» فایل همون‌جا تموم می‌شد). چون این قانون
   آخرین چیز در کل فایل بود، مرورگرها معمولا با اغماض همون‌جا می‌بستنش
   و تا الان مشکل بصری‌ای ایجاد نکرده بود؛ ولی چون قراره از همین‌جا به
   بعد قانون‌های جدید اضافه بشه، آکولاد جا‌افتاده اصلاح شد تا قانون‌های
   بعدی داخل این سلکتور قدیمی تفسیر نشن.
========================================================= */


/* =========================================================
   صفحه درباره ما — بازطراحی با زبان بصری صفحه اصلی (دور هشتم)
   ---------------------------------------------------------
   کاربر به‌درستی اعتراض کرد که صفحه درباره‌ما با وجود رفع رنگ
   تیترها و اضافه‌شدن انیمیشن روی چند تیتر، هنوز شبیه صفحه اصلی
   نیست. دلیل واقعی این بود که صفحه اصلی سال‌ها پیش با یک سیستم
   طراحی اختصاصی و کاملا جدید بازسازی شده (کلاس‌های taj-principles-*،
   taj-team-*، taj-diagnosis-*، کیکر/تیتر شماره‌دار و…, همه در
   home.css)، ولی صفحه درباره‌ما هیچ‌وقت با همین سیستم بازسازی نشده
   بود و همچنان از کلاس‌های عمومی و قدیمی قالب اولیه (about-area,
   wh-area, feature-item, team-card) استفاده می‌کرد. یعنی مشکل یک
   باگ فنی نبود؛ صفحه واقعا «بازطراحی‌نشده» بود.

   برای حل ریشه‌ای، about-us.html حالا:
   1) فایل home.css رو هم لود می‌کنه (دقیقا مثل صفحه اصلی)، پس
      کلاس‌های taj-principles-* و taj-team-* که پایین‌تر توضیح داده
      می‌شن مستقیما از home.css میان و اینجا از نو تعریف نشدن.
   2) بخش «چرا ما را انتخاب می‌کنید» و بخش «تیم» رو با همون کامپوننت
      شماره‌دار/تیمِ صفحه اصلی بازسازی کرده (چون محتوای هر دو از قبل
      عینا در صفحه اصلی هم هست، هیچ متن جدیدی ساخته نشده).
   3) یک کارت فراخوان تماس کوتاه (taj-contact-section) در پایان صفحه
      اضافه شده، چون قبلا صفحه بعد از بخش تیم بدون هیچ جمع‌بندی یا
      دعوت‌به‌اقدامی تمام می‌شد.

   نکته مهم برای نگهداری: چون taj-principles-grid/taj-principle-item
   و taj-team-* حالا هم در صفحه اصلی و هم در صفحه درباره‌ما استفاده
   می‌شن، هر تغییری در استایل این کلاس‌ها در home.css روی هر دو صفحه
   اثر می‌ذاره. این عمدی و همسو با خواسته «شبیه صفحه اصلی باشه» است،
   ولی اگر بعدا فقط یکی از این دو صفحه نیاز به ظاهر متفاوت داشت، باید
   یک کلاس تغییردهنده (modifier) مخصوص همون صفحه اضافه بشه، نه اینکه
   کلاس مشترک مستقیم عوض بشه.

   دو کلاس زیر (taj-kicker/taj-heading) عمدا با نام عمومی (نه
   مخصوص این صفحه) نوشته شدن: برای بخش‌هایی از هر صفحه داخلی که
   معادل دقیقی در کامپوننت‌های home.css ندارن (مثلا بخش داستان/
   ماموریت همین صفحه درباره‌ما)، ولی باید همون ظاهر کیکر نارنجی+
   تیتر سرمه‌ای صفحه اصلی رو داشته باشن. از دور نهم به بعد (صفحه
   دانشنامه) هم به همین دو کلاس عمومی نیاز بود، برای همین به‌جای
   ساختن یک نسخه مشابه دیگه با نام تازه (که دقیقا همون الگوی
   تکرارشده «رفع با کلاس یک‌بارمصرف» بود که چندبار در این پروژه
   دیده شده)، این دو کلاس همینجا عمومی نگه داشته شدن. نسخه تک‌ستونه
   گرید اصول («.wh-content .taj-principle-item» و مشابهش) و کارت‌های
   ماموریت/دیدگاه واقعا فقط مخصوص همین صفحه‌ان و همون‌جا موندن.
========================================================= */

/* کیکر (برچسب کوچک نارنجی) — دقیقا هم‌ارز با taj-team-kicker و
   بقیه کیکرهای صفحه اصلی، با نامی عمومی که در هر صفحه داخلی قابل
   استفاده‌ست. */
.taj-kicker {
    display: block;
    margin-bottom: 13px;
    color: #b34718;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

/* تیتر بزرگ سرمه‌ای — هم‌خانواده با taj-principles-title و
   taj-team-title از نظر رنگ/وزن/اندازه، برای بخش‌هایی از صفحه
   درباره‌ما که معادل مستقیم در صفحه اصلی ندارن (بخش داستان تاج،
   بخش ماموریت و رویکرد). */
.taj-heading {
    margin: 0;
    color: #102f44;
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 700;
    line-height: 1.55;
}

.taj-heading.text-center {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

/* نسخه تک‌ستونه taj-principles-grid — روی صفحه اصلی این گرید دو
   ستونه، کنار یک ستون جانبی عریض قرار می‌گیره؛ اینجا (بخش «چرا ما
   را انتخاب می‌کنید») همین گرید داخل نصف عرض کانتینر (کنار دو
   عکس wh-img-3/wh-img-4) قرار گرفته، پس دو ستون در این عرض باریک
   می‌شه؛ برای همین اینجا تک‌ستونه می‌مونه و پدینگ آیتم‌ها هم کمی
   جمع‌وجورتر شده. باقی ظاهر (شماره‌های ۰۱ تا ۰۴، خط نارنجی هاور و
   جداکننده‌ها) دقیقا همون چیزیه که در home.css تعریف شده.
   نکته فنی: سلکتور به‌جای «.taj-about-principles-grid» تنها، با
   پیشوند «.wh-content» نوشته شده. چون home.css (که خودش .taj-
   principles-grid رو با دو ستون تعریف کرده) در base.html بعد از
   taj-global.css لود می‌شه، با specificity برابر (هر دو یک کلاس)
   قانون home.css به‌خاطر ترتیب لود برنده می‌شد و ستون‌بندی تک‌ستونه
   اصلا اعمال نمی‌شد؛ افزودن «.wh-content» به سلکتور، specificity
   این قانون رو بالاتر می‌بره تا مستقل از ترتیب لود فایل‌ها درست
   کار کنه. */
.wh-content .taj-principles-grid {
    grid-template-columns: 1fr;
}

.wh-content .taj-principle-item {
    min-height: auto;
    padding: 28px 6px 26px;
}

/* بهبود ظاهری کارت‌های «ماموریت ما» / «دیدگاه ما» — کلاس افزوده
   (modifier) کنار کلاس‌های قبلی about-card، نه جایگزین اون‌ها؛ پس
   هیچ اثری روی جاهای دیگه‌ای که احتمالا از همون کلاس‌های قدیمی
   (about-card / style-one) استفاده می‌کنن نداره.

   نکته فنی مهم: عمدا فقط box-shadow روی هاور تغییر می‌کنه، نه
   transform/translateY. چون همین المان کلاس taj-motion-reveal هم
   داره، انیمیشن GSAP بعد از تمومشدن، یک transform inline (مثلا
   "translate(0px, 0px)") مستقیم روی خود المان ثابت می‌ذاره؛ چون
   استایل inline همیشه روی قانون‌های کلاس (حتی :hover) اولویت داره،
   هر transform که اینجا برای هاور تعریف بشه عملا هیچ‌وقت دیده
   نمی‌شه. برای جابه‌جایی/بالاآمدن روی هاور، باید یک المان داخلی
   جدا (بدون taj-motion-reveal) اضافه بشه و transform روی همون
   اعمال بشه؛ فعلا برای سادگی فقط سایه اضافه می‌شه. */
.taj-about-mission-card {
    transition: box-shadow 0.3s ease;
}

.taj-about-mission-card:hover {
    box-shadow: 0 20px 45px rgba(8, 37, 56, 0.1);
}

@media (max-width: 767px) {
    .taj-heading {
        font-size: clamp(24px, 6vw, 30px);
    }
}


/* =========================================================
   صفحه دانشنامه — بازطراحی با زبان بصری صفحه اصلی (دور نهم)
   ---------------------------------------------------------
   دانشنامه (blog-left-sidebar.html) هم مثل درباره‌ما هیچ‌وقت با
   سیستم taj-* بازسازی نشده بود؛ فقط یک پیام ساده درباره‌ی نبودن
   محتوا فعلا و یک ستون کناری بود. چون این صفحه هنوز هیچ مقاله واقعی منتشرشده‌ای
   نداره (بررسی app.py: مسیر /blog فقط همین قالب رو بدون هیچ داده‌ای
   نمایش می‌ده)، به‌جای ساختن مقاله جعلی، سه پیش‌نمایشی که از قبل و
   عینا در پیش‌نمایش دانشنامه صفحه اصلی هست (همون عکس‌ها/عنوان‌ها)
   اینجا هم نشون داده می‌شه — چیزی اختراع نشده، فقط تکرار محتوای
   از قبل تاییدشده. چون این‌ها واقعا خواندنی نیستن، بر خلاف صفحه
   اصلی نه لینک‌ان نه نشانگر «مطالعه مقاله» دارن. */


/* =========================================================
   صفحه دانشنامه — حذف لحن اعلام‌نبودن محتوا + بج‌های واقعی (دور دهم)
   ---------------------------------------------------------
   کاربر گفت طی چند روز آینده محتوای واقعی این صفحه را کامل می‌کند؛
   بنابراین دیگر نباید صفحه لحنی داشته باشه که نشون بده این بخش
   هنوز آماده/راه‌اندازی نشده — نه در متن قابل‌مشاهده، نه حتی در
   کامنت‌های خود فایل. هر جای این صفحه (تیتر بزرگ، بج روی عکس مقاله شاخص، پاراگراف
   معرفی، meta description/og/twitter، متن ویجت‌های ساید‌بار) که این
   لحن رو داشت با متن قطعی/واقعی جایگزین شد — عمدتا با کپی مستقیم از
   متن تاییدشده صفحه اصلی (کیکر/تیتر/پاراگراف بخش taj-knowledge
   عینا تکرار شدن)، نه متن تازه‌نوشته.

   ضمنا در همین بازبینی مشخص شد بج «آماده‌نبودن محتوا» که دور نهم
   روی دو عکس brief گذاشته بودم، اصلا با الگوی واقعی صفحه اصلی هم‌خوان نبود — صفحه اصلی
   روی کارت‌های brief (بر خلاف کارت شاخص) هیچ بجی روی خود عکس نداره،
   فقط taj-knowledge-category-text زیر عکس دسته را نشون می‌ده. برای
   همین بج image-overlay از دو کارت brief کامل حذف شد (دقیقا مطابق
   صفحه اصلی) و به همراهش، چون دیگه هیچ عنصر absolute داخل
   taj-knowledge-brief-media نمی‌مونه، قانون position:relative
   دور نهم هم که فقط برای جاگیری همون بج اضافه شده بود حذف شد.

   یک افزودنی کوچک تازه: نوار موضوعات (taj-knowledge-topics) زیر
   پاراگراف معرفی — شش موضوعی که از قبل هم در ویجت ساید‌بار همین صفحه
   بودن (چیز تازه‌ای نیست)، فقط برای این‌که خود بخش هدر صفحه از نگاه
   بصری کامل‌تر/محکم‌تر به‌نظر برسه. */
.taj-knowledge-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 22px;
}
.taj-knowledge-topics li {
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(16, 47, 68, 0.06);
    color: #102f44;
    font-size: 13px;
    font-weight: 600;
}

/* =========================================================
   بردکرامب صفحات داخلی — حذف عکس‌های استوک افراد غریبه (دور یازدهم)
   ---------------------------------------------------------
   کاربر صریحا درخواست کرد بنر بردکرامب صفحات داخلی (درباره تاج، خدمات،
   قرار ملاقات، تیم تاج، سوالات متداول، حریم خصوصی، قوانین و مقررات،
   تماس با ما، دانشنامه — هر ۹ صفحه‌ای که breadcrumb-area دارن، همه
   بجز صفحه اصلی) دیگه از عکس استوک افراد غریبه استفاده نکنه. این
   عکس‌ها (taj-breadcrumb-*.jpg) عکس‌های آماده و عمومی از افرادی
   هستن که هیچ ربطی به تیم واقعی تاج ندارن؛ نه فقط دستورالعمل کاربر،
   بلکه از نظر اعتبار برند هم درست نبود چون قابل تشخیصن (سبک عکس‌های
   استوک غربی) و در تضاد با عکس‌های واقعی تیم صفحه تیم تاج قرار
   می‌گیرن. چون نمی‌شه عکس جعلی از افراد واقعی ساخت یا عکس واقعی
   جدیدی بدون داشتنش تهیه کرد، به‌جاش یک پس‌زمینه انتزاعی/برندی طراحی
   شد که از عناصر گرافیکی از قبل تایید‌شده و رنگ‌های رسمی برند تاج
   می‌سازه، نه هیچ عکس یا محتوای جدید اختراعی:
     ۱) گرادیان سرمه‌ای دقیقا هم‌خانواده با --taj-accent-navy (همون
        رنگی که در کارت‌های taj-bg-navy سراسر سایت استفاده می‌شه).
     ۲) بافت خط‌چین‌های شطرنجی assets/img/shape-1.png (دور۴۵: این فایل چون
        بین چند صفحه مشترکه به روت پوشه img منتقل شد) — همون فایلی که
        همین الان هم پس‌زمینه هیرو صفحه اصلی هست؛ هیچ فایل تصویری
        تازه‌ای اضافه نشده.
     ۳) دو لکه نور نرم به رنگ نارنجی برند (--taj-orange) و سفید که
        به‌آرومی جابه‌جا می‌شن (با کلاس‌های انیمیشن از قبل موجود در
        style.css یعنی moveVertical/moveHorizontal — دقیقا همون
        حرکتی که خیلی جاهای دیگه سایت ازش استفاده شده، نه انیمیشن
        تازه).
     ۴) یک آیکون بزرگ و کم‌رنگ (فونت آیکون RemixIcon که از قبل روی
        همه صفحات لود می‌شه، مثلا در فوتر) مخصوص هر صفحه که موضوع
        همون صفحه رو نشون می‌ده (ترازو برای قوانین، سپر برای حریم
        خصوصی، تقویم برای قرار ملاقات و...) — چون فونت آیکون برداریه،
        در هر اندازه‌ای کاملا شفاف می‌مونه و هیچ‌وقت شبیه عکس تار
        دیده نمی‌شه؛ همین چیزیه که این طرح رو از تار/بی‌کیفیت‌شدن در
        اندازه‌های بزرگ در امان نگه می‌داره.
   ساختار قبلی br-bg/container و کلاس‌های position/z-index دست‌نخورده
   موند (فقط <img> جعلی داخل br-bg با این div جایگزین شد) تا رفتار
   لایه‌بندی که همین الان درست کار می‌کنه (متن روی پس‌زمینه) بدون
   ریسک اضافه به‌هم نخوره. تصاویر jpg قدیمی از دیسک پاک نشدن (برای
   احتیاط)، فقط دیگه از هیچ قالبی به‌شون ارجاع داده نمی‌شه. */

/* =========================================================
   عکس واقعی پشت بردکرامب (دور بیست‌وسوم)
   ---------------------------------------------------------
   کاربر درخواست کرد به‌جای پس‌زمینه صرفا انتزاعی بالا، یک عکس
   واقعی و مرتبط با موضوع همون صفحه هم پشت بردکرامب باشه. چون
   این عکس‌ها هنوز از مبینا نرسیدن (مشخصاتشون تازه به فایل اکسل
   اضافه شد)، به‌جای <img> از background-image با یک متغیر CSS
   استفاده شده که هر صفحه مقدارش رو با style="--taj-breadcrumb-photo:
   url('...')" این‌لاین ست می‌کنه. تا وقتی فایل واقعی سر جاش نیست
   (مقدار پیش‌فرض none)، فقط همون گرادیان سرمه‌ای فعلی دیده می‌شه —
   یعنی ظاهر فعلی سایت هیچ تغییری نمی‌کنه. به‌محض اینکه مبینا فایل
   را با همون نام مشخص‌شده در اکسل توی پوشه assets/img/breadcrumb/
   بذاره، همون لحظه به‌صورت خودکار پشت گرادیان نیمه‌شفاف نمایش داده
   می‌شه، بدون نیاز به تغییر کد. گرادیان عمدا کاملا محو نشده (حدود
   ۸۵ تا ۹۲ درصد کدره مونده) تا رنگ برند + خوانایی متن روی بردکرامب
   در هر عکسی که بعدا اضافه بشه حفظ بمونه.
   نکته امنیتی/کیفی: فایل‌های عکس استوک قدیمی (افراد غریبه، همون
   دلیلی که این پس‌زمینه انتزاعی دور یازدهم جایگزینشون کرد) از پوشه
   breadcrumb به زیرپوشه _removed-stock-photos منتقل شدن، دقیقا تا
   این‌جا با همین نام‌های قدیمی به‌اشتباه به‌کار نرن. */

/* دور۳۴: بازطراحی بنیادین - خواسته صریح و مکرر سعیده: «عکس‌ها رو کات نکن،
   من کل عکس میخوام دیده بشه، زوم نکن تو هیچ حالتی». دور۲۳ تا ۳۳ همه یک ایده
   رو تکرار/تنظیم کردن: عکس واقعی رو با background-size:cover پشت تیتر/مسیر
   صفحه جا می‌دادن - و cover دقیقا یعنی «هر بخشی از عکس که تو قاب جا نشه رو
   ببر». چون این عکس‌ها بنری/پانوراما هستن (۵۱۲۰×۱۰۸۶ پیکسل، نسبت ۴٫۷:۱) و
   قاب بردکرامب (به‌خصوص موبایل) هیچ‌وقت دقیقا همون نسبت رو نداره، این یعنی
   همیشه یه بخشی از چپ/راست عکس بریده می‌شد - دقیقا همون چیزی که سعیده هر
   دور گزارش می‌کرد، چون خود مکانیزم اشتباه بود نه فقط تنظیماتش.
   راه‌حل این‌دور: عکس واقعی کامل از پشت تیتر/مسیر برداشته شد. این لایه
   (taj-breadcrumb-brandbg) از این به بعد فقط یک پس‌زمینه برند طراحی‌شده‌ست
   (گرادیان سرمه‌ای + بافت shape-1 + گلوی نور + واترمارک نشان تاج + آیکون
   صفحه) - دقیقا همون ظاهری که قبلا فقط صفحات بدون‌عکس (تیم/دانشنامه) از
   طریق کلاس --fallback می‌گرفتن؛ حالا این ظاهر پیش‌فرض و یکسان همه صفحاته،
   چه عکس واقعی داشته باشن چه نه. نتیجه مستقیم: تیتر/مسیر هیچ‌وقت روی عکس
   نمی‌شینه، پس مشکل خوانایی (نکته۳ سعیده) هم برای همیشه حل شد، بدون تکیه به
   گرادیان/سایه‌متن روی عکس‌های ناشناخته آینده.
   عکس واقعی کجا رفت؟ حذف نشد - به یک نوار عکس مستقل زیر همین بردکرامب منتقل
   شد (کلاس جدید taj-breadcrumb-photo-strip، پایین همین فایل CSS) که یک
   <img> واقعیه با height:auto روی نسبت طبیعی خودِ عکس، یعنی از نظر ریاضی
   امکان کراپ/زوم شدن نداره - کل عکس، همیشه، تضمینی دیده می‌شه. */
.taj-breadcrumb-brandbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0b4565;
    background-image:
        linear-gradient(135deg, rgba(6, 20, 34, 0.52) 0%, rgba(6, 20, 34, 0.32) 55%, rgba(6, 20, 34, 0.46) 100%);
}

.taj-breadcrumb-brandbg::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/shape-1.png');
    background-repeat: repeat;
    background-position: center;
    opacity: 0.14;
}

/* دور۳۲: خواسته صریح سعیده - همین بردکرامب انتزاعی (بالا) رو هم "جذاب نیست"
   می‌دونه. چون نه عکس واقعی برند تازه‌ای در دسترسه (بدون تکرار همون عکس‌های
   استوک افراد غریبه‌ای که دور یازدهم عمدا حذف شدن - نگاه کن به کامنت اون
   دور، هنوز هیچ جایگزین برند-درستی توی پروژه نیست) و نه امکان تولید عکس
   تازه هست، به‌جای تکرار تلاش دور۴۶ (فقط کوچیک/پررنگ‌ترکردن همون آیکون
   محو)، این‌بار یک عنصر برندی که از قبل صددرصد تایید شده اضافه شد: خود
   نشان هندسی لوگوی تاج (فقط بخش نشان، بدون حروف TAJ) به‌صورت SVG وکتور
   inline (خطوط دقیقا از همون taj-logo.svg گرفته شده، رنگ سفید تک‌رنگ چون
   در این مقیاس/شفافیت پایین، حفظ دورنگ نارنجی/سرمه‌ای اصلی کدر/کثیف دیده
   می‌شد) به‌عنوان واترمارک بزرگ گوشه پایین-چپ. زاویه اصلی نشان (که خودش
   یک برش مورب طراحی‌شده است) دست‌نخورده موند - یعنی چرخش اضافه لازم نبود؛
   با شبکه مورب بافت shape-1.png (بالا) هم‌جهت/هماهنگ دیده می‌شه، نه در
   تضاد باهاش. سه مقدار opacity (0.07/0.10/0.13) و دو حالت چرخش/بدون‌چرخش
   قبل از انتخاب این نسخه به‌صورت بصری کنار هم مقایسه شدن؛ 0.09 بدون چرخش
   با فاصله زیاد بهترین تعادل بین «قابل‌توجه بودن» و «مزاحم متن نشدن» بود. */
/* دور۳۴: چون از این‌دور به بعد taj-breadcrumb-brandbg دیگه هیچ‌وقت عکس واقعی
   پشتش نداره (بالا)، این واترمارک همیشه بخشی از طرح برندیه - دیگه لازم نیست
   بین دو حالت (عکس‌دار/بی‌عکس) سوییچ کنه. کلاس --fallback (پایین) از این به
   بعد یک نام مستعار بی‌اثر/سازگار با نسخه‌های قبلیه، چون مقدارش با پیش‌فرض
   یکیه. */
.taj-breadcrumb-brandbg::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -140px;
    bottom: -220px;
    width: 600px;
    height: 600px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjcgMTYgMTMyIDEzMCIgZmlsbD0iI2ZmZmZmZiI+CjxwYXRoIGQ9Ik05OC42OCwxOS4yM3MwLS4wMSwwLS4wMmMwLDAsMCwwLDAsMCwwLDAsMCwwLDAsMCwwLS4wMiwwLS4wMywwLS4wNSwwLDAsMC0uMDEuMDEtLjAxLDAsMCwwLDAsMCwwaDBjMC0xLjA1LDAtMi4wOS0uMDEtMy4xMy0yNS44NC4wNi01MS42OC4xMy03Ny41My4xOS0xLjU3LjI1LTcuMDEsMS4zMi0xMC44LDYuMjQtMS42NywyLjE2LTIuNDcsNC4zNi0yLjg4LDUuOS0uMDYsMTQuODQtLjEyLDI5LjY3LS4xOCw0NC41MSwzMC40Ni0xNy44Nyw2MC45My0zNS43NCw5MS4zOS01My42MSwwLDAsMCwwLDAsMFoiLz4KPHBhdGggZD0iTTMyLjkxLDEzMC44NWMtLjQxLjI0LTEuMDIuNTQtMS44Ljc2LTMuMTYuODctNS43OC0uNjQtNi4wNS0uODEtMS44NC0xLjEtMi42OS0yLjY2LTIuODgtMy4wMy0uMjMtLjQ0LS45Mi0xLjg3LS44Ni0zLjgzLjAyLS42NC4xNS0yLjUyLDEuNC00LjI2LjY5LS45NiwxLjQ2LTEuNTEsMS44LTEuNzQsMi4wOS0xLjQ0LDkuODQtNi4xLDIwLjUxLTEyLjI4LS4wMS0uMDMtLjAyLS4wNi0uMDMtLjEtLjAyLS4wMi0uMDMtLjA0LS4wNC0uMDdoLS4wM2MtNS42MS04LjE0LTExLjIyLTE2LjI4LTE2LjgzLTI0LjQyLTUuODgsMy41Ny0xMS43Niw3LjE1LTE3LjY1LDEwLjcyLS41LjMyLTEuNC45OC0yLjEzLDIuMTYtLjc3LDEuMjUtLjk1LDIuNDQtMSwzLjA0LjA0LDExLjczLjA5LDIzLjQ2LjEzLDM1LjE5LjQ1LDEuOTUsMS40Niw0LjkzLDMuODksNy41OSwxLjUzLDEuNjcsMy4wNiwyLjYxLDQuMTMsMy4yNSwyLjg5LDEuNzQsNS42MSwyLjQ1LDcuNDMsMi43OCwyNS4zOC4wMyw1MC43Ny4wNSw3Ni4xNS4wOHYtNTMuOTdjLTIyLjA0LDEyLjk4LTQ0LjA5LDI1Ljk3LTY2LjEzLDM4Ljk1WiIvPgo8cGF0aCBkPSJNMTM5LjA3LDUwLjg3aC0uMDJjLjAxLTExLjUyLjAyLTIzLjA1LjA0LTM0LjU4LTI1LjYsMTUuMDctNTEuMiwzMC4xNC03Ni44LDQ1LjIxLDUuOCw4LjI0LDExLjYsMTYuNDksMTcuNCwyNC43MywxOS43OS0xMS43NSwzOS41OC0yMy41LDU5LjM3LTM1LjI1LDAtLjA0LDAtLjA4LjAxLS4xMVoiLz4KPHBhdGggZD0iTTU3LjksNjMuNTdzLS4wNC4wMi0uMDYuMDNjLTguMzcsNC45Mi0xNi43Myw5Ljg1LTI1LjEsMTQuNzcsNS43NSw4LjE5LDExLjUsMTYuMzksMTcuMjUsMjQuNTgsOC41LTQuOTEsMTctOS44MSwyNS41MS0xNC43Mi01Ljg2LTguMjItMTEuNzMtMTYuNDQtMTcuNTktMjQuNjZaIi8+CjxwYXRoIGQ9Ik0xMTIuMzIsMTE2LjYyYzguOTMuMDQsMTcuODYuMDgsMjYuNzkuMTEtLjAxLTguMjItLjAyLTE2LjQ0LS4wNC0yNC42NS04LjkyLS4wMy0xNy44NC0uMDUtMjYuNzYtLjA4djI0LjYyWiIvPgo8cGF0aCBkPSJNMTM5LjAzLDEyMS4yM2MtOC44OS0uMDEtMTcuNzgtLjAzLTI2LjY3LS4wNHYyNC41NGM4LjkzLjA1LDE3Ljg2LjEsMjYuNzkuMTUtLjA0LTguMjItLjA3LTE2LjQzLS4xMS0yNC42NSwwLDAsMCwwLS4wMSwwWiIvPgo8L3N2Zz4K');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* دور۴۶: چون گرادیان بالا سبک‌تر شد (خواسته سعیده)، دیگه نمی‌شه صرفا به
   تیرگی گرادیان برای خوانایی تیتر/مسیر سفید روی عکس‌های روشن تکیه کرد؛
   یه سایه ملایم مستقل به متن اضافه شد تا چه عکس واقعی پشتش باشه چه فقط
   navy یکدست، تیتر و مسیر همیشه واضح بمونن (دقیقا همون نکته‌ای که سعیده
   در مورد ۱۳ به آن اشاره کرد: «اگر نیازه رنگ تیتر و متن عوض بشه»). */
.breadcrumb-area.style-one h1,
.breadcrumb-area.style-one .taj-breadcrumb-trail li,
.breadcrumb-area.style-one .taj-breadcrumb-trail li a {
    /* دور۳۱: چون گرادیان پس‌زمینه (بالا) تقریبا حذف شد، این سایه‌متن تقویت شد
       (یک لایه نزدیک/تیز + یک لایه گسترده/نرم) تا خوانایی متن سفید مستقل از
       گرادیان و روی هر عکسی تضمین بشه. */
    text-shadow: 0 1px 3px rgba(2, 16, 26, 0.55), 0 4px 20px rgba(2, 16, 26, 0.5);
}

.taj-breadcrumb-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.taj-breadcrumb-glow-1 {
    width: 380px;
    height: 380px;
    top: -140px;
    right: -60px;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.55) 0%, rgba(246, 140, 65, 0) 70%);
    animation: moveVertical 9000ms ease-in-out infinite;
}

.taj-breadcrumb-glow-2 {
    width: 320px;
    height: 320px;
    bottom: -160px;
    left: 10%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    animation: moveHorizontal 11000ms ease-in-out infinite;
}

/* دور۴۶: حلقه نازک نارنجی دور آیکون محو (فقط ۰٫۱۳ شفافیت) اضافه شده بود.
   دور۳۲: سعیده صریح دوباره گفت این بردکرامب‌ها جذاب نیستن - یعنی رفع دور۴۶
   کافی نبود. مشکل اصلی: یک حلقه تقریبا نامرئی روی زمینه یکدست، هنوز شبیه
   «جای خالی منتظر عکس واقعی» به‌نظر می‌رسید، نه یک المان طراحی‌شده. به‌جای
   تنظیم جزئی همون سبک، کامل عوض شد: حالا یک تراشه (chip) توپر با همون
   گرادیان سرمه‌ای و شعاع‌گوشه نامتقارنِ برند تاج (دقیقا زبان بصری‌ای که
   جاهای دیگه سایت هم استفاده می‌شه، مثل .taj-knowledge-brief-media و
   .taj-contact-map: گوشه بزرگ/بزرگ/کوچیک/بزرگ) - آیکون سفید توپر روی اون
   می‌شینه، دقیقا مثل تراشه‌های آیکون سکشن دانشنامه (taj-knowledge-brief-
   media--icon). چون این تراشه حالا خودش یک عنصر برندیِ محکمه (نه یک شبح
   محو)، انیمیشن شناور قبلی (moveVertical) هم حذف شد - ثابت/مطمئن به‌نظر
   می‌رسه، هماهنگ با واترمارک ثابت نشان تاج (بالا). */
.taj-breadcrumb-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    border-radius: 26px 26px 10px 26px;
    background: linear-gradient(155deg, #1a5f88 0%, #0a3f60 100%);
    box-shadow: 0 18px 40px rgba(3, 20, 32, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 52px;
    line-height: 1;
    color: #ffffff;
}

@media (max-width: 991px) {
    .taj-breadcrumb-icon {
        width: 100px;
        height: 100px;
        border-radius: 22px 22px 8px 22px;
        font-size: 44px;
    }
    .taj-breadcrumb-brandbg::after {
        width: 420px;
        height: 420px;
        left: -100px;
        bottom: -150px;
    }
    .taj-breadcrumb-glow-1 {
        width: 260px;
        height: 260px;
    }
    .taj-breadcrumb-glow-2 {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 575px) {
    .taj-breadcrumb-icon {
        width: 76px;
        height: 76px;
        border-radius: 18px 18px 6px 18px;
        font-size: 34px;
        left: 20px;
    }
    .taj-breadcrumb-brandbg::after {
        width: 260px;
        height: 260px;
        left: -60px;
        bottom: -80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-breadcrumb-glow-1,
    .taj-breadcrumb-glow-2 {
        animation: none !important;
    }
}

/* =========================================================
   بردکرامب یکپارچه: کپشن روی لبه پایین عکس (دور۳۵)
   ---------------------------------------------------------
   خواسته صریح سعیده: «اول یه کادر آبی بعد عکسو انداختی - اصلا دوست
   نداشتم». راه‌حل دور۳۴ (پنل متن جدا + نوار عکس جدا زیرش) مشکل
   کراپ/خوانایی رو حل کرد ولی به دو بلوک جدا و نامرتبط تبدیل شد.
   این‌دور: عکس همیشه اول/رهبر تصویریه (همون <img height:auto>
   ضدکراپ دور۳۴، دست‌نخورده)؛ کپشن (آیکون+تیتر+مسیر) دیگه جعبه کامل
   جدا نیست - با position:absolute روی لبه پایین خودِ عکس می‌شینه و
   با یک گرادیان بالا→پایین (شفاف→سرمه‌ای) به‌آرومی توش محو می‌شه، یعنی
   یک ترکیب بصری پیوسته، نه دو مستطیل روی‌هم. min-height روی
   .taj-breadcrumb-unified صرفا شبکه‌ایمنه: اگه عکس (به‌خاطر نسبت خیلی
   پانورامای ۴٫۷:۱) تو عرض خیلی کم آنقدر کوتاه بشه که کپشن جا نشه،
   کپشن با پس‌زمینه سرمه‌ای خودش (نه parent) بالاتر از عکس هم به‌طور
   یکدست ادامه پیدا می‌کنه - هیچ‌وقت بریده/خالی به‌نظر نمی‌رسه.
   فقط روی ۷صفحه‌ای که واقعا عکس دارن اعمال می‌شه (کلاس
   taj-breadcrumb-unified روی .breadcrumb-area)؛ صفحات بدون عکس
   (تیم‌تاج/دانشنامه) هنوز از طرح brandbg تمام‌قد قدیمی (با واترمارک)
   استفاده می‌کنن - دست‌نخورده موند. */
.taj-breadcrumb-unified {
    padding: 0 !important;
    background-attachment: initial;
    background-color: #0b4565;
    min-height: 340px;
    overflow: hidden;
}

.taj-breadcrumb-unified .taj-breadcrumb-photo-strip {
    position: relative;
    z-index: 1;
}

.taj-breadcrumb-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 44px 0 24px;
}

/* توی این چیدمان تازه، brandbg دیگه یک جعبه کامل‌قد نیست - فقط پس‌زمینه
   خودِ کپشنه، پس گرادیانش باید از شفاف (تا عکس پشتش دیده بشه) به سرمه‌ای
   توپر (پایین کپشن) بره، نه گرادیان یکدست قدیمی. واترمارک بزرگ نشان
   (::after) هم فقط برای پرکردن جعبه خالی بی‌عکس طراحی شده بود؛ اینجا
   عکس واقعی پشت هست، لازم نیست. */
/* دور۳۶: خواسته صریح سعیده - «گرادیان از پایین قشنگ شده، فقط نیار روی عکس یا
   کمرنگ‌ترش کن». اندازه‌گیری واقعی (Playwright bounding-box) نشون داد روی
   مانیتورهای بزرگ (≥۱۶۰۰px، دقیقا جایی که ویدیوی سعیده گرفته شده - ۱۹۲۰px)
   عکس طبیعتا از min-height بلندتره، پس کپشن واقعا ~۶۱٪ ارتفاع عکس رو روی هم
   می‌گرفت (نه فقط زیرش می‌شست، دقیقا شکایت سعیده). زیر ۱۶۰۰px عکس خودش کوتاه‌تر
   از min-height است، کپشن زیرِ عکس (تو فضای خالی navy container) می‌شینه، صفر
   همپوشانی - آسیبی نداشت. رفع: (۱) padding کپشن کم شد (پایین) تا فوت‌پرینتش
   کوچیک‌تر بشه، (۲) همین‌جا گرادیان به‌جای شفاف‌تا۴۲٪ حالا شفاف‌تا۴۰٪-از-خودِ-کپشن
   می‌مونه و فقط نزدیک لبه پایین (بعد۶۸٪) تیره می‌شه - یعنی نسبت واقعی «عکس
   دیده‌می‌شه به کپشن روش» به‌طور محسوس بهتر شد، بدون برگشت به دو بلوک جدا
   (که خودش نکته۱ سعیده بود). */
.taj-breadcrumb-caption .taj-breadcrumb-brandbg {
    background-color: transparent;
    background-image: linear-gradient(180deg,
            rgba(6, 20, 34, 0) 0%,
            rgba(6, 20, 34, 0) 40%,
            rgba(6, 20, 34, 0.5) 68%,
            rgba(7, 33, 51, 0.9) 86%,
            #0b4565 100%);
}

.taj-breadcrumb-caption .taj-breadcrumb-brandbg::after {
    display: none;
}

@media (max-width: 991px) {
    .taj-breadcrumb-unified {
        min-height: 300px;
    }
    .taj-breadcrumb-caption {
        padding: 56px 0 28px;
    }
}

@media (max-width: 767px) {
    .taj-breadcrumb-unified {
        min-height: 230px;
    }
    .taj-breadcrumb-caption {
        padding: 34px 0 20px;
    }
}

@media (max-width: 575px) {
    .taj-breadcrumb-unified {
        min-height: 200px;
    }
    .taj-breadcrumb-caption {
        padding: 26px 0 16px;
    }
}

/* =========================================================
   نوار عکس بردکرامب (دور۳۴)
   ---------------------------------------------------------
   جایگزین عکس-پشت-متنِ حذف‌شده (بالا). این یک <img> واقعیه، نه
   background-image؛ عمدا هیچ object-fit/aspect-ratio ثابتی روش
   ست نشده - height:auto یعنی مرورگر همیشه دقیقا نسبت طبیعی خودِ
   فایل رو رندر می‌کنه، در هر عرض صفحه‌ای. از نظر ریاضی هیچ پیکسلی
   از عکس نه کراپ می‌شه نه زوم - این تضمین همون خواسته مستقیم
   سعیده‌ست («کل عکس دیده بشه، زوم نکن»)، نه یک تنظیم تقریبی.
   background-color پس‌زمینه navy (هم‌رنگ برندبگ بالا) صرفا برای
   یک فریم لحظه‌ای بین لود شدن تصویر و رندر کامل (احتمال بسیار کم
   با width/height صریح روی <img>، ولی رایگانه). */
.taj-breadcrumb-photo-strip {
    width: 100%;
    line-height: 0;
    background-color: #0b4565;
}

.taj-breadcrumb-photo-strip img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   فهرست سریع بخش‌ها در صفحات قوانین/حریم خصوصی (دور یازدهم)
   ---------------------------------------------------------
   صفحات terms-conditions.html و privacy-policy.html قبلا فقط یک
   ستون طولانی از پاراگراف‌های خام بودن (۱۰ و ۱۲ بخش پشت هم، هیچ
   کمکی برای پیدا کردن بخش موردنظر). چون کاربر این صفحات رو دقیقا
   نمونه صفحاتی معرفی کرد که باید «با دقت بیشتر، طبق روال بقیه
   صفحات و با همون جذابیت» بازطراحی بشن، یک ناوبری سریع (فهرست
   کلیک‌شدنی بخش‌ها، با آیکون RemixIcon مخصوص هر بخش) اضافه شد که
   با لینک لنگر (#id) مستقیم به همون h5 می‌پره. این محتوای تازه‌ای
   نیست — فقط همون تیترهای h5 که از قبل در متن واقعی این دو صفحه
   بودن، به‌صورت یک فهرست قابل‌کلیک در بالای صفحه هم تکرار شدن؛ هیچ
   عدد/آمار/ادعای تازه‌ای اضافه نشده. scroll-margin-top روی h5 هم
   اضافه شد تا هدر sticky موقع پرش با لینک، تیتر مقصد رو نپوشونه
   (ارتفاع هدر با اندازه‌گیری واقعی Playwright: ۹۳px دسکتاپ، ۶۹px
   موبایل — عدد امن‌تر گذاشته شد). */

.taj-legal-quicknav {
    display: block;
    margin: 0 0 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(9, 68, 104, 0.1);
}

.taj-legal-quicknav-label {
    display: block;
    margin-bottom: 14px;
    color: #b34718;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}

.taj-legal-quicknav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.taj-legal-quicknav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: var(--taj-tint);
    color: var(--titleColor);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    transition: background-color 220ms ease, transform 220ms ease, color 220ms ease;
}

.taj-legal-quicknav-item i {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--taj-accent-navy);
    transition: color 220ms ease;
}

.taj-legal-quicknav-item:hover,
.taj-legal-quicknav-item:focus-visible {
    background-color: var(--taj-accent-navy);
    color: #ffffff;
    transform: translateY(-2px);
}

.taj-legal-quicknav-item:hover i,
.taj-legal-quicknav-item:focus-visible i {
    color: #ffffff;
}

.terms-wrap .single-para h5[id] {
    scroll-margin-top: 115px;
}

@media (max-width: 991px) {
    .taj-legal-quicknav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .taj-legal-quicknav-grid {
        grid-template-columns: 1fr;
    }
    .terms-wrap .single-para h5[id] {
        scroll-margin-top: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-legal-quicknav-item {
        transition: none !important;
    }
}

/* =========================================================
   صفحه قرار ملاقات — تصویری کردن روش‌ها/چک‌لیست (دور یازدهم)
   ---------------------------------------------------------
   appointment.html هم مثل قوانین/حریم‌خصوصی خیلی ساده و تک‌ستونه
   بود؛ همون متن قبلی (نه محتوای تازه) به دو شکل بصری تبدیل شد:
   ۱) جمله «جلسات به‌صورت حضوری، آنلاین یا تلفنی» که قبلا یک خط
      متن بود، الان سه آیکون کوچک (حضوری/آنلاین/تلفنی) کنار هم.
   ۲) چک‌لیست آماده‌سازی که قبلا فقط تیک ساده کنار متن بود، الان
      گرید دو‌ستونه از کارت‌های آیکون‌دار، هم‌خانواده با ظاهر کارت‌های
      taj-legal-quicknav-item بالا (همون تینت/گردی/فاصله)، منتها با
      نشان دایره‌ای پررنگ‌تر چون این‌جا فقط ۴ آیتم داریم نه ۱۰-۱۲ تا. */

.taj-appt-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.taj-appt-format-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background-color: var(--taj-tint);
    color: var(--titleColor);
    font-size: 14px;
    font-weight: 600;
}

.taj-appt-format-item i {
    font-size: 17px;
    color: var(--taj-accent-navy);
}

.taj-appt-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.taj-appt-checklist-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background-color: var(--taj-tint-soft);
    border: 1px solid rgba(9, 68, 104, 0.08);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--titleColor);
}

.taj-appt-checklist-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--taj-accent-navy);
}

.taj-appt-checklist-icon i {
    font-size: 19px;
    color: #ffffff;
}

@media (max-width: 575px) {
    .taj-appt-checklist-grid {
        grid-template-columns: 1fr;
    }
    .taj-appt-format-item {
        font-size: 13px;
        padding: 9px 16px;
    }
}

/* =========================================================
   آیکون موضوعی کنار سوالات صفحه سوالات متداول (دور یازدهم)
   ---------------------------------------------------------
   هیچ سوال/جواب تازه‌ای اضافه نشده (این صفحه از قبل با آکاردئون +
   عکس واقعی + جعبه تماس نسبتا خوب طراحی شده بود)؛ فقط کنار متن هر
   ۵ سوال از قبل موجود یک آیکون کوچک مرتبط با موضوع همون سوال اضافه
   شد تا از نظر بصری با بقیه سایت (که پر از آیکونه) هماهنگ‌تر باشه. */

.taj-faq-icon {
    flex-shrink: 0;
    margin-inline-end: 12px;
    font-size: 19px;
    color: var(--taj-orange);
}

/* =========================================================
   عکس بخش «ماموریت و رویکرد ما» درباره‌تاج (دور یازدهم)
   ---------------------------------------------------------
   کاربر صریحا این باکس (about-img-wrap navy توی سکشن ماموریت و
   رویکرد ما، همونی که پس‌زمینه‌اش لوگوی تاج بود) رو دوست نداشت.
   بررسی فایل واقعی (taj-about-mission-cutout.png) نشون داد این یه
   «کات‌اوت» عکس استوک از ۵ نفر غریبه‌ست که هیچ ربطی به تیم واقعی
   تاج نداره (با عکس‌های واقعی صفحه تیم تاج هم مو نمی‌زنه) — دقیقا
   همون مشکل بردکرامب‌ها. چون نمی‌شه عکس واقعی جدید از تیم ساخت،
   به‌جای عکس افراد، جمله همین بخش («تیمی متشکل از حسابداران رسمی،
   متخصصان مالیات و کارشناسان حسابرسی») به ۳ کارت شیشه‌ای/آیکون‌دار
   تبدیل شد — دقیقا همون ۳ تخصصی که متن از قبل بهشون اشاره می‌کنه؛
   هیچ ادعای تازه‌ای نیست. ظاهر این کارت‌ها (شیشه‌ای/frosted روی
   navy) و بافت گرید ریز پس‌زمینه از همون زبان بصری بردکرامب‌های تازه
   طراحی‌شده استفاده می‌کنه تا کل سایت یک‌دست به‌نظر برسه.

   اصلاحیه (همون دور، بعد از بازخورد مستقیم سعیده): واترمارک
   taj-about-watermark.png اولش «همونطور که بود نگه داشته شد چون
   مشکلی نداشت» — این تشخیص اشتباه بود. اون فایل، خودِ لوگوی تاج
   چرخیده به‌صورت عمودی (۹۰درجه) در قابی فقط ۴۸×۱۱۳ پیکسله؛ توی
   گوشه یک کارت navy که از قبل بافت پس‌زمینه + گلوی نارنجی متحرک +
   ۳کارت شیشه‌ای داره، یک لوگوی کوچیک و عمودی اضافه، به‌جای اینکه
   جذابیت اضافه کنه، فقط بی‌ربط/عجیب به‌نظر می‌رسید (دقیقا همین رو
   سعیده مستقیم گزارش کرد). چون این تصویر جای دیگه‌ای در کل سایت
   استفاده نمی‌شه، به‌جای بازطراحی، کامل از HTML حذف شد — کارت با
   همون بافت+گلو+۳بج موجود، بدون این لایه اضافه، تمیزتر به‌نظر
   می‌رسه. */

.taj-mission-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 35px 40px;
    overflow: hidden;
}

.taj-mission-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/shape-1.png');
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.taj-mission-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    top: -60px;
    left: -60px;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.45) 0%, rgba(246, 140, 65, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    animation: moveHorizontal 10000ms ease-in-out infinite;
}

/* =========================================================
   گلوی دوم + حلقه تزئینی کارت ماموریت (دور بیست‌ودوم)
   ---------------------------------------------------------
   بعد از حذف واترمارک، سعیده گفت سمت راست/پایین این کارت
   navy خیلی ساده و خالی به‌نظر می‌رسه. چون بج‌های شناور همه از
   لبه چپ شروع و پله‌ای به چپ می‌رن (margin-inline-start رو به
   افزایش)، دقیقا نیمه راست/پایین کارت خالی‌ترین قسمت بود —
   همون‌جایی که واترمارک قبلا (به‌شکل بد) پر می‌کرد. راه‌حل:
   یک گلوی نارنجی دوم (کوچک‌تر و کم‌رنگ‌تر از گلوی اول، تا با
   هم رقابت نکنن) در گوشه پایین‌راست + یک حلقه نازک تزئینی با
   چرخش خیلی آهسته — هر دو انتزاعی محض، نه یک شیء/لوگو، دقیقا
   همون زبان بصری «گلوی متحرک» که از قبل همین کارت داشت. */

.taj-mission-glow-2 {
    top: auto;
    left: auto;
    right: -40px;
    bottom: -80px;
    width: 230px;
    height: 230px;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.42) 0%, rgba(246, 140, 65, 0) 70%);
    animation-name: moveVertical;
    animation-duration: 13000ms;
    animation-delay: 900ms;
}

.taj-mission-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -50px;
    bottom: -50px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: rotation 50000ms linear infinite;
}

.taj-mission-ring::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.taj-mission-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    max-width: 340px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    animation: moveVertical 6000ms ease-in-out infinite;
}

.taj-mission-badge-2 {
    margin-inline-start: 34px;
    animation-delay: 700ms;
}

.taj-mission-badge-3 {
    margin-inline-start: 68px;
    animation-delay: 1400ms;
}

.taj-mission-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--taj-orange);
}

.taj-mission-badge-icon i {
    font-size: 18px;
    color: #ffffff;
}

.taj-mission-badge span {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .taj-mission-badge-2 {
        margin-inline-start: 18px;
    }
    .taj-mission-badge-3 {
        margin-inline-start: 34px;
    }
}

@media (max-width: 420px) {
    .taj-mission-visual {
        padding-inline: 20px;
    }
    .taj-mission-badge {
        max-width: 100%;
    }
    .taj-mission-badge-2,
    .taj-mission-badge-3 {
        margin-inline-start: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-mission-glow,
    .taj-mission-ring,
    .taj-mission-badge {
        animation: none !important;
    }
}

/* =========================================================
   تگ‌های خدمات — رفع فضای خالی «امروز این نگاه را...» (دور بیست‌وسوم)
   ---------------------------------------------------------
   کاربر گفت ستون کنار عکس بلند بالای صفحه درباره‌تاج (فقط یک جمله
   تیتر) فضای خالی زیادی داره. چهار خدمت واقعی تاج (که همین الان هم
   تو صفحه خدمات هستن) به‌صورت تگ آیکون‌دار + یک دکمه لینک به صفحه
   خدمات اضافه شد؛ نه عدد/آمار تازه، فقط تکرار محتوای واقعی موجود
   با آیکون. */

/* دور۴۶: خواسته صریح سعیده - این ستون (کنار عکس بلند ۸۳۲px کناری) با وجود
   این بلوک (که در دور۲۳ برای همین مشکل اضافه شده بود) همچنان خلوت/خالی
   دیده می‌شه. لیست پیل‌های تخت کوچیک (فقط ۱۳٫۵px، پدینگ کم) به یک گرید
   ۲×۲ از کارت‌های واقعی (آیکون بزرگ‌تر در دایره جدا + عنوان با وزن بیشتر)
   تبدیل شد تا وزن بصری واقعی به این ستون اضافه کنه، نه فقط چندتا کلمه
   کنار هم. محتوا عوض نشده (همون ۴ خدمت واقعی تاج). */
.taj-about-service-tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 30px;
    padding: 0;
}

.taj-about-service-tags li {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 18px;

    color: var(--taj-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    background-color: var(--taj-tint);
    border: 1px solid rgba(9, 68, 104, 0.06);
    border-radius: 14px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.taj-about-service-tags li:hover {
    background-color: var(--taj-white);
    box-shadow: 0 10px 26px rgba(8, 37, 56, 0.08);
    transform: translateY(-2px);
}

/* دور۴۷: خواسته صریح محمدرضا - آیکن‌های این ۴تگ (که از قبل مرتبط با
   متن هرکدوم بودن: درصد/مالیاتی، سند/حسابداری، ذره‌بین/حسابرسی،
   چرخ‌دنده/استقرار سیستم) بزرگ‌تر و محسوس‌تر شدن تا هیچ‌وقت به‌چشم
   «غایب» نیان - قطر دایره ۳۸→۴۶px و اندازه خودِ آیکن ۱۷→۲۰px. */
.taj-about-service-tags li i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(204, 85, 1, 0.12);
    color: var(--taj-orange);
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 575px) {
    .taj-about-service-tags {
        grid-template-columns: 1fr;
    }
}

.taj-about-service-cta {
    display: inline-flex;
}

/* دور۴۶: نسخه سفید لوگو (قبلا taj-logo-white.svg) - بدون فایل تازه، همون
   taj-logo.png شفاف با این فیلتر به‌طور کامل سفید می‌شه. چون خود PNG
   پس‌زمینه شفاف داره (نه سفید solid)، brightness(0) تمام پیکسل‌های غیرشفاف
   رو مشکی می‌کنه و invert(1) اون مشکی رو سفید می‌کنه - پس‌زمینه شفاف
   دست‌نخورده می‌مونه. */
.taj-logo-to-white {
    filter: brightness(0) invert(1);
}

/* =========================================================
   رفع تکرار عکس‌های بزرگ تیم در صفحه درباره‌تاج (دور یازدهم)
   ---------------------------------------------------------
   کاربر گفت دوست نداره عکس‌های تیم «در سایز بزرگ» هم در صفحه
   درباره‌تاج و هم در صفحه تیم تاج (our-leaders.html) تکرار بشه.
   بررسی نشون داد این سکشن (taj-team-section توی about-us.html)
   عمدا در یه دور قبلی دقیقا از همون کامپوننت صفحه اصلی (taj-team-*
   با عکس ۴۰۰×۵۰۰ و پاراگراف شرح‌وظایف و لیست کامل حوزه‌های تخصص)
   کپی شده بود. چون این محتوای کامل (شرح‌وظایف + لیست تخصص) دقیقا
   عین همینه که در our-leaders.html هم هست، و چون خود صفحه اصلی هم
   نسخه کامل مشابهی داره، همین سه‌جایی‌شدن یه محتوا دقیقا مصداق
   حرف کاربره. راه‌حل: سکشن تیم در about-us.html به یک «پیش‌نمایش
   کوتاه» تبدیل شد — فقط عکس کوچک دایره‌ای (نه عکس بزرگ ۴۰۰×۵۰۰) +
   نام + سمت، بدون پاراگراف شرح‌وظایف و بدون لیست حوزه‌های تخصص —
   که با کلیک به our-leaders.html (صفحه اصلی/کامل تیم) می‌رود؛ آنجا
   عکس‌های بزرگ و توضیح کامل هر عضو (تنها یک‌بار در کل سایت، در جای
   درستش) باقی می‌مونه. کیکر/تیتر/پاراگراف معرفی و جمله پایانی سکشن
   (taj-team-header/taj-team-closing) دست‌نخورده موندن چون مشکلی
   نداشتن، فقط این ۲ کلاس مشترک صفحه اصلی هستن و تغییری در ظاهرشون
   داده نشده. دکمه «آشنایی کامل با تیم تاج» هم به پاورقی همین سکشن
   اضافه شد تا مسیر به صفحه کامل تیم واضح‌تر باشه. */

.taj-team-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.taj-team-teaser-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 30px 18px;
    border-radius: 16px;
    background-color: var(--taj-tint-soft);
    border: 1px solid rgba(9, 68, 104, 0.06);
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.taj-team-teaser-card:hover,
.taj-team-teaser-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(8, 37, 56, 0.1);
    background-color: var(--taj-white);
}

/* دور۳۵: سعیده چندین‌باره از کیفیت این آواتار (خصوصا عکس خودش) گله کرد. بررسی
   مستقیم: فایل منبع (about/taj-team-saeedeh.jpg) خودش کاملا تیز و باکیفیته،
   کش هم از دور۳۴ نسخه‌گذاری شده، انیمیشن reveal این کلاس هم blur نداره (فقط
   transform) - یعنی هیچ باگ فنی کشف نشد. چون در قطر خیلی کوچیک (۸۴px) هر
   نرمی جزئی (فشرده‌سازی JPEG، rendering مرورگر خودش) نسبتا بیشتر به چشم
   میاد، قطر بزرگ‌تر شد (۸۴→۱۰۴px) تا جزئیات صورت واضح‌تر دیده بشه. */
.taj-team-teaser-avatar {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 3px solid var(--taj-white);
    /* دور۳۷: به سایه لایه‌ای سیستم عمق تازه ارتقا یافت (قبلا یک سایه ساده تک‌لایه) -
       محیطی+تماسی با هم یعنی حس شناوربودن واقعی‌تر، هماهنگ با بقیه سایت. */
    box-shadow: var(--taj-shadow-ambient), var(--taj-shadow-contact);
}

.taj-team-teaser-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.taj-team-teaser-name {
    color: var(--titleColor);
    font-size: 16px;
    font-weight: 700;
}

.taj-team-teaser-role {
    color: #5f6f78;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
}

.taj-team-closing-with-cta {
    flex-wrap: wrap;
    row-gap: 24px;
}

.taj-team-closing-text {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* دور۴۶: خواسته سعیده (اسکرین‌شات) - این گرید فقط یک breakpoint در ۵۷۵px
   داشت؛ یعنی از عرض بی‌نهایت تا ۵۷۶px همیشه سه‌ستونه می‌موند، حتی وقتی
   عرض واقعی صفحه (مثلا با DevTools بازِ کنار صفحه) به ۷۰۰-۸۰۰px می‌رسید -
   در اون بازه، سه‌ستون فشرده و متن‌ها تنگ/بی‌قواره دیده می‌شدن. حالا یک
   حالت میانی (تک‌ستونه ولی افقی/کارت عریض، نه فقط زیر هم با فاصله زیاد)
   اضافه شد تا هیچ عرضی «نصفه‌کاره» به‌نظر نرسه. */
@media (max-width: 860px) {
    .taj-team-teaser-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 460px;
        margin: 0 auto;
    }

    .taj-team-teaser-card {
        flex-direction: row;
        text-align: right;
        gap: 16px;
        padding: 18px 22px;
    }

    .taj-team-teaser-avatar {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .taj-team-teaser-name {
        display: block;
    }
}

/* =========================================================
   سکشن اعتمادساز جدید «روش همکاری» در صفحه خدمات (دور یازدهم)
   ---------------------------------------------------------
   کاربر خواست به صفحه خدمات یک سکشن اعتمادساز جدید با موشن گرافی
   اضافه بشه. چون طبق قانون نمی‌شه آمار/تعداد مشتری/گواهی جعلی ساخت،
   این سکشن به‌جای ادعای تازه، همون واقعیت‌های از‌قبل‌تاییدشده رو
   به شکل یک مسیر ۴مرحله‌ای زمانی (timeline) نشون می‌ده: شروع
   گفت‌وگو (که در appointment/contact هم هست) → همون «سه سؤال قبل
   از هر پیشنهاد» صفحه اصلی → همون اصل «شفافیت در مسیر همکاری» و
   «تعهد در اجرا» بالای همین صفحه. هیچ آمار/گواهی/نقل‌قول تازه‌ای
   نیست، فقط محتوای واقعی موجود در قالب یک روایت زمانی که اعتماد
   می‌سازه (نشون‌دادن یه فرایند شفاف و قابل‌پیش‌بینی). از نظر ظاهری
   این سومین الگوی متفاوته در همین صفحه (فهرست ردیفی اصول، تایم‌لاین
   این‌جا، گرید کارتی صنایع هدف) که هرکدوم واقعا فرق دارن.
   موشن: هم taj-motion-reveal استاندارد سایت، هم یه خط رابط با
   گرادیان درحال‌حرکت (taj-process-flow) که پیوسته جریان داره — تا
   حس «مسیر روبه‌جلو» رو تقویت کنه. */

/* =========================================================
   بنر عکس بالای «روش همکاری» (دور بیست‌وسوم)
   ---------------------------------------------------------
   کاربر گفت سه سکشن پشت‌سرهم این صفحه (اصول همکاری، روش همکاری،
   صنایع هدف) شبیه هم و بدون هیچ عکسی‌ان. این تایم‌لاین (پایین)
   خودش یه الگوی بصری متفاوته و دست‌نخورده موند، ولی یک بنر عکس
   دقیقا بالای همون تایم‌لاین اضافه شد — چون این سکشن درباره مسیر
   ارتباط با مشتریه (از گفت‌وگو تا نتیجه)، عکس مناسبش یه صحنه
   گفت‌وگو/جلسه مشاوره‌ست.

   به‌روزرسانی دور۴۶: عکس واقعی (taj-process-banner.jpg) از چند دور قبل
   رسید و پشت این کادر قرار گرفت، اما این کامنت و مخصوصا گرادیان روش
   به‌روز نشده بودن - گرادیان قبلی (۰٫۸/۰٫۸۸) اونقدر تیره بود که عملا
   عکس واقعی زیرش دیده نمی‌شد و کادر همچنان یک جعبه سرمه‌ای تخت به‌نظر
   می‌رسید؛ دقیقا همون «کادر سورمه‌ای که جذاب نیست». گرادیان مثل بردکرامب
   خیلی سبک‌تر شد تا عکس واقعی دیده بشه، و دو لکه نور محو (مثل بردکرامب/
   سکشن روبه‌رو یعنی cta-box بعدی که shape متحرک داره) برای حس موشن‌گرافی
   اضافه شد. */

/* دور۳۷: خواسته صریح سعیده (عکس ششم) - این بنر «بعد بیشتر» و «موشن
   گرافی محسوس‌تر» می‌خواد. چون overflow:hidden این المان لازمه (تا
   گلوها/آیکون داخل قاب گرد محصور بمونن - دست‌نخورده موند)، سایه با
   filter:drop-shadow اضافه شد نه box-shadow (همون دلیل taj-hero-cta:
   box-shadow با overflow:hidden خودِ المان بریده می‌شه، drop-shadow
   نه). برای موشن محسوس‌تر، دامنه‌حرکت/شفافیت گلوهای موجود افزایش
   پیدا کرد، یک گلوی سوم (سریع‌تر/کوچیک‌تر، جهت متفاوت) اضافه شد، و
   خط جریان پایین ضخیم‌تر/سریع‌تر شد. خودِ عکس طبق قانون همیشگی
   دست‌نخورده و بدون هیچ transform/scale موند. */
.taj-process-banner {
    position: relative;
    height: 230px;
    margin-bottom: 60px;
    overflow: hidden;
    border-radius: 20px;
    background-color: #0b4565;
    /* دور۳۱: سعیده صریح گفت گرادیان آبی روی عکس‌ها اصلا نباشه. این بنر متن/بج
       روی عکس نداره (فقط آیکون+گلوی‌نور تزئینی)، پس گرادیان کامل حذف شد؛ رنگ
       navy فقط fallback حالت بدون‌عکس می‌مونه. */
    background-image: var(--taj-process-banner-photo, none);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    filter:
        drop-shadow(0 30px 50px rgba(3, 20, 32, 0.26))
        drop-shadow(0 8px 16px rgba(3, 20, 32, 0.16));
}

/* دور۳۴: خواسته صریح سعیده - «عکس قشنگه ولی موشن و افکتی نداره، تحرک بده».
   چون تاکید همیشگی سعیده اینه که خود عکس‌ها هیچ‌وقت نباید اسکیل/کراپ/زوم
   بشن (نگاه کن به کامنت‌های taj-breadcrumb-brandbg)، هیچ transform/animation
   جدیدی به خودِ عکس این بنر اضافه نشد - عکس دقیقا همون‌طور ثابت و تمیز
   می‌مونه. تمام موشن جدید فقط روی لایه‌های تزئینی مستقل (گلوها/آیکون/خط
   جریان پایین بنر) اضافه شده. دو گلوی قبلی هم دامنه حرکتشون خیلی کم بود
   (moveHorizontal/moveVertical مشترک سایت فقط ۲۰px) و عمده بدنه‌شون بیرون
   از قاب بود (top:-110px روی ارتفاع ۲۳۰px بنر) - عملا حرکتشون دیده نمی‌شد.
   الان بزرگ‌تر شدن، بیشتر تو قاب اومدن، و کیفریم‌های اختصاصی با دامنه
   حرکت خیلی بیشتر گرفتن. */
.taj-process-banner-glow-1,
.taj-process-banner-glow-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.taj-process-banner-glow-1 {
    width: 360px;
    height: 360px;
    top: -80px;
    left: -70px;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.62) 0%, rgba(246, 140, 65, 0) 70%);
    animation: tajProcessBannerDrift1 8000ms ease-in-out infinite;
}

.taj-process-banner-glow-2 {
    width: 320px;
    height: 320px;
    bottom: -100px;
    right: 4%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 70%);
    animation: tajProcessBannerDrift2 6500ms ease-in-out infinite;
}

/* دور۳۷: گلوی سوم - کوچیک‌تر، سریع‌تر، جهت/مسیر متفاوت از دو گلوی
   قبلی (که هردو ease-in-out کند و بزرگ‌ان) - تا حرکت پس‌زمینه یک‌نواخت
   نباشه و در نگاه اول واقعا «محسوس» به‌نظر برسه. */
.taj-process-banner-glow-3 {
    position: absolute;
    width: 170px;
    height: 170px;
    top: 20%;
    right: 26%;
    border-radius: 50%;
    filter: blur(45px);
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(246, 140, 65, 0.4) 0%, rgba(246, 140, 65, 0) 70%);
    animation: tajProcessBannerDrift3 4200ms ease-in-out infinite;
}

@keyframes tajProcessBannerDrift1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(95px, 60px); }
}

@keyframes tajProcessBannerDrift2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-80px, -55px); }
}

@keyframes tajProcessBannerDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-35px, 25px) scale(1.2); }
}

.taj-process-banner-icon {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    font-size: 150px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.16);
    z-index: 1;
    animation: tajProcessBannerIconFloat 5000ms ease-in-out infinite;
}

@keyframes tajProcessBannerIconFloat {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(calc(-50% - 20px)) scale(1.06); }
}

/* خط نازک متحرک پایین بنر: استعاره بصری «مسیر شفاف» (متن کنار همین بنر) -
   یک تکه نور برند که پیوسته از این سر به اون سر بنر حرکت می‌کنه. کاملا
   مستقل از عکسه (لایه جدا با z-index بالاتر). دور۳۷: از ۴px به ۶px
   ضخیم‌تر و از ۴۵۰۰ به ۳۶۰۰ میلی‌ثانیه سریع‌تر شد تا محسوس‌تر باشه. */
.taj-process-banner-flow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background-image: linear-gradient(90deg, transparent 0%, rgba(246, 140, 65, 0.95) 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: tajProcessBannerFlow 3600ms linear infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes tajProcessBannerFlow {
    0% { background-position: -50% 0; }
    100% { background-position: 155% 0; }
}

/* دور۳۷: خط دوم روی لبه بالا - بررسی بصری نشون داد گلوهای رنگی روی
   بعضی قسمت‌های این عکس خاص (که خودش پرجزئیات/گرم‌رنگه) به‌سختی دیده
   می‌شن، ولی خط نازک نور (چون فقط یک لبه نازک روشن/کنتراست‌داره، نه
   یک لکه بزرگ رنگی) روی هر پس‌زمینه‌ای محسوسه. برای همین یک خط دوم
   (رنگ سفید به‌جای نارنجی، جهت مخالف) به لبه بالا هم اضافه شد - راه
   قابل‌اطمینان‌تری برای «موشن محسوس‌تر» روی این عکس خاص. */
.taj-process-banner-flow-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: tajProcessBannerFlowTop 4200ms linear infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes tajProcessBannerFlowTop {
    0% { background-position: 155% 0; }
    100% { background-position: -50% 0; }
}

@media (max-width: 575px) {
    .taj-process-banner {
        height: 170px;
        margin-bottom: 44px;
    }
    .taj-process-banner-icon {
        font-size: 100px;
    }
    .taj-process-banner-glow-1,
    .taj-process-banner-glow-2 {
        width: 190px;
        height: 190px;
    }
    .taj-process-banner-glow-3 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-process-banner-glow-1,
    .taj-process-banner-glow-2,
    .taj-process-banner-glow-3,
    .taj-process-banner-icon,
    .taj-process-banner-flow,
    .taj-process-banner-flow-top {
        animation: none !important;
    }
}

/* دور۴۶: رفع فاصله زیاد بین «اصول همکاری» و «روش همکاری» (هردو
   taj-bg-white/ptb-120 پشت‌سرهم، بدون جداکننده -> ۲۴۰px فضای خالی
   هم‌رنگ). پدینگ پایین سکشن اول و پدینگ بالای سکشن دوم هرکدوم کمی کم شد
   (نه صفر) تا فاصله متعادل و قابل‌قبول بمونه. */
.taj-principle-strip-wrap .container.ptb-120 {
    padding-bottom: 70px;
}

.taj-process-section-wrap .container.ptb-120 {
    padding-top: 60px;
}

@media (max-width: 767px) {
    .taj-principle-strip-wrap .container.ptb-120 {
        padding-bottom: 55px;
    }
    .taj-process-section-wrap .container.ptb-120 {
        padding-top: 45px;
    }
}

.taj-process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.taj-process-timeline::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    z-index: 0;

    background-image: linear-gradient(90deg, rgba(12, 68, 103, 0.3) 0%, rgba(246, 140, 65, 0.65) 50%, rgba(12, 68, 103, 0.3) 100%);
    background-size: 220% 100%;
    animation: taj-process-flow 6000ms linear infinite;
}

@keyframes taj-process-flow {
    0% {
        background-position: 220% 0;
    }
    100% {
        background-position: -220% 0;
    }
}

.taj-process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 8px;
}

.taj-process-step-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;
    margin: 0 auto 16px;

    border-radius: 50%;
    background-color: var(--taj-white);
    border: 2px solid var(--taj-accent-navy);
    color: var(--taj-accent-navy);

    font-size: 26px;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(8, 37, 56, 0.08);
}

.taj-process-step-number {
    display: block;
    margin-bottom: 8px;

    color: var(--taj-orange);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.taj-process-step-title {
    margin: 0 0 8px;

    color: #17384e;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.6;
}

.taj-process-step-desc {
    margin: 0;

    color: #5f6c75;
    font-size: 13.5px;
    line-height: 1.85;
}

@media (max-width: 991px) {
    .taj-process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 44px;
    }
    .taj-process-timeline::before {
        display: none;
    }
}

@media (max-width: 575px) {
    .taj-process-timeline {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }
    .taj-process-step {
        padding: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .taj-process-timeline::before {
        animation: none !important;
    }
}


/* =========================================================
   TAJ Knowledge Topic Card — سکشن «مسیرهای دانشنامه» در صفحه
   دانشنامه (دور یازدهم)
   ---------------------------------------------------------
   کاربر گفت صفحه دانشنامه خیلی کوتاه و بی‌اعتبار به‌نظر می‌رسه.
   چون طبق قانون نمی‌شه تعداد مقاله/مشترک/آمار بازدید جعلی ساخت،
   این سکشن به‌جای ادعای عددی تازه، همون ۶ موضوعی که از قبل در نوار
   پیل taj-knowledge-topics (دور دهم، بالای همین صفحه) اعلام شده رو
   با جزییات بیشتر (آیکون + توضیح یک‌خطی صادقانه درباره حوزه هر
   موضوع) به یک گرید کارتی تبدیل می‌کنه. هیچ عدد/آماری ادعا نشده.

   کارت‌ها عمدا لینک/کلیک‌پذیر نیستن (نه href، نه cursor:pointer)
   چون فیلتر واقعی مقاله بر اساس دسته هنوز در بک‌اند پیاده نشده و
   لینک‌دادن غیرواقعی/گمراه‌کننده می‌بود — دقیقا همون منطقی که برای
   عدم لینک‌دادن پیش‌نمایش مقاله‌ها هم رعایت شده (کامنت خود صفحه).

   از نظر ظاهری هم عمدا با کارت صنایع هدف صفحه خدمات
   (taj-industry-card — دایره نارنجی، پس‌زمینه همیشه سفید) و تایم‌لاین
   «روش همکاری» صفحه خدمات (taj-process-step — دایره توخالی سرمه‌ای،
   خط رابط متحرک) فرق داره: اینجا آیکون مربع‌گردِ پرشده‌ی سرمه‌ای روی
   کارتی با پس‌زمینه تینت ملایم قرار گرفته که با هاور به سفید و سایه
   تبدیل می‌شه.

   نکته فنی: چون taj-motion-reveal پایه‌اش overflow:hidden داره (برای
   مهار زوم-هاور تصویر در جاهای دیگه، نه اینجا)، و این کارت روی هاور
   box-shadow داره، قانون زیر (اورراید overflow:visible مخصوص همین
   دو-کلاسی) لازمه وگرنه سایه هاور توسط همون overflow:hidden بریده
   می‌شه.
========================================================= */

.taj-knowledge-topic-card {
    position: relative;
    height: 100%;

    padding: 30px 26px;

    border-radius: 18px;

    background-color: var(--taj-tint-soft);
    border: 1px solid rgba(9, 68, 104, 0.08);

    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.taj-knowledge-topic-card.taj-motion-reveal {
    overflow: visible;
}

.taj-knowledge-topic-card:hover {
    transform: translateY(-6px);
    background-color: var(--taj-white);
    box-shadow: 0 20px 40px rgba(8, 37, 56, 0.1);
}

/* دور۳۷: خواسته صریح سعیده - «هاور آیکون» جزو تشدید کلی هاور کارت،
   خودِ آیکون هم واکنش نشون بده (بزرگ‌تر+چرخش کوچک+رنگ نارنجی برند)
   نه فقط بلندشدن کل کارت. */
.taj-knowledge-topic-card:hover .taj-knowledge-topic-card-icon {
    transform: scale(1.1) rotate(-8deg);
    background-color: var(--taj-orange);
}

.taj-knowledge-topic-card-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 20px;

    border-radius: 14px;

    background-color: var(--taj-accent-navy);
    color: var(--taj-white);

    font-size: 24px;
    line-height: 1;

    transition: transform 0.4s cubic-bezier(.2, .65, .3, 1), background-color 0.4s ease;
}

/* دور۳۷: خواسته صریح سعیده - صفحه دانشنامه «موشن گرافی خیلی کمی داره،
   قوی‌تر بازطراحی کن». این صفحه بر خلاف صفحه اصلی/درباره‌ما هیچ موشن
   مداوم/idle نداشت (فقط رول-این یک‌باره taj-motion-reveal). این دو
   حلقه ضربان (pulse ring)، دقیقا با همون زبان بصری taj-mission-glow/
   taj-mission-glow-2 (گلوی دوتایی با تاخیر)، برای این ۶ آیکون از این
   الگو استفاده می‌کنن: مدام از پشت آیکون بیرون می‌زنن و محو می‌شن - چون
   موشن مداومه (نه فقط هاور)، هم روی موبایل هم دسکتاپ از همون لحظه
   بارگذاری دیده می‌شه. چون فقط border (بدون fill) و کاملا بیرون از
   باکس ۵۴×۵۴ آیکونه (inset:-6px)، هیچ‌وقت روی خود گلیف آیکون افت
   نمی‌کنه. */
.taj-knowledge-topic-card-icon::before,
.taj-knowledge-topic-card-icon::after {
    content: "";
    position: absolute;
    inset: -6px;

    border-radius: 16px;
    border: 1.5px solid rgba(11, 69, 101, 0.4);

    opacity: 0;
    pointer-events: none;

    animation: taj-icon-pulse 2800ms ease-out infinite;
}

.taj-knowledge-topic-card-icon::after {
    animation-delay: 1400ms;
}

@keyframes taj-icon-pulse {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .taj-knowledge-topic-card-icon::before,
    .taj-knowledge-topic-card-icon::after {
        animation: none;
        opacity: 0;
    }

}

.taj-knowledge-topic-card-title {
    margin: 0 0 10px;

    color: #17384e;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.taj-knowledge-topic-card-desc {
    margin: 0;

    color: #5f6c75;

    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 767px) {

    .taj-knowledge-topic-card {
        padding: 26px 22px;
    }

}

/* =========================================================
   موشن محیطی سکشن «مسیرهای دانشنامه» (دور۳۷)
   ---------------------------------------------------------
   خواسته صریح سعیده: صفحه دانشنامه موشن گرافی قوی‌تر می‌خواد. این
   کلاس فقط روی سکشن «مسیرهای دانشنامه» (ابتدای blog-left-sidebar.html)
   گذاشته می‌شه - نه روی taj-knowledge-header که کامپوننتی مشترک با
   صفحه اصلیه (تعمدا دست‌نخورده موند تا صفحه اصلی تغییر نکنه). چون
   پس‌زمینه این سکشن سفیده (نه سرمه‌ای مثل taj-mission-visual)، شکل‌ها
   خیلی کم‌رنگ‌تر/بدون‌فیل طراحی شدن تا فقط حس ظریفِ «زنده‌بودن»
   بدن، نه لکه دیده بشن. */
.taj-knowledge-paths-section {
    position: relative;
    overflow: hidden;
}

.taj-knowledge-paths-section > .container {
    position: relative;
    z-index: 1;
}

.taj-knowledge-paths-section::before,
.taj-knowledge-paths-section::after {
    content: "";
    position: absolute;
    z-index: 0;

    border-radius: 50%;
    pointer-events: none;
}

.taj-knowledge-paths-section::before {
    width: 90px;
    height: 90px;
    top: 36px;
    left: 6%;

    border: 1.5px solid rgba(11, 69, 101, 0.16);

    animation: moveVertical 9000ms ease-in-out infinite;
}

.taj-knowledge-paths-section::after {
    width: 140px;
    height: 140px;
    bottom: 6px;
    right: 7%;

    background: radial-gradient(circle, rgba(204, 85, 1, 0.08) 0%, rgba(204, 85, 1, 0) 70%);

    animation: moveHorizontal 11000ms ease-in-out infinite;
    animation-delay: 800ms;
}

@media (max-width: 991px) {

    .taj-knowledge-paths-section::before,
    .taj-knowledge-paths-section::after {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .taj-knowledge-paths-section::before,
    .taj-knowledge-paths-section::after {
        animation: none;
    }

}


/* =========================================================
   لینک‌های حقوقی در فوتر (حریم خصوصی / قوانین و مقررات) — دور یازدهم
   ادامه، بعد از بازخورد مستقیم سعیده
   ---------------------------------------------------------
   بررسی دقیق نشون داد faq.html و appointment.html از هیچ‌جای کل
   سایت لینک نمی‌شدن (کاملا یتیم/غیرقابل‌کشف بودن)، و privacy-policy/
   terms-conditions هم فقط یک‌بار و یک‌طرفه به هم لینک شده بودن، نه از
   منو/فوتر. راه‌حل: دو صفحه سوالات‌متداول و قرار‌ملاقات به همون
   لیست «بخش‌های تاج» در فوتر (سایت‌وایده، توی base.html) اضافه شدن؛
   حریم‌خصوصی/قوانین‌ومقررات هم — چون طبق قرارداد رایج وب صفحات
   حقوقی/قانونی معمولا در نوار پایین فوتر کنار کپی‌رایت میان، نه در
   ستون اصلی لینک‌ها — یک ردیف کوچیک جدا کنار همون خط کپی‌رایت
   گرفتن، دقیقا همون الگوی رایج در اکثر سایت‌های حرفه‌ای.
========================================================= */

.taj-footer-bottom-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.taj-footer-legal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.taj-footer-legal-nav a {
    color: rgba(255, 255, 255, 0.50);
    font-size: 11.5px;
    line-height: 1.8;
    text-decoration: none;
    transition: color 0.25s ease;
}

.taj-footer-legal-nav a:hover {
    color: rgba(255, 255, 255, 0.90);
}

.taj-footer-legal-nav span {
    color: rgba(255, 255, 255, 0.30);
    font-size: 11.5px;
}

@media (max-width: 575px) {
    .taj-footer-bottom-legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/* =========================================================
   لینک‌های مرتبط در پنل تماس (قرار ملاقات + سوالات متداول) — دور یازدهم
   ادامه
   ---------------------------------------------------------
   appointment.html و faq.html علاوه بر فوتر، از خودِ صفحه تماس هم
   (جایی که کاربر دقیقا در حال تصمیم‌گیری برای شروع ارتباطه) به‌شکل
   طبیعی به این دو صفحه مرتبط لینک می‌شن. چون taj-contact-aside
   پس‌زمینه سرمه‌ای تیره داره، رنگ متن/آیکون‌ها هماهنگ با بقیه متن‌های
   روشن همین باکس (rgba white) انتخاب شد، نه رنگ‌های متن صفحات روشن.
========================================================= */

.taj-contact-related-links {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin: 0 0 30px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.taj-contact-related-links-label {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 700;
}

.taj-contact-related-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: opacity 0.25s ease;
}

.taj-contact-related-links a:hover {
    opacity: 0.8;
}

.taj-contact-related-links a i {
    color: #f09a6e;
    font-size: 16px;
}


/* =========================================================
   عنوان بخش‌های صفحات حقوقی (دور بیست‌وچهارم)
   ---------------------------------------------------------
   ممیزی سئوی کامل نشون داد صفحات حریم‌خصوصی/قوانین‌ومقررات از
   h5 بدون کلاس برای تیتر هر بخش (مقدمه/چه‌اطلاعاتی‌جمع‌آوری‌می‌کنیم/...)
   استفاده می‌کردن که مستقیم بعد از h1 بالای صفحه می‌اومد — یعنی
   سلسله‌مراتب h1→h5 چهار سطح رو رد می‌کرد (نه یک ساختار درست
   برای موتور جست‌وجو/screen‌reader). این h5ها به h2 ارتقا پیدا
   کردن (سطح درست، چون این‌ها تنها بخش‌های اصلی محتوای صفحه‌ان،
   مستقیم زیر h1). چون این h5های اصلی کلاس نداشتن، سایز/وزن/فاصله
   واقعی‌شون رو مستقیم با Playwright اندازه‌گیری کردم (۲۴px،
   وزن۶۰۰، فاصله‌پایین۱۵px، ارتفاع‌خط۳۱.۲px) تا با تبدیل به h2،
   ظاهر رندرشده دقیقا همون بمونه، فقط سطح ساختاری درست بشه. */
.taj-legal-section-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
    line-height: 31.2px;
}

/* =========================================================
   کارت CTA صفحه سوالات متداول (دور۳۴)
   ---------------------------------------------------------
   خواسته صریح سعیده: کپشن «پاسخ سوال خود را پیدا نکردید؟» روی عکس
   کنار آکاردئون «الان خیلی به چشم نمیاد». دور۳۲ صریح خواسته بود
   پس‌زمینه توپر قبلی این جعبه برداشته بشه (فقط سایه‌متن روی عکس
   مونده بود) - یعنی برگشت به همون جعبه توپر رد‌شده گزینه خوبی
   نیست. راه میانه: کارت شیشه‌ای (frosted glass/backdrop-blur) که
   عکس زیرش هنوز تا حدی دیده می‌شه ولی خودش وزن بصری/کنتراست کافی
   برای جلب توجه داره، بعلاوه یک دکمه واقعی (taj-ui-link--primary،
   همون زبان بصری CTAهای اصلی سایت) به‌جای لینک متنی ساده قبلی. */
.taj-faq-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: rgba(8, 37, 56, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 45px rgba(3, 20, 32, 0.35);
}

.taj-faq-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 14px 14px 6px 14px;
    background: linear-gradient(155deg, #f68c41 0%, #d45c24 100%);
    color: #ffffff;
    font-size: 21px;
    box-shadow: 0 10px 22px rgba(212, 92, 36, 0.35);
}

.taj-faq-cta .taj-ui-link--primary {
    align-self: flex-start;
}

@media (max-width: 575px) {
    .taj-faq-cta {
        gap: 12px;
        padding: 20px 22px !important;
    }
    .taj-faq-cta-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* =========================================================
   قاب «کتابخانه دانشنامه» برای مقاله شاخص صفحه دانشنامه (دور۳۴)
   ---------------------------------------------------------
   خواسته صریح سعیده: مقاله شاخص صفحه دانشنامه «عینا از صفحه اول
   اومده و تکرار شده». محتوا عمدا دست‌نخورده موند (طبق تصمیم دور۳۲
   در کامنت بالای همین بخش در blog-left-sidebar.html، این واقعا
   همون مقاله صفحه اصلیه)، ولی پوسته بصری این‌جا کاملا مجزا شد:
   یک قاب کارتی مستقل با نوار لبه رنگی + برچسب «کتابخانه دانشنامه»
   بالای عکس، و بج دسته‌بندی که قبلا شناور روی خود عکس بود (دقیقا
   مثل صفحه اصلی) به کنار «مقاله منتخب» بالای تیتر منتقل شد. همه
   این کلاس‌ها زیرمجموعه .taj-knowledge-featured--library تعریف
   شدن تا نسخه صفحه اصلی (بدون این کلاس) کاملا دست‌نخورده بمونه. */
.taj-knowledge-featured--library {
    position: relative;
    padding: 26px 26px 8px;
    border: 1px solid rgba(15, 55, 78, 0.10);
    border-radius: 26px 26px 8px 26px;
    background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
    /* دور۳۷: سایه قبلی (تک‌لایه) به سیستم عمق تازه taj-depth-frame سپرده شد -
       کلاس اضافه‌شده رو تگ HTML، جای مقدار ثابت اینجا. */
}

.taj-knowledge-featured--library::before {
    content: "";
    position: absolute;
    top: 0;
    right: 26px;
    left: 26px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #f68c41 0%, #d45c24 100%);
}

.taj-knowledge-featured-library-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #b34718;
    font-size: 12px;
    font-weight: 700;
}

.taj-knowledge-featured-library-tag i {
    font-size: 15px;
}

.taj-knowledge-featured--library .taj-knowledge-type {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.taj-knowledge-type-badge {
    color: #b34718;
    font-size: 12px;
    font-weight: 700;
}

.taj-knowledge-type-category {
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf3f5;
    color: #0b4565;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 575px) {
    .taj-knowledge-featured--library {
        padding: 20px 20px 6px;
    }
}