/* Light ambient layers (marketing landing) */
.lr-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.lr-bg__mesh {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 55% at 15% 12%, rgba(255, 191, 63, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 88% 8%, rgba(255, 191, 63, 0.08), transparent 50%),
    radial-gradient(ellipse 60% 45% at 70% 95%, rgba(17, 17, 17, 0.04), transparent 55%);
}

.lr-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.lr-bg__grid {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    linear-gradient(rgba(10, 10, 10, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 72%);
}