body {
  position: relative;
  background-color: #050505;
  --cosmic-overlay-top: rgba(5, 5, 5, 0.18);
  --cosmic-overlay-mid: rgba(5, 5, 5, 0.58);
  --cosmic-accent-a: rgba(0, 240, 255, 0.18);
  --cosmic-accent-b: rgba(112, 0, 255, 0.18);
  --cosmic-opacity: 0.66;
  --cosmic-saturate: 1.12;
  --cosmic-contrast: 1.08;
  --cosmic-hue: 0deg;
  --cosmic-brightness: 0.92;
  --cosmic-position: center 34%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 0;
  height: min(720px, 74vh);
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--cosmic-overlay-top) 0%, var(--cosmic-overlay-mid) 56%, #050505 100%),
    radial-gradient(circle at 68% 18%, var(--cosmic-accent-a), transparent 42%),
    radial-gradient(circle at 20% 46%, var(--cosmic-accent-b), transparent 46%),
    url("cosmic-web-hero.webp") var(--cosmic-position) / cover no-repeat;
  opacity: var(--cosmic-opacity);
  filter:
    hue-rotate(var(--cosmic-hue))
    saturate(var(--cosmic-saturate))
    contrast(var(--cosmic-contrast))
    brightness(var(--cosmic-brightness));
}

body > * {
  position: relative;
}

script,
style {
  position: static;
}

body.cosmic-tint-consultation {
  --cosmic-accent-a: rgba(96, 76, 255, 0.42);
  --cosmic-accent-b: rgba(0, 240, 255, 0.24);
  --cosmic-hue: 18deg;
  --cosmic-saturate: 1.34;
}

body.cosmic-tint-design {
  --cosmic-accent-a: rgba(0, 240, 255, 0.48);
  --cosmic-accent-b: rgba(38, 98, 255, 0.32);
  --cosmic-hue: 92deg;
  --cosmic-saturate: 1.45;
}

body.cosmic-tint-brand {
  --cosmic-accent-a: rgba(255, 54, 194, 0.46);
  --cosmic-accent-b: rgba(255, 177, 77, 0.28);
  --cosmic-hue: 330deg;
  --cosmic-saturate: 1.42;
}

body.cosmic-tint-hosting {
  --cosmic-accent-a: rgba(0, 168, 255, 0.42);
  --cosmic-accent-b: rgba(51, 255, 161, 0.24);
  --cosmic-hue: 132deg;
  --cosmic-saturate: 1.36;
  --cosmic-position: center 42%;
}

body.cosmic-tint-care {
  --cosmic-accent-a: rgba(0, 255, 178, 0.44);
  --cosmic-accent-b: rgba(142, 85, 255, 0.28);
  --cosmic-hue: 170deg;
  --cosmic-saturate: 1.38;
}

body.cosmic-tint-seo {
  --cosmic-accent-a: rgba(255, 205, 89, 0.48);
  --cosmic-accent-b: rgba(0, 240, 255, 0.22);
  --cosmic-hue: 292deg;
  --cosmic-saturate: 1.42;
}

body.cosmic-tint-apps {
  --cosmic-accent-a: rgba(130, 0, 255, 0.54);
  --cosmic-accent-b: rgba(0, 240, 255, 0.26);
  --cosmic-hue: 0deg;
  --cosmic-opacity: 0.74;
  --cosmic-saturate: 1.48;
}

body.cosmic-tint-management {
  --cosmic-accent-a: rgba(0, 240, 255, 0.38);
  --cosmic-accent-b: rgba(0, 255, 118, 0.3);
  --cosmic-hue: 145deg;
  --cosmic-saturate: 1.36;
}

body.cosmic-tint-in-home {
  --cosmic-accent-a: rgba(72, 255, 145, 0.5);
  --cosmic-accent-b: rgba(255, 180, 92, 0.24);
  --cosmic-hue: 190deg;
  --cosmic-saturate: 1.42;
  --cosmic-position: center 44%;
}

body.cosmic-tint-office {
  --cosmic-accent-a: rgba(92, 172, 255, 0.5);
  --cosmic-accent-b: rgba(0, 240, 255, 0.26);
  --cosmic-hue: 92deg;
  --cosmic-saturate: 1.44;
  --cosmic-position: center 46%;
}

@media (max-width: 767px) {
  body::before {
    height: 68vh;
    background-position: center top;
    opacity: 0.52;
  }
}