/* =========================================================
   1. FOOTER
========================================================= */
/* =========================================================
   FOOTER
========================================================= */
footer           {   margin-top: 20px; /* ← added */border-top: 1px solid var(--border); background: var(--surface); padding: 18px 0; font-size: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.35);}
footer .container { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; }
footer .f-left   { color: var(--ink-muted); }
footer .f-center { text-align: center; color: var(--ink-muted); }
footer .f-right  { text-align: right; }
footer a         { color: var(--ink-muted); }
footer a:hover   { color: var(--teal); }

@media (max-width:768px) {
  footer .container { grid-template-columns:1fr; text-align:center; gap: 6px;}
  footer .f-left,footer .f-right { text-align:center; }
}