/* ===== Data-network backdrop behind the showcase carousel =====
   Purely decorative, purely behind — the canvas sits as a sibling *before*
   .scene in the DOM inside .showcase-wrap, so it paints underneath the
   carousel without any change to .scene/.a3d/.card themselves. It
   overhangs the wrap by an equal amount above and below, so its exact
   vertical center — where both the upward and downward fans meet — lands
   on the carousel's own vertical center, hidden behind the cards. */
.showcase-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-3rem;margin-bottom:-8rem}
@media(max-width:768px){
  /* This -4rem was tuned back when .scene was much taller on mobile (see
     the height comment on .scene in index.html) — now that it's been
     shrunk way down, the same pull was dragging the metrics row right up
     against the ring with almost no breathing room between them. */
  .showcase-wrap{margin-top:-1.5rem;margin-bottom:-1.5rem}
}
/* `height` set explicitly (not `bottom`) — canvas is a *replaced* element
   with an intrinsic ratio (from the width/height attributes the JS sets on
   it), so with `height:auto` a browser resolves its box height from that
   ratio instead of stretching between `top`/`bottom` the way a normal
   absolutely-positioned box would. That silently collapsed the canvas to a
   sliver mostly sitting above the actual carousel — barely noticeable on a
   wide desktop viewport (the ratio-derived height happened to be tall
   enough anyway) but reading as fully absent on narrow ones. An explicit
   `height` bypasses the ratio branch entirely. */
.showcase-network{position:absolute;left:0;width:100%;top:-13em;height:calc(100% + 26em);
  pointer-events:none;z-index:0;opacity:1}
@media(max-width:768px){
  /* Kept short of the CTA buttons above / metrics row below — the canvas
     paints *behind* both (plain DOM order, no z-index trick), so any line
     or particle that drifted up into their solid backgrounds simply
     vanished under them, reading as an abrupt hard-edged cut right at the
     button/text boundary rather than a fade. */
  .showcase-network{top:-3.5em;height:calc(100% + 7em)}
}
@media (prefers-reduced-motion: reduce){
  .showcase-network{opacity:.5}
}

/* Furthest-back layer of all — soft brand-colored gradient orbs sitting
   behind both the network lines and the carousel itself, in the same
   color language as the hero's own .hero-bg orbs, but static (no float
   animation) — a fixed glow rather than a moving one. Placed first in the
   DOM inside .showcase-wrap (before the .showcase-network canvas) so
   normal paint order alone keeps it behind everything. Sized to
   .showcase-wrap's own box (top:0/bottom:0), which matches .scene's
   height exactly — so the glow sits right where the carousel is, not
   spread across the network canvas's taller overhang. */
.showcase-orbs{position:absolute;left:0;width:100%;top:0;bottom:0;
  pointer-events:none;overflow:hidden;z-index:0}
/* top/left mark each orb's own center (not its corner) — translate(-50%,-50%)
   is what makes that true, so the three glows cluster around the
   carousel's middle rather than being pinned out toward its far edges.
   Back to a flat rgba() fill + filter:blur() (the original desktop
   treatment) rather than the radial-gradient variant — bigger blur radius
   and a lower opacity than the original numbers make it read as a softer,
   more spread-out wash instead of a defined blob. */
.showcase-orbs .orb{position:absolute;border-radius:50%;filter:blur(64px);
  opacity:.45;transform:translate(-50%,-50%)}
.showcase-orbs .orb-1{width:22em;height:22em;background:rgba(1,228,160,0.22);
  top:42%;left:38%}
.showcase-orbs .orb-2{width:19em;height:19em;background:rgba(255,61,157,0.28);
  top:48%;left:62%}
.showcase-orbs .orb-3{width:16em;height:16em;background:rgba(168,85,247,0.28);
  top:64%;left:50%}
@media(max-width:768px){
  /* Not needed at mobile resolution — the smaller ring and card sizes here
     leave little of these to actually show against, and network-bg.js's
     own lines/particles already carry the "data" backdrop on their own. */
  .showcase-orbs{display:none}
}