:root {
  --coral: #ff6b6b;
  --saffron: #ffb703;
  --teal: #2ec4b6;
  --ink: #023047;
  --vanilla: #fdebd3;
  --ink-600: #334155;
}

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

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

.text-gradient {
  background: linear-gradient(90deg, var(--coral), var(--saffron), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sunrise {
  background: radial-gradient(
      1200px 600px at 15% 10%,
      rgba(255, 183, 3, 0.25),
      transparent 60%
    ),
    linear-gradient(135deg, var(--coral), var(--teal));
}
.py-lg-6 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.soft-card {
  background: #fff;
  border: 1px solid rgba(2, 48, 71, 0.08);
}
.bg-vanilla {
  background: var(--vanilla);
}

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

.pricing-card.highlight {
  transform: translateY(-4px);
}
.btn-coral {
  background: var(--coral);
  color: #fff;
}
.btn-coral:hover {
  opacity: 0.9;
}
.btn-saffron {
  background: var(--saffron);
  color: var(--ink);
}
.btn-outline-teal {
  border-color: var(--teal);
  color: var(--teal);
}
.btn-outline-teal:hover {
  background: var(--teal);
  color: #fff;
}
.btn-outline-coral {
  border-color: var(--coral);
  color: var(--coral);
}
.btn-outline-coral:hover {
  background: var(--coral);
  color: #fff;
}
.btn-outline-saffron {
  border-color: var(--saffron);
  color: var(--saffron);
}
.btn-outline-saffron:hover {
  background: var(--saffron);
  color: var(--ink);
}

.border-saffron {
  border-color: var(--saffron) !important;
}
.text-coral {
  color: var(--coral);
}
.text-saffron {
  color: var(--saffron);
}
.text-teal {
  color: var(--teal);
}
.text-ink {
  color: var(--ink);
}

.bg-coral-subtle {
  background: rgba(255, 107, 107, 0.12);
}
.bg-saffron-subtle {
  background: rgba(255, 183, 3, 0.16);
}
.bg-teal-subtle {
  background: rgba(46, 196, 182, 0.14);
}

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

a {
  text-decoration: none;
}