:root {
  --indigo: #191c3a;
  --purple: #5b2cff;
  --magenta: #ff3ea5;
  --amber: #ffb703;
  --moon: #e6e9f2;
  --ink-600: #334155;
}
html,
body {
  font-family: Urbanist, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--indigo);
  background: #fff;
}
.font-playfair {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.fw-extrabold {
  font-weight: 800;
}
.opacity-90 {
  opacity: 0.9;
}
a {
  text-decoration: none;
}

.text-gradient {
  background: linear-gradient(
    90deg,
    var(--magenta),
    var(--amber),
    var(--purple)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-celestial {
  background: radial-gradient(
      1200px 600px at 15% 10%,
      rgba(91, 44, 255, 0.25),
      transparent 60%
    ),
    linear-gradient(135deg, var(--indigo), #2a2156);
}
.py-lg-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.bg-moon {
  background: var(--moon);
}
.soft-card {
  background: #fff;
  border: 1px solid rgba(25, 28, 58, 0.08);
}

.step {
  position: relative;
}
.step .step-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}

.btn-magenta {
  background: var(--magenta);
  color: #fff;
}
.btn-magenta:hover {
  opacity: 0.9;
}
.btn-amber {
  background: var(--amber);
  color: #1a1a1a;
}
.btn-amber:hover {
  opacity: 0.9;
}
.btn-outline-purple {
  border-color: var(--purple);
  color: var(--purple);
}
.btn-outline-purple:hover {
  background: var(--purple);
  color: #fff;
}
.btn-outline-magenta {
  border-color: var(--magenta);
  color: var(--magenta);
}
.btn-outline-magenta:hover {
  background: var(--magenta);
  color: #fff;
}
.btn-outline-amber {
  border-color: var(--amber);
  color: var(--amber);
}
.btn-outline-amber:hover {
  background: var(--amber);
  color: #1a1a1a;
}
.border-amber {
  border-color: var(--amber) !important;
}

.text-indigo {
  color: var(--indigo);
}
.text-purple {
  color: var(--purple);
}
.text-magenta {
  color: var(--magenta);
}
.text-amber {
  color: var(--amber);
}

.bg-magenta-subtle {
  background: rgba(255, 62, 165, 0.12);
}
.bg-amber-subtle {
  background: rgba(255, 183, 3, 0.16);
}
.bg-purple-subtle {
  background: rgba(91, 44, 255, 0.14);
}

.navbar .nav-link.active {
  font-weight: 600;
  color: var(--magenta) !important;
}
.navbar .nav-link:hover {
  color: var(--magenta);
}

.pricing-card.highlight {
  transform: translateY(-4px);
}