/* ── Megamenu ─────────────────────────────────────────────── */

/* Promo panel — replaces repeated inline style="background-color:whitesmoke" */
.submenu.megamenu > li.megamenu-promo {
    background-color: #f5f6f8;
    display: flex;
    align-items: center;
    padding: 2rem 1.5rem;
}

/* Column top padding — replaces <br /> hacks */
.submenu.megamenu > li > ul {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
}

/* Category group header inside columns */
.submenu.megamenu li.megamenu-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8492a6;
    padding: 0 1.5rem 0.5rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
}

.submenu.megamenu li.megamenu-head i {
    margin-right: 4px;
}

/* Tighten sub-menu link spacing for dense columns */
.submenu.megamenu > li > ul > li:not(.megamenu-head) a.sub-menu-item {
    padding: 5px 1.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* ── End Megamenu ─────────────────────────────────────────── */

/* ── Navbar ───────────────────────────────────────────────── */

/* Base — clean white with subtle blue-tinted border */
#topnav {
    background: #fff !important;
    border-bottom: 1px solid rgba(30,82,204,0.08) !important;
    box-shadow: 0 2px 20px rgba(30,82,204,0.05) !important;
}

/* Sticky / scrolled state — deeper shadow */
#topnav.nav-sticky {
    box-shadow: 0 4px 28px rgba(30,82,204,0.11) !important;
}

/* Top-level nav link text */
#topnav .navigation-menu > li > a {
    color: #1A2B4A;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

/* Nav link hover */
#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li.active > a {
    color: #1E52CC !important;
}

/* Active item underline — amber */
#topnav .navigation-menu > li.active > a::after {
    background: #F59E0B !important;
}

/* Dropdown arrow color */
#topnav .menu-arrow {
    border-color: #8B96A8 !important;
    transition: border-color 0.2s ease;
}
#topnav .navigation-menu > li:hover > a ~ .menu-arrow,
#topnav .navigation-menu > li:hover > .menu-arrow {
    border-color: #1E52CC !important;
}

/* Megamenu dropdown panel */
#topnav .submenu.megamenu {
    border-top: 2px solid #1E52CC;
}

/* Promo column background — light blue tint */
#topnav .submenu.megamenu > li.megamenu-promo {
    background: #EFF3FB !important;
}

/* Promo column heading and "View All" link */
#topnav .submenu.megamenu .section-title .title {
    color: #0B1B33;
    font-weight: 700;
}
#topnav .submenu.megamenu .text-primary {
    color: #1E52CC !important;
    font-weight: 600;
}
#topnav .submenu.megamenu .text-primary:hover {
    color: #F59E0B !important;
}

/* Megamenu group headers */
#topnav .submenu.megamenu li.megamenu-head {
    color: #8B96A8;
}
#topnav .submenu.megamenu li.megamenu-head i {
    color: #1E52CC;
    opacity: 0.75;
}

/* Megamenu sub-links */
#topnav .submenu a.sub-menu-item {
    color: #374151;
}
#topnav .submenu a.sub-menu-item:hover {
    color: #1E52CC !important;
}
#topnav .submenu a.sub-menu-item:hover::before {
    background: #F59E0B !important;
}

/* CTA button — brand amber */
#topnav .buy-button .btn-warning {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(245,158,11,0.28);
    transition: all 0.22s ease;
}
#topnav .buy-button .btn-warning:hover {
    background: #D98B09 !important;
    border-color: #D98B09 !important;
    box-shadow: 0 6px 20px rgba(245,158,11,0.38) !important;
    transform: translateY(-1px);
}

/* Mobile hamburger lines — brand blue */
#topnav .navbar-toggle .lines span {
    background: #1E52CC;
}

/* Mobile open menu background */
#topnav #navigation {
    background: #fff;
}

/* Mobile nav link colors */
#topnav #navigation .navigation-menu li a {
    color: #1A2B4A;
}
#topnav #navigation .navigation-menu li a:hover {
    color: #1E52CC !important;
}

/* ── End Navbar ───────────────────────────────────────────── */

/* ── Footer ───────────────────────────────────────────────── */

/* Background — dark blue-grey matching logo "OFT" grey family */
.footer {
    background: #3a4557 !important;
}

/* Bottom bar — deeper shade of same grey */
.footer-bar {
    background: #2b3344 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* Column headings — white with amber underline accent */
.footer .footer-head {
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-bottom: 12px;
    position: relative;
}
.footer .footer-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px; height: 2px;
    background: #F59E0B;
    border-radius: 2px;
}

/* Links */
.footer .text-foot {
    color: rgba(255,255,255,0.58) !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
    font-size: 0.875rem;
}
.footer .text-foot:hover {
    color: #F59E0B !important;
    padding-left: 4px;
}

/* Muted body text in footer */
.footer .text-muted {
    color: rgba(255,255,255,0.48) !important;
}

/* Contact icons */
.footer .text-primary {
    color: #F59E0B !important;
}

/* Stat pills */
.footer-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 58px;
    text-align: center;
}
.footer-stat-number {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #F59E0B;
}
.footer-stat-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Footer list spacing */
.footer .footer-list li {
    margin-bottom: 8px;
}

/* ── End Footer ───────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   BRAND COLOR STANDARDIZATION
   All Bootstrap overrides + inner-page shared styles
   Brand palette: blue #1E52CC · amber #F59E0B · navy #0B1B33
════════════════════════════════════════════════════════════ */

/* Bootstrap primary → brand blue */
.text-primary  { color: #1E52CC !important; }
a.text-primary:hover { color: #1644B0 !important; }
.bg-primary    { background-color: #1E52CC !important; }
.border-primary { border-color: #1E52CC !important; }
.btn-primary {
    background-color: #1E52CC !important;
    border-color: #1E52CC !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: #1644B0 !important;
    border-color: #1644B0 !important;
}
.btn-outline-primary {
    color: #1E52CC !important;
    border-color: #1E52CC !important;
}
.btn-outline-primary:hover {
    background-color: #1E52CC !important;
    color: #fff !important;
}

/* Bootstrap warning → brand amber */
.text-warning  { color: #F59E0B !important; }
.bg-warning    { background-color: #F59E0B !important; }
.btn-warning {
    background-color: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #fff !important;
}
.btn-warning:hover {
    background-color: #D98B09 !important;
    border-color: #D98B09 !important;
}

/* ── Inner-page hero ──────────────────────────────────────── */
/* Light hero section — used by pages without custom imagery  */
.ip-hero {
    background: linear-gradient(135deg, #EEF3FB 0%, #F5F8FF 60%, #FAFBFF 100%);
    border-bottom: 1px solid #E2E7F0;
    padding: 80px 0 64px;
}
.ip-hero h1, .ip-hero h2 { color: #0B1B33; }
.ip-hero p.lead { color: #5E6A84; }
.ip-hero .breadcrumb-item a { color: #1E52CC; }
.ip-hero .breadcrumb-item a:hover { color: #1644B0; }

/* Light section labels / eyebrow text */
.ip-eyebrow {
    display: inline-block;
    background: rgba(30,82,204,0.08);
    color: #1E52CC;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 4px;
    margin-bottom: 14px;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb-item a {
    color: #1E52CC;
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: #1644B0;
}
.breadcrumb-item.active {
    color: #5E6A84;
}

/* ── Section alternating backgrounds ─────────────────────── */
.section-light   { background-color: #F2F4F8; }
.section-white   { background-color: #ffffff; }
.section-blue-tint { background-color: #EEF3FB; }

/* ── Brand CTA banner ─────────────────────────────────────── */
/* Replaces near-black CTA gradients on service/industry pages */
[class*="-cta-banner"],
[class*="cta-section"],
.gs-cta-banner {
    background: linear-gradient(135deg, #0B1B33 0%, #1E52CC 60%, #1644B0 100%) !important;
}

/* ── Card accent top-border → brand blue ─────────────────── */
/* Cards where border-top is the hardcoded old blue           */
.card[style*="border-top:3px solid #1f5abc"],
.card[style*="border-top: 3px solid #1f5abc"] {
    border-top-color: #1E52CC !important;
}

/* ── Solution / feature items on inner pages ─────────────── */
[class$="-solution"] i,
[class$="-feature-icon"] i,
[class$="-service-icon"] i,
[class*="-stat-number"],
[class*="-step-number"] {
    color: #1E52CC;
}

/* ── Generic stat numbers across all inner pages ─────────── */
strong[style*="color:#1f5abc"],
span[style*="color:#1f5abc"],
a[style*="color:#1f5abc"] {
    color: #1E52CC !important;
}

/* ── END BRAND STANDARDIZATION ─────────────────────────────── */

/* Social icons */
.footer .social-icon li a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.65) !important;
    transition: all 0.2s ease;
}
.footer .social-icon li a:hover {
    background: #F59E0B;
    border-color: #F59E0B;
    color: #fff !important;
    transform: translateY(-2px);
}

/* CTA button in footer */
.footer .btn-primary {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #fff !important;
    font-weight: 600;
}
.footer .btn-primary:hover {
    background: #D98B09 !important;
    border-color: #D98B09 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245,158,11,0.35) !important;
}

/* Footer bar text & links */
.footer-bar p,
.footer-bar .text-reset {
    color: rgba(255,255,255,0.45) !important;
}
.footer-bar .fw-medium {
    color: rgba(255,255,255,0.65) !important;
}

/* ── End Footer ───────────────────────────────────────────── */

/* FORCE OVERRIDE BOOTSTRAP CONTAINER WIDTH */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 86% !important;
    width: 100%;
}




h1 {
    font-family: "Outfit", sans-serif;
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 3rem;
    color: #0b1b33;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

/* ════════════════════════════════════════════════════════════
   SERVICE PAGE HEROES — LIGHT THEME
   Matches the technologies page style:
     · Light gradient background (no dark photography overlay)
     · Dark text headings on white/light surface
     · Brand-blue badges and icons
     · Correct button outlines
   Brand reference: see technologies/dotnet.cshtml hero section
════════════════════════════════════════════════════════════ */

/* ── 1. Light hero backgrounds ───────────────────────────── */
.sd-hero, .ai-hero, .dt-hero, .dv-hero, .sa-hero, .ito-hero,
.api-hero, .and-hero, .cm-hero, .cb-hero, .bc-hero, .be-hero,
.fe-hero, .fs-hero, .ios-hero, .ux-hero, .sm-hero, .ns-hero,
.mvp-hero, .sc-hero, .qa-hero, .ml-hero, .poc-hero, .off-hero,
.lm-hero {
    background: linear-gradient(180deg, #f7f9fc 0%, #dee2e6 100%) !important;
    color: #0b1b33 !important;
}

/* ── 2. Dark headings (override text-white inherited from section) */
.sd-hero h1, .sd-hero h2, .sd-hero h3,
.ai-hero h1,  .ai-hero h2,  .ai-hero h3,
.dt-hero h1,  .dt-hero h2,  .dt-hero h3,
.dv-hero h1,  .dv-hero h2,  .dv-hero h3,
.sa-hero h1,  .sa-hero h2,  .sa-hero h3,
.ito-hero h1, .ito-hero h2, .ito-hero h3,
.api-hero h1, .api-hero h2, .api-hero h3,
.and-hero h1, .and-hero h2, .and-hero h3,
.cm-hero h1,  .cm-hero h2,  .cm-hero h3,
.cb-hero h1,  .cb-hero h2,  .cb-hero h3,
.bc-hero h1,  .bc-hero h2,  .bc-hero h3,
.be-hero h1,  .be-hero h2,  .be-hero h3,
.fe-hero h1,  .fe-hero h2,  .fe-hero h3,
.fs-hero h1,  .fs-hero h2,  .fs-hero h3,
.ios-hero h1, .ios-hero h2, .ios-hero h3,
.ux-hero h1,  .ux-hero h2,  .ux-hero h3,
.sm-hero h1,  .sm-hero h2,  .sm-hero h3,
.ns-hero h1,  .ns-hero h2,  .ns-hero h3,
.mvp-hero h1, .mvp-hero h2, .mvp-hero h3,
.sc-hero h1,  .sc-hero h2,  .sc-hero h3,
.qa-hero h1,  .qa-hero h2,  .qa-hero h3,
.ml-hero h1,  .ml-hero h2,  .ml-hero h3,
.poc-hero h1, .poc-hero h2, .poc-hero h3,
.off-hero h1, .off-hero h2, .off-hero h3,
.lm-hero h1,  .lm-hero h2,  .lm-hero h3 {
    color: #0b1b33 !important;
}

/* ── 3. Muted body text (override text-white-50, text-light, etc.) */
.sd-hero .text-white, .sd-hero .text-white-50, .sd-hero .text-white-75,
.sd-hero .text-light, .sd-hero .para-desc,
.ai-hero  .text-white, .ai-hero  .text-white-50, .ai-hero  .text-white-75, .ai-hero  .text-light,
.dt-hero  .text-white, .dt-hero  .text-white-50, .dt-hero  .text-white-75, .dt-hero  .text-light,
.dv-hero  .text-white, .dv-hero  .text-white-50, .dv-hero  .text-white-75, .dv-hero  .text-light,
.sa-hero  .text-white, .sa-hero  .text-white-50, .sa-hero  .text-white-75, .sa-hero  .text-light,
.ito-hero .text-white, .ito-hero .text-white-50, .ito-hero .text-white-75, .ito-hero .text-light,
.api-hero .text-white, .api-hero .text-white-50, .api-hero .text-white-75, .api-hero .text-light,
.and-hero .text-white, .and-hero .text-white-50, .and-hero .text-white-75, .and-hero .text-light,
.cm-hero  .text-white, .cm-hero  .text-white-50, .cm-hero  .text-white-75, .cm-hero  .text-light,
.cb-hero  .text-white, .cb-hero  .text-white-50, .cb-hero  .text-white-75, .cb-hero  .text-light,
.bc-hero  .text-white, .bc-hero  .text-white-50, .bc-hero  .text-white-75, .bc-hero  .text-light,
.be-hero  .text-white, .be-hero  .text-white-50, .be-hero  .text-white-75, .be-hero  .text-light,
.fe-hero  .text-white, .fe-hero  .text-white-50, .fe-hero  .text-white-75, .fe-hero  .text-light,
.fs-hero  .text-white, .fs-hero  .text-white-50, .fs-hero  .text-white-75, .fs-hero  .text-light,
.ios-hero .text-white, .ios-hero .text-white-50, .ios-hero .text-white-75, .ios-hero .text-light,
.ux-hero  .text-white, .ux-hero  .text-white-50, .ux-hero  .text-white-75, .ux-hero  .text-light,
.sm-hero  .text-white, .sm-hero  .text-white-50, .sm-hero  .text-white-75, .sm-hero  .text-light,
.ns-hero  .text-white, .ns-hero  .text-white-50, .ns-hero  .text-white-75, .ns-hero  .text-light,
.mvp-hero .text-white, .mvp-hero .text-white-50, .mvp-hero .text-white-75, .mvp-hero .text-light,
.sc-hero  .text-white, .sc-hero  .text-white-50, .sc-hero  .text-white-75, .sc-hero  .text-light,
.qa-hero  .text-white, .qa-hero  .text-white-50, .qa-hero  .text-white-75, .qa-hero  .text-light,
.ml-hero  .text-white, .ml-hero  .text-white-50, .ml-hero  .text-white-75, .ml-hero  .text-light,
.poc-hero .text-white, .poc-hero .text-white-50, .poc-hero .text-white-75, .poc-hero .text-light,
.off-hero .text-white, .off-hero .text-white-50, .off-hero .text-white-75, .off-hero .text-light,
.lm-hero  .text-white, .lm-hero  .text-white-50, .lm-hero  .text-white-75, .lm-hero  .text-light {
    color: #5E6A84 !important;
    opacity: 1 !important;
}

/* ── 4. Keep form card text dark (card is always on white) ── */
.sd-hero  .card, .sd-hero  .card *,
.ai-hero  .card, .ai-hero  .card *,
.dt-hero  .card, .dt-hero  .card *,
.dv-hero  .card, .dv-hero  .card *,
.sa-hero  .card, .sa-hero  .card *,
.ito-hero .card, .ito-hero .card *,
.api-hero .card, .api-hero .card *,
.and-hero .card, .and-hero .card *,
.cm-hero  .card, .cm-hero  .card *,
.cb-hero  .card, .cb-hero  .card *,
.bc-hero  .card, .bc-hero  .card *,
.be-hero  .card, .be-hero  .card *,
.fe-hero  .card, .fe-hero  .card *,
.fs-hero  .card, .fs-hero  .card *,
.ios-hero .card, .ios-hero .card *,
.ux-hero  .card, .ux-hero  .card *,
.sm-hero  .card, .sm-hero  .card *,
.ns-hero  .card, .ns-hero  .card *,
.mvp-hero .card, .mvp-hero .card *,
.sc-hero  .card, .sc-hero  .card *,
.qa-hero  .card, .qa-hero  .card *,
.ml-hero  .card, .ml-hero  .card *,
.poc-hero .card, .poc-hero .card *,
.off-hero .card, .off-hero .card *,
.lm-hero  .card, .lm-hero  .card * {
    color: inherit;
}
/* But keep the blue card header text white */
.sd-hero  .card [style*="background: linear-gradient(90deg"],
.ai-hero  .card [style*="background: linear-gradient(90deg"],
.dt-hero  .card [style*="background: linear-gradient(90deg"],
.dv-hero  .card [style*="background: linear-gradient(90deg"],
.sa-hero  .card [style*="background: linear-gradient(90deg"],
.ito-hero .card [style*="background: linear-gradient(90deg"],
.api-hero .card [style*="background: linear-gradient(90deg"],
.and-hero .card [style*="background: linear-gradient(90deg"],
.cm-hero  .card [style*="background: linear-gradient(90deg"],
.cb-hero  .card [style*="background: linear-gradient(90deg"],
.bc-hero  .card [style*="background: linear-gradient(90deg"],
.be-hero  .card [style*="background: linear-gradient(90deg"],
.fe-hero  .card [style*="background: linear-gradient(90deg"],
.fs-hero  .card [style*="background: linear-gradient(90deg"],
.ios-hero .card [style*="background: linear-gradient(90deg"],
.ux-hero  .card [style*="background: linear-gradient(90deg"],
.sm-hero  .card [style*="background: linear-gradient(90deg"],
.ns-hero  .card [style*="background: linear-gradient(90deg"],
.mvp-hero .card [style*="background: linear-gradient(90deg"],
.sc-hero  .card [style*="background: linear-gradient(90deg"],
.qa-hero  .card [style*="background: linear-gradient(90deg"],
.ml-hero  .card [style*="background: linear-gradient(90deg"],
.poc-hero .card [style*="background: linear-gradient(90deg"],
.off-hero .card [style*="background: linear-gradient(90deg"],
.lm-hero  .card [style*="background: linear-gradient(90deg"] {
    color: #fff !important;
}
.sd-hero  .card [style*="background: linear-gradient(90deg"] *,
.ai-hero  .card [style*="background: linear-gradient(90deg"] *,
.dt-hero  .card [style*="background: linear-gradient(90deg"] *,
.dv-hero  .card [style*="background: linear-gradient(90deg"] *,
.sa-hero  .card [style*="background: linear-gradient(90deg"] *,
.ito-hero .card [style*="background: linear-gradient(90deg"] *,
.api-hero .card [style*="background: linear-gradient(90deg"] *,
.and-hero .card [style*="background: linear-gradient(90deg"] *,
.cm-hero  .card [style*="background: linear-gradient(90deg"] *,
.cb-hero  .card [style*="background: linear-gradient(90deg"] *,
.bc-hero  .card [style*="background: linear-gradient(90deg"] *,
.be-hero  .card [style*="background: linear-gradient(90deg"] *,
.fe-hero  .card [style*="background: linear-gradient(90deg"] *,
.fs-hero  .card [style*="background: linear-gradient(90deg"] *,
.ios-hero .card [style*="background: linear-gradient(90deg"] *,
.ux-hero  .card [style*="background: linear-gradient(90deg"] *,
.sm-hero  .card [style*="background: linear-gradient(90deg"] *,
.ns-hero  .card [style*="background: linear-gradient(90deg"] *,
.mvp-hero .card [style*="background: linear-gradient(90deg"] *,
.sc-hero  .card [style*="background: linear-gradient(90deg"] *,
.qa-hero  .card [style*="background: linear-gradient(90deg"] *,
.ml-hero  .card [style*="background: linear-gradient(90deg"] *,
.poc-hero .card [style*="background: linear-gradient(90deg"] *,
.off-hero .card [style*="background: linear-gradient(90deg"] *,
.lm-hero  .card [style*="background: linear-gradient(90deg"] * {
    color: #fff !important;
}

/* ── 5. Brand badge inside heroes ───────────────────────────── */
/* Replace dark-mode success badge with brand blue badge       */
.sd-hero  .badge.bg-success, .sd-hero  .badge.text-success,
.ai-hero  .badge.bg-success, .ai-hero  .badge.text-success,
.dt-hero  .badge.bg-success, .dt-hero  .badge.text-success,
.dv-hero  .badge.bg-success, .dv-hero  .badge.text-success,
.sa-hero  .badge.bg-success, .sa-hero  .badge.text-success,
.ito-hero .badge.bg-success, .ito-hero .badge.text-success,
.api-hero .badge.bg-success, .api-hero .badge.text-success,
.and-hero .badge.bg-success, .and-hero .badge.text-success,
.cm-hero  .badge.bg-success, .cm-hero  .badge.text-success,
.cb-hero  .badge.bg-success, .cb-hero  .badge.text-success,
.bc-hero  .badge.bg-success, .bc-hero  .badge.text-success,
.be-hero  .badge.bg-success, .be-hero  .badge.text-success,
.fe-hero  .badge.bg-success, .fe-hero  .badge.text-success,
.fs-hero  .badge.bg-success, .fs-hero  .badge.text-success,
.ios-hero .badge.bg-success, .ios-hero .badge.text-success,
.ux-hero  .badge.bg-success, .ux-hero  .badge.text-success,
.sm-hero  .badge.bg-success, .sm-hero  .badge.text-success,
.ns-hero  .badge.bg-success, .ns-hero  .badge.text-success,
.mvp-hero .badge.bg-success, .mvp-hero .badge.text-success,
.sc-hero  .badge.bg-success, .sc-hero  .badge.text-success,
.qa-hero  .badge.bg-success, .qa-hero  .badge.text-success,
.ml-hero  .badge.bg-success, .ml-hero  .badge.text-success,
.poc-hero .badge.bg-success, .poc-hero .badge.text-success,
.off-hero .badge.bg-success, .off-hero .badge.text-success,
.lm-hero  .badge.bg-success, .lm-hero  .badge.text-success {
    background: rgba(30,82,204,0.08) !important;
    color: #1E52CC !important;
    border: 1px solid rgba(30,82,204,0.18) !important;
}

/* ── 6. Check icons: success → brand blue ────────────────── */
.sd-hero  .text-success, .ai-hero  .text-success, .dt-hero  .text-success,
.dv-hero  .text-success, .sa-hero  .text-success, .ito-hero .text-success,
.api-hero .text-success, .and-hero .text-success, .cm-hero  .text-success,
.cb-hero  .text-success, .bc-hero  .text-success, .be-hero  .text-success,
.fe-hero  .text-success, .fs-hero  .text-success, .ios-hero .text-success,
.ux-hero  .text-success, .sm-hero  .text-success, .ns-hero  .text-success,
.mvp-hero .text-success, .sc-hero  .text-success, .qa-hero  .text-success,
.ml-hero  .text-success, .poc-hero .text-success, .off-hero .text-success,
.lm-hero  .text-success {
    color: #1E52CC !important;
}

/* ── 7. Secondary CTA button: outline-light → outline-primary */
.sd-hero  .btn-outline-light, .ai-hero  .btn-outline-light,
.dt-hero  .btn-outline-light, .dv-hero  .btn-outline-light,
.sa-hero  .btn-outline-light, .ito-hero .btn-outline-light,
.api-hero .btn-outline-light, .and-hero .btn-outline-light,
.cm-hero  .btn-outline-light, .cb-hero  .btn-outline-light,
.bc-hero  .btn-outline-light, .be-hero  .btn-outline-light,
.fe-hero  .btn-outline-light, .fs-hero  .btn-outline-light,
.ios-hero .btn-outline-light, .ux-hero  .btn-outline-light,
.sm-hero  .btn-outline-light, .ns-hero  .btn-outline-light,
.mvp-hero .btn-outline-light, .sc-hero  .btn-outline-light,
.qa-hero  .btn-outline-light, .ml-hero  .btn-outline-light,
.poc-hero .btn-outline-light, .off-hero .btn-outline-light,
.lm-hero  .btn-outline-light {
    color: #1E52CC !important;
    border-color: #1E52CC !important;
    background: transparent !important;
}
.sd-hero  .btn-outline-light:hover, .ai-hero  .btn-outline-light:hover,
.dt-hero  .btn-outline-light:hover, .dv-hero  .btn-outline-light:hover,
.sa-hero  .btn-outline-light:hover, .ito-hero .btn-outline-light:hover,
.api-hero .btn-outline-light:hover, .and-hero .btn-outline-light:hover,
.cm-hero  .btn-outline-light:hover, .cb-hero  .btn-outline-light:hover,
.bc-hero  .btn-outline-light:hover, .be-hero  .btn-outline-light:hover,
.fe-hero  .btn-outline-light:hover, .fs-hero  .btn-outline-light:hover,
.ios-hero .btn-outline-light:hover, .ux-hero  .btn-outline-light:hover,
.sm-hero  .btn-outline-light:hover, .ns-hero  .btn-outline-light:hover,
.mvp-hero .btn-outline-light:hover, .sc-hero  .btn-outline-light:hover,
.qa-hero  .btn-outline-light:hover, .ml-hero  .btn-outline-light:hover,
.poc-hero .btn-outline-light:hover, .off-hero .btn-outline-light:hover,
.lm-hero  .btn-outline-light:hover {
    background: #1E52CC !important;
    color: #fff !important;
}

/* ── 8. Dark-mode hero badge (light text on opaque bg) ────── */
/* Some badges use color:#90bdff (light for dark bg) — reset to brand */
.sd-hero  .badge, .ai-hero  .badge, .dt-hero  .badge, .dv-hero  .badge,
.sa-hero  .badge, .ito-hero .badge, .api-hero .badge, .and-hero .badge,
.cm-hero  .badge, .cb-hero  .badge, .bc-hero  .badge, .be-hero  .badge,
.fe-hero  .badge, .fs-hero  .badge, .ios-hero .badge, .ux-hero  .badge,
.sm-hero  .badge, .ns-hero  .badge, .mvp-hero .badge, .sc-hero  .badge,
.qa-hero  .badge, .ml-hero  .badge, .poc-hero .badge, .off-hero .badge,
.lm-hero  .badge {
    background: rgba(30,82,204,0.08) !important;
    color: #1E52CC !important;
    border: 1px solid rgba(30,82,204,0.18) !important;
}
/* Exception: amber pill badges (e.g. floating "Mobile Solutions" badge) */
.sd-hero  .badge[style*="#F59E0B"], .ai-hero  .badge[style*="#F59E0B"],
.mob-hero .badge[style*="#F59E0B"] {
    background: #F59E0B !important;
    color: #fff !important;
    border-color: #F59E0B !important;
}

/* ── END SERVICE HERO LIGHT THEME ─────────────────────────── */


/* ════════════════════════════════════════════════════════════
   INDUSTRY PAGE HEROES — LIGHT THEME
   Same treatment as service page heroes.
   Classes: cn bk au th ag mf ev hc in fn el lg og iv mt rt px su re le sc tl
════════════════════════════════════════════════════════════ */

/* ── 1. Light hero backgrounds ───────────────────────────── */
.cn-hero, .bk-hero, .au-hero, .th-hero, .ag-hero, .mf-hero,
.ev-hero, .hc-hero, .in-hero, .fn-hero, .el-hero, .lg-hero,
.og-hero, .iv-hero, .mt-hero, .rt-hero, .px-hero, .su-hero,
.re-hero, .le-hero, .sc-hero, .tl-hero {
    background: linear-gradient(180deg, #f7f9fc 0%, #dee2e6 100%) !important;
    color: #0b1b33 !important;
}

/* ── 2. Dark headings ────────────────────────────────────── */
.cn-hero h1, .cn-hero h2, .cn-hero h3,
.bk-hero h1, .bk-hero h2, .bk-hero h3,
.au-hero h1, .au-hero h2, .au-hero h3,
.th-hero h1, .th-hero h2, .th-hero h3,
.ag-hero h1, .ag-hero h2, .ag-hero h3,
.mf-hero h1, .mf-hero h2, .mf-hero h3,
.ev-hero h1, .ev-hero h2, .ev-hero h3,
.hc-hero h1, .hc-hero h2, .hc-hero h3,
.in-hero h1, .in-hero h2, .in-hero h3,
.fn-hero h1, .fn-hero h2, .fn-hero h3,
.el-hero h1, .el-hero h2, .el-hero h3,
.lg-hero h1, .lg-hero h2, .lg-hero h3,
.og-hero h1, .og-hero h2, .og-hero h3,
.iv-hero h1, .iv-hero h2, .iv-hero h3,
.mt-hero h1, .mt-hero h2, .mt-hero h3,
.rt-hero h1, .rt-hero h2, .rt-hero h3,
.px-hero h1, .px-hero h2, .px-hero h3,
.su-hero h1, .su-hero h2, .su-hero h3,
.re-hero h1, .re-hero h2, .re-hero h3,
.le-hero h1, .le-hero h2, .le-hero h3,
.sc-hero h1, .sc-hero h2, .sc-hero h3,
.tl-hero h1, .tl-hero h2, .tl-hero h3 {
    color: #0b1b33 !important;
}

/* ── 3. Muted body text ──────────────────────────────────── */
.cn-hero .text-white, .cn-hero .text-white-50, .cn-hero .text-white-75, .cn-hero .text-light, .cn-hero .para-desc,
.bk-hero .text-white, .bk-hero .text-white-50, .bk-hero .text-white-75, .bk-hero .text-light, .bk-hero .para-desc,
.au-hero .text-white, .au-hero .text-white-50, .au-hero .text-white-75, .au-hero .text-light, .au-hero .para-desc,
.th-hero .text-white, .th-hero .text-white-50, .th-hero .text-white-75, .th-hero .text-light, .th-hero .para-desc,
.ag-hero .text-white, .ag-hero .text-white-50, .ag-hero .text-white-75, .ag-hero .text-light, .ag-hero .para-desc,
.mf-hero .text-white, .mf-hero .text-white-50, .mf-hero .text-white-75, .mf-hero .text-light, .mf-hero .para-desc,
.ev-hero .text-white, .ev-hero .text-white-50, .ev-hero .text-white-75, .ev-hero .text-light, .ev-hero .para-desc,
.hc-hero .text-white, .hc-hero .text-white-50, .hc-hero .text-white-75, .hc-hero .text-light, .hc-hero .para-desc,
.in-hero .text-white, .in-hero .text-white-50, .in-hero .text-white-75, .in-hero .text-light, .in-hero .para-desc,
.fn-hero .text-white, .fn-hero .text-white-50, .fn-hero .text-white-75, .fn-hero .text-light, .fn-hero .para-desc,
.el-hero .text-white, .el-hero .text-white-50, .el-hero .text-white-75, .el-hero .text-light, .el-hero .para-desc,
.lg-hero .text-white, .lg-hero .text-white-50, .lg-hero .text-white-75, .lg-hero .text-light, .lg-hero .para-desc,
.og-hero .text-white, .og-hero .text-white-50, .og-hero .text-white-75, .og-hero .text-light, .og-hero .para-desc,
.iv-hero .text-white, .iv-hero .text-white-50, .iv-hero .text-white-75, .iv-hero .text-light, .iv-hero .para-desc,
.mt-hero .text-white, .mt-hero .text-white-50, .mt-hero .text-white-75, .mt-hero .text-light, .mt-hero .para-desc,
.rt-hero .text-white, .rt-hero .text-white-50, .rt-hero .text-white-75, .rt-hero .text-light, .rt-hero .para-desc,
.px-hero .text-white, .px-hero .text-white-50, .px-hero .text-white-75, .px-hero .text-light, .px-hero .para-desc,
.su-hero .text-white, .su-hero .text-white-50, .su-hero .text-white-75, .su-hero .text-light, .su-hero .para-desc,
.re-hero .text-white, .re-hero .text-white-50, .re-hero .text-white-75, .re-hero .text-light, .re-hero .para-desc,
.le-hero .text-white, .le-hero .text-white-50, .le-hero .text-white-75, .le-hero .text-light, .le-hero .para-desc,
.sc-hero .text-white, .sc-hero .text-white-50, .sc-hero .text-white-75, .sc-hero .text-light, .sc-hero .para-desc,
.tl-hero .text-white, .tl-hero .text-white-50, .tl-hero .text-white-75, .tl-hero .text-light, .tl-hero .para-desc {
    color: #5E6A84 !important;
    opacity: 1 !important;
}

/* ── 4. Keep card content dark (cards sit on white surface) ─ */
.cn-hero .card, .cn-hero .card *,
.bk-hero .card, .bk-hero .card *,
.au-hero .card, .au-hero .card *,
.th-hero .card, .th-hero .card *,
.ag-hero .card, .ag-hero .card *,
.mf-hero .card, .mf-hero .card *,
.ev-hero .card, .ev-hero .card *,
.hc-hero .card, .hc-hero .card *,
.in-hero .card, .in-hero .card *,
.fn-hero .card, .fn-hero .card *,
.el-hero .card, .el-hero .card *,
.lg-hero .card, .lg-hero .card *,
.og-hero .card, .og-hero .card *,
.iv-hero .card, .iv-hero .card *,
.mt-hero .card, .mt-hero .card *,
.rt-hero .card, .rt-hero .card *,
.px-hero .card, .px-hero .card *,
.su-hero .card, .su-hero .card *,
.re-hero .card, .re-hero .card *,
.le-hero .card, .le-hero .card *,
.sc-hero .card, .sc-hero .card *,
.tl-hero .card, .tl-hero .card * {
    color: inherit;
}

/* ── 5. Trust-strip / stat chips: brand-amber accent text ── */
/* Industry pages often use gold/amber for trust metrics        */
.bk-hero .bk-trust-strip span,
.fn-hero .fn-trust-strip span,
.iv-hero .iv-trust-strip span {
    color: #0b1b33 !important;
}

/* ── 6. Check icons / success icons → brand blue ─────────── */
.cn-hero .text-success, .bk-hero .text-success, .au-hero .text-success,
.th-hero .text-success, .ag-hero .text-success, .mf-hero .text-success,
.ev-hero .text-success, .hc-hero .text-success, .in-hero .text-success,
.fn-hero .text-success, .el-hero .text-success, .lg-hero .text-success,
.og-hero .text-success, .iv-hero .text-success, .mt-hero .text-success,
.rt-hero .text-success, .px-hero .text-success, .su-hero .text-success,
.re-hero .text-success, .le-hero .text-success, .sc-hero .text-success,
.tl-hero .text-success {
    color: #1E52CC !important;
}

/* ── 7. Secondary CTA button: outline-light → brand outline ─ */
.cn-hero .btn-outline-light, .bk-hero .btn-outline-light,
.au-hero .btn-outline-light, .th-hero .btn-outline-light,
.ag-hero .btn-outline-light, .mf-hero .btn-outline-light,
.ev-hero .btn-outline-light, .hc-hero .btn-outline-light,
.in-hero .btn-outline-light, .fn-hero .btn-outline-light,
.el-hero .btn-outline-light, .lg-hero .btn-outline-light,
.og-hero .btn-outline-light, .iv-hero .btn-outline-light,
.mt-hero .btn-outline-light, .rt-hero .btn-outline-light,
.px-hero .btn-outline-light, .su-hero .btn-outline-light,
.re-hero .btn-outline-light, .le-hero .btn-outline-light,
.sc-hero .btn-outline-light, .tl-hero .btn-outline-light {
    color: #1E52CC !important;
    border-color: #1E52CC !important;
    background: transparent !important;
}
.cn-hero .btn-outline-light:hover, .bk-hero .btn-outline-light:hover,
.au-hero .btn-outline-light:hover, .th-hero .btn-outline-light:hover,
.ag-hero .btn-outline-light:hover, .mf-hero .btn-outline-light:hover,
.ev-hero .btn-outline-light:hover, .hc-hero .btn-outline-light:hover,
.in-hero .btn-outline-light:hover, .fn-hero .btn-outline-light:hover,
.el-hero .btn-outline-light:hover, .lg-hero .btn-outline-light:hover,
.og-hero .btn-outline-light:hover, .iv-hero .btn-outline-light:hover,
.mt-hero .btn-outline-light:hover, .rt-hero .btn-outline-light:hover,
.px-hero .btn-outline-light:hover, .su-hero .btn-outline-light:hover,
.re-hero .btn-outline-light:hover, .le-hero .btn-outline-light:hover,
.sc-hero .btn-outline-light:hover, .tl-hero .btn-outline-light:hover {
    background: #1E52CC !important;
    color: #fff !important;
}

/* ── 8. All badges inside industry heroes → brand blue ───── */
.cn-hero .badge, .bk-hero .badge, .au-hero .badge, .th-hero .badge,
.ag-hero .badge, .mf-hero .badge, .ev-hero .badge, .hc-hero .badge,
.in-hero .badge, .fn-hero .badge, .el-hero .badge, .lg-hero .badge,
.og-hero .badge, .iv-hero .badge, .mt-hero .badge, .rt-hero .badge,
.px-hero .badge, .su-hero .badge, .re-hero .badge, .le-hero .badge,
.sc-hero .badge, .tl-hero .badge {
    background: rgba(30,82,204,0.08) !important;
    color: #1E52CC !important;
    border: 1px solid rgba(30,82,204,0.18) !important;
}

/* ── 9. Custom text elements (page-specific prefixed classes) */
/* Each industry page has its own CSS classes (e.g. .bk-lead,   */
/* .fn-heading) with explicit dark-mode colors. Target the HTML  */
/* element types directly so !important beats those rules.       */
.cn-hero p, .bk-hero p, .au-hero p, .th-hero p, .ag-hero p, .mf-hero p,
.ev-hero p, .hc-hero p, .in-hero p, .fn-hero p, .el-hero p, .lg-hero p,
.og-hero p, .iv-hero p, .mt-hero p, .rt-hero p, .px-hero p, .su-hero p,
.re-hero p, .le-hero p, .sc-hero p, .tl-hero p,
.cn-hero small, .bk-hero small, .au-hero small, .th-hero small, .ag-hero small,
.mf-hero small, .ev-hero small, .hc-hero small, .in-hero small, .fn-hero small,
.el-hero small, .lg-hero small, .og-hero small, .iv-hero small, .mt-hero small,
.rt-hero small, .px-hero small, .su-hero small, .re-hero small, .le-hero small,
.sc-hero small, .tl-hero small {
    color: #5E6A84 !important;
}

/* Trust-strip chips, metric labels, misc. spans */
.cn-hero span:not(.badge):not([class*="btn"]),
.bk-hero span:not(.badge):not([class*="btn"]),
.au-hero span:not(.badge):not([class*="btn"]),
.th-hero span:not(.badge):not([class*="btn"]),
.ag-hero span:not(.badge):not([class*="btn"]),
.mf-hero span:not(.badge):not([class*="btn"]),
.ev-hero span:not(.badge):not([class*="btn"]),
.hc-hero span:not(.badge):not([class*="btn"]),
.in-hero span:not(.badge):not([class*="btn"]),
.fn-hero span:not(.badge):not([class*="btn"]),
.el-hero span:not(.badge):not([class*="btn"]),
.lg-hero span:not(.badge):not([class*="btn"]),
.og-hero span:not(.badge):not([class*="btn"]),
.iv-hero span:not(.badge):not([class*="btn"]),
.mt-hero span:not(.badge):not([class*="btn"]),
.rt-hero span:not(.badge):not([class*="btn"]),
.px-hero span:not(.badge):not([class*="btn"]),
.su-hero span:not(.badge):not([class*="btn"]),
.re-hero span:not(.badge):not([class*="btn"]),
.le-hero span:not(.badge):not([class*="btn"]),
.sc-hero span:not(.badge):not([class*="btn"]),
.tl-hero span:not(.badge):not([class*="btn"]) {
    color: #5E6A84 !important;
}

/* Metric numbers / bold emphasis → dark navy */
.cn-hero strong, .bk-hero strong, .au-hero strong, .th-hero strong,
.ag-hero strong, .mf-hero strong, .ev-hero strong, .hc-hero strong,
.in-hero strong, .fn-hero strong, .el-hero strong, .lg-hero strong,
.og-hero strong, .iv-hero strong, .mt-hero strong, .rt-hero strong,
.px-hero strong, .su-hero strong, .re-hero strong, .le-hero strong,
.sc-hero strong, .tl-hero strong,
/* Also h4/h5/h6 (e.g. form card headings inside hero) */
.cn-hero h4, .cn-hero h5, .cn-hero h6,
.bk-hero h4, .bk-hero h5, .bk-hero h6,
.au-hero h4, .au-hero h5, .au-hero h6,
.th-hero h4, .th-hero h5, .th-hero h6,
.ag-hero h4, .ag-hero h5, .ag-hero h6,
.mf-hero h4, .mf-hero h5, .mf-hero h6,
.ev-hero h4, .ev-hero h5, .ev-hero h6,
.hc-hero h4, .hc-hero h5, .hc-hero h6,
.in-hero h4, .in-hero h5, .in-hero h6,
.fn-hero h4, .fn-hero h5, .fn-hero h6,
.el-hero h4, .el-hero h5, .el-hero h6,
.lg-hero h4, .lg-hero h5, .lg-hero h6,
.og-hero h4, .og-hero h5, .og-hero h6,
.iv-hero h4, .iv-hero h5, .iv-hero h6,
.mt-hero h4, .mt-hero h5, .mt-hero h6,
.rt-hero h4, .rt-hero h5, .rt-hero h6,
.px-hero h4, .px-hero h5, .px-hero h6,
.su-hero h4, .su-hero h5, .su-hero h6,
.re-hero h4, .re-hero h5, .re-hero h6,
.le-hero h4, .le-hero h5, .le-hero h6,
.sc-hero h4, .sc-hero h5, .sc-hero h6,
.tl-hero h4, .tl-hero h5, .tl-hero h6 {
    color: #0b1b33 !important;
}

/* Badges inside hero keep brand blue (more specific, overrides span rule) */
.cn-hero .badge, .bk-hero .badge, .au-hero .badge, .th-hero .badge,
.ag-hero .badge, .mf-hero .badge, .ev-hero .badge, .hc-hero .badge,
.in-hero .badge, .fn-hero .badge, .el-hero .badge, .lg-hero .badge,
.og-hero .badge, .iv-hero .badge, .mt-hero .badge, .rt-hero .badge,
.px-hero .badge, .su-hero .badge, .re-hero .badge, .le-hero .badge,
.sc-hero .badge, .tl-hero .badge {
    color: #1E52CC !important;
}

/* ── END INDUSTRY HERO LIGHT THEME ───────────────────────── */


/* ════════════════════════════════════════════════════════════
   ABOUT PAGE HEROES — LIGHT THEME
   Pages: company (co), how-we-work (hw), pricing (pr),
          case-studies (cs), reviews (rv)
════════════════════════════════════════════════════════════ */

/* ── 1. Light gradient backgrounds ───────────────────────── */
.co-hero, .hw-hero, .pr-hero, .cs-hero, .rv-hero {
    background: linear-gradient(180deg, #f7f9fc 0%, #dee2e6 100%) !important;
    color: #0b1b33 !important;
}

/* ── 2. Dark headings ────────────────────────────────────── */
.co-hero h1, .co-hero h2, .co-hero h3, .co-hero h4, .co-hero h5, .co-hero h6,
.hw-hero h1, .hw-hero h2, .hw-hero h3, .hw-hero h4, .hw-hero h5, .hw-hero h6,
.pr-hero h1, .pr-hero h2, .pr-hero h3, .pr-hero h4, .pr-hero h5, .pr-hero h6,
.cs-hero h1, .cs-hero h2, .cs-hero h3, .cs-hero h4, .cs-hero h5, .cs-hero h6,
.rv-hero h1, .rv-hero h2, .rv-hero h3, .rv-hero h4, .rv-hero h5, .rv-hero h6 {
    color: #0b1b33 !important;
}

/* ── 3. Muted body text ──────────────────────────────────── */
.co-hero p, .hw-hero p, .pr-hero p, .cs-hero p, .rv-hero p,
.co-hero small, .hw-hero small, .pr-hero small, .cs-hero small, .rv-hero small,
.co-hero .text-white, .co-hero .text-white-50, .co-hero .text-white-75, .co-hero .text-light,
.hw-hero .text-white, .hw-hero .text-white-50, .hw-hero .text-white-75, .hw-hero .text-light,
.pr-hero .text-white, .pr-hero .text-white-50, .pr-hero .text-white-75, .pr-hero .text-light,
.cs-hero .text-white, .cs-hero .text-white-50, .cs-hero .text-white-75, .cs-hero .text-light,
.rv-hero .text-white, .rv-hero .text-white-50, .rv-hero .text-white-75, .rv-hero .text-light {
    color: #5E6A84 !important;
    opacity: 1 !important;
}

/* ── 4. Metric / emphasis values → dark navy ─────────────── */
.co-hero strong, .hw-hero strong, .pr-hero strong, .cs-hero strong, .rv-hero strong {
    color: #0b1b33 !important;
}

/* ── 5. Spans (trust chips, tags) → muted ───────────────── */
.co-hero span:not(.badge):not(.co-dot),
.hw-hero span:not(.badge):not(.hw-dot),
.pr-hero span:not(.badge):not(.pr-dot),
.cs-hero span:not(.badge):not(.cs-dot),
.rv-hero span:not(.badge):not(.rv-dot) {
    color: #5E6A84 !important;
}

/* ── 6. h1 accent span → brand blue (not muted) ─────────── */
/* Reviews, How We Work, Pricing, Case Studies: inline color */
.rv-hero h1 span, .hw-hero h1 span, .pr-hero h1 span, .cs-hero h1 span {
    color: #1E52CC !important;
}
/* Company: gradient clip-text — update to brand palette */
.co-hero h1 span {
    background: linear-gradient(90deg, #1E52CC, #F59E0B) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── 7. Badge chips (custom class) → brand blue ─────────── */
.rv-hero .rv-badge, .hw-hero .hw-badge,
.pr-hero .pr-badge, .cs-hero .cs-badge,
.co-hero .co-hero-badge {
    background: rgba(30,82,204,0.08) !important;
    color: #1E52CC !important;
    border-color: rgba(30,82,204,0.18) !important;
}
/* Animated dot inside badge */
.rv-hero .rv-dot, .hw-hero .hw-dot, .pr-hero .pr-dot,
.cs-hero .cs-dot, .co-hero .co-dot {
    background: #1E52CC !important;
}

/* ── 8. Secondary CTA button → brand outline ─────────────── */
.co-hero .btn-outline-light, .hw-hero .btn-outline-light,
.pr-hero .btn-outline-light, .cs-hero .btn-outline-light,
.rv-hero .btn-outline-light {
    color: #1E52CC !important;
    border-color: #1E52CC !important;
    background: transparent !important;
}
.co-hero .btn-outline-light:hover, .hw-hero .btn-outline-light:hover,
.pr-hero .btn-outline-light:hover, .cs-hero .btn-outline-light:hover,
.rv-hero .btn-outline-light:hover {
    background: #1E52CC !important;
    color: #fff !important;
}

/* ── 9. Company hero stat bar ────────────────────────────── */
/* Fix frosted glass dividers (rgba white → brand rgba) */
.co-hero .co-hero-stat {
    border-right-color: rgba(30,82,204,0.12) !important;
}
.co-hero .co-hero-stat strong {
    color: #0b1b33 !important;
}
.co-hero .co-hero-stat span {
    color: #5E6A84 !important;
}

/* ── 10. Case-studies inline stat numbers ────────────────── */
.cs-hero [style*="color:#fff"],
.cs-hero [style*="color: #fff"] {
    color: #0b1b33 !important;
}
.cs-hero [style*="color:rgba(255,255,255,0.45)"],
.cs-hero [style*="color: rgba(255,255,255"] {
    color: #5E6A84 !important;
}

/* ── END ABOUT HERO LIGHT THEME ──────────────────────────── */