/* ===================================
   DEMO - DEMO PAGE
   =================================== */

.cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.cta-content {
    padding: 40px 0;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
}

.demo-form-wrapper {
    max-width: 500px;
}

.demo-form {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.demo-form .form-control,
.demo-form .form-floating>label {
    background: rgba(255, 255, 255, 0.95);
    border: none;
}

.demo-form .form-floating>label {
    color: var(--gray);
}

.demo-benefits {
    margin-top: 40px;
}

.benefit-item {
    color: white;
}

.benefit-item i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.benefit-item p {
    font-size: 0.95rem;
}

.demo-card {
    background: linear-gradient(135deg, rgba(55, 81, 126, 0.05), rgba(71, 178, 228, 0.05));
    padding: 50px;
    border-radius: 15px;
    border-left: 5px solid var(--secondary);
}

.demo-features {
    list-style: none;
}

.demo-features li {
    padding: 12px 0;
    font-size: 1.1rem;
    color: var(--gray);
}

.demo-features i {
    margin-right: 12px;
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .cta-title {
        font-size: 1.8rem;
    }
    .demo-form {
        padding: 20px;
    }
}