/* ── Shared background: static grid + brand glow + faint market curve ── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line, rgba(16, 51, 95, 0.05)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line, rgba(16, 51, 95, 0.05)) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}

.bg-glow-a {
  position: absolute;
  width: 60vw;
  height: 60vw;
  left: -18vw;
  top: -22vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a, rgba(0, 94, 173, 0.10)) 0%, transparent 65%);
}

.bg-glow-b {
  position: absolute;
  width: 52vw;
  height: 52vw;
  right: -16vw;
  bottom: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-b, rgba(56, 178, 222, 0.10)) 0%, transparent 65%);
}

.bg-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

@media (max-width: 767px) {
  .bg-grid {
    background-size: 40px 40px;
  }
}