.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ja); font-size: 15px; font-weight: var(--fw-medium); line-height: 1;
  padding: 16px 36px; border-radius: var(--btn-radius);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
  white-space: nowrap;
}
.btn--primary { background: var(--c-white); color: var(--c-black); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,255,255,0.12); }
.btn--primary:active { transform: translateY(0); }
.section--light .btn--primary, .section--offwhite .btn--primary { background: var(--c-black); color: var(--c-white); }
.section--light .btn--primary:hover, .section--offwhite .btn--primary:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.btn--ghost { background: transparent; color: var(--c-text-on-dark); border: 1px solid var(--c-steel); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--c-steel-light); }
.section--light .btn--ghost, .section--offwhite .btn--ghost { color: var(--c-text-on-light); border-color: var(--c-card-light-border); }
.section--light .btn--ghost:hover, .section--offwhite .btn--ghost:hover { background: var(--c-light-gray); }
.btn--sm { font-size: 13px; padding: 10px 24px; }
.btn__arrow { transition: transform var(--duration-fast) ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }