/* Marketing components — scoped .site-* */

.site-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-marketing-body, var(--font));
  border: 1px solid transparent;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}

.site-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.site-btn--primary {
  background: linear-gradient(
    135deg,
    var(--accent-hover) 0%,
    var(--accent) 52%,
    var(--accent-dim) 100%
  );
  color: var(--bg-input);
  border-color: transparent;
  border-radius: var(--radius-xl);
}

.site-btn--primary:hover {
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-hover) 48%,
    var(--accent-dim) 100%
  );
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 28px var(--accent-muted);
}

@media (prefers-reduced-motion: reduce) {
  .site-btn--primary,
  .site-btn--primary:hover {
    transition: none;
  }
}

.site-btn--ghost {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-card);
}

.site-btn--ghost:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

.site-muted {
  color: var(--text-sub);
}