/* Webleads.ai seamless branded page canvas v1
   One continuous premium background across the site. Avoid section colour banding while preserving cards/panels. */
:root { --background: 0 0% 5%; }

html, body, #root, main {
  background: #050505 !important;
  background-color: #050505 !important;
}

body { color-scheme: dark; overflow-x: hidden; }
main { position: relative; isolation: isolate; }

main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -12;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 12% 8%, hsl(31 88% 46% / 0.12), transparent 58%),
    radial-gradient(920px 560px at 86% 24%, hsl(206 88% 20% / 0.16), transparent 54%),
    radial-gradient(1050px 620px at 50% 62%, hsl(28 74% 20% / 0.11), transparent 60%),
    radial-gradient(900px 460px at 72% 88%, hsl(194 82% 14% / 0.10), transparent 58%),
    linear-gradient(180deg, #070707 0%, #050505 34%, #060606 100%);
}

main::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -11;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(to right, hsl(0 0% 100% / 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(0 0% 100% / 0.018) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

main > section,
main > div,
#home,
#services,
#pricing,
#process,
#faq,
#contact,
.wlf-motion,
.wlp-projects,
.wlc-case {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#faq::before,
#faq::after,
#contact::before,
#contact::after,
.wlf-motion::before,
.wlf-motion::after,
.wlp-projects::before,
.wlp-projects::after,
.wlc-case::before,
.wlc-case::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Remove broad wrapper glows that caused visible horizontal bands. */
main > section > .absolute,
main > div > .absolute,
main > section > [class*="bg-hero-glow"],
main > section > [class*="bg-[radial-gradient"],
main > section > [class*="bg-[linear-gradient"],
main > div > [class*="bg-hero-glow"],
main > div > [class*="bg-[radial-gradient"],
main > div > [class*="bg-[linear-gradient"] {
  display: none !important;
}

main > section > .container,
main > div > .container {
  background: transparent !important;
}