/* ===== VARIABLES ===== */
            :root {
                 --primary: #4F46E5;
                --primary-dark: #4338CA;
                --primary-light: #818CF8;
                --secondary: #F59E0B;
                --success: #10B981;
                --gray-50: #F9FAFB;
                --gray-100: #F3F4F6;
                --gray-200: #E5E7EB;
                --gray-300: #D1D5DB;
                --gray-600: #6B7280;
                --gray-700: #374151;
                --gray-800: #1F2937;
                --gray-900: #111827;
                --white: #FFFFFF;
                --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
                --shadow-hover: 0 20px 60px rgba(79, 70, 229, 0.15);
                --radius: 20px;
                --radius-sm: 12px;
                --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* ===== RESET & BASE ===== */
            .farasod-seller-page {
                font-family: 'Vazir', 'Segoe UI', system-ui, -apple-system, sans-serif;
                background: var(--gray-50);
                overflow-x: hidden;
                direction: rtl;
                padding-top: -80px;
                margin-top: -80px;

            }

            .farasod-seller-page * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }

            /* ===== SECTION HEADER ===== */
            .section-badge {
                display: inline-block;
                background: rgba(79, 70, 229, 0.1);
                color: var(--primary);
                padding: 6px 20px;
                border-radius: 50px;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.5px;
                margin-bottom: 16px;
            }

            .section-badge i {
                margin-left: 8px;
            }

            .section-title {
                font-size: clamp(32px, 4.5vw, 48px);
                font-weight: 800;
                color: var(--gray-900);
                line-height: 1.2;
                margin-bottom: 16px;
            }

            .section-title span {
                color: var(--primary);
                position: relative;
            }

            .section-title span::after {
                content: '';
                position: absolute;
                bottom: 2px;
                left: 0;
                width: 100%;
                height: 8px;
                background: rgba(79, 70, 229, 0.15);
                border-radius: 4px;
                z-index: -1;
            }

            .section-desc {
                font-size: 18px;
                color: var(--gray-600);
                line-height: 1.8;
                max-width: 700px;
                margin: 0 auto 40px;
            }

            /* ===== HERO SECTION ===== */
            .hero-section {
                background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #08b31e 100%);
                padding: 80px 0 100px;
                position: relative;
                overflow: hidden;


            }

            .hero-section::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
                border-radius: 50%;
            }

            .hero-section::after {
                content: '🛒';
                position: absolute;
                bottom: 10%;
                left: 5%;
                font-size: 120px;
                opacity: 0.06;
                transform: rotate(-15deg);
            }

            .hero-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 60px;
                align-items: center;
                position: relative;
                z-index: 2;
            }

            .hero-content h1 {
                font-size: clamp(36px, 5vw, 56px);
                font-weight: 900;
                color: var(--gray-900);
                line-height: 1.15;
                margin-bottom: 20px;
            }

            .hero-content h1 .highlight {
                background: linear-gradient(135deg, var(--primary), var(--primary-light));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .hero-content p {
                font-size: 18px;
                color: var(--gray-700);
                line-height: 1.9;
                margin-bottom: 32px;
                max-width: 540px;
            }

            .hero-buttons {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
            }

            .btn-primary {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 16px 40px;
                background: var(--primary);
                color: var(--white);
                border: none;
                border-radius: 50px;
                font-size: 16px;
                font-weight: 700;
                cursor: pointer;
                transition: var(--transition);
                text-decoration: none;
                box-shadow: 0 8px 30px rgba(79, 70, 229, 0.3);
            }

            .btn-primary:hover {
                background: var(--primary-dark);
                transform: translateY(-3px);
                box-shadow: 0 12px 40px rgba(79, 70, 229, 0.4);
                color: var(--white);
            }

            .btn-primary i {
                margin-left: 8px;
            }

            .btn-secondary {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 16px 40px;
                background: var(--white);
                color: var(--gray-900);
                border: 2px solid var(--gray-200);
                border-radius: 50px;
                font-size: 16px;
                font-weight: 700;
                cursor: pointer;
                transition: var(--transition);
                text-decoration: none;
            }

            .btn-secondary:hover {
                border-color: var(--primary);
                color: var(--primary);
                transform: translateY(-3px);
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            }

            .btn-secondary i {
                margin-left: 8px;
            }

            .hero-stats {
                display: flex;
                gap: 40px;
                margin-top: 40px;
                padding-top: 32px;
                border-top: 2px solid rgba(79, 70, 229, 0.15);
            }

            .hero-stat {
                text-align: center;
            }

            .hero-stat .number {
                font-size: 28px;
                font-weight: 800;
                color: var(--primary);
                display: block;
            }

            .hero-stat .label {
                font-size: 14px;
                color: var(--gray-600);
                margin-top: 4px;
            }

            .hero-visual {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            .hero-visual .floating-card {
                background: var(--white);
                padding: 30px;
                border-radius: var(--radius);
                box-shadow: var(--shadow);
                width: 100%;
                max-width: 420px;
            }

            .floating-card .card-icon {
                font-size: 48px;
                margin-bottom: 16px;
                display: block;
            }

            .floating-card h3 {
                font-size: 20px;
                font-weight: 700;
                color: var(--gray-900);
                margin-bottom: 8px;
            }

            .floating-card p {
                color: var(--gray-600);
                font-size: 14px;
                line-height: 1.7;
            }

            .floating-card .step-line {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 16px;
                padding: 12px 16px;
                background: var(--gray-50);
                border-radius: var(--radius-sm);
            }

            .step-line .step-num {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                background: var(--primary);
                color: var(--white);
                border-radius: 50%;
                font-size: 14px;
                font-weight: 700;
                flex-shrink: 0;
            }

            .step-line .step-text {
                font-size: 14px;
                color: var(--gray-700);
                font-weight: 500;
            }

            /* ===== FEATURES SECTION ===== */
            .features-section {
                padding: 80px 0;
                background: var(--white);
            }

            .features-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 30px;
                margin-top: 20px;
            }

            .feature-card {
                background: var(--gray-50);
                padding: 36px 28px;
                border-radius: var(--radius);
                transition: var(--transition);
                border: 2px solid transparent;
                position: relative;
                overflow: hidden;
                border-color: #168f06;
            }

            .feature-card::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 4px;
                height: 100%;
                background: var(--primary);
                opacity: 0;
                transition: var(--transition);
            }

            .feature-card:hover {
                transform: translateY(-6px);
                border-color: var(--primary);
                box-shadow: var(--shadow-hover);
                background: var(--white);
            }

            .feature-card:hover::before {
                opacity: 1;
            }

            .feature-card .icon {
                font-size: 40px;
                margin-bottom: 16px;
                display: block;
                color: var(--primary);
            }

            .feature-card .icon i {
                font-size: 40px;
            }

            .feature-card h3 {
                font-size: 18px;
                font-weight: 700;
                color: var(--gray-900);
                margin-bottom: 10px;
            }

            .feature-card p {
                font-size: 15px;
                color: var(--gray-600);
                line-height: 1.8;
            }

            .feature-card .badge {
                display: inline-block;
                background: rgba(16, 185, 129, 0.12);
                color: var(--success);
                padding: 2px 12px;
                border-radius: 50px;
                font-size: 11px;
                font-weight: 700;
                margin-top: 12px;
            }

            .feature-card .badge i {
                margin-left: 4px;
                font-size: 12px;
            }

            /* ===== WHY SECTION ===== */
            .why-section {
                padding: 80px 0;
                background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4338CA 100%);
                color: var(--white);
            }

            .why-section .section-title {
                color: var(--white);
            }

            .why-section .section-title span {
                color: var(--secondary);
            }

            .why-section .section-title span::after {
                background: rgba(245, 158, 11, 0.25);
            }

            .why-section .section-desc {
                color: rgba(255, 255, 255, 0.75);
            }

            .why-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 30px;
            }

            .why-card {
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(10px);
                padding: 32px 24px;
                border-radius: var(--radius);
                border: 1px solid rgba(255, 255, 255, 0.08);
                transition: var(--transition);
                text-align: center;
            }

            .why-card:hover {
                transform: translateY(-6px);
                background: rgba(255, 255, 255, 0.12);
                border-color: rgba(255, 255, 255, 0.15);
            }

            .why-card .icon {
                font-size: 44px;
                margin-bottom: 16px;
                display: block;
                color: var(--secondary);
            }

            .why-card .icon i {
                font-size: 44px;
            }

            .why-card h3 {
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 8px;
            }

            .why-card p {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.75);
                line-height: 1.8;
            }

            /* ===== STEPS SECTION ===== */
            .steps-section {
                padding: 80px 0;
                background: var(--white);
            }

            .steps-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 30px;
                margin-top: 40px;
                position: relative;
            }

            .steps-container::before {
                content: '';
                position: absolute;
                top: 50px;
                left: 15%;
                right: 15%;
                height: 3px;
                background: linear-gradient(to right, var(--primary), var(--primary-light), var(--secondary));
                opacity: 0.2;
                transform: translateY(-50%);
            }

            @media (max-width: 768px) {
                .steps-container::before {
                    display: none;
                }
            }

            .step-item {
                text-align: center;
                position: relative;
                z-index: 2;
            }

            .step-item .step-number {
                width: 64px;
                height: 64px;
                background: linear-gradient(135deg, var(--primary), var(--primary-light));
                color: var(--white);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: 800;
                margin: 0 auto 16px;
                box-shadow: 0 8px 30px rgba(79, 70, 229, 0.25);
            }

            .step-item h3 {
                font-size: 18px;
                font-weight: 700;
                color: var(--gray-900);
                margin-bottom: 8px;
            }

            .step-item p {
                font-size: 14px;
                color: var(--gray-600);
                line-height: 1.7;
                max-width: 260px;
                margin: 0 auto;
            }

            /* ===== MOTIVATIONAL BANNER ===== */
            .motivational-section {
                padding: 60px 0;
                background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
            }

            .motivational-content {
                text-align: center;
                max-width: 800px;
                margin: 0 auto;
            }

            .motivational-content h2 {
                font-size: clamp(28px, 3.5vw, 40px);
                font-weight: 800;
                color: var(--gray-900);
                margin-bottom: 16px;
            }

            .motivational-content h2 .highlight {
                color: var(--primary-dark);
            }

            .motivational-content p {
                font-size: 18px;
                color: var(--gray-700);
                line-height: 1.9;
                margin-bottom: 12px;
            }

            .motivational-content .emoji-big {
                font-size: 56px;
                display: block;
                margin-bottom: 16px;
            }

            .motivational-features {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
                margin: 32px 0;
                text-align: right;
            }

            .motivational-features li {
                list-style: none;
                font-size: 15px;
                font-weight: 600;
                color: var(--gray-800);
                padding: 8px 0;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .motivational-features li i {
                color: var(--success);
                font-size: 18px;
                width: 24px;
            }

            /* ===== CTA SECTION ===== */
            .cta-section {
                padding: 80px 0;
                background: var(--white);
                text-align: center;
            }

            .cta-box {
                background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
                padding: 60px 40px;
                border-radius: var(--radius);
                max-width: 900px;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }

            .cta-box::after {
                content: '🚀';
                position: absolute;
                bottom: -30px;
                right: -30px;
                font-size: 120px;
                opacity: 0.08;
                transform: rotate(-20deg);
            }

            .cta-box h2 {
                font-size: clamp(28px, 3vw, 38px);
                font-weight: 800;
                color: var(--gray-900);
                margin-bottom: 16px;
            }

            .cta-box p {
                font-size: 18px;
                color: var(--gray-700);
                margin-bottom: 32px;
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }

            .cta-box .btn-primary {
                font-size: 18px;
                padding: 18px 50px;
            }

            .cta-box .btn-primary .arrow {
                display: inline-block;
                transition: var(--transition);
            }

            .cta-box .btn-primary:hover .arrow {
                transform: translateX(-8px);
            }

            /* ===== RESPONSIVE ===== */
            @media (max-width: 992px) {
                .hero-grid {
                    grid-template-columns: 1fr;
                    gap: 40px;
                    text-align: center;
                }

                .hero-content p {
                    margin: 0 auto 32px;
                }

                .hero-buttons {
                    justify-content: center;
                }

                .hero-stats {
                    justify-content: center;
                }

                .hero-visual .floating-card {
                    max-width: 100%;
                }
            }

            @media (max-width: 576px) {
                .hero-section {
                    padding: 40px 0 60px;
                }

                .hero-content h1 {
                    font-size: 28px;
                }

                .hero-stats {
                    gap: 20px;
                    flex-wrap: wrap;
                }

                .hero-stat .number {
                    font-size: 22px;
                }

                .btn-primary,
                .btn-secondary {
                    padding: 14px 28px;
                    font-size: 14px;
                    width: 100%;
                    justify-content: center;
                }

                .hero-buttons {
                    flex-direction: column;
                    width: 100%;
                }

                .feature-card {
                    padding: 24px 18px;
                }

                .cta-box {
                    padding: 32px 20px;
                }

                .cta-box .btn-primary {
                    width: 100%;
                    justify-content: center;
                }

                .motivational-features {
                    grid-template-columns: 1fr;
                }

                .floating-card .step-line {
                    flex-direction: column;
                    text-align: center;
                }

                .section-title {
                    font-size: 26px;
                }
            }

            /* ===== ANIMATIONS ===== */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .animate-fade-up {
                animation: fadeInUp 0.6s ease forwards;
            }

            .animate-fade-up.delay-1 {
                animation-delay: 0.1s;
            }
            .animate-fade-up.delay-2 {
                animation-delay: 0.2s;
            }
            .animate-fade-up.delay-3 {
                animation-delay: 0.3s;
            }
            .animate-fade-up.delay-4 {
                animation-delay: 0.4s;
            }