/* ===== SCROLL ===== */
html {
    scroll-behavior: smooth;
}

.badge-accredited {
    cursor: pointer;
    text-decoration: none;
}
/* ===== SEZIONE SOLUZIONE ===== */

.solution {
    padding: 90px 0;
    background: #f8f9fc;
}

/* Header centrato */
.section-header h2 {
    font-weight: 700;
    margin-bottom: 15px;
}

.section-header .lead {
    max-width: 650px;
    margin: 0 auto;
    color: #6c757d;
}

/* ===== CARD SOLUTION (Verde pastello) ===== */

.solution-card {
    padding: 45px 30px;
    border-radius: 18px;
    transition: all 0.35s ease;
    height: 100%;
    text-align: center;
    color: #1f3d2b; /* testo verde scuro elegante */
}

/* Gradient verde pastello chiaro */
.card-1 {
    background: linear-gradient(135deg, #d4f8e8, #b7efd9);
}

.card-2 {
    background: linear-gradient(135deg, #c8f5df, #a8ebce);
}

.card-3 {
    background: linear-gradient(135deg, #dcfbea, #bff3d7);
}

.solution-card h5 {
    margin-top: 25px;
    font-weight: 600;
    font-size: 18px;
}

/* ===== CERCHIO ICONA (comune) ===== */

.icon-wrapper {
    width: 75px;
    height: 75px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

    .icon-wrapper i {
        font-size: 30px;
        color: #222; /* Numero nero */
    }

/* ===== HOVER ===== */

.solution-card:hover,
.how-card:hover,
.audience-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991px) {
    .solution,
    .how-it-works {
        padding: 60px 0;
    }

    .solution-card,
    .how-card,
    .audience-card {
        margin-bottom: 20px;
    }
}

/* ===== COME FUNZIONA (Azzurro pastello) ===== */

.how-it-works {
    padding: 90px 0;
    background: #ffffff;
}

.how-card {
    padding: 45px 30px;
    border-radius: 18px;
    transition: all 0.35s ease;
    height: 100%;
    text-align: center;
    color: #1a3b5d; /* blu scuro elegante */
}

/* Gradient azzurro pastello */
.how-card-1 {
    background: linear-gradient(135deg, #d6ecff, #b9ddff);
}

.how-card-2 {
    background: linear-gradient(135deg, #cfe9ff, #a8d4ff);
}

.how-card-3 {
    background: linear-gradient(135deg, #e0f2ff, #c2e3ff);
}

.how-card h5 {
    margin-top: 25px;
    font-weight: 600;
    font-size: 18px;
}

/* ===== Toggle content ===== */

.audience-content {
    max-width: 1000px;
    margin: 0 auto;
    display: none;
    animation: fadeIn 0.4s ease;
    color: #2c3e50;
}

    /* Titolo descrittivo */
    .audience-content h4 {
        color: #1a3b5d;
        margin-bottom: 30px;
    }

/* ===== CARD A CHI SI RIVOLGE ===== */

.audience-card {
    background: #e6f2ff; /* azzurro pastello soft */
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
    padding: 20px;
    text-align: center;
}

    .audience-card h5 {
        font-weight: 600;
        margin-bottom: 10px;
    }

    .audience-card p {
        font-size: 14px;
        color: #2c3e50;
    }

.audience-icon {
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    color: #1a3b5d;
}

/* ===== Row cards toggle ===== */
.audience-content .row {
    justify-content: center;
    gap: 20px;
}

/* ===== FadeIn Animation ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}