:root {
    --footer-bg: #333;
    --footer-fg: #fff;
    --footer-muted: rgba(255,255,255,.75);
}

.site-footer {
    width: 100%;
    background: var(--footer-bg);
    color: var(--footer-fg);
    font-family: Arial, sans-serif;
    text-align: center;
}

.footer__inner {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.5rem;
}

.footer__section { min-width: 0; }
.footer__heading { margin: 0 0 .5rem 0; font-size: 1rem; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.footer__links a { color: var(--footer-fg); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    padding: .75rem 1.5rem;
    text-align: center;
    color: var(--footer-muted);
}

@media (max-width: 400px) {
    .footer__inner {
        grid-template-columns: 1fr;
    }
}