.hero { background: var(--cream); }
.about { background: var(--cream-soft); position: relative; }
.services { background: var(--cream); position: relative; overflow: hidden; }
.portfolio { background: var(--cream-soft); }
.why-us { background: var(--cream); position: relative; overflow: hidden; }
.testimonials { background: var(--cream-soft); position: relative; overflow: hidden; }
.contact { background: var(--cream); position: relative; overflow: hidden; }

.stats { margin: 0; }

section#stats,
section#hero {
  padding-top: var(--space-xl);
}

.about, .contact { padding-bottom: var(--space-2xl); }

/* subtle radial-gradient decorative glows, echoing the hero treatment
   at low opacity so section backgrounds feel considered, not flat */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% 8%, rgba(184, 134, 59, 0.10), transparent 45%);
  pointer-events: none;
}
.why-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 6% 12%, rgba(193, 103, 62, 0.08), transparent 50%);
  pointer-events: none;
}
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 90%, rgba(184, 134, 59, 0.10), transparent 45%);
  pointer-events: none;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 85%, rgba(184, 134, 59, 0.08), transparent 50%);
  pointer-events: none;
}
.services .container,
.why-us .container,
.testimonials .container,
.contact .container {
  position: relative;
}

/* ===== Stats: inverted contrast band for premium visual punctuation,
   echoing the reference site's dark stats section while staying inside
   Onome's existing palette (charcoal / cream / gold / terracotta) ===== */
.stats {
  background: var(--ink);
  border-top: none;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(215, 185, 120, 0.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(193, 103, 62, 0.12), transparent 50%);
  pointer-events: none;
}
.stats .stat-number { color: var(--gold-soft); }
.stats .stat-label { color: rgba(245, 241, 234, 0.65); }