/* =========================================================
   ANATOMARK — SITE FOOTER (shared by every page except AR View)
   Phone: brand, two link columns, credits, bottom bar.
   Desktop: brand + two columns side by side.
   ========================================================= */
.site-footer {
  margin-top: 56px;
  padding: 32px 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border-top: 1px solid rgba(0, 229, 199, 0.14);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.footer-brandcol { grid-column: 1 / -1; }
.site-footer p { margin: 0; }
.footer-brand { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-white); }
.footer-brand span { color: var(--color-primary); }
.footer-tag { margin-top: 4px !important; max-width: 34ch; text-wrap: balance; }
.footer-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.footer-col h2 {
  margin: 0 0 4px; color: var(--color-primary);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.footer-col a, .footer-bar a { color: var(--color-text-muted); text-decoration: none; }
.footer-col a { padding: 2px 0; }
.footer-col a:hover, .footer-col a:focus-visible, .footer-bar a:hover, .footer-bar a:focus-visible { color: var(--color-primary); }
.footer-credits {
  max-width: 900px; margin: 26px auto 0 !important; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-wrap: balance;
}
.site-footer strong { color: var(--color-white); font-weight: 600; }
.footer-sep { margin: 0 6px; opacity: 0.5; }
.footer-bar {
  max-width: 900px; margin: 14px auto 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px;
}
.footer-links { display: flex; gap: 18px; }

@media (max-width: 480px) {
  .footer-sep { display: none; }
  .footer-line { display: block; }
}
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brandcol { grid-column: auto; }
  .footer-credits { text-align: left; }
}
.footer-build { opacity: 0.6; }