/* Subtly lifted matte near-black palette; brand accents and imagery stay intact. */
:root {
  --black: #0e1112;
  --black-2: #16191a;
}

html,
body {
  background: var(--black);
}

.site-header,
html.results-section-visible .site-header {
  background: #111416;
  backdrop-filter: none;
}

#hero::after {
  background: linear-gradient(180deg,
    rgba(14, 17, 18, .08) 0%,
    rgba(14, 17, 18, .02) 30%,
    rgba(14, 17, 18, .55) 57%,
    rgba(14, 17, 18, .94) 82%,
    #0e1112 100%);
}

@media (max-width: 600px) {
  #hero::after {
    background: linear-gradient(180deg,
      rgba(14, 17, 18, .08) 0%,
      rgba(14, 17, 18, 0) 56%,
      rgba(14, 17, 18, .64) 100%);
  }
}

#results,
#results .results-proof,
#transformation.final-editorial,
html.results-scroll-ready #results .results-stage,
html.results-scroll-ready.results-scroll-static #results .results-progress,
#results .case-card,
#results .case-head,
#results .case-images,
#results .case-shot,
#results .case-body {
  background: #131617;
}

body #process.process {
  background: var(--black);
}

.offer-popup-card,
.offer-popup-copy {
  background: var(--black-2);
}

.offer-popup-visual {
  background: var(--black);
}

#final.final-slogan {
  background:
    radial-gradient(circle at 86% 18%, rgba(74, 255, 138, .08), transparent 32%),
    radial-gradient(circle at 12% 82%, rgba(230, 74, 67, .07), transparent 34%),
    var(--black);
}