body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #1e293b;
            overflow-x: hidden;
        }
        .bg-gradient-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
        }
        .hero-badge {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #38bdf8;
        }
        .feature-card {
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            border-radius: 16px;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
            border-color: #6366f1;
        }
        .gradient-text {
            background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .btn-primary-custom {
            background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
            border: none;
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 600;
        }
        .btn-primary-custom:hover {
            opacity: 0.95;
        }

        /* Seller Dynamic Feedback Card Styles & Transitions */
        .seller-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
        }
        .feedback-content-wrapper {
            transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
            opacity: 1;
            transform: translateY(0);
        }
        .feedback-content-wrapper.fading-out {
            opacity: 0;
            transform: translateY(-8px);
        }
        .floating-stat-pill {
            background: #ffffff;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border-radius: 50rem;
            padding: 8px 16px;
            border: 1px solid #e2e8f0;
        }
        .free-banner {
            background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%);
            border: 1px solid #a7f3d0;
            border-radius: 16px;
        }
.navbar {
    z-index: 9999 !important;
}

.navbar .dropdown-menu {
    z-index: 10000 !important;
}
        /* Carousel Dots Indicator */
        .feedback-dot {
            width: 8px;
            height: 8px;
            background-color: #cbd5e1;
            border-radius: 50%;
            display: inline-block;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .feedback-dot.active {
            background-color: #4f46e5;
            width: 22px;
            border-radius: 10px;
        }
        /* Dynamic Workflow Bar for All Screen Sizes */
    .workflow-pill-bar {
        background: rgba(15, 23, 42, 0.75);
        border: 1px solid rgba(56, 189, 248, 0.35);
        backdrop-filter: blur(10px);
    }
    .workflow-step-item {
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .safe-scroll-container {
        width: 100%;
        max-width: 100vw;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;

        /* Force Hide Scrollbars Across Mobile Webkit Engine */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    /* Target Webkit Pseudo-elements specifically */
    .safe-scroll-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    /* Small Mobiles (< 380px) */
    @media (max-width: 379.98px) {
        .workflow-step-item {
            font-size: 0.65rem !important;
        }
        .workflow-step-item i {
            font-size: 0.6rem !important;
        }
        .workflow-arrow {
            font-size: 0.5rem !important;
            margin: 0 1px !important;
        }
    }

    /* Medium/Large Mobiles (380px to 575px) */
    @media (min-width: 380px) and (max-width: 575.98px) {
        .workflow-step-item {
            font-size: 0.72rem !important;
        }
    }
        /* 📱 Mobile App UI Specific Enhancements */
        @media (max-width: 991.98px) {
            .bg-gradient-hero {
                padding-top: 1.5rem !important;
                padding-bottom: 2.5rem !important;
            }
            .seller-card {
                border-radius: 18px !important;
            }
            .free-banner {
                border-radius: 12px !important;
            }
        }