/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   A6 · Background textures — dot field + cobalt glow (dark bands).

   Both are purely decorative: absolutely positioned, pointer-events:none (never
   intercept clicks). Mark them aria-hidden in markup. Place inside a band that is
   position:relative; overflow:hidden. Presets consume the A1 texture tokens.

     <section class="band" style="position:relative;overflow:hidden">
       <div class="dot-field dot-field--hero" aria-hidden="true"></div>
       <div class="glow glow--hero" aria-hidden="true"></div>
       … content …
     </section>
   ─────────────────────────────────────────────────────────────── */

/* ── Dot field — a masked grid of dots ────────────────────────── */
.dot-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dot-color, rgba(255,255,255,0.13)) 1px, transparent 1px);
  background-size: var(--dot-size, 24px) var(--dot-size, 24px);
  -webkit-mask-image: var(--dot-mask, radial-gradient(92% 78% at 62% 0%, #000 24%, transparent 76%));
          mask-image: var(--dot-mask, radial-gradient(92% 78% at 62% 0%, #000 24%, transparent 76%));
}
.dot-field--hero {
  --dot-color: var(--dot-hero-color, rgba(255,255,255,0.13));
  --dot-size: var(--dot-hero-size, 24px);
  --dot-mask: radial-gradient(92% 78% at 62% 0%, #000 24%, transparent 76%);
}
.dot-field--cta {
  --dot-color: var(--dot-cta-color, rgba(255,255,255,0.06));
  --dot-size: var(--dot-cta-size, 22px);
  --dot-mask: radial-gradient(78% 100% at 50% 50%, #000, transparent 72%);
}

/* ── Cobalt glow — a soft radial orb ──────────────────────────── */
.glow {
  position: absolute;
  pointer-events: none;
  width: var(--glow-size, 760px);
  height: var(--glow-size, 760px);
  border-radius: 999px;
  background: radial-gradient(circle, var(--glow-color, rgba(45,107,240,0.30)), transparent var(--glow-spread, 70%));
}
/* translateZ(0) pins each orb to its own static GPU layer so the large radial
   gradient rasterizes once instead of repainting as the band scrolls (F4 jank). */
.glow--hero { --glow-size: 760px; top: -330px; left: 54%; transform: translateX(-50%) translateZ(0); }
.glow--cta  { --glow-size: 640px; top: -280px; left: 50%; transform: translateX(-50%) translateZ(0); }