/* FluxFront — footer component · extracted verbatim from base.css for modularity (render-identical). */
/* ---- Footer ----------------------------------------------- */
.footer { background: var(--ink-deep); color: #C4C9D2; padding-block: clamp(56px, 7vw, 88px) 40px; }
.footer a { color: #C4C9D2; transition: color var(--d-2); }
.footer a:hover { color: var(--teal); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px 28px; }
.footer-brand img { height: 26px; margin-bottom: 18px; }
.footer-brand p { color: #8B919C; font-size: var(--t-sm); max-width: 30ch; }
.footer-col h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: #6E747F; font-weight: 600; margin-bottom: 16px; font-family: var(--font-mono); }
.footer-col a { display: block; font-size: var(--t-sm); margin-bottom: 11px; }
.footer-bot { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  align-items: center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-line);
  color: #6E747F; font-size: var(--t-xs); }
.footer-bot .mono { color: #8B919C; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }