.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: var(--bg);
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1rem; text-decoration: none;
  padding: 0.6rem 1.4rem; border-radius: 8px; border: none; cursor: pointer;
  transition: background 0.15s ease-out;
}
.btn svg { transition: transform 0.15s ease-out; }
.btn:hover { background: var(--accent-hover); }
.btn:hover svg { transform: translateX(4px); }
.btn.magnetic { will-change: transform; }

.btn.ghost { background: transparent; border: 1.5px solid color-mix(in oklch, var(--bg) 35%, var(--ink)); color: var(--bg); }
.btn.ghost:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 25%, var(--ink)); }

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