/*
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║                  backgrounds.css — Staffly Section Backgrounds      ║
 * ║                  Edit this file to swap section images              ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 *
 * HOW TO USE
 * ──────────
 * 1. Upload your image to /uploads/ (WebP preferred, 1920×1080 px minimum).
 * 2. Find the slot for the section you want to update (e.g. .bg-hero).
 * 3. Replace the url() path with your image path and UN-COMMENT the line.
 *    Before:  /* background-image: url('/uploads/bg-hero.webp'); *\/
 *    After:   background-image: url('/uploads/bg-hero.webp');
 * 4. Save. No build step, no JavaScript — it's just CSS.
 *
 * ADJUSTING MOBILE FOCAL POINT
 * ─────────────────────────────
 * On small screens the image is cropped. Use background-position inside the
 * @media (max-width: 768px) block to keep the important subject visible:
 *   0%   = left edge     50% = center (default)     100% = right edge
 * Example: background-position: 70% center; → keeps a right-side subject.
 *
 * DEFAULT STATE
 * ─────────────
 * All url() lines are commented out. Sections show their CSS gradient /
 * colour backgrounds until you uncomment a slot. This is intentional — it
 * lets you activate images one at a time without breaking anything.
 *
 * RECOMMENDED IMAGE SPECS
 * ────────────────────────
 * Format : WebP (fallback: JPEG, quality ≥ 85)
 * Size   : 1920×1080 px minimum  (2560×1440 for hero)
 * Weight : < 400 KB per image (use Squoosh / imagemin)
 * Place  : /uploads/<filename>.webp
 */


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-hero
   Section: Homepage hero (index.html #hero)
   NOTE: index.html currently renders its hero image as a base64 inline
   style. This slot is wired for the FUTURE replacement once the base64
   is removed and replaced with class="bg-hero" on the hero element.
   Desktop : image fills the full viewport, focal point center.
   Mobile  : default center — adjust if subject is off-center.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-hero {
  /* background-image: url('/uploads/bg-hero.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-hero {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-problem
   Section: #problem — "The Problem" section on the homepage.
   Typical content: pain-points, challenges, contrast imagery.
   Desktop : image covers the section, centered.
   Mobile  : default center — if subject is on one side, shift accordingly.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-problem {
  /* background-image: url('/uploads/bg-problem.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-problem {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-solution
   Section: #solution — "The Solution" / platform overview section.
   Typical content: product UI, green-toned brand imagery.
   Desktop : image covers the section, centered.
   Mobile  : shift right if the UI screenshot subject is on the right.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-solution {
  /* background-image: url('/uploads/bg-solution.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-solution {
    background-position: center center; /* adjust: e.g. 70% center to keep right-side UI */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-roi
   Section: #roi — Return-on-Investment / metrics section (new section).
   Typical content: numbers, savings, growth graphs, confident imagery.
   Desktop : image covers the section, centered.
   Mobile  : center works well for symmetrical charts; adjust if needed.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-roi {
  /* background-image: url('/uploads/bg-roi.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-roi {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-why
   Section: #why — "Why Staffly" / differentiators section (new section).
   Typical content: trust signals, team imagery, Saudi-market emphasis.
   Desktop : image covers the section, centered.
   Mobile  : if team photo has a left-side subject, use 30% center.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-why {
  /* background-image: url('/uploads/bg-why.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-why {
    background-position: center center; /* adjust: 30% center for left-side subject */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-modules
   Section: #modules — Modules / feature showcase section.
   Typical content: app screenshots, icon grids, dark-toned layouts.
   Desktop : image covers the section, centered.
   Mobile  : center is usually fine for symmetric grid images.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-modules {
  /* background-image: url('/uploads/bg-modules.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-modules {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-record
   Section: #record — Record / track-record / stats section.
   Typical content: bold numbers, milestone imagery, award photos.
   Desktop : image covers the section, centered.
   Mobile  : keep subject in frame — adjust x-position as needed.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-record {
  /* background-image: url('/uploads/bg-record.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-record {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-ai
   Section: #ai — AI / intelligence features section.
   Typical content: abstract tech, glowing circuits, data-flow visuals.
   Desktop : image covers the section, centered.
   Mobile  : abstract images usually look fine centered; adjust if needed.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-ai {
  /* background-image: url('/uploads/bg-ai.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-ai {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-sectors
   Section: #sectors — Sectors / industry verticals section.
   Typical content: Saudi cityscape, construction, hospitality, retail.
   Desktop : image covers the section, centered.
   Mobile  : cityscapes often look better shifted slightly right (60%).
   ═══════════════════════════════════════════════════════════════════════ */
.bg-sectors {
  /* background-image: url('/uploads/bg-sectors.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-sectors {
    background-position: center center; /* adjust: e.g. 60% center for cityscape */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-story
   Section: #story — Our Story / about us section.
   Typical content: founders, office, team culture, Saudi HQ imagery.
   Desktop : image covers the section, centered.
   Mobile  : if a person is the subject, keep them centered (50%) or
             shift toward them (e.g. 35% if they are on the left).
   ═══════════════════════════════════════════════════════════════════════ */
.bg-story {
  /* background-image: url('/uploads/bg-story.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-story {
    background-position: center center; /* adjust: 35% center to keep left-side person */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-cta
   Section: #cta — Call-to-Action / closing section.
   Typical content: aspirational, wide landscape, brand green tones.
   Desktop : image covers the section, centered.
   Mobile  : panoramic CTA images usually look fine centered.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-cta {
  /* background-image: url('/uploads/bg-cta.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-cta {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-page-solution
   Page: solution.html — hero / masthead area.
   Typical content: platform overview hero, wide product shot.
   Desktop : image covers the hero, centered.
   Mobile  : adjust if the key visual is off-center on small screens.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-page-solution {
  /* background-image: url('/uploads/bg-page-solution.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-page-solution {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-page-modules
   Page: modules.html — hero / masthead area.
   Typical content: feature grid hero, dark UI screenshot backdrop.
   Desktop : image covers the hero, centered.
   Mobile  : UI grid images are usually symmetric — center is fine.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-page-modules {
  /* background-image: url('/uploads/bg-page-modules.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-page-modules {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-page-howitworks
   Page: how-it-works.html — hero / masthead area.
   Typical content: step-by-step process imagery, flow diagrams.
   Desktop : image covers the hero, centered.
   Mobile  : abstract/diagram images are usually safe centered.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-page-howitworks {
  /* background-image: url('/uploads/bg-page-howitworks.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-page-howitworks {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-page-sectors
   Page: sectors.html — hero / masthead area.
   Typical content: multi-sector collage, Saudi business landscape.
   Desktop : image covers the hero, centered.
   Mobile  : if a landmark is on one side, shift toward it (e.g. 65%).
   ═══════════════════════════════════════════════════════════════════════ */
.bg-page-sectors {
  /* background-image: url('/uploads/bg-page-sectors.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-page-sectors {
    background-position: center center; /* adjust: e.g. 65% center for right-side landmark */
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SLOT: .bg-page-pricing
   Page: pricing.html — hero / masthead area.
   Typical content: clean, minimal, trust-building imagery.
   Desktop : image covers the hero, centered.
   Mobile  : minimal images are usually fine centered.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-page-pricing {
  /* background-image: url('/uploads/bg-page-pricing.webp'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .bg-page-pricing {
    background-position: center center; /* adjust: 0%=left, 50%=center, 100%=right */
  }
}