html { scroll-behavior: smooth; }

/* --- Shared section primitives (duplicated per-page by design) ----------- */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.software-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-left: 4px;
  color: var(--on-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.capability-index {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.software-jump-nav {
  position: sticky;
  z-index: 20;
  top: var(--header-height);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  backdrop-filter: blur(16px);
}
.software-jump-nav .container {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  scrollbar-width: none;
}
.software-jump-nav .container::-webkit-scrollbar { display: none; }
.software-jump-nav a {
  flex: 0 0 auto;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 750;
  /* These render as pills, not body links — without this the UA's default
     underline was still being drawn under every label. */
  text-decoration: none;
}
.software-jump-nav a:hover,
.software-jump-nav a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.software-cta { padding: 96px 0; background: var(--surface); }
.software-cta-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding: clamp(42px, 6vw, 78px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-brand), var(--green-800));
}
.software-cta-card::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -220px;
  width: 430px;
  height: 430px;
  border: 1px solid color-mix(in srgb, var(--on-brand) 16%, transparent);
  border-radius: 50%;
}
.software-cta-card > * { position: relative; z-index: 1; }
.software-cta h2 { max-width: 780px; margin: 0; font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px); line-height: 1.04; color: var(--on-brand); }
.software-cta p { max-width: 680px; margin-top: var(--space-4); color: color-mix(in srgb, var(--on-brand) 78%, transparent); font-size: 16px; line-height: 1.7; }
.software-cta .btn { min-width: 198px; background: var(--paper); color: var(--green-800); }
.software-cta .btn:hover { color: var(--green-600); }

/* ============================================================================
   Header nav-current tweak (design source: bpo.html body.bpo-page header
   .nav-current) — the BPO nav link reads white over the dark hero until the
   header scrolls solid.
   ========================================================================= */
.bpo-page header .nav-current { color: var(--on-dark); }
.bpo-page header.is-scrolled .nav-current { color: var(--green-700); }

/* ============================================================================
   Hero (design source: bpo.html lines 28-72) — fixed saturated-green
   surface, same recipe as Software's hero; body.has-dark-hero (see
   site-header.css) depends on this section staying vivid regardless of the
   site theme toggle.
   ========================================================================= */
.bpo-hero {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 162px 0 112px;
  color: var(--on-dark);
  background:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--ink) 20%, transparent), transparent 28%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--ink) 30%, transparent), transparent 34%),
    linear-gradient(135deg, var(--ink-soft) 0%, var(--ink-soft) 52%, var(--ink) 100%);
}
.bpo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image: linear-gradient(color-mix(in srgb, var(--on-dark) 25%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-dark) 25%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, black 42%, black);
}
.bpo-hero::after {
  content: "";
  position: absolute;
  right: -240px;
  bottom: -390px;
  width: 760px;
  height: 760px;
  border: 1px solid color-mix(in srgb, var(--green-300) 14%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 96px color-mix(in srgb, var(--green-300) 3.5%, transparent),
    0 0 0 192px color-mix(in srgb, var(--green-300) 2.5%, transparent);
}
.bpo-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.88fr);
  align-items: center;
  gap: clamp(64px, 9vw, 140px);
}
.bpo-hero h1 {
  max-width: 850px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(54px, 6vw, 88px);
  line-height: 0.97;
  color: var(--on-dark);
  text-wrap: balance;
}
.bpo-hero-subtitle {
  max-width: 670px;
  margin-top: var(--space-6);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 600;
  line-height: 1.35;
}
.bpo-hero-copy {
  max-width: 670px;
  margin-top: var(--space-5);
  color: color-mix(in srgb, var(--on-dark) 68%, transparent);
  font-size: 17px;
  line-height: 1.75;
}
.bpo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.bpo-hero .btn-secondary {
  border-color: color-mix(in srgb, var(--on-dark) 30%, transparent);
  background: color-mix(in srgb, var(--on-dark) 7%, transparent);
  color: var(--on-dark);
}
.bpo-hero .btn-secondary:hover {
  border-color: color-mix(in srgb, var(--on-dark) 68%, transparent);
  background: color-mix(in srgb, var(--on-dark) 13%, transparent);
}

/* --- Decorative "operations window" widget — fixed light card (see file
   banner); pure markup/CSS, driven entirely by editor content, no images. -- */
.bpo-operations-art {
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green-300) 20%, transparent);
  border-radius: 30px;
  background: color-mix(in srgb, var(--on-dark) 5.5%, transparent);
  box-shadow: var(--shadow-lg);
}
.bpo-operations-window {
  overflow: hidden;
  min-height: 460px;
  border-radius: 21px;
  background: var(--green-050);
  color: var(--ink);
}
.bpo-window-top {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.bpo-window-top > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.bpo-window-top small {
  margin-left: 7px;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
.bpo-window-summary {
  position: relative;
  margin: 20px 20px 12px;
  padding: 23px;
  border-radius: 18px;
  background: var(--green-600);
  color: var(--paper);
}
.bpo-window-summary small,
.bpo-window-summary span { display: block; }
.bpo-window-summary small {
  color: var(--green-300);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bpo-window-summary strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 38px;
}
.bpo-window-summary span {
  position: absolute;
  right: 22px;
  bottom: 25px;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  font-size: 9px;
}
.bpo-workflow-list {
  display: grid;
  gap: 9px;
  padding: 0 20px 20px;
}
.bpo-workflow-list > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.bpo-workflow-list i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}
.bpo-workflow-list strong,
.bpo-workflow-list small { display: block; }
.bpo-workflow-list strong { font-size: 11px; }
.bpo-workflow-list small { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.bpo-workflow-list em {
  color: var(--green-700);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

/* ============================================================================
   Intro (design source: bpo.html .bpo-intro) — reactive.
   ========================================================================= */
.bpo-intro { padding: 104px 0 94px; background: var(--bg); }
.bpo-intro-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(60px, 10vw, 150px);
}
.bpo-intro h2 { max-width: 650px; margin: 0; font-family: var(--font-display); font-size: clamp(38px, 4.3vw, 60px); line-height: 1.04; color: var(--fg); }
.bpo-intro-copy { color: var(--fg-muted); font-size: 18px; line-height: 1.78; }
.bpo-intro-copy p + p { margin-top: var(--space-5); }

/* ============================================================================
   Services grid (design source: bpo.html #bpo-services) — fixed dark
   surface, same recipe as the hero.
   ========================================================================= */
.bpo-services {
  padding: 116px 0;
  scroll-margin-top: 140px;
  background:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--ink) 20%, transparent), transparent 28%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--ink) 30%, transparent), transparent 34%),
    linear-gradient(135deg, var(--ink-soft) 0%, var(--ink-soft) 52%, var(--ink) 100%);
  color: var(--on-dark);
}
.bpo-section-heading { max-width: 890px; }
.bpo-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 66px);
  line-height: 1.03;
  color: var(--on-dark);
  text-wrap: balance;
}
.bpo-section-heading > p {
  max-width: 720px;
  margin-top: var(--space-5);
  color: color-mix(in srgb, var(--on-dark) 62%, transparent);
  font-size: 17px;
  line-height: 1.7;
}
.bpo-services .capability-index { color: var(--green-300); }
.bpo-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: 58px;
}
.bpo-service-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--on-dark) 11%, transparent);
  border-radius: 25px;
  background: color-mix(in srgb, var(--on-dark) 5.5%, transparent);
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}
.bpo-service-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green-300) 38%, transparent);
  background: color-mix(in srgb, var(--on-dark) 8.5%, transparent);
}
.bpo-service-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--green-300) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--green-300) 9%, transparent);
  color: var(--green-300);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.bpo-service-card h3 { margin-top: 31px; color: var(--on-dark); font-size: 24px; line-height: 1.16; }
.bpo-service-card p { margin-top: var(--space-4); color: color-mix(in srgb, var(--on-dark) 62%, transparent); font-size: 14px; line-height: 1.7; }

/* ============================================================================
   Benefits (design source: bpo.html #bpo-benefits) — reactive.
   ========================================================================= */
.bpo-benefits { padding: 116px 0; scroll-margin-top: 140px; background: var(--surface-sunken); }
.bpo-benefits-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  gap: clamp(64px, 9vw, 140px);
}
.bpo-benefits-copy h2 { max-width: 680px; margin: 0; font-family: var(--font-display); font-size: clamp(40px, 4.7vw, 64px); line-height: 1.03; color: var(--fg); }
.bpo-benefits-copy p { max-width: 590px; margin-top: 23px; color: var(--fg-muted); font-size: 17px; line-height: 1.75; }
.bpo-benefit-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}
.bpo-benefit-list article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: 27px var(--space-6);
  border-bottom: 1px solid var(--border);
}
.bpo-benefit-list article:last-child { border-bottom: 0; }
.bpo-benefit-list h3 { margin: 0; font-size: 20px; color: var(--fg); }
.bpo-benefit-list p { margin-top: 7px; color: var(--fg-muted); font-size: 13px; line-height: 1.65; }

/* ============================================================================
   Approach (design source: bpo.html #bpo-approach) — reactive.
   ========================================================================= */
.bpo-approach { padding: 116px 0; scroll-margin-top: 140px; background: var(--bg); }
.bpo-approach .bpo-section-heading h2 { color: var(--fg); }
.bpo-approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: 52px;
}
.bpo-approach-grid article {
  min-height: 275px;
  padding: 33px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
}
.bpo-approach-grid h3 { margin-top: 48px; margin-bottom: 0; font-size: 26px; color: var(--fg); }
.bpo-approach-grid p { margin-top: 13px; color: var(--fg-muted); font-size: 14px; line-height: 1.7; }

/* ============================================================================
   Closing CTA (design source: bpo.html .software-cta.bpo-contact) — fixed
   brand-green card, same family as Software's cta-grid card.
   ========================================================================= */
.bpo-contact { scroll-margin-top: 120px; }
.bpo-contact .software-cta-card { background: linear-gradient(135deg, var(--green-600), var(--green-800)); }

/* ============================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .bpo-page nav.open .nav-current { color: var(--green-700); }
  .software-jump-nav { display: block; gap: 0; padding: 0; box-shadow: none; }
  .bpo-hero { min-height: auto; padding: 140px 0 92px; }
  .bpo-hero-grid,
  .bpo-intro-grid,
  .bpo-benefits-grid { grid-template-columns: 1fr; }
  .bpo-hero-grid { gap: var(--space-8); }
  .bpo-operations-art { max-width: 680px; }
  .bpo-intro-grid,
  .bpo-benefits-grid { gap: var(--space-7); }
  .bpo-service-grid { grid-template-columns: repeat(2, 1fr); }
  .bpo-approach-grid { grid-template-columns: 1fr; }
  .bpo-approach-grid article { min-height: auto; }
  .bpo-approach-grid h3 { margin-top: 32px; }
  .software-cta-card { grid-template-columns: 1fr; }
  .software-cta .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .bpo-hero { padding: 124px 0 72px; }
  .bpo-hero h1 { font-size: 47px; }
  .bpo-hero-copy { font-size: 16px; }
  .bpo-operations-art { padding: 7px; border-radius: 22px; transform: none; }
  .bpo-operations-window { min-height: 0; border-radius: 16px; }
  .bpo-window-summary span { position: static; margin-top: 7px; }
  .bpo-workflow-list > div { grid-template-columns: auto 1fr; }
  .bpo-workflow-list em { grid-column: 2; }
  .bpo-intro { padding: 76px 0 70px; }
  .bpo-services,
  .bpo-benefits,
  .bpo-approach { padding: 78px 0; scroll-margin-top: 126px; }
  .bpo-section-heading h2,
  .bpo-benefits-copy h2,
  .bpo-intro h2 { font-size: 38px; }
  .bpo-service-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .bpo-service-card { min-height: 0; }
  .bpo-benefit-list article { padding: 23px 21px; }
  .bpo-approach-grid { margin-top: 38px; }
  .software-cta { padding: 72px 0; }
  .software-cta-card { padding: 36px 26px; border-radius: var(--radius-lg); }
  .software-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bpo-service-card { transition: none; }
}