/* ═══ صفحهٔ دستهٔ نمونه‌کار (/portfolio/{slug}/) ═══
   هیرو و کارت‌ها همان قاعده‌های همین فایل‌اند؛ فقط این چند مورد مخصوص آن صفحه است. */

.dmpf-hero__cta,
.pf-hero-btn {
    width: fit-content;
}

/* ⚠ تصویر هیرو را ادمین انتخاب می‌کند، پس نسبتش هرچه باشد ارتفاع صفحه نباید تکان بخورد:
   ارتفاع ثابت است و تصویر داخل همان کادر برش می‌خورد. */
.dmpf-hero__figure {
    width: 100%;
    height: clamp(260px, 34vw, 460px);
    overflow: hidden;
    border-radius: 24px;
}

.dmpf-hero__figure .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* ═══ دکمهٔ «مشاهده بیشتر» ═══
   ⚠ صفت hidden وزن کمی دارد و از هر کلاسی که display بدهد می‌بازد؛ پس صریح خنثی می‌شود
   وگرنه دکمه‌ای که جاوااسکریپت پنهانش کرده، دیده می‌ماند. */
.dmpf-more[hidden],
.dmpf-more__btn[hidden] {
    display: none !important;
}

.dmpf-more {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.dmpf-more__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border: 1px solid var(--accent-primary);
    border-radius: 50px;
    background-color: transparent;
    color: var(--accent-primary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.dmpf-more__btn:hover {
    background-color: var(--accent-primary);
    color: #fff;
    transform: translateY(-2px);
}

.dmpf-more__icon {
    display: inline-flex;
    transition: transform .3s ease;
}

.dmpf-more__btn:hover .dmpf-more__icon {
    transform: translateY(3px);
}

.dmpf-missing {
    margin: 40px 0;
    padding: 18px 22px;
    border: 1px dashed var(--e-global-color-da3ec38, #4a5568);
    border-radius: 14px;
    font-size: 15px;
}

/* باکس متن بلندِ پایین صفحه: ارتفاع مهار می‌شود و خودش اسکرول می‌خورد. */
.dmpf-longread {
    margin-top: 60px;
    padding: 28px 30px;
    border: 1px solid rgba(10, 25, 47, .1);
    border-radius: 20px;
    background-color: #fff;
}

/* «مشاهده بیشتر»: بدون جاوااسکریپت کل متن دیده می‌شود (برای موتور جست‌وجو و کاربر)؛
   کلاس is-collapsible را فقط اسکریپت و فقط برای متنِ بلند اضافه می‌کند. */
.dmpf-longread.is-collapsible .dmpf-longread__inner {
    position: relative;
    max-height: 260px;
    overflow: hidden;
    transition: max-height .4s ease;
}

.dmpf-longread.is-collapsible:not(.is-open) .dmpf-longread__inner::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.dmpf-longread.is-open .dmpf-longread__inner {
    max-height: none;
}

.dmpf-longread__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 10px 22px;
    border: 1px solid rgba(10, 25, 47, .15);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary, #0a192f);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.dmpf-longread__toggle:hover,
.dmpf-longread__toggle:focus-visible {
    background: rgba(10, 25, 47, .05);
}

.dmpf-longread__inner {
    padding-inline-end: 14px;
    direction: rtl;
    text-align: start;
    /* ⚠ رنگ متن بدنهٔ این صفحه کرمی است (تم تیره)؛ فقط p رنگ خودش را داشت و فهرست‌ها، bold و هر تگ دیگر
       کرمی روی زمینهٔ سفید می‌شدند. رنگ روی ظرف ⇒ همهٔ فرزندان یکدست. */
    color: var(--text-secondary, #4a5568);
}

.dmpf-longread__inner ul,
.dmpf-longread__inner ol {
    margin: 0 0 14px;
    padding-inline-start: 22px;
}

.dmpf-longread__inner li {
    margin-block-end: 8px;
    font-size: 15px;
    line-height: 2.1;
}

.dmpf-longread__inner strong,
.dmpf-longread__inner b {
    color: var(--text-primary, #0a192f);
}

.dmpf-longread__inner p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 2.1;
}

/* تیترهای متن سئویی: base.css به h2 اندازهٔ ۴۴ و وسط‌چین می‌دهد؛ اینجا راست‌چین و ظریف، هم‌وزن بدنهٔ متن. */
.dmpf-longread__inner h2,
.dmpf-longread__inner h3,
.dmpf-longread__inner h4 {
    margin: 22px 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.7;
    text-align: start;
    color: var(--text-primary);
}

.dmpf-longread__inner h3,
.dmpf-longread__inner h4 {
    font-size: 17px;
}

.dmpf-longread__inner > :first-child {
    margin-top: 0;
}

.dmpf-longread__inner p:last-child {
    margin-bottom: 0;
}

.dmpf-longread__inner::-webkit-scrollbar {
    width: 8px;
}

.dmpf-longread__inner::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(10, 25, 47, .22);
}

@media (max-width: 767px) {
    .dmpf-longread {
        margin-top: 40px;
        padding: 20px 18px;
    }

    .dmpf-longread__inner {
        max-height: 260px;
    }
}

/*intro hero start*/

.intro-hero {
    padding-top: 165px;
    direction: rtl;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-eyebrow {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-eyebrow::after {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--accent-primary);
    border-radius: 2px;
}

.hero-title {
    font-size: 48px;
    font-weight: 900;
    color: var(--e-global-color-f49861a);
    line-height: 1.3;
    margin-bottom: 24px;
    text-align: right;
}

.highlight-text {
    color: var(--accent-primary);
    position: relative;
}

.hero-desc {
    font-size: 16px;
    color: var(--e-global-color-text);
    line-height: 2;
    margin-bottom: 40px;
    text-align: justify;
    max-width: 90%;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 40px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-val {
    font-family: 'gofteh', sans-serif;
    font-size: 38px;
    font-weight: 900;
    color: var(--e-global-color-f49861a);
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--e-global-color-text);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(1, 2, 78, 0.1);
}

.hero-visual {
    position: relative;
    width: 100%;
    perspective: 1500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-visual-float {
    animation: floating 6s ease-in-out infinite;
    width: 100%;
    z-index: 2;
}

/* ⚠ will-change حذف شد و این پیامدِ مستقیمِ عوض‌شدنِ محتوای این ظرف است. تا دیروز فقط
   یک تصویر داخلش بود و ارتقای دائمیِ لایه هزینه‌ای نداشت؛ حالا متن دارد، و لایهٔ
   گرافیکیِ همیشه‌روشن، متن را نرم و کم‌وضوح رندر می‌کند. کجی هنوز روان است چون فقط در
   هاور تغییر می‌کند و مرورگر همان‌جا لایه را می‌سازد. */
.hero-visual-tilt {
    width: 100%;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    padding: 0 6px;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(1, 2, 78, 0.15));
    transform: translateZ(20px);
    border-radius: 24px;
}

/* ═══ سه جعبهٔ پیوند در هیرو ═══ */

/* ⚠ چیدمان نامتقارن با یک شبکهٔ دو ستونه ساخته شده، نه با موقعیت مطلق: جعبهٔ اول هر دو
   ستون را می‌گیرد و دوتای بعدی زیرش می‌نشینند، ولی یکی کمی پایین‌تر و دیگری کمی
   بالاتر. نتیجه نامتقارن است اما هیچ‌چیز از جریان چیدمان بیرون نمی‌افتد، پس در هر
   عرضی خودش را جمع می‌کند. */
/* ⚠ چیدمان از شبکهٔ دو ستونه به یک «پلکان» تغییر کرد. هر جعبه از جعبهٔ بالای خودش
   باریک‌تر است و همه به یک لبه چسبیده‌اند، پس لبهٔ مقابل پله‌پله تو می‌رود و یک قطر
   می‌سازد. نامتقارن است ولی چون همه به یک خط تراز شده‌اند، شلوغ به نظر نمی‌رسد.
   عرض‌ها درصدی‌اند، پس در هر اندازه‌ای همین نسبت حفظ می‌شود. */
.pf-hero-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ⚠ هر جعبه عمقِ خودش را دارد. ظرفِ بالادست از قبل حالت سه‌بعدی و پرسپکتیو داشت، پس
   این جابه‌جایی‌ها واقعاً در عمق دیده می‌شوند نه فقط به‌عنوان بزرگ‌نمایی. */
.pf-hero-card {
    --pf-z: 0px;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    border: 1px solid rgba(1, 2, 78, .10);
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 18px 34px -24px rgba(1, 2, 78, .45);
    overflow: hidden;
    text-decoration: none;
    transform: translateZ(var(--pf-z));
    transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease,
                transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

/* برقِ عبوری — یک نوار روشن که در هاور از یک لبه تا لبهٔ دیگر می‌گذرد. روی شبه‌عنصر است،
   پس هیچ متنی را جابه‌جا نمی‌کند. */
.pf-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.pf-hero-card:hover::after,
.pf-hero-card:focus-visible::after {
    transform: translateX(130%);
}

/* لبهٔ رنگیِ سمت شروع — نشانهٔ یکسانِ هر سه جعبه، بدون اینکه کادر را شلوغ کند. */
.pf-hero-card::before {
    content: "";
    position: absolute;
    inset-block: 16px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background-color: var(--accent-primary);
    opacity: .35;
    transition: opacity .35s ease, inset-block .35s ease;
}

/* پلکان: هر جعبه باریک‌تر از بالایی و همه چسبیده به لبهٔ انتها؛ عمق هم رو به پایین کم
   می‌شود، پس مجموعه به عقب می‌رود نه اینکه تخت بایستد. */
.pf-hero-card--a {
    width: 100%;
    --pf-z: 54px;
    padding: 22px 20px;
}

.pf-hero-card--b {
    width: 88%;
    align-self: flex-end;
    --pf-z: 30px;
}

.pf-hero-card--c {
    width: 76%;
    align-self: flex-end;
    --pf-z: 8px;
}

/* ⚠ تعاملِ اصلی روی خودِ گروه است نه تک‌تک جعبه‌ها: وقتی روی یکی می‌روید، همان یکی جلو
   می‌آید و دو تای دیگر کم‌رنگ و عقب می‌روند. این کار «تمرکز» می‌سازد و از سه جعبهٔ
   هم‌وزن، یک انتخاب فعال بیرون می‌کشد.
   ⚠ جابه‌جاییِ عمق فقط در هاور تغییر می‌کند و ماندگار نیست، پس متن جعبه‌ها را روی
   لایهٔ گرافیکیِ دائمی نمی‌بَرَد. */
.pf-hero-cards:hover .pf-hero-card:not(:hover),
.pf-hero-cards:focus-within .pf-hero-card:not(:focus-visible):not(:hover) {
    opacity: .55;
    transform: translateZ(calc(var(--pf-z) - 24px)) scale(.985);
}

.pf-hero-card:hover,
.pf-hero-card:focus-visible {
    border-color: rgba(1, 2, 78, .22);
    background-color: #fdfdff;
    box-shadow: 0 30px 52px -20px rgba(1, 2, 78, .5);
    transform: translateZ(calc(var(--pf-z) + 34px));
}

.pf-hero-card:hover::before,
.pf-hero-card:focus-visible::before {
    opacity: 1;
    inset-block: 10px;
}

.pf-hero-card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.pf-hero-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    background-color: rgba(1, 2, 78, .05);
    color: var(--accent-primary);
    transition: background-color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.pf-hero-card--a .pf-hero-card__icon {
    width: 50px;
    height: 50px;
}

.pf-hero-card:hover .pf-hero-card__icon,
.pf-hero-card:focus-visible .pf-hero-card__icon {
    background-color: rgba(1, 2, 78, .09);
    transform: scale(1.08) rotate(-4deg);
}

.pf-hero-card__icon svg {
    width: 22px;
    height: 22px;
}

.pf-hero-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* ⚠ رنگ عنوان با کلاسِ دوباره‌نوشته و اجبار تثبیت شده، چون قاعدهٔ سراسریِ رنگِ پیوندها
   با همان اجبار روی این جعبه‌ها می‌نشیند و هر سه را یک‌رنگ می‌کند. */
.pf-hero-card .pf-hero-card__title,
.pf-hero-card:visited .pf-hero-card__title {
    font-family: 'gofteh';
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--e-global-color-f49861a) !important;
}

.pf-hero-card--a .pf-hero-card__title {
    font-size: 18px;
}

.pf-hero-card .pf-hero-card__desc,
.pf-hero-card:visited .pf-hero-card__desc {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--e-global-color-text) !important;
    opacity: .85;
}

/* دکمهٔ گردِ انتهای جعبه — همان نشانهٔ کلیک‌پذیری که در بقیهٔ قالب‌ها به کار رفت. */
.pf-hero-card__go {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgba(1, 2, 78, .16);
    border-radius: 50%;
    color: var(--accent-primary);
    transition: background-color .35s ease, border-color .35s ease;
}

/* چرخشِ ساعتگردِ چهل‌وپنج درجه، گوشهٔ ساخته‌شده از ضلع چپ و پایین را صاف به چپ می‌آورد. */
.pf-hero-card__go::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateX(1px) rotate(45deg);
    transition: transform .35s ease;
}

.pf-hero-card:hover .pf-hero-card__go,
.pf-hero-card:focus-visible .pf-hero-card__go {
    border-color: var(--accent-primary);
    background-color: rgba(1, 2, 78, .05);
}

.pf-hero-card:hover .pf-hero-card__go::after,
.pf-hero-card:focus-visible .pf-hero-card__go::after {
    transform: translateX(-2px) rotate(45deg);
}

/* ⚠ در موبایل هر سه چیز حذف می‌شوند: جابه‌جایی در عمق، اختلافِ ارتفاع، و شناوریِ کل
   گروه. دلیلش فقط چیدمان نیست — هر ترنسفرمِ ماندگار یا انیمیشنِ در حال اجرا روی جعبه‌ای
   که متن دارد، آن را روی لایهٔ گرافیکی جدا می‌بَرَد و متنش را مات رندر می‌کند. پیش‌تر
   داخل این ظرف فقط یک تصویر بود و این مسئله وجود نداشت. */
@media (max-width: 992px) {
    .pf-hero-cards {
        gap: 12px;
    }

    /* ⚠ در موبایل هر سه جعبه تمام‌عرض و هم‌تراز می‌شوند: پلکانِ باریک‌شونده روی عرض کم،
       جعبهٔ سوم را به یک نوار لاغرِ ناخوانا تبدیل می‌کند. */
    /* ⚠ حالت هاور هم باید اینجا خنثی شود، نه فقط حالت عادی: انتخابگرِ هاور وزن بیشتری
       دارد و روی صفحهٔ لمسی که هاور می‌چسبد، جابه‌جاییِ عمق باقی می‌ماند. */
    .pf-hero-card,
    .pf-hero-card--a,
    .pf-hero-card--b,
    .pf-hero-card--c,
    .pf-hero-card:hover,
    .pf-hero-card:focus-visible,
    .pf-hero-cards:hover .pf-hero-card:not(:hover),
    .pf-hero-cards:focus-within .pf-hero-card:not(:focus-visible):not(:hover) {
        width: 100%;
        align-self: stretch;
        transform: none;
        opacity: 1;
        padding: 16px;
    }

    .hero-visual-float {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-hero-card,
    .pf-hero-card::after,
    .pf-hero-card__icon,
    .pf-hero-card__go::after {
        transition: none;
    }

    .pf-hero-card:hover::after,
    .pf-hero-card:focus-visible::after {
        transform: translateX(-130%);
    }
}

.hero-ground-shadow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(1, 2, 78, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: shadow-scale 6s ease-in-out infinite;
}

/* Float Animations */
@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes shadow-scale {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) scale(0.85);
        opacity: 0.4;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 992px) {
    .intro-hero {
        padding-top: 145px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        align-items: center;
        text-align: center;
    }

    .hero-title {
        text-align: center;
        font-size: 36px;
    }

    .hero-desc {
        text-align: center;
        max-width: 100%;
    }

    .hero-eyebrow::after {
        display: none;
    }

    .hero-visual {
        order: -1;
        perspective: none;
    }

    .hero-stats {
        gap: 20px;
    }

    .stat-val {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .stat-divider {
        width: 100px;
        height: 1px;
    }
}

/*intro hero end*/

/*portfolio menu start*/

.portfolio-section {
    padding-top: 60px;
    padding-bottom: 80px;
}

/* ⚠ هدر سایت ثابت است؛ فاصلهٔ چسبیدن باید ارتفاع واقعی هدر را هم در خود داشته باشد،
   وگرنه این نوار دقیقاً زیر هدر پنهان می‌شود. مقدار --dmhb-header-offset را همان
   اسکریپت مشترک با ارتفاع لحظه‌ای هدر پر می‌کند و عدد پشتیبان زیر برای حالت بدون
   جاوااسکریپت است. */
.pf-bar {
    --dmhb-header-offset: 110px;
    display: flex;
    align-items: center;
    height: 80px;
    direction: rtl;
    margin-bottom: 50px;
    filter: drop-shadow(0 15px 30px rgba(1, 2, 78, 0.15));

    position: sticky;
    top: calc(var(--dmhb-header-offset) + 16px);
    z-index: 90;
}

.pf-nav-wrap {
    height: 100%;
    background: var(--e-global-color-f49861a);
    border-radius: 0 50px 50px 0;
    flex-grow: 1;
    padding: 0 24px 0 32px;
    display: flex;
    align-items: center;
    z-index: 3;
    overflow: hidden;
}

.pf-filter-list {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pf-filter-list::-webkit-scrollbar {
    display: none;
}

.pf-filter-link {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 15px;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    opacity: 0.7;
    transition: 0.3s;
}

.pf-filter-link:hover {
    opacity: 1;
}

.pf-filter-link.active {
    opacity: 1;
    color: var(--e-global-color-2175004) !important;
    font-weight: 700 !important;
}

.pf-filter-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--e-global-color-d2035ce);
    border-radius: 4px 4px 0 0;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pf-filter-link.active::after {
    width: 100%;
}

.pf-swoosh {
    height: 100%;
    width: 60px;
    margin-right: -1px;
    margin-left: -25px;
    z-index: 2;
}

.pf-swoosh svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pf-circle {
    width: 46px;
    height: 46px;
    background: var(--e-global-color-f49861a);
    border-radius: 50%;
    border: 2px solid var(--e-global-color-d2035ce);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    position: relative;
}

.pf-circle-inner {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--e-global-color-f49861a);
}

.pf-circle-inner svg {
    width: 16px;
    height: 16px;
}

.pf-neck {
    width: 20px;
    height: 30px;
    background: var(--e-global-color-f49861a);
    margin-right: -10px;
    margin-left: -10px;
    z-index: 1;
}

.pf-cta-wrap {
    height: 100%;
    background: var(--e-global-color-f49861a);
    border-radius: 50px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.pf-cta-btn-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pf-cta-btn {
    background: var(--accent-primary);
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s;
}

.pf-cta-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

.pf-cta-accent {
    width: 30px;
    height: 6px;
    background: var(--e-global-color-d2035ce);
    border-radius: 0 0 8px 8px;
    margin-top: -2px;
    position: relative;
    z-index: 0;
}

@media (max-width: 992px) {
    .pf-bar {
        flex-direction: column;
        height: auto;
        background: var(--e-global-color-f49861a);
        border-radius: 20px;
        padding: 20px 16px;
        gap: 20px;
        position: relative;
        /* ⚠ نوار در موبایل چسبنده نیست، ولی مقدار top نسخهٔ چسبنده اینجا هم اثر می‌کرد و
           عنصرِ نسبی را به‌اندازهٔ ارتفاع هدر پایین می‌کشید؛ نتیجه، افتادنش روی کارت اول
           بود. صفر شدن top، نوار را سرِ جای واقعی خودش برمی‌گرداند. */
        top: auto;
        /* فاصله تا کارت‌ها همان فاصلهٔ کارت‌ها از هم باشد. */
        margin-bottom: 40px;
    }

    .pf-neck, .pf-circle, .pf-swoosh {
        display: none;
    }

    .pf-cta-wrap, .pf-nav-wrap {
        height: auto;
        background: transparent;
        padding: 0;
        border-radius: 0;
        width: 100%;
        position: relative;
    }

    .pf-nav-wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 10px;
        width: 40px;
        background: linear-gradient(to right, #252653 10%, transparent 100%);
        z-index: 10;
        pointer-events: none;
        border-radius: 8px 0 0 8px;
    }

    .pf-cta-btn-wrapper {
        width: 100%;
    }

    .pf-cta-btn {
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 16px;
    }

    .pf-cta-accent {
        display: none;
    }

    .pf-filter-list {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 10px;
    }

    .pf-filter-link {
        padding: 10px 0;
    }
}

/*portfolio menu end*/

/*portfolio grid start*/

.portfolio-section {
    padding-top: 60px;
    padding-bottom: 80px;
}

.pf-filter-list {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pf-filter-list::-webkit-scrollbar {
    display: none;
}

.pf-filter-link:hover {
    opacity: 1;
}

/* عنوان سکشن جای تب‌ها (h2 یا p): ظاهرِ همان تب فعال، بدون فاصله و اندازهٔ پیش‌فرض تیتر. */
.pf-bar-title {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
}

/*grid start*/

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 40px;
    direction: rtl;
}

/*card design start*/

.portfolio-card {
    position: relative;
    height: 420px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.portfolio-card:hover {
    box-shadow: none;
}

.card-mockups {
    position: absolute;
    top: 33px;
    bottom: 33px;
    left: 24px;
    right: 24px;
    display: flex;
    gap: 16px;
    direction: ltr;
    z-index: 1;
}

.mockup-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    height: 100%;
}

.mockup-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    z-index: 3;
    pointer-events: none;
}

/*theme settings*/

.portfolio-card {
    --theme-color: var(--e-global-color-f49861a);
    background-color: var(--theme-color);
}

.portfolio-card .mockup-overlay {
    background-color: var(--theme-color);
}

.portfolio-card .special-tag {
    background-color: var(--theme-color);
}

.portfolio-card .star-icon {
    color: #fff;
}

.portfolio-card .heart-tag {
    color: var(--theme-color);
}

.portfolio-card .title-tab {
    color: var(--theme-color);
}

.portfolio-card .open-btn {
    color: var(--theme-color);
}

.portfolio-card .vertical-text {
    background-color: var(--theme-color);
    color: #fff;
}

.portfolio-card .mockup-box::after {
    background: linear-gradient(
            to top,
            var(--theme-color) 0%,
            color-mix(in srgb, var(--theme-color), transparent 100%) 100%
    );
}

/*card show animations*/

.portfolio-card.show-card {
    animation: fillIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fillIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.mobile-box {
    width: 32%;
}

.desktop-box {
    width: 68%;
}

.mockup-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.gif-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.portfolio-card:hover .gif-img {
    opacity: 1;
}

.mockup-overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: opacity 0.4s ease;
    z-index: 3;
    pointer-events: none;
}

.portfolio-card:hover .mockup-overlay {
    opacity: 0;
}

/* SpotPay-style card — single tall screenshot that scrolls on hover.
   Replaces the old two-box (mobile+desktop) mockup. Each card supplies its own images
   through the --spotpay-static / --spotpay-scroll custom properties set inline on
   .portfolio-card, so this block never needs editing per card.
   ⚠ Currently only card 1 uses this; the rest still use .card-mockups. Once every card
   is migrated, the .card-mockups/.mockup-box/.gif-img rules above become dead and should
   be removed together with their markup. */
.spotpay-mockup {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.spotpay-frame {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

/* ⚠ These paint from --spotpay-static / --spotpay-scroll, which the MARKUP does not set.
   The markup sets --spotpay-static-src / --spotpay-scroll-src; demos.js copies them across
   once the card nears the viewport. That indirection is the whole lazy-loading mechanism —
   pointing these at the -src props directly would make all 55 cards download their artwork
   on page load again. A <noscript> block in portfolio.html restores the direct mapping. */
.spotpay-frame.spotpay-static {
    background-image: var(--spotpay-static, none);
    background-size: 90%;
    background-position: center;
    opacity: 1;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.spotpay-frame.spotpay-scroll {
    background-image: var(--spotpay-scroll, none);
    background-size: 100% auto;
    background-position: center top;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease, background-position 22s linear;
}

.portfolio-card:hover .spotpay-frame.spotpay-static {
    opacity: 0;
}

.portfolio-card:hover .spotpay-frame.spotpay-scroll {
    opacity: 1;
    background-position: center 100%;
}

/* ⚠ ماسک عمودی: تینت رنگی فقط لبهٔ بالا و پایین کارت را می‌گیرد و وسط کاملاً شفاف می‌ماند
   (همان ظاهر تصویر مرجع). حذف mask-image یعنی برگشتن به تینت تمام‌صفحه.
   نسخهٔ -webkit عمداً پیش از نسخهٔ استاندارد نوشته شده تا مرورگرهای نو، مقدار بدون پیشوند را
   به‌عنوان مقدار نهایی بخوانند؛ جابه‌جا کردن ترتیب یعنی سافاری قدیمی برنده می‌شود. */
.spotpay-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--theme-color);
    mix-blend-mode: multiply;
    opacity: 0.85;
    transition: opacity 0.4s ease;
    pointer-events: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 0.72) 13%,
    rgba(0, 0, 0, 0.38) 17%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0) 64%,
    rgba(0, 0, 0, 0.12) 70%,
    rgba(0, 0, 0, 0.38) 76%,
    rgba(0, 0, 0, 0.72) 83%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 0.72) 13%,
    rgba(0, 0, 0, 0.38) 17%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0) 64%,
    rgba(0, 0, 0, 0.12) 70%,
    rgba(0, 0, 0, 0.38) 76%,
    rgba(0, 0, 0, 0.72) 83%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 1) 100%);
}

.portfolio-card:hover .spotpay-overlay {
    opacity: 0;
}

.card-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.special-tag, .card-top-logo, .open-btn, .logo-container, .title-tab {
    pointer-events: auto;
}

.special-tag {
    position: absolute;
    top: -10px;
    left: 40px;
    background: var(--e-global-color-f49861a);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 14px 16px 6px;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.star-icon {
    color: var(--e-global-color-d2035ce);
}

.title-tab {
    position: absolute;
    bottom: 0;
    right: 40px;
    background: #fff;
    color: var(--e-global-color-f49861a);
    padding: 12px 32px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.title-tab::before {
    content: '';
    position: absolute;
    left: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 0, transparent 20px, #fff 21px);
}

.title-tab::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 0, transparent 20px, #fff 21px);
}

.project-title {
    font-family: 'gofteh', sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.logo-container {
    position: absolute;
    bottom: 24px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    /* با هاور محو می‌شود تا نمای اسکرول‌شوندهٔ سایت پشتش دیده شود و با خروج ماوس برمی‌گردد. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.portfolio-card:hover .logo-container,
.portfolio-card:focus-within .logo-container {
    opacity: 0;
    transform: translateY(10px);
}

.card-logo {
    width: 40px;
    height: auto;
    /*filter: brightness(0) invert(1);*/
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.brand-tagline {
    font-size: 12px;
    opacity: 0.8;
}


.open-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    background: #fff;
    color: var(--e-global-color-f49861a);
    width: 50px;
    height: 80px;
    border-radius: 0 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

.open-btn svg {
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
}

.portfolio-card:hover .open-btn {
    transform: translateY(-50%) translateX(0);
}

.portfolio-card .card-top-logo {
    position: absolute;
    top: -4px;
    right: 40px;
    background: #ffffffad;
    width: 60px;
    height: 60px;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.portfolio-card .card-top-logo::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 100%, transparent 20px, #ffffffad 21px);
}

.portfolio-card .card-top-logo::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, transparent 20px, #ffffffad 21px);
}

.portfolio-card .top-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ⚠ This tag is rotated, so its LAYOUT box is wide-and-short while what you actually
   see is narrow-and-tall. `right:` therefore positions the layout box, not the visual
   one — which is why a hand-tuned `right: -24px` still left a visible gap: the rotated
   result ends up (textWidth/2 - height/2) further in than the offset suggests.

   Fix without hardcoding the text width: `right: 0` puts the layout box's right edge on
   the card edge, `translateX(50%)` re-centres that box on the edge, then -19px (half the
   38px height, which BECOMES the visual width once rotated) pulls the visual right edge
   exactly onto the card edge. The text width cancels out entirely, so this stays flush
   even if the label text changes.
   line-height + padding are pinned so that 38px height stays true — change either and
   the -19px must change with it (it is always height / 2). */
.vertical-text {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(calc(50% - 19px)) rotate(-90deg);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px; /* 18 + 10 + 10 padding = 38px box height */
    letter-spacing: 2px;
    white-space: nowrap;
    padding: 10px 28px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 5;
    background-color: #fff;
    color: #333;
    opacity: 0;
    visibility: hidden;
}

.portfolio-card:hover .vertical-text {
    opacity: 0.7;
    visibility: visible;
}

@media (max-width: 992px) {

    .pf-neck, .pf-circle, .pf-swoosh {
        display: none;
    }

    .pf-cta-wrap, .pf-nav-wrap {
        height: auto;
        background: transparent;
        padding: 0;
        border-radius: 0;
        width: 100%;
        padding: 2px;
    }

    .pf-cta-btn-wrapper {
        width: 100%;
    }

    .pf-cta-btn {
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 16px;
    }

    .pf-cta-accent {
        display: none;
    }

    .pf-filter-list {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 10px;
        gap: 22px;
    }

    .pf-filter-link {
        padding: 10px 0;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card {
        height: 350px;
    }

    .mobile-box {
        display: none;
    }

    .desktop-box {
        width: 100%;
    }

    .special-tag, .card-top-logo {
        transform: scale(0.9);
    }

    .title-tab {
        right: -7px;
        padding: 12px 24px;
    }

}

.card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
}

.special-tag,
.card-top-logo,
.open-btn,
.logo-container,
.title-tab {
    z-index: 2;
}

/*card design end*/

/*portfolio grid end*/

/*new landing ctas*/

.portfolio-redirect-box {
    width: 100%;
    background: var(--e-global-color-0d88c2d);
    border-radius: 30px;
    padding: 60px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: fadeUp 0.4s ease-out forwards;
    margin-bottom: 30px;
}

.redirect-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.redirect-content h3 {
    color: #fff;
    font-size: 32px;
    font-weight: 900;
    margin: 0;
}

.redirect-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 16px 0;
}

.redirect-btn {
    width: auto;
    min-width: 220px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .redirect-content h3 { font-size: 24px; }
    .redirect-content p { font-size: 14px; }
}
/* ============================================================
   FRONT-PAGE THEME LAYER (appended for demos redesign)
   brand variable overrides + header/footer/offcanvas theme
   ============================================================ */
/* Scoped to the DM House template body so these brand values beat Elementor's
   own `.elementor-kit-N` global-color definitions (equal specificity would let
   Elementor win by load order, which is why the old kit colors leaked in). */
body.dmhouse-tpl {
    --e-global-color-secondary: #F5D68F;
    --e-global-color-f49861a: #0A192F;
    --e-global-color-d2035ce: #0A192F;
    --e-global-color-2175004: #B87333;
    --e-global-color-da3ec38: #B87333;
    --e-global-color-5dad059: rgba(245, 214, 143, 0.35);
    --e-global-color-0d88c2d: #0A192F;
    --e-global-color-text: #0A192F;
}

/* The per-card inline `--theme-color` tints the card frame around the mockups. */
.portfolio-card {
    background-color: var(--theme-color, #0A192F);
}

/* =========================================
   Front-Page Theme Layer (header/footer scope)
   متغیرها و کامپوننت‌های تم فرانت‌پیج — بدون ریستِ سراسری تایپوگرافی
========================================= */
:root {
    --color-navy: #0A192F;
    --color-copper: #B87333;
    --color-gold: #F5D68F;

    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);

    /* پیش‌فرض‌های روشن در ریشه (برای المان‌های بدون کلاس theme-* مثل آف‌کانواس) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;
}

/* متغیرهای تم لایت (روی رَپرهای هدر/فوتر/آف‌کانواس اعمال می‌شود) */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);
    --prev-bg: var(--color-navy);
}

/* متغیرهای تم دارک */
.theme-dark {
    --bg-primary: var(--color-navy);
    --bg-secondary: #061121;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e0;
    --accent-primary: var(--color-gold);
    --accent-secondary: var(--color-copper);
    --border-color: #1a2a42;
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --prev-bg: #ffffff;
}

/* pill-radius مخصوص دکمه‌های تم فرانت (مستقل از pill-radius سکشن‌ها) */
.dm-btn-wrapper,
.dm-footer-section,
.main-header,
.dm-offcanvas {
    --fp-pill-radius: 50px;
}

/* =========================================
   Global Primary CTA (Shine Button)
========================================= */
.dm-btn-wrapper .btn-shine {
    position: relative;
    margin: 0;
    padding: 15px;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: var(--fp-pill-radius);
    color: var(--accent-primary);
    font-weight: 700;
    font-family: inherit;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.dm-btn-wrapper .btn-shine span {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    z-index: 2;
    position: relative;
    transition: color 0.3s ease;
}

.dm-btn-wrapper .btn-shine:hover {
    animation: rotate624 0.7s ease-in-out both;
    border-color: var(--accent-secondary);
}

.dm-btn-wrapper .btn-shine:hover span {
    animation: storm1261 0.7s ease-in-out both;
    animation-delay: 0.06s;
    color: var(--accent-secondary);
}

@keyframes rotate624 {
    0% { transform: rotate(0deg) translate3d(0, 0, 0); }
    25% { transform: rotate(3deg) translate3d(0, 0, 0); }
    50% { transform: rotate(-3deg) translate3d(0, 0, 0); }
    75% { transform: rotate(1deg) translate3d(0, 0, 0); }
    100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes storm1261 {
    0% { transform: translate3d(0, 0, 0) translateZ(0); }
    25% { transform: translate3d(4px, 0, 0) translateZ(0); }
    50% { transform: translate3d(-3px, 0, 0) translateZ(0); }
    75% { transform: translate3d(2px, 0, 0) translateZ(0); }
    100% { transform: translate3d(0, 0, 0) translateZ(0); }
}

.dm-btn-wrapper .btn-shine:after {
    background: var(--accent-secondary);
    content: "";
    height: 155px;
    right: -75px;
    opacity: 0.3;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: 0;
}

.dm-btn-wrapper .btn-shine:hover:after {
    right: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* =========================================
   Back To Top
========================================= */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-copper);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--color-gold);
    color: var(--color-navy);
    transform: translateY(-5px);
}

/* ---- offcanvas / header menu ---- */
/* =========================================
   1. Header Flex Layout
========================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 24px 0;

    /* تغییر مهم: حذف transparent و جایگزینی با متغیر رنگی */
    background-color: var(--bg-primary);

    /* اضافه کردن border ظریف برای تفکیک بهتر هدر از سکشن‌ها */
    /*border-bottom: 1px solid var(--border-color);*/

    transition: background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    padding var(--transition-fast);
}

.main-header.theme-dark {
    box-shadow: var(--card-shadow);
    padding: 14px 0;
    background-color: var(--bg-primary);
}

.main-header.scrolled {
    background-color: var(--bg-primary);
    box-shadow: var(--card-shadow);
    padding: 14px 0;
}

.main-header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.main-header .header-right {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.main-header .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-header .header-left {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.main-header .header-logo img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

/* =========================================
   2. Theme Switcher & Buttons
========================================= */
.main-header .ui-switch {
    /* switch variables */
    --switch-bg: rgb(135, 150, 165);
    --switch-width: 48px;
    --switch-height: 20px;
    /* circle variables */
    --circle-diameter: 32px;
    --circle-bg: rgb(0, 56, 146);
    --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);

    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-header .ui-switch .slider {
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
}

.main-header .ui-switch .slider .circle {
    top: calc(var(--circle-inset) * -1);
    left: 0;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
    background: var(--circle-bg);
    border-radius: inherit;
    /* عکس خورشید (حالت لایت) */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.main-header .ui-switch .slider .circle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    border-radius: inherit;
    transition: all 500ms;
    opacity: 0;
}

/* افکت کلیک */
.main-header .ui-switch:active .slider .circle::before {
    transition: 0s;
    opacity: 1;
    width: 0;
    height: 0;
}

/* --- منطق وصل شده به جاوااسکریپت شما (دارک مود) --- */
.main-header.theme-dark .ui-switch .slider .circle {
    left: calc(100% - var(--circle-diameter));
    /* عکس ماه (حالت دارک) */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

/* استایل دکمه‌های هدر (این بخش دست‌نخورده باقی می‌ماند) */
.main-header .header-left .btn-outline {
    background-color: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
    border-radius: 30px;
    padding: 10px 24px;
    font-weight: bold;
    transition: all var(--transition-fast);
}

.main-header .header-left .btn-outline:hover {
    background-color: var(--accent-primary);
    color: #fff;
}

.main-header.theme-dark .header-left .btn-outline {
    border-color: rgba(255, 255, 255, 0.2);
}

.main-header.theme-dark .header-left .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.main-header .desktop-nav-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 40px;
}

.main-header .desktop-nav-links a {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding: 10px 0;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.main-header .desktop-nav-links a:hover {
    color: var(--accent-primary);
}

.main-header .mobile-menu-toggle {
    background: var(--color-navy);
    border: none;
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all var(--transition-fast);
}

.main-header.theme-dark .mobile-menu-toggle {
    background: #121212;
    border: 1px solid #2a2a2a;
}

/* =========================================
   3. Offcanvas Base & Overlay Backdrop
========================================= */
.dm-offcanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.4s ease;
}

.dm-offcanvas.active {
    visibility: visible;
    pointer-events: auto;
}

.dm-offcanvas .offcanvas-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.dm-offcanvas.theme-dark .offcanvas-backdrop {
    background: rgba(6, 17, 33, 0.7);
}

.dm-offcanvas.active .offcanvas-backdrop {
    opacity: 1;
}

.dm-offcanvas .offcanvas-content {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--bg-primary);
    box-shadow: -6px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* راز حل مشکل لگ: پنهان بودن پیش‌فرض + تاخیر 0.4 ثانیه‌ای برای پنهان شدن (تا انیمیشن تمام شود) */
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
}

/* =========================================
   4. Primary Panel (Layer 1)
========================================= */
.dm-offcanvas .primary-panel {
    right: 0;
    width: 100%;
    max-width: 460px;
    z-index: 10;
    transform: translateX(100%);
    border-left: 1px solid var(--border-color);
}

.dm-offcanvas.active .primary-panel {
    transform: translateX(0);
    visibility: visible;
    /* هنگام باز شدن: مرئی شدن آنی و بدون تاخیر (0s) */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

/* بستن آنی و بدون لگ کل آف‌کانواس */
.dm-offcanvas:not(.active) .primary-panel,
.dm-offcanvas:not(.active) .secondary-panel {
    transform: translateX(100%) !important;
    visibility: hidden !important;
    transition: none !important;
}

.dm-offcanvas .offcanvas-header {
    padding: 30px 30px 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
}

.dm-offcanvas .offcanvas-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dm-offcanvas .offcanvas-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.dm-offcanvas .offcanvas-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
    opacity: 0.8;
}

.dm-offcanvas .offcanvas-close {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.dm-offcanvas .offcanvas-close span {
    margin-top: 5px;
}

.dm-offcanvas .offcanvas-close:hover {
    background-color: var(--accent-primary);
    color: #ffffff;
}

.dm-offcanvas .offcanvas-body {
    flex: 1;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px 0;
}

.dm-offcanvas .offcanvas-footer {
    padding: 30px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
}

.dm-offcanvas .offcanvas-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-offcanvas .contact-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dm-offcanvas .contact-phone {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    font-family: 'dana', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color var(--transition-fast);
}

.dm-offcanvas .contact-phone i {
    color: var(--accent-secondary);
    font-size: 20px;
}

.dm-offcanvas .contact-phone:hover {
    color: var(--accent-primary);
}

.dm-offcanvas .offcanvas-socials {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 10px;
}

.dm-offcanvas .offcanvas-socials a {
    color: var(--text-secondary);
    font-size: 22px;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.dm-offcanvas .offcanvas-socials a:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateY(-4px);
}

.dm-offcanvas.theme-dark .offcanvas-socials a {
    background-color: rgba(255, 255, 255, 0.03);
}

.dm-offcanvas.theme-dark .offcanvas-socials a:hover {
    background-color: rgba(184, 115, 51, 0.1);
}

/* =========================================
   5. Secondary Panel (Golden Cascading Layer 2)
========================================= */
.dm-offcanvas .secondary-panel {
    /*background-color: var(--accent-secondary) !important;*/
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1004%26quot%3b)' fill='none'%3e%3cpath d='M-231.31 153.49C-97.13 163.54-23.9 417.21 231.69 427.89 487.28 438.57 572.16 586.62 694.69 588.89' stroke='rgba(245%2c 214%2c 143%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-246.71 397.54C-133.37 397.75-22.76 467.54 201.2 467.54 425.16 467.54 422.59 397.15 649.11 397.54 875.63 397.93 973.87 598.63 1097.02 603.49' stroke='rgba(245%2c 214%2c 143%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-204.62 55.07C-78.05 56.14 6.53 166.78 285.01 183.87 563.49 200.96 617.57 565.05 774.64 590.36' stroke='rgba(245%2c 214%2c 143%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-277.72 287.32C-105.53 291.2 112.1 523.64 367.75 528.12 623.41 532.6 606.81 616.15 690.49 616.96' stroke='rgba(245%2c 214%2c 143%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-255.66 124.87C-66.03 125.28 187.98 238.31 492.78 248.07 797.58 257.83 740.99 575.48 867 601.96' stroke='rgba(245%2c 214%2c 143%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1004'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: bottom;
    background-repeat: no-repeat;
    border-left: none;
    box-shadow: none;
    border-radius: 50px 0 0 50px;
}

.dm-offcanvas .secondary-panel.active {
    visibility: visible;
    /* هنگام باز شدن: مرئی شدن آنی و بدون تاخیر (0s) */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.dm-offcanvas .secondary-panel .sub-panel-title,
.dm-offcanvas .secondary-panel .btn-panel-back {
    color: var(--text-primary) !important; /* رنگ سرمه‌ای برای خوانایی روی طلایی */
}

/* اصلاح رنگ لینک‌ها در پنل دوم برای تم دارک */
.dm-offcanvas .secondary-panel .sub-menu-links li a {
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary) !important;
}

/* تنظیم دقیق‌تر برای دارک مود */
.dm-offcanvas.theme-dark .secondary-panel .sub-panel-title,
.dm-offcanvas.theme-dark .secondary-panel .btn-panel-back,
.dm-offcanvas.theme-dark .secondary-panel .sub-menu-links li a {
    color: var(--text-primary) !important; /* ثابت ماندن روی رنگ سرمه‌ای برای کنتراست */
}

.dm-offcanvas .golden-header {
    border-bottom: 1px solid var(--border-color);;
    display: flex;
    align-items: center;
    padding: 30px;
}

.dm-offcanvas .btn-panel-back {
    background: transparent;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    transition: transform var(--transition-fast);
}

.dm-offcanvas .btn-panel-back:hover {
    transform: translateX(4px);
}

.dm-offcanvas .secondary-panel .sub-menu-links li a {
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--color-navy) !important;
}

.dm-offcanvas .secondary-panel .sub-menu-links li a:hover {
    background-color: var(--color-navy) !important;
    color: var(--accent-secondary) !important;
    transform: translateX(-6px);
}

/* مخفی کردن منوی پایه موبایل و دکمه‌های بازگشت آن در دسکتاپ */
@media (min-width: 993px) {
    .mobile-only-root,
    .btn-mobile-back {
        display: none !important;
    }
}

/* استایل دکمه بازگشت لایه ۲ به لایه ۱ در موبایل */
.btn-mobile-back {
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 30px 16px 30px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
    width: 100%;
}

/* منطق آبشاری در دسکتاپ و موبایل */
@media (min-width: 993px) {
    .dm-offcanvas .secondary-panel {
        right: 460px;
        width: 380px;
        z-index: 5;
        transform: translateX(100%);
    }

    .dm-offcanvas .secondary-panel.active {
        transform: translateX(0);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    }
}

@media (max-width: 992px) {
    .dm-offcanvas .secondary-panel {
        right: 0;
        width: 100%;
        max-width: 100%;
        z-index: 20;
        transform: translateX(100%);
        border-radius: 0;
    }

    .dm-offcanvas .secondary-panel.active {
        transform: translateX(0);
        width: 88%;
        border-radius: 50px 0 0 50px;
    }
}

/* =========================================
   6. Menu Lists, Content & Typography
========================================= */
.dm-offcanvas .mega-panel {
    position: relative;
    width: 100%;
    display: none;
}

.dm-offcanvas .mega-panel.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dm-offcanvas .mega-content-group {
    display: none;
}

.dm-offcanvas .mega-content-group.active {
    display: block;
}

.dm-offcanvas .drilldown-menu,
.dm-offcanvas .simple-mega-menu,
.dm-offcanvas .sub-menu-links {
    list-style: none;
    padding: 0 30px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-offcanvas .drilldown-menu li a,
.dm-offcanvas .simple-mega-menu li a,
.dm-offcanvas .sub-menu-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background-color: var(--bg-secondary);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
}

.dm-offcanvas .drilldown-menu li a:hover,
.dm-offcanvas .simple-mega-menu li a:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
    color: var(--accent-primary);
    transform: translateX(-6px);
}

.dm-offcanvas .sub-panel-title {
    font-size: 22px;
    margin: 0 30px 24px 30px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
}

/* =========================================
   7. Responsive Overrides (Mobile)
========================================= */
@media (max-width: 992px) {
    .main-header {
        padding: 16px 0;
    }

    /* جابجایی جایگاه لوگو و برگر منو در موبایل */
    .main-header .header-left {
        order: 1;
        justify-content: flex-start !important;
    }

    .main-header .header-right {
        order: 3;
        justify-content: flex-end !important;
    }

    .dm-offcanvas .primary-panel {
        width: 88%;
        border-radius: 50px 0 0 50px;
    }

    .dm-offcanvas .mega-content-group {
        margin-bottom: 24px;
    }

    .dm-offcanvas .mega-content-group:not(:last-child) {
        border-bottom: 1px dashed var(--border-color);
        padding-bottom: 16px;
    }
}


/* ---- footer ---- */
/* =========================================
   Footer Section
========================================= */
.dm-footer-section {
    background-color: var(--bg-primary);
    padding: 100px 0 40px;
    position: relative;
    z-index: 10;
    /*border-top: 1px solid var(--border-color);*/
}


.dm-footer-section .dm-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.dm-footer-section .footer-text-col {
    max-width: 400px;
}

.dm-footer-section .footer-tagline {
    font-size: 32px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.dm-footer-section .footer-links-col {
    display: flex;
    gap: 80px;
}

.dm-footer-section .footer-link-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-footer-section .footer-link-group a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 16px;
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.dm-footer-section .footer-link-group a:hover {
    color: var(--accent-primary);
    transform: translateX(-4px);
}

.dm-footer-section .dm-footer-middle {
    width: 100%;
    display: grid;
    grid-template-columns: 7fr 3fr; /* تقسیم 70 به 30 */
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.dm-footer-section .footer-logo-col {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.dm-footer-section .footer-giant-logo {
    width: 100%;
    max-width: 700px;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.dm-footer-section .footer-ticker-col {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.dm-footer-section .footer-ticker-wrapper {
    position: relative;
    height: 280px;
    width: 100%;
    max-width: 320px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

.dm-footer-section .footer-ticker {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-footer-section .f-ticker-item {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.2;
    transform: scale(0.85);
    filter: blur(2px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.dm-footer-section .f-ticker-item.active {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
    border-color: var(--accent-secondary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    box-shadow: 0 4px 10px rgba(184, 115, 51, 0.15);
}

.dm-footer-section.theme-dark .f-ticker-item.active {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* =========================================
   Responsive Logic for Footer Middle
========================================= */
@media (max-width: 992px) {
    .dm-footer-section .dm-footer-middle {
        grid-template-columns: 1fr; /* در موبایل تک‌ستونه می‌شود */
        gap: 50px;
        margin-bottom: 60px;
    }

    .dm-footer-section .footer-ticker-col {
        justify-content: center;
    }

    .dm-footer-section .footer-ticker-wrapper {
        height: 220px;
        max-width: 100%;
    }
}

/* --- Bottom Area (Copyright) --- */
.dm-footer-section .dm-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    font-size: 14px;
    color: var(--text-secondary);
}

.dm-footer-section .footer-powered a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: bold;
}

/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .dm-footer-section {
        padding: 80px 0 30px;
    }

    .dm-footer-section .dm-footer-top {
        flex-direction: column;
        gap: 50px;
        margin-bottom: 60px;
    }

    .dm-footer-section .footer-tagline {
        font-size: 26px;
    }

    .dm-footer-section .footer-links-col {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }

    .dm-footer-section .dm-footer-middle {
        margin-bottom: 40px;
    }

    .dm-footer-section .dm-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}