:root {
  --blw-porcelain: #f7f6f3;
  --blw-mist: #e9f0ec;
  --blw-ink: #121743;
  --blw-coral: #ff7a59;
  --blw-citrine: #f5c044;
  --blw-text: #1a1d24;
}
.blw-body {
  background: #fff;
  color: var(--blw-text);
}
h1,
h2,
h3,
h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", Times, serif;
}
body,
.btn {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.navbar .nav-link.active {
  color: var(--blw-coral) !important;
  font-weight: 600;
}

.btn-accent {
  background: linear-gradient(135deg, var(--blw-coral), var(--blw-citrine));
  color: #1c1c1c;
  border: none;
  box-shadow: 0 8px 20px rgba(255, 122, 89, 0.25);
}
.btn-accent:hover {
  filter: brightness(0.96);
}
.text-accent {
  color: var(--blw-coral) !important;
}
.blw-badge {
  background: rgba(18, 23, 67, 0.06);
  color: var(--blw-ink);
  border: 1px solid rgba(18, 23, 67, 0.08);
}

.blw-hero {
  background: radial-gradient(
      70% 50% at -10% -20%,
      rgba(245, 192, 68, 0.22),
      transparent 70%
    ),
    linear-gradient(180deg, var(--blw-porcelain), #fff);
}
.blw-hero-media img {
  object-position: center;
}
.blw-hero-glow {
  position: absolute;
  inset: auto -10% -10% -10%;
  height: 140px;
  background: radial-gradient(
    50% 100% at 50% 50%,
    rgba(255, 122, 89, 0.25),
    transparent 70%
  );
  filter: blur(32px);
}

.blw-card,
.blw-tile {
  background: #fff;
  border: 1px solid rgba(18, 23, 67, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.blw-tile .card-body {
  padding: 24px;
}

.blw-step {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--blw-ink);
  color: #fff;
  font-weight: 700;
}

.blw-section-soft {
  background: var(--blw-mist);
}
.blw-section-warm {
  background: linear-gradient(180deg, #fff9ec, #fffdf7);
}

.blw-price {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  border: 1px solid rgba(18, 23, 67, 0.12);
  border-radius: 16px;
}
.blw-price .display-6 {
  color: var(--blw-ink);
}

.blw-form .form-control:focus {
  border-color: var(--blw-ink);
  box-shadow: 0 0 0 0.2rem rgba(18, 23, 67, 0.15);
}

.card a {
  text-decoration: none;
}
.card a:hover {
  text-decoration: underline;
}

details summary {
  cursor: pointer;
}
details[open] summary {
  color: var(--blw-ink);
}
