.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;
}

/* استایل شیشه‌ای بهینه‌شده با بلور قوی */
/* استایل شیشه‌ای بهینه‌شده با چیدمان شروع از راست */
.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%;
}

/* =========================================
   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);
}
/* =========================================
   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); /* بزرگ شدن دکمه موقع هاور */
}

.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;
    }
}

/* =========================================
   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) {
    /* ۱. برعکس کردن کل نمودار (01 میاد بالا، 05 میره پایین) */
    .rst-revenue-chart {
        display: flex;
        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;
    }
}

.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 svg {
    width: 81px;
    height: 81px;
    margin-bottom: 18px;
    transition: all 0.35s ease;
}

/* اعمال رنگ روی المان‌های داخلی آیکون‌های وکتور شما */
.start-card svg path {
    transition: stroke 0.35s ease, fill 0.35s ease;
}

.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:hover svg,
.start-card:hover svg path {
    color: #0C0A1A !important;
    stroke: #0C0A1A !important;
}