Design language tweaks v3

src/lib/styles/sections.css

@@ -545,6 +545,33 @@ footer {
   max-width: 30ch;
 }
 
+.footer-social-cluster {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.footer-social-invite {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 4px;
+  color: rgba(255, 255, 255, 0.82);
+  font-family: var(--font-head);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1.2;
+}
+
+:global(.footer-social-invite-arrow) {
+  font-size: 14px;
+  color: var(--yellow);
+  transform: rotate(24deg);
+  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
 .social-links a {
   width: 44px;
   height: 44px;
@@ -567,6 +594,12 @@ footer {
   transform: translateY(-1px);
 }
 
+@media (hover: hover) {
+  .footer-social-cluster:hover :global(.footer-social-invite-arrow) {
+    transform: rotate(34deg) translateX(1px) translateY(1px);
+  }
+}
+
 .footer-col-label {
   margin: 0 0 14px;
   font-family: var(--font-head);