/* =========================================================
   Extracted section styles — "Platform scale" + "Integrations"
   (self-contained: design tokens + only the rules these two
    sections use, lifted from newassests/css/industry-page.css)
   ========================================================= */

:root {
  --navy: #101F38;
  --ink: #1B2436;
  --ink-soft: #5B6675;
  --ink-faint: #8A93A3;
  --white: #FFFFFF;
  --bg-alt: #F5F7FA;
  --line: #E4E9F1;
  --red: #701893;
  --red-soft: #F2E9F8;
  --grad: linear-gradient(135deg, #701893, #1308AD);
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 31, 56, .06), 0 2px 8px rgba(16, 31, 56, .05);
  --maxw: 1400px;
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {margin: 0; background: var(--white); color: var(--ink); font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif; font-optical-sizing: auto; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
/* h2 {font-family: 'Nunito Sans', sans-serif; color: var(--navy); margin: 0; letter-spacing: -0.02em; line-height: 1.15; font-weight: 800;}
p {margin: 0;} */

/* layout wrapper (replaces the Bootstrap container/row/col used on the source page) */
.newSecWrapper {max-width: var(--maxw); margin: 0 auto; padding: 0 28px;}

/* section rhythm */
section {padding: 88px 0;}

/* eyebrow pill */
.eyebrow {display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); background: var(--red-soft); padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;}
.eyebrow .dot {width: 7px; height: 7px; border-radius: 50%; background: var(--red);}

/* section heading block */
.section-head {max-width: 680px; margin: 0 auto 52px; text-align: center;}
.section-head h2 {font-size: clamp(28px, 3.2vw, 40px); font-weight: 900;}

/* ---------- combined section (stats + marquee as one) ---------- */
.service-section {background: var(--white); padding: 80px 0 0 0;}
.service-section .marquee-wrap {margin-top: 40px;}

.service-section .marquee-wrap .marquee span img {filter: grayscale(1) brightness(0); opacity: .55; transition: opacity .3s ease;}
.service-section .marquee-wrap .marquee span img:hover {opacity: 1;}

/* ---------- stats grid ---------- */
.stats-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.stat {background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-sm);}
.stat b {display: block; font-size: 38px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px;}
.stat span {font-size: 14.5px; color: var(--ink-soft); font-weight: 700;}

@media (max-width: 760px) {
  .stats-grid {grid-template-columns: 1fr 1fr;}
}

/* ---------- logo marquee ---------- */
.marquee-wrap {overflow: hidden; padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.marquee {display: flex; width: max-content; animation: scroll 50s linear infinite; will-change: transform;}
.marquee:hover {animation-play-state: paused;}
.marquee-group {display: flex; flex: 0 0 auto;}
.marquee span {font-size: 22px; font-weight: 900; color: #B6C0CE; letter-spacing: -0.02em; white-space: nowrap; margin-right: 56px; display: inline-flex; align-items: center;}
@keyframes scroll {
  to {transform: translateX(-50%);}
}

/* ---------- scroll reveal ---------- */
.reveal {opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;}
.reveal.visible {opacity: 1; transform: translateY(0);}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .marquee {animation: none;}
  .reveal {opacity: 1; transform: none;}
}