页脚

src/styles/global.css

@@ -814,14 +814,127 @@ h2 {
   color: rgba(255, 253, 247, 0.78);
 }
 
-footer {
-  padding: 24px;
+.site-footer {
+  display: grid;
+  justify-items: center;
+  gap: 14px;
+  padding: 28px 24px;
   color: rgba(255, 253, 247, 0.58);
   background: #1f2b2a;
   text-align: center;
   font-size: 14px;
 }
 
+.site-footer p {
+  margin: 0;
+}
+
+.footer-meta {
+  color: rgba(255, 253, 247, 0.42);
+  font-size: 12px;
+}
+
+.footer-contacts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+}
+
+.footer-contacts a {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid rgba(255, 253, 247, 0.18);
+  border-radius: 8px;
+  color: #fffdf7;
+  background: rgba(255, 253, 247, 0.06);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.footer-contacts .has-qr {
+  cursor: default;
+}
+
+.footer-contacts a:hover {
+  transform: translateY(-2px);
+  border-color: rgba(241, 201, 121, 0.58);
+  background: rgba(255, 253, 247, 0.12);
+}
+
+.footer-contacts i {
+  font-size: 18px;
+}
+
+.footer-contacts span {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.contact-qr {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 12px);
+  z-index: 5;
+  width: 156px;
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+  padding: 12px;
+  border: 1px solid rgba(31, 43, 42, 0.12);
+  border-radius: 8px;
+  background: #fffdf7;
+  color: var(--ink);
+  box-shadow: 0 18px 44px rgba(13, 20, 19, 0.28);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, 8px);
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
+}
+
+.contact-qr::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -7px;
+  width: 14px;
+  height: 14px;
+  background: #fffdf7;
+  border-right: 1px solid rgba(31, 43, 42, 0.12);
+  border-bottom: 1px solid rgba(31, 43, 42, 0.12);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.contact-qr img {
+  width: 132px;
+  height: 132px;
+  object-fit: contain;
+  border-radius: 4px;
+  background: #f4f7ee;
+}
+
+.contact-qr small {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.footer-contacts a:hover .contact-qr,
+.footer-contacts a:focus-visible .contact-qr {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 @media (max-width: 820px) {
   .site-header {
     position: absolute;