/* =======================================================
   REUSABLE COMPONENTS
   Buttons and other shared UI elements used across sections.
======================================================= */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.4rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform .25s var(--ease-out),
              background .25s,
              color .25s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--amber);
  color: var(--bg);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--amber-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover {
  background: var(--bg-elev);
  border-color: var(--ink-3);
}

.btn svg {
  width: 14px;
  height: 14px;
}

/* Arrow icon hover animation */
.btn .arrow {
  transition: transform .3s var(--ease-out);
}
.btn:hover .arrow {
  transform: translate(3px, -3px);
}