.hero {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

.links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1rem;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  border: 1px solid #ffffff33;
  padding: 0.5rem 1rem;
  border-radius: 999px;

  background: #ffffff0a;
  font-size: 1.2rem;
  opacity: 0.85;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.link-item:hover {
  background: #ffffff18;
  border-color: #ffffff66;
  transform: translateY(-2px);
  opacity: 1;
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
  transform: translateX(0) rotate(0deg);

  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease;
}

.link-item:hover .icon {
  transform: translateX(3px) rotate(3deg);
}

.link-item:active .icon {
  transform: translateX(1px) rotate(2deg) scale(0.95);
}

/* Brand hover colors */
.link-item.instagram:hover {
  border-color: #e1306c66;
}

.link-item.instagram:hover .icon {
  color: #e1306c;
}

.link-item.twitter:hover {
  border-color: #1da1f266;
}

.link-item.twitter:hover .icon {
  color: #1da1f2;
}

.link-item.patreon:hover {
  border-color: #ff424d66;
}

.link-item.patreon:hover .icon {
  color: #ff424d;
}

.link-item.email:hover {
  border-color: #ea433566;
}

.link-item.email:hover .icon {
  color: #ea4335;
}