/* A quiet, continuous star field behind the existing product interfaces. */
body {
  background-color: #080a12;
  background-image:
    radial-gradient(circle at 31px 43px, #dce8ff45 0 0.7px, transparent 1.2px),
    radial-gradient(
      circle at 137px 109px,
      #99bcff38 0 0.8px,
      transparent 1.3px
    ),
    radial-gradient(circle at 83px 211px, #c7bcff28 0 0.6px, transparent 1.1px);
  background-size:
    293px 347px,
    419px 389px,
    503px 457px;
}

/* Each atmosphere fades into the same night sky; no extra moving layers. */
main > .section {
  position: relative;
  isolation: isolate;
}

main > .section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, #080a1240, #080a12a6), url("assets/orbi-galaxy.png");
  /* Keep the mascot in the right half of the source outside this crop. */
  background-size: 200% 200%;
  background-position: left center;
  opacity: 0.17;
  -webkit-mask-image: linear-gradient(
    transparent,
    #000 24%,
    #000 72%,
    transparent
  );
  mask-image: linear-gradient(transparent, #000 24%, #000 72%, transparent);
}

main > .browser-bridge::before {
  opacity: 0.12;
  background-position: left bottom;
}

main > .connection-lab::before {
  background-position: left top;
}

main > .freedom-scenes::before {
  background-position: left bottom;
  opacity: 0.12;
}

main > #features::before {
  background-position: left top;
  opacity: 0.14;
}

main > .adaptive-section::before {
  opacity: 0.13;
}

main > .pricing-section::before {
  opacity: 0.23;
  background-position: left top;
}

main > .faq-section::before {
  opacity: 0.1;
}

footer {
  background: transparent;
}

@media (max-width: 700px) {
  main > .section::before {
    opacity: 0.12;
  }
  main > .pricing-section::before {
    opacity: 0.18;
  }
}

@media (prefers-reduced-transparency: reduce) {
  main > .section::before {
    opacity: 0.06;
  }
}