:root {
  --citrus: #16a34a;
  --mint: #10b981;
  --sun: #f59e0b;
  --ink: #0b1220;
  --mist: #f5f7fb;
  --citrus-soft: #d1fae5;
}

* {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
h1,
h2,
h3,
.navbar-brand {
  font-family: "Manrope", "Inter", system-ui, Segoe UI, Roboto, Helvetica, Arial;
}

.text-citrus {
  color: var(--citrus) !important;
}
.bg-citrus {
  background: var(--citrus) !important;
  color: #fff;
}
.bg-citrus-soft {
  background: var(--citrus-soft) !important;
}
.bg-ink {
  background: var(--ink) !important;
}
.bg-mist {
  background: var(--mist) !important;
}

.bg-citrus-gradient {
  background: linear-gradient(
    90deg,
    var(--citrus) 0%,
    var(--mint) 50%,
    var(--sun) 100%
  );
}

.link-citrus {
  color: var(--citrus);
  text-decoration: none;
}
.link-citrus:hover {
  color: var(--sun);
  text-decoration: underline;
}
.btn-citrus {
  background: linear-gradient(90deg, var(--citrus) 0%, var(--mint) 100%);
  color: #fff;
  border: 0;
}
.btn-citrus:hover {
  opacity: 0.93;
  color: #fff;
}
.price.border-citrus {
  border: 2px solid var(--citrus) !important;
}

.hero-citrus {
  background: radial-gradient(
      900px 450px at 10% 10%,
      rgba(22, 163, 74, 0.3),
      transparent 60%
    ),
    radial-gradient(
      900px 450px at 90% 0%,
      rgba(16, 185, 129, 0.28),
      transparent 60%
    ),
    radial-gradient(
      1100px 600px at 50% 100%,
      rgba(245, 158, 11, 0.22),
      transparent 60%
    ),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
}
.hero-card .card-body {
  background: #fff;
  border-radius: 1rem;
}

.py-6 {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.card {
  border-radius: 1rem;
}
.step .step-num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--citrus-soft);
  color: var(--citrus);
  font-weight: 800;
}

footer a.link-light:hover {
  opacity: 0.85;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}
summary {
  cursor: pointer;
}