.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fm); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 26px; border-radius:100px;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  border:none; white-space:nowrap; cursor:pointer;
}
.btn svg { flex-shrink:0; transition:transform .3s var(--ease2) }
.btn:hover svg { transform:translateX(3px) }

.btn-light {
  background:#fff; color:var(--black);
}
.btn-light:hover { background:#ECEAE5; transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.10) }
.btn-light:focus-visible { outline:2px solid #fff; outline-offset:3px }

.btn-ghost {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover { border-color:rgba(255,255,255,.55); transform:translateY(-1px) }
.btn-ghost:focus-visible { outline:2px solid rgba(255,255,255,.6); outline-offset:3px }

.btn-dark {
  background:var(--ink); color:#fff;
}
.btn-dark:hover { background:#2a2825; transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.18) }
.btn-dark:focus-visible { outline:2px solid var(--ink); outline-offset:3px }

.btn-border {
  background:transparent; color:var(--ink);
  border:1px solid var(--rule);
}
.btn-border:hover { border-color:var(--gray2); background:var(--off); transform:translateY(-1px) }
.btn-border:focus-visible { outline:2px solid var(--ink); outline-offset:3px }