.rst-rounded-image {
    border-radius: var(--box-radius);
}

.rst-floating-features {
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}

/* ==========================================
   اورراید رنگ‌های سکشن اول درباره ما (Light Mode)
========================================== */

/* ۱ و ۲. تغییر رنگ عنوان اصلی (راستاد) و توضیحات زیر آن */
[data-bs-theme="light"] .rst-about-hero-section h1.text-white,
[data-bs-theme="light"] .rst-about-hero-section h2.text-white,
[data-bs-theme="light"] .rst-about-hero-section p.text-white-50 {
    color: #1B1256 !important;
}

/* ۳. استایل‌های جدید باکس‌های شیشه‌ای روی عکس */
[data-bs-theme="light"] .rst-glass-feature-box {
    background: linear-gradient(75.29deg, rgba(139, 146, 230, 0.53) 8.46%, rgba(255, 255, 255, 0.53) 44.02%) !important;
    backdrop-filter: blur(47.8px) !important;
    -webkit-backdrop-filter: blur(47.8px) !important;

    /* استفاده از کادر یکپارچه به جای border-image برای حفظ شدن گردی گوشه‌ها */
    border: 1px solid rgba(219, 219, 219, 0.6) !important;
    box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.05) !important; /* سایه ملایم‌تر برای لایت مود */
}

/* هاور باکس‌های شیشه‌ای در لایت مود (برای اینکه افکت تعاملی حفظ شود) */
[data-bs-theme="light"] .rst-glass-feature-box:hover {
    background: linear-gradient(75.29deg, rgba(139, 146, 230, 0.7) 8.46%, rgba(255, 255, 255, 0.8) 44.02%) !important;
    border-color: rgba(139, 146, 230, 0.8) !important;
}

/* ۴. رنگ متن داخل باکس‌های شیشه‌ای */
[data-bs-theme="light"] .rst-glass-feature-box span.text-white {
    color: #1B1256 !important;
}

/* ۱. سکشن درباره ما (باکس‌های شیشه‌ای روی عکس) -> رنگ #1B1256 */
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [fill="white"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [fill="#ffffff"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [fill="#fff"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [fill="currentColor"] {
    fill: #1B1256 !important;
}

[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [stroke="white"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [stroke="#ffffff"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [stroke="#fff"],
[data-bs-theme="light"] .rst-glass-feature-box .feature-icon-wrap svg [stroke="currentColor"] {
    stroke: #1B1256 !important;
}

/* استایل شیشه‌ای بهینه‌شده با بلور قوی */
/* استایل شیشه‌ای بهینه‌شده با چیدمان شروع از راست */
.rst-glass-feature-box {
    background: linear-gradient(135deg, rgba(42, 35, 85, 0.45) 0%, rgba(20, 15, 45, 0.55) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-radius);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: default;
}

.rst-glass-feature-box:hover {
    background: linear-gradient(135deg, rgba(50, 45, 95, 0.6) 0%, rgba(30, 25, 65, 0.7) 100%);
    border-color: rgba(126, 134, 223, 0.5);
    transform: translateX(-5px) !important;
}

.feature-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
}

/* انیمیشن ورود */
.slide-in-rtl {
    opacity: 0;
    transform: translateX(100px);
    animation: slideInRtlAnim 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: var(--delay);
}

@keyframes slideInRtlAnim {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ریسپانسیو موبایل */
/* اعمال مارجین بالا فقط در حالت دسکتاپ (col-lg به بالا) */
@media (min-width: 992px) {
    .rst-glass-feature-box {
        margin-top: 15px; /* این مقدار رو می‌تونی بسته به طرحت کمتر یا بیشتر کنی */
    }

    /* اگر می‌خوای باکس اول از بالا فاصله نگیره و بقیه پله‌ای فاصله داشته باشن: */
    .rst-glass-feature-box:first-child {
        margin-top: 0;
    }
}

/* =========================================
   Statistics Section
========================================= */
.rst-stats-box {
    /* درصد رنگ شفاف (110D2900#) رو به ۶۰٪ کاهش دادم تا محوشدگی تا وسط‌های باکس پایین بیاد */
    background: linear-gradient(to top, #28245c 0%, #110D2900 80%, transparent 100%);
    border-radius: var(--box-radius);
}

/* ایجاد خط جداکننده (Divider) برای دسکتاپ */
@media (min-width: 992px) {
    .rst-stat-divider::after {
        content: '';
        position: absolute;
        top: 10%;
        left: 0; /* در سایت راست‌چین چپ می‌شود */
        width: 1px;
        height: 80%;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
    }
}

/* ایجاد خط جداکننده برای تبلت/موبایل */
@media (min-width: 768px) and (max-width: 991px) {
    .rst-stat-divider:nth-child(odd)::after,
    .rst-stat-divider-mobile::after {
        content: '';
        position: absolute;
        top: 10%;
        left: 0;
        width: 1px;
        height: 80%;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
    }
}

.rst-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8; /* کمی محو برای تطابق با عکس */
}

.text-counter {
    color: #7C88FF;
    width: 60%;
}

/* ==========================================
   اورراید رنگ‌های سکشن آمار و ارقام (Light Mode)
========================================== */

/* ۴. تغییر بک‌گراند باکس آمار به گرادینت شیشه‌ای روشن */
[data-bs-theme="light"] .rst-stats-box {
    background: linear-gradient(179deg, rgba(246, 246, 246, 0.46) 15.61%, rgba(123, 131, 223, 0.46) 94.04%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* ۱. تغییر رنگ ارقام (اعداد) و پسوند/پیشوند آن‌ها */
[data-bs-theme="light"] .rst-statistics-section .fs-1.text-white {
    color: #1B1256 !important;
}

/* ۲. تغییر رنگ متن توضیحات زیر آمار */
[data-bs-theme="light"] .rst-statistics-section .text-counter {
    color: #7C88FF !important;
}

/* ۳. تغییر رنگ آیکون‌ها (بدون به هم ریختن ساختار توخالی SVG) */

/* تغییر رنگ اصلی باکسِ دربرگیرنده آیکون */
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon {
    color: #7C88FF !important;
}

/* به جای رنگ کردن کورکورانه همه چیز، فقط بخش‌هایی از آیکون را که
   در حالت تاریک "سفید" یا "currentColor" بوده‌اند، به آبی تغییر می‌دهیم.
   با این کار قسمت‌های توخالی آیکون، رنگ نمی‌گیرند!
*/
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [fill="white"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [fill="#ffffff"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [fill="#fff"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [fill="currentColor"] {
    fill: #7C88FF !important;
}

[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [stroke="white"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [stroke="#ffffff"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [stroke="#fff"],
[data-bs-theme="light"] .rst-statistics-section .rst-stat-icon svg [stroke="currentColor"] {
    stroke: #7C88FF !important;
}

/* 🔴 اصلاحیه مهم: تغییر رنگ خطوط جداکننده بین آمارها برای لایت‌مود 🔴 */
[data-bs-theme="light"] .rst-stat-divider::after,
[data-bs-theme="light"] .rst-stat-divider-mobile::after {
    background: linear-gradient(to bottom, transparent, rgba(124, 136, 255, 0.3), transparent) !important;
}

/* =========================================
   Roadmap Section (نقشه راه)
========================================= */

/* تنظیمات کلی خط پس‌زمینه */
.rst-roadmap-line {
    position: absolute;
    top: 30%; /* تنظیم ارتفاع خط نسبت به آیکون‌ها */
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0.7; /* کمی محوتر برای جلوگیری از شلوغی بیش از حد */
}

.text-purple {
    color: #AFB5F3;
}

.rst-roadmap-section .col-md-6 {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

/* وضعیت فعال: به محض اضافه شدن کلاس active، آیتم‌ها سر جای خود می‌آیند */
.rst-roadmap-section .active .col-md-6 {
    opacity: 1;
    transform: translateY(0);
}

/* ایجاد تاخیر زمانی (Delay) برای پله‌پله ظاهر شدن از راست به چپ */
.rst-roadmap-section .active .col-md-6:nth-child(1) {
    transition-delay: 0.1s;
}

.rst-roadmap-section .active .col-md-6:nth-child(2) {
    transition-delay: 0.3s;
}

.rst-roadmap-section .active .col-md-6:nth-child(3) {
    transition-delay: 0.5s;
}

.rst-roadmap-section .active .col-md-6:nth-child(4) {
    transition-delay: 0.7s;
}

/* یک افکت هوور بسیار ساده روی عکس آیکون‌ها */
.rst-roadmap-icon-img {
    transition: transform 0.3s ease;
}

.rst-roadmap-section .col-md-6:hover .rst-roadmap-icon-img {
    transform: translateY(-7px);
}

/* ==========================================
   اورراید رنگ‌های سکشن نقشه راه (Light Mode)
========================================== */

/* ۱. تغییر رنگ عنوان هر مرحله (گام‌ها) */
[data-bs-theme="light"] .rst-roadmap-section h4.text-purple {
    color: #AFB5F3 !important;
}

/* ۲. تغییر رنگ توضیحات زیر عنوان هر مرحله */
[data-bs-theme="light"] .rst-roadmap-section p.text-white-50 {
    color: #1B1256 !important;
}

/* ۳. تغییر رنگ خط نقشه راه (SVG) در پس‌زمینه */
[data-bs-theme="light"] .rst-roadmap-line svg path {
    fill: #30248E !important;
}

/* =========================================
   Philosophy Video Section
========================================= */

.rst-video-placeholder {
    background-color: #1a1733; /* رنگ پس‌زمینه تیره در صورت لود نشدن عکس */
    border-radius: var(--box-radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* افکت هاور روی کل باکس ویدیو */
.rst-video-placeholder:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* استایل عکس کاور (تا کل باکس رو بپوشونه) */
.rst-video-cover {
    object-fit: cover;
    opacity: 0.8; /* کمی تیره کردن عکس برای دیده شدن بهتر دکمه پلی */
    transition: opacity 0.3s ease;
}

.rst-video-placeholder:hover .rst-video-cover {
    opacity: 1;
}

/* استایل دکمه Play */
.rst-play-btn-overlay {
    transition: transform 0.3s ease;
    /* ایجاد سایه ملایم پشت آیکون برای دیده شدن روی عکس‌های روشن */
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.6));
}

.rst-video-placeholder:hover .rst-play-btn-overlay {
    transform: translate(-50%, -50%) scale(1.15); /* بزرگ شدن دکمه موقع هاور */
}

/* ==========================================
   اورراید رنگ‌های سکشن فلسفه راستاد (Light Mode)
========================================== */

/* ۱. تغییر رنگ عنوان اصلی (فلسفه راستاد) */
[data-bs-theme="light"] .rst-philosophy-section h2.text-white {
    color: #30248E !important;
}

/* ۲. تغییر رنگ توضیحات زیر عنوان */
[data-bs-theme="light"] .rst-philosophy-section p.text-white-50 {
    color: #1B1256 !important;
}

/* ۳. برداشتن کاور تیره از روی عکس ویدیو (شفافیت کامل) */
[data-bs-theme="light"] .rst-video-placeholder .rst-video-cover {
    opacity: 1 !important;
}

/* روشن کردن کادر دور ویدیو و ملایم کردن سایه‌ها برای لایت‌مود */
[data-bs-theme="light"] .rst-video-placeholder {
    border: 2px solid;
    background-color: #f8f9fa !important; /* رنگ در صورت لود نشدن عکس */
    border-color: rgba(27, 18, 86, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="light"] .rst-video-placeholder:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ۴. تغییر رنگ دکمه پلی ویدیو */
[data-bs-theme="light"] .rst-play-btn-overlay svg,
[data-bs-theme="light"] .rst-play-btn-overlay svg path {
    fill: #1B1256 !important;
}

/* تنظیم سایه زیر دکمه پلی برای هماهنگی با رنگ جدید */
[data-bs-theme="light"] .rst-play-btn-overlay {
    filter: drop-shadow(0px 8px 15px rgba(27, 18, 86, 0.2)) !important;
}

.comparison-section {
    padding: 70px 0;
}

.section-title {
    margin-bottom: 14px;
}

.section-subtitle {
    margin-bottom: 55px;
}

.compare-card {
    display: flex;
    flex-direction: column;
    min-height: 355px;
    border-radius: var(--box-radius);
}

.compare-card.purple {
    background: linear-gradient(180deg, rgb(74 62 155 / 43%), #2c26433d);
}

.compare-card.dark {
    background: linear-gradient(180deg, #6a48e31a, #211e2d00);
}

.compare-card.featured {
    background: linear-gradient(180deg, #2f1968, #120b3a);
    border-color: rgba(158, 153, 255, .75);
    box-shadow: 0 0 28px rgba(93, 106, 255, .75),
    inset 0 0 18px rgba(255, 255, 255, .08);
    transition: 0.5s ease-in-out;
}

.card-head {
    padding: 22px 18px 14px;
    background: linear-gradient(180deg, rgba(122, 91, 197, .65), rgba(69, 44, 130, .45));
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, .35);
    border-radius: var(--box-radius);
}

.card-head.dark-head {
    background: rgba(255, 255, 255, .06);
}

.card-title {
    margin-bottom: 8px;
}

.card-desc {
    color: #beb8d7;
}

.feature-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-list li {
    width: 240px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent) 1;

}

.feature-list svg {
    width: 22px;
    min-width: 22px;
    flex-shrink: 0;
}

.feature-list li:last-child {
    border-bottom: 0;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 26px;
    }

    .section-subtitle {
        margin-bottom: 30px;
    }

    .feature-list {
        padding: 24px 35px;
    }
}

/* ==========================================
   اورراید رنگ‌های سکشن مقایسه با رقبا (Light Mode)
========================================== */

/* ۱ و ۲. تغییر رنگ عنوان اصلی و توضیحات زیر آن */
[data-bs-theme="light"] .comparison-section .section-title,
[data-bs-theme="light"] .comparison-section .section-subtitle.text-white {
    color: #1B1256 !important;
}

/* ۳. کارت ویژه (راستاد) */
[data-bs-theme="light"] .compare-card.featured {
    background: linear-gradient(14.15deg, #5D68E5 -47.31%, #F9F9FE 88.9%) !important;
    box-shadow: -3px 1px 16.7px 0px #3F4DE3 !important;
    border: none !important; /* حذف کادر برای زیبایی بیشتر روی سایه رنگی */
}

/* ۴. کارت بنفش (فقط آموزش) */
[data-bs-theme="light"] .compare-card.purple {
    background: linear-gradient(201.27deg, #EAEBF7 27.77%, #D5D8F3 103.48%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* ۵. کارت سنتی (Dark سابق) */
[data-bs-theme="light"] .compare-card.dark {
    background: #F0F0F8 !important;
    backdrop-filter: blur(25.8px) !important;
    -webkit-backdrop-filter: blur(25.8px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

/* 🟢 اصلاحات ضروری داخلی کارت‌ها برای لایت‌مود 🟢 */

/* تغییر رنگ هدر کارت‌ها (شفاف‌تر شدن برای هماهنگی با گرادینت‌های جدید) */
[data-bs-theme="light"] .comparison-section .card-head {
    background: rgba(255, 255, 255, 0.3) !important;
    border-bottom: 1px solid rgba(27, 18, 86, 0.08) !important;
    box-shadow: none !important;
}

/* تغییر رنگ متون داخل کارت (عناوین و لیست‌ها) */
[data-bs-theme="light"] .compare-card .card-title,
[data-bs-theme="light"] .compare-card .card-desc,
[data-bs-theme="light"] .compare-card .feature-list li {
    color: #1B1256 !important;
}

/* تغییر رنگ خطوط جداکننده (زیر آیتم‌های لیست) از سفید محو به سرمه‌ای محو */
[data-bs-theme="light"] .compare-card .feature-list li {
    border-image: linear-gradient(90deg, transparent, rgba(27, 18, 86, 0.15), transparent) 1 !important;
}

/* سیستم هوشمند تغییر رنگ آیکون‌های SVG (تیک و ضربدر) بدون لکه‌شدگی */
[data-bs-theme="light"] .compare-card .feature-list svg [fill="white"],
[data-bs-theme="light"] .compare-card .feature-list svg [fill="#ffffff"],
[data-bs-theme="light"] .compare-card .feature-list svg [fill="#fff"] {
    fill: #1B1256 !important;
}

/* =========================================
   Revenue Model Chart (سه‌بعدی ایزومتریک پهن و چسبیده)
========================================= */

.rst-revenue-chart {
    position: relative;
    padding-bottom: 250px;
    width: 100%;
}

/* ساختار هر ردیف */
.rst-rev-row {
    position: relative;
    height: 90px;
    display: flex;
    align-items: flex-start;
    margin-right: calc(var(--step) * 70px);
}

/* ================== ساختار مکعب‌ها (مدل پهن) ================== */
.rst-cube-wrapper {
    position: relative;
    width: 140px;
    height: 350px;
    flex-shrink: 0;
}

/* سقف مکعب (الماس) */
.rst-cube-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 70px;
    background: #6D51E5;
    clip-path: polygon(50% 0%, 100% 35px, 50% 70px, 0% 35px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* خواباندن دقیق اعداد روی سقف مکعب (ایزومتریک) */
.rst-cube-top span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 32px;
    font-weight: 900;
    font-family: Arial, sans-serif;
    transform: scaleY(0.5) rotate(-45deg);
    margin-top: -5px;
    margin-right: 5px;
}

/* وجه سمت چپ مکعب */
.rst-cube-left {
    position: absolute;
    top: 35px;
    left: 0;
    width: 70px;
    height: 350px;
    background: linear-gradient(180deg, #422D9E 0%, rgba(66, 45, 158, 0) 100%);
    clip-path: polygon(0 0, 100% 35px, 100% 100%, 0 calc(100% - 35px));
    z-index: 2;
}

/* وجه سمت راست مکعب */
.rst-cube-right {
    position: absolute;
    top: 35px;
    left: 70px;
    width: 70px;
    height: 350px;
    background: linear-gradient(180deg, #241668 0%, rgba(36, 22, 104, 0) 100%);
    clip-path: polygon(0 35px, 100% 0, 100% calc(100% - 35px), 0 100%);
    z-index: 1;
}

/* ================== خط اتصال، آیکون و متن ================== */
.rst-rev-line {
    /* طول خط‌چین در اینجا به 100 پیکسل افزایش یافت تا فاصله متن از باکس بیشتر شود */
    width: 530px;
    flex-shrink: 0;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
    height: 1px;
    margin-top: 35px;
    margin-right: -2px;
}

.rst-rev-icon {
    margin-top: 18px;
    margin-right: 15px;
}

.rst-rev-text {
    margin-top: 18px;
    margin-right: 15px;
    width: 250px;
    text-align: right;
}

.rst-rev-text p {
    font-size: 13px !important;
}

/* ================== انیمیشن یکپارچه ================== */
.rst-animate-up {
    opacity: 0;
    transform: translateY(80px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.rst-animate-up.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .rst-revenue-chart {
        padding: 0 !important; /* حذف کامل پدینگ از چپ، راست، بالا و پایین در موبایل */
    }
}

/* =========================================
   اصلاح بخش موبایل (حذف کدهای ریورس اضافی)
========================================= */
@media (max-width: 991px) {
    .rst-revenue-chart {
        padding: 0 !important;
        /* دستور flex-direction: column-reverse از اینجا حذف شد */
    }

    /* چیدمان هر مرحله (مکعب بالا، متن پایین) */
    .rst-rev-row {
        height: auto !important;
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        margin-right: 0 !important;
        margin-bottom: 50px !important;
    }

    /* کوتاه کردن دنباله‌ی مکعب‌ها */
    .rst-cube-wrapper {
        height: 120px !important;
        top: 0 !important;
        right: 0 !important;
        margin-bottom: 15px;
    }

    .rst-cube-left,
    .rst-cube-right {
        height: 70px !important;
    }

    .rst-rev-line {
        display: none !important;
    }

    .rst-rev-icon {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .rst-rev-text {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }
}

/* =========================================
   Commission Box (باکس سهم از کارمزد)
========================================= */

.rst-commission-box {
    background: linear-gradient(180deg, #4023a5a1 0%, #3c364d4a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-radius);
    position: relative;
    transition: all 0.3s ease;
}

/* افکت هاور برای زنده بودن باکس */
.rst-commission-box:hover {
    border-color: #6366f1;
    box-shadow: 0 0 30px rgba(79, 70, 229, 0.3);
}

.rst-commission-box h2 {
    color: #fff;
    margin-bottom: 20px;
}

/* تنظیم ارتفاع خط بیشتر، فقط برای موبایل و تبلت (کمتر از 992px) */
@media (max-width: 991px) {
    .rst-lh-mobile {
        line-height: 39px !important; /* ارتفاع خط بیشتر برای خوانایی عالی در گوشی */
    }

    /* اگر دوست داری فاصله عمودی عنوان هم در موبایل کمی تعدیل شود */
    .rst-commission-box h2 {
        line-height: 1.4 !important;
    }
}

/* ==========================================
   اورراید رنگ‌های سکشن فرآیند تصمیم‌گیری (Light Mode)
========================================== */

/* ۱ و ۲. عنوان اصلی سکشن و زیرعنوان آن */
[data-bs-theme="light"] .rst-revenue-model h2.text-white,
[data-bs-theme="light"] .rst-revenue-model .section-subtitle.text-white {
    color: #1B1256 !important;
}

/* ۳. عنوان آیتم‌های هر مرحله (تیترهای گام‌ها) */
[data-bs-theme="light"] .rst-rev-text h5 {
    color: #5662E4 !important;
}

/* ۴. توضیحات زیرعنوان هر مرحله */
[data-bs-theme="light"] .rst-rev-text p {
    color: #1B1256 !important;
}

/* 🟢 اصلاحیه خطوط رابط: تیره شدن خط‌چین‌ها برای ناپدید نشدن روی زمینه سفید 🟢 */
[data-bs-theme="light"] .rst-rev-line {
    border-color: rgba(86, 98, 228, 0.2) !important;
}

/* ۵. راه حل قطعی و جادویی برای تغییر رنگ آیکون‌های پیچیده (بدون پر شدن کادر) */

[data-bs-theme="light"] .rst-rev-icon svg {
    /* این فیلتر ابتدا آیکون را کاملاً مشکی کرده و سپس طیف نوری آن را
       دقیقاً به رنگ سرمه‌ای/بنفش روشن (#515DE3) تغییر می‌دهد.
       با این کار هیچ ساختار توخالی یا نامرئی پر نخواهد شد!
    */
    filter: brightness(0) saturate(100%) invert(34%) sepia(91%) saturate(3298%) hue-rotate(226deg) brightness(94%) contrast(92%) !important;
}


/* ۶. اعمال استایل گرادینت و حاشیه روی وجوه مکعب‌های سه‌بعدی (Isometric Cubes) */

/* سقف مکعب (الماس بالا) */
[data-bs-theme="light"] .rst-cube-top {
    background: #4D5AE2 !important; /* رنگ پایه بالایی */
    border: 1px solid #AFB5F3 !important;
}

[data-bs-theme="light"] .rst-cube-top span {
    color: #ffffff !important; /* خوانا ماندن شماره‌های روی سقف */
}

/* وجه سمت چپ مکعب (اعمال دقیق گرادینت درخواستی شما) */
[data-bs-theme="light"] .rst-cube-left {
    background: linear-gradient(180deg, #4D5AE2 0%, #FFFFFF 100%) !important;
    border: 1px solid #AFB5F3 !important;
    border-top: none !important;
}

/* وجه سمت راست مکعب (کمی سایه‌دارتر برای حفظ عمق ۳ بعدی ایزومتریک) */
[data-bs-theme="light"] .rst-cube-right {
    background: linear-gradient(180deg, #3B48C5 0%, #F1F2FC 100%) !important;
    border: 1px solid #AFB5F3 !important;
    border-top: none !important;
}


/* ==========================================
   اصلاح نهایی و قطعی باکس کارمزد (rst-commission-box)
========================================== */

[data-bs-theme="light"] .rst-commission-box {
    /* ۱. اعمال دقیق استایل و گرادینت شیشه‌ای درخواستی شما */
    background: linear-gradient(75.29deg, rgba(139, 146, 230, 0.53) 8.46%, rgb(255 255 255) 44.02%) !important;
    /* ۲. اعمال حاشیه (Border) و گرادینت دور کادر */
    border-image-source: linear-gradient(119.13deg, #FFFFFF 0.14%, #5161C9 43.8%, #FFFFFF 86.42%);
    border-image-slice: 1 !important;
    /* ۳. اعمال سایه داخلی (Inset Box Shadow) */
    box-shadow: 0px 0px 12.3px 0px #FFFFFF40 inset !important;
    /* 🔴 ۴. حل مشکل لایه‌ها: دکمه کاملاً روی دنباله مکعب‌ها قرار می‌گیرد 🔴 */
    position: relative !important;
    z-index: 99 !important;
}

/* ۵. تغییر رنگ عنوان داخل باکس کارمزد به رنگ سرمه‌ای */
[data-bs-theme="light"] .rst-commission-box h2 {
    color: #1B1256 !important;
}

/* ۶. تغییر رنگ متن توضیحات داخل باکس کارمزد به رنگ سرمه‌ای */
[data-bs-theme="light"] .rst-commission-box p {
    color: #1B1256 !important;
}

/* اعمال مستقیم روی کلاس مورد نظر طبق مستندات ارسالی شما */
[data-bs-theme="light"] .rst-revenue-model .row .col-12 > div,
[data-bs-theme="light"] .rst-revenue-model .rst-stats-box {
    background: linear-gradient(14.15deg, #5D68E5 -47.31%, #F9F9FE 88.9%) !important; /* هماهنگ با کارت ویژه مقایسه */
    box-shadow: -3px 1px 16.7px 0px #3F4DE3 !important;
    border: none !important;
}

/* اگر دقیقاً ساختار مورد نظر شما تگ مشخصی دارد، این استایل مستقیم را استفاده کنید: */
[data-bs-theme="light"] .rst-revenue-model h2 + p + .row,
[data-bs-theme="light"] .rst-revenue-model .container > .row:last-child .col-12 > div {
    /* استایل نهایی درخواستی شما برای باکس فلسفه/کارمزد انتهای سکشن */
    background: linear-gradient(14.15deg, #5D68E5 -47.31%, #F9F9FE 88.9%) !important;
    box-shadow: -3px 1px 16.7px 0px #3F4DE3 !important;
}

/* تیره کردن متون داخل باکس پایین برای خوانایی فوق‌العاده */
[data-bs-theme="light"] .rst-revenue-model h2 + p + .row h2,
[data-bs-theme="light"] .rst-revenue-model h2 + p + .row p,
[data-bs-theme="light"] .rst-revenue-model .container > .row:last-child .col-12 h2,
[data-bs-theme="light"] .rst-revenue-model .container > .row:last-child .col-12 p {
    color: #1B1256 !important;
}

.start-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.start-section p {
    margin-bottom: 40px;
}

/* اصلاح استایل کارت به عنوان تگ لـینک */
.start-card {
    display: block; /* 🔴 الزامی برای اینکه تگ a مثل یک باکس بلاک رفتار کند */
    text-decoration: none; /* 🔴 حذف خط زیر متن پیش‌فرض لینک‌ها */
    color: #ffffff; /* 🔴 رنگ سفید اولیه متن‌ها و آیکون‌هایی که currentColor دارند */
    background-color: rgba(204, 204, 204, 0.08);
    backdrop-filter: blur(26px);
    box-shadow: inset 0 0 11px rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    border-radius: var(--box-radius);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.35s ease;
    cursor: pointer;
}

.start-card h5 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff;
    transition: color 0.35s ease;
}

.start-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5); /* کمی مات‌تر برای زیبایی بیشتر */
    transition: color 0.35s ease;
}

/* 🔴 افکت هاور کاملاً اصلاح‌شده برای تگ لینک */
.start-card:hover {
    background: #ffffff;
    color: #0C0A1A;
}

.start-card:hover h5,
.start-card:hover p {
    color: #0C0A1A;
}

.start-card svg {
    width: 81px;
    height: 81px;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

/* =======================================================
   حالت عادی: داخل کاملاً خالی، خطوطِ دور سفید
======================================================= */
.start-card svg path,
.start-card svg circle,
.start-card svg rect,
.start-card svg line {
    fill: transparent !important; /* جلوگیری قطعی از پر شدن داخل آیکون */
    stroke: #ffffff !important; /* رنگ خط دور آیکون (سفید) */
    stroke-width: 1.5px; /* ضخامت خط دور (در صورت نیاز می‌توانید عدد را کم یا زیاد کنید) */
    transition: all 0.35s ease;
}

/* =======================================================
   حالت هاور: داخل همچنان خالی، خطوط دور تیره
======================================================= */
.start-card:hover svg path,
.start-card:hover svg circle,
.start-card:hover svg rect,
.start-card:hover svg line {
    fill: transparent !important; /* در حالت هاور هم داخلش خالی می‌ماند */
    stroke: #0C0A1A !important; /* رنگ خط دور تیره می‌شود */
}

/* ==========================================
   اورراید رنگ‌های سکشن پایان (آماده شروع هستید) - Light Mode
========================================== */

/* ۱ و ۲. تغییر رنگ عنوان اصلی سکشن و توضیحات زیر آن */
[data-bs-theme="light"] .start-section h2,
[data-bs-theme="light"] .start-section p.text-white {
    color: #1B1256 !important;
}

/* تغییرات کل باکس (کارت‌ها) */
[data-bs-theme="light"] .start-card {
    /* گرادینت پس‌زمینه کارت */
    background: linear-gradient(227.67deg, #FFFFFF 33.49%, #AFB5F3 113%) !important;

    /* افکت شیشه‌ای */
    backdrop-filter: blur(25.8px) !important;
    -webkit-backdrop-filter: blur(25.8px) !important;

    /* برای حفظ گردی گوشه‌ها، از رنگ ترکیبی و ملایم استفاده شد (جایگزین border-image) */
    border: 1px solid;

    border-image-source: linear-gradient(119.13deg, #FFFFFF 0.14%, #5161C9 43.8%, #FFFFFF 86.42%);

    border-image-slice: 1;

    /* سایه داخلی (Inset) */
    box-shadow: inset 0px 0px 11.5px 0px rgba(255, 255, 255, 0.6) !important; /* معادل #FFFFFF99 */
}

/* هاور کارت‌ها در لایت‌مود (کمی روشن‌تر شدن و بالا آمدن کارت) */
[data-bs-theme="light"] .start-card:hover {
    background: linear-gradient(227.67deg, #FFFFFF 50%, #C4C9F6 113%) !important;
    border-color: rgba(81, 97, 201, 0.7) !important;
    transform: translateY(-5px) !important;
}

/* عنوان و توضیحات داخل کارت */
[data-bs-theme="light"] .start-card h5,
[data-bs-theme="light"] .start-card p,
[data-bs-theme="light"] .start-card:hover h5,
[data-bs-theme="light"] .start-card:hover p {
    color: #1B1256 !important;
}

/* ==========================================
   حل قطعی مشکل آیکون‌های سکشن آخر (Start Section)
========================================== */

/* ۱. نابود کردن بک‌گراند مخفیِ داخل SVG بدون نیاز به ویرایش دستی */
/* چون سایز آیکون‌های شما 81x81 است، هر شکل پس‌زمینه‌ای با این سایز را پیدا و مخفی می‌کنیم */
[data-bs-theme="light"] .start-card svg > rect[width="100%"],
[data-bs-theme="light"] .start-card svg > rect[width^="8"],
[data-bs-theme="light"] .start-card svg > rect[height^="8"],
[data-bs-theme="light"] .start-card svg > circle[r^="4"],
[data-bs-theme="light"] .start-card svg > g > rect[width^="8"] {
    display: none !important;
    fill: transparent !important;
}

/* ۲. اعمال گرادینت شما به پس‌زمینه و تنظیم رنگ پایه آیکون‌ها */
[data-bs-theme="light"] .start-card svg {
    background: radial-gradient(circle at 50.35% 49.7%, #FAFAFA 0%, #AFB5F3 100%) !important;
    border-radius: 50% !important;
    /*padding: 15px !important;*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="light"] .start-card svg [fill]:not([fill="none"]) {
    fill: #8B92E6 !important;
}

[data-bs-theme="light"] .start-card svg [stroke]:not([stroke="none"]) {
    stroke: #8B92E6 !important;
}

/* ۳. 🔴 حل قطعی مشکل به هم ریختن آیکون در زمان هاور 🔴 */
/* ابتدا کدهای مخرب دارک‌مود که به آیکون خط دور (Stroke) می‌دادند را خنثی می‌کنیم */
[data-bs-theme="light"] .start-card:hover svg,
[data-bs-theme="light"] .start-card:hover svg path {
    stroke: transparent !important;
}

/* حالا فقط به اِلمان‌هایی که واقعاً رنگ توپر دارند رنگ جدید می‌دهیم */
[data-bs-theme="light"] .start-card:hover svg [fill]:not([fill="none"]) {
    fill: #5161C9 !important;
}

/* و اگر اِلمانی از اول خطی بوده (مثل لاین‌ها)، فقط همان خط را رنگ می‌کنیم */
[data-bs-theme="light"] .start-card:hover svg [stroke]:not([stroke="none"]) {
    stroke: #5161C9 !important;
}