.btn {
  --btn-height: 48px;
  --btn-radius: 100px;
  --btn-pl: 20px;
  --btn-pr: 20px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--btn-height);
  padding-left: var(--btn-pl);
  padding-right: var(--btn-pr);
  font: var(--fw-semibold) 16px/28px var(--font-sans);
  letter-spacing: -0.01em;
  font-feature-settings: 'dlig' 1, 'lnum' 1, 'pnum' 1;
  border-radius: var(--btn-radius);
  color: var(--color-white);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn--yellow {
  --ring-paint: var(--color-yellow);
  background-color: rgba(248, 255, 19, 0.08);
  box-shadow: inset 0 0 16px 0 rgba(248, 255, 19, 0.25);
}
.btn--yellow:hover {
  background-color: rgba(248, 255, 19, 0.14);
  box-shadow: inset 0 0 16px 0 rgba(248, 255, 19, 0.35);
}

.btn--store:hover { transform: scale(1.03); }
.btn--store:active { transform: scale(1.01); }

.btn--glass {
  background-color: rgba(4, 5, 9, 0.48);
  background-image:
    linear-gradient(180deg, var(--color-lightwhite) 0%, rgba(240, 240, 240, 0) 66.327%),
    linear-gradient(90deg, var(--color-lightwhite) 0%, var(--color-lightwhite) 100%);
}

.btn--glass:hover {
  transform: scale(1.06);
  background-color: rgba(4, 5, 9, 0.52);
  box-shadow: inset 0 0 20px 0 rgba(240, 240, 240, 0.1);
  --ring-paint: linear-gradient(180deg, rgba(240, 240, 240, 0.24) 0%, rgba(240, 240, 240, 0) 66.327%);
}
.btn--glass:active { transform: scale(1.02); }

.btn--on-image {
  background-image:
    linear-gradient(90deg, rgba(248, 255, 19, 0.08) 0%, rgba(248, 255, 19, 0.08) 100%),
    linear-gradient(90deg, rgba(4, 5, 9, 0.48) 0%, rgba(4, 5, 9, 0.48) 100%);
  background-color: transparent;
}

.btn--lg { --btn-height: 64px; }
.btn--r20 { --btn-radius: 20px; }

.btn--square { width: 80px; }

.btn--store {
  --btn-pl: 24px;
  --btn-pr: 32px;
}
.btn--store .btn__icon {
  width: 28px;
  height: 28px;
  color: var(--color-yellow);
  overflow: visible;
}

.btn__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.btn__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.btn__stack-top {
  color: var(--color-grey);
  margin-bottom: -4px;
}
.btn__stack-main {
  font: var(--fw-semibold) 18px/28px var(--font-sans);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-feature-settings: 'dlig' 1, 'lnum' 1, 'pnum' 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }

  .btn--glass:hover,
  .btn--glass:active,
  .btn--store:hover,
  .btn--store:active,
  .site-header__download:hover,
  .site-header__download:active { transform: none; }
}