/* =========================================================
   FOOTER
========================================================= */


.site-footer {

    position: relative;

    background:
        linear-gradient(135deg,
            #071a36 0%,
            #0b2550 50%,
            #101b3d 100%);

    color:
        rgba(255,
            255,
            255,
            0.72);

}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {

    display: grid;

    grid-template-columns:
        1.7fr 1fr 1fr 0.8fr;

    gap: 60px;

    padding: 72px 0 55px;

}


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

.footer-brand {

    max-width: 390px;

}


.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.footer-brand-mark {

    background:
        linear-gradient(135deg,
            #1d4ed8,
            #4338ca);

    color: #ffffff;

    box-shadow:
        0 5px 16px rgba(29, 78, 216, 0.20);

}


.footer-logo .brand-text {

    color: #ffffff;

}


.footer-logo .brand-text span {

    background:
        linear-gradient(135deg,
            #60a5fa,
            #ef4444);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


.footer-description {

    max-width: 360px;

    color: rgba(255,
            255,
            255,
            0.67);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   CONTACT LINK
========================================================= */

.footer-contact-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 22px;

    padding: 11px 18px;

    border-radius: 999px;

    background:
        linear-gradient(135deg,
            #ef4444 0%,
            #dc2626 50%,
            #b91c1c 100%);

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 7px 20px rgba(185, 28, 28, 0.22);

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;

}


.footer-contact-link:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px rgba(185, 28, 28, 0.32);

}


.footer-contact-link svg {

    transition:
        transform 200ms ease;

}


.footer-contact-link:hover svg {

    transform:
        translateX(4px);

}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h3 {

    margin-bottom: 20px;

    color: var(--white);

    font-size: 14px;

    font-weight: 700;

}


.footer-column ul {

    display: flex;

    flex-direction: column;

    gap: 11px;

    list-style: none;

}


.footer-column a {

    color:
        rgba(255,
            255,
            255,
            0.62);

    font-size: 13px;

    transition:
        color 200ms ease;

}


.footer-column a:hover {

    background:
        linear-gradient(135deg,
            #60a5fa,
            #ef4444);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.footer-disclaimer {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 22px 0;

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

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

}


.disclaimer-icon {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(59,
            130,
            246,
            0.12);

    color:
        #60a5fa;

}


.footer-disclaimer p {

    color:
        rgba(255,
            255,
            255,
            0.57);

    font-size: 12px;

    line-height: 1.7;

}


.footer-disclaimer strong {

    color:
        rgba(255,
            255,
            255,
            0.82);

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p {

    color:
        rgba(255,
            255,
            255,
            0.45);

    font-size: 12px;

}


.footer-legal-links {

    display: flex;

    align-items: center;

    gap: 20px;

}


.footer-legal-links a {

    color:
        rgba(255,
            255,
            255,
            0.52);

    font-size: 12px;

    transition:
        color var(--transition-fast);

}


.footer-legal-links a:hover {

    color: var(--white);

}


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

@media (max-width: 950px) {

    .footer-main {

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

        gap: 40px;

    }


    .footer-brand {

        grid-column: 1 / -1;

        max-width: 600px;

    }

}


@media (max-width: 650px) {

    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap: 36px 25px;

        padding: 55px 0 40px;

    }


    .footer-brand {

        grid-column: 1 / -1;

    }


    .footer-disclaimer {

        padding: 20px 0;

    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        padding: 20px 0;

    }


    .footer-legal-links {

        flex-wrap: wrap;

        gap: 10px 18px;

    }

}


@media (max-width: 420px) {

    .footer-main {

        grid-template-columns: 1fr;

    }

}