/* ===== ServerSpark branded backgrounds — overrides template stock images ===== */

/* --- HERO: navy gradient + amber glow, subtle grid, strong text vignette --- */
.swiper-inner{
  background-image:
    linear-gradient(135deg, rgba(18,23,42,.72) 0%, rgba(27,36,64,.62) 55%, rgba(36,27,16,.60) 100%),
    radial-gradient(1100px 600px at 78% -8%, rgba(240,168,60,.28), transparent 55%),
    url(../images/background/nebula.webp) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center, center !important;
  position: relative;
}
/* faint tech grid over the gradient for texture (uses an inline SVG data-uri, no extra request) */
.swiper-inner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
}
/* bottom vignette so the headline & price always read cleanly */
.swiper-inner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 45%, rgba(14,20,36,.55) 100%);
}
.sw-caption{ position:relative; z-index:2; }
.slider-title{ text-shadow: 0 2px 30px rgba(0,0,0,.35); }

/* --- SUBHEADERS (inner page tops): same brand gradient instead of mismatched photos --- */
#subheader{ background:
    radial-gradient(900px 420px at 80% -20%, rgba(240,168,60,.20), transparent 55%),
    linear-gradient(135deg, #12172A 0%, #1B2440 60%, #241B10 100%) !important; }
#subheader .jarallax-img{ display:none !important; }   /* hide the stock photo */
#subheader:after{ background: rgba(0,0,0,.15) !important; }

/* --- the "Game Collection" jarallax band: brand it too --- */
.jarallax:not(#subheader) > .jarallax-img{ opacity:.14 !important; }