/* ══════════════════════════════════════════════════════════
   SOCIAL PAGE
   ══════════════════════════════════════════════════════════ */
.social-grid {
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.social-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: background .15s var(--ease);
}
.social-item:active { background: var(--bg2); }
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.si-fb { background: #E7F0FF; }
.si-ig { background: #FDE8EF; }
.si-yt { background: #FEE2E2; }
.si-li { background: #E0F0FF; }
.si-tg { background: #E8F5FD; }
.si-web { background: var(--sage-soft); }
.social-item .si-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.social-item .si-url { font-size: var(--fs-xs); color: var(--hint); }
.social-item .si-arrow { color: var(--hint); margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   CONTACTS PAGE
   ══════════════════════════════════════════════════════════ */
.contacts-list {
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact-card {
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.contact-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--hint);
}
.contact-row span:first-child { width: 20px; text-align: center; }
.contact-row a { color: var(--link); }

