/**
 * B2B Module V2 Redesigned Card Styles
 * File: platform/assets/css/b2b-module-v2.css
 */

/* ========================================
   SECTION BADGES
   ======================================== */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--b2b-primary);
    border: 2px solid rgba(102, 126, 234, 0.2);
}

.section-badge i {
    font-size: 1rem;
}

/* Section Badge - Black Text Override */
.section-badge {
    color: #000000 !important;
}

.section-badge i {
    color: #000000 !important;
}

.section-badge span {
    color: #000000 !important;
}
/* ========================================
   FEATURES SECTION V2
   ======================================== */
.features-section-v2 {
    position: relative;
}

/* Feature Category Tabs */
.feature-categories .nav-pills {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.feature-categories .nav-link {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    color: #64748b;
    background: white;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.feature-categories .nav-link:hover {
    color: var(--b2b-primary);
    border-color: var(--b2b-primary);
    transform: translateY(-2px);
}

.feature-categories .nav-link.active {
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Feature Card V2 */
.feature-card-v2 {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--b2b-primary);
}

.feature-card-v2.featured {
    border-color: var(--b2b-primary);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.feature-card-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}

.feature-icon-v2 {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.feature-icon-v2::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.feature-card-v2:hover .feature-icon-v2::before {
    right: 150%;
}

/* Gradient Backgrounds */
.gradient-primary { background: linear-gradient(135deg, #667eea, #764ba2); }
.gradient-success { background: linear-gradient(135deg, #10b981, #059669); }
.gradient-info { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.gradient-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.gradient-danger { background: linear-gradient(135deg, #ef4444, #dc2626); }
.gradient-purple { background: linear-gradient(135deg, #9333ea, #7e22ce); }
.gradient-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.gradient-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c); }

.feature-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.feature-badge.popular {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
}

.feature-card-body {
    padding: 1.5rem;
    flex: 1;
}

.feature-title-v2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1e293b;
}

.feature-desc-v2 {
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.feature-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.highlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #475569;
    transition: all 0.2s ease;
}

.highlight-tag:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.highlight-tag i {
    color: var(--b2b-success);
    font-size: 0.75rem;
}

.feature-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.feature-learn-more {
    color: var(--b2b-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.feature-learn-more:hover {
    color: var(--b2b-primary-dark);
    gap: 0.5rem;
}

.feature-learn-more i {
    transition: transform 0.2s ease;
}

.feature-learn-more:hover i {
    transform: translateX(4px);
}

/* Admin Feature Cards */
.admin-feature-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.admin-feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

.admin-feature-card h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.admin-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-feature-list li {
    padding: 0.625rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #475569;
}

.admin-feature-list li i {
    color: var(--b2b-success);
    font-size: 1.125rem;
}

/* ========================================
   HOW IT WORKS V2 - TIMELINE LAYOUT
   ======================================== */
.how-it-works-v2 {
    position: relative;
}

.workflow-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.workflow-timeline {
    position: relative;
}

.workflow-step {
    position: relative;
    margin-bottom: 6rem;
}

.workflow-step:last-child {
    margin-bottom: 0;
}

.workflow-step:last-child .step-connector {
    display: none;
}

.step-connector {
    position: absolute;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6rem;
    background: linear-gradient(to bottom, var(--b2b-primary), transparent);
    display: none;
}

@media (min-width: 992px) {
    .step-connector {
        display: block;
    }
}

/* Workflow Content */
.workflow-content {
    padding: 2rem;
}

.step-number-badge {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.step-number-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0%, 100% { right: -50%; }
    50% { right: 150%; }
}

.workflow-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1e293b;
}

.workflow-description {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 2rem;
}

.workflow-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.workflow-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.workflow-feature-item:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.workflow-feature-item i {
    font-size: 1.5rem;
    color: var(--b2b-primary);
    flex-shrink: 0;
}

.workflow-feature-item strong {
    display: block;
    font-size: 1rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.workflow-feature-item span {
    font-size: 0.875rem;
    color: #64748b;
}

/* Visual Mockups */
.workflow-visual {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual-mockup {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.4s ease;
}

.visual-mockup:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.mockup-header {
    background: #f8fafc;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mockup-dots {
    display: flex;
    gap: 0.375rem;
}

.mockup-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
}

.mockup-dots span:nth-child(1) { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #f59e0b; }
.mockup-dots span:nth-child(3) { background: #10b981; }

.mockup-title {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
}

.mockup-body {
    padding: 2rem 1.5rem;
}

/* Wallet Mockup */
.wallet-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.balance-label {
    font-size: 0.875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.balance-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--b2b-primary);
}

.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.payment-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 8px;
    font-weight: 600;
}

.payment-success i {
    font-size: 1.25rem;
}

/* Customer Mockup */
.form-group-mock {
    margin-bottom: 1rem;
}

.form-group-mock label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
}

.form-group-mock input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: #f8fafc;
}

.mock-button {
    width: 100%;
    padding: 0.875rem;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.mock-button.success {
    background: #10b981;
    color: white;
}

.email-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Portal Mockup */
.portal-dashboard {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.portal-welcome {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.welcome-text {
    font-size: 0.875rem;
    color: #64748b;
}

.customer-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.portal-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-card i {
    font-size: 1.5rem;
    color: var(--b2b-primary);
}

.stat-card span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.portal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-btn {
    width: 100%;
    padding: 0.875rem;
    background: var(--b2b-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Workflow Metrics */
.workflow-metrics {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.metric-card {
    text-align: center;
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--b2b-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.875rem;
    color: #64748b;
}

/* ========================================
   PRICING - SINGLE SCROLL COMPACT
   ======================================== */
.pricing-compact {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Main Pricing Card */
.pricing-card-single {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: 3px solid var(--b2b-primary);
    position: relative;
}

/* Popular Pill */
.popular-pill {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 0.5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0 0 16px 16px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
    z-index: 1;
}

/* Pricing Header */
.pricing-header-compact {
    padding: 3rem 2.5rem 2rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
    position: relative;
}

/* Price Block */
.price-block {
    padding-right: 2rem;
    border-right: 2px solid #e2e8f0;
}

@media (max-width: 767.98px) {
    .price-block {
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.plan-name-compact {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.duration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Price Display */
.price-display-compact {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.price-display-compact .currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748b;
}

.price-display-compact .amount {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.price-display-compact .period {
    font-size: 1.125rem;
    color: #64748b;
}

.price-equivalent {
    font-size: 0.9375rem;
    color: #64748b;
    margin-bottom: 1rem;
}

/* Quick Features */
.quick-features {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.quick-feature {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: #475569;
    font-weight: 500;
}

.quick-feature i {
    font-size: 1.125rem;
}

/* Features Compact */
.features-compact {
    padding-left: 2rem;
}

@media (max-width: 767.98px) {
    .features-compact {
        padding-left: 0;
    }
}

.features-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.25rem;
}

.features-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2rem;
}

@media (max-width: 767.98px) {
    .features-grid-compact {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.feature-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-item-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}

.feature-item-compact i {
    color: var(--b2b-success);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Pricing Footer */
.pricing-footer-compact {
    padding: 2rem 2.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Activate Button */
.btn-activate-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    border: none;
}

.btn-activate-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-activate-compact:hover .btn-arrow {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(4px);
}

/* Pricing Guarantee */
.pricing-guarantee {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: white;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
}

.pricing-guarantee i {
    font-size: 1.5rem;
    color: var(--b2b-success);
    flex-shrink: 0;
}

.pricing-guarantee strong {
    display: block;
    font-size: 0.875rem;
    color: #1e293b;
    line-height: 1.2;
}

.pricing-guarantee small {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.pricing-note {
    font-size: 0.8125rem;
    color: #64748b;
}

.pricing-note i {
    color: var(--b2b-info);
}

/* Value Props */
.value-props-compact {
    max-width: 100%;
}

.value-item-compact {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
}

.value-item-compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.value-item-compact i {
    font-size: 1.75rem;
    color: var(--b2b-primary);
    flex-shrink: 0;
}

.value-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.value-text strong {
    font-size: 0.9375rem;
    color: #1e293b;
    line-height: 1.2;
}

.value-text small {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.2;
}

/* Requirements Notice */
.requirements-notice {
    background: #fff7ed;
    border: 2px solid #fed7aa;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #92400e;
}

.requirements-notice i {
    font-size: 1.25rem;
    color: #f59e0b;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .pricing-header-compact {
        padding: 2.5rem 2rem 1.5rem;
    }
    
    .plan-name-compact {
        font-size: 1.5rem;
    }
    
    .price-display-compact .amount {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .pricing-header-compact {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .pricing-footer-compact {
        padding: 1.5rem;
    }
    
    .plan-name-compact {
        font-size: 1.375rem;
    }
    
    .price-display-compact .amount {
        font-size: 2.25rem;
    }
    
    .pricing-guarantee {
        flex-direction: column;
        text-align: center;
    }
    
    .value-item-compact {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   TECH SPECS V2
   ======================================== */
.tech-card-v2 {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.tech-card-v2::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    transition: all 0.5s ease;
}

.tech-card-v2:hover::before {
    top: -25%;
    right: -25%;
}

.tech-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.tech-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: white;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.tech-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #1e293b;
    position: relative;
    z-index: 1;
}

.tech-details {
    flex: 1;
    position: relative;
    z-index: 1;
}

.tech-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.tech-item:last-child {
    border-bottom: none;
}

.tech-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
}

.tech-value {
    font-size: 0.9375rem;
    color: #1e293b;
    font-weight: 600;
}

.tech-badge {
    margin-top: 1.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--b2b-primary);
    position: relative;
    z-index: 1;
}

/* ========================================
   FEATURE MATRIX - REDESIGNED
   ======================================== */
.feature-matrix-section {
    background: white;
}

/* Matrix Tabs */
.feature-matrix-tabs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 1rem;
}

.matrix-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.matrix-tab:hover {
    border-color: var(--b2b-primary);
    color: var(--b2b-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.matrix-tab.active {
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.matrix-tab i {
    font-size: 1.125rem;
}

.tab-count {
    padding: 0.25rem 0.625rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.matrix-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Feature Grid */
.feature-matrix-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Matrix Category */
.matrix-category {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #f1f5f9;
    transition: all 0.3s ease;
}

.matrix-category:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* Category Header */
.category-header {
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.category-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.category-info h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.category-info p {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0;
}

/* Features List */
.matrix-features-list {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .matrix-features-list {
        grid-template-columns: 1fr;
    }
}

/* Feature Item */
.matrix-feature-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.matrix-feature-item:hover {
    background: white;
    border-color: var(--b2b-primary);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    transform: translateX(5px);
}

.feature-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-check i {
    font-size: 1.5rem;
    color: var(--b2b-success);
}

.feature-details h6 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.375rem;
}

.feature-details p {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0.625rem;
}

/* Feature Meta Tags */
.feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
}

.meta-tag:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.meta-tag i {
    font-size: 0.875rem;
}

/* Stats Summary */
.feature-stats-summary {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.stat-box {
    padding: 1.5rem 1rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--b2b-primary), var(--b2b-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tab Filtering Animation */
.matrix-category {
    animation: fadeIn 0.5s ease;
}

.matrix-category.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 991.98px) {
    .feature-matrix-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .feature-matrix-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .matrix-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 767.98px) {
    .category-header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .category-icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }
    
    .category-info h4 {
        font-size: 1.25rem;
    }
    
    .matrix-features-list {
        padding: 1.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* ========================================
   INFRASTRUCTURE & HOSTING - REDUCED FONTS
   ======================================== */

/* Infrastructure Section */
.infrastructure-section {
    margin-top: 3rem;
}

.infrastructure-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #f1f5f9;
    transition: all 0.3s ease;
}

.infrastructure-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* Heading - Reduced */
.infrastructure-card h4 {
    font-size: 1.375rem;  /* Reduced from 1.5rem (22px from 24px) */
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.infrastructure-card h4 i {
    font-size: 1.25rem;  /* Reduced from 1.5rem (20px from 24px) */
    color: var(--b2b-primary);
}

/* Description - Reduced */
.infrastructure-card p {
    font-size: 0.9375rem;  /* Reduced from 1rem (15px from 16px) */
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

/* Infrastructure Stats Grid */
.infra-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991.98px) {
    .infra-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .infra-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Individual Stat Item - Reduced */
.infra-stat-item {
    text-align: center;
    padding: 1.25rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.infra-stat-item:hover {
    background: white;
    border-color: var(--b2b-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* Stat Number - Reduced */
.infra-stat-item strong {
    display: block;
    font-size: 1.625rem;  /* Reduced from 2rem (26px from 32px) */
    font-weight: 700;
    color: var(--b2b-primary);
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

/* Stat Label - Reduced */
.infra-stat-item span {
    display: block;
    font-size: 0.8125rem;  /* Reduced from 0.875rem (13px from 14px) */
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Server Visual */
.server-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

.server-rack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 350px;
}

/* Server Item - Reduced */
.server-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;  /* Reduced from 1.25rem */
    display: flex;
    align-items: center;
    gap: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.server-item:hover {
    border-color: var(--b2b-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateX(5px);
}

.server-light {
    width: 10px;  /* Reduced from 12px */
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-light 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse-light {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Server Label - Reduced */
.server-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.9375rem;  /* Reduced from 1rem (15px from 16px) */
    color: #475569;
}

/* Server Status - Reduced */
.server-status {
    font-size: 0.8125rem;  /* Reduced from 0.875rem (13px from 14px) */
    color: var(--b2b-success);
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    background: #d1fae5;
    border-radius: 6px;
}

/* Additional Responsive Adjustments */
@media (max-width: 991.98px) {
    .infrastructure-card {
        padding: 2rem;
    }
    
    .infrastructure-card h4 {
        font-size: 1.25rem;  /* 20px on tablet */
    }
    
    .infrastructure-card p {
        font-size: 0.875rem;  /* 14px on tablet */
    }
    
    .infra-stat-item strong {
        font-size: 1.5rem;  /* 24px on tablet */
    }
    
    .infra-stat-item span {
        font-size: 0.75rem;  /* 12px on tablet */
    }
}

@media (max-width: 767.98px) {
    .infrastructure-card {
        padding: 1.5rem;
    }
    
    .infrastructure-card h4 {
        font-size: 1.125rem;  /* 18px on mobile */
        flex-direction: column;
        text-align: center;
    }
    
    .infrastructure-card p {
        font-size: 0.8125rem;  /* 13px on mobile */
        text-align: center;
    }
    
    .infra-stat-item {
        padding: 1rem 0.75rem;
    }
    
    .infra-stat-item strong {
        font-size: 1.375rem;  /* 22px on mobile */
    }
    
    .infra-stat-item span {
        font-size: 0.6875rem;  /* 11px on mobile */
    }
    
    .server-item {
        padding: 0.875rem 1rem;
    }
    
    .server-label {
        font-size: 0.875rem;  /* 14px on mobile */
    }
    
    .server-status {
        font-size: 0.75rem;  /* 12px on mobile */
    }
}

@media (max-width: 575.98px) {
    .infrastructure-card h4 {
        font-size: 1rem;  /* 16px on small mobile */
    }
    
    .infrastructure-card h4 i {
        font-size: 1.125rem;
    }
    
    .infrastructure-card p {
        font-size: 0.75rem;  /* 12px on small mobile */
    }
    
    .infra-stat-item strong {
        font-size: 1.25rem;  /* 20px on small mobile */
    }
    
    .infra-stat-item span {
        font-size: 0.625rem;  /* 10px on small mobile */
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    .workflow-content,
    .workflow-visual {
        padding: 1.5rem 0;
    }
    
    .workflow-title {
        font-size: 1.75rem;
    }
    
    .pricing-card-inner {
        min-height: auto;
    }
    
    .pricing-left,
    .pricing-right {
        padding: 2rem;
    }
    
    .price-value {
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {
    .step-number-badge {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    .workflow-title {
        font-size: 1.5rem;
    }
    
    .workflow-description {
        font-size: 1rem;
    }
    
    .visual-mockup {
        max-width: 100%;
    }
    
    .feature-categories .nav-link {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   PROBLEM & SOLUTION - SINGLE SCROLL COMPACT
   ======================================== */
.problem-solution-compact {
    position: relative;
}

/* Comparison Grid */
.comparison-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Comparison Row */
.comparison-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
    animation: fadeInUp 0.6s ease;
}

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

/* Problem Card */
.problem-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #fee2e2;
    display: flex;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #ef4444;
}

.problem-card:hover {
    transform: translateX(-5px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
    border-color: #fecaca;
}

/* Solution Card */
.solution-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #d1fae5;
    display: flex;
    gap: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #10b981;
}

.solution-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
    border-color: #a7f3d0;
}

/* Card Numbers */
.card-number {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.problem-number {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.solution-number {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}

/* Card Content */
.card-content {
    flex: 1;
}

.card-content h5 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.card-content p {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* VS Divider */
.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vs-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }
}

/* Impact Stats - REDUCED FONT SIZES */
.impact-stats-container {
    max-width: 900px;
    margin: 0 auto;
}

.impact-card {
    background: white;
    border-radius: 20px;
    padding: 1.75rem;  /* Reduced from 2rem */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.impact-before {
    border: 3px solid #fee2e2;
}

.impact-after {
    border: 3px solid #d1fae5;
}

.impact-card h4 {
    font-size: 1.25rem;  /* Reduced from 1.5rem */
    font-weight: 700;
    margin-bottom: 1.25rem;  /* Reduced from 1.5rem */
    color: #1e293b;
    text-align: center;
}

.impact-card h4 i {
    font-size: 1.125rem;  /* Icon size to match heading */
}

.impact-metrics {
    display: flex;
    justify-content: space-around;
    gap: 1.25rem;  /* Reduced from 1.5rem */
}

.metric {
    text-align: center;
    flex: 1;
}

.metric-value {
    display: block;
    font-size: 1.5rem;  /* Reduced from 2rem */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.375rem;  /* Reduced from 0.5rem */
}

.metric-label {
    display: block;
    font-size: 0.8125rem;  /* Reduced from 0.875rem */
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;  /* Slightly tighter */
    line-height: 1.4;
}

/* Responsive - Even Smaller on Mobile */
@media (max-width: 767.98px) {
    .impact-card {
        padding: 1.5rem;
    }
    
    .impact-card h4 {
        font-size: 1.125rem;  /* Smaller on mobile */
    }
    
    .impact-card h4 i {
        font-size: 1rem;
    }
    
    .metric-value {
        font-size: 1.375rem;  /* Smaller on mobile */
    }
    
    .metric-label {
        font-size: 0.75rem;  /* Smaller on mobile */
    }
    
    .impact-metrics {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 575.98px) {
    .impact-card h4 {
        font-size: 1rem;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
    
    .metric-label {
        font-size: 0.6875rem;
    }
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .comparison-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .vs-divider {
        display: none;
    }
    
    .problem-card,
    .solution-card {
        padding: 1.25rem;
    }
    
    .card-content h5 {
        font-size: 1rem;
    }
    
    .card-content p {
        font-size: 0.875rem;
    }
    
    .impact-metrics {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    .comparison-grid {
        gap: 1.5rem;
    }
    
    .problem-card,
    .solution-card {
        flex-direction: column;
        text-align: center;
    }
    
    .card-number {
        margin: 0 auto;
    }
    
    .metric-value {
        font-size: 1.75rem;
    }
}

/* Mobile: Show Problem -> Solution Pattern */
@media (max-width: 991.98px) {
    .comparison-row {
        position: relative;
        padding-bottom: 1rem;
    }
    
    .comparison-row::after {
        content: '↓';
        position: absolute;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5rem;
        color: var(--b2b-primary);
        animation: bounce 2s infinite;
    }
    
    .comparison-row:last-child::after {
        display: none;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(5px); }
    }
}

/* Stagger Animation for Rows */
.comparison-row:nth-child(1) { animation-delay: 0s; }
.comparison-row:nth-child(2) { animation-delay: 0.1s; }
.comparison-row:nth-child(3) { animation-delay: 0.2s; }
.comparison-row:nth-child(4) { animation-delay: 0.3s; }
.comparison-row:nth-child(5) { animation-delay: 0.4s; }


/* ========================================
   B2B MODULE PAGE SPECIFIC FIXES
   Target only the exact elements that need fixing
   ======================================== */

/* Fix 1: Feature Category Navigation Pills (Core Features, Customer Portal, Admin Tools tabs) */
#featureTabs .nav-link {
    background: #f1f5f9; /* Light gray background instead of white */
    color: #64748b;
}

#featureTabs .nav-link:hover {
    background: white;
    border-color: #667eea;
    color: #667eea;
}

#featureTabs .nav-link.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
}

/* Fix 2: Portal Dashboard Mockup Buttons (in Step 3 visual) */
.portal-mockup .action-btn {
    background: #667eea !important;
    color: white !important;
}

.portal-mockup .action-btn:first-child {
    background: #667eea !important;
}

.portal-mockup .action-btn:last-child {
    background: #6366f1 !important;
}

.portal-mockup .action-btn:hover {
    background: #5568d3 !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Fix 3: Pricing Section - Activate B2B Module Button */
.pricing-compact .btn-activate-compact {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

.pricing-compact .btn-activate-compact:hover {
    background: linear-gradient(135deg, #5568d3, #6a4191) !important;
    color: white !important;
}

.pricing-compact .btn-activate-compact .btn-text {
    color: inherit;
}

.pricing-compact .btn-activate-compact .btn-arrow {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.pricing-compact .btn-activate-compact:hover .btn-arrow {
    background: rgba(255, 255, 255, 0.3);
}

/* Fix 4: Workflow Step 3 Portal Actions */
.workflow-timeline .portal-actions .action-btn {
    background: #667eea;
    color: white;
    border: none;
}

.workflow-timeline .portal-actions .action-btn:hover {
    background: #5568d3;
    transform: translateY(-2px);
}

/* Fix 5: Customer Mockup Success Button */
.customer-mockup .mock-button.success {
    background: #10b981 !important;
    color: white !important;
}

/* Fix 6: Wallet Mockup Success Message */
.wallet-mockup .payment-success {
    background: #d1fae5;
    color: #065f46;
}

/* Fix 7: Feature Matrix Tab Buttons */
.feature-matrix-tabs .matrix-tab {
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.feature-matrix-tabs .matrix-tab:hover {
    background: #f8fafc;
    border-color: #667eea;
    color: #667eea;
}

.feature-matrix-tabs .matrix-tab.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
}

.feature-matrix-tabs .matrix-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Fix 8: Tech Specs Infrastructure Monitoring Visual */
.server-visual .server-item {
    background: white;
    border: 2px solid #e2e8f0;
}

.server-visual .server-item:hover {
    border-color: #667eea;
    background: white;
}

.server-visual .server-status {
    background: #d1fae5;
    color: #065f46;
}

/* Fix 9: FAQ Accordion Buttons */
#b2bFaq .accordion-button {
    background: white;
    color: #1e293b;
}

#b2bFaq .accordion-button:not(.collapsed) {
    background: #f8fafc;
    color: #667eea;
}

#b2bFaq .accordion-button:hover {
    background: #f1f5f9;
}

/* Fix 10: Final CTA Section Buttons */
.final-cta-section .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: white;
}

.final-cta-section .btn-primary:hover {
    background: linear-gradient(135deg, #5568d3, #6a4191);
    color: white;
}

.final-cta-section .btn-outline-primary {
    color: #667eea;
    border-color: #667eea;
    background: transparent;
}

.final-cta-section .btn-outline-primary:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Additional safeguard for any missed buttons in workflow mockups */
.workflow-timeline .visual-mockup button,
.workflow-timeline .visual-mockup .btn {
    background: #667eea;
    color: white;
}

.workflow-timeline .visual-mockup button:hover,
.workflow-timeline .visual-mockup .btn:hover {
    background: #5568d3;
}

/* ========================================
   PRICING FIXES - Make Price Visible
   ======================================== */

/* Remove gradient effect and use solid color */
.pricing-compact .price-display-compact .amount {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #667eea !important; /* Your brand primary color */
}