feat: align footer with portfolio design

src/components/FooterSection.module.css

@@ -6,7 +6,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  background-color: var(--bg-page);
 }
 
 .bgContainer {
@@ -30,7 +31,7 @@
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin-top: -60px; /* aligns with visual layout */
+  margin-top: 84px;
 }
 
 .ctaTitle {
@@ -46,8 +47,8 @@
   line-height: var(--line-height-body-large);
   color: var(--text-secondary);
   font-weight: 500;
-  letter-spacing: 0.04em;
-  margin-bottom: 40px;
+  letter-spacing: var(--letter-spacing-eyebrow);
+  margin-bottom: 24px;
 }
 
 .socialRow {
@@ -63,44 +64,37 @@
   gap: 12px;
   color: var(--text-primary);
   text-decoration: none;
-  transition: transform 0.2s ease;
+  transition: color 0.2s ease, transform 0.2s ease;
 }
 
 .socialItem:hover {
-  transform: translateY(-4px);
+  color: var(--accent-default);
+  transform: translateY(-2px);
 }
 
-.iconCircle {
+.socialItem:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 6px;
+  border-radius: var(--radius-sm);
+}
+
+.socialIcon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--size-social-button);
-  height: var(--size-social-button);
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border-default);
-  color: var(--text-primary);
-  box-shadow: 0 4px 12px var(--shadow-color);
-  transition: all 0.2s ease;
+  width: 48px;
+  height: 48px;
 }
 
-.socialItem:hover .iconCircle {
-  border-color: var(--accent-default);
-  color: var(--accent-default);
-  background: rgba(255, 255, 255, 0.9);
+.socialIcon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
 }
 
-[data-theme="dark"] .iconCircle {
-  background: rgba(9, 28, 63, 0.7);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-[data-theme="dark"] .socialItem:hover .iconCircle {
-  background: rgba(16, 63, 127, 0.9);
-  border-color: var(--accent-default);
-  color: #ffffff;
+.giteaCutout {
+  fill: var(--bg-page);
 }
 
 .socialLabel {