.button {
  display: inline-flex; min-height: 62px; align-items: center; justify-content: center;
  gap: 14px; padding: 0 27px; border: 1px solid transparent; border-radius: 12px;
  font-size: 16px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { background: var(--cyan); box-shadow: 0 16px 44px rgba(var(--cyan-rgb),.15); color: var(--navy); }
.button-outline { border-color: rgba(var(--cyan-rgb),.8); color: var(--white); }
.button-outline:hover { background: rgba(var(--cyan-rgb),.08); }
.button-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); }
.button-dark { margin-top: 38px; background: var(--navy); color: var(--white); }

@media (max-width: 640px) {
  .button { width: 100%; }
}