.contact-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vh, 14px);
  max-width: 900px;
  margin: clamp(20px, 3vh, 34px) auto 0;
}

/* Pill button styling */
.manyak-btn {
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 250ms var(--scroll-ease), background 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
  text-transform: uppercase;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manyak-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
}

.manyak-btn .btn-label {
  flex: 1;
  text-align: center;
}

.manyak-btn .btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 250ms ease;
}

.manyak-btn .btn-arrow {
  font-size: 0.88rem;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}

.manyak-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.manyak-btn:hover .btn-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

.manyak-btn:hover .btn-dot {
  transform: scale(1.3);
}

/* Brand colored dot */
.x-link .btn-dot { background: #ffffff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.insta .btn-dot { background: #e1306c; box-shadow: 0 0 8px rgba(225, 48, 108, 0.6); }
.linkedin .btn-dot { background: #0077b5; box-shadow: 0 0 8px rgba(0, 119, 181, 0.6); }
.facebook .btn-dot { background: #1877f2; box-shadow: 0 0 8px rgba(24, 119, 242, 0.6); }
.kick .btn-dot { background: #53fc18; box-shadow: 0 0 8px rgba(83, 252, 24, 0.6); }
.twitch .btn-dot { background: #9146ff; box-shadow: 0 0 8px rgba(145, 70, 255, 0.6); }
.discord .btn-dot { background: #5865f2; box-shadow: 0 0 8px rgba(88, 101, 242, 0.6); }
.youtube .btn-dot { background: #ff0000; box-shadow: 0 0 8px rgba(255, 0, 0, 0.6); }

/* Brand hover colors */
.x-link:hover { border-color: #ffffff; background: #ffffff; color: #000; box-shadow: 0 14px 40px rgba(255, 255, 255, 0.25); }
.x-link:hover .btn-dot { background: #000; box-shadow: none; }
.insta:hover { border-color: #e1306c; background: linear-gradient(180deg, #e1306c, #c1225b); box-shadow: 0 14px 40px rgba(225, 48, 108, 0.35); }
.linkedin:hover { border-color: #0077b5; background: linear-gradient(180deg, #0077b5, #005e8f); box-shadow: 0 14px 40px rgba(0, 119, 181, 0.35); }
.facebook:hover { border-color: #1877f2; background: linear-gradient(180deg, #1877f2, #0f5fd0); box-shadow: 0 14px 40px rgba(24, 119, 242, 0.35); }
.kick:hover { border-color: #53fc18; background: #53fc18; color: #000; box-shadow: 0 14px 40px rgba(83, 252, 24, 0.3); }
.kick:hover .btn-dot { background: #000; box-shadow: none; }
.twitch:hover { border-color: #9146ff; background: linear-gradient(180deg, #9146ff, #772ce8); box-shadow: 0 14px 40px rgba(145, 70, 255, 0.35); }
.discord:hover { border-color: #5865f2; background: linear-gradient(180deg, #5865f2, #434edd); box-shadow: 0 14px 40px rgba(88, 101, 242, 0.35); }
.youtube:hover { border-color: #ff0000; background: linear-gradient(180deg, #ff1a1a, #cc0000); box-shadow: 0 14px 40px rgba(255, 0, 0, 0.35); }

/* Footer line */
.contact-footer {
  margin-top: clamp(22px, 3.5vh, 40px);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 520px;
  }
}

@media (max-width: 480px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .manyak-btn {
    padding: 11px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.8px;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manyak-btn,
  .manyak-btn .btn-dot,
  .manyak-btn .btn-arrow {
    transition: none !important;
    transform: none !important;
  }
}