.app-web-bg {
  position: relative;
  isolation: isolate;
  background-color: var(--color-background-primary);
  overflow: hidden;
}

.app-web-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(var(--web-opacity) * 0.9);
  background: radial-gradient(circle at 84% 73%, rgba(12, 126, 196, 0.14), transparent 44%);
}

.app-web-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.96;
  background:
    /* crisp bright edges (zoomed-out composition) */
    linear-gradient(150deg, transparent 77.35%, var(--web-line-strong) 77.48%, var(--web-line-strong) 77.56%, transparent 77.69%),
    linear-gradient(122deg, transparent 69.65%, var(--web-line-strong) 69.78%, var(--web-line-strong) 69.86%, transparent 69.99%),
    linear-gradient(31deg, transparent 77.75%, var(--web-line-strong) 77.88%, var(--web-line-strong) 77.96%, transparent 78.09%),
    linear-gradient(8deg, transparent 80.95%, var(--web-line-strong) 81.08%, var(--web-line-strong) 81.16%, transparent 81.29%),
    linear-gradient(171deg, transparent 86.75%, var(--web-line-strong) 86.88%, var(--web-line-strong) 86.96%, transparent 87.09%),
    linear-gradient(39deg, transparent 88.45%, var(--web-line-strong) 88.58%, var(--web-line-strong) 88.66%, transparent 88.79%),
    /* secondary mesh lines */
    linear-gradient(145deg, transparent 75.65%, var(--web-line) 75.77%, var(--web-line) 75.84%, transparent 75.96%),
    linear-gradient(18deg, transparent 83.15%, var(--web-line) 83.27%, var(--web-line) 83.34%, transparent 83.46%),
    linear-gradient(58deg, transparent 89.25%, var(--web-line) 89.37%, var(--web-line) 89.44%, transparent 89.56%),
    linear-gradient(112deg, transparent 81.85%, var(--web-line) 81.97%, var(--web-line) 82.04%, transparent 82.16%),
    linear-gradient(176deg, transparent 92.25%, var(--web-line) 92.37%, var(--web-line) 92.44%, transparent 92.56%),
    /* compact nodes (less blur) */
    radial-gradient(circle at 84% 73%, var(--web-glow) 0 0.12rem, transparent 0.34rem),
    radial-gradient(circle at 76.5% 81.5%, var(--web-glow) 0 0.11rem, transparent 0.32rem),
    radial-gradient(circle at 92.5% 86.2%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
    radial-gradient(circle at 86.2% 66.8%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
    radial-gradient(circle at 97.2% 58.6%, var(--web-glow) 0 0.08rem, transparent 0.26rem),
    radial-gradient(circle at 73.8% 93.1%, var(--web-glow) 0 0.09rem, transparent 0.28rem),
    radial-gradient(circle at 88.4% 96.1%, var(--web-glow) 0 0.08rem, transparent 0.26rem);
  background-repeat: no-repeat;
  background-size: 112% 112%;
  background-position: right -4% bottom -4%;
  mask-image: linear-gradient(to right, transparent 0 52%, rgba(0, 0, 0, 0.58) 64%, black 76%);
}

@media (max-width: 900px) {
  .app-web-bg::after {
    background-size: 126% 126%;
    background-position: right -14% bottom -6%;
    mask-image: linear-gradient(to right, transparent 0 34%, rgba(0, 0, 0, 0.56) 50%, black 66%);
  }
}
