/* ============================================================
   12 · Footer + back-to-top
   ============================================================ */

.footer { position: relative; z-index: 2; border-top: 1px solid rgba(148, 163, 184, .1); padding: 60px 0 30px; background: var(--ink-950); }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 40px; align-items: start; margin-bottom: 48px; }
.footer-left { min-width: 0; }
.footer-tag { margin-top: 16px; color: var(--slate-500); max-width: 320px; font-size: .9rem; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: .88rem; color: var(--slate-400); transition: color .2s, padding-left .3s var(--ease);
}
.footer-links a:hover { color: var(--blue-300); padding-left: 6px; }
.footer-mail { text-align: right; }
.footer-mail-label { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 10px; }
.footer-mail a { font-family: var(--font-mono); font-size: .88rem; color: var(--blue-300); border-bottom: 1px dashed rgba(96, 165, 250, .4); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.footer-mail a:hover { color: var(--violet-400); border-color: var(--violet-400); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(148, 163, 184, .08); }
.footer-bottom p { font-size: .78rem; color: var(--slate-500); }
.footer-made { font-family: var(--font-mono); font-size: .7rem; }

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(139, 92, 246, .5);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); color: var(--slate-300);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s, visibility .35s, transform .35s var(--ease), box-shadow .35s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { box-shadow: 0 0 26px rgba(139, 92, 246, .6); color: var(--violet-600); }
.to-top svg { width: 20px; height: 20px; }