/* Shared — footer social row + hero Discord CTA. Official glyphs, currentColor, theme-aware. */

.foot { flex-wrap: wrap; row-gap: 14px; }

.socials { display: inline-flex; align-items: center; gap: 4px; }
.social {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--ink-40);
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.social svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.social:hover { color: var(--ink); background: var(--glass-tint); transform: translateY(-1px); }
.social.discord:hover { color: #5865f2; }
.social.youtube:hover { color: #ff0000; }
.social.x:hover { color: var(--ink); }

/* ---------- hero Discord join (home) ---------- */
.hero-join { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.join-msg { font-size: 14.5px; color: var(--ink-60); }
.join-msg b { color: var(--ink); font-weight: 600; }
.discord-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--pill-ink); background: var(--pill-bg);
  box-shadow: 0 10px 26px rgba(12, 19, 34, 0.25);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.3s ease;
}
.discord-cta svg { width: 19px; height: 19px; fill: #5865f2; }
.discord-cta .arr { transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4); }
.discord-cta:hover { color: var(--pill-ink); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(12, 19, 34, 0.32); }
.discord-cta:hover .arr { transform: translateX(4px); }

@media (max-width: 600px) {
  .hero-join { gap: 12px; }
}