:root {
  --slate: #0f172a;
  --emerald: #10b981;
  --amber: #f59e0b;
  --azure: #2563eb;
  --pearl: #f1f5f9;
  --ink-600: #334155;
}

html,
body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--slate);
  background: #fff;
}

.font-cormorant {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
.fw-extrabold {
  font-weight: 800;
}
.opacity-90 {
  opacity: 0.9;
}

.text-gradient {
  background: linear-gradient(
    90deg,
    var(--emerald),
    var(--amber),
    var(--azure)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-aurora {
  background: radial-gradient(
      1200px 600px at 15% 10%,
      rgba(16, 185, 129, 0.28),
      transparent 60%
    ),
    linear-gradient(135deg, #0b1022, #162a56);
  color: #fff;
}
.py-lg-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.bg-pearl {
  background: var(--pearl);
}
.soft-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

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

.btn-emerald {
  background: var(--emerald);
  color: #0b0b0b;
}
.btn-emerald:hover {
  opacity: 0.9;
}
.btn-amber {
  background: var(--amber);
  color: #1a1a1a;
}
.btn-amber:hover {
  opacity: 0.9;
}
.btn-outline-azure {
  border-color: var(--azure);
  color: var(--azure);
}
.btn-outline-azure:hover {
  background: var(--azure);
  color: #fff;
}
.btn-outline-emerald {
  border-color: var(--emerald);
  color: var(--emerald);
}
.btn-outline-emerald:hover {
  background: var(--emerald);
  color: #0b0b0b;
}
.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-slate {
  color: var(--slate);
}
.text-emerald {
  color: var(--emerald);
}
.text-amber {
  color: var(--amber);
}
.text-azure {
  color: var(--azure);
}

.bg-emerald-subtle {
  background: rgba(16, 185, 129, 0.12);
}
.bg-amber-subtle {
  background: rgba(245, 158, 11, 0.16);
}
.bg-azure-subtle {
  background: rgba(37, 99, 235, 0.14);
}

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

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

a {
  text-decoration: none;
}