.btn-hero-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 40px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent) !important;
  border-radius: 9999px !important;
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  ) !important;
  color: var(--on-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 12px 24px -10px color-mix(in srgb, var(--primary) 55%, transparent),
    0 4px 10px -6px color-mix(in srgb, var(--primary) 35%, transparent) !important;
  transition:
    transform var(--motion-base, 220ms)
      var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
    box-shadow var(--motion-base, 220ms) ease,
    background var(--motion-base, 220ms) ease,
    border-color var(--motion-base, 220ms) ease !important;
}
.btn-hero-primary:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cta-gradient-start) 82%, var(--primary-dim) 18%) 0%,
    color-mix(in srgb, var(--cta-gradient-mid) 86%, var(--primary-dim) 14%) 55%,
    color-mix(in srgb, var(--cta-gradient-end) 92%, var(--primary-dim) 8%) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 70%, transparent) !important;
  color: var(--on-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 38%, transparent),
    0 20px 36px -10px color-mix(in srgb, var(--primary) 62%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--primary) 45%, transparent) !important;
}
.btn-hero-primary:active {
  transform: translateY(0) !important;
  transition-duration: 100ms !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 20%, transparent),
    0 8px 18px -10px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}
.btn-hero-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 20px 40px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent) !important;
  border-radius: 9999px !important;
  background: var(--surface-bright) !important;
  color: var(--on-surface) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 4px 10px -8px color-mix(in srgb, var(--on-surface) 12%, transparent) !important;
  transition:
    transform var(--motion-base, 220ms)
      var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1)),
    background var(--motion-base, 220ms) ease,
    border-color var(--motion-base, 220ms) ease,
    color var(--motion-base, 220ms) ease,
    box-shadow var(--motion-base, 220ms) ease !important;
}
.btn-hero-secondary:hover {
  background: color-mix(
    in srgb,
    var(--surface-bright) 92%,
    var(--primary-container) 8%
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  color: var(--on-surface) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 6%, transparent),
    0 14px 28px -12px color-mix(in srgb, var(--primary) 35%, transparent),
    0 6px 14px -10px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
.btn-hero-secondary:active {
  transform: translateY(0) !important;
  transition-duration: 100ms !important;
  background: color-mix(
    in srgb,
    var(--surface-bright) 86%,
    var(--primary-container) 14%
  ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 6px 14px -10px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
.btn-hero-primary:focus-visible {
  outline: none !important;
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 12px 24px -10px color-mix(in srgb, var(--primary) 55%, transparent) !important;
}
.btn-hero-secondary:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
  box-shadow:
    var(--focus-ring),
    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 4%, transparent),
    0 4px 10px -8px color-mix(in srgb, var(--on-surface) 12%, transparent) !important;
}