.site-footer { background: var(--color-footer); color: #fff; padding: 4rem 0 1.4rem; }
.site-footer p, .site-footer a { color: rgba(255,255,255,.76); }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 2rem; }
.site-footer__logo { width: 240px; margin-bottom: 1.2rem; }
.site-footer h3 { font-size: 1.05rem; margin-bottom: .9rem; color: #fff; }
.site-footer ul { display: grid; gap: .45rem; }
.socials { display: flex; gap: .65rem; margin-top: 1rem; }
.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.socials a:hover,
.socials a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.2);
}
.socials a img {
  width: 19px;
  height: 19px;
  display: block;
  filter: brightness(0) invert(1);
}
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.5rem; padding-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .92rem; }