:root {
  --glow-cyan-soft: rgba(121, 231, 238, .08);
  --glow-cyan-active: rgba(121, 231, 238, .14);
  --glow-violet-soft: rgba(169, 126, 242, .09);
  --glow-violet-active: rgba(169, 126, 242, .18);
  --glow-focus: rgba(121, 231, 238, .14);
}

/* Свет остаётся привязанным к поверхности, а не образует широкий неоновый ореол. */
.button.primary {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .78),
    0 8px 22px var(--glow-cyan-soft),
    0 3px 10px rgba(0, 0, 0, .22);
}

.button.ghost {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .035),
    0 7px 20px rgba(0, 0, 0, .18);
}

/* Общий световой почерк фирменных 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(169, 126, 242, .055);
}

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

.cooperationCta,
.servicesCatalogLink,
.motionToggle {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .035),
    0 7px 18px rgba(0, 0, 0, .16);
}

.mobileMenuToggle,
.headerTelegram,
.footerSocial {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

: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 {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .9),
      0 14px 34px var(--glow-cyan-active),
      0 5px 16px rgba(89, 65, 132, .09);
  }

  .button.ghost:hover {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .055),
      0 12px 30px var(--glow-violet-soft),
      0 5px 16px rgba(0, 0, 0, .22);
  }

  .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 26px var(--glow-violet-active),
      0 0 18px rgba(121, 231, 238, .055);
  }

  .headerCta:hover .headerCtaArrow,
  .releaseStep.featured .releaseStepCta:hover > svg,
  .button.contactReleaseCta:hover > svg {
    box-shadow:
      0 8px 22px rgba(112, 76, 172, .34),
      0 0 14px rgba(121, 231, 238, .075),
      inset 0 1px rgba(255, 255, 255, .28);
  }

  .cooperationCta:hover,
  .servicesCatalogLink:hover,
  .motionToggle:hover {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .045),
      0 10px 26px var(--glow-violet-soft),
      0 4px 14px rgba(0, 0, 0, .2);
  }

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

:where(.button, .headerCta, .motionToggle, .cooperationCta, .servicesCatalogLink):disabled,
:where(.button, .headerCta, .motionToggle, .cooperationCta, .servicesCatalogLink)[aria-disabled="true"] {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .headerCta,
  .releaseStepCta,
  .contactReleaseCta,
  .motionToggle,
  .cooperationCta,
  .servicesCatalogLink,
  .mobileMenuToggle,
  .headerTelegram,
  .footerSocial {
    transition: none !important;
  }
}