.tg-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 15px 28px;
  border-radius: 999px;
  background: linear-gradient(110deg, #087fae, #0865c6);
  color: #fff;
  text-decoration: none;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  animation: tg-breathe 2.8s ease-in-out infinite;
  transition: filter .2s ease;
}
.tg-group > [aria-hidden] { transform: rotate(-25deg); font-size: 24px; }
.tg-group-handle { font-size: .85em; font-weight: 700; }
.tg-group:hover { color: #fff; filter: brightness(1.08); }
.tg-group:focus-visible { outline: 3px solid #064f9b; outline-offset: 5px; }
@keyframes tg-breathe {
  0%, 100% { box-shadow: 0 4px 12px rgb(0 135 235 / 20%), 0 0 0 0 rgb(0 149 255 / 8%); }
  50% { box-shadow: 0 6px 26px rgb(0 135 235 / 46%), 0 0 0 7px rgb(0 149 255 / 7%); }
}
@media (max-width: 480px) {
  .tg-group { padding: 12px 18px; gap: 4px 8px; }
  .tg-group-handle { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-group { animation: none; box-shadow: 0 4px 16px rgb(0 135 235 / 25%); }
}