/* Hero imagery — one generated image per page.

   Loaded by all fourteen pages; each references exactly one image, so a visitor
   downloads one file, not seven. Filenames are content-hashed because
   /assets/img is served `immutable, max-age=31536000` — overwriting in place
   would stay invisible for a year.

   The image is decorative and lives on its own layer behind the hero content.
   It is a background rather than an <img> so it stays out of the accessibility
   tree, and because `style-src 'self'` forbids putting the URL inline. */

.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.55;pointer-events:none
}

/* Type sits over the brighter regions, so a scrim carries the contrast. It is
   heaviest where the headline starts and uses a logical direction, so it
   mirrors itself on the Arabic pages instead of shading the wrong edge. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,
    var(--bg) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.30) 66%, rgba(0,0,0,.12) 100%)
}
[dir="rtl"] .hero-bg::after{
  background:linear-gradient(to left,
    var(--bg) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.30) 66%, rgba(0,0,0,.12) 100%)
}

/* lift the hero's own content clear of the backdrop */
.hero > .wrap{position:relative;z-index:1}

/* the images themselves */
.hero-bg--about{background-image:url("/assets/img/hero/about.7888a80677.jpg")}
.hero-bg--contact{background-image:url("/assets/img/hero/contact.19990f6c42.jpg")}
.hero-bg--home{background-image:url("/assets/img/hero/home.5f02b97639.jpg")}
.hero-bg--packages{background-image:url("/assets/img/hero/packages.af3186b08e.jpg")}
.hero-bg--partners{background-image:url("/assets/img/hero/partners.79279567a0.jpg")}
.hero-bg--pricing{background-image:url("/assets/img/hero/pricing.f0727a28a3.jpg")}
.hero-bg--privacy{background-image:url("/assets/img/hero/privacy.adf9192655.jpg")}

@media (prefers-reduced-motion:reduce){ .hero-bg{opacity:.42} }
@media (max-width:700px){
  /* narrower viewport crops far more of a 21:9 frame, so ease it back */
  .hero-bg{opacity:.40}
}