/* =========================================================
   Component · buttons (every button: logo blue with a light-orange label).
   ========================================================= */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px;
  border: 0; border-radius: 999px;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--ink); color: var(--accent-light);   /* every button: logo blue, light-orange label */
  transition: transform .45s var(--servo), box-shadow .3s, background-color .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--ink-deep); }
.btn:active { transform: translateY(1px); transition-duration: .1s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--sm { padding: 11px 18px; font-size: 14px; }
/* primary actions keep a soft glow so they still lead next to secondary ones */
.btn--accent { box-shadow: 0 10px 24px -12px var(--ink); }
.btn--accent:hover { box-shadow: 0 16px 30px -12px var(--ink); }
.btn__arrow { display: inline-block; transition: transform .45s var(--servo); }
.btn:hover .btn__arrow { transform: translateX(4px); }