/* ===========================

   FOOTER WRAPPER

   =========================== */

.footer-wrapper {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at top left, rgba(123, 91, 230, 0.16), transparent 30%),

        radial-gradient(circle at bottom right, rgba(79, 70, 229, 0.14), transparent 28%),

        linear-gradient(135deg, #0b1020 0%, #11162a 50%, #0f1123 100%);

    color: #dcdcec;

    width: min(1200px, calc(100% - 32px));

    margin: 110px auto 130px;

    padding: 42px 38px 24px;

    border-radius: 28px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    box-shadow:

        0 20px 50px rgba(2, 6, 23, 0.35),

        inset 0 1px 0 rgba(255, 255, 255, 0.04);

}



/* ===========================

   DECORATIVE GLOW

   =========================== */

.footer-glow {

    position: absolute;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(60px);

    opacity: 0.55;

}



.footer-glow-1 {

    width: 180px;

    height: 180px;

    top: -60px;

    left: -40px;

    background: rgba(99, 102, 241, 0.18);

}



.footer-glow-2 {

    width: 220px;

    height: 220px;

    right: -70px;

    bottom: -80px;

    background: rgba(168, 85, 247, 0.16);

}



/* ===========================

   GRID

   =========================== */

.footer-container {

    position: relative;

    z-index: 1;

    display: grid;

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

    gap: 44px;

    align-items: start;

}



/* ===========================

   BRAND

   =========================== */

.footer-col-brand {

    max-width: 380px;

}



.footer-brand {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;

}



.footer-logo {

    height: 46px;

    width: auto;

    object-fit: contain;

    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22));

}



.footer-title {

    font-size: 1.55rem;

    line-height: 1.1;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: -0.02em;

}



.footer-desc {

    margin: 0;

    font-size: 0.96rem;

    line-height: 1.75;

    color: rgba(220, 220, 236, 0.78);

}



/* ===========================

   HEADINGS

   =========================== */

.footer-heading {

    margin: 0 0 16px;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.02em;

    color: #ffffff;

}



/* ===========================

   LINKS

   =========================== */

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 11px;

}



.footer-links a {

    position: relative;

    width: fit-content;

    color: rgba(220, 220, 236, 0.82);

    text-decoration: none;

    font-size: 0.95rem;

    line-height: 1.5;

    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;

}



.footer-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -3px;

    width: 0;

    height: 1px;

    background: linear-gradient(90deg, #8b5cf6, #6366f1);

    transition: width 0.28s ease;

}



.footer-links a:hover {

    color: #ffffff;

    transform: translateX(4px);

}



.footer-links a:hover::after {

    width: 100%;

}



/* ===========================

   DIVIDER

   =========================== */

.footer-divider {

    position: relative;

    z-index: 1;

    height: 1px;

    margin: 30px 0 18px;

    background: linear-gradient(

        90deg,

        rgba(255,255,255,0),

        rgba(255,255,255,0.12),

        rgba(255,255,255,0)

    );

}



/* ===========================

   BOTTOM

   =========================== */

.footer-bottom {

    position: relative;

    z-index: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    text-align: center;

    font-size: 0.88rem;

    color: rgba(220, 220, 236, 0.58);

}



.footer-dot {

    opacity: 0.45;

}



/* ===========================

   RESPONSIVE

   =========================== */

@media (max-width: 1024px) {

    .footer-wrapper {

        width: min(100%, calc(100% - 24px));

        margin: 90px auto 120px;

        padding: 34px 24px 22px;

        border-radius: 24px;

    }



    .footer-container {

        grid-template-columns: 1fr 1fr;

        gap: 34px 28px;

    }



    .footer-col-brand {

        max-width: 100%;

        grid-column: 1 / -1;

    }

}



@media (max-width: 768px) {

    .footer-wrapper {

        width: calc(100% - 20px);

        margin: 70px auto 115px;

        padding: 28px 18px 20px;

        border-radius: 22px;

    }



    .footer-container {

        grid-template-columns: 1fr;

        gap: 28px;

    }



    .footer-brand {

        gap: 12px;

        margin-bottom: 14px;

    }



    .footer-logo {

        height: 40px;

    }



    .footer-title {

        font-size: 1.32rem;

    }



    .footer-desc {

        font-size: 0.92rem;

        line-height: 1.7;

    }



    .footer-heading {

        margin-bottom: 12px;

        font-size: 0.98rem;

    }



    .footer-links {

        gap: 9px;

    }



    .footer-links a {

        font-size: 0.93rem;

    }



    .footer-divider {

        margin: 24px 0 16px;

    }



    .footer-bottom {

        font-size: 0.82rem;

        gap: 6px;

    }



    .footer-dot {

        display: none;

    }

}