:root {
  --ink: #161616;
  --base: #ffffff;
  --foam: #f7fbff;
  --coral: #ff6f61;
  --teal: #1fc7a1;
  --indigo: #5e63ff;
  --amber: #ffc65c;
}

body {
  font-family: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #222;
  background: var(--base);
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.lead {
  font-family: "Hind", system-ui, sans-serif;
}

.text-coral {
  color: var(--coral) !important;
}
.text-teal {
  color: var(--teal) !important;
}
.text-indigo {
  color: var(--indigo) !important;
}
.text-amber {
  color: var(--amber) !important;
}
.bg-foam {
  background: var(--foam);
}
.bg-amber {
  background: var(--amber) !important;
  color: #1a1a1a;
}
.bg-teal {
  background: var(--teal) !important;
  color: #0e3430;
}
.bg-indigo {
  background: var(--indigo) !important;
  color: #fff;
}

a {
  color: var(--indigo);
}
a:hover {
  color: #3840ff;
}
.link-ink {
  color: var(--ink);
  text-decoration: none;
}
.link-ink:hover {
  text-decoration: underline;
}

.btn-ink {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
}
.btn-ink:hover {
  filter: brightness(1.06);
  color: #000;
}
.btn-outline-ink {
  border: 2px solid var(--ink);
  color: var(--ink);
}
.btn-outline-ink:hover {
  background: var(--ink);
  color: #fff;
}

.hero-waves {
  background: radial-gradient(
      55% 85% at 8% 10%,
      rgba(255, 111, 97, 0.4) 0%,
      rgba(255, 111, 97, 0) 60%
    ),
    radial-gradient(
      55% 85% at 92% 12%,
      rgba(31, 199, 161, 0.35) 0%,
      rgba(31, 199, 161, 0) 60%
    ),
    radial-gradient(
      55% 85% at 20% 90%,
      rgba(94, 99, 255, 0.28) 0%,
      rgba(94, 99, 255, 0) 60%
    ),
    #ffffff;
}
.waves-decor {
  position: absolute;
  right: -90px;
  bottom: -70px;
  width: 520px;
  opacity: 0.22;
  pointer-events: none;
}
.border-hero {
  border: 6px solid #fff;
  border-radius: 1rem;
}
.shadow-xxl {
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.14);
}

.pattern-waves {
  background: radial-gradient(
      circle at 1px 1px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(var(--foam), var(--foam));
  background-size: 18px 18px, auto;
}
.shadow-lift {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.soft-quote {
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, #fff, rgba(255, 198, 92, 0.1));
}

.step {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--coral));
  color: #fff;
  font-weight: 800;
  margin-bottom: 0.5rem;
}
.mesh-soft {
  background: linear-gradient(
      180deg,
      rgba(31, 199, 161, 0.08),
      rgba(94, 99, 255, 0.08)
    ),
    #fff;
}
.price-card.highlighted {
  outline: 3px solid var(--teal);
}
.card-ribbon {
  position: absolute;
  top: 12px;
  left: -6px;
  padding: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  font-weight: 800;
  color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
