/* ============================================================
   02 · Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s;
  white-space: nowrap;
}
.btn-primary {
  color: #fff; background: var(--grad);
  box-shadow: 0 12px 32px -10px rgba(124, 58, 237, .55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(124, 58, 237, .75); }
.btn-ghost {
  color: var(--slate-300); border-color: rgba(148, 163, 184, .35);
  background: rgba(255, 255, 255, .6); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--blue-400); color: var(--violet-600); transform: translateY(-2px); }
.btn-light {
  color: #0d1526; background: #fff; border-color: #fff;
  box-shadow: 0 16px 44px -12px rgba(15, 23, 42, .18);
  padding: 18px 34px; font-size: 1rem; gap: 16px;
}
.btn-light:hover { transform: translateY(-3px) scale(1.02); }
.btn-sm { padding: 12px 22px; font-size: .85rem; }
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translate(3px, -3px); }

/* WhatsApp brand button */
.btn-wa {
  color: #fff; background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 12px 32px -10px rgba(37, 211, 102, .5);
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(37, 211, 102, .7); }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; }