/* =========================================================
   FSBPO Brand System — Consolidated CSS (Bootstrap 5.3 ready)
   ========================================================= */

/* === Brand Tokens === */
:root{
  --sbpo-primary:#1967d2;        /* main accent */
  --sbpo-primary-600:#1557b1;
  --sbpo-teal:#1fb6aa;           /* secondary accent */
  --sbpo-ink:#0e1726;            /* headings */
  --sbpo-text:#4b5563;           /* body text */
  --sbpo-soft:#f5f7fb;           /* soft bg */
  --sbpo-border:#e6eaf3;         /* subtle borders */
}

/* === Base === */
body{
  color:var(--sbpo-text);
  background:#ffffff;
  scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6{
  color:var(--sbpo-ink);
  font-weight:600;
}

/* =========================================================
   Utilities
   ========================================================= */
.text-brand { color: var(--sbpo-primary) !important; }
.bg-soft { background: var(--sbpo-soft) !important; }
.border-soft { border-color: var(--sbpo-border) !important; }

/* FS BPO Palette Utility Classes */
.text-sbpo-primary { color: #1967d2 !important; }
.text-sbpo-primary-600 { color: #1557b1 !important; }
.text-sbpo-teal { color: #1fb6aa !important; }
.text-sbpo-ink { color: #0e1726 !important; }
.text-sbpo-body { color: #4b5563 !important; }
.text-sbpo-muted { color: #9ca3af !important; }
.text-sbpo-white { color: #ffffff !important; }

.bg-sbpo-light { background-color: #ffffff !important; }
.bg-sbpo-soft { background-color: #f5f7fb !important; }
.bg-sbpo-accent { background-color: #e9f0fd !important; }
.bg-sbpo-primary { background-color: #1967d2 !important; color:#fff !important; }
.bg-sbpo-primary-600 { background-color: #1557b1 !important; color:#fff !important; }
.bg-sbpo-teal { background-color: #1fb6aa !important; color:#fff !important; }
.bg-sbpo-dark { background-color: #0e1726 !important; color:#fff !important; }

.border-sbpo { border-color: #e6eaf3 !important; }
.border-sbpo-primary { border-color: #1967d2 !important; }
.border-sbpo-teal { border-color: #1fb6aa !important; }

.shadow-sbpo { box-shadow: 0 4px 16px rgba(25,103,210,0.08); }

/* Sections */
.section-sbpo { padding:4rem 0; background-color:#ffffff; }
.section-sbpo-soft { padding:4rem 0; background-color:#f5f7fb; }
.section-muted { background: var(--sbpo-soft); }

/* Links */
.link-accent{ color: var(--sbpo-primary); text-decoration:none; }
.link-accent:hover{ color: var(--sbpo-primary-600); text-decoration:underline; }

/* Tone down Bootstrap .text-secondary for tiny text */
.text-secondary{ color:#6b7280 !important; }

/* On-scroll reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:all .6s ease; }
.reveal.show{ opacity:1; transform:none; }

/* =========================================================
   Gradients
   ========================================================= */
/* Patterned brand gradient */
.bg-brand-gradient {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(25,103,210,.10), transparent 60%),
    radial-gradient(600px 260px at -10% 20%, rgba(31,182,170,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.bg-brand-gradient-dark {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(25,103,210,.18), transparent 60%),
    radial-gradient(600px 260px at -10% 20%, rgba(31,182,170,.18), transparent 60%),
    linear-gradient(135deg, var(--sbpo-primary-600) 0%, var(--sbpo-primary) 50%, var(--sbpo-teal) 100%);
}

/* Hero/Footer deep gradients */
.bg-sbpo-gradient {
  background: linear-gradient(135deg, #0e1726 0%, #1557b1 45%, #1967d2 100%);
  color:#ffffff !important;
}
.bg-sbpo-gradient-teal {
  background: linear-gradient(135deg, #0e1726 0%, #1557b1 40%, #1fb6aa 100%);
  color:#ffffff !important;
}
.bg-sbpo-gradient-soft {
  background: linear-gradient(135deg, #e9f0fd 0%, #f5f7fb 100%);
  color:#0e1726 !important;
}
.bg-sbpo-gradient-dark {
  background: linear-gradient(145deg, #0e1726 0%, #1a2540 60%, #1557b1 100%);
  color:#ffffff !important;
}

/* Gradient Button Utility */
.btn-sbpo-gradient{
  background: linear-gradient(135deg, #1557b1, #1967d2);
  border:none; color:#fff; transition:all .3s ease;
}
.btn-sbpo-gradient:hover{
  background: linear-gradient(135deg, #1967d2, #1fb6aa);
  transform: translateY(-2px);
}

/* =========================================================
   Navigation
   ========================================================= */
.fsbpo-logo { height:56px; width:auto; transition:all .3s ease; }

.navbar{
  background: var(--sbpo-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar-brand img{ height:55px; width:auto; }

.navbar-nav .nav-link{
  color: var(--sbpo-primary-600);
  font-weight:500;
  letter-spacing:.3px;
  transition: color .3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--sbpo-ink); }

.navbar-toggler{ border:none; outline:none; }
.navbar-toggler-icon{ filter: brightness(0) invert(1); }

.dropdown-menu{
  border-radius:.75rem;
  border:1px solid var(--sbpo-border);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.dropdown-item:hover{
  background-color: var(--sbpo-soft);
  color: var(--sbpo-primary);
}

/* =========================================================
   Hero Sections
   ========================================================= */
/* Generic hero with image (dark overlay) */
.hero{
  position:relative;
  background: url("img/Hand.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--sbpo-border);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.3); /* 0.3–0.6 depending preference */
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }

.hero .badge{
  background: var(--sbpo-soft);
  color: var(--sbpo-primary);
  border:1px solid rgba(25,103,210,.18);
}

/* About hero (with branded veils) */
.hero-about{
  position:relative;
  padding:6.5rem 0 5rem;
  background: url(img/office.jpeg) center/cover no-repeat;
}
.hero-about::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom right, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    radial-gradient(900px 420px at 85% -10%, rgba(25,103,210,.25), transparent 60%),
    radial-gradient(600px 260px at -10% 20%, rgba(31,182,170,.25), transparent 60%),
    linear-gradient(135deg, var(--sbpo-primary-600), var(--sbpo-teal));
  mix-blend-mode: normal;
}
.hero-about .container{ position:relative; z-index:2; color:#fff; }
.hero-kicker{ opacity:.9; letter-spacing:.12em; text-transform:uppercase; }

/* =========================================================
   Cards / Components
   ========================================================= */
.elev-card{
  background:#fff;
  border:1px solid var(--sbpo-border);
  border-radius:1rem;
  padding:2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.elev-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
}

/* FS Card variation */
.card-sbpo{
  background-color:#ffffff;
  border:1px solid #e6eaf3;
  border-radius:.75rem;
  transition: all .3s ease;
}
.card-sbpo:hover{ transform: translateY(-5px); }

/* Icons */
.icon-pill{
  width:3rem; height:3rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(25,103,210,.10);
  color: var(--sbpo-primary);
  border:1px solid rgba(25,103,210,.18);
}
.value-icon{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(25,103,210,.12), rgba(31,182,170,.12));
  color: var(--sbpo-primary);
  font-size:1.4rem;
  margin-bottom:.75rem;
}

/* KPI badges */
.kpi{
  border:1px solid var(--sbpo-border);
  border-radius:.75rem;
  padding:1rem;
  background:#fff;
}

/* Footer CTA */
.footer-cta{
  color:#fff;
  position:relative;
  overflow:hidden;
}
.footer-cta::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.08);
}
.footer-cta > .container{ position:relative; z-index:2; }

/* =========================================================
   Buttons (custom look on top of Bootstrap)
   ========================================================= */
.btn-sbpo-primary{
  background-color:#1967d2;
  border-color:#1967d2;
  color:#fff;
  transition: all .3s ease;
}
.btn-sbpo-primary:hover{
  background-color:#1557b1;
  border-color:#1557b1;
}

.btn-sbpo-teal{
  background-color:#1fb6aa;
  border-color:#1fb6aa;
  color:#fff;
  transition: all .3s ease;
}
.btn-sbpo-teal:hover{
  background-color:#189f96;
  border-color:#189f96;
}

/* Map Bootstrap .btn-* to brand tokens (kept as requested) */
.btn-primary{
  --bs-btn-bg: var(--sbpo-primary);
  --bs-btn-border-color: var(--sbpo-primary);
  --bs-btn-hover-bg: var(--sbpo-primary-600);
  --bs-btn-hover-border-color: var(--sbpo-primary-600);
}
.btn-outline-primary{
  --bs-btn-color: var(--sbpo-primary);
  --bs-btn-border-color: var(--sbpo-primary);
  --bs-btn-hover-bg: var(--sbpo-primary);
  --bs-btn-hover-border-color: var(--sbpo-primary);
}

/* =========================================================
   Imagery / Sections
   ========================================================= */
.image-why-us{
  background-image:url(img/7.jpg);
  background-size:cover;
  background-position:center;
  height:300px;
}

/* Industries */
#industries .icon{
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:50%;
  background: linear-gradient(135deg, #f4f8ff, #e9efff);
}
#industries .card{
  transition: all .3s ease;
}
#industries .card:hover{
  transform: translateY(-6px);
}

/* Careers / Contact */
#careers h2, #contact h2{ letter-spacing:.5px; }
#careers .card{ transition: all .3s ease; }
#careers .card:hover{ transform: translateY(-5px); }
#careers img, #contact img{ object-fit:cover; }

/* =========================================================
   Badges / Misc
   ========================================================= */
.hero .badge{
  background: var(--sbpo-soft);
  color: var(--sbpo-primary);
  border: 1px solid rgba(25,103,210,.18);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:576px){
  .fsbpo-logo{ height:48px; }
}