.btn {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
  width: fit-content;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 16px 35px rgba(11, 194, 140, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(11, 194, 140, 0.45);
}

.btn-full {
  width: 100%;
}

/* =========================================
   BUTTON FOCUS / TAP
========================================= */

button,
a,
.btn {
  -webkit-tap-highlight-color: transparent;
}

.btn:focus {
  outline: none;
}

.btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: inherit;
}

.btn:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(11, 194, 140, 0.22),
    0 16px 35px rgba(11, 194, 140, 0.35);
}

/* Mobile / touch */
@media (hover: none) and (pointer: coarse) {
  .btn:focus,
  .btn:active {
    outline: none;
    box-shadow: 0 16px 35px rgba(11, 194, 140, 0.35);
  }

  .btn-primary:focus,
  .btn-primary:active {
    outline: none;
    box-shadow: 0 16px 35px rgba(11, 194, 140, 0.35);
  }
}