:root { --hud-cyan:#22d3ee; --hud-blue:#60a5fa; --hud-ink:#0f1117; }
.ai-bg {
  position:relative; height:420px; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 90% 10%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(120% 100% at 0% 0%, rgba(96,165,250,.12), transparent 60%),
    var(--hud-ink);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .35s ease; isolation:isolate;
}
.ai-bg-global{
  position:fixed; inset:0; height:auto; border-radius:0; box-shadow:none;
  z-index:0; pointer-events:none; opacity:.9;
}
.ai-bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.ai-bg:before, .ai-bg:after{content:""; position:absolute; inset:0; pointer-events:none}
.ai-bg:before{
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 3px, transparent 4px);
  mix-blend-mode:soft-light; animation:scan 8s linear infinite;
}
.ai-bg:after{ background: radial-gradient(120% 120% at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%); }
@keyframes scan{ from{transform:translateY(-10%)} to{transform:translateY(10%)} }
@media (prefers-reduced-motion: reduce){ .ai-bg:before{animation:none!important} .ai-bg{transform:none!important} }
@media (max-width:960px){ .ai-bg{height:320px} }