:root {
  --bn-ink: #0e1320;
  --bn-mint: #11d1be;
  --bn-amber: #ffc857;
  --bn-iris: #5863f8;
  --bn-rose: #ff6f91;
  --bn-snow: #f8f9fb;
  --bs-primary: var(--bn-iris);
  --bs-secondary: var(--bn-amber);
}

html,
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;
  color: var(--bn-ink);
  background-color: #fff;
}
h1,
.display-5,
.display-6,
.h1,
.h2,
.h3 {
  letter-spacing: 0.2px;
}

.bg-bn-hero {
  background: radial-gradient(
      1200px 600px at 12% 8%,
      rgba(88, 99, 248, 0.12),
      transparent
    ),
    radial-gradient(
      900px 500px at 90% 30%,
      rgba(17, 209, 190, 0.1),
      transparent
    ),
    linear-gradient(180deg, #fff 0%, #fff 100%);
}
.bg-bn-cta {
  background: linear-gradient(
    90deg,
    rgba(88, 99, 248, 0.08),
    rgba(255, 200, 87, 0.1),
    rgba(255, 111, 145, 0.1)
  );
}

.btn-primary {
  --bs-btn-bg: var(--bn-iris);
  --bs-btn-border-color: var(--bn-iris);
  --bs-btn-hover-bg: #4350f0;
  --bs-btn-hover-border-color: #4350f0;
  --bs-btn-active-bg: #3544e6;
  --bs-btn-active-border-color: #3544e6;
}
.btn-outline-primary {
  --bs-btn-color: var(--bn-iris);
  --bs-btn-border-color: var(--bn-iris);
  --bs-btn-hover-bg: var(--bn-iris);
  --bs-btn-hover-border-color: var(--bn-iris);
}

.navbar-brand span {
  letter-spacing: 0.2px;
}
.card.rounded-4,
.rounded-4 {
  border-radius: 1rem !important;
}
.shadow-lg {
  box-shadow: 0 1.25rem 1.75rem rgba(14, 19, 32, 0.14) !important;
}
.object-fit-cover {
  object-fit: cover;
}
.pricing .display-6 {
  color: var(--bn-ink);
}

details.faq-item summary {
  cursor: pointer;
}

.hp-field {
  position: absolute !important;
  left: -50000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.fw-extrabold {
  font-weight: 800;
}
.py-6 {
  padding-block: 5rem;
}