.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
/* Марка живе всередині `.stack`, а це grid — і grid НЕ слухає text-align:
   елемент розтягується на всю колонку, а сфера з назвою тиснуться до лівого
   краю. Тому центруємо саму марку, а не її текст. */
.center .wordmark { justify-self: center; }
.wordmark-lg { gap: 12px; }
.wordmark-sphere {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe3ff 0%, #6fa3ff 35%, #1f4fa8 70%, #0b1f4a 100%);
  box-shadow: 0 0 24px rgba(111, 163, 255, 0.35);
  flex: none;
}
.wordmark-name { font-family: var(--display); font-weight: 300; letter-spacing: -0.01em; }
.wordmark-xs { gap: 7px; }
.wordmark-xs .wordmark-name { font-size: 21px; }
.wordmark-sm .wordmark-name { font-size: 22px; }
.wordmark-lg .wordmark-name { font-size: 40px; }