/* ============================================================================
   هرکجا | MTheme — صفحات Marketing
   جایگزین Theme/assets/css/tourstyle.css (تم مستقل قدیمی با پس‌زمینه تیره)
   ----------------------------------------------------------------------------
   صفحات مصرف‌کننده:
     Views/Marketing/M.cshtml            (لیست چهار حوزه)
     Views/Marketing/Medical.cshtml      (پزشکان)
     Views/Marketing/Restaurant.cshtml   (رستوران‌ها)
     Views/Marketing/clinic.cshtml       (کلینیک زیبایی)
     Views/Marketing/accommodation.cshtml(هتل و اقامتگاه)

   ⚠️ همان نام‌های کلاس قبلی (hero / content-section / content-card / stats /
      progress-section / faq-section / cta-section / contact-form-container …)
      حذف/تغییر نام نشده‌اند — فقط استایل‌شان با Design System پروژه بازنویسی شد.
      هیچ کتابخانه/CDN/فونتی اضافه نشد.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ۰) پروتکل مشترک: بخش‌ها و تیترها
   --------------------------------------------------------------------------- */
.hz-mk-section,
.content-section,
.progress-section,
.stats,
.faq-section {
    padding: clamp(46px, 6vw, 84px) 0;
}
.content-section + .content-section { padding-top: 0; }

/* تیتر بخش */
.content-header {
    max-width: 780px;
    margin: 0 auto clamp(30px, 4vw, 52px);
    text-align: center;
}
.content-title,
.cta-title,
.hero-title {
    font-size: clamp(1.3rem, 3.2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.7;
    color: var(--ink);
    margin: 0 0 14px;
}
.content-subtitle {
    font-size: clamp(.92rem, 1.5vw, 1.02rem);
    line-height: 2.05;
    color: var(--muted);
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
}

/* ---------------------------------------------------------------------------
   ۱) Hero
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(54px, 8vw, 104px) 0 clamp(46px, 6vw, 82px);
    background: var(--bg-cream);
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    inset-block-start: -140px;
    inset-inline-end: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--ambient-brand, rgba(45, 108, 223, .13));
    filter: blur(70px);
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.hero-title { color: var(--ink); }
.hero-subtitle {
    font-size: clamp(1rem, 1.9vw, 1.22rem);
    font-weight: 700;
    line-height: 2;
    color: var(--brand);
    margin: 0 0 18px;
}
.hero-description {
    font-size: clamp(.93rem, 1.5vw, 1.03rem);
    line-height: 2.15;
    color: var(--ink-soft);
    margin: 0 auto clamp(24px, 3vw, 34px);
    max-width: 72ch;
    text-align: justify;
    text-justify: inter-word;
}

/* ---------------------------------------------------------------------------
   ۲) گرید کارت‌های محتوا
   --------------------------------------------------------------------------- */
.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.content-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.content-grid.is-4 { grid-template-columns: repeat(4, 1fr); }

.content-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
    height: 100%;
}
.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(45, 108, 223, .24);
}
.content-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.content-card-title {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.8;
    color: var(--ink);
    margin: 0 0 10px;
}
.content-card-desc {
    font-size: .9rem;
    line-height: 2;
    color: var(--muted);
    margin: 0 0 16px;
}
.content-list {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.content-list li {
    position: relative;
    padding-inline-start: 22px;
    font-size: .87rem;
    line-height: 1.95;
    color: var(--ink-soft);
}
.content-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 4px;
    inset-block-start: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .7;
}

/* ---------------------------------------------------------------------------
   ۳) نوار آماری + نوار پیشرفت
   --------------------------------------------------------------------------- */
.stats { background: var(--bg-soft); }
.stats-grid,
.stats .container > .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.stat-item {
    padding: 24px 18px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    text-align: center;
}
.stat-number {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    color: var(--brand);
    line-height: 1.4;
    display: block;
}
.stat-label {
    font-size: .86rem;
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.9;
    display: block;
}

.progress-list { display: grid; gap: 22px; max-width: 780px; margin: 0 auto; }
.progress-item { text-align: start; }
.progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 9px;
}
.progress-track {
    height: 10px;
    border-radius: 99px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand) 0%, #3B82F6 100%);
    transition: width 1.2s cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------------
   ۴) FAQ (آکاردئون)
   --------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq-item {
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: var(--transition);
    margin-bottom: 10px;
}
.faq-item.active { border-color: rgba(45, 108, 223, .3); box-shadow: var(--shadow-xs); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.9;
    color: var(--ink);
    margin: 0;
}
.faq-question::after {
    content: '\f078';                 /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .78rem;
    color: var(--brand);
    transition: transform .3s ease;
    flex-shrink: 0;
}
.faq-item.active .faq-question::after { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
    padding: 0 20px;
}
.faq-item.active .faq-answer { max-height: 600px; padding: 0 20px 18px; }
.faq-answer p {
    font-size: .89rem;
    line-height: 2.05;
    color: var(--muted);
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
}

/* ---------------------------------------------------------------------------
   ۵) CTA
   --------------------------------------------------------------------------- */
.cta-section {
    padding: clamp(30px, 5vw, 56px) clamp(22px, 4vw, 48px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand) 0%, #1E4FA8 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: clamp(40px, 5vw, 72px) 0;
}
.cta-section::after {
    content: '';
    position: absolute;
    inset-block-end: -70px;
    inset-inline-start: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .24);
    filter: blur(48px);
    pointer-events: none;
}
.cta-section .cta-title { color: #fff; position: relative; }
.cta-description {
    position: relative;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(.9rem, 1.5vw, 1rem);
    line-height: 2.05;
    max-width: 700px;
    margin: 0 auto 24px;
    text-align: justify;
    text-justify: inter-word;
}
.cta-section .btn { position: relative; }

/* ---------------------------------------------------------------------------
   ۶) دکمه‌ها (هم‌خانواده با .btn پروژه — بدون تغییر نام کلاس)
   --------------------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 10px 26px -14px rgba(45, 108, 223, .8);
    padding: 8px 20px;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}
.cta-section .btn-primary { background: #fff; color: var(--brand); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45); }
.cta-section .btn-primary:hover { background: #fff; color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   ۷) دکمه شناور + پنل فرم تماس
   --------------------------------------------------------------------------- */
.floating-btn {
    position: fixed;
    inset-block-end: 92px;
    inset-inline-start: 20px;
    /* ⚠️ باید بالاتر از پنل فرم (z-index:1000) نباشد ولی پنل هم
       در حالت بسته visibility:hidden است و کلیک را نمی‌گیرد.
       مقدار 1100 تضمین می‌کند دکمه همیشه قابل کلیک باشد، حتی اگر
       مرورگری visibility را دیر اعمال کند. */
    z-index: 1100;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    border: 0;
    box-shadow: 0 14px 34px -14px rgba(45, 108, 223, .9);
    transition: var(--transition);
}
.floating-btn:hover { background: var(--brand-dark); transform: translateY(-3px) scale(1.04); }
/* وقتی پنل باز است دکمه پنهان شود تا روی فرم نیفتد
   (کلاس mk-form-open را خود اسکریپت صفحه روی <body> می‌گذارد) */
body.mk-form-open .floating-btn { display: none; }

.contact-form-container {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1000;
    width: min(420px, 100%);
    padding: 30px 26px;
    background: var(--card);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    /* ⚠️ visibility/opacity لازم است — بدون آن‌ها پنل حتی وقتی بسته است
       در جریان صفحه می‌ماند و transition transform به‌تنهایی «مخفی» نمی‌کند.
       transform برای انیمیشن اسلاید؛ visibility/opacity برای حالت واقعی بسته. */
    visibility: hidden;
    opacity: 0;
    transform: translateX(-110%);
    transition: transform .38s cubic-bezier(.2, .7, .2, 1),
                opacity .28s ease,
                visibility .38s;
}
.contact-form-container.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}
/* در RTL پنل از سمت راست باز می‌شود → آفست اولیه باید مثبت باشد */
html[dir="rtl"] .contact-form-container { transform: translateX(110%); }
html[dir="rtl"] .contact-form-container.show { transform: translateX(0); }

.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.form-header h3 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ink) !important;      /* خنثی‌سازی رنگ روشن inline قدیمی */
    margin: 0;
}
.close-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.close-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
}
.form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--ink);
    font-family: inherit;
    font-size: .92rem;
    line-height: 1.8;
    transition: var(--transition);
}
.form-control:focus {
    outline: 0;
    border-color: var(--brand);
    background: var(--card);
    box-shadow: 0 0 0 4px rgba(45, 108, 223, .12);
}
.form-control::placeholder { color: var(--muted); }
textarea.form-control { min-height: 110px; resize: vertical; }
.submit-btn { width: 100%; margin-top: 6px; }

/* ---------------------------------------------------------------------------
   ۸) ویدیو (اگر صفحه ویدیو دارد)
   --------------------------------------------------------------------------- */
.video-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
}
.video-wrapper video { width: 100%; height: auto; display: block; }
#video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .42);
    cursor: pointer;
}
#video-overlay::after {
    content: '\f04b';                 /* fa-play */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 2px solid rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline-start: 5px;
}

/* ---------------------------------------------------------------------------
   ۹) انیمیشن ورود (JS: opacity=1 روی .animate هنگام اسکرول)
   --------------------------------------------------------------------------- */
.animate { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.animate.delay-1 { transition-delay: .08s; }
.animate.delay-2 { transition-delay: .16s; }
.animate.delay-3 { transition-delay: .24s; }
.animate.delay-4 { transition-delay: .32s; }

/* متن‌های inline قدیمی روی پس‌زمینه تیره که حالا روشن است */
.content-section [style*="#e0e0e0"],
.content-section [style*="#252525"] { color: var(--ink-soft) !important; background: transparent !important; }

/* ---------------------------------------------------------------------------
   ۱۰) کارت‌های لیست حوزه‌ها (M.cshtml — کلاس‌های تم قدیمی)
   --------------------------------------------------------------------------- */
.serv-box { padding: clamp(46px, 6vw, 84px) 0; }
.sec-lg-head { margin-bottom: clamp(30px, 4vw, 52px); }
.dot-titl-non {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 12px;
}
.dot-titl-non::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}
.d-rotate { font-size: clamp(1.3rem, 3.2vw, 2.05rem); font-weight: 800; line-height: 1.75; color: var(--ink); margin: 0; }
.rotate-text { color: var(--ink); }
.serv-box .text p { font-size: .93rem; line-height: 2.05; color: var(--ink-soft); margin: 0; }

.serv-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.serv-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(45, 108, 223, .24); }
.serv-item .content-card-icon { margin-bottom: 18px; }
.serv-item > span { font-size: .84rem; color: var(--muted); line-height: 1.9; display: block; }
.serv-item h6 { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.8; margin: 6px 0 10px; }
.serv-item p { font-size: .89rem; line-height: 2; color: var(--muted); margin: 0 0 18px; }
.crv-more { margin-top: auto; }
.crv-more a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .87rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}
.crv-more a::after { content: '\f060'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: .74rem; }
.crv-more a:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   ۱۱) Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .content-grid.is-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .content-grid,
    .content-grid.is-4 { grid-template-columns: repeat(2, 1fr); }
    .stats-grid,
    .stats .container > .row { grid-template-columns: repeat(2, 1fr); }
    .contact-form-container { width: min(380px, 100%); }
}
@media (max-width: 767px) {
    .content-grid,
    .content-grid.is-2,
    .content-grid.is-4 { grid-template-columns: 1fr; }
    .stats-grid,
    .stats .container > .row { grid-template-columns: 1fr; gap: 12px; }
    .content-card, .serv-item { padding: 22px 18px; }
    .content-card-icon { width: 50px; height: 50px; border-radius: 16px; font-size: 1.25rem; }
    .hero { padding-block: 44px 36px; }
    .hero-title, .content-title, .cta-title { line-height: 1.8; }
    .cta-section { border-radius: 18px; }
    .floating-btn { inset-block-end: 84px; inset-inline-start: 14px; width: 48px; height: 48px; font-size: 1.1rem; }
    .contact-form-container { width: 100%; padding: 24px 18px; }
    .btn-primary, .btn.btn-primary {
        width: 100%;
    }
    .progress-label { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .animate { opacity: 1; transition: none; }
    .progress-fill { transition: none; }
}

/* ---------------------------------------------------------------------------
   ۱۲) Toast صفحه‌های Marketing
   (جایگزین alert() بومی مرورگر در فرم تماس — متن پیام دست‌نخورده)
   --------------------------------------------------------------------------- */
.mk-toast {
    position: fixed;
    inset-block-end: 92px;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: min(92vw, 520px);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 16px;
    background: var(--card);
    color: var(--ink);
    border: 1px solid rgba(45, 108, 223, .28);
    box-shadow: 0 18px 46px -18px rgba(20, 33, 61, .34);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.9;
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mk-toast::before {
    content: '\f00c';                  /* fa-check */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--brand);
    flex-shrink: 0;
}
.mk-toast.show { opacity: 1; transform: translateY(0); visibility: visible; }

@media (max-width: 767px) {
    .mk-toast { inset-inline: 14px; width: auto; max-width: none; padding: 13px 16px; font-size: .86rem; border-radius: 14px; }
}

/* ============================================================================
   ۱۳) کلاس‌های markup واقعی صفحات Marketing که پوشش نداشتند
   ----------------------------------------------------------------------------
   علت: در نسخه قبلی این فایل، نام کلاس‌ها حدس زده شده بود (.stats-grid /
   .faq-list / .progress-list) در حالی که markup واقعی این‌هاست:
     .stat-container / .faq-container / .progress-container / .section-title
     .stat-item > .stat-number + .stat-label
   نتیجه: بخش «چرا رستوران‌های موفق...» ۴ کارتش در یک ردیف نمی‌نشست.
   اکنون نام‌های واقعی پوشش داده شده‌اند (نام‌های قبلی هم برای سازگاری می‌مانند).
   ============================================================================ */

/* عنوان بخش‌ها */
.section-title {
    font-size: clamp(1.3rem, 3.2vw, 2.05rem);
    font-weight: 800;
    line-height: 1.7;
    color: var(--ink);
    text-align: center;
    max-width: 780px;
    margin: 0 auto clamp(28px, 4vw, 46px);
}

/* ---------------------------------------------------------------------------
   ردیف ۴ کارتی — دسکتاپ ۴ ستون، تبلت ۲، موبایل ۱
   (بخش «چرا رستوران‌های موفق از خدمات ما استفاده می‌کنند؟» و معادلش)
   --------------------------------------------------------------------------- */
.stat-container,
.faq-container,
.progress-container,
.services-grid,
.how-it-works {
    display: grid;
    gap: 18px;
}
.stat-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faq-container,
.progress-container { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }

.stat-container > *,
.faq-container > *,
.progress-container > * { min-width: 0; }

/* کارت آماری */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 18px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
    height: 100%;
}
.stat-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(45, 108, 223, .24); }
.stat-number {
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 800;
    color: var(--brand);
    line-height: 1.4;
    display: block;
}
.stat-label {
    font-size: .86rem;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.95;
    display: block;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   نوارهای پیشرفت (markup: .progress-container > .progress-bar)
   --------------------------------------------------------------------------- */
.progress-container { gap: 22px; }
.progress-bar {
    display: block;
    height: 10px;
    border-radius: 99px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.progress-bar::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--w, 0%);
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand) 0%, #3B82F6 100%);
    transition: width 1.2s cubic-bezier(.2, .7, .2, 1);
}
.progress-bar .progress-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand) 0%, #3B82F6 100%);
    transition: width 1.2s cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------------
   FAQ — markup واقعی: .faq-container > .faq-item > .faq-question + .faq-answer
   --------------------------------------------------------------------------- */
.faq-container .faq-item { margin-bottom: 12px; }
.faq-container .faq-item:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   جعبه‌های اطلاعاتی کوچک که در markup هستند
   --------------------------------------------------------------------------- */
.info-box,
.info-text { min-width: 0; }
.info-title { font-weight: 800; color: var(--ink); line-height: 1.85; margin: 0 0 8px; }

/* ---------------------------------------------------------------------------
   انیمیشن‌های WOW باقی‌مانده — بدون کتابخانه WOW.js، فقط آشکارسازی ایمن
   (اگر JS نداشتیم، محتوا باید دیده شود؛ پس opacity را صفر نمی‌کنیم)
   --------------------------------------------------------------------------- */
.wow, .fadeIn { visibility: visible; }

/* ---------------------------------------------------------------------------
   خنثی‌سازی کلاس‌های بوت‌استرپ باقی‌مانده در markup (بدون CSS تعریف‌شده)
   --------------------------------------------------------------------------- */
.col-lg-3, .col-lg-8, .col-lg-4,
.col-md-6, .col-md-12, .col-xl-12 { width: 100%; max-width: 100%; min-width: 0; }
.row { display: flex; flex-wrap: wrap; }
.row > [class*="col-"] { flex: 0 0 100%; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.position-re { position: relative; }
.text-center { text-align: center; }
.valign_ { display: flex; align-items: center; }

/* فاصله‌های کوچک بوت‌استرپ که در markup هستند */
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-80 { margin-bottom: 80px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.pb-0 { padding-bottom: 0; }
.md-mb50 { margin-bottom: 0; }
.lg-pad { padding: 0; }
.radius-5 { border-radius: var(--radius-lg); }
.opacity-7 { opacity: 1; color: var(--muted); }
.fz-12 { font-size: .78rem; }
.fz-14 { font-size: .88rem; }
.textstyle { color: var(--ink); }
.ls1 { letter-spacing: 0; }
.text-u { text-decoration: none; }

/* ---------------------------------------------------------------------------
   Responsive — ردیف ۴ کارتی
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .stat-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .stat-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .stat-container { grid-template-columns: 1fr; gap: 12px; }
    .stat-item { padding: 22px 16px; }
    .section-title { margin-bottom: 24px; }
}