:root {
  --ikun-cyan: #32cde6;
  --ikun-blue: #3f8ef7;
  --ikun-indigo: #5363f7;
  --ikun-purple: #a855f7;
  --ikun-ink: #07101f;
}

.btn-primary {
  border-color: transparent !important;
  background-image: linear-gradient(135deg, var(--ikun-cyan) 0%, var(--ikun-indigo) 55%, var(--ikun-purple) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgb(83 99 247 / 24%) !important;
}

.btn-primary:hover {
  background-image: linear-gradient(135deg, #24bddd 0%, #4554ea 55%, #9443e8 100%) !important;
  box-shadow: 0 12px 28px rgb(83 99 247 / 32%) !important;
  transform: translateY(-1px);
}

.text-primary-300,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-primary-800,
.text-primary-900 {
  color: var(--ikun-indigo) !important;
}

.bg-primary-400,
.bg-primary-500,
.bg-primary-600 {
  background-color: var(--ikun-indigo) !important;
}

.bg-primary-50,
.bg-primary-100 {
  background-color: #f2f5ff !important;
}

.border-primary-300,
.border-primary-400,
.border-primary-500,
.border-primary-600 {
  border-color: var(--ikun-indigo) !important;
}

.ring-primary-400,
.ring-primary-500,
.ring-primary-600,
input:focus,
textarea:focus,
select:focus {
  --tw-ring-color: rgb(83 99 247 / 42%) !important;
  border-color: var(--ikun-indigo) !important;
}

::selection {
  background: rgb(83 99 247 / 20%);
}

.ikun-brand-hero {
  margin: 0 auto 1.5rem;
  max-width: 780px;
  padding: 1rem 1.5rem;
}

.ikun-brand-hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .ikun-brand-hero {
    padding: .5rem;
  }
}