:root {
  --control-focus: #c4a6ee;
  --glow-focus: rgba(196, 166, 238, .16);
  --glow-lilac-soft: rgba(183, 148, 232, .09);
  --glow-lilac-active: rgba(183, 148, 232, .18);
  --glow-violet-active: rgba(155, 105, 224, .2);
}

/* Основная кнопка теперь нейтрально-жемчужная, без холодного бирюзового оттенка. */
.button.primary,
.heroActions .button.primary {
  color: #17131d;
  border-color: rgba(232, 221, 246, .78);
  background: linear-gradient(135deg, #f5f2f7, #e6dfed);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .88),
    0 8px 22px var(--glow-lilac-soft),
    0 3px 10px rgba(0, 0, 0, .22);
}

/* У фирменных CTA остаётся только фиолетово-лиловый свет. */
.headerCta,
.releaseStep.featured .releaseStepCta,
.button.contactReleaseCta {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .055),
    0 10px 28px rgba(0, 0, 0, .26),
    0 0 18px rgba(155, 105, 224, .07);
}

.headerCtaArrow,
.releaseStep.featured .releaseStepCta > svg,
.button.contactReleaseCta > svg {
  box-shadow:
    0 6px 16px rgba(112, 76, 172, .3),
    inset 0 1px rgba(255, 255, 255, .22);
}

:where(
  .button,
  .headerCta,
  .headerTelegram,
  .mobileMenuToggle,
  .motionToggle,
  .cooperationCta,
  .servicesCatalogLink,
  .releaseStepCta,
  .contactReleaseCta,
  .faqSupport,
  .footerSocial,
  .footerCookieSettings
):focus-visible {
  outline-color: var(--control-focus);
  box-shadow:
    0 0 0 4px var(--glow-focus),
    0 10px 28px rgba(0, 0, 0, .22);
}

@media (hover: hover) and (pointer: fine) {
  .button.primary:hover,
  .heroActions .button.primary:hover {
    border-color: rgba(210, 185, 240, .88);
    background: linear-gradient(135deg, #faf7fb, #e9e0f1);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .94),
      0 14px 34px var(--glow-lilac-active),
      0 5px 16px rgba(70, 45, 103, .11);
  }

  .headerCta:hover,
  .releaseStep.featured .releaseStepCta:hover,
  .button.contactReleaseCta:hover {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .075),
      0 15px 36px rgba(0, 0, 0, .28),
      0 0 27px var(--glow-violet-active);
  }

  .headerCta:hover .headerCtaArrow,
  .releaseStep.featured .releaseStepCta:hover > svg,
  .button.contactReleaseCta:hover > svg {
    box-shadow:
      0 8px 22px rgba(112, 76, 172, .38),
      0 0 14px rgba(183, 148, 232, .1),
      inset 0 1px rgba(255, 255, 255, .28);
  }

  .mobileMenuToggle:hover,
  .headerTelegram:hover,
  .footerSocial:hover {
    box-shadow:
      0 9px 22px rgba(0, 0, 0, .22),
      0 0 16px rgba(169, 126, 242, .13);
  }
}