/* .pricing-gradient-bg { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    min-height: 65vh; 
    position: relative; 
    overflow: hidden; 
} */
/* .pricing-header-content { 
    color: white; 
    position: relative; 
    z-index: 2; 
} */
.pricing-header-content h1 { 
    font-size: 3.5rem; 
    font-weight: 700; 
    margin-bottom: 20px; 
    letter-spacing: -1px; 
}
.pricing-header-content p { 
    font-size: 1.1rem; 
    opacity: 0.95; 
    margin-bottom: 40px; 
}
.pricing-cards-container { 
    margin-top: -120px; 
    position: relative; 
    z-index: 10; 
}
.pricing-card { 
    background: white; 
    border-radius: 16px; 
    padding: 40px 30px; 
    box-shadow: 0 15px 45px rgba(0,0,0,0.12); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; 
}
.pricing-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 25px 60px rgba(102, 126, 234, 0.25); 
}
.pricing-card.featured { 
    border: 2px solid #667eea; 
    transform: scale(1.05); 
}
.pricing-card.featured:hover { 
    transform: scale(1.05) translateY(-10px); 
}
.popular-badge { 
    position: absolute; 
    top: -15px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    padding: 6px 20px; 
    border-radius: 20px; 
    font-size: 0.65rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    z-index: 20; 
}
.plan-name { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: #1a1a1a; 
    margin-bottom: 10px; 
}
.plan-description { 
    font-size: 0.95rem; 
    color: #666; 
    margin-bottom: 25px; 
}
.price-section { 
    margin-bottom: 30px; 
    padding-bottom: 30px; 
    border-bottom: 2px solid #f0f3ff; 
}
.price-amount { 
    font-size: 2.8rem; 
    font-weight: 700; 
    color: #667eea; 
    margin-bottom: 5px; 
}
.price-interval { 
    font-size: 0.9rem; 
    color: #999; 
}
.trial-badge { 
    display: inline-block; 
    background: #e9ecf1; 
    color: #667eea; 
    padding: 8px 15px; 
    border-radius: 8px; 
    font-size: 0.85rem; 
    font-weight: 600; 
    margin-bottom: 25px; 
}
.cta-btn { 
    display: block; 
    width: 100%; 
    padding: 14px 20px; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 0.95rem; 
    text-decoration: none; 
    text-align: center; 
    transition: all 0.3s ease; 
    cursor: pointer; 
    margin-bottom: 25px; 
}
.cta-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); 
    color: white; 
}
.cta-btn-secondary { 
    background: #f0f3ff; 
    color: #667eea; 
}
.cta-btn-secondary:hover { 
    background: #e9ecf1; 
    color: #667eea; 
}
.feature-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.feature-list li { 
    padding: 12px 0; 
    display: flex; 
    align-items: center; 
    font-size: 0.95rem; 
    color: #333; 
    border-bottom: 1px solid #f0f3ff; 
}
.feature-list li:last-child { 
    border-bottom: none; 
}
.feature-list .check-icon { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #10b981; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 12px; 
    font-size: 0.75rem; 
    flex-shrink: 0; 
}
.feature-list .x-icon { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: #ef4444; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 12px; 
    font-size: 0.75rem; 
    flex-shrink: 0; 
}
.faq-section { 
    padding: 80px 0; 
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf1 100%); 
}
.faq-header { 
    margin-bottom: 50px; 
}
.faq-header h2 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    margin-bottom: 20px; 
    color: #1a1a1a; 
}
.faq-header p { 
    font-size: 1.05rem; 
    color: #666; 
    margin-bottom: 30px; 
}
.faq-item { 
    background: white; 
    border-radius: 12px; 
    padding: 25px; 
    margin-bottom: 15px; 
    border-left: 4px solid #667eea; 
    transition: all 0.3s ease; 
}
.faq-item:hover { 
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); 
}
.faq-question { 
    font-weight: 600; 
    font-size: 1.05rem; 
    color: #1a1a1a; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    user-select: none; 
    padding: 0; 
    margin: 0; 
}
.faq-answer { 
    margin-top: 15px; 
    color: #666; 
    font-size: 0.95rem; 
    line-height: 1.6; 
    display: none; 
    max-height: 0; 
    overflow: hidden; 
    opacity: 0; 
    transition: all 0.3s ease; 
}
.faq-item.open .faq-answer { 
    display: block; 
    max-height: 500px; 
    opacity: 1; 
    margin-top: 15px; 
}
.faq-toggle { 
    font-size: 1.3rem; 
    color: #667eea; 
    transition: transform 0.3s ease; 
    display: inline-block; 
}
.faq-item.open .faq-toggle { 
    transform: rotate(180deg); 
}
@media (max-width: 768px) {
    .pricing-header-content h1 { 
    font-size: 2.2rem; 
}
    .pricing-card.featured { 
    transform: scale(1); 
}
    .pricing-card.featured:hover { 
    transform: translateY(-10px); 
}
    .pricing-cards-container { 
    margin-top: -80px; 
}
}


/* .auth-gradient { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    min-height: 100vh; 
} */
.auth-card { 
    background: white; 
    border-radius: 16px; 
    padding: 45px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); 
    animation: slideUp 0.6s ease-out; 
}
.auth-form-group { 
    margin-bottom: 12px !important; 
}
.auth-form-group label { 
    margin-bottom: 6px !important; 
}
.auth-icon { 
    font-size: 2.5rem; 
    color: #667eea; 
    display: inline-block; 
}
.auth-input-group { 
    position: relative; 
}
.auth-input-icon { 
    position: absolute; 
    left: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: #667eea; 
    z-index: 10; 
}
.auth-input { 
    padding-left: 45px !important; 
    border: 2px solid #e9ecef !important; 
    border-radius: 8px !important; 
    transition: all 0.3s ease; 
}
.auth-input:focus { 
    border-color: #667eea !important; 
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important; 
}
.auth-input:hover { 
    border-color: #667eea; 
}
.auth-input.is-invalid { 
    border-color: #dc3545 !important; 
}
.auth-link { 
    color: #667eea; 
    text-decoration: none; 
    font-weight: 500; 
    transition: color 0.3s ease; 
}
.auth-link:hover { 
    color: #764ba2; 
    text-decoration: underline; 
}
.auth-btn-primary { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white; 
    border: none; 
    border-radius: 8px; 
    font-weight: 600; 
    transition: all 0.3s ease; 
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); 
}
.auth-btn-primary:hover { 
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6); 
    transform: translateY(-2px); 
    color: white; 
    text-decoration: none; 
}
.auth-btn-secondary { 
    background-color: #f0f3ff; 
    color: #667eea; 
    border: 2px solid #e9ecef; 
    border-radius: 8px; 
    font-weight: 600; 
    transition: all 0.3s ease; 
    text-decoration: none; 
}
.auth-btn-secondary:hover { 
    background-color: #e9ecef; 
    border-color: #667eea; 
    color: #667eea; 
}
.divider-with-text { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #999; 
}
.divider-with-text::before, .divider-with-text::after { 
    content: ""; 
    flex: 1; 
    height: 1px; 
    background-color: #e9ecef; 
}
.divider-with-text::before { 
    margin-right: 10px; 
}
.divider-with-text::after { 
    margin-left: 10px; 
}
.social-buttons { 
    display: flex; 
    gap: 10px; 
    margin-top: 15px; 
}
.social-btn { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 12px 15px; 
    border: 2px solid #e9ecef; 
    border-radius: 8px; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 0.85rem; 
    transition: all 0.3s ease; 
}
.social-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
}
.social-btn i { 
    margin-right: 6px; 
    font-size: 1.1rem; 
}
.social-btn-google { 
    color: #db4437; 
    border-color: #db4437; 
}
.social-btn-google:hover { 
    background-color: #db4437; 
    color: white; 
}
.social-btn-facebook { 
    color: #4267B2; 
    border-color: #4267B2; 
}
.social-btn-facebook:hover { 
    background-color: #4267B2; 
    color: white; 
}
.social-btn-linkedin { 
    color: #0077B5; 
    border-color: #0077B5; 
}
.social-btn-linkedin:hover { 
    background-color: #0077B5; 
    color: white; 
}
.social-btn-slack { 
    color: #E01E5A; 
    border-color: #E01E5A; 
}
.social-btn-slack:hover { 
    background-color: #E01E5A; 
    color: white; 
}
@keyframes slideUp { 
    from { 
    opacity: 0; 
    transform: translateY(30px); 
} to { 
    opacity: 1; 
    transform: translateY(0); 
} }
@media (max-width: 576px) { 
    .auth-card { 
    border-radius: 12px; 
    padding: 30px; 
} .auth-icon { 
    font-size: 2rem; 
} .social-buttons { 
    flex-direction: column; 
} }

.left-0 {
    left: 0px !important;
}


.step-indicator {
    margin-bottom: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background-color: #007bff;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
}

.step.active .step-label {
    color: #007bff;
    font-weight: 500;
}

.step-connector {
    width: 100px;
    height: 2px;
    background-color: #e9ecef;
    margin: 0 1rem;
    align-self: center;
}

.step-connector.active {
    background-color: #007bff;
}