/* =========================================================
   ZERIVOX — COMPACT PREMIUM FOOTER

   SoC:
   footer.php = structure/content
   footer.css = presentation
   main.js = behaviour
   ========================================================= */


.site-footer{
    position:relative;
    overflow:hidden;

    margin-top:64px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(42,105,220,.14),
            transparent 24rem
        ),
        linear-gradient(
            180deg,
            #071426 0%,
            #050d19 100%
        );

    color:#ffffff;

    border-top:
        1px solid rgba(255,255,255,.06);
}


/* Subtle decorative circle only. */
.site-footer::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-130px;
    top:-220px;

    border-radius:50%;

    border:
        1px solid rgba(107,160,255,.08);

    box-shadow:
        inset 0 0 0 55px rgba(78,137,238,.015);

    pointer-events:none;
}


.footer-inner{
    position:relative;
    z-index:1;
}


/* =========================================================
   CTA
   ========================================================= */

.footer-cta-row{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:40px;

    align-items:center;

    padding:
        42px
        0
        30px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}


.footer-kicker{
    display:block;

    margin-bottom:10px;

    color:#78adff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;
}


.footer-cta-row h2{
    margin:0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px,3.2vw,50px);

    font-weight:500;

    line-height:1;

    letter-spacing:-.04em;

    color:#ffffff;
}


.footer-cta-row h2 span{
    color:#82b4ff;
}


.footer-project-button{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    min-height:52px;

    padding:
        0
        22px;

    border-radius:14px;

    background:#ffffff;

    color:#071426;

    font-size:13px;

    font-weight:800;

    white-space:nowrap;

    box-shadow:
        0 14px 30px rgba(0,0,0,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.footer-project-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 36px rgba(0,0,0,.28);
}


/* =========================================================
   MAIN INFORMATION ROW
   ========================================================= */

.footer-info-row{
    display:grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(180px,.5fr);

    gap:80px;


    align-items:start;

    padding:
        32px
        0;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-branding{
    max-width:430px;
}


.footer-brand{
    display:inline-flex;

    align-items:center;

    gap:13px;
}


.footer-brand-mark{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            #20b7ff,
            #205dd8
        );

    color:#ffffff;

    font-size:17px;

    font-weight:900;

    box-shadow:
        0 8px 20px rgba(32,93,216,.22);
}


.footer-brand-word{
    color:#ffffff;

    font-size:17px;

    font-weight:800;

    letter-spacing:.27em;
}


.footer-branding p{
    margin:
        15px
        0
        0;

    color:#8fa1b9;

    font-size:13px;

    line-height:1.6;
}


/* =========================================================
   LINKS + CONTACT
   ========================================================= */

.footer-links,
.footer-contact{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:9px;
}


.footer-label{
    margin-bottom:4px;

    color:#ffffff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.15em;

    text-transform:uppercase;
}


.footer-links a,
.footer-contact a,
.footer-contact > span:not(.footer-label){
    color:#9eafc6;

    font-size:13px;

    line-height:1.5;
}


.footer-links a,
.footer-contact a{
    transition:
        color .2s ease,
        transform .2s ease;
}


.footer-links a:hover,
.footer-contact a:hover{
    color:#ffffff;

    transform:translateX(2px);
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.footer-bottom{
    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap:24px;

    align-items:center;

    padding:
        16px
        0
        20px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:#70839d;

    font-size:11px;

    line-height:1.4;
}


.footer-created-by{
    text-align:center;

    white-space:nowrap;
}


.footer-created-by a{
    color:#bdcce0;

    margin-left:4px;
}


.footer-created-by a:hover{
    color:#ffffff;
}


.footer-back-top{
    justify-self:end;

    color:#bdcce0;
}


.footer-back-top:hover{
    color:#ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

    .footer-info-row{
        grid-template-columns:
            1.2fr
            .7fr
            .9fr;

        gap:30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

    .site-footer{
        margin-top:48px;
    }


    .footer-cta-row{
        grid-template-columns:1fr;

        gap:22px;

        padding:
            34px
            0
            28px;
    }


    .footer-cta-row h2{
        font-size:
            clamp(34px,10vw,44px);
    }


    .footer-project-button{
        justify-self:start;
    }


    .footer-info-row{
        grid-template-columns:1fr;

        gap:24px;

        padding:
            28px
            0;
    }


    .footer-links,
    .footer-contact{
        padding-top:20px;

        border-top:
            1px solid rgba(255,255,255,.07);
    }


    .footer-bottom{
        grid-template-columns:1fr;

        gap:8px;

        align-items:start;
    }


    .footer-created-by{
        text-align:left;

        white-space:normal;
    }


    .footer-back-top{
        justify-self:start;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .footer-project-button,
    .footer-links a,
    .footer-contact a{
        transition:none;
    }

}