/* BlakFire PDF background image layer
   Extracted from: Blakfire Management Solutions Profile & Services 8.pdf
   Upload the full /assets/images/pdf-bg/ folder and link this CSS after your existing styles. */

:root {
  --bfms-bg-01: image-set(url('../images/pdf-bg/blakfire-pdf-bg-01.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-01.jpg') type('image/jpeg'));
  --bfms-bg-02: image-set(url('../images/pdf-bg/blakfire-pdf-bg-02.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-02.jpg') type('image/jpeg'));
  --bfms-bg-03: image-set(url('../images/pdf-bg/blakfire-pdf-bg-03.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-03.jpg') type('image/jpeg'));
  --bfms-bg-04: image-set(url('../images/pdf-bg/blakfire-pdf-bg-04.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-04.jpg') type('image/jpeg'));
  --bfms-bg-05: image-set(url('../images/pdf-bg/blakfire-pdf-bg-05.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-05.jpg') type('image/jpeg'));
  --bfms-bg-06: image-set(url('../images/pdf-bg/blakfire-pdf-bg-06.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-06.jpg') type('image/jpeg'));
  --bfms-bg-07: image-set(url('../images/pdf-bg/blakfire-pdf-bg-07.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-07.jpg') type('image/jpeg'));
  --bfms-bg-08: image-set(url('../images/pdf-bg/blakfire-pdf-bg-08.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-08.jpg') type('image/jpeg'));
  --bfms-bg-11: image-set(url('../images/pdf-bg/blakfire-pdf-bg-11.webp') type('image/webp'), url('../images/pdf-bg/blakfire-pdf-bg-11.jpg') type('image/jpeg'));
}

body {
  background:
    linear-gradient(180deg, rgba(2,5,9,.88), rgba(2,5,9,.9)),
    var(--bfms-bg-03) center top / cover fixed no-repeat,
    radial-gradient(at center, rgb(9 14 31), rgba(6, 16, 32, 1));
}

section,
footer,
.showcase-band {
  isolation: isolate;
}

section > *,
footer > *,
.showcase-band > * {
  position: relative;
  z-index: 2;
}

#hero::before,
#services::before,
#about::before,
#q-agent::before,
#tech::before,
#process::before,
#contact::before,
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#hero::before {
  background-image:
    radial-gradient(circle at 78% 28%, rgba(26,111,255,.20), transparent 26%),
    linear-gradient(90deg, rgba(2,5,9,.72) 0%, rgba(2,5,9,.58) 47%, rgba(2,5,9,.28) 100%),
    var(--bfms-bg-01);
  opacity: .95;
}

#services {
  background: #020914 !important;
}
#services::before {
  background-image:
    linear-gradient(180deg, rgba(4,8,15,.94), rgba(4,8,15,.86)),
    var(--bfms-bg-02);
  background-position: center right;
  opacity: .72;
}

#about::before {
  background-image:
    linear-gradient(90deg, rgba(2,5,9,.90), rgba(2,5,9,.78)),
    var(--bfms-bg-03);
  background-position: center right;
  opacity: .66;
}

#q-agent {
  background: #020914 !important;
}
#q-agent::before {
  background-image:
    radial-gradient(circle at 72% 18%, rgba(92,196,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(2,5,9,.88), rgba(2,5,9,.92)),
    var(--bfms-bg-04);
  background-position: center right;
  opacity: .76;
}

#tech::before {
  background-image:
    linear-gradient(90deg, rgba(2,5,9,.92), rgba(2,5,9,.80)),
    var(--bfms-bg-05);
  background-position: center right;
  opacity: .68;
}

#process {
  background: #020914 !important;
}
#process::before {
  background-image:
    linear-gradient(180deg, rgba(4,8,15,.92), rgba(4,8,15,.90)),
    var(--bfms-bg-06);
  background-position: center right;
  opacity: .74;
}

#contact::before {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(26,111,255,.15), transparent 35%),
    linear-gradient(180deg, rgba(2,5,9,.82), rgba(2,5,9,.92)),
    var(--bfms-bg-11);
  background-position: center;
  opacity: .90;
}

footer {
  position: relative;
  overflow: hidden;
  background: #020914 !important;
}
footer::before {
  background-image:
    linear-gradient(180deg, rgba(2,5,9,.96), rgba(2,5,9,.90)),
    var(--bfms-bg-08);
  background-position: center right;
  opacity: .50;
}

/* Replace generated SVG visual backgrounds with the PDF brand backgrounds */
.showcase-band-media {
  background-image: var(--bfms-bg-01) !important;
  background-position: center right !important;
}
.about-photo-fill {
  background-image:
    linear-gradient(180deg, rgba(2,5,9,.08), rgba(2,5,9,.55) 100%),
    var(--bfms-bg-11) !important;
  background-position: center !important;
}

.hero-media-frame {
  background:
    linear-gradient(180deg, rgba(2,5,9,.18), rgba(2,5,9,.50)),
    var(--bfms-bg-01) center / cover no-repeat !important;
}
.hero-media-frame img {
  opacity: .78;
  mix-blend-mode: screen;
}

.service-thumb {
  background-position: center right !important;
  background-size: cover !important;
}
.thumb-powerapps { background-image: var(--bfms-bg-02) !important; }
.thumb-web { background-image: var(--bfms-bg-03) !important; }
.thumb-m365 { background-image: var(--bfms-bg-04) !important; }
.thumb-maintenance { background-image: var(--bfms-bg-05) !important; }
.thumb-intune { background-image: var(--bfms-bg-06) !important; }
.thumb-consulting { background-image: var(--bfms-bg-08) !important; }

.service-card,
.q-feature,
.q-tier-col,
.process-step,
.tech-chip,
.contact-form input,
.contact-form textarea,
.contact-form select,
.form-group input,
.form-group textarea,
.form-group select {
  background-color: rgba(6,12,22,.84) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hv-panel,
.q-terminal,
.service-popup,
.nav-dropdown,
.aq-popup,
.wa-chat-popup {
  background-color: rgba(4,8,15,.90) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll;
  }
  #hero::before,
  #services::before,
  #about::before,
  #q-agent::before,
  #tech::before,
  #process::before,
  #contact::before,
  footer::before {
    background-position: center right;
    opacity: .58;
  }
  #hero::before,
  #contact::before {
    opacity: .74;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll;
  }
}