:root {
  --bte-primary: #7c4dff;
  --bte-accent: #16a34a;
  --bte-ink: #121417;
  --bte-muted: #6b7280;
  --bte-bg: #ffffff;
}

html,
body {
  background: var(--bte-bg);
  color: var(--bte-ink);
}

.navbar .btn {
  border-radius: 999px;
}

.btn-primary {
  --bs-btn-bg: var(--bte-primary);
  --bs-btn-border-color: var(--bte-primary);
  --bs-btn-hover-bg: #643fe0;
  --bs-btn-hover-border-color: #643fe0;
  --bs-btn-focus-shadow-rgb: 124, 77, 255;
}

.text-primary {
  color: var(--bte-primary) !important;
}
.bg-hero {
  background: linear-gradient(135deg, #7c4dff 0%, #5b6cff 40%, #16a34a 100%);
}
.bg-cta {
  background: linear-gradient(135deg, #16a34a 0%, #7c4dff 100%);
}

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

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

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

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

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