/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--step-0);
  letter-spacing: -0.01em;
  border-radius: 100px;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow: 0 10px 24px -12px rgba(22,58,158,.7);
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(22,58,158,.75); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border: 1.5px solid var(--slate-300);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--blue-600); color: var(--blue-700); box-shadow: none; }
.btn--light { --btn-bg:#fff; --btn-fg: var(--blue-800); }
.btn--yellow { --btn-bg: var(--orange); --btn-fg: var(--ink); box-shadow: 0 10px 24px -12px rgba(217,126,0,.9); }
.btn--yellow:hover { background: var(--yellow-deep); }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--step-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600;
  color: var(--blue-700);
  font-size: var(--step-0);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }