/* ==========================================================
   KOKO Enterprise
   Final CTA
   ========================================================== */

/*--------------------------------------------------------------
# Final CTA Section
--------------------------------------------------------------*/

.final-cta{
    padding:100px 0;

    background:var(--color-primary);
    color:#ffffff;

    text-align:center;
}

/*--------------------------------------------------------------
# Inner Layout
--------------------------------------------------------------*/

.final-cta-inner{
    max-width:860px;
    margin-inline:auto;
}

/*--------------------------------------------------------------
# Kicker
--------------------------------------------------------------*/

.final-cta-kicker{
    margin:0 0 1.5rem;

    color:var(--color-accent);
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/

.final-cta-title{
    max-width:820px;
    margin:0 auto 2rem;

    color:#ffffff;

    font-family:var(--font-heading);
    font-size:clamp(2.75rem,5vw,4.5rem);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.025em;
}

/*--------------------------------------------------------------
# Description
--------------------------------------------------------------*/

.final-cta-description{
    max-width:720px;
    margin:0 auto 2.5rem;

    color:rgba(255,255,255,.78);

    font-size:1.15rem;
    line-height:1.9;
}

/*--------------------------------------------------------------
# Actions
--------------------------------------------------------------*/

.final-cta-actions{
    display:flex;
    align-items:center;
    justify-content:center;
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/

.final-cta-button{
    min-width:220px;

    background:var(--color-accent);
    border-color:var(--color-accent);
    color:#ffffff;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.final-cta-button:hover{
    transform:translateY(-2px);

    background:#ffffff;
    border-color:#ffffff;
    color:var(--color-primary);

    box-shadow:0 18px 40px rgba(0,0,0,.24);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.final-cta a:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:5px;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .final-cta{
        padding:80px 0;
    }

    .final-cta-title{
        font-size:clamp(2.5rem,7vw,4rem);
    }

    .final-cta-description{
        font-size:1.08rem;
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .final-cta{
        padding:70px 0;
        text-align:left;
    }

    .final-cta-inner{
        max-width:none;
    }

    .final-cta-title{
        margin-inline:0;

        font-size:clamp(2.25rem,9vw,3.25rem);
        line-height:1.12;
    }

    .final-cta-description{
        max-width:none;
        margin:0 0 2.5rem;

        font-size:1rem;
        line-height:1.8;
    }

    .final-cta-actions{
        justify-content:flex-start;
    }

    .final-cta-button{
        width:100%;
        min-width:0;
    }

}