/* ==========================================================================
   Riquadro finale di invito alla demo ("Hai letto abbastanza? Vediamoci.",
   "... Parliamone."): riquadro arancione in sfumatura con cerchi decorativi.
   Uso:
     <section class="ftco-section cta-band">
         <div class="container text-center">
             <h2>Domanda? <strong>Risposta.</strong></h2>
             <p>Testo</p>
             ... bottone .btn.btn-primary ...
         </div>
     </section>
   ========================================================================== */

.cta-band {
    padding-top: 2rem;
}

    .cta-band > .container {
        position: relative;
        max-width: 1000px;
        overflow: hidden;
        padding: 56px 40px 44px;
        border-radius: 28px;
        color: #fff;
        background: linear-gradient(135deg, #fbb468 0%, #ef7f36 100%);
        box-shadow: 0 30px 60px -30px rgba(239, 127, 54, .75);
    }

        /* cerchi decorativi */
        .cta-band > .container::before,
        .cta-band > .container::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            pointer-events: none;
        }

        .cta-band > .container::before {
            width: 260px;
            height: 260px;
            top: -120px;
            right: -70px;
        }

        .cta-band > .container::after {
            width: 180px;
            height: 180px;
            bottom: -90px;
            left: -50px;
        }

    .cta-band h2 {
        position: relative;
        font-size: 34px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -.02em;
        color: #fff;
        margin-bottom: 14px;
    }

        .cta-band h2 strong {
            font-weight: 700;
            color: #fff;
        }

    .cta-band > .container > p {
        position: relative;
        font-size: 17px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .92);
        margin-bottom: 26px;
    }

    .cta-band .block-6 {
        margin-bottom: 0;
    }

        .cta-band .block-6 p {
            margin: 0;
        }

    .cta-band .btn.btn-primary {
        position: relative;
        border: 0;
        border-radius: 30px;
        background: #fff;
        color: #ef7f36;
        font-weight: 600;
        box-shadow: 0 14px 28px -14px rgba(60, 30, 10, .55);
        transition: transform .25s ease, box-shadow .25s ease;
    }

        .cta-band .btn.btn-primary:hover {
            color: #d9681f;
            transform: translateY(-2px);
            box-shadow: 0 18px 32px -14px rgba(60, 30, 10, .6);
        }

@media (max-width: 767.98px) {
    .cta-band > .container {
        padding: 44px 22px 36px;
        border-radius: 20px;
        max-width: calc(100% - 30px);
    }

    .cta-band h2 {
        font-size: 26px;
    }

    .cta-band > .container > p {
        font-size: 15.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-band .btn.btn-primary {
        transition: none;
    }
}