.page-footer{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    margin-top: 4rem;
    padding: 3.5rem 2rem 2rem;

    background-color: hsl(192.22deg 100% 10.59% / 100%);

    background-image:
        /* stronger teal glow (left) */
        radial-gradient(900px 520px at 18% 0%,
            hsla(186 100% 70% / 0.22) 0%,
            hsla(186 100% 70% / 0.00) 58%
        ),
        /* stronger blue glow (right) */
        radial-gradient(780px 520px at 92% 18%,
            hsla(210 90% 60% / 0.16) 0%,
            hsla(210 90% 60% / 0.00) 62%
        ),
        /* top sheen */
        linear-gradient(180deg,
            hsla(0 0% 100% / 0.10) 0%,
            hsla(0 0% 100% / 0.00) 26%
        ),
        /* subtle bottom vignette (adds “depth”) */
        linear-gradient(0deg,
            hsla(0 0% 0% / 0.18) 0%,
            hsla(0 0% 0% / 0.00) 45%
        );

    border-top: 1px solid hsla(0 0% 100% / 0.10);

    /* tiny text lift without “heavy shadow” */
    text-shadow: 0 1px 0 hsla(0 0% 0% / 0.28);

    color: hsla(192deg 40% 96% / 0.78);
}

/* links: clearer, but not loud */
.page-footer a{
    color: hsla(192deg 40% 96% / 0.78);
    text-decoration: none;
    transition: color 140ms ease, opacity 140ms ease;
}

.page-footer a:hover{
    color: hsla(192deg 60% 98% / 0.92);
}

/* keyboard accessibility */
.page-footer a:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px hsla(192.22deg 100% 35% / 0.25);
    border-radius: 10px;
}

.footer-nav-section{
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.625rem;
    line-height: 1.35;
}

/* headings: lose monospace, make it cleaner */
.footer-nav-section h5{
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    font-size: 0.625rem;
    color: hsla(192deg 40% 96% / 0.50);
}

/* optional: make the brand row feel more deliberate */
.page-footer strong{
    color: hsla(192deg 60% 98% / 0.92);
    letter-spacing: 0.01em;
}

/* optional: slightly dim SVG icons by default */
.page-footer .g_svg{
    opacity: 0.85;
}

/* responsive: avoid cramped columns */
@media (max-width: 760px){
    .page-footer{
        padding: 3rem 1.25rem 2rem;
    }
    .footer-nav-section{
        font-size: 0.9rem;
    }
}