:root {
  --nbf-primary: #5b6cff;
  --nbf-accent: #19c37d;
  --nbf-ink: #121417;
  --nbf-muted: #6b7280;
  --nbf-bg: #ffffff;
}

body {
  color: var(--nbf-ink);
  background: var(--nbf-bg);
}

.btn-primary {
  --bs-btn-bg: var(--nbf-primary);
  --bs-btn-border-color: var(--nbf-primary);
  --bs-btn-hover-bg: #4957d9;
  --bs-btn-hover-border-color: #4957d9;
  --bs-btn-focus-shadow-rgb: 91, 108, 255;
}

.text-primary {
  color: var(--nbf-primary) !important;
}

.bg-gradient-hero {
  background: linear-gradient(135deg, #5b6cff 0%, #7c4dff 40%, #19c37d 100%);
}
.bg-gradient-cta {
  background: linear-gradient(135deg, #19c37d 0%, #5b6cff 100%);
}

.icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 108, 255, 0.1);
  color: var(--nbf-primary);
}

.step .step-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nbf-primary);
  color: #fff;
  font-weight: 700;
}

.plan-popular {
  border-width: 2px;
}
.ribbon {
  position: absolute;
  top: 12px;
  right: -36px;
  rotate: 45deg;
  background: var(--nbf-accent);
  color: #fff;
  padding: 4px 48px;
  font-weight: 600;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid #5b6cff44 !important;
  outline-offset: 2px;
}

.card:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}