/* ============================================================================
   Software4.net — Header & Footer premium layer (site-wide)
   ----------------------------------------------------------------------------
   Loaded from _Layout, so this applies to every public page. Deliberately
   CSS-only: the nav contains role-aware links (Portal / Admin / Sign In) and
   active-state logic bound to route data, and the footer carries every
   published internal link — all of which is SEO and auth-sensitive markup
   that shouldn't be restructured for a visual change.

   site.js already toggles `.scrolled` on #mainNav past 60px, so the
   transparent-over-hero -> solid-glass transition the brief asks for needs
   styling only, not new script.
   ========================================================================== */

/* ── Header ──────────────────────────────────────────────────────────── */
.navbar-s4 {
    padding: .85rem 0 !important;
    transition: background .32s ease, backdrop-filter .32s ease,
                box-shadow .32s ease, padding .32s ease, border-color .32s ease;
    border-bottom: 1px solid transparent;
}
.navbar-s4.scrolled {
    background: rgba(7, 26, 51, .78) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: rgba(255,255,255,.09);
    box-shadow: 0 10px 34px -18px rgba(0,0,0,.75);
    padding: .55rem 0 !important;
}

.navbar-s4 .navbar-brand img,
.navbar-s4 .navbar-brand svg { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.navbar-s4 .navbar-brand:hover img,
.navbar-s4 .navbar-brand:hover svg { transform: scale(1.03); }

/* Nav links — quiet at rest, with an underline that grows from the centre. */
.navbar-s4 .nav-link {
    position: relative;
    font-size: .89rem !important;
    font-weight: 550 !important;
    letter-spacing: -.005em;
    padding: .5rem .85rem !important;
    color: rgba(255,255,255,.78) !important;
    transition: color .24s ease;
}
.navbar-s4 .nav-link:hover { color: #fff !important; }
/* site.css already animates this underline with transform: scaleX(0 -> 1)
   and positions it with left/right. Deliberately NOT re-implementing it with
   width/translateX here — its own :hover::after{transform:scaleX(1)} rule
   would override the centring transform and the underline would jump. So
   this only restyles the existing mechanism: gradient fill, softer easing,
   and no underline under the pill CTA. */
.navbar-s4 .nav-link::after {
    background: linear-gradient(90deg, #18BFE8, #1677FF) !important;
    height: 2px; border-radius: 2px;
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.navbar-s4 .btn-nav-cta::after { display: none !important; }
.navbar-s4 .nav-link.active { color: #fff !important; font-weight: 650 !important; }

/* Primary CTA in the nav */
.navbar-s4 .btn-nav-cta {
    background: linear-gradient(135deg, #1677FF, #0E5FD8) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: .55rem 1.15rem !important;
    font-weight: 650 !important; font-size: .855rem !important;
    box-shadow: 0 8px 22px -10px rgba(22,119,255,.85);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.navbar-s4 .btn-nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(22,119,255,.95);
    color: #fff !important;
}

/* Services dropdown */
.navbar-s4 .dropdown-menu {
    min-width: 308px;
    background: linear-gradient(155deg, rgba(13,31,55,.985), rgba(6,18,34,.985));
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    border: 1px solid rgba(75,216,255,.2);
    border-radius: 14px;
    padding: .55rem;
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.95),
                0 14px 34px -22px rgba(22,119,255,.75),
                inset 0 1px 0 rgba(255,255,255,.055);
    margin-top: .72rem !important;
    transform-origin: 42px top;
}
.navbar-s4 .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 36px;
    width: 13px;
    height: 13px;
    background: #0c2038;
    border-left: 1px solid rgba(75,216,255,.2);
    border-top: 1px solid rgba(75,216,255,.2);
    transform: rotate(45deg);
}
.navbar-s4 .dropdown-menu.show {
    animation: servicesMenuIn .24s cubic-bezier(.22,1,.36,1) both;
}
@keyframes servicesMenuIn {
    from { opacity: 0; transform: translateY(-7px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.navbar-s4 .dropdown-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: rgba(255,255,255,.82);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .58rem .64rem;
    font-size: .855rem;
    font-weight: 560;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.navbar-s4 .dropdown-item > i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border: 1px solid rgba(75,216,255,.17);
    border-radius: 9px;
    background: rgba(22,119,255,.1);
    color: #4bd8ff !important;
    font-size: .84rem;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.navbar-s4 .dropdown-item:hover,
.navbar-s4 .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(22,119,255,.2), rgba(75,216,255,.075));
    border-color: rgba(75,216,255,.17);
    color: #fff;
    transform: translateX(3px);
}
.navbar-s4 .dropdown-item:hover > i,
.navbar-s4 .dropdown-item:focus > i {
    background: rgba(22,119,255,.22);
    border-color: rgba(75,216,255,.34);
    transform: scale(1.05);
}
.navbar-s4 .dropdown-divider {
    margin: .42rem .5rem;
    border-color: rgba(255,255,255,.09);
}
.navbar-s4 .dropdown.show > .nav-link,
.navbar-s4 .dropdown > .nav-link[aria-expanded="true"] {
    color: #fff !important;
    background: rgba(22,119,255,.1);
    border-radius: 8px;
}
.navbar-s4 .services-menu-footer {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255,255,255,.09);
    list-style: none;
}
.navbar-s4 .services-menu-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .72rem .72rem;
    color: #71e1ff;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .015em;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}
.navbar-s4 .services-menu-all span {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.navbar-s4 .services-menu-all:hover,
.navbar-s4 .services-menu-all:focus {
    color: #fff;
    background: rgba(75,216,255,.09);
}
.navbar-s4 .services-menu-all > i:last-child {
    transition: transform .2s ease;
}
.navbar-s4 .services-menu-all:hover > i:last-child {
    transform: translateX(3px);
}

.navbar-s4 .navbar-toggler {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px; padding: .35rem .6rem;
}
.navbar-s4 .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(24,191,232,.28); }

/* Mobile: the collapsed menu needs its own surface — over a hero image the
   links would otherwise sit on whatever happens to be behind them. */
@media (max-width: 991.98px) {
    .navbar-s4 .navbar-collapse {
        background: rgba(7, 26, 51, .96);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 14px;
        margin-top: .7rem;
        padding: .8rem;
        box-shadow: 0 24px 50px -22px rgba(0,0,0,.8);
    }
    .navbar-s4 .nav-link { padding: .68rem .8rem !important; }
    .navbar-s4 .nav-link:not(.btn-nav-cta)::after { display: none; }
    .navbar-s4 .nav-link.active { background: rgba(22,119,255,.14); border-radius: 8px; }
    .navbar-s4 .btn-nav-cta { display: block; text-align: center; margin-top: .5rem; }
    .navbar-s4 .dropdown-menu {
        min-width: 0;
        margin-top: .35rem !important;
        background: rgba(255,255,255,.045);
        border-color: rgba(255,255,255,.09);
        box-shadow: none;
    }
    .navbar-s4 .dropdown-menu::before { display: none; }
    .navbar-s4 .dropdown-item:hover,
    .navbar-s4 .dropdown-item:focus { transform: none; }
}

.navbar-s4 .nav-link:focus-visible,
.navbar-s4 .navbar-brand:focus-visible {
    outline: 2px solid #18BFE8; outline-offset: 3px; border-radius: 6px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
    position: relative;
    background: linear-gradient(180deg, #050F1F 0%, #071A33 100%) !important;
    padding-top: clamp(3rem, 5vw, 4.5rem) !important;
}
footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(24,191,232,.45), transparent);
}

footer h5, footer h6, footer .footer-heading {
    font-size: .705rem !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase;
    color: rgba(255,255,255,.5) !important;
    margin-bottom: 1.1rem !important;
}
footer p, footer li, footer address { color: rgba(255,255,255,.6); line-height: 1.75; }

footer a {
    color: rgba(255,255,255,.66);
    text-decoration: none;
    font-size: .875rem;
    display: inline-block;
    transition: color .22s ease, transform .22s ease;
}
footer a:hover { color: #fff; transform: translateX(3px); }
footer ul li + li { margin-top: .55rem; }

/* Social icons */
footer .social-icon,
footer .footer-social a {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    transition: background .25s ease, border-color .25s ease,
                color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
footer .social-icon:hover,
footer .footer-social a:hover {
    background: rgba(22,119,255,.18);
    border-color: rgba(22,119,255,.45);
    color: #fff;
    transform: translateY(-2px);
}

/* The approved logo file has a square canvas. Size and crop it consistently so
   the visible cloud wordmark is not reduced to a tiny mark in the footer. */
footer .footer-brand {
    overflow: hidden;
}

footer .footer-brand img.s4-approved-logo {
    display: block;
    width: 190px !important;
    height: 190px !important;
    max-width: none !important;
    object-fit: contain;
    margin: -57px 0 -55px -14px;
}

@media (max-width: 575.98px) {
    footer .footer-brand img.s4-approved-logo {
        width: 176px !important;
        height: 176px !important;
        margin: -52px auto -50px;
    }
}

/* Contact rows keep their icons aligned with the text baseline. */
footer .fa-map-marker-alt, footer .fa-phone,
footer .fa-envelope, footer .fa-globe { color: #18BFE8; width: 16px; }

/* Bottom bar */
footer hr { border-color: rgba(255,255,255,.09) !important; opacity: 1 !important; }
footer .footer-bottom,
footer > div:last-child { border-top: 1px solid rgba(255,255,255,.09); }
footer .footer-bottom a, footer > div:last-child a {
    font-size: .8rem; color: rgba(255,255,255,.55);
}
footer .footer-bottom a:hover, footer > div:last-child a:hover { color: #18BFE8; }

footer a:focus-visible { outline: 2px solid #18BFE8; outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .navbar-s4, .navbar-s4 .nav-link::after,
    footer a, footer .social-icon { transition: none !important; }
    .navbar-s4 .btn-nav-cta:hover, footer a:hover,
    footer .social-icon:hover, footer .footer-social a:hover { transform: none; }
}
/* ============================================================================
   Software4.net — Shared page components premium layer
   ----------------------------------------------------------------------------
   Loaded site-wide from _Layout, AFTER site.css but BEFORE the page-level
   @section Styles block — so pages with their own sheet (home-premium,
   services-premium) still override this, while the pages that don't
   (Contact, About, Products, Blog) inherit the refined treatment.

   CSS-only and component-scoped: it upgrades the shared .section-label /
   .section-title / .section-subtitle typography and the generic card and
   hero patterns those pages already use, so no page markup changes.
   ========================================================================== */

/* ── Section eyebrow ─────────────────────────────────────────────────── */
/* site.css renders this as a wide pale pill. On a page with several
   sections that reads as repeated chrome, so it's reduced to a compact
   tracked label — the same treatment the redesigned pages use. */
.section-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase;
    color: #1677FF !important;
    margin-bottom: .85rem !important;
}
/* Eyebrows sitting on a dark hero need light text instead. */
[style*="var(--s4-navy"] .section-label,
[style*="#0d1b2a"] .section-label,
[style*="gradient-hero"] .section-label {
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    padding: .4rem .9rem !important;
    border-radius: 6px !important;
    backdrop-filter: blur(8px);
}

/* ── Section headings ────────────────────────────────────────────────── */
.section-title {
    font-size: clamp(1.7rem, 3.1vw, 2.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1.15 !important;
    color: #071A33 !important;
    text-wrap: balance;
}
.section-subtitle {
    font-size: 1rem !important;
    line-height: 1.72 !important;
    color: #64748B !important;
}

/* Page heroes on these pages are inline-styled navy→blue gradients. Deepening
   them to the refined palette keeps them consistent with the redesigned
   pages without touching each page's markup. */
section[style*="padding:120px 0 80px"],
section[style*="padding:130px 0 80px"],
section[style*="padding:140px 0 80px"],
div[style*="padding:140px 0 80px"] {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%) !important;
}
section[style*="padding:120px 0 80px"]::before,
section[style*="padding:130px 0 80px"]::before,
section[style*="padding:140px 0 80px"]::before,
div[style*="padding:140px 0 80px"]::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 72% 76% at 50% 42%, #000 16%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 42%, #000 16%, transparent 72%);
}
section[style*="padding:120px 0 80px"] > *,
section[style*="padding:130px 0 80px"] > *,
section[style*="padding:140px 0 80px"] > *,
div[style*="padding:140px 0 80px"] > * { position: relative; z-index: 1; }

section[style*="padding:120px 0 80px"] h1,
section[style*="padding:140px 0 80px"] h1,
div[style*="padding:140px 0 80px"] h1 {
    letter-spacing: -.032em !important;
    line-height: 1.09 !important;
}

/* ── Generic cards ───────────────────────────────────────────────────── */
/* These pages lean on Bootstrap .card plus a few bespoke card classes.
   Softening the radius and giving one consistent hover lift keeps them
   coherent with the redesigned sections. */
.service-card, .product-card, .blog-card, .team-card,
.value-card, .info-card, .feature-card {
    border-radius: 14px;
    transition: transform .32s cubic-bezier(.22,1,.36,1),
                box-shadow .32s cubic-bezier(.22,1,.36,1),
                border-color .28s ease;
}
.service-card:hover, .product-card:hover, .blog-card:hover,
.team-card:hover, .value-card:hover, .info-card:hover, .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -24px rgba(7,26,51,.26);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary-s4 {
    border-radius: 8px !important;
    font-weight: 650 !important;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.btn-primary-s4:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(22,119,255,.8);
}
.btn-outline-s4 { border-radius: 8px !important; font-weight: 650 !important; }

/* ── Forms (Contact / Blog subscribe) ────────────────────────────────── */
.form-control, .form-select {
    border-radius: 9px;
    transition: border-color .24s ease, box-shadow .24s ease;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}
@media (max-width: 575.98px) {
    /* 16px stops iOS zooming in when a field takes focus. */
    .form-control, .form-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .service-card:hover, .product-card:hover, .blog-card:hover,
    .team-card:hover, .value-card:hover, .info-card:hover,
    .feature-card:hover, .btn-primary-s4:hover { transform: none; }
}

/* ========================================================================== 
   Unified dark product language for every public inner page
   ========================================================================== */
body.public-inner-page {
    --inner-bg: #061426;
    --inner-bg-2: #081a30;
    --inner-panel: rgba(14, 38, 68, .88);
    --inner-panel-soft: rgba(13, 34, 61, .7);
    --inner-line: rgba(117, 181, 231, .19);
    --inner-ink: #f5f9ff;
    --inner-muted: #a9bad0;
    background: var(--inner-bg) !important;
    color: var(--inner-ink);
}
body.public-inner-page main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(900px circle at 92% 12%, rgba(22,119,255,.16), transparent 58%),
        linear-gradient(rgba(75,216,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,216,255,.035) 1px, transparent 1px),
        linear-gradient(145deg, #061426, #071a31 58%, #09284d);
    background-size: auto, 56px 56px, 56px 56px, auto;
}
body.public-inner-page main > section,
body.public-inner-page main > div:not([class*="hero"]) {
    border-bottom: 1px solid rgba(75,216,255,.1);
}
body.public-inner-page main section[style*="background:#fff"],
body.public-inner-page main section[style*="background: #fff"],
body.public-inner-page main section[style*="background:var(--s4-white)"],
body.public-inner-page main section[style*="background:var(--s4-off-white)"],
body.public-inner-page main section[style*="background:#f8faff"] {
    background: transparent !important;
}
body.public-inner-page .section-label { color: #4bd8ff !important; }
body.public-inner-page .section-title,
body.public-inner-page main h2,
body.public-inner-page main h3,
body.public-inner-page main h4,
body.public-inner-page main h5,
body.public-inner-page main h6 {
    color: var(--inner-ink) !important;
}
body.public-inner-page .section-subtitle,
body.public-inner-page main p,
body.public-inner-page main .text-muted,
body.public-inner-page main [style*="color:var(--s4-gray-500)"],
body.public-inner-page main [style*="color: var(--s4-gray-500)"] {
    color: var(--inner-muted) !important;
}
body.public-inner-page main [style*="color:var(--s4-dark)"],
body.public-inner-page main [style*="color:var(--s4-text)"] {
    color: var(--inner-ink) !important;
}
body.public-inner-page main [style*="background:#f8faff"],
body.public-inner-page main [style*="background: #f8faff"],
body.public-inner-page main [style*="background:#fff"],
body.public-inner-page main [style*="background: #fff"],
body.public-inner-page main [style*="background:var(--s4-gray-100)"],
body.public-inner-page main [style*="background:var(--s4-off-white)"],
body.public-inner-page main [style*="background:linear-gradient(135deg,#f0f4ff"],
body.public-inner-page main [style*="background:rgba(124,58,237,.05)"],
body.public-inner-page main [style*="background:rgba(8,145,178,.05)"] {
    background: var(--inner-panel-soft) !important;
    border-color: var(--inner-line) !important;
    box-shadow: 0 24px 60px -36px rgba(0,0,0,.9);
}
body.public-inner-page main .rounded-3,
body.public-inner-page main .rounded-4,
body.public-inner-page main .data-card {
    border-color: var(--inner-line) !important;
}
body.public-inner-page main .data-card {
    overflow: hidden;
    background: var(--inner-panel) !important;
    box-shadow: 0 30px 70px -38px rgba(0,0,0,.95);
}
body.public-inner-page main .data-card-header {
    background: rgba(255,255,255,.025) !important;
    border-bottom-color: var(--inner-line) !important;
}
body.public-inner-page .form-label { color: #dce9f8 !important; }
body.public-inner-page .form-control,
body.public-inner-page .form-select {
    color: #edf6ff !important;
    background-color: rgba(4,15,29,.72) !important;
    border-color: rgba(117,181,231,.25) !important;
}
body.public-inner-page .form-control::placeholder { color: #7288a3 !important; }
body.public-inner-page .form-select option { color: #eaf4ff; background: #0a1c32; }
body.public-inner-page .form-control:focus,
body.public-inner-page .form-select:focus {
    border-color: rgba(75,216,255,.58) !important;
    box-shadow: 0 0 0 4px rgba(75,216,255,.1) !important;
}
body.public-inner-page .btn-outline-s4,
body.public-inner-page main .btn-outline-secondary {
    color: #eaf4ff !important;
    border-color: rgba(151,197,235,.35) !important;
    background: rgba(255,255,255,.035) !important;
}
body.public-inner-page .btn-outline-s4:hover,
body.public-inner-page main .btn-outline-secondary:hover {
    color: #fff !important;
    border-color: #4bd8ff !important;
    background: rgba(75,216,255,.1) !important;
}
body.public-inner-page main a:not(.btn-primary-s4):not(.btn-nav-cta) { color: #69dfff; }

@media (max-width: 767.98px) {
    body.public-inner-page main > section { padding-top: 56px !important; padding-bottom: 56px !important; }
}
/* ========================================================================== */
/* Products catalog                                                           */
/* ========================================================================== */
.catalog-page { --catalog-line: rgba(110,181,238,.18); color:#dceaff; background:#061426; }
.catalog-page, .catalog-page * { box-sizing:border-box; }
.catalog-hero { position:relative; overflow:hidden; padding:clamp(8.5rem,13vw,11rem) 0 clamp(5rem,8vw,7rem); text-align:center; background:linear-gradient(135deg,#04101f 0%,#082849 52%,#0b4c85 100%); border-bottom:1px solid var(--catalog-line); }
.catalog-hero::before, .catalog-section::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(105,182,240,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(105,182,240,.055) 1px,transparent 1px); background-size:56px 56px; }
.catalog-hero-inner, .catalog-section>.container { position:relative; z-index:1; }
.catalog-orb { position:absolute; border-radius:50%; filter:blur(10px); opacity:.45; }
.catalog-orb-one { width:420px; height:420px; right:-110px; top:40px; background:radial-gradient(circle,#087eff55,transparent 68%); }
.catalog-orb-two { width:380px; height:380px; left:-140px; bottom:-160px; background:radial-gradient(circle,#25d7ef3d,transparent 68%); }
.catalog-kicker { display:inline-flex; color:#47d8f5; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.catalog-hero h1 { max-width:940px; margin:1.1rem auto 1.25rem; color:#fff; font-size:clamp(2.55rem,5.8vw,5.15rem); line-height:.98; letter-spacing:-.055em; font-weight:900; text-wrap:balance; }
.catalog-hero h1 span { background:linear-gradient(90deg,#44daf4,#3489ff 54%,#8d7bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.catalog-hero p { max-width:730px; margin:0 auto; color:#acc2d7; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.75; }
.catalog-hero-actions { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:2rem 0; }
.catalog-btn { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:50px; padding:.8rem 1.3rem; border-radius:10px; text-decoration:none; font-weight:750; transition:.25s ease; }
.catalog-btn-primary { color:#fff; background:linear-gradient(120deg,#087eff,#19c8ec); box-shadow:0 16px 34px -16px #087eff; }
.catalog-btn-secondary { color:#d9ecff; border:1px solid rgba(157,204,240,.28); background:rgba(4,19,36,.38); }
.catalog-btn:hover { color:#fff; transform:translateY(-2px); }
.catalog-trust { display:flex; justify-content:center; gap:clamp(1rem,4vw,2.4rem); flex-wrap:wrap; color:#9eb7cf; font-size:.82rem; }
.catalog-trust i { margin-right:.35rem; color:#35d4f3; }
.catalog-jump { position:sticky; top:70px; z-index:20; background:rgba(4,17,32,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--catalog-line); }
.catalog-jump-inner { display:flex; justify-content:center; gap:.45rem; padding:.72rem 1rem; overflow-x:auto; }
.catalog-jump a { color:#9fb5cb; text-decoration:none; white-space:nowrap; padding:.55rem 1rem; border-radius:8px; font-size:.82rem; font-weight:700; }
.catalog-jump a:hover { color:#fff; background:rgba(48,164,245,.12); }
.catalog-section { position:relative; overflow:hidden; padding:clamp(4.5rem,8vw,7rem) 0; background:linear-gradient(180deg,#061426,#071a30); }
.catalog-section-head { max-width:770px; margin:0 auto clamp(2.5rem,5vw,4rem); text-align:center; }
.catalog-section-head h2, .catalog-approach h2, .catalog-final-cta h2 { color:#f7fbff; font-size:clamp(2rem,3.7vw,3.25rem); font-weight:850; letter-spacing:-.04em; margin:.8rem 0; text-wrap:balance; }
.catalog-section-head p, .catalog-approach p, .catalog-final-cta p { color:#96aec5; line-height:1.75; margin:0; }
.catalog-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.catalog-feature-card { --accent:#1688ff; display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid rgba(102,178,236,.22); border-radius:22px; background:linear-gradient(155deg,rgba(16,47,78,.96),rgba(7,27,49,.98)); box-shadow:0 26px 60px -42px #000; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.catalog-feature-card:hover { transform:translateY(-7px); border-color:color-mix(in srgb,var(--accent) 58%,transparent); box-shadow:0 32px 70px -38px var(--accent); }
.catalog-accent-violet { --accent:#7d69ff; }.catalog-accent-cyan { --accent:#13bed1; }
.catalog-product-visual { height:220px; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,#102943),#102943); border-bottom:1px solid rgba(118,186,239,.15); }
.catalog-product-visual img { width:190px; height:190px; object-fit:contain; filter:drop-shadow(0 18px 25px rgba(0,0,0,.34)); transition:transform .35s ease; }
.catalog-feature-card:hover .catalog-product-visual img { transform:scale(1.06) translateY(-3px); }
.catalog-product-copy { display:flex; flex:1; flex-direction:column; padding:1.5rem; }
.catalog-card-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; color:var(--accent); font-size:.65rem; font-weight:800; letter-spacing:.1em; }
.catalog-ai-pill { color:#cbe9ff; letter-spacing:0; padding:.28rem .5rem; border-radius:999px; background:rgba(101,178,235,.12); border:1px solid rgba(101,178,235,.17); }
.catalog-product-copy h3, .catalog-loop-card h3 { color:#fff; font-size:1.45rem; font-weight:820; letter-spacing:-.025em; margin:.9rem 0 .55rem; }
.catalog-product-copy>p, .catalog-loop-card>p { color:#9fb5ca; line-height:1.68; font-size:.91rem; }
.catalog-product-copy ul, .catalog-loop-card ul { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; list-style:none; padding:1.1rem 0; margin:auto 0 1rem; border-top:1px solid rgba(115,181,232,.14); }
.catalog-product-copy li, .catalog-loop-card li { position:relative; padding-left:1rem; color:#c7d8e8; font-size:.8rem; }
.catalog-product-copy li::before, .catalog-loop-card li::before { content:""; position:absolute; left:0; top:.48em; width:5px; height:5px; border-radius:50%; background:var(--accent,#21c7e8); box-shadow:0 0 10px var(--accent,#21c7e8); }
.catalog-card-actions, .catalog-loop-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.catalog-card-actions a, .catalog-loop-actions a { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:43px; padding:.65rem; border-radius:9px; text-align:center; text-decoration:none; font-size:.78rem; font-weight:750; }
.catalog-card-actions a:first-child, .catalog-loop-actions a:first-child { color:#fff; background:linear-gradient(120deg,var(--accent,#118cff),color-mix(in srgb,var(--accent,#118cff) 65%,#2ae1ef)); }
.catalog-card-actions a:last-child, .catalog-loop-actions a:last-child { color:#c9dced; border:1px solid rgba(124,186,235,.22); }
/* The global inner-page link color is intentionally cyan, but primary card
   actions sit on saturated gradients and require a solid high-contrast label. */
body.public-inner-page main .catalog-card-actions a:first-child,
body.public-inner-page main .catalog-loop-actions a:first-child {
    color:#fff !important;
    font-weight:850;
    text-shadow:0 1px 2px rgba(0,18,38,.42);
}
body.public-inner-page main .catalog-card-actions a:first-child:hover,
body.public-inner-page main .catalog-card-actions a:first-child:focus-visible,
body.public-inner-page main .catalog-loop-actions a:first-child:hover,
body.public-inner-page main .catalog-loop-actions a:first-child:focus-visible {
    color:#fff !important;
    filter:brightness(1.08) saturate(1.05);
    box-shadow:0 12px 26px -14px var(--accent,#118cff);
}
body.public-inner-page main .catalog-card-actions a:first-child:focus-visible,
body.public-inner-page main .catalog-loop-actions a:first-child:focus-visible {
    outline:3px solid #fff;
    outline-offset:3px;
}
.catalog-loop-section { background:linear-gradient(135deg,#061222,#09284b); border-block:1px solid var(--catalog-line); }
.catalog-loop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.catalog-loop-card { --accent:#1bc5e8; display:flex; min-width:0; flex-direction:column; padding:1.25rem; border:1px solid rgba(110,181,238,.22); border-radius:20px; background:linear-gradient(150deg,rgba(17,47,78,.96),rgba(8,29,53,.98)); transition:.3s ease; }
.catalog-loop-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 52%,transparent); }
.catalog-loop-card.loop-seo { --accent:#2b86ff; }.catalog-loop-card.loop-ads { --accent:#ffa400; }.catalog-loop-card.loop-dev { --accent:#8976ff; }
.catalog-loop-icon { height:145px; display:grid; place-items:center; margin:-.25rem -.25rem .8rem; border-radius:15px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 67%); }
.catalog-loop-icon img { width:136px; height:136px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.32)); }
.catalog-loop-label { color:var(--accent); font-size:.62rem; font-weight:800; letter-spacing:.11em; }
.catalog-loop-card ul { grid-template-columns:1fr; margin-top:auto; }
.catalog-approach { background:#061426; }
.catalog-approach-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(1.8rem,4vw,3.5rem); border:1px solid var(--catalog-line); border-radius:24px; background:radial-gradient(circle at 0 0,rgba(30,147,232,.14),transparent 43%),#091d34; }
.catalog-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.catalog-principles article { padding:1.2rem; border-radius:15px; background:rgba(6,22,40,.72); border:1px solid rgba(112,181,235,.16); }
.catalog-principles i { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:#3dd7f3; background:rgba(61,215,243,.1); }
.catalog-principles h3 { color:#f4f9ff; font-size:1rem; margin:1rem 0 .35rem; }.catalog-principles p { font-size:.8rem; }
.catalog-final-cta { padding:clamp(3.5rem,7vw,5.5rem) 0; background:linear-gradient(120deg,#07213d,#0b4a82); border-top:1px solid var(--catalog-line); }
.catalog-final-cta>.container { display:flex; align-items:center; justify-content:space-between; gap:2rem; }.catalog-final-cta h2 { margin-bottom:.55rem; }.catalog-final-cta p { max-width:720px; }
@media(max-width:1100px){.catalog-feature-grid{grid-template-columns:repeat(2,1fr)}.catalog-loop-grid{grid-template-columns:repeat(2,1fr)}.catalog-feature-card:last-child{grid-column:1/-1;max-width:620px;justify-self:center}.catalog-approach-panel{grid-template-columns:1fr}}
@media(max-width:700px){.catalog-hero{padding-top:7rem}.catalog-feature-grid,.catalog-loop-grid,.catalog-principles{grid-template-columns:1fr}.catalog-feature-card:last-child{grid-column:auto}.catalog-jump{top:60px}.catalog-jump-inner{justify-content:flex-start}.catalog-product-copy ul{grid-template-columns:1fr}.catalog-final-cta>.container{align-items:flex-start;flex-direction:column}.catalog-final-cta .catalog-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.catalog-feature-card:hover,.catalog-loop-card:hover,.catalog-btn:hover,.catalog-feature-card:hover .catalog-product-visual img{transform:none}}
/* ============================================================================
   Software4.net — Homepage premium layer
   ----------------------------------------------------------------------------
   An enhancement layer over the existing homepage rather than a rewrite. The
   page already contains a working contact form (reCAPTCHA, SMS consent),
   live Google reviews, JSON-LD schema and permission-aware content — none of
   which needed to change to get a more premium feel, so this file adds depth,
   motion and typographic refinement on top of the existing markup instead.

   Paired with home-premium.js, which handles the scroll-reveal and pointer
   interactions. Everything degrades gracefully: with JS disabled the
   .reveal elements are shown by the .no-js rule at the bottom.
   ========================================================================== */

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal-delay="1"] { transition-delay: .08s; }
.reveal[data-reveal-delay="2"] { transition-delay: .16s; }
.reveal[data-reveal-delay="3"] { transition-delay: .24s; }
.reveal[data-reveal-delay="4"] { transition-delay: .32s; }
.reveal[data-reveal-delay="5"] { transition-delay: .40s; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }

/* Soft drifting light behind the hero. Sits under the content via z-index
   and is pointer-events:none so it can never intercept clicks on the CTAs. */
.hero-section::before {
    content: '';
    position: absolute; inset: -20% -10% auto -10%; height: 140%;
    background:
        radial-gradient(620px circle at 18% 22%, rgba(0,180,216,.22), transparent 62%),
        radial-gradient(560px circle at 82% 12%, rgba(66,165,245,.20), transparent 60%);
    pointer-events: none; z-index: 0;
    animation: heroDrift 18s ease-in-out infinite alternate;
}
.hero-section > * { position: relative; z-index: 1; }
@keyframes heroDrift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* Fine grid texture — the kind of detail that reads as "considered" up close
   but shouldn't be noticeable at a glance, hence the very low alpha. */
.hero-section::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%);
}

.hero-section h1 { letter-spacing: -.028em; }

.hero-stat-item .stat-number {
    background: linear-gradient(92deg, #ffffff 0%, #9fe3f5 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -.02em;
}
.hero-stat-item { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.hero-stat-item:hover { transform: translateY(-3px); }

/* Hero dashboard card — subtle float, and a lift on hover. */
.hero-graphic { animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-11px); }
}
.hero-graphic-inner {
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
    box-shadow: 0 26px 60px -22px rgba(0,0,0,.55);
}
.hero-graphic:hover .hero-graphic-inner {
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 38px 80px -26px rgba(0,0,0,.62);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Sheen sweep on primary CTAs. overflow:hidden keeps the highlight inside
   the pill; the ::after is skewed so it reads as light passing over glass. */
.btn-primary, .btn-s4-primary, .cta-section .btn-warning {
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.btn-primary::after, .btn-s4-primary::after, .cta-section .btn-warning::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -85%; width: 60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
    transform: skewX(-18deg); transition: left .6s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.btn-primary:hover::after, .btn-s4-primary:hover::after, .cta-section .btn-warning:hover::after { left: 130%; }
.btn-primary:hover, .btn-s4-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(21,101,192,.55);
}

/* ── Cards: shared premium treatment ─────────────────────────────────── */
.service-card, .capability-card, .product-card, .review-card, .s4p-card {
    position: relative; isolation: isolate;
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1),
                border-color .3s ease;
}

/* Cursor spotlight — --mx/--my are written by home-premium.js on mousemove. */
.service-card::before, .capability-card::before, .product-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: radial-gradient(460px circle at var(--mx,50%) var(--my,0%),
                rgba(21,101,192,.09), transparent 45%);
    opacity: 0; transition: opacity .4s ease;
}
.service-card:hover::before, .capability-card:hover::before, .product-card:hover::before { opacity: 1; }

.service-card:hover, .capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -22px rgba(13,27,42,.30);
}
.product-card:hover { transform: translateY(-7px); }

/* Partner logos — a gentle lift plus colour returning on hover already
   exists; this adds the depth and easing to match the rest of the page. */
.s4p-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px -18px rgba(13,27,42,.26); }

/* Icon chips lift with a slight overshoot so they feel physical. */
.service-icon, .capability-icon, .product-icon {
    transition: transform .42s cubic-bezier(.34,1.56,.64,1), box-shadow .42s ease;
}
.service-card:hover .service-icon,
.capability-card:hover .capability-icon,
.product-card:hover .product-icon { transform: translateY(-3px) scale(1.09) rotate(-3deg); }

/* ── Section headings ────────────────────────────────────────────────── */
.section-label {
    position: relative; overflow: hidden;
    letter-spacing: .14em;
}
section h2 { letter-spacing: -.022em; }

/* ── Stats band ──────────────────────────────────────────────────────── */
.stats-section { position: relative; overflow: hidden; }
.stats-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 50% 120%, rgba(255,255,255,.12), transparent 60%);
}
.stat-box { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.stat-box:hover { transform: translateY(-4px); }
.stat-box .number { letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── Reviews ─────────────────────────────────────────────────────────── */
.review-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -20px rgba(13,27,42,.24); }
.review-stars { letter-spacing: .06em; }

/* ── Consultation form ───────────────────────────────────────────────── */
.cta-section .form-control, .cta-section .form-select {
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.cta-section .form-control:focus, .cta-section .form-select:focus {
    box-shadow: 0 0 0 4px rgba(0,180,216,.16);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer a { transition: color .22s ease, transform .22s ease; display: inline-block; }
footer a:hover { transform: translateX(3px); }

/* ── Scroll progress bar ─────────────────────────────────────────────── */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #00B4D8, #1565C0, #42A5F5);
    z-index: 2000; pointer-events: none;
    transition: width .1s linear;
}

/* Print / PDF export. Screenshot and print-to-PDF tools capture the page
   without firing scroll events, so any .reveal element that hadn't entered
   the viewport yet would export faded out or shifted — which is exactly why
   the testimonials and consultation form appeared clipped in a full-page PDF
   capture. Force everything visible and drop decorative motion for print. */
@media print {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-section::before, .hero-section::after, .hero-graphic { animation: none !important; }
    .scroll-progress { display: none !important; }
}

/* ── Accessibility / fallbacks ───────────────────────────────────────── */
/* Without JS the reveal elements would stay invisible, so show them all. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-section::before,
    .hero-graphic { animation: none !important; }
    .service-card:hover, .capability-card:hover, .product-card:hover,
    .review-card:hover, .s4p-card:hover, .stat-box:hover, .hero-stat-item:hover { transform: none; }
    .btn-primary::after, .btn-s4-primary::after { display: none; }
    .scroll-progress { display: none; }
}

/* ============================================================================
   SECTION 1 — PREMIUM HERO (hero-v2)
   ----------------------------------------------------------------------------
   Uses the refined palette from the brief (#071A33 navy, #0B3B73, #1677FF
   electric blue, #18BFE8 cyan) as locally-scoped tokens rather than editing
   the global --s4-* variables, so nothing outside the hero shifts colour.
   ========================================================================== */
.hero-v2 {
    --nv:      #071A33;
    --nv-2:    #0B3B73;
    --el:      #1677FF;
    --cy:      #18BFE8;
    position: relative;
    background: linear-gradient(145deg, #050F1F 0%, var(--nv) 42%, var(--nv-2) 100%);
    padding: clamp(96px, 12vw, 150px) 0 clamp(72px, 9vw, 110px);
    overflow: hidden;
}

/* Engineering-drawing grid, faded out at the edges so it never reads as a
   hard-edged texture block. */
.hero-v2 .hero-grid-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 72%);
}
.hero-v2 > .container { position: relative; z-index: 2; }

/* ── Left column ─────────────────────────────────────────────────────── */
.hero-v2 .hero-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.88);
    padding: .42rem .95rem; border-radius: 6px;   /* small radius, per brief */
    font-size: .74rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.hero-v2 .hero-badge .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--cy);
    box-shadow: 0 0 0 3px rgba(24,191,232,.22);
}

.hero-v2 .hero-title {
    margin: 1.45rem 0 1.15rem;
    font-size: clamp(2.4rem, 5.1vw, 4.05rem);
    line-height: 1.045;
    font-weight: 800;
    letter-spacing: -.033em;
    color: #fff;
    text-wrap: balance;
}
.hero-v2 .hero-title .highlight {
    background: linear-gradient(96deg, var(--cy) 0%, #6FD2F5 45%, var(--el) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-v2 .hero-subtitle {
    font-size: clamp(1rem, 1.18vw, 1.115rem);
    line-height: 1.68;
    color: rgba(255,255,255,.7);
    max-width: 33.5em;          /* restrained measure keeps it readable */
    margin-bottom: 2.1rem;
}

.hero-v2 .hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.9rem; }
.hero-v2 .btn-primary-s4,
.hero-v2 .btn-outline-s4 {
    border-radius: 8px;          /* buttons: smaller radius, per brief */
    padding: .85rem 1.6rem;
    font-weight: 650; font-size: .93rem;
    display: inline-flex; align-items: center;
    transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease,
                background .26s ease, border-color .26s ease;
}
.hero-v2 .btn-primary-s4 {
    background: linear-gradient(135deg, var(--el), #0E5FD8);
    color: #fff; border: none;
    box-shadow: 0 10px 26px -10px rgba(22,119,255,.75);
}
.hero-v2 .btn-primary-s4:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -10px rgba(22,119,255,.9);
}
.hero-v2 .btn-outline-s4 {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
}
.hero-v2 .btn-outline-s4:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.38);
    transform: translateY(-2px);
}

/* Trust metrics — a hairline rule instead of four cards, per the brief's
   "less card clutter" principle. */
.hero-v2 .hero-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.hero-v2 .hero-stat-item { transition: transform .32s cubic-bezier(.22,1,.36,1); }
.hero-v2 .hero-stat-item:hover { transform: translateY(-3px); }
.hero-v2 .hero-stat-item .stat-number {
    display: block;
    font-size: clamp(1.45rem, 2.05vw, 1.85rem);
    font-weight: 800; letter-spacing: -.028em; line-height: 1.1;
    background: linear-gradient(92deg, #fff 0%, #A8E4F7 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-v2 .hero-stat-item .stat-label {
    margin-top: .3rem;
    font-size: .705rem; font-weight: 600;
    letter-spacing: .075em; text-transform: uppercase;
    color: rgba(255,255,255,.52); line-height: 1.35;
}

/* ── Right column: AI Business Engine ────────────────────────────────── */
.hero-v2 .hero-engine { position: relative; padding: .5rem; }
.hero-v2 .engine-svg { width: 100%; height: auto; display: block; overflow: visible; }

.hero-v2 .engine-nodes .node rect {
    fill: rgba(255,255,255,.055);
    stroke: rgba(255,255,255,.15);
    stroke-width: 1;
    backdrop-filter: blur(6px);          /* the "subtle glassmorphism" */
    transition: fill .3s ease, stroke .3s ease;
}
.hero-v2 .engine-nodes .node text {
    fill: #fff; font-size: 12.5px; font-weight: 650; text-anchor: middle;
}
.hero-v2 .engine-nodes .node text.sub {
    fill: rgba(255,255,255,.5); font-size: 9px; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
}
.hero-v2 .engine-nodes .node:hover rect {
    fill: rgba(24,191,232,.14);
    stroke: rgba(24,191,232,.5);
}

/* Each node breathes on its own offset so the diagram never pulses in unison,
   which would read as a loading state rather than a living system. */
.hero-v2 .engine-nodes .node { animation: nodeFloat 6.5s ease-in-out infinite; }
.hero-v2 .engine-nodes .node:nth-child(2) { animation-delay: -1.1s; }
.hero-v2 .engine-nodes .node:nth-child(3) { animation-delay: -2.2s; }
.hero-v2 .engine-nodes .node:nth-child(4) { animation-delay: -3.3s; }
.hero-v2 .engine-nodes .node:nth-child(5) { animation-delay: -4.4s; }
.hero-v2 .engine-nodes .node:nth-child(6) { animation-delay: -5.5s; }
@keyframes nodeFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
}

.hero-v2 .engine-core { animation: corePulse 4.5s ease-in-out infinite; transform-origin: 260px 240px; }
@keyframes corePulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.035); }
}
.hero-v2 .core-ring { animation: ringExpand 3.6s ease-out infinite; transform-origin: 260px 240px; }
@keyframes ringExpand {
    0%   { transform: scale(1);    opacity: .65; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .hero-v2 { padding: 88px 0 64px; text-align: center; }
    .hero-v2 .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-v2 .hero-btns { justify-content: center; }
    .hero-v2 .hero-engine { margin-top: 2.5rem; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 575.98px) {
    /* Two rows of two reads better than four cramped columns at 375–390px. */
    .hero-v2 .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.35rem .75rem; }
    .hero-v2 .hero-btns .btn-primary-s4,
    .hero-v2 .hero-btns .btn-outline-s4 { width: 100%; justify-content: center; }
    .hero-v2 .hero-title { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
}

/* ── Accessibility ───────────────────────────────────────────────────── */
.hero-v2 a:focus-visible {
    outline: 2px solid var(--cy); outline-offset: 3px; border-radius: 8px;
}
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Animation is decorative only — the diagram is composed so it reads as a
   finished graphic when every animation is switched off. */
@media (prefers-reduced-motion: reduce) {
    .hero-v2 .engine-nodes .node,
    .hero-v2 .engine-core,
    .hero-v2 .core-ring { animation: none !important; }
    .hero-v2 .engine-pulses { display: none; }
    .hero-v2 .hero-stat-item:hover,
    .hero-v2 .btn-primary-s4:hover,
    .hero-v2 .btn-outline-s4:hover { transform: none; }
}
@media print {
    .hero-v2 .engine-nodes .node,
    .hero-v2 .engine-core,
    .hero-v2 .core-ring { animation: none !important; }
    .hero-v2 .engine-pulses { display: none; }
}

/* ============================================================================
   SECTION 2 — TRUST / COMPANY INTRO
   ----------------------------------------------------------------------------
   Asymmetric 5/7 split: heading anchored left, statement right. No cards —
   the section is held together by whitespace and a single hairline rule,
   per the brief's "less card clutter" principle.
   ========================================================================== */
.trust-intro { padding: clamp(64px, 7vw, 96px) 0; background: #FFFFFF; }

.eyebrow {
    display: inline-block;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: #1677FF;
    margin-bottom: .9rem;
}
.trust-heading {
    font-size: clamp(1.75rem, 3.1vw, 2.55rem);
    font-weight: 800; line-height: 1.16; letter-spacing: -.028em;
    color: #071A33; margin: 0;
    text-wrap: balance;
}
.trust-body {
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.82; color: #475569; margin: 0 0 1.85rem;
}
.trust-body strong { color: #071A33; font-weight: 700; }
.trust-body a {
    color: #0B3B73; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid rgba(22,119,255,.32);
    transition: color .2s ease, border-color .2s ease;
}
.trust-body a:hover { color: #1677FF; border-bottom-color: #1677FF; }

/* Trust indicators: a hairline-separated row, not four boxes. */
.trust-pills {
    list-style: none; margin: 0; padding: 1.5rem 0 0;
    border-top: 1px solid #E2E8F0;
    display: flex; flex-wrap: wrap; gap: .65rem 2.1rem;
}
.trust-pills li {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .845rem; font-weight: 650; color: #0B3B73;
    letter-spacing: -.005em;
}
.trust-pills i { color: #18BFE8; font-size: .82rem; }

/* ============================================================================
   SECTION 3 — TECHNOLOGY PARTNERS
   ----------------------------------------------------------------------------
   A logo strip rather than a row of bordered cards. Logos sit desaturated at
   rest so the row reads as one calm band, and return to full colour on hover.
   ========================================================================== */
.partners-strip { padding: clamp(56px, 6.5vw, 86px) 0; background: #F7F9FC; }
.partners-head { text-align: center; max-width: 620px; margin: 0 auto clamp(2.2rem, 4vw, 3.2rem); }
.partners-title {
    font-size: clamp(1.5rem, 2.7vw, 2.15rem);
    font-weight: 800; letter-spacing: -.026em; color: #071A33; margin: 0 0 .6rem;
}
.partners-sub { font-size: .985rem; line-height: 1.7; color: #64748B; margin: 0; }

.partners-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;                                   /* hairline separators */
    background: #E2E8F0;
    border: 1px solid #E2E8F0;
    border-radius: 14px;                        /* larger radius: major container only */
    overflow: hidden;
}
.partner-item { background: #FFFFFF; }
.partner-link {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0;
    min-height: 124px; padding: 1rem .75rem;
    text-decoration: none;
    transition: background .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
a.partner-link:hover { background: #FBFCFE; transform: translateY(-2px); }

.partner-logo {
    max-width: 104px; max-height: 38px; width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(.62);
    transition: filter .3s ease, transform .3s ease;
}
a.partner-link:hover .partner-logo { filter: grayscale(0%) opacity(1); transform: scale(1.04); }

/* Shown when a partner has no logo, and swapped in by the img onerror handler
   when a referenced file is missing — so a 404 degrades to a clean monogram
   instead of a broken-image icon. */
.partner-initials {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9px;
    background: linear-gradient(145deg, #EEF4FF, #E3ECFB);
    border: 1px solid #DBE6F6;
    color: #0B3B73; font-weight: 800; font-size: .88rem; letter-spacing: .02em;
}
.partner-name {
    display: none !important;
}
a.partner-link:hover .partner-name { color: #1677FF; }
.partner-link:focus-visible { outline: 2px solid #1677FF; outline-offset: -2px; }

@media (max-width: 575.98px) {
    .partners-rail { grid-template-columns: repeat(2, 1fr); }
    .partner-link { min-height: 108px; padding: 1.15rem .75rem; }
    .trust-pills { gap: .7rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    a.partner-link:hover { transform: none; }
    a.partner-link:hover .partner-logo { transform: none; }
}

/* ============================================================================
   SECTION 4 — SERVICES (editorial panels)
   ----------------------------------------------------------------------------
   Two large panels instead of two generic SaaS cards. A large ghosted numeral
   and a top accent rule carry the hierarchy, so the panel doesn't rely on
   heavy borders or shadow to feel substantial.
   ========================================================================== */
.svc-v2 { padding: clamp(72px, 8vw, 110px) 0; background: #FFFFFF; }
.svc-head { max-width: 660px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.svc-title {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.14;
    color: #071A33; margin: 0 0 .85rem; text-wrap: balance;
}
.svc-sub { font-size: 1.02rem; line-height: 1.72; color: #64748B; margin: 0; }

.svc-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }

.svc-panel {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;                 /* medium radius — a major container */
    padding: clamp(1.8rem, 3vw, 2.6rem);
    transition: border-color .32s ease, box-shadow .32s cubic-bezier(.22,1,.36,1),
                transform .32s cubic-bezier(.22,1,.36,1);
}
/* Accent rule that draws across the top edge on hover. */
.svc-panel::before {
    content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #1677FF, #18BFE8);
    border-radius: 16px 16px 0 0;
    transition: width .5s cubic-bezier(.22,1,.36,1);
}
.svc-panel:hover::before { width: 100%; }
.svc-panel:hover {
    border-color: #CBD9EC;
    transform: translateY(-4px);
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.28);
}

.svc-panel-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.svc-num {
    font-size: 2.5rem; font-weight: 800; line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px #CBD9EC;   /* outlined numeral — quiet but structural */
}
.svc-panel--alt .svc-num { -webkit-text-stroke-color: #B9D4F2; }
.svc-cat {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: #1677FF;
}
.svc-panel-title {
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 750; letter-spacing: -.02em; line-height: 1.3;
    color: #071A33; margin: 0 0 .8rem;
}
.svc-panel-desc { font-size: .93rem; line-height: 1.75; color: #64748B; margin: 0 0 1.6rem; }

/* Capability list in two columns — compact without becoming a box each. */
.svc-list {
    list-style: none; margin: 0 0 1.9rem; padding: 1.5rem 0 0;
    border-top: 1px solid #EEF2F7;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .72rem 1.4rem;
}
.svc-list li {
    position: relative; padding-left: 1.3rem;
    font-size: .845rem; line-height: 1.45; color: #334155; font-weight: 550;
}
.svc-list li::before {
    content: ''; position: absolute; left: 0; top: .42em;
    width: 6px; height: 6px; border-radius: 2px;
    background: #18BFE8;
}

.svc-cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .55rem;
    background: linear-gradient(135deg, #1677FF, #0E5FD8);
    color: #fff; text-decoration: none;
    padding: .78rem 1.45rem; border-radius: 8px;
    font-size: .88rem; font-weight: 650;
    box-shadow: 0 10px 24px -12px rgba(22,119,255,.8);
    transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease;
}
.svc-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22,119,255,.92); }
.svc-cta i { transition: transform .26s cubic-bezier(.22,1,.36,1); }
.svc-cta:hover i { transform: translateX(3px); }

/* ============================================================================
   SECTION 5 — CAPABILITIES
   ----------------------------------------------------------------------------
   One hairline-separated grid rather than eight bordered cards. Two items are
   given extra width and scale as focal points.
   ========================================================================== */
.cap-v2 { padding: clamp(72px, 8vw, 110px) 0; background: #F7F9FC; }
.cap-head { max-width: 660px; margin: 0 auto clamp(2.4rem, 4.5vw, 3.6rem); text-align: center; }
.cap-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    color: #071A33; margin: 0 0 .8rem;
}
.cap-sub { font-size: 1rem; line-height: 1.72; color: #64748B; margin: 0; }

.cap-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 1px; background: #E2E8F0;
    border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden;
    margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.cap-item {
    grid-column: span 2;                 /* 3 across by default */
    background: #FFFFFF;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    transition: background .3s ease;
}
/* The two emphasised capabilities take half a row each on the top line. */
.cap-item.is-feature { grid-column: span 3; }
.cap-item:hover { background: #FBFCFE; }

.cap-icon {
    display: block; font-size: 1.32rem; color: #1677FF;
    margin-bottom: 1rem;
    transition: transform .38s cubic-bezier(.34,1.56,.64,1), color .3s ease;
}
.cap-item:hover .cap-icon { transform: translateY(-3px) scale(1.12); color: #18BFE8; }
.cap-item.is-feature .cap-icon { font-size: 1.65rem; }

.cap-item-title {
    font-size: .98rem; font-weight: 700; letter-spacing: -.012em;
    color: #071A33; margin: 0 0 .5rem; line-height: 1.32;
}
.cap-item.is-feature .cap-item-title { font-size: 1.16rem; }
.cap-item-desc { font-size: .845rem; line-height: 1.68; color: #64748B; margin: 0; }
.cap-item.is-feature .cap-item-desc { font-size: .89rem; }

/* Dark banner closing the section. */
.cap-banner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
    background: linear-gradient(120deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.6rem, 3vw, 2.6rem);
}
.cap-banner-title { font-size: clamp(1.05rem, 1.7vw, 1.32rem); font-weight: 750; color: #fff; margin: 0 0 .35rem; letter-spacing: -.016em; }
.cap-banner-sub { font-size: .89rem; color: rgba(255,255,255,.66); margin: 0; }
.cap-banner-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.cap-btn-light, .cap-btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .72rem 1.3rem; border-radius: 8px;
    font-size: .855rem; font-weight: 650; text-decoration: none; white-space: nowrap;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.cap-btn-light { background: #fff; color: #0B3B73; }
.cap-btn-light:hover { color: #0B3B73; transform: translateY(-2px); background: #F2F7FF; }
.cap-btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.cap-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .svc-panels { grid-template-columns: 1fr; gap: 1.25rem; }
    .cap-grid { grid-template-columns: repeat(4, 1fr); }
    .cap-item, .cap-item.is-feature { grid-column: span 2; }
}
@media (max-width: 575.98px) {
    .cap-grid { grid-template-columns: 1fr; }
    .cap-item, .cap-item.is-feature { grid-column: span 1; }
    .svc-list { grid-template-columns: 1fr; }
    .cap-banner { flex-direction: column; align-items: flex-start; }
    .cap-banner-actions { width: 100%; }
    .cap-btn-light, .cap-btn-ghost { flex: 1; justify-content: center; }
    .svc-cta { width: 100%; justify-content: center; }
}

.svc-cta:focus-visible, .cap-btn-light:focus-visible, .cap-btn-ghost:focus-visible {
    outline: 2px solid #18BFE8; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .svc-panel:hover, .svc-cta:hover, .cap-btn-light:hover, .cap-btn-ghost:hover { transform: none; }
    .svc-panel::before { transition: none; }
    .cap-item:hover .cap-icon { transform: none; }
}

/* ============================================================================
   SECTION 6 — PROOF / METRICS
   ----------------------------------------------------------------------------
   Dark band, four columns, hairline dividers. No boxes — the numbers carry it.
   ========================================================================== */
.proof-v2 {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #050F1F 0%, #071A33 45%, #0B3B73 100%);
    padding: clamp(56px, 6.5vw, 86px) 0;
}

/* Evidence panel replaces unverified counters and testimonials. */
.proof-v2 .evidence-section { position: relative; z-index: 2; }
.evidence-heading { max-width: 760px; margin: 0 auto 2.3rem; text-align: center; }
.evidence-heading h2 { color: #f5f9ff; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -.04em; margin: .7rem 0 .8rem; }
.evidence-heading p { color: #aebfd2; max-width: 650px; margin: 0 auto; line-height: 1.75; }
.evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.evidence-grid article { min-height: 220px; padding: 1.65rem; border: 1px solid rgba(84,168,255,.23); border-radius: 20px; background: linear-gradient(145deg, rgba(17,50,88,.9), rgba(7,25,49,.92)); box-shadow: 0 18px 55px rgba(0,0,0,.16); }
.evidence-grid i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #4bd9f9; background: rgba(26,191,232,.11); border: 1px solid rgba(75,217,249,.25); margin-bottom: 1.2rem; }
.evidence-grid h3 { color: #f4f9ff; font-size: 1.08rem; font-weight: 800; margin: 0 0 .6rem; }
.evidence-grid p { color: #aebfd2; line-height: 1.65; margin: 0; }
@media (max-width: 767.98px) { .evidence-grid { grid-template-columns: 1fr; } .evidence-grid article { min-height: auto; } }
.proof-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(680px circle at 22% 120%, rgba(24,191,232,.16), transparent 60%),
        radial-gradient(620px circle at 82% -20%, rgba(22,119,255,.16), transparent 60%);
}
.proof-v2 > .container { position: relative; z-index: 1; }

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proof-item {
    text-align: center; padding: .4rem clamp(.6rem, 1.6vw, 1.4rem);
    border-left: 1px solid rgba(255,255,255,.12);
}
.proof-item:first-child { border-left: none; }

.proof-num {
    font-size: clamp(1.9rem, 4.1vw, 3.05rem);
    font-weight: 800; line-height: 1.02; letter-spacing: -.038em;
    font-variant-numeric: tabular-nums;     /* stops width jitter while counting */
    background: linear-gradient(94deg, #FFFFFF 0%, #9FE3F5 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: .55rem;
}
.proof-label {
    font-size: .735rem; font-weight: 600;
    letter-spacing: .085em; text-transform: uppercase;
    color: rgba(255,255,255,.55); line-height: 1.45;
}

/* ============================================================================
   SECTION 7 — PRODUCTS
   ----------------------------------------------------------------------------
   Three product cards, each with its own accent drawn from the brand system.
   The visual is an abstract UI motif, deliberately not a fake screenshot.
   ========================================================================== */
.prod-v2 { padding: clamp(72px, 8vw, 110px) 0; background: #FFFFFF; }
.prod-head { max-width: 640px; margin: 0 auto clamp(2.4rem, 4.5vw, 3.6rem); text-align: center; }
.prod-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    color: #071A33; margin: 0 0 .8rem;
}
.prod-sub { font-size: 1rem; line-height: 1.72; color: #64748B; margin: 0; }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.prod-card {
    --accent:   #1677FF;
    --accent-2: #18BFE8;
    display: flex; flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px; overflow: hidden;
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1),
                border-color .3s ease;
}
.prod--crm { --accent: #1677FF; --accent-2: #18BFE8; }
.prod--edu { --accent: #7C5CFF; --accent-2: #4DA3FF; }
.prod--med { --accent: #0EA5A5; --accent-2: #18BFE8; }

.prod-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 30px 58px -28px rgba(7,26,51,.38);
}

/* Abstract product motif — a suggestion of an interface, not a mock screenshot. */
.prod-visual {
    position: relative; height: 122px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 80%, #0a3158) 0%,
        color-mix(in srgb, var(--accent-2) 72%, #0a3158) 130%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.prod-visual::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 72%);
}
.prod-chip {
    position: relative; z-index: 1;
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.36);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.35rem;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.prod-card:hover .prod-chip { transform: translateY(-3px) scale(1.07); }
.prod-motif {
    position: absolute; right: 1.15rem; bottom: 1.15rem; z-index: 1;
    display: flex; align-items: flex-end; gap: 4px; height: 26px;
}
.prod-motif .motif-bar { width: 5px; border-radius: 2px; background: rgba(255,255,255,.5); }
.prod-motif .motif-bar:nth-child(1) { height: 42%; }
.prod-motif .motif-bar:nth-child(2) { height: 78%; }
.prod-motif .motif-bar:nth-child(3) { height: 58%; }

.prod-body { padding: 1.5rem 1.5rem 0; flex: 1; }
.prod-name {
    font-size: 1.16rem; font-weight: 750; letter-spacing: -.02em;
    color: #071A33; margin: 0 0 .55rem;
}
.prod-desc { font-size: .855rem; line-height: 1.7; color: #64748B; margin: 0 0 1.25rem; }
.prod-features {
    list-style: none; margin: 0; padding: 1.15rem 0 0;
    border-top: 1px solid #EEF2F7;
    display: grid; gap: .6rem;
}
.prod-features li {
    position: relative; padding-left: 1.3rem;
    font-size: .815rem; color: #334155; font-weight: 550; line-height: 1.4;
}
.prod-features li::before {
    content: ''; position: absolute; left: 0; top: .44em;
    width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
}

.prod-actions { display: flex; gap: .6rem; padding: 1.4rem 1.5rem 1.5rem; }
.prod-btn-primary, .prod-btn-ghost {
    flex: 1; text-align: center; text-decoration: none;
    padding: .68rem 1rem; border-radius: 8px;
    font-size: .82rem; font-weight: 650;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.prod-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; border: 1px solid transparent;
}
.prod-btn-primary:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); }
.prod-btn-ghost { background: #fff; border: 1px solid #DCE5F0; color: #334155; }
.prod-btn-ghost:hover { color: #071A33; border-color: #B9C9DD; background: #F7F9FC; transform: translateY(-2px); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .prod-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 575.98px) {
    /* 4 columns at 375px crushes the labels; 2x2 keeps them readable. */
    .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
    .proof-item:nth-child(odd)  { border-left: none; }
    .proof-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
}

.prod-btn-primary:focus-visible, .prod-btn-ghost:focus-visible {
    outline: 2px solid #1677FF; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .prod-card:hover, .prod-btn-primary:hover, .prod-btn-ghost:hover { transform: none; }
    .prod-card:hover .prod-chip { transform: none; }
}

/* ============================================================================
   SECTION 8 — COMPANY / VIDEO
   ========================================================================== */
.about-v2 { padding: clamp(72px, 8vw, 110px) 0; background: #FFFFFF; }
.about-split {
    display: grid; grid-template-columns: 1fr 1.15fr;   /* slight asymmetry */
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about-heading {
    font-size: clamp(1.75rem, 3.3vw, 2.7rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.14;
    color: #071A33; margin: 0 0 1rem; text-wrap: balance;
}
.about-desc { font-size: .97rem; line-height: 1.8; color: #64748B; margin: 0 0 1.75rem; }

.about-points { list-style: none; margin: 0 0 2rem; padding: 1.6rem 0 0; border-top: 1px solid #EEF2F7; display: grid; gap: .95rem; }
.about-points li { display: flex; align-items: flex-start; gap: .8rem; font-size: .9rem; color: #334155; font-weight: 550; line-height: 1.5; }
.about-points i {
    flex-shrink: 0; margin-top: .12rem;
    width: 20px; height: 20px; border-radius: 6px;
    background: rgba(22,119,255,.1); color: #1677FF;
    display: flex; align-items: center; justify-content: center; font-size: .62rem;
}

.about-cta {
    display: inline-flex; align-items: center; gap: .55rem;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .82rem 1.55rem; border-radius: 8px;
    font-size: .89rem; font-weight: 650; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(22,119,255,.8);
    transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease;
}
.about-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22,119,255,.92); }
.about-cta i { transition: transform .26s cubic-bezier(.22,1,.36,1); }
.about-cta:hover i { transform: translateX(3px); }

.about-video {
    position: relative; aspect-ratio: 16/9;
    border-radius: 18px; overflow: hidden;   /* larger radius: major container */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 34px 70px -30px rgba(7,26,51,.55);
}
.about-video.no-thumb { background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%); }
.about-video-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    background: #071A33;
}
.about-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(7,26,51,.42) 0%, rgba(11,59,115,.62) 100%);
}

/* Elegant play control: thin ring, soft glass fill, expanding halo. */
.about-play {
    position: relative; z-index: 2;
    width: 82px; height: 82px; border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.28rem; text-decoration: none; padding-left: 5px;
    transition: transform .35s cubic-bezier(.22,1,.36,1), background .3s ease, border-color .3s ease;
}
.about-play:hover { color: #fff; background: rgba(255,255,255,.24); border-color: #fff; transform: scale(1.07); }
.play-ring {
    position: absolute; inset: -1.5px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.5);
    animation: playHalo 2.8s ease-out infinite;
}
@keyframes playHalo {
    0%   { transform: scale(1);    opacity: .65; }
    100% { transform: scale(1.42); opacity: 0; }
}

.about-caption { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.5rem; z-index: 2; }
.about-vtitle { color: #fff; font-weight: 700; font-size: 1.06rem; letter-spacing: -.014em; }
.about-vsub { color: rgba(255,255,255,.66); font-size: .82rem; margin-top: .15rem; }

.about-play:focus-visible, .about-cta:focus-visible { outline: 2px solid #18BFE8; outline-offset: 4px; }

/* Cinematic company-video lightbox. The close control floats over the frame so
   there is no empty Bootstrap header competing with the film. */
#videoModal {
    --bs-modal-width: min(92vw, 1280px);
}
#videoModal .modal-dialog {
    width: min(92vw, 1280px);
    max-width: min(92vw, 1280px);
    margin: 1rem auto;
}
#videoModal .modal-content {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 22px;
    background: transparent !important;
    box-shadow: none;
}
#videoModal .modal-header {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    padding: 0;
    border: 0;
}
#videoModal .btn-close {
    position: relative;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background-color: rgba(5,16,31,.72) !important;
    background-image: none !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.36);
    opacity: 1;
    filter: none !important;
    backdrop-filter: blur(14px);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
#videoModal .btn-close::before,
#videoModal .btn-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: translate(-50%,-50%) rotate(45deg);
}
#videoModal .btn-close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}
#videoModal .btn-close:hover {
    transform: scale(1.06);
    background-color: rgba(20,113,238,.92);
    border-color: rgba(255,255,255,.62);
}
#videoModal .btn-close:focus-visible {
    outline: 3px solid rgba(66,165,245,.75);
    outline-offset: 3px;
    box-shadow: none;
}
#videoModal .modal-body {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: #020814;
    box-shadow: 0 34px 100px rgba(0,0,0,.66), 0 0 0 1px rgba(28,143,255,.08);
}
#videoModal .company-overview-video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 2rem);
    aspect-ratio: 16/9;
    object-fit: contain;
    border-radius: 21px;
    background: #000;
}
#videoModal.fade .modal-dialog {
    transform: translateY(14px) scale(.975);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
#videoModal.show .modal-dialog { transform: none; }
.modal-backdrop.show {
    opacity: .88;
    background: radial-gradient(circle at 50% 45%, #123d6b 0%, #061426 42%, #01050c 100%);
    backdrop-filter: blur(12px) saturate(.72);
}

@media (max-width: 575.98px) {
    #videoModal .modal-dialog {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        margin: 10px auto;
    }
    #videoModal .modal-content,
    #videoModal .modal-body { border-radius: 15px; }
    #videoModal .company-overview-video {
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }
    #videoModal .modal-header { top: 9px; right: 9px; }
    #videoModal .btn-close { width: 40px; height: 40px; }
}

@media (max-width: 991.98px) {
    .about-split { grid-template-columns: 1fr; gap: 2.2rem; }
}
@media (max-width: 575.98px) {
    .about-play { width: 64px; height: 64px; font-size: 1.05rem; }
    .about-cta { width: 100%; justify-content: center; }
    .about-caption { left: 1.1rem; right: 1.1rem; bottom: 1.1rem; }
    .about-vtitle { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
    .play-ring { animation: none; opacity: .5; }
    .about-play:hover, .about-cta:hover { transform: none; }
}
@media print { .play-ring { animation: none; } }

/* ============================================================================
   SECTION 9 — TESTIMONIALS
   ----------------------------------------------------------------------------
   CSS-ONLY redesign, deliberately. The live Google Reviews feature fetches
   /Home/LiveReviews after page load and REBUILDS .carousel-inner from
   JavaScript, emitting .review-card / .review-stars / .review-text /
   .review-author / .review-avatar / .review-author-name / .review-platform.
   Renaming or restructuring any of those in the Razor view would leave the
   server-rendered markup styled and the live-fetched markup unstyled — a
   break that only appears once real reviews load. So the structure is left
   untouched and the whole premium treatment is done here, which means it
   applies identically to both server-rendered and JS-injected cards.
   ========================================================================== */
.reviews-section { padding: clamp(72px, 8vw, 110px) 0; background: #F7F9FC; }

.reviews-section .section-label {
    display: inline-block;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: #1677FF; background: none; padding: 0; border: none;
    margin-bottom: .85rem;
}
.reviews-section .section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    color: #071A33; margin: 0 0 .8rem;
}
.reviews-section .section-subtitle {
    font-size: 1rem; line-height: 1.72; color: #64748B;
    max-width: 580px; margin-left: auto; margin-right: auto;
}

/* Review card — editorial quote block rather than a plain bordered box. */
.reviews-section .review-card {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E8EEF6;
    border-radius: 16px;
    padding: clamp(1.6rem, 2.6vw, 2.15rem);
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1),
                border-color .3s ease;
}
/* Oversized quote mark, set behind the text as a watermark. */
.reviews-section .review-card::before {
    content: '\201C';
    position: absolute; top: .35rem; right: 1.15rem; z-index: -1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 6.5rem; line-height: 1; color: #EEF4FF;
    pointer-events: none;
}
.reviews-section .review-card:hover {
    transform: translateY(-5px);
    border-color: #D6E3F5;
    box-shadow: 0 28px 54px -26px rgba(7,26,51,.26);
}

.reviews-section .review-stars {
    color: #F59E0B; font-size: .95rem; letter-spacing: .1em;
    margin-bottom: 1rem;
}
.reviews-section .review-text {
    font-size: .945rem; line-height: 1.78; color: #334155;
    margin: 0 0 1.65rem; flex: 1;
    font-weight: 450;
}

.reviews-section .review-author {
    display: flex; align-items: center; gap: .85rem;
    padding-top: 1.35rem; border-top: 1px solid #EEF2F7;
}
.reviews-section .review-avatar {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(145deg, #1677FF, #0B3B73);
    color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px -4px rgba(7,26,51,.35);
}
.reviews-section .review-author-name {
    font-size: .89rem; font-weight: 700; color: #071A33; letter-spacing: -.012em;
    line-height: 1.3;
}
.reviews-section .review-platform {
    font-size: .755rem; color: #64748B; margin-top: .14rem; line-height: 1.4;
}
.reviews-section .review-platform a { color: inherit; text-decoration: none; }
.reviews-section .review-platform a:hover { color: #1677FF; }

/* Carousel controls */
.reviews-section .carousel-inner { padding: .5rem 0 1rem; }
.reviews-section [data-bs-slide] {
    border-radius: 8px; font-size: .82rem; font-weight: 600;
    padding: .5rem 1.05rem;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.reviews-section [data-bs-slide]:hover { transform: translateY(-2px); }

/* Summary + source links under the heading */
.reviews-section .btn-outline-secondary {
    border-radius: 8px; border-color: #DCE5F0; color: #334155;
    font-weight: 600; font-size: .8rem;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.reviews-section .btn-outline-secondary:hover {
    background: #fff; border-color: #B9C9DD; color: #071A33;
}

@media (max-width: 575.98px) {
    .reviews-section .review-card { padding: 1.4rem; }
    .reviews-section .review-card::before { font-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-section .review-card:hover,
    .reviews-section [data-bs-slide]:hover { transform: none; }
}

/* ============================================================================
   SECTION 10 — CONSULTATION CTA
   ----------------------------------------------------------------------------
   CSS-ONLY, for the same reason as Section 9 but with higher stakes: this
   form is live conversion infrastructure. #contactForm is read by site.js via
   FormData, so every input `name` (firstName, lastName, email, phone, company,
   service, message, smsConsent) feeds ContactController.Submit directly, the
   `website` input is a honeypot that must stay hidden and unnamed-changed, and
   the reCAPTCHA widget is bound by id. Restructuring the markup risks breaking
   submission, spam filtering or consent capture in ways that wouldn't show up
   until a real lead was lost — so the markup is untouched and every change
   below is presentational.
   ========================================================================== */
.cta-section {
    position: relative; overflow: hidden;
    background: linear-gradient(125deg, #050F1F 0%, #071A33 48%, #0B3B73 100%);
    padding: clamp(72px, 8vw, 112px) 0;
}
.cta-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(660px circle at 12% 8%, rgba(24,191,232,.15), transparent 58%),
        radial-gradient(600px circle at 88% 92%, rgba(22,119,255,.15), transparent 58%);
}
.cta-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse 70% 70% at 25% 40%, #000 15%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 25% 40%, #000 15%, transparent 70%);
}
.cta-section > .container { position: relative; z-index: 1; }

.cta-section h2 { letter-spacing: -.03em !important; line-height: 1.13 !important; font-weight: 800 !important; }
.cta-section .section-label {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    padding: .4rem .9rem; border-radius: 6px;
    font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}

/* Benefit list — check chips rather than plain icons. */
.cta-section .d-flex.align-items-center.gap-3 > div:first-child {
    border-radius: 8px !important;
    background: rgba(24,191,232,.14) !important;
    border: 1px solid rgba(24,191,232,.28);
}

/* ── Form panel ──────────────────────────────────────────────────────── */
.cta-form {
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;                       /* larger radius: major container */
    padding: clamp(1.6rem, 3vw, 2.4rem);
    backdrop-filter: blur(16px);
    box-shadow: 0 34px 70px -32px rgba(0,0,0,.7);
}
.cta-form > h3, .cta-form > .h5, .cta-form > div:first-child {
    letter-spacing: -.018em;
}

.cta-section .form-label,
.cta-form label:not(.form-check-label) {
    font-size: .755rem !important; font-weight: 650 !important;
    letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.62) !important;
    margin-bottom: .4rem !important;
}

.cta-section .form-control,
.cta-section .form-select {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-radius: 9px !important;
    padding: .78rem .95rem !important;
    font-size: .9rem !important;
    transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.cta-section .form-control::placeholder { color: rgba(255,255,255,.38) !important; }
.cta-section .form-control:focus,
.cta-section .form-select:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(24,191,232,.65) !important;
    box-shadow: 0 0 0 4px rgba(24,191,232,.15) !important;
    color: #fff !important;
}
/* Native select dropdowns render dark-on-dark on some platforms otherwise. */
.cta-section .form-select option { background: #0B1D33; color: #fff; }

.cta-section .form-check-input {
    background-color: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.3);
}
.cta-section .form-check-input:checked { background-color: #1677FF; border-color: #1677FF; }
.cta-section .form-check-input:focus { box-shadow: 0 0 0 3px rgba(24,191,232,.25); }
.cta-section .form-check-label,
.cta-section label.form-check-label { color: rgba(255,255,255,.62); line-height: 1.6; }

/* Submit — the single highest-priority action on the page. */
.cta-section .btn-gold {
    background: linear-gradient(120deg, #F59E0B 0%, #F0731A 55%, #EF4444 100%) !important;
    border: none !important; border-radius: 10px !important;
    font-weight: 700 !important; font-size: .97rem !important;
    letter-spacing: -.005em;
    box-shadow: 0 14px 32px -12px rgba(240,115,26,.8);
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease;
}
.cta-section .btn-gold::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -85%; width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg); transition: left .65s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.cta-section .btn-gold:hover::after { left: 135%; }
.cta-section .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px -12px rgba(240,115,26,.92);
}

.cta-section a { color: #7CD4EE; }
.cta-section a:hover { color: #A8E4F7; }
.cta-section .form-control:focus-visible,
.cta-section .btn-gold:focus-visible { outline: 2px solid #18BFE8; outline-offset: 3px; }

@media (max-width: 575.98px) {
    .cta-form { padding: 1.3rem; border-radius: 14px; }
    .cta-section .form-control, .cta-section .form-select { font-size: 16px !important; } /* stops iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce) {
    .cta-section .btn-gold:hover { transform: none; }
    .cta-section .btn-gold::after { display: none; }
}

/* ============================================================================
   SECTION 7B — LOOP SUITE
   ----------------------------------------------------------------------------
   Deliberately dark, immediately after the light "Our Products" section, so
   it reads as a distinct product family rather than more of the same list.
   Reuses the same card anatomy (chip icon, name, description, actions) as
   .prod-card for consistency, restyled for a dark surface under new class
   names so nothing here can be overridden by .prod-* rules or vice versa.
   ========================================================================== */
.loop-v2 {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #050F1F 0%, #071A33 55%, #0B3B73 100%);
    padding: clamp(64px, 7.5vw, 96px) 0;
}
.loop-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(620px circle at 12% 0%, rgba(24,191,232,.14), transparent 60%),
        radial-gradient(560px circle at 92% 100%, rgba(22,119,255,.14), transparent 60%);
}
.loop-v2 > .container { position: relative; z-index: 1; }

.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.loop-card {
    --accent: #18BFE8;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px; overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1),
                border-color .3s ease, background .3s ease;
}
.loop--social { --accent: #18BFE8; }
.loop--seo    { --accent: #1677FF; }
.loop--ads    { --accent: #F59E0B; }
.loop--dev    { --accent: #8B7CFF; }

.loop-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 30px 58px -28px rgba(0,0,0,.5);
}

.loop-visual {
    height: 92px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.loop-chip {
    width: 52px; height: 52px; border-radius: 13px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 1.25rem;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.loop-card:hover .loop-chip { transform: translateY(-3px) scale(1.07); }

.loop-body { padding: 1.4rem 1.4rem 0; flex: 1; }
.loop-name {
    font-size: 1.08rem; font-weight: 750; letter-spacing: -.018em;
    color: #fff; margin: 0 0 .5rem;
}
.loop-desc { font-size: .85rem; line-height: 1.65; color: rgba(255,255,255,.62); margin: 0 0 .8rem; }
.loop-domain {
    display: inline-block; font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .74rem; color: var(--accent);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    padding: .2rem .6rem; border-radius: 6px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.loop-actions { display: flex; gap: .6rem; padding: 1.2rem 1.4rem 1.4rem; }
.loop-btn-primary, .loop-btn-ghost {
    flex: 1; text-align: center; text-decoration: none;
    padding: .62rem .9rem; border-radius: 8px;
    min-height: 42px; font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;
}
.loop-btn-primary {
    background: var(--accent); color: #071A33; border: 1px solid transparent;
}
.loop-btn-primary:hover { color: #071A33; transform: translateY(-2px); filter: brightness(1.08); }
.loop-btn-primary i { font-size: .7rem; }
.loop-btn-ghost {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); color: #fff;
}
.loop-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }

@media (max-width: 1199.98px) {
    .loop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .loop-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}
.loop-btn-primary:focus-visible, .loop-btn-ghost:focus-visible {
    outline: 2px solid #18BFE8; outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .loop-card:hover, .loop-btn-primary:hover, .loop-btn-ghost:hover { transform: none; }
    .loop-card:hover .loop-chip { transform: none; }
}

/* ============================================================================
   HOMEPAGE UNIFIED HERO THEME
   Extends the hero's deep-navy grid, luminous cyan accents and glass surfaces
   through every public homepage section. Content and conversion behavior stay
   untouched; this layer only creates one coherent visual story.
   ========================================================================== */
:root {
    --home-ink: #f7fbff;
    --home-muted: #9fb3c9;
    --home-line: rgba(134, 184, 232, .16);
    --home-panel: rgba(12, 35, 63, .74);
    --home-panel-strong: rgba(9, 28, 52, .94);
    --home-blue: #1677ff;
    --home-cyan: #28c7f3;
}

body:has(.hero-v2) {
    background: #061426;
    color: var(--home-ink);
}

body:has(.hero-v2) main {
    overflow: hidden;
    background:
        radial-gradient(900px circle at 8% 18%, rgba(22,119,255,.13), transparent 58%),
        radial-gradient(760px circle at 94% 52%, rgba(40,199,243,.09), transparent 58%),
        #061426;
}

body:has(.hero-v2) main > section:not(.hero-v2) {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    border-top: 1px solid var(--home-line);
}

body:has(.hero-v2) main > section:not(.hero-v2)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(93,153,211,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93,153,211,.055) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

body:has(.hero-v2) .eyebrow,
body:has(.hero-v2) .section-label,
body:has(.hero-v2) .svc-cat {
    color: #4bd8ff !important;
}

body:has(.hero-v2) .trust-heading,
body:has(.hero-v2) .partners-title,
body:has(.hero-v2) .svc-title,
body:has(.hero-v2) .cap-title,
body:has(.hero-v2) .prod-title,
body:has(.hero-v2) .about-heading,
body:has(.hero-v2) .reviews-section .section-title {
    color: var(--home-ink) !important;
    text-shadow: 0 12px 38px rgba(0,0,0,.24);
}

body:has(.hero-v2) .trust-body,
body:has(.hero-v2) .partners-sub,
body:has(.hero-v2) .svc-sub,
body:has(.hero-v2) .cap-sub,
body:has(.hero-v2) .prod-sub,
body:has(.hero-v2) .about-desc,
body:has(.hero-v2) .reviews-section .section-subtitle {
    color: var(--home-muted) !important;
}

/* Header: a compact glass command bar that belongs to the hero. */
body:has(.hero-v2) .navbar-s4 {
    background: rgba(4, 17, 33, .76) !important;
    border-bottom: 1px solid rgba(135,190,238,.14);
    backdrop-filter: blur(20px) saturate(1.25);
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
}
body:has(.hero-v2) .navbar-s4.scrolled {
    background: rgba(4, 17, 33, .94) !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.3);
}
body:has(.hero-v2) .navbar-s4 .navbar-brand {
    position: relative;
    display: block;
    width: 170px;
    min-width: 170px;
    height: 64px;
    padding: 0;
    overflow: hidden;
}
body:has(.hero-v2) .navbar-s4 .navbar-brand img,
body:has(.hero-v2) .navbar-s4 .brand-logo {
    position: absolute;
    top: -50px;
    left: 0;
    width: 170px !important;
    height: 170px !important;
    max-width: none;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 18px rgba(40,199,243,.12));
}

/* Intro and partner ecosystem become dark editorial/glass bands. */
.trust-intro {
    background:
        radial-gradient(620px circle at 78% 42%, rgba(40,199,243,.08), transparent 65%),
        #07182d;
}
.trust-body strong { color: #f7fbff; }
.trust-body a { color: #8fe6ff; border-color: rgba(75,216,255,.35); }
.trust-body a:hover { color: #fff; border-color: #4bd8ff; }
.trust-pills { border-color: var(--home-line); }
.trust-pills li { color: #c8d9e9; }
.trust-pills i { color: #4bd8ff; }

.partners-strip {
    background:
        radial-gradient(700px circle at 50% 120%, rgba(22,119,255,.13), transparent 62%),
        #061426;
}
.partners-rail,
.cap-grid {
    background: var(--home-line);
    border-color: var(--home-line);
    box-shadow: 0 34px 90px -50px rgba(0,0,0,.88);
}
.partner-item,
.partner-link {
    background: rgba(10,31,57,.82);
}
a.partner-link:hover { background: rgba(18,50,86,.92); }
.partner-logo {
    box-sizing: border-box;
    width: 170px !important;
    height: 72px !important;
    max-width: calc(100% - 12px) !important;
    max-height: 72px !important;
    padding: 10px 15px;
    border: 1px solid rgba(203, 219, 235, .82);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    object-fit: contain;
    filter: none !important;
    opacity: 1;
    box-shadow: 0 8px 22px -16px rgba(0,0,0,.75);
}
.partner-item:nth-child(5) .partner-logo {
    padding: 5px 30px;
}
a.partner-link:hover .partner-logo {
    filter: none !important;
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 12px 28px -17px rgba(40,199,243,.68);
}
.partner-name { color: #aabed2; }
a.partner-link:hover .partner-name { color: #fff; }
.partner-initials {
    background: rgba(22,119,255,.13);
    border-color: rgba(75,216,255,.2);
    color: #bdefff;
}

/* Services and capabilities: luminous glass panels on the same grid plane. */
.svc-v2 {
    background:
        radial-gradient(740px circle at 8% 8%, rgba(22,119,255,.1), transparent 62%),
        #08192e;
}
.svc-panel,
.cap-item {
    background: linear-gradient(145deg, rgba(15,43,75,.92), rgba(8,28,52,.92));
    border-color: rgba(122,179,230,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.svc-panel:hover,
.cap-item:hover {
    background: linear-gradient(145deg, rgba(20,55,94,.96), rgba(9,34,64,.96));
    border-color: rgba(75,216,255,.34);
    box-shadow: 0 28px 70px -32px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.06);
}
.svc-num { -webkit-text-stroke-color: rgba(106,170,226,.42); }
.svc-panel--alt .svc-num { -webkit-text-stroke-color: rgba(75,216,255,.46); }
.svc-panel-title,
.cap-item-title { color: #f4f9ff; }
.svc-panel-desc,
.cap-item-desc { color: #9fb3c9; }
.svc-list { border-color: var(--home-line); }
.svc-list li { color: #c3d2e2; }
.svc-list li::before { box-shadow: 0 0 14px rgba(40,199,243,.75); }

.cap-v2 {
    background:
        radial-gradient(720px circle at 92% 30%, rgba(40,199,243,.085), transparent 62%),
        #061426;
}
.cap-icon { color: #50d9ff; }
.cap-banner {
    border: 1px solid rgba(75,216,255,.2);
    background:
        linear-gradient(120deg, rgba(12,42,76,.96), rgba(8,30,56,.96)),
        #071a33;
    box-shadow: 0 30px 75px -42px rgba(0,0,0,.9);
}

/* Metrics remain the visual punctuation mark, now with evidence context. */
.proof-v2 {
    border-block: 1px solid rgba(75,216,255,.2) !important;
    background: linear-gradient(120deg, #04101e 0%, #092645 50%, #073662 100%) !important;
}
.proof-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin: 1.8rem auto 0;
    color: rgba(220,238,255,.64);
    font-size: .78rem;
    letter-spacing: .02em;
}
.proof-note i { color: #50d9ff; }

/* Product cards retain their identifying accent but use the shared dark shell. */
.prod-v2 {
    background:
        radial-gradient(760px circle at 50% -10%, rgba(22,119,255,.14), transparent 62%),
        #08192e;
}
.prod-card {
    background: linear-gradient(155deg, rgba(15,43,75,.96), rgba(7,25,47,.98));
    border-color: rgba(122,179,230,.18);
    box-shadow: 0 25px 70px -42px rgba(0,0,0,.85);
}
.prod-card:hover { border-color: rgba(75,216,255,.28); box-shadow: 0 34px 78px -34px rgba(0,0,0,.9); }
.prod-name { color: #f5faff; }
.prod-desc { color: #9fb3c9; }
.prod-features { border-color: var(--home-line); }
.prod-features li { color: #c4d3e2; }
.prod-btn-ghost { background: rgba(255,255,255,.035); border-color: rgba(157,196,230,.2); color: #c6d7e8; }
.prod-btn-ghost:hover { color: #fff; border-color: rgba(75,216,255,.42); background: rgba(75,216,255,.08); }

/* Product polish: consistent geometry, clearer type and calmer accent colour. */
body:has(.hero-v2) .prod-card,
body:has(.hero-v2) .loop-card {
    border-color: rgba(124, 181, 232, .24);
    box-shadow: 0 24px 62px -42px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.045);
}
body:has(.hero-v2) .prod-card:hover,
body:has(.hero-v2) .loop-card:hover {
    border-color: color-mix(in srgb, var(--accent) 58%, rgba(255,255,255,.22));
    box-shadow: 0 34px 78px -35px rgba(0,0,0,.95), 0 0 38px -24px var(--accent);
}
body:has(.hero-v2) .prod-card .prod-visual { height: 122px; }
body:has(.hero-v2) .prod-name,
body:has(.hero-v2) .loop-name { letter-spacing: -.025em; }
body:has(.hero-v2) .prod-desc,
body:has(.hero-v2) .loop-desc { color: #b4c5d7; }
body:has(.hero-v2) .prod-features li { color: #d0dcea; }
body:has(.hero-v2) .prod-btn-primary,
body:has(.hero-v2) .prod-btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
body:has(.hero-v2) .loop-visual {
    height: 106px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.035)),
        rgba(255,255,255,.018) 72%);
}
body:has(.hero-v2) .prod-card .prod-chip,
body:has(.hero-v2) .loop-card .loop-chip {
    display: flex;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
}
body:has(.hero-v2) .prod-card .prod-chip {
    width: 104px;
    height: 104px;
}
body:has(.hero-v2) .loop-card .loop-chip {
    width: 88px;
    height: 88px;
}
body:has(.hero-v2) .prod-chip img,
body:has(.hero-v2) .loop-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .32));
    user-select: none;
    pointer-events: none;
}
body:has(.hero-v2) .prod-v2.products-combined {
    padding-block: clamp(64px, 6vw, 86px);
}
body:has(.hero-v2) .products-combined .prod-head {
    margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
body:has(.hero-v2) .products-suite-divider {
    position: relative;
    margin: clamp(2rem, 3.5vw, 2.8rem) 0 1.25rem;
    padding-top: 1.4rem;
    text-align: center;
    border-top: 1px solid rgba(75,216,255,.16);
}
body:has(.hero-v2) .products-suite-divider span {
    display: block;
    margin-bottom: .35rem;
    color: #4bd8ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
}
body:has(.hero-v2) .products-suite-divider h3 {
    margin: 0 0 .3rem;
    color: var(--home-ink);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -.025em;
}
body:has(.hero-v2) .products-suite-divider p {
    margin: 0;
    color: var(--home-muted);
    font-size: .94rem;
}
body:has(.hero-v2) .products-combined .loop-grid {
    margin: 0;
}
body:has(.hero-v2) .prod-card .prod-motif { display: flex; }
body:has(.hero-v2) .loop-domain {
    color: color-mix(in srgb, var(--accent) 82%, #fff);
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.12));
    background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.035));
}

/* Company video and testimonials share the cinematic treatment. */
.about-v2 {
    background:
        radial-gradient(620px circle at 82% 50%, rgba(40,199,243,.1), transparent 62%),
        #061426;
}
.about-points { border-color: var(--home-line); }
.about-points li { color: #c5d4e3; }
.about-points i { background: rgba(40,199,243,.12); border-color: rgba(75,216,255,.2); color: #50d9ff; }
.about-video {
    border: 1px solid rgba(75,216,255,.2);
    box-shadow: 0 38px 90px -36px rgba(0,0,0,.9), 0 0 55px rgba(22,119,255,.1);
}

.reviews-section {
    background:
        radial-gradient(700px circle at 12% 70%, rgba(22,119,255,.1), transparent 64%),
        #08192e;
}

/* Verified Google review snapshot. The source link remains visible on every
   card so excerpts can be checked against the public Business Profile. */
.google-reviews-v2 {
    padding: clamp(72px, 8vw, 104px) 0;
    background:
        radial-gradient(circle at 86% 14%, rgba(22,119,255,.16), transparent 32%),
        linear-gradient(180deg, #07192f 0%, #061426 100%);
    border-block: 1px solid rgba(91,168,255,.16);
}
.google-reviews-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.google-reviews-head > div { max-width: 720px; }
.google-reviews-head .section-label { display: inline-flex; align-items: center; gap: .5rem; color: #65dcfa; }
.google-reviews-head h2 { margin: .75rem 0 .65rem; color: #f6f9ff; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 900; }
.google-reviews-head p { margin: 0; color: #aebfd2; line-height: 1.7; }
.google-rating-card { display: flex; align-items: center; gap: .8rem; min-width: 250px; padding: 1rem 1.15rem; border: 1px solid rgba(91,168,255,.24); border-radius: 17px; background: rgba(15,45,79,.72); text-decoration: none; box-shadow: 0 18px 50px rgba(0,0,0,.17); }
.google-rating-score { color: #fff; font-size: 2rem; font-weight: 900; letter-spacing: -.04em; }
.google-rating-card > span:nth-child(2) { display: grid; }
.google-rating-stars { color: #fbbc04; font-size: .9rem; letter-spacing: .08em; }
.google-rating-card small { color: #b7c7d9; font-size: .75rem; }
.google-rating-card > i { margin-left: auto; color: #65dcfa; }
.google-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.google-review-card { display: flex; flex-direction: column; min-height: 260px; padding: 1.4rem; border: 1px solid rgba(91,168,255,.2); border-radius: 20px; background: linear-gradient(145deg, rgba(19,52,89,.92), rgba(8,29,54,.96)); box-shadow: 0 22px 60px rgba(0,0,0,.16); transition: transform .25s ease, border-color .25s ease; }
.google-review-card:hover { transform: translateY(-4px); border-color: rgba(101,220,250,.45); }
.google-review-top { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }
.google-review-avatar { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 2px solid rgba(101,220,250,.5); border-radius: 50%; background: #fff; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.google-review-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.google-review-avatar-fallback { place-items: center; width: 100%; height: 100%; color: #061426; background: linear-gradient(135deg, #65dcfa, #4f8cff); font-size: .78rem; font-weight: 900; }
.google-review-avatar-fallback:not([hidden]) { display: grid; }
.google-review-top h3 { margin: 0 0 .12rem; color: #f6f9ff; font-size: .96rem; font-weight: 800; }
.google-review-top > div > span { color: #8fa7bf; font-size: .75rem; }
.google-review-top > i { color: #fff; font-size: 1.05rem; }
.google-review-card blockquote { margin: 1.4rem 0 1.3rem; color: #d9e4ef; font-size: 1rem; line-height: 1.7; font-style: normal; }
.google-review-card > a { margin-top: auto; color: #65dcfa; font-size: .82rem; font-weight: 750; text-decoration: none; }
.google-review-card > a i { margin-left: .25rem; font-size: .72rem; }
.google-reviews-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; color: #8fa7bf; font-size: .82rem; }
.google-reviews-foot span i { color: #34d399; margin-right: .35rem; }
.google-reviews-foot a { color: #65dcfa; font-weight: 750; text-decoration: none; }
@media (max-width: 991.98px) { .google-reviews-head { align-items: start; flex-direction: column; } .google-review-grid { grid-template-columns: 1fr; } .google-rating-card { width: 100%; } }
@media (max-width: 575.98px) { .google-reviews-foot { align-items: start; flex-direction: column; } .google-review-card { min-height: auto; } }
@media (prefers-reduced-motion: reduce) { .google-review-card { transition: none; } .google-review-card:hover { transform: none; } }
.reviews-section .review-card {
    background: linear-gradient(145deg, rgba(15,43,75,.94), rgba(8,28,52,.96));
    border-color: rgba(122,179,230,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.reviews-section .review-card::before { color: rgba(79,170,255,.1); }
.reviews-section .review-card:hover { border-color: rgba(75,216,255,.3); box-shadow: 0 30px 70px -34px rgba(0,0,0,.9); }
.reviews-section .review-text { color: #c6d5e4; }
.reviews-section .review-author { border-color: var(--home-line); }
.reviews-section .review-author-name { color: #f5faff; }
.reviews-section .review-platform { color: #8fa8bf; }
.reviews-section .btn-outline-secondary { background: rgba(255,255,255,.035); border-color: rgba(157,196,230,.2); color: #bed0e1; }
.reviews-section .btn-outline-secondary:hover { background: rgba(75,216,255,.08); border-color: rgba(75,216,255,.4); color: #fff; }
.review-proof {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
    color: #8fa8bf;
    font-size: .78rem;
}
.review-proof i { color: #50d9ff; }

/* Conversion section and footer finish the same continuous scene. */
.cta-section {
    border-top-color: rgba(75,216,255,.22) !important;
    background: linear-gradient(125deg, #030d19 0%, #071d36 46%, #073a68 100%) !important;
}
.cta-form { background: rgba(7,25,47,.78); border-color: rgba(105,184,244,.22); }

body:has(.hero-v2) footer {
    position: relative;
    background:
        radial-gradient(680px circle at 12% 0%, rgba(22,119,255,.14), transparent 60%),
        #030c17 !important;
    border-top: 1px solid rgba(75,216,255,.18);
}
body:has(.hero-v2) footer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(93,153,211,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93,153,211,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000, transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
}
body:has(.hero-v2) footer > * { position: relative; z-index: 1; }
body:has(.hero-v2) footer img {
    width: 175px !important;
    height: 76px !important;
    max-width: 100%;
    height: auto !important;
    object-fit: fill !important;
    object-position: left center;
}
.brand-clarifier {
    display: none !important;
    align-items: center;
    gap: .48rem;
    margin-top: .85rem;
    width: fit-content;
    max-width: 320px;
    padding: .48rem .7rem;
    border: 1px solid rgba(75,216,255,.18);
    border-radius: 7px;
    background: rgba(75,216,255,.055);
    color: #9fb9d0;
    font-size: .69rem;
    line-height: 1.45;
    white-space: normal;
}
.brand-clarifier i { color: #4bd8ff; }

@media (max-width: 991.98px) {
    body:has(.hero-v2) .navbar-s4 .navbar-brand { width: 160px; min-width: 160px; height: 60px; }
    body:has(.hero-v2) .navbar-s4 .navbar-brand img,
    body:has(.hero-v2) .navbar-s4 .brand-logo { top: -47px; width: 160px !important; height: 160px !important; max-width: none; }
}
@media (max-width: 575.98px) {
    body:has(.hero-v2) main > section:not(.hero-v2)::after { background-size: 38px 38px; }
    body:has(.hero-v2) .navbar-s4 .navbar-brand img,
    body:has(.hero-v2) .navbar-s4 .brand-logo { top: -43px; width: 148px !important; height: 148px !important; max-width: none; }
    body:has(.hero-v2) .navbar-s4 .navbar-brand { width: 148px; min-width: 148px; height: 56px; }
    body:has(.hero-v2) footer img { width: 160px !important; height: 70px !important; }
    .brand-clarifier { max-width: 100%; }
    .proof-note { text-align: center; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    body:has(.hero-v2) .svc-panel,
    body:has(.hero-v2) .cap-item,
    body:has(.hero-v2) .prod-card,
    body:has(.hero-v2) .review-card { transition: none !important; }
}
/* ============================================================================
   Software4.net — Blog premium layer
   ----------------------------------------------------------------------------
   Covers /Blog (listing) and /Blog/{slug} (post). Shares the palette used
   across the redesigned pages: #071A33, #0B3B73, #1677FF, #18BFE8.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.blog-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(112px, 13vw, 164px) 0 clamp(60px, 7vw, 88px);
}
.blog-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
}
.blog-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 50% 0%, rgba(24,191,232,.15), transparent 62%);
}
.blog-hero > .container { position: relative; z-index: 2; }
.blog-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.blog-hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    padding: .4rem .9rem; border-radius: 6px;
    font-size: .71rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.blog-hero-title {
    margin: 1.3rem 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800; line-height: 1.08; letter-spacing: -.032em; color: #fff;
}
.blog-hero-sub {
    font-size: clamp(.97rem, 1.1vw, 1.08rem);
    line-height: 1.72; color: rgba(255,255,255,.68);
    max-width: 34em; margin: 0 auto;
}

.blog-body { padding: clamp(56px, 6.5vw, 84px) 0; background: #F7F9FC; }

/* ── Search ──────────────────────────────────────────────────────────── */
.blog-search { position: relative; margin-bottom: 1.75rem; }
.blog-search i {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: #94A3B8; font-size: .9rem; pointer-events: none;
}
.blog-search-input {
    width: 100%; padding: .95rem 1.1rem .95rem 2.85rem;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
    font-size: .95rem; color: #071A33;
    transition: border-color .24s ease, box-shadow .24s ease;
}
.blog-search-input::placeholder { color: #94A3B8; }
.blog-search-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}

/* ── Shared meta row ─────────────────────────────────────────────────── */
.blog-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.blog-cat {
    background: rgba(22,119,255,.09); color: #1677FF;
    padding: .24rem .7rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.blog-date { color: #94A3B8; font-size: .78rem; }

/* ── Featured post ───────────────────────────────────────────────────── */
.blog-featured {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    overflow: hidden; margin-bottom: 1.5rem;
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-featured:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 28px 54px -26px rgba(7,26,51,.26);
}
.blog-featured-media {
    position: relative; display: block; height: 280px;
    /* `contain`, not `cover`. Several of these article images are generated
       artwork with the headline baked into the picture, and cover crops the
       sides — which sliced the first character off the title in the featured
       card. contain shows the whole image; the tinted panel behind it fills
       whatever letterboxing that leaves. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none;
}
.blog-featured-media.no-img { background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%); }
/* Scrim only where it's needed — over the fallback gradient. Across a real
   image it dulled the artwork and tinted the letterbox bars. */
.blog-featured-media.no-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,26,51,.1) 0%, rgba(7,26,51,.45) 100%);
}
.blog-featured-tag {
    position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
    /* Solid rather than translucent: with the scrim gone it may now sit over
       a light area of the artwork, where white-on-white would vanish. */
    background: #071A33;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 6px 18px -8px rgba(7,26,51,.8);
    color: #fff; padding: .3rem .8rem; border-radius: 6px;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.blog-featured-body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.blog-featured-title { font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.25; margin: 0 0 .85rem; }
.blog-featured-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-featured-title a:hover { color: #1677FF; }
.blog-featured-excerpt {
    font-size: .94rem; line-height: 1.8; color: #64748B; margin: 0 0 1.4rem;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-read-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .72rem 1.4rem; border-radius: 8px;
    font-size: .86rem; font-weight: 650; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-read-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22,119,255,.92); }
.blog-read-btn i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-read-btn:hover i { transform: translateX(3px); }

/* ── Post grid ───────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.blog-library-bar {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.65rem 0 1rem; padding: .9rem 1rem;
    border: 1px solid rgba(101,183,244,.2); border-radius: 13px;
    background: linear-gradient(135deg, rgba(14,43,74,.94), rgba(8,29,53,.94));
}
.blog-library-count { margin: 0; color: #bed1e5; font-size: .86rem; font-weight: 700; }
.blog-library-count::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .55rem;
    border-radius: 50%; background: #36d3f4; box-shadow: 0 0 13px rgba(54,211,244,.8);
}
.blog-pagination {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    margin: 2.25rem 0 .5rem; padding: 1rem;
    border: 1px solid rgba(101,183,244,.2); border-radius: 14px;
    background: linear-gradient(135deg, rgba(14,43,74,.94), rgba(8,29,53,.94));
}
.blog-page-numbers { display: flex; align-items: center; justify-content: center; gap: .42rem; flex-wrap: wrap; }
.blog-page-number, .blog-page-nav {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-width: 42px; min-height: 42px; padding: .6rem .78rem;
    border: 1px solid rgba(111,188,244,.24); border-radius: 9px;
    color: #c5d8eb; background: rgba(8,28,51,.78);
    font-size: .8rem; font-weight: 800; cursor: pointer;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-page-number:hover, a.blog-page-nav:hover {
    transform: translateY(-2px); color: #fff; border-color: rgba(65,211,247,.52); background: rgba(22,119,255,.18);
}
.blog-page-number.is-current {
    color: #fff; border-color: transparent; background: linear-gradient(105deg, #087eff, #18bfe8);
    box-shadow: 0 12px 25px -15px #087eff;
}
.blog-page-nav[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.blog-page-number:focus-visible, .blog-page-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.blog-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1),
                box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-card:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 24px 46px -24px rgba(7,26,51,.24);
}
.blog-card-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: 168px;
    /* Same reasoning as the featured card: these article images frequently
       carry their headline in the artwork, so contain avoids cropping words
       off the edge. The tinted panel fills any letterboxing. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none; color: rgba(255,255,255,.65); font-size: 1.9rem;
}
/* Icon fallback rather than an emoji — emoji render inconsistently across
   platforms and read as placeholder art on a professional site. */
.blog-card-media.no-img { background: linear-gradient(135deg, #0B3B73 0%, #1677FF 120%); }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-title { font-size: 1.02rem; font-weight: 750; letter-spacing: -.018em; line-height: 1.32; margin: 0 0 .55rem; }
.blog-card-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-card-title a:hover { color: #1677FF; }
.blog-card-excerpt {
    font-size: .84rem; line-height: 1.7; color: #64748B; margin: 0 0 1.1rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: auto;
    color: #1677FF; font-weight: 650; font-size: .84rem; text-decoration: none;
}
.blog-card-link i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-card-link:hover i { transform: translateX(3px); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blog-side {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    padding: 1.35rem; margin-bottom: 1.25rem;
}
.blog-side-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: #94A3B8; margin: 0 0 1rem;
}
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li + li { border-top: 1px solid #F1F5F9; }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .72rem .2rem; text-decoration: none;
    transition: padding-left .24s ease;
}
.blog-cats a:hover { padding-left: .5rem; }
.blog-cat-name { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 600; color: #334155; }
.blog-cat-name i { color: #1677FF; width: 16px; font-size: .82rem; }
.blog-cats a:hover .blog-cat-name { color: #1677FF; }
.blog-cat-count {
    background: #F1F5F9; color: #64748B;
    padding: .16rem .55rem; border-radius: 6px;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.blog-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.blog-tag {
    background: #F1F5F9; color: #475569;
    padding: .34rem .8rem; border-radius: 7px;
    font-size: .77rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.blog-tag:hover { background: #1677FF; color: #fff; transform: translateY(-1px); }

/* Newsletter card */
.blog-news {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.7rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.blog-news-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(380px circle at 50% 0%, rgba(24,191,232,.24), transparent 62%);
}
.blog-news-inner { position: relative; z-index: 1; }
.blog-news-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.05rem; margin-bottom: .9rem;
    backdrop-filter: blur(8px);
}
.blog-news-title { font-size: 1.05rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.blog-news-sub { font-size: .82rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.2rem; }
.blog-news-input {
    width: 100%; text-align: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 9px; padding: .68rem .9rem;
    font-size: .875rem; margin-bottom: .6rem;
    transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.blog-news-input::placeholder { color: rgba(255,255,255,.45); }
.blog-news-input:focus {
    outline: none; background: rgba(255,255,255,.12);
    border-color: rgba(24,191,232,.6); box-shadow: 0 0 0 4px rgba(24,191,232,.14);
}
.blog-news-btn {
    width: 100%; border: none; border-radius: 9px; cursor: pointer;
    background: linear-gradient(120deg, #F59E0B, #F0731A);
    color: #fff; padding: .72rem; font-size: .87rem; font-weight: 700;
    box-shadow: 0 10px 24px -10px rgba(240,115,26,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(240,115,26,.92); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured-media { height: 208px; }
    .blog-pagination { align-items: stretch; flex-direction: column; }
    .blog-page-nav { width: 100%; }
}
@media (max-width: 575.98px) {
    .blog-search-input { font-size: 16px; }   /* stops iOS zoom-on-focus */
    .blog-news-input { font-size: 16px; }
}

.blog-search-input:focus-visible, .blog-read-btn:focus-visible,
.blog-tag:focus-visible, .blog-news-btn:focus-visible {
    outline: 2px solid #1677FF; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .blog-featured:hover, .blog-card:hover, .blog-read-btn:hover,
    .blog-tag:hover, .blog-news-btn:hover { transform: none; }
    .blog-cats a:hover { padding-left: .2rem; }
}

/* ============================================================================
   BLOG POST (/Blog/{slug})
   ========================================================================== */
.post-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(108px, 12vw, 152px) 0 clamp(48px, 6vw, 72px);
}
.post-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
}
.post-hero > .container { position: relative; z-index: 2; }
.post-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.post-hero-cat {
    display: inline-block;
    background: rgba(24,191,232,.16);
    border: 1px solid rgba(24,191,232,.38);
    color: #A8E4F7;
    padding: .34rem .85rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.post-hero-title {
    margin: 1.2rem 0 1.1rem;
    font-size: clamp(1.8rem, 3.9vw, 3rem);
    font-weight: 800; line-height: 1.16; letter-spacing: -.03em;
    color: #fff; text-wrap: balance;
}
.post-hero-meta {
    display: flex; align-items: center; justify-content: center;
    gap: .75rem; flex-wrap: wrap;
    font-size: .82rem; color: rgba(255,255,255,.62);
}
.post-hero-meta i { margin-right: .4rem; color: rgba(255,255,255,.45); }
.post-hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* ── Share row ───────────────────────────────────────────────────────── */
.post-share {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 12px;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.post-share-label {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #94A3B8;
}
.post-share-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.post-share-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #F1F5F9; border: 1px solid transparent; color: #475569;
    padding: .48rem .95rem; border-radius: 8px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.post-share-btn:hover { background: #1677FF; color: #fff; transform: translateY(-2px); }

.post-back {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #475569; font-size: .87rem; font-weight: 650; text-decoration: none;
    padding: .6rem 1.15rem; border: 1px solid #DCE5F0; border-radius: 8px;
    transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.post-back:hover { color: #1677FF; border-color: #1677FF; transform: translateX(-3px); }

/* ── Sidebar CTA ─────────────────────────────────────────────────────── */
.post-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.8rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.post-cta-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at 50% 0%, rgba(24,191,232,.26), transparent 62%);
}
.post-cta-inner { position: relative; z-index: 1; }
.post-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 13px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.1rem; margin-bottom: .95rem;
    backdrop-filter: blur(8px);
}
.post-cta-title { font-size: 1.1rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.post-cta-sub { font-size: .83rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.25rem; }
.post-cta-btn {
    display: inline-block; background: #fff; color: #0B3B73;
    padding: .66rem 1.4rem; border-radius: 8px;
    font-size: .855rem; font-weight: 650; text-decoration: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.post-cta-btn:hover { color: #0B3B73; background: #F2F7FF; transform: translateY(-2px); }

/* Sidebar newsletter (light variant of the listing card) */
.post-news-sub { font-size: .82rem; line-height: 1.6; color: #64748B; margin: 0 0 1rem; }
.post-news-input {
    width: 100%; background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 9px; padding: .66rem .9rem; font-size: .875rem;
    color: #071A33; margin-bottom: .55rem;
    transition: border-color .22s ease, box-shadow .22s ease;
}
.post-news-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12); background: #fff;
}
.post-news-btn {
    width: 100%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .68rem; border-radius: 9px; font-size: .86rem; font-weight: 650;
    box-shadow: 0 10px 22px -10px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.post-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(22,119,255,.92); }

.blog-side-title i { color: #18BFE8; margin-right: .3rem; }

@media (max-width: 575.98px) {
    .post-news-input { font-size: 16px; }
    .post-share { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .post-share-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .post-share-btn:hover, .post-cta-btn:hover, .post-news-btn:hover { transform: none; }
    .post-back:hover { transform: none; }
}

/* ============================================================================
   FULL-WIDTH LAYOUT (sidebar removed)
   ----------------------------------------------------------------------------
   The right column is gone on both blog pages. Content now spans the
   container, but capped at a comfortable reading measure — a blog running
   edge to edge at 1200px gives very long line lengths, which hurts
   readability far more than the extra width helps.
   ========================================================================== */
.blog-main { max-width: 1280px; margin: 0 auto; }

/* With the extra room, cards go three-up on wide screens. */
.blog-main .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) { .blog-main .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .blog-main .blog-grid { grid-template-columns: 1fr; } }

/* Featured post becomes a side-by-side split at desktop width. */
@media (min-width: 992px) {
    .blog-main .blog-featured {
        display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
    }
    .blog-main .blog-featured-media { height: 100%; min-height: 340px; }
    .blog-main .blog-featured-body { display: flex; flex-direction: column; justify-content: center; }
}

/* Article page. The 74ch cap that used to sit on the running text has been
   removed — inside an already-constrained panel it produced visible empty
   gutters on both sides of the paragraphs. The panel width alone now sets
   the measure, and slightly looser line-height keeps longer lines readable. */
.post-main { max-width: 1240px; margin: 0 auto; }
.post-main .blog-content { line-height: 1.9; }

/* ── Newsletter band (listing) ───────────────────────────────────────── */
.blog-news-band {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%);
    padding: clamp(2.6rem, 5vw, 4rem) 0;
}
.blog-news-band-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 25% 0%, rgba(24,191,232,.2), transparent 62%);
}
.blog-news-band > .container { position: relative; z-index: 1; }
.blog-news-band-inner {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    max-width: 1000px; margin: 0 auto;
}
.blog-news-band-copy .blog-news-icon { margin-bottom: .8rem; }
.blog-news-band-copy .blog-news-title { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: .4rem; }
.blog-news-band-copy .blog-news-sub { margin-bottom: 0; }
.blog-news-band-form { display: flex; gap: .6rem; }
.blog-news-band-form .blog-news-input { margin-bottom: 0; text-align: left; flex: 1; }
.blog-news-band-form .blog-news-btn { width: auto; white-space: nowrap; padding: .72rem 1.5rem; }

@media (max-width: 767.98px) {
    .blog-news-band-inner { grid-template-columns: 1fr; text-align: center; }
    .blog-news-band-form { flex-direction: column; }
    .blog-news-band-form .blog-news-btn { width: 100%; }
}

/* ── Post footer conversion blocks ───────────────────────────────────── */
.post-foot { padding: 0 0 clamp(3rem, 6vw, 5rem); background: #F7F9FC; }
.post-foot-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.25rem; max-width: 1240px; margin: 0 auto;
}
.post-foot .post-cta { margin-bottom: 0; }
.post-news-card {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    padding: 1.8rem 1.4rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 767.98px) {
    .post-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   ARTICLE CONTENT SAFETY (author-supplied HTML)
   ----------------------------------------------------------------------------
   .blog-content is rendered with @Html.Raw from CMS/API content, so its
   markup isn't controlled here — a pasted wide table, a data URI image, a
   long code sample or an unbroken URL can all push the page wider than the
   viewport and cause horizontal scroll on mobile. These are containment
   guards for that content, not styling preferences.
   ========================================================================== */
.blog-content img {
    max-width: 100%; height: auto;
    border-radius: 10px;
}
/* Tables scroll inside their own box rather than stretching the page. */
.blog-content table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9rem;
}
.blog-content th, .blog-content td {
    padding: .65rem .8rem; border: 1px solid #E8EEF6; text-align: left;
    white-space: nowrap;
}
.blog-content th { background: #F7F9FC; color: #071A33; font-weight: 700; }

.blog-content pre {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #071A33; color: #E2E8F0;
    padding: 1rem 1.15rem; border-radius: 10px;
    font-size: .84rem; line-height: 1.6; margin: 0 0 1.4rem;
}
.blog-content code { word-break: break-word; }
.blog-content pre code { word-break: normal; }

/* A long unbroken URL in body copy is a classic source of mobile overflow. */
.blog-content a, .blog-content p { overflow-wrap: anywhere; word-break: break-word; }

.blog-content iframe,
.blog-content video { max-width: 100%; }

/* Same guards for the legal pages, which also render CMS HTML via Html.Raw. */
.legal-doc img { max-width: 100%; height: auto; }
.legal-doc table { display: block; overflow-x: auto; max-width: 100%; }
.legal-doc a, .legal-doc p { overflow-wrap: anywhere; }

/* Dark editorial treatment shared with the homepage. */
body.public-inner-page .blog-body { background: transparent; }
body.public-inner-page .blog-search-input,
body.public-inner-page .blog-featured,
body.public-inner-page .blog-card,
body.public-inner-page .blog-side,
body.public-inner-page .blog-news {
    background: rgba(13,34,61,.84);
    border-color: rgba(117,181,231,.18);
    color: #edf6ff;
    box-shadow: 0 26px 62px -38px rgba(0,0,0,.95);
}
body.public-inner-page .blog-search-input { color: #edf6ff; }
body.public-inner-page .blog-search-input::placeholder { color: #7288a3; }
body.public-inner-page .blog-featured-title a,
body.public-inner-page .blog-card-title a,
body.public-inner-page .blog-side-title,
body.public-inner-page .blog-cat-name { color: #f5f9ff; }
body.public-inner-page .blog-featured-excerpt,
body.public-inner-page .blog-card-excerpt,
body.public-inner-page .blog-date { color: #a9bad0; }
body.public-inner-page .blog-cats li + li { border-color: rgba(117,181,231,.13); }
body.public-inner-page .blog-cat-count,
body.public-inner-page .blog-tag {
    background: rgba(117,181,231,.1);
    color: #bcd0e8;
}
body.public-inner-page .blog-featured-media,
body.public-inner-page .blog-card-media { background-color: rgba(5,18,34,.78); }
body.public-inner-page .blog-content,
body.public-inner-page .blog-post-body {
    color: #b7c7db;
}
body.public-inner-page .blog-content h1,
body.public-inner-page .blog-content h2,
body.public-inner-page .blog-content h3,
body.public-inner-page .blog-content h4 { color: #f5f9ff; }
body.public-inner-page .blog-content th,
body.public-inner-page .blog-content td { border-color: rgba(117,181,231,.18); }
body.public-inner-page .blog-content th { background: rgba(117,181,231,.08); color: #edf6ff; }
body.public-inner-page .blog-content td {
    color: #c9daea;
    background: rgba(4,23,43,.38);
}
body.public-inner-page .blog-content tr:hover td {
    color: #eef8ff;
    background: rgba(33,101,157,.18);
}

/* ============================================================================
   BLOG 10/10 POLISH — editorial artwork, balanced rhythm and interaction
   ========================================================================== */
body.public-inner-page .blog-hero { min-height: 410px; display: grid; place-items: center; }
.blog-trust-row {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: .65rem 1.15rem; margin-top: 1.35rem;
    color: #a9bdd2; font-size: .78rem; font-weight: 650;
}
.blog-trust-row span { display: inline-flex; align-items: center; gap: .42rem; }
.blog-trust-row i { color: #2fd0f5; font-size: .72rem; }

body.public-inner-page .blog-body { padding: clamp(3rem, 5vw, 5rem) 0; }
body.public-inner-page .blog-search {
    position: relative; margin-bottom: 1.5rem;
}
body.public-inner-page .blog-search-input {
    height: 58px; padding-left: 3.1rem; border-radius: 14px;
    background: linear-gradient(135deg, rgba(15,42,73,.92), rgba(9,30,55,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 44px -32px rgba(0,0,0,.9);
}
body.public-inner-page .blog-search i { color: #36cef4; }

body.public-inner-page .blog-featured,
body.public-inner-page .blog-card {
    border-color: rgba(101,183,244,.22);
    background: linear-gradient(145deg, rgba(15,43,76,.96), rgba(8,28,52,.96));
    box-shadow: 0 22px 60px -38px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.035);
}
body.public-inner-page .blog-featured:hover,
body.public-inner-page .blog-card:hover {
    transform: translateY(-7px);
    border-color: rgba(47,208,245,.52);
    box-shadow: 0 30px 70px -34px rgba(0,126,255,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
body.public-inner-page .blog-featured { border-radius: 20px; margin-bottom: 1.4rem; }
body.public-inner-page .blog-card { border-radius: 18px; }
body.public-inner-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }

/* Code-native illustrations replace missing raster assets and stay crisp. */
.blog-editorial-art {
    isolation: isolate; overflow: hidden; min-height: 230px;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(36,198,255,.2), transparent 29%),
        linear-gradient(135deg, #06182d, #0a3464) !important;
    background-size: auto !important;
}
.blog-editorial-art--erp {
    background-image: radial-gradient(circle at 50% 48%, rgba(97,113,255,.25), transparent 31%),
                      linear-gradient(135deg, #09162e, #23346d) !important;
}
.blog-editorial-art--seo {
    background-image: radial-gradient(circle at 50% 48%, rgba(23,214,186,.22), transparent 31%),
                      linear-gradient(135deg, #061c2d, #07556b) !important;
}
.blog-art-grid {
    position: absolute; inset: 0; z-index: -1; opacity: .42;
    background-image: linear-gradient(rgba(98,183,248,.15) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(98,183,248,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, #000, transparent 76%);
}
.blog-art-orbit {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 230px; aspect-ratio: 1; border: 1px solid rgba(83,201,255,.24);
    border-radius: 50%; animation: blog-orbit 18s linear infinite;
}
.blog-art-orbit::before,
.blog-art-orbit::after {
    content: ''; position: absolute; width: 8px; aspect-ratio: 1;
    border-radius: 50%; background: #2fd0f5; box-shadow: 0 0 18px #2fd0f5;
}
.blog-art-orbit::before { left: 15%; top: 13%; }
.blog-art-orbit::after { right: 7%; bottom: 26%; width: 5px; }
.blog-art-orbit--two { width: 330px; opacity: .58; animation-duration: 26s; animation-direction: reverse; }
.blog-art-node {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    display: grid; place-items: center; width: 106px; aspect-ratio: 1;
    border: 1px solid rgba(152,224,255,.54); border-radius: 28px;
    color: #fff; font-size: 2.25rem;
    background: linear-gradient(145deg, rgba(35,148,255,.92), rgba(18,78,185,.9));
    box-shadow: 0 25px 55px rgba(0,82,205,.44), inset 0 1px 0 rgba(255,255,255,.32);
    transform: rotate(-4deg);
}
.blog-editorial-art--erp .blog-art-node { background: linear-gradient(145deg, #6d6df6, #344bd1); }
.blog-editorial-art--seo .blog-art-node { background: linear-gradient(145deg, #18c9bd, #087f9b); }
.blog-art-node i { transform: rotate(4deg); filter: drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.blog-art-kicker {
    position: absolute; left: 50%; bottom: 1.15rem; translate: -50% 0;
    color: rgba(224,246,255,.82); font-size: .65rem; font-weight: 800;
    letter-spacing: .18em; white-space: nowrap;
}
@keyframes blog-orbit { to { transform: rotate(360deg); } }

.blog-featured-tag {
    border-radius: 999px; padding: .38rem .8rem;
    background: rgba(4,22,42,.8); border-color: rgba(98,205,255,.35);
    backdrop-filter: blur(10px);
}
body.public-inner-page .blog-featured-title a,
body.public-inner-page .blog-card-title a { color: #f4f9ff; }
body.public-inner-page .blog-featured-title a:hover,
body.public-inner-page .blog-card-title a:hover { color: #4bd9f9; }
body.public-inner-page .blog-cat {
    color: #59dcfb; background: rgba(34,188,255,.11);
    border: 1px solid rgba(57,201,255,.14); border-radius: 999px;
}
.blog-read-btn {
    justify-content: center; border-radius: 10px;
    background: linear-gradient(105deg, #087eff, #1bc5ed);
}
body.public-inner-page .blog-card-link { color: #4bd9f9; }

body.public-inner-page .blog-news-band {
    border-top: 1px solid rgba(99,187,248,.18);
    border-bottom: 1px solid rgba(99,187,248,.18);
    background: linear-gradient(120deg, #06182d, #0a3564);
}
.blog-news-btn {
    border: 0 !important; color: #fff !important;
    background: linear-gradient(105deg, #087eff, #1bc5ed) !important;
    box-shadow: 0 13px 30px -12px rgba(23,188,239,.72) !important;
}
.blog-news-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

@media (max-width: 991.98px) {
    body.public-inner-page .blog-hero { min-height: 360px; }
    body.public-inner-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    body.public-inner-page .blog-hero { min-height: 330px; }
    body.public-inner-page .blog-grid { grid-template-columns: 1fr; }
    .blog-trust-row { gap: .55rem .8rem; }
    .blog-art-orbit { width: 190px; }
    .blog-art-orbit--two { width: 270px; }
    .blog-art-node { width: 88px; border-radius: 23px; font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-art-orbit { animation: none; }
}

/* Long-form content components generated by the editorial pipeline. */
.post-toc, .post-insight, .post-cta, .post-faq, .post-comments {
    border: 1px solid rgba(99,187,248,.2); border-radius: 18px;
    background: linear-gradient(145deg, rgba(15,43,76,.88), rgba(8,28,52,.9));
}
.post-toc { padding: 1.35rem 1.5rem; margin: 1.8rem 0 2.2rem; }
.post-toc-title, .post-faq-eyebrow, .post-cta-eyebrow, .post-comments-eyebrow {
    margin: 0 0 .75rem; color: #44d5f6; font-size: .7rem; font-weight: 800; letter-spacing: .13em;
}
.post-toc ol { columns: 2; gap: 2rem; margin: 0; padding-left: 1.25rem; }
.post-toc li { break-inside: avoid; margin: .42rem 0; color: #9fe9fa; }
.post-toc li::marker { color: #78dff7; font-weight: 800; }
.post-toc a { color: #d7eafa; text-decoration: none; text-underline-offset: .18em; }
.post-toc a:hover { color: #44d5f6; }
.post-table-wrap {
    width: min(100%, 860px);
    max-width: 860px;
    overflow-x: auto;
    margin: 1.5rem auto 2rem;
    border-radius: 14px;
}
.post-steps li { margin-bottom: .85rem; }
.post-insight { padding: 1.25rem 1.4rem; border-left: 3px solid #33cdf2; margin: 1.7rem 0; color: #c9dced; }
.post-cta { padding: clamp(1.5rem,4vw,2.5rem); margin: 2.5rem 0; text-align: center; }
.post-cta h2 { margin-top: 0 !important; }
.post-faq { padding: clamp(1.4rem,3vw,2rem); margin: 2.5rem 0; }
.post-faq details { border-top: 1px solid rgba(99,187,248,.16); padding: 1rem 0; }
.post-faq summary { color: #f3f8ff; font-weight: 700; cursor: pointer; }
.post-faq details p { margin: .75rem 0 0; }

.post-comments { max-width: 1240px; margin: 2.5rem auto 4rem; padding: clamp(1.4rem,4vw,2.4rem); color: #b9cce0; }
.post-comments-head h2 { color: #f4f9ff; margin: 0 0 .55rem; }
.post-comments-list { margin: 1.75rem 0; }
.post-comments-empty { color: #829ab2; margin: 0; }
.post-comment { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; padding: 1rem 0; border-top: 1px solid rgba(99,187,248,.14); }
.post-comment-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; background: linear-gradient(135deg,#087eff,#1bc5ed); }
.post-comment-meta { display: flex; justify-content: space-between; gap: 1rem; color: #edf6ff; }
.post-comment-meta time { color: #7890aa; font-size: .8rem; }
.post-comment p { margin: .35rem 0 0; overflow-wrap: anywhere; }
.post-comment-form { padding-top: 1.5rem; border-top: 1px solid rgba(99,187,248,.18); }
.post-comment-grid { display: grid; grid-template-columns: 1fr; }
.post-comment-form label { display: grid; gap: .45rem; margin-bottom: 1rem; color: #dceaff; font-weight: 650; font-size: .85rem; }
.post-comment-form input, .post-comment-form textarea { width: 100%; color: #edf7ff; background: rgba(3,18,34,.72); border: 1px solid rgba(117,181,231,.24); border-radius: 11px; padding: .85rem 1rem; }
.post-comment-form input:focus, .post-comment-form textarea:focus { outline: none; border-color: #32cef3; box-shadow: 0 0 0 4px rgba(50,206,243,.1); }
.post-comment-honeypot { position: absolute !important; left: -10000px !important; }
.post-comment-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.post-comment-status { margin: 0; color: #9fb5cb; font-size: .85rem; }
.post-comment-submit { border: 0; border-radius: 10px; padding: .8rem 1.2rem; color: #fff; font-weight: 750; background: linear-gradient(105deg,#087eff,#1bc5ed); }
.post-comment-submit:disabled {
    opacity: 1;
    color: rgba(255,255,255,.76);
    background: linear-gradient(105deg, rgba(8,126,255,.55), rgba(27,197,237,.5));
    border: 1px solid rgba(126,217,247,.18);
    cursor: not-allowed;
}
.post-recaptcha {
    min-height: 78px;
    max-width: 100%;
    overflow: hidden;
}
.post-recaptcha iframe { max-width: 100%; }
.post-recaptcha.is-fallback {
    min-height: 0;
    padding: .9rem 1rem;
    color: #bdd2e6;
    background: rgba(3,18,34,.58);
    border: 1px solid rgba(117,181,231,.22);
    border-radius: 11px;
}
.post-recaptcha.is-fallback > * { display: none !important; }
.post-recaptcha.is-fallback::before {
    content: attr(data-message);
    display: block;
    font-size: .84rem;
    line-height: 1.5;
}
@media (max-width: 767.98px) {
    .post-toc ol { columns: 1; }
    .post-comment-actions { align-items: stretch; flex-direction: column; }
    .post-comment-submit { width: 100%; }
}

/* ── Article reading experience ─────────────────────────────────────────
   The recovered Razor view wraps every article in Bootstrap's white .card.
   Article typography is intentionally light, so the wrapper must use the
   same dark editorial surface as the rest of the public site. */
body.public-inner-page .post-main > article.card {
    overflow: hidden;
    color: #c5d5e7;
    background: linear-gradient(155deg, rgba(15,43,76,.98), rgba(6,24,45,.99)) !important;
    border: 1px solid rgba(105,190,248,.25) !important;
    border-radius: 22px !important;
    box-shadow: 0 34px 85px -48px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.045);
}
body.public-inner-page .post-main > article.card > .card-body {
    padding: clamp(1.35rem, 4vw, 3rem) !important;
}
body.public-inner-page .post-main .blog-content {
    color: #c5d5e7;
    font-size: 1.04rem;
    line-height: 1.82;
}
body.public-inner-page .post-main .blog-content > p,
body.public-inner-page .post-main .blog-content > h2,
body.public-inner-page .post-main .blog-content > h3,
body.public-inner-page .post-main .blog-content > ul,
body.public-inner-page .post-main .blog-content > ol:not(.post-toc ol) {
    width: min(100%, 860px);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
body.public-inner-page .post-main .blog-content > h2 {
    margin-top: 2.6rem;
    margin-bottom: .85rem;
    color: #f5f9ff;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.025em;
}
body.public-inner-page .post-main .blog-content > p { color: #c5d5e7; }
body.public-inner-page .post-main .blog-content > ul,
body.public-inner-page .post-main .blog-content > ol { color: #c5d5e7; }
body.public-inner-page .post-main .blog-content > ul li::marker,
body.public-inner-page .post-main .blog-content > ol li::marker { color: #3bd4f5; }
.post-main .blog-content .post-lead {
    color: #dce9f6 !important;
    font-size: clamp(1.08rem, 1.8vw, 1.28rem);
    line-height: 1.72;
}
.post-main .card-body > img,
.post-main .blog-content img {
    display: block;
    width: 100%;
    max-height: 580px;
    object-fit: cover;
    border: 1px solid rgba(111,198,251,.2);
    box-shadow: 0 28px 60px -38px rgba(0,0,0,.9);
}
.post-editorial-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem 1rem;
    align-items: start;
    margin: 1.4rem 0 1.8rem;
    padding: 1rem 1.15rem;
    color: #a9bfd5;
    background: rgba(52,202,243,.065);
    border: 1px solid rgba(76,206,244,.19);
    border-radius: 13px;
}
.post-editorial-note span {
    color: #45d7f7;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
    white-space: nowrap;
}
.post-editorial-note p { margin: 0; font-size: .84rem; line-height: 1.55; }
.post-use-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.35rem 0 1.6rem;
}
.post-use-cases article {
    min-width: 0;
    padding: 1.15rem;
    color: #d8e6f4;
    background: linear-gradient(145deg, rgba(22,62,104,.68), rgba(9,34,61,.82));
    border: 1px solid rgba(100,190,248,.19);
    border-radius: 14px;
}
.post-use-cases span { color: #44d5f6; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.post-use-cases p { margin: .65rem 0 0; color: #d8e6f4; font-size: .92rem; line-height: 1.58; }
.post-related {
    margin: 2.5rem 0 .5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(99,187,248,.17);
}
.post-related h2 { margin: 0 0 1.2rem !important; color: #f5f9ff; }
.post-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.post-related a {
    display: flex;
    flex-direction: column;
    min-height: 168px;
    padding: 1.1rem;
    color: #f4f9ff;
    text-decoration: none;
    background: linear-gradient(145deg, rgba(17,54,94,.85), rgba(8,31,57,.92));
    border: 1px solid rgba(99,187,248,.2);
    border-radius: 14px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-related a:hover {
    transform: translateY(-3px);
    border-color: rgba(63,211,245,.5);
    box-shadow: 0 20px 42px -30px rgba(32,186,239,.72);
}
.post-related a span { color: #42d2f3; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.post-related a strong { margin: .55rem 0 1rem; line-height: 1.38; }
.post-related a small { margin-top: auto; color: #83def4; font-weight: 750; }
.post-sources {
    margin: 2rem 0 .5rem;
    padding: 1.35rem 1.5rem;
    color: #a9bfd5;
    background: rgba(4,21,39,.46);
    border: 1px solid rgba(99,187,248,.16);
    border-radius: 14px;
}
.post-sources h2 { margin: 0 0 .5rem !important; color: #f5f9ff; font-size: 1.25rem !important; }
.post-sources > p:not(.post-faq-eyebrow) { margin: 0 0 .9rem; color: #a9bfd5; font-size: .88rem; }
.post-sources ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.post-sources a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .7rem;
    color: #9cecff;
    text-decoration: none;
    font-size: .8rem; font-weight: 700;
    background: rgba(48,194,237,.07);
    border: 1px solid rgba(73,208,245,.18);
    border-radius: 8px;
}
.post-sources a:hover { color: #fff; border-color: rgba(73,208,245,.48); }
body.public-inner-page .post-comments {
    max-width: 1040px;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.post-comment-form textarea { min-height: 130px; resize: vertical; }

@media (max-width: 767.98px) {
    body.public-inner-page .post-main > article.card { border-radius: 16px !important; }
    body.public-inner-page .post-main > article.card > .card-body { padding: 1.15rem !important; }
    body.public-inner-page .post-main .blog-content { font-size: 1rem; line-height: 1.76; }
    body.public-inner-page .post-main .blog-content > h2 { margin-top: 2.15rem; font-size: 1.5rem; }
    .post-editorial-note { grid-template-columns: 1fr; }
    .post-use-cases, .post-related > div { grid-template-columns: 1fr; }
    .post-use-cases article, .post-related a { min-height: 0; }
}

/* ── Final article component consistency ─────────────────────────────── */
/* The compiled controller increments this raw counter for every request,
   including refreshes and automated checks. Do not present it as readership. */
body.public-inner-page .post-hero-meta > span:last-child,
body.public-inner-page .post-hero-meta > .sep:nth-last-child(2) { display: none; }

body.public-inner-page .post-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .72rem 1.35rem;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(105deg, #087eff, #1bc5ed) !important;
    border: 1px solid rgba(145,230,255,.34) !important;
    border-radius: 10px;
    box-shadow: 0 15px 32px -16px rgba(24,191,232,.82);
}
body.public-inner-page .post-cta-btn:hover {
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

body.public-inner-page .post-share {
    color: #c5d5e7;
    background: linear-gradient(145deg, rgba(15,43,76,.92), rgba(7,27,50,.94));
    border-color: rgba(99,187,248,.2);
    box-shadow: 0 20px 50px -38px rgba(0,0,0,.95);
}
body.public-inner-page .post-share-label { color: #9fb6cc; }
body.public-inner-page .post-share-btn {
    color: #bfefff;
    background: rgba(56,197,239,.08);
    border-color: rgba(72,207,245,.18);
}
body.public-inner-page .post-share-btn:hover { color: #fff; background: #1677ff; }
body.public-inner-page .post-back { color: #8ce7fb; }
body.public-inner-page .post-back:hover { color: #fff; }

/* Keep the server-rendered Bootstrap tag badges inside the article palette. */
body.public-inner-page .post-main .badge.bg-light.text-dark.border {
    color: #ccefff !important;
    background: rgba(48, 194, 237, .08) !important;
    border-color: rgba(73, 208, 245, .22) !important;
    font-weight: 700;
}
body.public-inner-page .post-main .text-muted { color: #9fb6cc !important; }

body.public-inner-page .post-foot {
    background: transparent;
    border-top: 1px solid rgba(75,216,255,.1);
}
body.public-inner-page .post-foot .post-cta,
body.public-inner-page .post-news-card {
    color: #c5d5e7;
    background: linear-gradient(145deg, rgba(15,43,76,.9), rgba(7,27,50,.94));
    border-color: rgba(99,187,248,.2);
    box-shadow: 0 24px 58px -42px rgba(0,0,0,.96);
}
body.public-inner-page .post-news-card h2,
body.public-inner-page .post-news-card h3,
body.public-inner-page .post-news-card .post-news-title { color: #f5f9ff; }
body.public-inner-page .post-news-sub { color: #a9bad0; }
body.public-inner-page .post-news-input {
    color: #edf7ff;
    background: rgba(3,18,34,.72);
    border-color: rgba(117,181,231,.24);
}
body.public-inner-page .post-news-input::placeholder { color: #7890aa; }

.post-worked-example {
    margin: 1.75rem 0 2.1rem;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    color: #c8d9e9;
    background: linear-gradient(145deg, rgba(35,83,126,.5), rgba(11,39,68,.76));
    border: 1px solid rgba(91,203,244,.22);
    border-left: 3px solid #39d0f2;
    border-radius: 15px;
}
.post-worked-example > h3 { margin: 0 0 1rem; color: #f5f9ff; font-size: 1.25rem; }
.post-worked-example > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.post-worked-example > div > p { margin: 0; padding: .9rem; background: rgba(4,22,41,.42); border-radius: 10px; }
.post-worked-example strong { display: block; margin-bottom: .35rem; color: #74e3fb; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.post-worked-example span { display: block; color: #c8d9e9; font-size: .86rem; line-height: 1.55; }

.post-author {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: center;
    margin: 1.4rem 0 .5rem;
    padding: 1.4rem 1.5rem;
    color: #b9cde0;
    background: linear-gradient(145deg, rgba(19,55,94,.76), rgba(7,28,52,.86));
    border: 1px solid rgba(99,187,248,.18);
    border-radius: 15px;
}
body.public-inner-page .post-main .blog-content .post-author img {
    width: 180px;
    height: 90px;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    border: 0;
    box-shadow: none;
}
.post-author h2 { margin: 0 0 .45rem !important; color: #f5f9ff; font-size: 1.35rem !important; }
.post-author > div > p:not(.post-faq-eyebrow) { margin: 0 0 .65rem; color: #b9cde0; font-size: .9rem; line-height: 1.6; }
.post-author a { color: #78e2f9; font-size: .84rem; font-weight: 750; text-decoration: none; }
.post-author a:hover { color: #fff; }

body.public-inner-page .post-comments { max-width: 960px; padding: clamp(1.3rem, 3vw, 2rem); }
body.public-inner-page .post-comments.is-empty .post-comments-list { margin: 1rem 0 1.25rem; }
body.public-inner-page .post-comments.is-empty .post-comment-form { padding-top: 1.15rem; }
body.public-inner-page .post-comment-form textarea { min-height: 108px; }

@media (max-width: 767.98px) {
    .post-worked-example > div { grid-template-columns: 1fr; }
    .post-author { grid-template-columns: 1fr; text-align: center; }
    body.public-inner-page .post-share { align-items: stretch; }
    body.public-inner-page .post-share-links { width: 100%; }
    body.public-inner-page .post-share-btn { flex: 1; justify-content: center; }
    body.public-inner-page #s4-chat-bubble {
        right: 10px !important; bottom: 10px !important;
        width: 48px !important; height: 48px !important;
    }
}