/* ================================================
   VyasTec, Dark Enterprise Theme
   Native logo colors · Tangerine accent from logo mark
   ================================================ */

:root {
    /* Microsoft D365 Blue Partner Theme */
    --logo-navy: #1B2437; /* Deep ink-blue for headings */
    --logo-crimson: #0078D4; /* Microsoft D365 Blue primary */
    --logo-crimson-hi: #005A9E; /* D365 blue darker for hover */
    --logo-blue: #0078D4;
    --logo-blue-hi: #005A9E;
    /* Light theme - cool tints */
    --bg: #FFFFFF;
    --bg-elev: #F3F6FA; /* Cool blue-tinted light surface */
    --bg-elev-2: #E8EEF6; /* Slightly deeper cool surface */
    --surface: #FFFFFF;
    --border: rgba(27, 36, 55, 0.08);
    --border-soft: rgba(27, 36, 55, 0.04);
    --border-hi: rgba(27, 36, 55, 0.14);
    /* Text - Blue-ink palette */
    --text: #1B2437; /* Deep blue-black for headings */
    --text-dim: #2F3E55; /* Body text, strong */
    --text-muted: #546480; /* Secondary text */
    --text-faint: #6B7F99; /* Labels, placeholders */
    /* Brand aliases */
    --navy: #1B2437;
    --navy-400: #3D4D65;
    --navy-300: #546480;
    --navy-soft: rgba(27, 36, 55, 0.06);
    --gold: var(--logo-crimson);
    --gold-hi: var(--logo-crimson-hi);
    --gold-soft: rgba(0, 120, 212, 0.08);
    --green: #16A34A;
    /* Legacy aliases - all mapped to D365 blue */
    --cyan: var(--logo-crimson);
    --cyan-glow: rgba(0, 120, 212, 0.08);
    --violet: var(--logo-crimson);
    --blue: var(--logo-crimson);
    --amber: var(--logo-crimson);
    /* Gradients - D365 blue centric */
    --grad-accent: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
    --grad-text: none;
    --grad-gold: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
    --grad-aurora: none;
    /* Fonts — Inter for everything, IBM Plex Mono for labels */
    --f-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --f-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --f-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    /* Transitions - Easing curve for luxury smooth animations */
    --transition-smooth: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    --container: 1440px;
    --h-nav: 68px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dim);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem);
    letter-spacing: -0.025em;
}

h3 {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

h4 {
    font-size: 1rem;
    font-weight: 600;
}

p {
    color: var(--text-dim);
}

.serif-italic {
    font-style: normal;
    font-weight: inherit;
    color: var(--logo-crimson);
}

.grad-text {
    color: var(--text);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.grad-accent-text {
    color: var(--logo-crimson);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.lead {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
    color: var(--text-dim);
    line-height: 1.65;
    max-width: 64ch;
    font-weight: 400;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--logo-crimson);
    text-transform: uppercase;
}

    .eyebrow::before {
        content: '';
        width: 5px;
        height: 5px;
        background: var(--logo-crimson);
        border-radius: 50%;
        flex-shrink: 0;
    }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 72px 0;
    position: relative;
}

.section-lg {
    padding: 96px 0;
    position: relative;
}

.section-sm {
    padding: 44px 0;
    position: relative;
}

.section-alt {
    background: linear-gradient(135deg, #F0F4F9 0%, #E8EEF6 100%);
}

hr.div {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 0;
}

/* HEADER */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 16, 30, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-smooth), box-shadow 0.25s ease, border-bottom 0.25s ease;
}

.nav {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    height: var(--h-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo on white pill, keeps original navy+orange readable on dark header */
.brand {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 38px;
    width: auto;
    display: block;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dim);
    border-radius: var(--r-sm);
    transition: color 0.15s, background 0.15s;
}

    .nav-link:hover {
        color: var(--text);
        background: rgba(27, 36, 55, 0.05);
    }

    .nav-link.active {
        color: var(--text);
    }

        .nav-link.active::after {
            content: '';
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: -1px;
            height: 2px;
            background: var(--logo-crimson);
            border-radius: 2px;
        }

.nav-caret {
    width: 10px;
    height: 10px;
    transition: transform 0.2s;
    opacity: 0.5;
}

/* Dark top header navbar overrides when not scrolled */
.site-header:not(.scrolled) .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

    .site-header:not(.scrolled) .nav-link:hover {
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .site-header:not(.scrolled) .nav-link.active {
        color: #FFFFFF !important;
    }

.site-header:not(.scrolled) .nav-caret {
    filter: brightness(0) invert(1);
}

.site-header:not(.scrolled) .nav-cta {
    color: #FFFFFF !important;
}

.site-header:not(.scrolled) .nav-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.site-header.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 20px rgba(10, 16, 30, 0.06);
}

    .site-header.scrolled .nav-link {
        color: var(--text-dim) !important;
    }

        .site-header.scrolled .nav-link:hover {
            color: var(--text) !important;
            background: rgba(27, 36, 55, 0.04) !important;
        }

    .site-header.scrolled .nav-caret {
        filter: none;
        opacity: 0.6;
    }

.nav-item.has-dropdown:hover .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    background: var(--bg-elev);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

    .dropdown.wide {
        min-width: 360px;
    }

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--text-dim);
    transition: background 0.12s, color 0.12s;
}

    .dropdown-link:hover {
        background: rgba(0, 120, 212, 0.08);
        color: var(--text);
    }

.dl-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
}

.dl-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.dropdown-group-label {
    padding: 10px 12px 4px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}




.nav-cta svg {
    width: 14px;
    height: 14px;
    color: #FFFFFF;
}

.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    color: var(--text);
}

    .nav-toggle svg {
        width: 22px;
        height: 22px;
    }

.mobile-nav {
    display: none;
}

@media (max-width: 1024px) {
    .nav-menu {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        width: 36px;
        height: 36px;
    }

        .nav-toggle svg {
            width: 20px;
            height: 20px;
        }

    .nav {
        height: 54px;
        padding: 0 16px;
        gap: 12px;
    }

    .brand-logo {
        height: 30px;
    }

    .mobile-nav {
        border-top: 1px solid var(--border);
        background: var(--bg-elev);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

        .mobile-nav.open {
            display: block;
            max-height: 80vh;
            overflow-y: auto;
        }

        .mobile-nav ul {
            list-style: none;
            padding: 16px 28px 24px;
        }

        .mobile-nav > ul > li {
            border-bottom: 1px solid var(--border-soft);
        }

        .mobile-nav a {
            display: block;
            padding: 14px 0;
            font-size: 1rem;
            color: var(--text);
        }

    .mobile-group {
        padding: 0 0 12px 12px;
        border-left: 2px solid var(--border);
    }

    .mobile-group-label {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-faint);
        padding: 14px 0 4px 12px;
    }

    .mobile-group a {
        padding: 8px 0 8px 12px;
        font-size: 0.9375rem;
        color: var(--text-muted);
    }

    .mobile-cta {
        display: block;
        margin-top: 20px;
        text-align: center;
        padding: 14px;
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #1B2437 100%);
        color: #FFFFFF !important;
        border-radius: var(--r-sm);
        font-weight: 600;
    }
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid transparent;
    white-space: nowrap;
}

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 120, 212, 0.25);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary, .btn-accent {
    background: #0078D4;
    color: #FFFFFF;
    border: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: background 0.15s ease,transform 0.15s ease,box-shadow 0.15s ease;
}

    .btn-primary:hover, .btn-accent:hover {
        background: #005A9E;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,120,212,0.3);
    }

.btn-secondary {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border-color: var(--border-hi);
}

    .btn-secondary:hover {
        border-color: #0078D4;
        background: rgba(0, 120, 212, 0.08);
    }

.btn-ghost {
    color: var(--logo-crimson);
    padding: 6px 0;
    font-weight: 500;
}

    .btn-ghost svg {
        transition: transform 0.2s;
    }

    .btn-ghost:hover {
        color: var(--logo-crimson-hi);
    }

        .btn-ghost:hover svg {
            transform: translateX(4px);
        }

.btn svg {
    width: 14px;
    height: 14px;
}

/* HERO */
.home-hero {
    position: relative;
    padding: 112px 0 104px;
    overflow: hidden;
    background: linear-gradient(135deg, #0E7490 0%, #3B82F6 25%, #6366F1 50%, #8B5CF6 75%, #06B6D4 100%);
}

    .home-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(255, 193, 7, 0.06) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .home-hero::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -15%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .home-hero .hero-grid {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 56px;
        align-items: center;
        position: relative;
        z-index: 2;
    }

@media (max-width: 1100px) {
    .home-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .home-hero .hero-visual {
        max-width: 540px;
        margin: 0 auto;
    }
}

/* === Animated dashboard mockup (right side of hero) === */
.hero-visual {
    position: relative;
    perspective: 1200px;
}

.dashboard-mock {
    position: relative;
    background: linear-gradient(155deg, rgba(243, 246, 250, 0.95) 0%, rgba(232, 238, 246, 0.95) 100%);
    border: 1px solid rgba(0, 120, 212, 0.15);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 120, 212, 0.06) inset;
    transform: rotateY(-8deg) rotateX(4deg);
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
    animation: dashFloat 8s ease-in-out infinite;
}

    .dashboard-mock:hover {
        transform: rotateY(-3deg) rotateX(2deg) translateY(-4px);
    }

@keyframes dashFloat {
    0%,100% {
        transform: rotateY(-8deg) rotateX(4deg) translateY(0);
    }

    50% {
        transform: rotateY(-8deg) rotateX(4deg) translateY(-8px);
    }
}

/* Browser-style top bar */
.dash-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid rgba(0, 120, 212, 0.12);
    margin-bottom: 16px;
}

    .dash-topbar .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(148,163,200,0.25);
    }

        .dash-topbar .dot:nth-child(1) {
            background: #FF5F57;
        }

        .dash-topbar .dot:nth-child(2) {
            background: #FEBC2E;
        }

        .dash-topbar .dot:nth-child(3) {
            background: #28C840;
        }

    .dash-topbar .url {
        margin-left: 14px;
        font-family: var(--f-mono);
        font-size: 0.7rem;
        color: var(--text-faint);
        letter-spacing: 0.02em;
    }

/* Header line: title + ms badge */
.dash-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

    .dash-head .title {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-dim);
        letter-spacing: 0.02em;
    }

    .dash-head .ms-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px;
        background: rgba(0, 120, 212, 0.12);
        border: 1px solid rgba(0, 120, 212, 0.3);
        border-radius: 4px;
        font-family: var(--f-mono);
        font-size: 0.65rem;
        color: #0078D4;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

        .dash-head .ms-badge svg {
            width: 9px;
            height: 9px;
        }

/* KPI row */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.dash-kpi {
    padding: 10px 11px;
    background: rgba(232, 238, 246, 0.6);
    border: 1px solid rgba(0, 120, 212, 0.10);
    border-radius: 8px;
}

    .dash-kpi .k-label {
        font-size: 0.6rem;
        color: var(--text-faint);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
    }

    .dash-kpi .k-val {
        font-family: var(--f-display);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.02em;
    }

    .dash-kpi .k-delta {
        font-family: var(--f-mono);
        font-size: 0.62rem;
        margin-top: 2px;
        color: #4ADE80;
    }

        .dash-kpi .k-delta.neg {
            color: #F87171;
        }

/* Chart area */
.dash-chart {
    position: relative;
    height: 110px;
    background: linear-gradient(180deg, rgba(232, 238, 246, 0.4) 0%, rgba(243, 246, 250, 0.6) 100%);
    border: 1px solid rgba(0, 120, 212, 0.08);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}

    .dash-chart svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .dash-chart .grid-line {
        stroke: rgba(0, 120, 212, 0.06);
        stroke-width: 1;
    }

    .dash-chart .area-fill {
        fill: url(#dashGrad);
        opacity: 0.6;
        animation: chartRise 1.4s cubic-bezier(0.16,1,0.3,1) 0.4s both;
        transform-origin: bottom;
    }

    .dash-chart .line-stroke {
        fill: none;
        stroke: url(#dashLine);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 600;
        stroke-dashoffset: 600;
        animation: chartDraw 1.8s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;
    }

@keyframes chartDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chartRise {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

.dash-chart .pulse-dot {
    fill: #4D7BFF;
    filter: drop-shadow(0 0 4px rgba(77,123,255,0.8));
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%,100% {
        r: 3;
        opacity: 1;
    }

    50% {
        r: 5;
        opacity: 0.6;
    }
}

/* Activity feed */
.dash-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    background: rgba(232, 238, 246, 0.5);
    border: 1px solid rgba(0, 120, 212, 0.08);
    border-radius: 6px;
    font-size: 0.7rem;
    opacity: 0;
    animation: rowSlideIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

    .dash-row:nth-child(1) {
        animation-delay: 0.6s;
    }

    .dash-row:nth-child(2) {
        animation-delay: 0.8s;
    }

    .dash-row:nth-child(3) {
        animation-delay: 1.0s;
    }

@keyframes rowSlideIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.dash-row .r-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.2), rgba(27, 36, 55, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-size: 0.55rem;
    font-weight: 700;
    color: #0078D4;
}

.dash-row .r-text {
    color: var(--text-dim);
    font-weight: 500;
}

    .dash-row .r-text strong {
        color: var(--text);
        font-weight: 600;
    }

.dash-row .r-amt {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: #4ADE80;
}

/* Floating label chips around the dashboard */
.float-chip {
    position: absolute;
    padding: 8px 12px;
    background: rgba(243, 246, 250, 0.95);
    border: 1px solid rgba(0, 120, 212, 0.25);
    border-radius: 100px;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
    white-space: nowrap;
    z-index: 3;
    opacity: 0;
    animation: chipIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}

    .float-chip .chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ADE80;
        box-shadow: 0 0 6px rgba(74,222,128,0.7);
    }

    .float-chip.cyan .chip-dot {
        background: #4D7BFF;
        box-shadow: 0 0 6px rgba(77,123,255,0.7);
    }

    .float-chip.red .chip-dot {
        background: #0078D4;
        box-shadow: 0 0 6px rgba(255,107,138,0.7);
    }

@keyframes chipIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.float-chip.top-left {
    top: -14px;
    left: -28px;
    animation-delay: 1.2s;
}

.float-chip.top-right {
    top: 60px;
    right: -36px;
    animation-delay: 1.4s;
}

.float-chip.bot-left {
    bottom: 30px;
    left: -42px;
    animation-delay: 1.6s;
}

@media (max-width: 1100px) {
    .float-chip {
        display: none;
    }
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-aurora);
    pointer-events: none;
}

.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(203,213,225,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(203,213,225,0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
    pointer-events: none;
    opacity: 0.5;
}

/* removed */ .hero-orb-old {
    position: absolute;
    top: -80px;
    right: -100px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at 30% 30%, rgba(200, 16, 46,0.22), rgba(74,111,165,0.12) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    animation: orbFloat 18s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes orbFloat {
    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(-40px, 60px) scale(1.08);
    }
}

.home-hero .container {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

    .hero-badge .dot {
        width: 7px;
        height: 7px;
        background: var(--green);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(16,185,129,0.6);
        animation: pulse 2s ease-in-out infinite;
    }

@keyframes pulse {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.hero-badge strong {
    color: var(--text);
    font-weight: 600;
}

.hero-badge .divider-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-faint);
}

/* Three capability pills (ISV · SI · AI) stacked across hero top */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #FFFFFF;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

    .cap-badge .dot {
        width: 7px;
        height: 7px;
        background: var(--green);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(16,185,129,0.6);
        animation: pulse 2s ease-in-out infinite;
    }

        .cap-badge .dot.blue {
            background: #4D7BFF;
            box-shadow: 0 0 8px rgba(77,123,255,0.6);
        }

        .cap-badge .dot.purple {
            background: #0078D4;
            box-shadow: 0 0 8px rgba(200,16,46,0.15);
        }

    .cap-badge .cap-sub {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 0.75rem;
        margin-left: 2px;
    }

@media (max-width: 640px) {
    .hero-badges {
        gap: 6px;
    }

    .cap-badge {
        font-size: 0.75rem;
        padding: 6px 10px 6px 10px;
    }

        .cap-badge .cap-sub {
            display: none;
        }
}

.home-hero h1 {
    max-width: 16ch;
    margin-bottom: 24px;
    color: #FFFFFF;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 700;
}

.home-hero .lead {
    font-size: 1.125rem;
    margin-bottom: 36px;
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.92);
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-strip {
    margin-top: 56px;
    padding: 24px 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) {
    .hero-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

.hero-strip .label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.hero-strip .val {
    font-family: var(--f-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
}

.hero-strip .val-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 6px;
}

@media (max-width: 760px) {
    .hero-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* INNER PAGE HERO */
.page-hero {
    position: relative;
    padding: 72px 0 60px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg);
}

    .page-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(200, 16, 46,0.08), transparent 60%), radial-gradient(ellipse 50% 70% at 20% 100%, rgba(74,111,165,0.06), transparent 60%);
        pointer-events: none;
    }

    .page-hero .container {
        position: relative;
        z-index: 2;
    }

    .page-hero .eyebrow {
        margin-bottom: 20px;
    }

    .page-hero h1 {
        margin-bottom: 20px;
        max-width: 22ch;
        color: var(--text);
    }

    .page-hero .lead {
        max-width: 62ch;
    }

.breadcrumb {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

    .breadcrumb a {
        color: var(--text-muted);
        transition: color 0.15s;
    }

        .breadcrumb a:hover {
            color: var(--logo-crimson);
        }

    .breadcrumb span {
        margin: 0 10px;
        opacity: 0.5;
    }

/* TRUST STRIP */

/* Lighter clients band so white logo pills stand out */
.clients-band {
    background: linear-gradient(135deg, #EBF1F8 0%, #E3EDF7 100%);
    border-top: 1px solid rgba(0, 120, 212, 0.12);
    border-bottom: 1px solid rgba(0, 120, 212, 0.12);
}

.trust-strip {
    padding: 36px 0;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trust-inner {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 32px;
}

.trust-label {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.45;
}

.trust-items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    opacity: 0;
    animation: trustFadeUp 0.7s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

    .trust-item:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
    }

    .trust-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .trust-item:nth-child(2) {
        animation-delay: 0.15s;
    }

    .trust-item:nth-child(3) {
        animation-delay: 0.25s;
    }

    .trust-item:nth-child(4) {
        animation-delay: 0.35s;
    }

    .trust-item:nth-child(5) {
        animation-delay: 0.45s;
    }

    .trust-item svg {
        width: 18px;
        height: 18px;
    }

/* Coloured icon pill, per-item brand-true tint */
.trust-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    isolation: isolate;
}

.trust-pill--cyan {
    background: rgba(6, 182, 212, 0.14);
    color: #06B6D4;
}

.trust-pill--ms {
    background: #ffffff;
    padding: 7px;
}

    .trust-pill--ms svg {
        width: 100% !important;
        height: 100% !important;
    }

.trust-pill--violet {
    background: rgba(200,16,46,0.15);
    color: #0078D4;
}

.trust-pill--green {
    background: rgba(16, 185, 129, 0.14);
    color: #10B981;
}

/* Subtle live-pulse on the AI pill */
.trust-pill--violet::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 11px;
    background: rgba(200,16,46,0.15);
    z-index: -1;
    animation: trustPulse 2.6s ease-in-out infinite;
}

@keyframes trustFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes trustPulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-item, .trust-pill--violet::after {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* Mobile breakpoints */
@media (max-width: 960px) {
    .trust-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .trust-label {
        text-align: center;
        max-width: none;
    }
}

@media (max-width: 900px) and (min-width: 641px) {
    .trust-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .trust-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .trust-item {
        padding: 10px 12px;
        font-size: 0.8125rem;
        gap: 10px;
    }

    .trust-pill {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

        .trust-pill svg {
            width: 16px;
            height: 16px;
        }
}

@media (max-width: 380px) {
    .trust-items {
        grid-template-columns: 1fr;
    }
}

/* SHOWCASE */
.showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

@media (max-width: 1000px) {
    .showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.sc-card {
    position: relative;
    padding: 32px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: var(--r-lg);
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(27, 36, 55, 0.05), 0 8px 24px -8px rgba(27, 36, 55, 0.04);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

    .sc-card:hover {
        background: rgba(0, 120, 212, 0.04);
        border-color: rgba(0, 120, 212, 0.4);
        transform: translateY(-4px);
        box-shadow: 0 24px 48px -12px rgba(0, 120, 212, 0.18), 0 1px 3px rgba(27, 36, 55, 0.08);
    }

        .sc-card:hover .sc-icon {
            color: #0078D4;
        }

/* Featured card keeps a visual highlight but matches size of siblings (no row-span) */
.sc-featured {
    background: linear-gradient(155deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
    border-color: var(--border-hi);
}

/* ==========================================
   FLAGSHIP CARD — permanent rich red gloss
   Only the first sc-featured (SPA & Chargeback)
   ========================================== */
.showcase .sc-card.sc-featured:first-child {
    background: linear-gradient( 145deg, #fff 0%, #fffafa 55%, rgba(200, 16, 46, 0.04) 100% ) !important;
    border: 1.5px solid rgba(200, 16, 46, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.12), 0 6px 22px -10px rgba(200, 16, 46, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
    /* Glossy sheen overlay */
    .showcase .sc-card.sc-featured:first-child::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 54%;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.0) 100% );
        pointer-events: none;
        z-index: 1;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
    /* Bold pink satin shine — hidden at rest, fades in on hover */
    .showcase .sc-card.sc-featured:first-child::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.0) 22%), conic-gradient(from 230deg at 50% 34%, rgba(240, 24, 48, 0.55) 0deg, rgba(248, 180, 195, 0.25) 70deg, rgba(255, 255, 255, 0.0) 140deg, rgba(216, 24, 64, 0.45) 250deg, rgba(248, 180, 195, 0.30) 320deg, rgba(240, 24, 48, 0.55) 360deg), radial-gradient(ellipse 120% 90% at 50% 28%, rgba(240, 24, 48, 0.42) 0%, rgba(240, 24, 48, 0.22) 45%, rgba(240, 24, 48, 0.30) 100%), linear-gradient(160deg, rgba(248, 200, 210, 0.5) 0%, rgba(240, 24, 48, 0.35) 100%);
        opacity: 0;
        transition: opacity 0.4s ease-out;
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

    /* Hover: shine fades in + lift + stronger red frame */
    .showcase .sc-card.sc-featured:first-child:hover {
        border-color: rgba(200, 16, 46, 0.8) !important;
        box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.28), 0 20px 52px -14px rgba(200, 16, 46, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
        transform: translateY(-4px);
    }

        .showcase .sc-card.sc-featured:first-child:hover::after {
            opacity: 1;
        }

    .showcase .sc-card.sc-featured:first-child > * {
        position: relative;
        z-index: 2;
    }

@media (prefers-reduced-motion: reduce) {
    .showcase .sc-card.sc-featured:first-child,
    .showcase .sc-card.sc-featured:first-child::after {
        transition: none !important;
    }

        .showcase .sc-card.sc-featured:first-child:hover {
            transform: none !important;
        }
}

.sc-tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--logo-crimson);
    padding: 4px 10px;
    border: 1px solid var(--logo-crimson);
    border-radius: 100px;
    margin-bottom: 20px;
    align-self: flex-start;
}

.sc-icon {
    width: 44px;
    height: 44px;
    color: var(--text-muted);
    margin-bottom: 24px;
    transition: color 0.3s;
}

    .sc-icon svg {
        width: 100%;
        height: 100%;
        stroke-width: 1.5;
    }

.sc-card h3 {
    margin-bottom: 12px;
    color: var(--text);
    font-size: 1.125rem;
}

.sc-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: 20px;
    flex: 1;
}

.sc-featured h3 {
    font-size: 1.1875rem;
}

.sc-featured p {
    color: var(--text-dim);
}

.sc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--logo-crimson);
    position: relative;
    z-index: 1;
}

    .sc-link svg {
        width: 14px;
        height: 14px;
        transition: transform 0.2s;
    }

.sc-card:hover .sc-link svg {
    transform: translateX(4px);
}

/* INDUSTRY GRID */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-elev);
}

@media (max-width: 900px) {
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.ind-cell {
    padding: 36px 32px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

    .ind-cell:hover {
        background: rgba(0, 120, 212, 0.08);
        transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

        .ind-cell:hover .ind-icon {
            color: #0078D4;
            transform: scale(1.08);
        }

        .ind-cell:hover .ind-arrow {
            opacity: 1;
            transform: translate(6px, -6px);
        }

@media (min-width: 901px) {
    .ind-cell:nth-child(4n) {
        border-right: 0;
    }

    .ind-cell:nth-child(n+5) {
        border-bottom: 0;
    }
}

@media (max-width: 900px) and (min-width: 541px) {
    .ind-cell:nth-child(2n) {
        border-right: 0;
    }

    .ind-cell:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

@media (max-width: 540px) {
    .ind-cell {
        border-right: 0;
    }

        .ind-cell:last-child {
            border-bottom: 0;
        }
}

.ind-icon {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    transition: color 0.25s;
}

    .ind-icon svg {
        stroke-width: 1.5;
    }

.ind-cell h3 {
    margin-top: 28px;
    margin-bottom: 8px;
    font-size: 1.125rem;
    color: var(--text);
}

.ind-cell p {
    font-size: 0.875rem;
    color: var(--text-muted);
    flex: 1;
}

.ind-arrow {
    position: absolute;
    top: 36px;
    right: 32px;
    color: var(--logo-crimson);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

    .ind-arrow svg {
        width: 18px;
        height: 18px;
    }

/* METRICS */
.metrics-block {
    position: relative;
    padding: 64px 48px;
    background: linear-gradient(155deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-xl);
    overflow: hidden;
}

    .metrics-block::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200, 16, 46,0.12), transparent 70%);
        pointer-events: none;
    }

    .metrics-block::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(74,111,165,0.15), transparent 70%);
        border-radius: 50%;
        filter: blur(40px);
    }

    .metrics-block > * {
        position: relative;
        z-index: 1;
    }

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 44px;
}

@media (max-width: 900px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.metric {
    padding-left: 20px;
    border-left: 2px solid #0078D4;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

    .metric:hover {
        background: rgba(0, 120, 212, 0.08) !important;
        padding-left: 24px;
        border-left-color: #005A9E;
        border-left-width: 3px;
    }

    .metric .num {
        display: block;
        font-family: var(--f-display);
        font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.04em;
        background: linear-gradient(135deg, #0078D4 0%, #F8FAFC 50%, #2B4EB0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    .metric .lbl {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--logo-crimson);
        margin-bottom: 8px;
    }

    .metric .desc {
        font-size: 0.9375rem;
        color: var(--text-dim);
        max-width: 24ch;
    }

@media (max-width: 700px) {
    .metrics-block {
        padding: 48px 28px;
    }
}

/* WHY VYAS */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.why-list {
    list-style: none;
}

.why-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}

    .why-item:first-child {
        padding-top: 0;
    }

    .why-item:last-child {
        border-bottom: 0;
    }

.why-num {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    color: var(--logo-blue-hi);
    padding-top: 4px;
}

.why-item h3 {
    margin-bottom: 8px;
    color: var(--text);
}

.why-item p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.sticky-side {
    position: sticky;
    top: 100px;
}

/* TESTIMONIAL */
.testimonial-box {
    position: relative;
    padding: 48px 40px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: border-color 0.2s;
}

    .testimonial-box:hover {
        border-color: rgba(200, 16, 46,0.4);
    }

    .testimonial-box::before {
        content: '"';
        position: absolute;
        top: -30px;
        left: 32px;
        font-family: var(--f-serif);
        font-size: 10rem;
        line-height: 1;
        color: var(--logo-crimson);
        opacity: 0.18;
        pointer-events: none;
    }

    .testimonial-box blockquote {
        font-family: var(--f-display);
        font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
        font-weight: 500;
        line-height: 1.5;
        color: var(--text);
        max-width: 56ch;
        position: relative;
        letter-spacing: -0.015em;
    }

    .testimonial-box .em {
        font-family: var(--f-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--logo-crimson);
    }

    .testimonial-box cite {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 28px;
        font-style: normal;
        position: relative;
    }

.person-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.9375rem;
    box-shadow: 0 0 20px rgba(200, 16, 46,0.3);
}

.cite-info strong {
    display: block;
    color: var(--text);
    font-weight: 600;
}

.cite-info span {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* CTA STRIP */
.cta-strip {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .cta-strip::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--grad-aurora);
        pointer-events: none;
    }

    .cta-strip::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(203,213,225,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(203,213,225,0.04) 1px, transparent 1px);
        background-size: 60px 60px;
        mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 30%, transparent 80%);
        -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 30%, transparent 80%);
        pointer-events: none;
    }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

    .cta-inner h2 {
        margin-bottom: 20px;
        color: var(--text);
    }

    .cta-inner p {
        font-size: 1.125rem;
        color: var(--text-dim);
        margin-bottom: 36px;
        max-width: 56ch;
        margin-left: auto;
        margin-right: auto;
    }

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* TWO COL / LISTS */
.two-col {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.feature-list {
    list-style: none;
}

    .feature-list li {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 14px;
        padding: 16px 0;
        font-size: 0.9375rem;
        color: var(--text-dim);
        border-bottom: 1px solid var(--border-soft);
    }

        .feature-list li:last-child {
            border-bottom: 0;
        }

        .feature-list li strong {
            color: var(--text);
            font-weight: 600;
        }

    .feature-list .icon-check {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(200, 16, 46,0.14);
        color: var(--logo-crimson);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
        flex-shrink: 0;
    }

        .feature-list .icon-check svg {
            width: 12px;
            height: 12px;
            stroke-width: 2.5;
        }

.panel {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 32px;
}

.panel-accent {
    background: linear-gradient(155deg, var(--bg-elev) 0%, rgba(200, 16, 46,0.04) 100%);
    border-color: rgba(200, 16, 46,0.25);
    border-left: 4px solid var(--logo-crimson);
}

/* TEAM */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.team-card {
    padding: 32px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(27, 36, 55, 0.05), 0 8px 24px -8px rgba(27, 36, 55, 0.04);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

    .team-card:hover {
        border-color: rgba(200, 16, 46,0.4);
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -12px rgba(27, 36, 55, 0.12);
    }

.team-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(200, 16, 46,0.25);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}

/* When a photo src is set, it fills the circle cleanly */
img.team-avatar[src]:not([src=""]) {
    background: none;
    box-shadow: 0 0 20px rgba(200, 16, 46, 0.18);
}

.team-card h3 {
    margin-bottom: 4px;
    font-size: 1.125rem;
    color: var(--text);
}

.team-role {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--logo-blue-hi);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.team-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.cert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cert {
    display: inline-block;
    padding: 4px 10px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    background: rgba(203,213,225,0.05);
    border: 1px solid var(--border);
    border-radius: 100px;
}

/* CASE STUDY */
.case-block {
    padding: 36px;
    background: var(--bg-elev);
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: var(--r-lg);
    transition: border-color 0.25s;
}

    .case-block:hover {
        border-color: rgba(200, 16, 46,0.4);
    }

    .case-block h3 {
        margin: 14px 0 14px;
        color: var(--text);
    }

    .case-block p {
        color: var(--text-muted);
        margin-bottom: 20px;
    }

.case-quote {
    font-family: var(--f-serif);
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--text-dim);
    padding: 18px 22px;
    margin: 24px 0;
    border-left: 3px solid var(--logo-crimson);
    background: rgba(200, 16, 46,0.05);
    border-radius: 0 8px 8px 0;
}

.case-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

    .case-meta .lbl {
        font-family: var(--f-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-faint);
        margin-bottom: 6px;
    }

    .case-meta .val {
        font-family: var(--f-display);
        font-weight: 600;
        color: var(--text);
        font-size: 1rem;
    }

@media (max-width: 540px) {
    .case-block {
        padding: 24px;
    }

    .case-meta {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* CONTACT FORM */
.form-field label {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .form-field input::placeholder, .form-field textarea::placeholder {
        color: var(--text-faint);
    }

    .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
        outline: 0;
        border-color: var(--logo-crimson);
        box-shadow: 0 0 0 3px rgba(200, 16, 46,0.15);
    }

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.form-grid {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.info-list {
    list-style: none;
}

    .info-list li {
        padding: 18px 0;
        border-bottom: 1px solid var(--border);
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 16px;
        align-items: start;
    }

        .info-list li:last-child {
            border-bottom: 0;
        }

    .info-list .lbl {
        font-family: var(--f-mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-faint);
    }

    .info-list .val {
        color: var(--text-dim);
        font-size: 0.9375rem;
    }

        .info-list .val a {
            color: var(--logo-crimson);
            font-weight: 500;
        }

            .info-list .val a:hover {
                color: var(--logo-crimson-hi);
            }

/* FOOTER */
.site-footer {
    background: var(--bg-elev);
    color: var(--text-dim);
    padding: 72px 0 32px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

    .site-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--grad-accent);
    }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 48px;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
    }
}

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

/* Footer brand, logo on white pill, same as header */
.footer-brand .brand {
    display: inline-flex;
    margin-bottom: 20px;
}

.footer-brand .brand-logo {
    height: 38px;
    width: auto;
    filter: none; /* show in original navy+orange */
}

.footer-brand p {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 36ch;
    margin-bottom: 20px;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

    .footer-socials a {
        width: 36px;
        height: 36px;
        background: rgba(203,213,225,0.04);
        border: 1px solid var(--border);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: color 0.15s, border-color 0.15s, background 0.15s;
    }

        .footer-socials a:hover {
            color: var(--logo-crimson);
            border-color: var(--logo-crimson);
            background: rgba(200, 16, 46,0.06);
        }

    .footer-socials svg {
        width: 16px;
        height: 16px;
    }

.footer-col h4 {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 11px;
}

.footer-col a {
    font-size: 0.9375rem;
    color: var(--text-dim);
    transition: color 0.15s;
}

    .footer-col a:hover {
        color: var(--logo-crimson);
    }

.footer-bottom {
    padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.8125rem;
    color: var(--text-faint);
    flex-wrap: wrap;
}

    .footer-bottom a {
        color: var(--text-muted);
    }

        .footer-bottom a:hover {
            color: var(--logo-crimson);
        }

.footer-legal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* CLIENTS MARQUEE */
.clients-block {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.clients-label {
    flex-shrink: 0;
}

.clients-marquee {
    flex: 1 1 0%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    padding: 40px 0;
}

    .clients-marquee:hover {
        -webkit-mask-image: none;
        mask-image: none;
    }

.clients-track {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    animation: client-scroll 50s linear infinite;
    white-space: nowrap;
    vertical-align: middle;
}

@keyframes client-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.client-logo {
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: -0.01em;
    transition: color 0.2s;
    opacity: 0.75;
}

    .client-logo:hover {
        opacity: 1;
        color: var(--text);
    }

.client-divider {
    color: var(--logo-blue-hi);
    font-size: 0.625rem;
    opacity: 0.6;
}

/* TESTIMONIAL GRID */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.testimonial-grid .testimonial-box {
    padding: 40px 36px;
}

@media (max-width: 700px) {
    .testimonial-grid .testimonial-box {
        padding: 32px 24px;
    }
}

/* UTILITY */
.mt-4 {
    margin-top: 16px;
}

.mt-6 {
    margin-top: 24px;
}

.mt-8 {
    margin-top: 32px;
}

.mt-10 {
    margin-top: 40px;
}

.mt-12 {
    margin-top: 56px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-8 {
    margin-bottom: 32px;
}

.mb-10 {
    margin-bottom: 40px;
}

.mb-12 {
    margin-bottom: 56px;
}

.text-muted {
    color: var(--text-muted);
}

.text-faint {
    color: var(--text-faint);
}

.text-small {
    font-size: 0.875rem;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2,0.7,0.2,1), transform 0.8s cubic-bezier(0.2,0.7,0.2,1);
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-d1 {
    transition-delay: 0.08s;
}

.reveal-d2 {
    transition-delay: 0.16s;
}

.reveal-d3 {
    transition-delay: 0.24s;
}

.reveal-d4 {
    transition-delay: 0.32s;
}

.sect-head {
    max-width: 720px;
    margin-bottom: 36px;
}

    .sect-head .eyebrow {
        margin-bottom: 20px;
    }

    .sect-head h2 {
        margin-bottom: 16px;
    }

/* ================================================
   ANIMATION LAYER
   Professional motion system, additive only
   ================================================ */

/* Scroll progress bar (fixed at very top) */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #0078D4 0%, #0078D4 50%, #1F3A93 100%);
    z-index: 200;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 12px rgba(200,16,46,0.2);
}

/* hero orb removed */
/* aurora removed */

/* Hero cursor spotlight */
/* cursor spot removed */

/* Grid background, subtle pan */
.home-hero::after {
    animation: gridDrift 40s linear infinite;
}

@keyframes gridDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 72px 72px;
    }
}

/* Hero headline, masked text reveal */
.home-hero h1 {
    opacity: 0;
    animation: heroTitleIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-hero .lead {
    opacity: 0;
    animation: heroSubIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes heroSubIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-hero .hero-actions {
    opacity: 0;
    animation: heroSubIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

.home-hero .hero-badge {
    opacity: 0;
    animation: heroSubIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.home-hero .hero-strip > div {
    opacity: 0;
    animation: heroSubIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

    .home-hero .hero-strip > div:nth-child(1) {
        animation-delay: 0.9s;
    }

    .home-hero .hero-strip > div:nth-child(2) {
        animation-delay: 1.0s;
    }

    .home-hero .hero-strip > div:nth-child(3) {
        animation-delay: 1.1s;
    }

    .home-hero .hero-strip > div:nth-child(4) {
        animation-delay: 1.2s;
    }

/* Italic accent words, clean, no glow animation */
.home-hero h1 .serif-italic {
    display: inline;
}

/* Brand logo entrance */
.brand {
    animation: brandIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes brandIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav items cascade in */
.nav-menu .nav-item {
    animation: navIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

    .nav-menu .nav-item:nth-child(1) {
        animation-delay: 0.2s;
    }

    .nav-menu .nav-item:nth-child(2) {
        animation-delay: 0.28s;
    }

    .nav-menu .nav-item:nth-child(3) {
        animation-delay: 0.36s;
    }

    .nav-menu .nav-item:nth-child(4) {
        animation-delay: 0.44s;
    }

@keyframes navIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #FFFFFF !important;
    background: #0078D4;
    border-radius: 50px;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
}

    .nav-cta:hover {
        background: #005A9E;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 120, 212, 0.35);
    }

/* Button magnetic/lift, add icon slide */
.btn svg {
    transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn-accent, .btn-primary {
    position: relative;
    overflow: hidden;
}

    .btn-accent::before, .btn-primary::before {
        display: none;
    }

    .btn-accent:hover::before, .btn-primary:hover::before {
        left: 100%;
    }

/* Enhanced nav link hover, underline slide */
.nav-link {
    position: relative;
}

    .nav-link::before {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -1px;
        height: 2px;
        background: var(--logo-crimson);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    }

    .nav-link:hover::before {
        transform: scaleX(1);
    }

    .nav-link.active::before {
        transform: scaleX(1);
    }

    .nav-link.active::after {
        display: none;
    }

/* Dropdown spring-in */
.dropdown {
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    transform: translateY(-10px) scale(0.98);
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
    transform: translateY(0) scale(1);
}

.dropdown-link {
    position: relative;
    overflow: hidden;
}

    .dropdown-link::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: var(--logo-crimson);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.2s ease-out;
    }

    .dropdown-link:hover::after {
        transform: scaleY(1);
    }

/* Showcase cards, 3D tilt on hover */
.sc-card {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s;
}

    .sc-card:hover {
        transform: translateY(-4px) scale(1.005);
    }

/* border spin removed */

/* Icons in showcase lift on hover */
.sc-icon {
    transition: color 0.3s, transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.sc-card:hover .sc-icon {
    transform: translateY(-3px) scale(1.08);
}

/* Industry cells, shimmer on hover */
.ind-cell {
    position: relative;
    overflow: hidden;
}

    .ind-cell::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(200, 16, 46,0.08), transparent);
        transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    .ind-cell:hover::before {
        left: 100%;
    }

.ind-icon {
    transition: color 0.3s, transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.ind-cell:hover .ind-icon {
    transform: rotate(-5deg) scale(1.1);
}

/* Metric numbers, pulse subtle on in-view */
.metric .num {
    transition: filter 0.4s;
}

.metric:hover .num {
    filter: brightness(1.1) drop-shadow(0 0 12px rgba(200, 16, 46,0.3));
}

/* Team card avatar wobble on hover */
.team-card {
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s;
}

.team-avatar {
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.team-card:hover .team-avatar {
    transform: scale(1.08);
}

/* Testimonial box, quote mark grow */
.testimonial-box::before {
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s;
}

.testimonial-box:hover::before {
    transform: scale(1.15);
    opacity: 0.28;
}

/* Clients marquee, pause on hover */
.clients-marquee:hover .clients-track {
    animation-play-state: paused;
}

.client-logo {
    transition: color 0.25s, transform 0.25s, opacity 0.25s;
}

    .client-logo:hover {
        transform: translateY(-2px);
        opacity: 1;
        color: var(--logo-crimson-hi);
    }

/* CTA strip, animated aurora shift */
.cta-strip::before {
    animation: auroraShift 20s ease-in-out infinite alternate;
}

/* Reveal: upgraded with blur-to-focus */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Staggered reveals for list children */
.stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger.visible > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.00s;
}

.stagger.visible > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.stagger.visible > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
}

.stagger.visible > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.24s;
}

.stagger.visible > *:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.32s;
}

.stagger.visible > *:nth-child(6) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.40s;
}

/* Eyebrow dot pulse */
.eyebrow::before {
    animation: eyebrowPulse 2.4s ease-in-out infinite;
}

@keyframes eyebrowPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(200, 16, 46,0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(200, 16, 46,0);
    }
}

/* Feature list item hover slide */
.feature-list li {
    transition: padding-left 0.25s, color 0.25s;
}

    .feature-list li:hover {
        padding-left: 6px;
        color: var(--text);
    }

/* Case block enhanced hover */
.case-block {
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s;
}

    .case-block:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 50px -24px rgba(200, 16, 46,0.15);
    }

/* Footer social icon lift */
.footer-socials a {
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

    .footer-socials a:hover {
        transform: translateY(-3px);
    }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .stagger > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ========== CLIENT LOGO PILLS ========== */
.client-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 140px;
    padding: 10px 22px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.3s;
}

    .client-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }

    .client-item img {
        max-height: 36px;
        max-width: 130px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

.client-fallback {
    display: none; /* only shown via inline style when img.onerror fires */
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--logo-crimson);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
/* Adjust the clients-track spacing for pills (they're larger than text names) */
.clients-track {
    gap: 24px;
}
    /* Hide the old .client-logo text style, we've switched to pills */
    .clients-track .client-logo {
        display: none;
    }

    /* Remove the bullet dividers between pills */
    .clients-track .client-divider {
        display: none;
    }

/* Mobile: slightly smaller pills */
@media (max-width: 640px) {
    .client-item {
        height: 48px;
        min-width: 120px;
        padding: 8px 18px;
    }

        .client-item img {
            max-height: 30px;
            max-width: 110px;
        }
}

/* ==========================================
   LOGO STYLES, TRANSPARENT, NO WHITE PILL
   ========================================== */

.brand,
.footer-brand .brand {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s;
}

    .brand:hover {
        transform: translateY(-1px);
        opacity: 0.92;
    }

.brand-logo,
.footer-brand .brand-logo {
    height: 38px;
    width: auto;
    display: block;
    user-select: none;
    background: transparent !important;
}

.footer-brand .brand-logo {
    height: 42px;
    filter: none !important;
}

/* ==========================================
   CLIENT PILLS, designed brand wordmarks
   Each pill has subtle brand-appropriate coloring
   ========================================== */

.client-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    height: 64px;
    min-width: 170px;
    padding: 12px 24px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.35s;
    position: relative;
    overflow: hidden;
}

    .client-pill::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: currentColor;
        opacity: 0.9;
    }

    .client-pill:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 0 0 1px currentColor;
    }

    .client-pill .c-name {
        font-family: var(--f-display);
        font-size: 1rem;
        font-weight: 800;
        color: #1B2437;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .client-pill .c-sub {
        font-family: var(--f-display);
        font-size: 0.8125rem;
        font-weight: 600;
        color: #64748B;
        letter-spacing: 0;
        line-height: 1;
    }

/* Individual brand color accents (the 4px left bar) */
.c-royal {
    color: #1E3A8A;
}

.c-virtual {
    color: #059669;
}

.c-wainbee {
    color: #DC2626;
}

.c-wahl {
    color: #0F172A;
}

.c-sarnova {
    color: #7C3AED;
}

.c-palmer {
    color: #92400E;
}

.c-aurora {
    color: #B45309;
}

.c-distit {
    color: #0891B2;
}

@media (max-width: 640px) {
    .client-pill {
        height: 54px;
        min-width: 150px;
        padding: 10px 18px;
    }

        .client-pill .c-name {
            font-size: 0.9375rem;
        }

        .client-pill .c-sub {
            font-size: 0.75rem;
        }
}


/* ==========================================
   CLIENT LOGOS (via Google favicon CDN)
   ========================================== */
.client-logo-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 72px;
    min-width: 160px;
    padding: 14px 26px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 120, 212, 0.25);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(27, 36, 55, 0.06), 0 8px 24px -6px rgba(0, 120, 212, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.2, 1, 0.3, 1), filter 0.4s, border-color 0.4s;
    filter: saturate(0.9);
    cursor: pointer;
    z-index: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

    .client-logo-item:hover {
        z-index: 10;
        border-color: rgba(0, 120, 212, 0.5);
        box-shadow: 0 4px 12px rgba(27, 36, 55, 0.1), 0 16px 32px -8px rgba(0, 120, 212, 0.25);
        transform: translateY(-3px);
        filter: saturate(1);
    }

    .client-logo-item::before,
    .client-logo-item::after {
        position: absolute;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        z-index: 11;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s;
    }
    /* Tooltip bubble */
    .client-logo-item::before {
        content: attr(aria-label);
        bottom: calc(100% + 14px);
        transform: translate(-50%, 6px);
        padding: 8px 14px;
        background: #1B2437;
        color: #FFFFFF;
        font-family: var(--f-display);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        white-space: nowrap;
        border-radius: 6px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
    /* Tooltip pointer arrow */
    .client-logo-item::after {
        content: '';
        bottom: calc(100% + 8px);
        transform: translate(-50%, 6px) rotate(45deg);
        width: 10px;
        height: 10px;
        background: #1B2437;
    }

    .client-logo-item:hover {
        transform: translateY(-6px) scale(1.04);
        border-color: rgba(0, 120, 212, 0.4);
        box-shadow: 0 18px 40px rgba(0, 120, 212, 0.18), 0 8px 20px rgba(27, 36, 55, 0.12), 0 0 0 1px rgba(0, 120, 212, 0.1);
        filter: saturate(1);
    }

        .client-logo-item:hover::before,
        .client-logo-item:hover::after {
            opacity: 1;
            transition-delay: 0.08s;
        }

        .client-logo-item:hover::before {
            transform: translate(-50%, 0);
        }

        .client-logo-item:hover::after {
            transform: translate(-50%, 0) rotate(45deg);
        }

/* Mobile: simplify the hover behavior, tap shows tooltip briefly */
@media (max-width: 640px) {
    .client-logo-item::before {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
}

/* When inside a light section, swap tooltip color so it has contrast */
.section-light .client-logo-item::before,
.section-light .client-logo-item::after {
    background: #1B2437;
}

.client-logo-img {
    max-height: 44px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.client-logo-text {
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1B2437;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Designed text-mark logos for clients without reliable logo CDN match */
.client-text-logo {
    gap: 12px;
    padding: 10px 22px;
}

    .client-text-logo .ctl-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 60%, #1F3A93 100%);
        color: #FFFFFF;
        font-family: var(--f-display);
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        border-radius: 8px;
        flex-shrink: 0;
        text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

        .client-text-logo .ctl-mark .ctl-accent {
            margin-right: 1px;
        }

    .client-text-logo .ctl-name {
        font-family: var(--f-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: #1B2437;
        letter-spacing: -0.015em;
        white-space: nowrap;
    }

@media (max-width: 640px) {
    .client-logo-item {
        height: 60px;
        min-width: 130px;
        padding: 10px 20px;
    }

    .client-logo-img {
        max-height: 36px;
        max-width: 100px;
    }

    .client-text-logo .ctl-mark {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .client-text-logo .ctl-name {
        font-size: 0.85rem;
    }
}

/* ================================================
   SECTION RHYTHM, Flintfox-style dark/light/dark flow
   .section-light applied to middle sections (services, industries,
   why-vyas, testimonials). Everything else stays dark.
   ================================================ */

/* Warm off-white background, not sterile white. Soft ivory with subtle warmth */
.section-light {
    position: relative;
    background: linear-gradient(135deg, #F3F6FA 0%, #EBF1F8 100%);
    color: var(--text-dim);
}

    /* Top/bottom transition bands, smooth the dark→light edges */
    .section-light::before,
    .section-light::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 60px;
        pointer-events: none;
        z-index: 1;
    }

    .section-light::before {
        top: 0;
        background: linear-gradient(180deg, rgba(10, 16, 30, 0.08) 0%, transparent 100%);
    }

    .section-light::after {
        bottom: 0;
        background: linear-gradient(0deg, rgba(10, 16, 30, 0.08) 0%, transparent 100%);
    }
    /* When two light sections stack, remove the inner transitions */
    .section-light + .section-light::before {
        display: none;
    }

    .section-light:has(+ .section-light)::after {
        display: none;
    }

    /* Hard keep content above the transition overlays */
    .section-light > .container {
        position: relative;
        z-index: 2;
    }

    /* Typography inside light sections */
    .section-light h1,
    .section-light h2,
    .section-light h3,
    .section-light h4 {
        color: #1B2437;
    }

    .section-light p,
    .section-light .lead {
        color: #334155;
    }

    .section-light .grad-text {
        color: #1B2437;
        background: none;
        -webkit-text-fill-color: currentColor;
    }

    /* Eyebrow: keep the brand pink-red but slightly deeper for legibility on warm bg */
    .section-light .eyebrow {
        color: #D32F4A;
    }

        .section-light .eyebrow::before {
            background: #D32F4A;
            box-shadow: 0 0 10px rgba(211, 47, 74, 0.5);
        }

    /* Serif italic accent words, adjust gradient for warm background */
    .section-light .serif-italic {
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #2B4EB0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .section-light .grad-accent-text {
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #1F3A93 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* Cards inside light sections, white with soft shadow */
    .section-light .sc-card,
    .section-light .ind-cell,
    .section-light .panel,
    .section-light .testimonial-box,
    .section-light .metric-block,
    .section-light .why-item {
        background: #FFFFFF;
        border: 1px solid rgba(27, 36, 55, 0.08);
        box-shadow: 0 1px 3px rgba(27, 36, 55, 0.04), 0 1px 2px rgba(27, 36, 55, 0.03);
        color: #1A2440;
    }

        .section-light .sc-card:hover,
        .section-light .ind-cell:hover,
        .section-light .panel:hover {
            border-color: rgba(200, 16, 46, 0.25);
            box-shadow: 0 18px 36px -10px rgba(27, 36, 55, 0.15), 0 4px 12px rgba(27, 36, 55, 0.06);
            transform: translateY(-4px);
        }

    /* Featured showcase card, accent tint on light bg */
    .section-light .sc-featured {
        background: linear-gradient(155deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
        border-color: rgba(200, 16, 46, 0.25);
    }

    /* Card text colors */
    .section-light .sc-card h3,
    .section-light .ind-cell h3,
    .section-light .panel h3,
    .section-light .sc-card h4,
    .section-light .why-item h3 {
        color: #1B2437;
    }

    .section-light .sc-card p,
    .section-light .ind-cell p,
    .section-light .panel p,
    .section-light .why-item p {
        color: #475569;
    }

    .section-light .sc-card .sc-eyebrow,
    .section-light .sc-card .sc-meta,
    .section-light .card-meta {
        color: #64748B;
    }

    /* Dividers, borders */
    .section-light hr.div {
        background: rgba(27, 36, 55, 0.10);
    }

    .section-light .why-item {
        border-bottom-color: rgba(27, 36, 55, 0.08);
    }

    /* Feature list checks stay brand red */
    .section-light .feature-list .icon-check {
        color: #0078D4;
    }

    .section-light .feature-list li {
        color: #475569;
    }

        .section-light .feature-list li strong {
            color: #1B2437;
        }

    /* Testimonials inside light sections */
    .section-light .testimonial-box blockquote {
        color: #1B2437;
    }

    .section-light .testimonial-box cite {
        color: #64748B;
    }

    .section-light .testimonial-box .em {
        background: linear-gradient(135deg, #0078D4 0%, #1F3A93 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Buttons on light sections */
    .section-light .btn-secondary {
        background: transparent;
        color: #1B2437;
        border-color: rgba(27, 36, 55, 0.20);
    }

        .section-light .btn-secondary:hover {
            background: rgba(27, 36, 55, 0.04);
            border-color: rgba(27, 36, 55, 0.30);
        }

    .section-light .btn-ghost {
        color: #475569;
    }

        .section-light .btn-ghost:hover {
            color: #1B2437;
        }

    /* Metric numbers on light, large gradient text stays punchy */
    .section-light .metric .num {
        background: linear-gradient(135deg, #0078D4 0%, #1F3A93 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .section-light .metric .lbl {
        color: #D32F4A;
    }

    .section-light .metric .desc {
        color: #475569;
    }

    /* Numbered list (Why Vyas) */
    .section-light .why-item .why-num {
        color: #94A3B8;
    }

    /* Section headings */
    .section-light .sect-head h2,
    .section-light .sect-head h1 {
        color: #1B2437;
    }

    .section-light .sect-head p {
        color: #475569;
    }

    /* Form fields when placed in light sections (contact-form-section reuse) */
    .section-light .form-field input,
    .section-light .form-field textarea,
    .section-light .form-field select {
        background: #FFFFFF;
        color: #1B2437;
        border-color: rgba(27, 36, 55, 0.12);
    }

    .section-light .form-field label {
        color: #475569;
    }

    /* Cert/badge pills adapt */
    .section-light .cert {
        background: rgba(27,36,55,0.15);
        color: #1F3A93;
        border: 1px solid rgba(27,36,55,0.15);
    }


/* ==========================================
   AI IN ACTION, 3 animated demo cards
   ========================================== */
.ai-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0A101E 0%, #1B2437 100%);
}

.ai-section-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 20% 30%, rgba(200,16,46,0.15) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 80% 70%, rgba(77, 123, 255, 0.10) 0%, transparent 60%);
    pointer-events: none;
}

.ai-section > .container {
    position: relative;
    z-index: 2;
}

.ai-demos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1000px) {
    .ai-demos {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

.ai-demo {
    position: relative;
    padding: 0;
    background: linear-gradient(155deg, rgba(20,28,48,0.95) 0%, rgba(15,21,38,0.95) 100%);
    border: 1px solid rgba(148, 163, 200, 0.14);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4), 0 0 40px -10px rgba(200,16,46,0.15);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.4s;
}

    .ai-demo:hover {
        transform: translateY(-6px);
        border-color: rgba(200,16,46,0.15);
        box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 60px -10px rgba(200,16,46,0.15);
    }

.ai-demo-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(148, 163, 200, 0.1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0078D4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: flex-start;
}

    .ai-demo-badge.purple {
        color: #0078D4;
    }

    .ai-demo-badge.blue {
        color: #4D7BFF;
    }

.ai-demo-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
    animation: pulse 2s ease-in-out infinite;
}

.ai-demo-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.ai-demo-body {
    padding: 20px 18px;
    min-height: 230px;
}

.ai-demo-footer {
    padding: 10px 18px;
    background: rgba(13, 20, 36, 0.6);
    border-top: 1px solid rgba(148, 163, 200, 0.08);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
}

/* --- Demo 1: ML Pricing --- */
.ai-price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-family: var(--f-mono);
}

.ai-price-live {
    color: #4ADE80;
    font-size: 0.625rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.ai-price-recommend {
    background: rgba(13, 20, 36, 0.6);
    border: 1px solid rgba(148, 163, 200, 0.1);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}

.ai-price-old {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

    .ai-price-old span {
        text-decoration: line-through;
    }

.ai-price-new {
    font-size: 0.875rem;
    color: var(--text-dim);
}

.ai-price-val {
    font-family: var(--f-display);
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0078D4 0%, #4D7BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 8px;
    display: inline-block;
    animation: priceIn 1s cubic-bezier(0.16,1,0.3,1) 0.6s both;
}

@keyframes priceIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-price-bar {
    position: relative;
    height: 8px;
    background: rgba(148, 163, 200, 0.1);
    border-radius: 100px;
    margin-bottom: 14px;
    overflow: hidden;
}

.ai-price-bar-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: linear-gradient(90deg, #0078D4 0%, #4D7BFF 100%);
    border-radius: 100px;
    animation: priceBarFill 1.4s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
}

@keyframes priceBarFill {
    to {
        width: 94%;
    }
}

.ai-price-confidence {
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 0.75rem;
    font-family: var(--f-mono);
    color: #4D7BFF;
    opacity: 0;
    animation: fadeIn 0.6s ease 1.4s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.ai-price-factors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ai-factor {
    background: rgba(13, 20, 36, 0.6);
    border: 1px solid rgba(148, 163, 200, 0.08);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
}

.ai-factor-up {
    color: #4ADE80;
    font-weight: 700;
}

.ai-factor-flat {
    color: var(--text-faint);
}

/* --- Demo 2: GenAI Copilot chat --- */
.ai-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.ai-chat-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(148, 163, 200, 0.12);
    color: var(--text-dim);
    text-transform: uppercase;
}

    .ai-chat-avatar.bot {
        background: linear-gradient(135deg, #0078D4 0%, #4D7BFF 100%);
        color: #FFFFFF;
    }

.ai-chat-text {
    background: rgba(13, 20, 36, 0.6);
    border: 1px solid rgba(148, 163, 200, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--text-dim);
    line-height: 1.5;
    max-width: 85%;
}

.ai-chat-user .ai-chat-text {
    background: rgba(77, 123, 255, 0.08);
    border-color: rgba(77, 123, 255, 0.2);
    color: var(--text);
}

.ai-chat-bot {
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.6s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-chat-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0 8px;
    animation: typingDisappear 0s linear 2.4s forwards;
}

    .ai-chat-typing span {
        width: 6px;
        height: 6px;
        background: var(--text-muted);
        border-radius: 50%;
        animation: typingBlink 1.4s infinite;
    }

        .ai-chat-typing span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .ai-chat-typing span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes typingBlink {
    0%,60%,100% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }
}

@keyframes typingDisappear {
    to {
        display: none;
        height: 0;
        padding: 0;
    }
}

.ai-chat-answer {
    opacity: 0;
    animation: fadeIn 0.5s ease 2.4s forwards;
}

    .ai-chat-answer strong {
        color: var(--text);
        background: linear-gradient(135deg, #0078D4, #4D7BFF);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.ai-chat-result {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(10, 16, 30, 0.4);
    border-radius: 6px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    line-height: 1.7;
}

    .ai-chat-result strong {
        background: none;
        -webkit-text-fill-color: var(--text);
        color: var(--text);
        font-weight: 700;
    }

/* --- Demo 3: AI Order Builder --- */
.ai-order-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 16, 30, 0.5);
    border: 1px solid rgba(148, 163, 200, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--text);
    margin-bottom: 10px;
}

.ai-order-cursor {
    color: #4D7BFF;
    font-weight: 800;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.ai-order-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid transparent;
    width: 0;
    animation: orderType 2.2s steps(30,end) 0.3s forwards;
}

@keyframes orderType {
    to {
        width: 100%;
    }
}

.ai-order-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: #4D7BFF;
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeIn 0.3s ease 2.6s forwards, fadeOut 0.3s ease 3.8s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        height: 0;
        margin: 0;
        overflow: hidden;
    }
}

.ai-order-spinner {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(77, 123, 255, 0.3);
    border-top-color: #4D7BFF;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-order-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    animation: fadeIn 0.4s ease 3.8s forwards;
}

.ai-order-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    background: rgba(13, 20, 36, 0.5);
    border: 1px solid rgba(148, 163, 200, 0.06);
    border-radius: 6px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards;
}

    .ai-order-item:nth-child(1) {
        animation-delay: 3.9s;
    }

    .ai-order-item:nth-child(2) {
        animation-delay: 4.0s;
    }

    .ai-order-item:nth-child(3) {
        animation-delay: 4.1s;
    }

.ai-order-sku {
    color: var(--text);
    font-weight: 600;
}

.ai-order-qty {
    color: var(--text-muted);
    text-align: right;
}

.ai-order-price {
    color: #4ADE80;
    font-weight: 600;
}

.ai-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    background: linear-gradient(135deg, rgba(77, 123, 255, 0.1), rgba(200,16,46,0.15));
    border: 1px solid rgba(77, 123, 255, 0.2);
    border-radius: 6px;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 4px;
    opacity: 0;
    animation: fadeInUp 0.5s ease 4.3s forwards;
}

.ai-order-sum {
    font-size: 0.875rem;
    font-weight: 800;
    background: linear-gradient(135deg, #0078D4 0%, #4D7BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================
   HOW WE DELIVER, 3-stage numbered model
   Tachyon-inspired clean module style
   ========================================== */
.deliver-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

@media (max-width: 960px) {
    .deliver-steps {
        grid-template-columns: 1fr;
    }

    .deliver-connector {
        display: none;
    }
}

.deliver-step {
    position: relative;
    padding: 32px 28px;
    background: linear-gradient(155deg, rgba(20, 28, 48, 0.6) 0%, rgba(13, 20, 36, 0.4) 100%);
    border: 1px solid rgba(148, 163, 200, 0.1);
    border-radius: 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}

    .deliver-step:hover {
        transform: translateY(-6px);
        border-color: rgba(200, 16, 46, 0.25);
        box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(200, 16, 46, 0.15);
    }

.deliver-num {
    font-family: var(--f-display);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 18px;
}

.deliver-tag {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 10px;
    border: 1px solid rgba(148, 163, 200, 0.18);
    border-radius: 100px;
    margin-bottom: 14px;
}

.deliver-body h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--text);
    letter-spacing: -0.02em;
}

.deliver-body p {
    color: var(--text-dim);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.deliver-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid rgba(0, 120, 212, 0.12);
    padding-top: 16px;
}

    .deliver-checklist li {
        position: relative;
        padding-left: 22px;
        font-size: 0.8125rem;
        color: var(--text-muted);
        line-height: 1.5;
        opacity: 0;
        transform: translateX(-8px);
        animation: checklistReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

        .deliver-checklist li:nth-child(1) {
            animation-delay: 0.1s;
        }

        .deliver-checklist li:nth-child(2) {
            animation-delay: 0.2s;
        }

        .deliver-checklist li:nth-child(3) {
            animation-delay: 0.3s;
        }

        .deliver-checklist li:nth-child(4) {
            animation-delay: 0.4s;
        }

        .deliver-checklist li:nth-child(5) {
            animation-delay: 0.5s;
        }

        .deliver-checklist li:nth-child(6) {
            animation-delay: 0.6s;
        }

        .deliver-checklist li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 14px;
            height: 14px;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
        }

@keyframes checklistReveal {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Connector line between the 3 steps */
.deliver-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
}

    .deliver-connector span {
        display: block;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, rgba(0, 120, 212, 0.4) 0%, rgba(0, 120, 212, 0.15) 100%);
        position: relative;
    }

        .deliver-connector span::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid #1B2437;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }

/* Light-section variant */
.section-light .deliver-step {
    background: #FFFFFF;
    border-color: rgba(27, 36, 55, 0.08);
}

    .section-light .deliver-step:hover {
        border-color: rgba(200, 16, 46, 0.25);
        box-shadow: 0 20px 40px -20px rgba(27, 36, 55, 0.15);
    }

.section-light .deliver-tag {
    background: rgba(27, 36, 55, 0.04);
    color: #475569;
    border-color: rgba(27, 36, 55, 0.1);
}

.section-light .deliver-body h3 {
    color: #1B2437;
}

.section-light .deliver-body p {
    color: #475569;
}

.section-light .deliver-checklist {
    border-top-color: rgba(27, 36, 55, 0.08);
}

    .section-light .deliver-checklist li {
        color: #64748B;
    }

/* ==========================================
   VYAS INTELLIGENT PRICING, Flagship spotlight
   Dark section with accent gradient bg, 2-col
   ========================================== */
.vip-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0A101E 0%, #0F1626 100%);
}

.vip-section-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 15% 50%, rgba(200, 16, 46, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 85% 50%, rgba(27,36,55,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.vip-section > .container {
    position: relative;
    z-index: 2;
}

.vip-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

@media (max-width: 1000px) {
    .vip-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.vip-content h2 {
    margin-top: 16px;
}

.vip-tagline {
    margin-top: 24px;
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    letter-spacing: -0.015em;
    max-width: 32ch;
}

.vip-desc {
    margin-top: 22px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dim);
    max-width: 56ch;
}

.vip-actions {
    margin-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.vip-value {
    position: relative;
    padding: 36px 32px;
    background: linear-gradient(155deg, rgba(20, 28, 48, 0.9) 0%, rgba(13, 20, 36, 0.95) 100%);
    border: 1px solid rgba(148, 163, 200, 0.14);
    border-radius: 16px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 0 60px -10px rgba(200, 16, 46, 0.1);
}

    .vip-value::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 16px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(200, 16, 46, 0.3) 0%, transparent 50%, rgba(27,36,55,0.15) 100%);
        -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
        mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

.vip-value-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 200, 0.12);
    margin-bottom: 20px;
}

.vip-value-label {
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.vip-value-dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
    animation: pulse 2s ease-in-out infinite;
}

.vip-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .vip-value-list li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: flex-start;
        font-size: 0.9375rem;
        line-height: 1.55;
        color: var(--text-dim);
    }

        .vip-value-list li svg {
            width: 18px;
            height: 18px;
            color: var(--logo-crimson);
            flex-shrink: 0;
            margin-top: 2px;
        }

/* ==========================================
   AI POWERED INNOVATIONS, 5-card grid
   1 featured + 4 supporting, Tachyon style
   ========================================== */
.ai-innovations .sect-head .lead {
    font-size: 1rem;
    line-height: 1.65;
}

.ai-innov-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

    .ai-innov-grid .ai-innov-card:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .ai-innov-grid .ai-innov-card:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .ai-innov-grid .ai-innov-card:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .ai-innov-grid .ai-innov-card:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .ai-innov-grid .ai-innov-card:nth-child(5) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }

@media (max-width: 900px) {
    .ai-innov-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

        .ai-innov-grid .ai-innov-card:nth-child(1) {
            grid-column: 1 / 3;
            grid-row: auto;
        }

        .ai-innov-grid .ai-innov-card:nth-child(2),
        .ai-innov-grid .ai-innov-card:nth-child(3),
        .ai-innov-grid .ai-innov-card:nth-child(4),
        .ai-innov-grid .ai-innov-card:nth-child(5) {
            grid-column: auto;
            grid-row: auto;
        }
}

@media (max-width: 560px) {
    .ai-innov-grid {
        grid-template-columns: 1fr;
    }

        .ai-innov-grid .ai-innov-card:nth-child(1) {
            grid-column: auto;
        }
}

.ai-innov-card {
    position: relative;
    padding: 28px 26px;
    background: #FFFFFF;
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .ai-innov-card:hover {
        transform: translateY(-4px);
        border-color: rgba(200, 16, 46, 0.25);
        box-shadow: 0 20px 40px -12px rgba(27, 36, 55, 0.12), 0 6px 16px rgba(27, 36, 55, 0.06);
    }

.ai-innov-featured {
    background: linear-gradient(155deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
    padding: 36px 32px;
}

    .ai-innov-featured::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 160px;
        height: 160px;
        background: radial-gradient(circle at top right, rgba(200, 16, 46, 0.12), transparent 70%);
        pointer-events: none;
    }

.ai-innov-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.1), rgba(27,36,55,0.15));
    border-radius: 12px;
    margin-bottom: 18px;
    color: var(--logo-crimson);
    border: 1px solid rgba(200, 16, 46, 0.15);
}

    .ai-innov-icon svg {
        width: 22px;
        height: 22px;
    }

.ai-innov-featured .ai-innov-icon {
    width: 56px;
    height: 56px;
}

    .ai-innov-featured .ai-innov-icon svg {
        width: 26px;
        height: 26px;
    }

.ai-innov-label {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #D32F4A;
    margin-bottom: 10px;
}

.ai-innov-card h3 {
    font-size: 1.0625rem;
    line-height: 1.35;
    color: #1B2437;
    margin-bottom: 12px;
    letter-spacing: -0.015em;
}

.ai-innov-featured h3 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 16px;
}

.ai-innov-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
    flex: 1;
}

.ai-innov-featured p {
    font-size: 1rem;
}

.ai-innov-closer {
    margin-top: 48px;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 32px;
    border-top: 1px solid rgba(27, 36, 55, 0.08);
}

    .ai-innov-closer p {
        font-size: 1.125rem;
        line-height: 1.55;
        color: #1B2437;
        font-weight: 500;
        letter-spacing: -0.015em;
    }

/* ==========================================
   NEW HERO, Tachyon-style restrained
   Simple eyebrow + minimal "stack of services" card
   ========================================== */
.hero-eyebrow {
    display: inline-block;
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 28px;
    padding: 6px 12px;
    border: 1px solid rgba(148, 163, 200, 0.18);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
}

/* Minimal hero card, 3 stacked service rows, no animated dashboard */
.hero-card-minimal {
    position: relative;
    padding: 24px;
    background: linear-gradient(155deg, rgba(20, 28, 48, 0.92) 0%, rgba(13, 20, 36, 0.95) 100%);
    border: 1px solid rgba(148, 163, 200, 0.14);
    border-radius: 18px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 0 80px -20px rgba(27,36,55,0.15);
    max-width: 440px;
    margin-left: auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

    .hero-card-minimal::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(200, 16, 46, 0.2) 0%, transparent 40%, transparent 60%, rgba(27,36,55,0.15) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .hero-card-minimal:hover {
        transform: translateY(-4px);
    }

.hcm-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 200, 0.1);
    margin-bottom: 16px;
}

.hcm-label {
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.hcm-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: #4ADE80;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.hcm-dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
    animation: pulse 2s ease-in-out infinite;
}

.hcm-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hcm-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(10, 16, 30, 0.4);
    border: 1px solid rgba(148, 163, 200, 0.08);
    border-radius: 10px;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
    cursor: default;
}

    .hcm-row:hover {
        background: rgba(10, 16, 30, 0.6);
        border-color: rgba(200, 16, 46, 0.25);
        transform: translateX(4px);
    }

.hcm-row-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    flex-shrink: 0;
}

    .hcm-row-icon.blue {
        background: linear-gradient(135deg, #1F3A93 0%, #4D7BFF 100%);
        box-shadow: 0 4px 12px rgba(27,36,55,0.15);
    }

    .hcm-row-icon.red {
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
        box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
    }

    .hcm-row-icon.purple {
        background: linear-gradient(135deg, #1B2437 0%, #0078D4 100%);
        box-shadow: 0 4px 12px rgba(200,16,46,0.15);
    }

.hcm-row-body {
    min-width: 0;
}

.hcm-row-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.hcm-row-meta {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.hcm-row-chev {
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    transition: transform 0.3s, color 0.3s;
}

.hcm-row:hover .hcm-row-chev {
    color: var(--logo-crimson);
    transform: translateX(2px);
}

@media (max-width: 1000px) {
    .hero-card-minimal {
        max-width: 100%;
        margin-left: 0;
    }
}

/* Hide the old .hero-badges (kept in CSS in case other pages use it) */
.home-hero .hero-badges,
.home-hero .dashboard-mock,
.home-hero .float-chip {
    display: none !important;
}

/* ==========================================
   HERO, Premium abstract composition
   Left: typography · Right: animated orbital visual
   ========================================== */

/* Layered background */
.home-hero {
    padding: 96px 0 88px !important;
    background: linear-gradient(135deg, #0E7490 0%, #3B82F6 25%, #6366F1 50%, #8B5CF6 75%, #06B6D4 100%) !important;
    position: relative;
    overflow: hidden;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(148, 163, 200, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 200, 0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 75%);
    opacity: 0.3;
}

.hero-glow, .hero-orbit, .hero-particles, .hero-particle, .hero-hex {
    display: none !important;
}

.hero-glow-1 {
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(200, 16, 46, 0.3) 0%, transparent 60%);
    animation: glowDrift1 22s ease-in-out infinite alternate;
}

.hero-glow-2 {
    bottom: -150px;
    left: -100px;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(27,36,55,0.15) 0%, transparent 60%);
    animation: glowDrift2 18s ease-in-out infinite alternate;
}

.hero-glow-3 {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(200,16,46,0.15) 0%, transparent 60%);
    animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowDrift1 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-80px, 60px) scale(1.1);
    }
}

@keyframes glowDrift2 {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(60px, -40px) scale(1.15);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.home-hero .container {
    position: relative;
    z-index: 2;
}

.home-hero .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: center;
    min-height: 560px;
}

@media (max-width: 1100px) {
    .home-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
}

/* ---- Hero content (left) ---- */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    padding: 8px 16px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #0078D4;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(200,16,46,0.25);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.hero-headline {
    font-family: var(--f-display);
    font-size: clamp(2.5rem, 4.8vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin-bottom: 28px;
    max-width: 18ch;
}

.hero-headline-accent {
    display: inline-block;
    font-weight: 700;
    background: linear-gradient(135deg, #0078D4 0%, #0078D4 45%, #6A89FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-sub {
    font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.1875rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 36px;
    max-width: 54ch;
    font-weight: 400;
}

.hero-trust-bar {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-trust-label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-trust-items {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    letter-spacing: -0.005em;
}

    .hero-trust-item svg {
        width: 14px;
        height: 14px;
        color: rgba(255, 255, 255, 0.6);
    }

.hero-trust-dot {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

/* ---- Hero visual (right), abstract composition ---- */
.hero-visual {
    position: relative;
}

.hero-composition {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin-left: auto;
}

/* Orbital SVG */
.hero-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.orbit-ring {
    transform-origin: 300px 300px;
}

.orbit-1 {
    animation: spin-slow 60s linear infinite;
}

.orbit-2 {
    animation: spin-slow 45s linear infinite reverse;
}

.orbit-3 {
    animation: spin-slow 30s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.orbit-nodes {
    transform-origin: 300px 300px;
}

.orbit-1-nodes {
    animation: spin-slow 60s linear infinite;
}

.orbit-2-nodes {
    animation: spin-slow 45s linear infinite reverse;
}

.orbit-3-nodes {
    animation: spin-slow 30s linear infinite;
}

.orbit-nodes circle {
    filter: drop-shadow(0 0 6px currentColor);
}

.orbit-core {
    animation: corePulse 4s ease-in-out infinite;
    transform-origin: 300px 300px;
}

@keyframes corePulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.hero-hex {
    animation: hexSpin 40s linear infinite;
    transform-origin: 0 0;
}

@keyframes hexSpin {
    from {
        transform: translate(300px, 300px) rotate(0deg);
    }

    to {
        transform: translate(300px, 300px) rotate(360deg);
    }
}

/* Floating particles */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    opacity: 0;
    animation: particleFloat 12s ease-in-out infinite;
}

    .hero-particle:nth-child(1) {
        top: 15%;
        left: 20%;
        animation-delay: 0s;
        background: #0078D4;
        box-shadow: 0 0 12px rgba(200,16,46,0.25);
    }

    .hero-particle:nth-child(2) {
        top: 70%;
        left: 75%;
        animation-delay: 2s;
        background: #4D7BFF;
        box-shadow: 0 0 12px rgba(77, 123, 255, 0.8);
    }

    .hero-particle:nth-child(3) {
        top: 45%;
        left: 10%;
        animation-delay: 4s;
        background: #0078D4;
        box-shadow: 0 0 12px rgba(200,16,46,0.15);
    }

    .hero-particle:nth-child(4) {
        top: 25%;
        left: 80%;
        animation-delay: 6s;
    }

    .hero-particle:nth-child(5) {
        top: 85%;
        left: 30%;
        animation-delay: 8s;
        background: #0078D4;
        box-shadow: 0 0 12px rgba(200,16,46,0.25);
    }

    .hero-particle:nth-child(6) {
        top: 60%;
        left: 50%;
        animation-delay: 10s;
    }

@keyframes particleFloat {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    10%, 90% {
        opacity: 1;
    }

    50% {
        transform: translate(-20px, -30px);
    }
}

/* Floating capability labels */
.hero-label {
    position: absolute;
    padding: 10px 16px;
    background: rgba(20, 28, 48, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0;
    animation: labelFloat 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

    .hero-label::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        box-shadow: 0 0 8px currentColor;
    }

    .hero-label span {
        padding-left: 14px;
    }

.hero-label-1 {
    top: 12%;
    left: -8%;
    animation-delay: 1.2s;
    color: #4D7BFF;
}

.hero-label-2 {
    top: 50%;
    right: -6%;
    animation-delay: 1.4s;
    color: #0078D4;
}

.hero-label-3 {
    bottom: 14%;
    left: 8%;
    animation-delay: 1.6s;
    color: #0078D4;
}

@keyframes labelFloat {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Continuous gentle drift on labels */
.hero-label-1 {
    animation: labelFloat 0.8s cubic-bezier(0.16,1,0.3,1) 1.2s forwards, drift1 10s ease-in-out 2s infinite alternate;
}

.hero-label-2 {
    animation: labelFloat 0.8s cubic-bezier(0.16,1,0.3,1) 1.4s forwards, drift2 12s ease-in-out 2.2s infinite alternate;
}

.hero-label-3 {
    animation: labelFloat 0.8s cubic-bezier(0.16,1,0.3,1) 1.6s forwards, drift3 11s ease-in-out 2.4s infinite alternate;
}

@keyframes drift1 {
    to {
        transform: translate(6px, -8px);
    }
}

@keyframes drift2 {
    to {
        transform: translate(-8px, 6px);
    }
}

@keyframes drift3 {
    to {
        transform: translate(8px, -6px);
    }
}

@media (max-width: 1100px) {
    .hero-composition {
        max-width: 440px;
        margin: 0 auto;
    }

    .hero-label-1 {
        left: 0%;
    }

    .hero-label-2 {
        right: 0%;
    }

    .hero-label-3 {
        left: 12%;
    }
}

@media (max-width: 640px) {
    .home-hero {
        padding: 88px 0 88px !important;
    }

    .hero-composition {
        max-width: 320px;
    }

    .hero-label {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
}

/* Safely hide old hero elements if any still render */
.home-hero .hero-strip,
.home-hero .hero-card-minimal,
.home-hero .hero-badges,
.home-hero .dashboard-mock,
.home-hero .float-chip {
    display: none !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-nodes, .hero-hex, .orbit-core,
    .hero-glow, .hero-particle, .hero-label {
        animation: none !important;
    }
}

/* ==========================================
   VIP SPOTLIGHT, nested within the AI section
   Dark accent card on the light AI Innovations bg
   ========================================== */
.vip-spotlight {
    margin-top: 48px;
    padding: 44px 44px;
    background: #0F1626;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(10, 16, 30, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* User-supplied background image; set src in index.html */
.vip-spotlight-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

    .vip-spotlight-img:not([src]),
    .vip-spotlight-img[src=""] {
        display: none;
    }

/* Dark overlay keeps left text readable over any image */
.vip-spotlight-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(15, 22, 38, 0.92) 0%, rgba(15, 22, 38, 0.78) 45%, rgba(15, 22, 38, 0.55) 100%);
    z-index: 0;
    pointer-events: none;
}

.vip-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.35) 0%, transparent 40%, transparent 60%, rgba(27,36,55,0.15) 100%);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.vip-spotlight > *:not(.vip-spotlight-img):not(.vip-spotlight-overlay) {
    position: relative;
    z-index: 2;
}

.vip-spotlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.vip-spotlight-pulse {
    width: 6px;
    height: 6px;
    background: #0078D4;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(200,16,46,0.25);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.vip-spotlight .vip-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 1000px) {
    .vip-spotlight {
        padding: 36px 28px;
        margin-top: 48px;
    }

        .vip-spotlight .vip-grid {
            grid-template-columns: 1fr;
            gap: 32px;
        }
}

.vip-spotlight .vip-content .vip-heading {
    font-family: var(--f-display);
    font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 16px;
}

    .vip-spotlight .vip-content .vip-heading .serif-italic {
        font-family: var(--f-display);
        font-style: normal;
        font-weight: 700;
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #6A89FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.vip-spotlight .vip-tagline {
    font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.vip-spotlight .vip-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 28px;
    max-width: 56ch;
}

.vip-spotlight .vip-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vip-spotlight .btn-secondary {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
}

    .vip-spotlight .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.3);
    }

.vip-spotlight .vip-value {
    padding: 28px 26px;
    background: rgba(10, 16, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

.vip-spotlight .vip-value-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 18px;
}

.vip-spotlight .vip-value-label {
    font-family: var(--f-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.vip-spotlight .vip-value-dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
    animation: pulse 2s ease-in-out infinite;
}

.vip-spotlight .vip-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .vip-spotlight .vip-value-list li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: flex-start;
        font-size: 0.875rem;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.82);
    }

        .vip-spotlight .vip-value-list li svg {
            width: 16px;
            height: 16px;
            color: #0078D4;
            flex-shrink: 0;
            margin-top: 3px;
        }

/* Hide the old standalone .vip-section CSS classes that might still apply */
.section.vip-section {
    display: none !important;
}

/* ==========================================
   CLIENT LOGO WORDMARK FALLBACK
   Clean company-name text when image fails
   (No more monogram initials)
   ========================================== */
.client-logo-wordmark {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #64748B;
    white-space: nowrap;
    text-align: center;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.client-logo-item:hover .client-logo-wordmark {
    color: #1B2437;
}

.client-logo-img {
    max-height: 40px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================
   COMPREHENSIVE MOBILE RESPONSIVENESS
   Ensures site works at all viewport sizes
   ========================================== */

/* General: tighten container padding on mobile */
@media (max-width: 760px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 420px) {
    .container {
        padding: 0 16px;
    }
}

/* Section padding: reduce vertical space on mobile */
@media (max-width: 760px) {
    .section {
        padding: 64px 0;
    }

    .section-sm {
        padding: 40px 0;
    }

    .home-hero {
        padding: 72px 0 56px !important;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 48px 0;
    }
}

/* HERO composition: scale down and fix layout on mobile */
@media (max-width: 1100px) {
    .home-hero .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        min-height: auto;
    }

    .hero-composition {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .hero-composition {
        max-width: 300px;
    }

    .hero-headline {
        font-size: clamp(2rem, 7vw, 2.5rem) !important;
        max-width: 100% !important;
    }

    .hero-sub {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    .hero-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.14em;
        padding: 6px 10px 6px 8px;
        margin-bottom: 20px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

        .hero-actions .btn {
            justify-content: center;
            width: 100%;
        }

    .hero-trust-bar {
        margin-top: 32px;
        padding-top: 24px;
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-trust-items {
        gap: 12px;
    }

    .hero-label {
        font-size: 0.7rem;
        padding: 6px 10px 6px 18px;
    }

        .hero-label::before {
            left: 8px;
            width: 5px;
            height: 5px;
        }

        .hero-label span {
            padding-left: 10px;
        }
}

@media (max-width: 420px) {
    .hero-composition {
        max-width: 260px;
    }

    .hero-label-1 {
        top: 4%;
        left: -10%;
    }

    .hero-label-2 {
        top: 48%;
        right: -10%;
    }

    .hero-label-3 {
        bottom: 6%;
        left: 2%;
    }
}

/* H1/H2 sizing on mobile */
@media (max-width: 640px) {
    h1 {
        font-size: clamp(1.875rem, 6vw, 2.25rem);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
        line-height: 1.15;
    }

    h3 {
        font-size: 1.125rem;
    }

    .lead {
        font-size: 1rem !important;
        line-height: 1.6;
    }
    /* Force heading line-breaks to flow naturally */
    h1 br, h2 br {
        display: none;
    }
}

/* Eyebrow on mobile */
@media (max-width: 640px) {
    .eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        gap: 8px;
    }
}

/* HEADER: compact mobile */
@media (max-width: 760px) {
    .site-header .container {
        padding: 0 16px;
    }

    .brand img {
        height: 32px !important;
    }

    .site-header {
        padding: 12px 0;
    }
}

/* MOBILE NAV improvements */
@media (max-width: 1024px) {
    .mobile-nav {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 99;
        background: rgba(10, 16, 30, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

        .mobile-nav.open {
            max-height: calc(100vh - 60px);
        }

    body.nav-open {
        overflow: hidden;
    }
}

/* CLIENTS strip on mobile */
@media (max-width: 640px) {
    .clients-marquee {
        mask-size: 100% 100%;
    }

    .client-logo-item {
        min-width: 120px;
        padding: 0 18px;
        height: 64px;
    }

    .client-logo-img {
        max-height: 32px;
        max-width: 110px;
    }

    .client-logo-wordmark {
        font-size: 0.875rem;
        padding: 0 10px;
    }
}

/* AI INNOVATIONS section on mobile */
@media (max-width: 640px) {
    .ai-innovations .sect-head {
        margin-bottom: 36px !important;
    }

    .ai-innov-closer {
        margin-top: 32px !important;
        padding: 20px 16px !important;
    }

        .ai-innov-closer p {
            font-size: 1rem;
        }
}

/* VIP SPOTLIGHT on mobile, nested inside AI section */
@media (max-width: 900px) {
    .vip-spotlight {
        padding: 32px 24px !important;
        margin-top: 40px !important;
        border-radius: 16px;
    }

        .vip-spotlight .vip-grid {
            grid-template-columns: 1fr !important;
            gap: 28px !important;
        }

        .vip-spotlight .vip-content .vip-heading {
            font-size: 1.75rem !important;
        }

        .vip-spotlight .vip-tagline {
            font-size: 1.0625rem !important;
        }

        .vip-spotlight .vip-desc {
            font-size: 0.9375rem !important;
        }

        .vip-spotlight .vip-actions {
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }

            .vip-spotlight .vip-actions .btn {
                justify-content: center;
                width: 100%;
            }

        .vip-spotlight .vip-value {
            padding: 24px 20px !important;
        }

    .vip-spotlight-tag {
        font-size: 0.6875rem !important;
        padding: 6px 12px 6px 10px !important;
        margin-bottom: 24px !important;
    }
}

/* HOW WE DELIVER, 3-stage numbered on mobile */
@media (max-width: 960px) {
    .deliver-steps {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .deliver-connector {
        display: none !important;
    }

    .deliver-step {
        padding: 28px 22px !important;
    }

    .deliver-num {
        font-size: 2.5rem !important;
        margin-bottom: 12px !important;
    }

    .deliver-body h3 {
        font-size: 1.1875rem !important;
    }
}

/* ISV SUITE / showcase cards */
@media (max-width: 760px) {
    .showcase {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .sc-card, .case-block {
        padding: 24px 20px !important;
    }

    .case-meta {
        flex-direction: column;
        gap: 10px;
    }

        .case-meta > div {
            border: none !important;
            padding-left: 0 !important;
        }
}

/* INDUSTRIES grid on mobile */
@media (max-width: 760px) {
    .industry-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .industry-card {
        padding: 24px 20px !important;
    }
}

/* WHY VYAS list on mobile */
@media (max-width: 640px) {
    .why-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .why-num {
        font-size: 0.6875rem;
    }
}

/* IMPACT metrics */
@media (max-width: 640px) {
    .metrics-grid {
        gap: 12px;
    }

    .metric-card {
        padding: 24px 18px !important;
    }

    .metric-val {
        font-size: 2.25rem !important;
    }
}

/* TESTIMONIALS */
@media (max-width: 760px) {
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .t-card {
        padding: 24px 20px !important;
    }

    .t-quote {
        font-size: 0.9375rem !important;
        line-height: 1.55;
    }
}

/* CTA STRIP */
@media (max-width: 760px) {
    .cta-inner {
        flex-direction: column;
        gap: 24px;
        text-align: left;
        align-items: flex-start;
    }

    .cta-strip h2 {
        font-size: 1.75rem !important;
    }
}

/* FOOTER on mobile */
@media (max-width: 640px) {
    .site-footer {
        padding: 48px 0 24px;
    }

    .footer-grid {
        gap: 32px 20px !important;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding-top: 24px;
    }

    .footer-brand img {
        height: 36px !important;
    }
}

/* PAGE HERO (inner pages like services-*.html) on mobile */
@media (max-width: 760px) {
    .page-hero {
        padding: 80px 0 56px !important;
    }

        .page-hero h1 {
            font-size: clamp(2rem, 6.5vw, 2.5rem) !important;
        }

        .page-hero .lead {
            font-size: 1rem !important;
        }

    .breadcrumb {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
}

/* BUTTONS on mobile: bigger touch targets */
@media (max-width: 640px) {
    .btn {
        padding: 14px 22px;
        font-size: 0.9375rem;
    }

    .btn-accent, .btn-secondary {
        min-height: 46px;
    }
}

/* FORMS on mobile */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    input, textarea, select {
        font-size: 16px !important; /* prevents iOS zoom */
    }
}

/* Prevent horizontal scroll site-wide */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix any elements that might overflow viewport width */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

.hero-composition svg {
    max-width: 100%;
}

/* Stop glow elements from causing horizontal overflow on mobile */
@media (max-width: 760px) {
    .hero-glow-1, .hero-glow-2 {
        width: 320px !important;
        height: 320px !important;
        filter: blur(60px);
    }

    .hero-glow-3 {
        width: 280px !important;
        height: 280px !important;
    }
}

/* Logo white-box: ensure stays transparent (critical at any viewport) */
.brand, .footer-brand .brand {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================
   TIGHTEN VERTICAL SPACING
   Reduces section padding and gap values so the
   page feels fuller and more intentional without
   losing premium breathing room.
   ========================================== */

/* Base section rhythm: 72→56 desktop, already 64/48 on mobile (mobile kept) */
.section {
    padding: 56px 0 !important;
}

.section-lg {
    padding: 72px 0 !important;
}

.section-sm {
    padding: 36px 0 !important;
}

/* Home hero: tighten from 112/104 to 88/72 */
.home-hero {
    padding: 48px 0 60px !important;
}

/* Page-hero (inner pages): tighten */
.page-hero {
    padding: 72px 0 48px !important;
}

/* Section heads: trim bottom margin so h2 → content is tighter */
.sect-head {
    margin-bottom: 32px !important;
}

    .sect-head .lead {
        margin-top: 12px !important;
    }

/* Remove/shrink horizontal-rule section dividers */
hr.div {
    margin: 0 !important;
    border: 0 !important;
    height: 0 !important;
}

/* Client band: tighter */
.clients-band {
    padding: 32px 0 !important;
}

.clients-band-label {
    margin-bottom: 18px !important;
}

/* AI Innovations intro header: tighter */
.ai-innovations .sect-head {
    margin-bottom: 32px !important;
}

/* VIP spotlight within AI section: pull closer to intro */
.vip-spotlight {
    margin-top: 40px !important;
    padding: 40px 40px !important;
}

/* Homepage: reduce blank gap before + after closer paragraph */
.ai-innov-closer {
    margin-top: 28px !important;
    padding: 20px 24px !important;
    border-top: none !important;
}

    .ai-innov-closer p {
        font-size: 1.0625rem !important;
    }

/* How we deliver: tighten spacing between steps and heading */
.deliver-steps {
    margin-top: 8px !important;
}

/* Metrics (Impact) row: reduce top gap */
.metrics-grid {
    margin-top: 8px !important;
}

/* Why-Vyas list: bring items closer */
.why-list {
    margin-top: 12px !important;
}

.why-item {
    padding: 20px 0 !important;
}

/* Showcase / industry / services grids: tighten */
.showcase {
    gap: 16px !important;
    margin-top: 8px !important;
}

.industry-grid {
    gap: 14px !important;
}

/* CTA strip: smaller vertical feel */
.cta-strip {
    padding: 56px 0 !important;
}

.cta-inner {
    gap: 20px !important;
}

/* Hero strip metrics: trimmer */
.hero-strip {
    margin-top: 40px !important;
    padding-top: 28px !important;
}

/* Two-col layouts (used on inner pages), less stacking gap */
.two-col {
    gap: 40px !important;
}

/* Divider trim: remove extra vertical space around <hr> */
section + hr,
hr + section {
    margin: 0 !important;
}

/* Page hero breadcrumb margin trim */
.breadcrumb {
    margin-bottom: 16px !important;
}

/* Footer: tighter vertical rhythm */
.site-footer {
    padding: 48px 0 24px !important;
}

.footer-grid {
    margin-bottom: 32px !important;
}

/* Mobile re-tighten (still comfortable on phone) */
@media (max-width: 760px) {
    .section {
        padding: 44px 0 !important;
    }

    .section-sm {
        padding: 28px 0 !important;
    }

    .home-hero {
        padding: 64px 0 48px !important;
    }

    .page-hero {
        padding: 56px 0 32px !important;
    }

    .vip-spotlight {
        padding: 28px 22px !important;
        margin-top: 28px !important;
    }

    .sect-head {
        margin-bottom: 24px !important;
    }

    .cta-strip {
        padding: 44px 0 !important;
    }

    .site-footer {
        padding: 36px 0 20px !important;
    }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .section {
        padding: 36px 0 !important;
    }

    .home-hero {
        padding: 52px 0 40px !important;
    }
}

/* ==========================================
   TESTIMONIALS on light sections, fix visibility
   ========================================== */
.section-light .testimonial-box {
    background: #FFFFFF;
    border-color: rgba(27, 36, 55, 0.08);
}

    .section-light .testimonial-box:hover {
        border-color: rgba(200, 16, 46, 0.3);
        box-shadow: 0 20px 40px -20px rgba(27, 36, 55, 0.15);
    }

    .section-light .testimonial-box blockquote {
        color: #1B2437;
        font-weight: 500;
    }

    .section-light .testimonial-box .em {
        color: #1B2437;
        background: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
    }

.section-light .testimonial-more {
    color: #475569;
    margin-top: 20px;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.section-light .testimonial-box cite {
    border-top-color: rgba(27, 36, 55, 0.08);
}

.section-light .testimonial-box .cite-info strong {
    color: #1B2437 !important;
    font-weight: 700;
}

.section-light .testimonial-box .cite-info span {
    color: #64748B !important;
}

.section-light .testimonial-box .person-avatar {
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(200,16,46,0.15);
}

.section-light .testimonial-box::before {
    /* Quote mark in light section */
    color: rgba(200, 16, 46, 0.35);
}

/* ==========================================
   CONTEXT-AWARE STRONG EMPHASIS
   .txt-strong flips color based on whether it sits
   inside a .section-light or dark section.
   Fixes white-on-cream invisibility issue.
   ========================================== */
.txt-strong {
    color: var(--text);
    font-weight: 700;
}

.section-light .txt-strong,
.ai-innovations .txt-strong,
.page-hero + .section-light .txt-strong {
    color: #1B2437 !important;
    font-weight: 700;
}

/* Also apply to any remaining inline var(--text) inside light sections as a safety net */
.section-light [style*="color:var(--text)"],
.section-light [style*="color: var(--text)"] {
    color: #1B2437 !important;
}

/* Light-section paragraph safety: ensure body text is dark enough */
.section-light p {
    color: #475569;
}

.section-light .lead {
    color: #334155;
}

.section-light h1, .section-light h2, .section-light h3, .section-light h4 {
    color: #1B2437;
}

.section-light .feature-list li {
    color: #334155;
}

    .section-light .feature-list li strong {
        color: #1B2437;
    }

/* ==========================================
   BLOGS PAGE, Featured card + grid
   ========================================== */
.blog-featured {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 40px;
    align-items: center;
    padding: 40px;
    background: linear-gradient(145deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 30px 60px -30px rgba(27, 36, 55, 0.15);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
    position: relative;
    overflow: hidden;
}

    .blog-featured::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(200, 16, 46, 0.2) 0%, transparent 50%, rgba(27,36,55,0.15) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .blog-featured:hover {
        transform: translateY(-4px);
        box-shadow: 0 40px 80px -20px rgba(27, 36, 55, 0.2);
    }

.blog-featured-content {
    min-width: 0;
}

    .blog-featured-content h2 {
        font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
        line-height: 1.2;
        margin: 16px 0 14px;
        letter-spacing: -0.025em;
    }

    .blog-featured-content .lead {
        margin-bottom: 20px;
    }

.blog-featured-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #0078D4, #1B2437);
    color: #FFFFFF;
    font-family: var(--f-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
}

.blog-featured-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-featured-deco svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}

@media (max-width: 900px) {
    .blog-featured {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 24px;
    }

    .blog-featured-visual {
        order: -1;
    }

    .blog-featured-deco svg {
        max-width: 180px;
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1000px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.blog-card {
    background: #FFFFFF;
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.35s;
}

    .blog-card:hover {
        transform: translateY(-4px);
        border-color: rgba(200, 16, 46, 0.3);
        box-shadow: 0 20px 40px -16px rgba(27, 36, 55, 0.15);
    }

.blog-card-link {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.blog-cat {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--f-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 100px;
    border: 1px solid;
}

.cat-spa {
    color: #0078D4;
    border-color: rgba(200,16,46,0.3);
    background: rgba(200,16,46,0.06);
}

.cat-vip {
    color: #1B2437;
    border-color: rgba(200,16,46,0.15);
    background: rgba(200,16,46,0.15);
}

.cat-d365 {
    color: #1F3A93;
    border-color: rgba(27,36,55,0.15);
    background: rgba(27,36,55,0.15);
}

.cat-ai {
    color: #9333EA;
    border-color: rgba(147,51,234,0.3);
    background: rgba(147,51,234,0.06);
}

.cat-sales {
    color: #0891B2;
    border-color: rgba(8,145,178,0.3);
    background: rgba(8,145,178,0.06);
}

.cat-constr {
    color: #D97706;
    border-color: rgba(217,119,6,0.3);
    background: rgba(217,119,6,0.06);
}

.cat-press {
    color: #0F766E;
    border-color: rgba(15,118,110,0.3);
    background: rgba(15,118,110,0.06);
}

.cat-gen {
    color: #475569;
    border-color: rgba(71,85,105,0.3);
    background: rgba(71,85,105,0.06);
}

.blog-date {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: #64748B;
}

.blog-card h3 {
    font-size: 1.0625rem !important;
    line-height: 1.35;
    margin-bottom: 12px;
    color: #1B2437;
    letter-spacing: -0.01em;
}

.blog-card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 18px;
    flex: 1;
}

.blog-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0078D4;
    margin-top: auto;
}

    .blog-read svg {
        width: 14px;
        height: 14px;
        transition: transform 0.3s;
    }

.blog-card-link:hover .blog-read svg,
.blog-featured:hover .blog-read svg {
    transform: translate(2px,-2px);
}

/* ==========================================
   FLOATING PILL HEADER (Tachyon-inspired)
   Wraps the top nav in a rounded capsule with
   soft shadow, margin around it.
   ========================================== */
body {
    padding-top: 0;
}

@media (max-width: 760px) {
    body {
        padding-top: 0;
    }
}

.site-header {
    position: fixed !important;
    top: 14px;
    left: 14px;
    right: 14px;
    width: auto !important;
    max-width: calc(100% - 28px);
    margin: 0 !important;
    background: rgba(248, 249, 252, 0.85) !important;
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(27, 36, 55, 0.08) !important;
    border-radius: 60px !important;
    box-shadow: 0 10px 40px -10px rgba(27, 36, 55, 0.12), 0 2px 8px rgba(27, 36, 55, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
    z-index: 100;
    transition: top 0.3s ease, box-shadow 0.3s ease;
}

    .site-header .container {
        padding: 10px 24px !important;
    }

    .site-header .brand img {
        filter: none;
    }

    .site-header.scrolled .nav-link {
        color: #1B2437 !important;
        font-weight: 500;
    }

        .site-header.scrolled .nav-link:hover,
        .site-header.scrolled .nav-link.active {
            color: #0078D4 !important;
        }

    .site-header .nav-cta {
        background: #0078D4 !important;
        color: #FFFFFF !important;
        border: none !important;
        padding: 10px 22px !important;
        border-radius: 50px !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2);
    }

@media (max-width: 1024px) {
    .site-header .nav-cta {
        display: none !important;
    }
}

.site-header .nav-cta:hover {
    background: #005A9E !important;
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.35) !important;
    transform: translateY(-2px) !important;
}

.site-header.scrolled .nav-toggle {
    color: #1B2437 !important;
}

.site-header .dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(27, 36, 55, 0.08) !important;
    box-shadow: 0 20px 50px -10px rgba(27, 36, 55, 0.15) !important;
    border-radius: 16px !important;
}

.site-header .dropdown-link {
    color: #1B2437 !important;
}

    .site-header .dropdown-link:hover {
        background: rgba(200, 16, 46, 0.04) !important;
    }

    .site-header .dropdown-link .dl-title {
        color: #1B2437 !important;
        font-weight: 600;
    }

    .site-header .dropdown-link .dl-sub {
        color: #64748B !important;
    }

    .site-header .dropdown-link:hover .dl-title {
        color: #0078D4 !important;
    }

.site-header .dropdown-group-label {
    color: #64748B !important;
}

.site-header .dropdown-group-label {
    color: #64748B !important;
}

/* Mobile nav panel becomes its own floating pill below header */
@media (max-width: 1024px) {
    .mobile-nav {
        position: absolute !important;
        top: 76px !important;
        left: 14px;
        right: 14px;
        background: rgba(248, 249, 252, 0.98) !important;
        backdrop-filter: blur(24px) saturate(1.8);
        border: 1px solid rgba(27, 36, 55, 0.1) !important;
        border-radius: 24px !important;
        box-shadow: 0 20px 50px -10px rgba(27, 36, 55, 0.15) !important;
    }

        .mobile-nav a {
            color: #1B2437 !important;
        }
}


/* ==========================================
   FULL-BLEED HERO CAROUSEL (Tachyon-style)
   Edge-to-edge backgrounds + centered text overlay
   ========================================== */
.hero-fullbleed {
    position: relative;
    width: 100%;
    height: clamp(540px, 64vh, 620px);
    overflow: hidden;
    margin: 0;
    padding: 0;
    isolation: isolate;
    background: #070B16;
}

.hero-carousel-v2 {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Each slide stacks on top of others. Inactive slides fade out. */
.hfb-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s linear 1s;
    pointer-events: none;
}

    .hfb-slide.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 1s ease-in-out, visibility 0s linear 0s;
        pointer-events: auto;
        z-index: 2;
    }

/* Background layer, full bleed */
.hfb-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

/* User-supplied image fills each slide; set src in index.html */
.hfb-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

    /* Hide the image slot until a real src is set (prevents broken-image icon) */
    .hfb-bg-img:not([src]),
    .hfb-bg-img[src=""] {
        display: none;
    }

/* Dark overlay over backgrounds for text readability */
.hfb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.7) 100%), radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
}

/* Content overlay, centered, vertically and horizontally */
.hfb-content {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0 44px;
}

    .hfb-content .container {
        text-align: center;
        max-width: 920px;
        margin: 0 auto;
        padding: 0 24px;
    }

/* Eyebrow pill */
.hfb-eyebrow {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    font-family: var(--f-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: hfbFadeUp 0.9s cubic-bezier(0.2, 1, 0.3, 1) 0.1s forwards;
}

/* Headline, large, bold white */
.hfb-headline {
    font-family: var(--f-display);
    font-size: clamp(1.875rem, 2vw + 0.85rem, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 18px;
    opacity: 0;
    transform: translateY(20px);
    animation: hfbFadeUp 1.1s cubic-bezier(0.2, 1, 0.3, 1) 0.25s forwards;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Accent gradient, per-theme color */
.hfb-accent {
    -webkit-text-fill-color: currentColor;
    background: none;
}

.hfb-accent-blue {
    color: #F9FAFB;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.hfb-accent-pink {
    color: #0078D4;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.hfb-accent-purple {
    color: #0078D4;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.hfb-accent-green {
    color: #16A34A;
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* Subtitle */
.hfb-sub {
    font-family: var(--f-sans);
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    margin: 0 auto 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: hfbFadeUp 1.1s cubic-bezier(0.2, 1, 0.3, 1) 0.4s forwards;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* CTA button, gradient pill */
.hfb-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #0078D4;
    color: #FFFFFF;
    font-family: var(--f-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 12px 30px -8px rgba(0, 120, 212, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(20px);
    animation: hfbFadeUp 1.1s cubic-bezier(0.2, 1, 0.3, 1) 0.55s forwards;
}

    .hfb-cta:hover {
        background: #005A9E;
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -10px rgba(0, 120, 212, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }

    .hfb-cta:active {
        transform: translateY(-1px);
    }

    .hfb-cta::after {
        content: '→';
        font-size: 1.05em;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hfb-cta:hover::after {
        transform: translateX(4px);
    }

.hfb-cta-pink {
    background: #0078D4;
    box-shadow: 0 12px 30px -8px rgba(0, 120, 212, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

    .hfb-cta-pink:hover {
        background: #005A9E;
        box-shadow: 0 18px 40px -10px rgba(0, 120, 212, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }

.hfb-cta-purple {
    background: #0078D4;
    box-shadow: 0 12px 30px -8px rgba(0, 120, 212, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

    .hfb-cta-purple:hover {
        background: #005A9E;
        box-shadow: 0 18px 40px -10px rgba(0, 120, 212, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }

.hfb-cta-green {
    background: #16A34A;
    box-shadow: 0 12px 30px -8px rgba(22, 163, 74, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

    .hfb-cta-green:hover {
        background: #15803D;
        box-shadow: 0 18px 40px -10px rgba(22, 163, 74, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }

@keyframes hfbFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Restart fade-up animation when slide becomes active */
.hfb-slide:not(.active) .hfb-eyebrow,
.hfb-slide:not(.active) .hfb-headline,
.hfb-slide:not(.active) .hfb-sub,
.hfb-slide:not(.active) .hfb-cta {
    animation: none;
    opacity: 0;
    transform: translateY(20px);
}

/* Dot indicators (small dots like Tachyon, NOT the long pills) */
.hfb-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hfb-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

    .hfb-dot:hover {
        background: rgba(255, 255, 255, 0.55);
        transform: scale(1.15);
    }

    .hfb-dot.active {
        background: #FFFFFF;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    }

/* Mobile responsiveness */
@media (max-width: 760px) {
    .hero-fullbleed {
        height: clamp(520px, 80vh, 640px);
    }

    .hfb-content {
        padding: 60px 0 80px;
    }

        .hfb-content .container {
            padding: 0 20px;
        }

    .hfb-eyebrow {
        font-size: 0.6875rem;
        padding: 6px 14px;
        margin-bottom: 24px;
    }

    .hfb-sub {
        margin-bottom: 32px;
    }

    .hfb-cta {
        padding: 13px 26px;
        font-size: 0.875rem;
    }

    .hfb-dots {
        bottom: 22px;
        padding: 8px 12px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .hero-fullbleed {
        height: clamp(480px, 82vh, 580px);
    }

    .hfb-headline {
        letter-spacing: -0.025em;
    }
}

/* Reduced motion: pause background drift, no auto-rotate (handled in JS) */
@media (prefers-reduced-motion: reduce) {
    .hfb-bg-svg {
        animation: none;
    }

    .hfb-eyebrow, .hfb-headline, .hfb-sub, .hfb-cta {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Transparent nav sits over the hero — no body padding needed at top */
body {
    padding-top: 0;
}

/* ==========================================
   BLOG POST PAGE, article body styling
   ========================================== */
.post-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.post-byline-sep {
    color: rgba(148, 163, 184, 0.5);
}

.post-body {
    padding-bottom: 80px;
}

.post-article {
    max-width: 760px;
    margin: 0 auto;
}

    .post-article p {
        font-size: 1.0625rem;
        line-height: 1.75;
        color: #334155;
        margin-bottom: 22px;
    }

        .post-article p:first-child {
            font-size: 1.1875rem;
            line-height: 1.7;
            color: #1e293b;
            margin-bottom: 28px;
        }

        .post-article p strong, .post-article p .em {
            color: #1B2437;
            font-weight: 600;
        }

.post-cta-block {
    margin-top: 56px;
    padding: 36px 32px;
    background: linear-gradient(155deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 16px;
    text-align: center;
}

    .post-cta-block h3 {
        margin: 0 0 12px;
        color: #1B2437;
        font-size: 1.25rem;
    }

    .post-cta-block p {
        margin: 0 0 24px;
        color: #475569;
        font-size: 0.9375rem;
    }

.post-back {
    margin: 56px auto 0;
    text-align: center;
}

    .post-back .btn svg {
        width: 16px;
        height: 16px;
    }

@media (max-width: 760px) {
    .post-article p {
        font-size: 1rem;
        line-height: 1.7;
    }

        .post-article p:first-child {
            font-size: 1.0625rem;
        }

    .post-cta-block {
        padding: 28px 24px;
    }
}

/* ===============================================================
   MOBILE COMPATIBILITY FIXES (v45)
   Comprehensive responsive overrides to fix issues on phones.
   This block sits at the end so it wins the cascade.
   =============================================================== */

/* --- Header positioning --- 
   The header was set to position: absolute earlier so it scrolls 
   away. On mobile that's fine, but body padding-top must shrink. */
@media (max-width: 1024px) {
    body {
        padding-top: 0 !important;
    }
}

@media (max-width: 640px) {
    body {
        padding-top: 0 !important;
    }
    /* Floating pill header narrower margins + smaller padding on phones */
    .site-header {
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        border-radius: 40px !important;
        max-width: calc(100% - 16px) !important;
    }

        .site-header .container {
            padding: 8px 14px !important;
        }

        .site-header .brand img {
            max-height: 36px !important;
            width: auto !important;
        }
}

/* --- Mobile nav drawer fixes ---
   The drawer was opening above the viewport when scrolled.
   Switch back to position: fixed so it always anchors below the
   header regardless of scroll position. Reset conflicting earlier rules. */
@media (max-width: 1024px) {
    .mobile-nav {
        position: fixed !important;
        top: 78px !important;
        left: 8px !important;
        right: 8px !important;
        z-index: 99 !important;
        background: rgba(248, 249, 252, 0.98) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
        backdrop-filter: blur(20px) saturate(1.8) !important;
        border: 1px solid rgba(27, 36, 55, 0.12) !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 50px -10px rgba(27, 36, 55, 0.18) !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease, opacity 0.2s ease, visibility 0s linear 0.2s !important;
        /* CRITICAL: closed drawer must NOT capture pointer events on the area where it sits.
       Without these, the invisible drawer rectangle swallows taps to hero CTAs and other
       links behind it on mobile. */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

        .mobile-nav.open {
            max-height: calc(100vh - 96px) !important;
            overflow-y: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transition: max-height 0.4s ease, opacity 0.2s ease, visibility 0s linear 0s !important;
        }

        .mobile-nav ul {
            list-style: none !important;
            padding: 14px 22px 18px !important;
            margin: 0 !important;
        }

        .mobile-nav > ul > li {
            border-bottom: 1px solid rgba(27, 36, 55, 0.08) !important;
        }

            .mobile-nav > ul > li:last-child {
                border-bottom: none !important;
            }

        .mobile-nav a {
            display: block !important;
            padding: 12px 0 !important;
            font-size: 0.9375rem !important;
            color: #1B2437 !important;
            font-weight: 500 !important;
            text-decoration: none !important;
        }

        .mobile-nav .mobile-group {
            padding: 0 0 10px 12px !important;
            border-left: 2px solid rgba(27, 36, 55, 0.1) !important;
        }

        .mobile-nav .mobile-group-label {
            font-family: var(--f-mono) !important;
            font-size: 0.6875rem !important;
            letter-spacing: 0.1em !important;
            text-transform: uppercase !important;
            color: #64748B !important;
            padding: 12px 0 4px 12px !important;
        }

        .mobile-nav .mobile-group a {
            padding: 7px 0 7px 12px !important;
            font-size: 0.875rem !important;
            color: #475569 !important;
        }

        .mobile-nav .mobile-cta {
            display: block !important;
            margin: 14px 22px 18px !important;
            text-align: center !important;
            padding: 13px !important;
            background: linear-gradient(135deg, #0078D4 0%, #1B2437 100%) !important;
            color: #FFFFFF !important;
            border-radius: 100px !important;
            font-weight: 600 !important;
            font-size: 0.9375rem !important;
        }

    body.nav-open {
        overflow: hidden !important;
    }
}

/* --- Hero carousel, mobile sizing --- 
   Originally clamp(560px, 78vh, 760px). Way too tall on phones. */
@media (max-width: 1024px) {
    .hero-fullbleed {
        height: clamp(440px, 70vh, 580px) !important;
    }

    .hfb-content {
        padding: 56px 0 60px !important;
    }
}

@media (max-width: 640px) {
    .hero-fullbleed {
        height: clamp(420px, 78vh, 560px) !important;
    }

    .hfb-content {
        padding: 52px 0 52px !important;
    }

        .hfb-content .container {
            padding: 0 18px !important;
        }

    .hfb-eyebrow {
        font-size: 0.625rem !important;
        padding: 5px 12px !important;
        margin-bottom: 16px !important;
        letter-spacing: 0.14em !important;
    }

    .hfb-headline {
        font-size: clamp(1.5rem, 7.5vw, 2.25rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 16px !important;
    }

    .hfb-sub {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
        margin-bottom: 24px !important;
    }

    .hfb-cta {
        padding: 12px 22px !important;
        font-size: 0.875rem !important;
    }

    .hfb-dots {
        bottom: 18px !important;
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    .hfb-dot {
        width: 7px !important;
        height: 7px !important;
    }
}

/* --- Container padding on small phones --- */
@media (max-width: 640px) {
    .container {
        padding: 0 16px !important;
    }
}

@media (max-width: 380px) {
    .container {
        padding: 0 12px !important;
    }
}

/* --- Section padding tighter on phones --- */
@media (max-width: 640px) {
    .section, .section-light, .section-sm {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    .home-hero {
        padding: 32px 0 40px !important;
    }

    .page-hero {
        padding: 48px 0 32px !important;
    }

    .sect-head {
        margin-bottom: 24px !important;
    }

        .sect-head h2 {
            font-size: clamp(1.5rem, 5vw + 0.5rem, 2.25rem) !important;
            line-height: 1.2 !important;
            letter-spacing: -0.025em !important;
        }

        .sect-head .lead {
            font-size: 0.9375rem !important;
            line-height: 1.55 !important;
        }
    /* Page hero h1 */
    .page-hero h1 {
        font-size: clamp(1.75rem, 6vw + 0.5rem, 2.5rem) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
    }

    .page-hero .lead {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
    }
}

/* --- Showcase / ISV grid on mobile --- */
@media (max-width: 640px) {
    .showcase {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 28px !important;
    }

    .sc-card {
        min-height: auto !important;
        padding: 24px 22px !important;
    }

        .sc-card h3 {
            font-size: 1.0625rem !important;
            line-height: 1.3 !important;
        }

        .sc-card p {
            font-size: 0.875rem !important;
            line-height: 1.55 !important;
            margin-bottom: 16px !important;
        }

    .sc-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 18px !important;
    }
}

/* --- Industry / Why / Metrics grids on mobile --- */
@media (max-width: 640px) {
    .industry-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* --- Two-column blocks on mobile --- */
@media (max-width: 640px) {
    .two-col {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .sticky-side {
        position: static !important;
    }
}

/* --- Trust strip on mobile --- */
@media (max-width: 640px) {
    .trust-strip {
        padding: 18px 0 !important;
    }

    .trust-row {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
}

/* --- Clients band on mobile --- */
@media (max-width: 640px) {
    .clients-block {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .clients-label {
        text-align: center !important;
    }

    .client-logo-item {
        height: 56px !important;
        min-width: 130px !important;
        padding: 10px 18px !important;
    }

    .client-logo-img {
        max-height: 28px !important;
        max-width: 100px !important;
    }
}

/* --- Footer on mobile --- */
@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
    }

    .footer-col h4 {
        font-size: 0.875rem !important;
        margin-bottom: 14px !important;
    }

    .footer-col a {
        font-size: 0.8125rem !important;
    }

    .site-footer {
        padding: 40px 0 28px !important;
    }
}

/* --- Buttons on mobile fit content area --- */
@media (max-width: 640px) {
    .btn {
        padding: 11px 18px !important;
        font-size: 0.875rem !important;
    }

    .cta-actions {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

        .cta-actions .btn {
            width: 100% !important;
            justify-content: center !important;
        }
}

/* --- Testimonials on mobile --- */
@media (max-width: 640px) {
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .testimonial-box {
        padding: 28px 22px !important;
    }

        .testimonial-box blockquote {
            font-size: 1rem !important;
            line-height: 1.55 !important;
        }
}

/* --- VIP spotlight on mobile (already exists at 900px but reinforce on phones) --- */
@media (max-width: 640px) {
    .vip-spotlight {
        padding: 28px 20px !important;
        margin-top: 32px !important;
        border-radius: 14px !important;
    }

        .vip-spotlight .vip-heading {
            font-size: 1.5rem !important;
            line-height: 1.2 !important;
        }

        .vip-spotlight .vip-tagline {
            font-size: 0.9375rem !important;
        }

        .vip-spotlight .vip-actions {
            flex-direction: column !important;
            gap: 10px !important;
            align-items: stretch !important;
        }

            .vip-spotlight .vip-actions .btn {
                width: 100% !important;
                justify-content: center !important;
            }
}

/* --- Blog grid on mobile --- */
@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .blog-card-link {
        padding: 22px 20px !important;
    }

    .blog-card h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    .blog-card p {
        font-size: 0.8125rem !important;
    }

    .blog-featured {
        grid-template-columns: 1fr !important;
        padding: 24px 20px !important;
        gap: 20px !important;
    }

    .blog-featured-content h2 {
        font-size: 1.375rem !important;
        line-height: 1.2 !important;
    }
}

/* --- Prevent any horizontal overflow at all costs --- */
html, body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100% !important;
}
/* Allow SVG/IMG to scale within container, but inline-icon SVGs inside text
   links must keep their tiny 14px size and not stretch to fill the parent.
   Without this, links like "Submit a support ticket →" render giant arrows. */
img {
    max-width: 100% !important;
    height: auto;
}

svg {
    max-width: 100%;
}
/* Inline-text icon SVGs, small arrows inside links and list values */
.info-list .val a svg,
.office-contacts a svg,
.cite-info a svg,
a:not(.btn):not(.sc-card):not(.blog-card-link):not(.hfb-cta):not(.office-card) > svg:not([width]):not([height]) {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    flex: 0 0 auto !important;
    vertical-align: middle;
    display: inline-block;
}

/* --- Form inputs full width on mobile --- */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    input, textarea, select {
        font-size: 16px !important; /* 16px prevents iOS zoom on focus */
    }
}

/* --- Eyebrows scaled down on mobile --- */
@media (max-width: 640px) {
    .eyebrow {
        font-size: 0.6875rem !important;
        letter-spacing: 0.12em !important;
    }
}

/* ===============================================================
   MOBILE REVEAL DISABLE (v46)
   On phones, disable the reveal/stagger animations entirely.
   Mobile users scroll fast and the IntersectionObserver thresholds
   can leave content stranded at opacity:0. Show everything always.
   =============================================================== */
@media (max-width: 1024px) {
    .reveal,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ===============================================================
   CASE STUDY page, light-section overrides
   The .case-block component was originally designed for dark sections.
   When placed inside .section-light, headings and paragraphs need 
   navy + slate text colors instead of white + light-grey.
   =============================================================== */
.section-light .case-block h3 {
    color: #1B2437 !important;
}

.section-light .case-block p,
.section-light .case-block .lead {
    color: #475569 !important;
}

.section-light .case-block .case-quote {
    color: #1e293b !important;
    background: rgba(200, 16, 46, 0.04) !important;
}

.section-light .case-block .person-avatar {
    color: #FFFFFF !important;
}

.section-light .case-block .cite-info strong {
    color: #1B2437 !important;
}

.section-light .case-block .cite-info span {
    color: #64748B !important;
}

.section-light .case-block .case-meta .lbl {
    color: #64748B !important;
}

.section-light .case-block .case-meta .val {
    color: #1B2437 !important;
}

.section-light .case-block:hover {
    box-shadow: 0 24px 50px -24px rgba(27, 36, 55, 0.15);
}

/* ===============================================================
   Testimonial italic emphasis, fix clipped trailing letter
   Italic glyphs lean right past the inline box; with background-clip:text
   the rightmost edge gets cropped. Adding micro-padding + inline-block
   gives the italic enough room to render its full glyph.
   =============================================================== */
.testimonial-box .em {
    display: inline-block;
    padding-right: 0.08em;
    margin-right: -0.04em;
}

/* ===============================================================
   OUR OFFICES, Contact + About pages
   =============================================================== */
.office-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

@media (max-width: 1024px) {
    .office-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
        /* When 3 cards in 2-col grid, the 3rd spans full width or sits centered */
        .office-grid .office-card:nth-child(3) {
            grid-column: 1 / -1;
            max-width: calc(50% - 9px);
            margin: 0 auto;
        }
}

.office-card {
    position: relative;
    padding: 32px 30px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), border-color 0.3s, box-shadow 0.4s;
}

    .office-card:hover {
        transform: translateY(-3px);
        border-color: rgba(200, 16, 46, 0.35);
        box-shadow: 0 24px 50px -24px rgba(200, 16, 46, 0.18);
    }

.office-flag {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.15) 0%, rgba(200,16,46,0.15) 100%);
    border: 1px solid rgba(200, 16, 46, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: var(--logo-crimson);
}

    .office-flag svg {
        width: 22px;
        height: 22px;
    }

.office-tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.office-card h3 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
}

.office-address {
    font-style: normal;
    color: var(--text-dim);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.office-contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .office-contacts li {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 14px;
        align-items: baseline;
    }

.office-lbl {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.office-val {
    color: var(--logo-crimson);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    word-break: break-word;
}

    .office-val:hover {
        color: var(--text);
    }

/* On light sections */
.section-light .office-card {
    background: #FFFFFF;
    border-color: rgba(27, 36, 55, 0.08);
}

    .section-light .office-card:hover {
        border-color: rgba(200, 16, 46, 0.3);
        box-shadow: 0 24px 50px -24px rgba(27, 36, 55, 0.12);
    }

    .section-light .office-card h3 {
        color: #1B2437;
    }

    .section-light .office-card .office-tag {
        color: #64748B;
    }

.section-light .office-address {
    color: #475569;
    border-bottom-color: rgba(27, 36, 55, 0.08);
}

.section-light .office-lbl {
    color: #64748B;
}

/* Mobile, stack offices */
@media (max-width: 760px) {
    .office-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    .office-card {
        padding: 26px 22px;
    }

        .office-card h3 {
            font-size: 1.125rem;
        }

    .office-contacts li {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .office-lbl {
        font-size: 0.625rem;
    }
}

/* ===============================================================
   FAQ accordion, uses native <details>/<summary>
   =============================================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 880px;
    margin: 0 auto;
}

.faq-item {
    background: #FFFFFF;
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.3s;
}

    .faq-item[open] {
        border-color: rgba(200, 16, 46, 0.2);
        box-shadow: 0 16px 40px -20px rgba(27, 36, 55, 0.12);
    }

    .faq-item summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        padding: 22px 26px;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::marker {
            content: '';
        }

.faq-q {
    color: #1B2437;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(200, 16, 46, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0078D4;
    transition: transform 0.3s ease, background 0.25s;
}

    .faq-icon svg {
        width: 16px;
        height: 16px;
    }

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    background: rgba(200, 16, 46, 0.12);
}

.faq-a {
    padding: 0 26px 22px;
    border-top: 1px solid rgba(27, 36, 55, 0.06);
    margin-top: -2px;
    padding-top: 18px;
}

    .faq-a p {
        color: #475569;
        font-size: 0.9375rem;
        line-height: 1.65;
        margin: 0;
    }

/* Mobile */
@media (max-width: 760px) {
    .faq-item summary {
        padding: 18px 20px;
        gap: 14px;
    }

    .faq-q {
        font-size: 1rem;
    }

    .faq-a {
        padding: 16px 20px 20px;
    }

        .faq-a p {
            font-size: 0.9rem;
        }

    .faq-icon {
        width: 28px;
        height: 28px;
    }

        .faq-icon svg {
            width: 14px;
            height: 14px;
        }
}

/* HQ badge, small subtle marker on the headquarters card */
.office-hq-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.12) 0%, rgba(200,16,46,0.15) 100%);
    border: 1px solid rgba(200, 16, 46, 0.25);
    border-radius: 100px;
    color: var(--logo-crimson);
    font-weight: 600;
    vertical-align: middle;
}

.section-light .office-hq-badge {
    color: #0078D4;
}

/* Mobile fully stacks 3 cards single column with no max-width override */
@media (max-width: 760px) {
    .office-grid .office-card:nth-child(3) {
        max-width: none;
        margin: 0;
        grid-column: auto;
    }
}

/* ===============================================================
   Contact page, clean up any decorative shapes that may escape
   section boundaries on the right side.
   In the bundled output the contact page lives at #page-contact.
   In standalone mode we rely on body class added by the helper.
   =============================================================== */
/* (Earlier overflow:hidden rule for contact page removed in v53 once the
   real cause of the giant arrows was identified, they were inline icon
   SVGs being stretched by a global max-width:100% rule. Fix is in the
   inline-icon SVG block earlier in this stylesheet.) */

/* ===============================================================
   Impact page, metrics-block contrast fix
   .metrics-block has dark navy background (designed for dark sections).
   When placed inside .section-light, the page-level navy text colors
   make headings and labels invisible. Restore dark-mode text colors
   inside the dark card.
   =============================================================== */
.section-light .metrics-block h1,
.section-light .metrics-block h2,
.section-light .metrics-block h3,
.section-light .metrics-block h4 {
    color: #FFFFFF !important;
}

.section-light .metrics-block .grad-text {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-light .metrics-block .lead,
.section-light .metrics-block p {
    color: rgba(226, 232, 240, 0.85) !important;
}

.section-light .metrics-block .eyebrow {
    color: #0078D4 !important;
}

.section-light .metrics-block .metric .lbl {
    color: #0078D4 !important;
}

.section-light .metrics-block .metric .desc {
    color: rgba(226, 232, 240, 0.8) !important;
}

.section-light .metrics-block .metric .num {
    /* Keep the existing crimson-purple gradient */
}

/* ===============================================================
   CASE STUDY, bullet list (Royal Brass) and summary grid (Virtual Supply)
   These render inside .case-block on the case-studies page.
   The .section-light .case-block overrides handle text colors.
   =============================================================== */
.case-bullets {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .case-bullets li {
        position: relative;
        padding-left: 26px;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--text-dim);
    }

        .case-bullets li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.6em;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
            box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
        }

.section-light .case-bullets li {
    color: #475569;
}

/* Summary grid for Virtual Supply: Challenge / Solution / Result */
.case-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 28px 0 0;
}

.case-summary-item {
    padding: 18px 20px;
    background: rgba(27,36,55,0.15);
    border-left: 3px solid var(--logo-crimson);
    border-radius: 0 10px 10px 0;
}

.case-summary-lbl {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--logo-crimson);
    font-weight: 600;
    margin-bottom: 8px;
}

.case-summary-item p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-dim);
}

.section-light .case-summary-item {
    background: rgba(27,36,55,0.15);
}

    .section-light .case-summary-item p {
        color: #475569 !important;
    }

.section-light .case-summary-lbl {
    color: #0078D4 !important;
}

@media (max-width: 800px) {
    .case-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .case-bullets li {
        font-size: 0.9rem;
    }
}

/* ===============================================================
   SPA RECOVERY CALCULATOR, interactive form + results
   =============================================================== */
.calc-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .calc-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.calc-card {
    background: #FFFFFF;
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 16px;
    padding: 32px 30px;
    box-shadow: 0 6px 24px -12px rgba(27, 36, 55, 0.06);
}

.calc-step-title {
    margin: 8px 0 6px;
    color: #1B2437;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.calc-step-help {
    color: #64748B;
    font-size: 0.875rem;
    margin: 0 0 28px;
}

.calc-field {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(27, 36, 55, 0.06);
}

    .calc-field:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .calc-field label {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 14px;
        gap: 12px;
        flex-wrap: wrap;
    }

.calc-field-label {
    color: #1B2437;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.calc-field-value {
    color: #0078D4;
    font-weight: 700;
    font-size: 1.25rem;
    font-family: var(--f-mono);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.calc-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(27, 36, 55, 0.08);
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    margin: 8px 0 6px;
}

    .calc-slider::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 10px rgba(200, 16, 46, 0.35);
        transition: transform 0.15s ease;
    }

        .calc-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }

    .calc-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid #FFFFFF;
        box-shadow: 0 2px 10px rgba(200, 16, 46, 0.35);
    }

.calc-slider-marks {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.calc-num-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.calc-num-input {
    width: 110px;
    padding: 9px 12px;
    border: 1px solid rgba(27, 36, 55, 0.15);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: var(--f-mono);
    color: #1B2437;
    background: #FFFFFF;
}

    .calc-num-input:focus {
        outline: none;
        border-color: #0078D4;
        box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
    }

.calc-num-suffix {
    font-size: 0.8125rem;
    color: #64748B;
}

.calc-field-hint {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.5;
}

/* RESULTS column */
.calc-results {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1024px) {
    .calc-results {
        position: static;
    }
}

.calc-result-card {
    background: #FFFFFF;
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 16px;
    padding: 28px 26px;
    text-align: center;
}

.calc-result-primary {
    background: linear-gradient(155deg, #1B2437 0%, #1F3A93 100%);
    border-color: rgba(200, 16, 46, 0.4);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

    .calc-result-primary::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(200, 16, 46, 0.25) 0%, transparent 60%);
        pointer-events: none;
    }

    .calc-result-primary > * {
        position: relative;
        z-index: 1;
    }

.calc-result-label {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0078D4;
    font-weight: 600;
    margin-bottom: 14px;
}

.calc-result-primary .calc-result-label {
    color: #FCA5A5;
}

.calc-result-num {
    font-size: clamp(2.5rem, 6vw + 1rem, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #FCA5A5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.calc-result-primary .calc-result-num {
    background: linear-gradient(135deg, #FFFFFF 0%, #FCA5A5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.calc-result-num-sm {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    background: linear-gradient(135deg, #0078D4 0%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.calc-result-help {
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

.calc-result-card:not(.calc-result-primary) .calc-result-help {
    color: #64748B;
}

.calc-result-card:not(.calc-result-primary) .calc-result-label {
    color: #0078D4;
}

.calc-result-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 480px) {
    .calc-result-row {
        grid-template-columns: 1fr;
    }
}

.calc-context-strip {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    background: rgba(200, 16, 46, 0.05);
    border: 1px solid rgba(200, 16, 46, 0.15);
    border-radius: 12px;
}

.calc-context-icon {
    flex-shrink: 0;
    color: #0078D4;
    margin-top: 2px;
}

    .calc-context-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

.calc-context-strip p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #475569;
}

.calc-context-strip strong {
    color: #1B2437;
}

.calc-cta {
    background: linear-gradient(155deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
    border: 1px solid rgba(27, 36, 55, 0.08);
    border-radius: 14px;
    padding: 28px 26px;
    text-align: center;
}

    .calc-cta h3 {
        margin: 0 0 10px;
        color: #1B2437;
        font-size: 1.125rem;
        font-weight: 700;
    }

    .calc-cta p {
        margin: 0 0 20px;
        color: #475569;
        font-size: 0.875rem;
        line-height: 1.55;
    }

.calc-cta-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .calc-card {
        padding: 24px 20px;
    }

    .calc-step-title {
        font-size: 1.1875rem;
    }

    .calc-field {
        margin-bottom: 22px;
        padding-bottom: 22px;
    }

    .calc-field-value {
        font-size: 1.0625rem;
    }

    .calc-result-card {
        padding: 22px 20px;
    }

    .calc-cta {
        padding: 22px 20px;
    }

    .calc-cta-actions {
        flex-direction: column;
    }

        .calc-cta-actions .btn {
            width: 100%;
            justify-content: center;
        }
}

/* SPA Calculator teaser banner, shown on services-spa-chargeback.html */
.calc-teaser {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(155deg, #FFFFFF 0%, var(--bg-elev-2) 100%);
    border: 1px solid rgba(200, 16, 46, 0.15);
    border-radius: 20px;
    padding: 48px 44px;
    box-shadow: 0 20px 50px -24px rgba(27, 36, 55, 0.1);
}

@media (max-width: 900px) {
    .calc-teaser {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 28px;
        text-align: center;
    }

        .calc-teaser .cta-actions {
            justify-content: center;
        }
}

.calc-teaser-visual svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    margin-left: auto;
}

@media (max-width: 900px) {
    .calc-teaser-visual svg {
        margin: 0 auto;
        max-width: 320px;
    }
}

/* SPA Calculator, extended results layout with labor savings */
.calc-result-primary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 720px) {
    .calc-result-primary-row {
        grid-template-columns: 1fr;
    }
}

/* Alternate primary card uses navy-to-purple gradient (vs the original navy-to-blue)
   so the dollar leakage card and the hours-reclaimed card visually differentiate. */
.calc-result-primary-alt {
    background: linear-gradient(155deg, #1B2437 0%, #0078D4 100%) !important;
    border-color: rgba(106, 46, 138, 0.4) !important;
}

    .calc-result-primary-alt::before {
        background: radial-gradient(circle, rgba(106, 46, 138, 0.3) 0%, transparent 60%) !important;
    }

    .calc-result-primary-alt .calc-result-num {
        background: linear-gradient(135deg, #FFFFFF 0%, #DDD0F0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .calc-result-primary-alt .calc-result-label {
        color: #DDD0F0 !important;
    }

/* 3-column small-card row for the secondary metrics */
.calc-result-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .calc-result-row-3 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.calc-result-row-3 .calc-result-card {
    padding: 22px 18px;
}

.calc-result-row-3 .calc-result-num-sm {
    font-size: clamp(1.5rem, 2.5vw + 0.4rem, 2.125rem);
}

/* ===============================================================
   SPA Calculator, text contrast fix on dark primary cards
   The page lives in .section-light which forces all <p> to dark slate.
   Need higher specificity overrides for the dark-gradient primary cards.
   =============================================================== */
.section-light .calc-result-primary .calc-result-label {
    color: #FCA5A5 !important;
}

.section-light .calc-result-primary .calc-result-help,
.section-light .calc-result-primary p {
    color: rgba(241, 245, 249, 0.92) !important;
}

.section-light .calc-result-primary-alt .calc-result-label {
    color: #DDD0F0 !important;
}

.section-light .calc-result-primary-alt .calc-result-help,
.section-light .calc-result-primary-alt p {
    color: rgba(245, 240, 252, 0.92) !important;
}

/* Also ensure secondary (white) cards' labels and text remain correct on light bg */
.section-light .calc-result-card:not(.calc-result-primary) .calc-result-help {
    color: #64748B !important;
}

.section-light .calc-result-card:not(.calc-result-primary) .calc-result-label {
    color: #0078D4 !important;
}

/* === Scroll-state header: transparent at top, pill on scroll === */
.site-header {
    transition: top 0.3s ease, background 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

    /* At top of page: fully transparent, no border, no shadow */
    .site-header:not(.scrolled) {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

        /* Nav links white when header is transparent (over dark hero) */
        .site-header:not(.scrolled) .nav-link {
            color: rgba(255, 255, 255, 0.88) !important;
        }

            .site-header:not(.scrolled) .nav-link:hover,
            .site-header:not(.scrolled) .nav-link.active {
                color: #FFFFFF !important;
                background: rgba(255, 255, 255, 0.1) !important;
            }

        .site-header:not(.scrolled) .nav-caret {
            filter: brightness(0) invert(1) !important;
            opacity: 0.7;
        }

        .site-header:not(.scrolled) .nav-toggle {
            color: #FFFFFF !important;
        }

    /* On scroll: frosted glass pill */
    .site-header.scrolled {
        background: rgba(248, 249, 252, 0.85) !important;
        border-color: rgba(27, 36, 55, 0.08) !important;
        box-shadow: 0 14px 36px -12px rgba(27, 36, 55, 0.18), 0 2px 8px rgba(27, 36, 55, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
        backdrop-filter: blur(28px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    }

        .site-header.scrolled .brand img {
            filter: none !important;
            opacity: 1 !important;
        }

        .site-header.scrolled .nav-link {
            color: #1B2437 !important;
        }

            .site-header.scrolled .nav-link:hover,
            .site-header.scrolled .nav-link.active {
                color: #0078D4 !important;
                background: transparent !important;
            }

        .site-header.scrolled .nav-caret {
            filter: none !important;
            opacity: 0.5;
        }

        .site-header.scrolled .nav-toggle {
            color: #1B2437 !important;
        }


/* === Values / Principles grid, explicit 3�-2 layout (override of .industry-grid) === */
.values-grid {
    grid-template-columns: repeat(3, 1fr);
}

    .values-grid .ind-cell {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        min-height: 220px;
    }

@media (min-width: 901px) {
    /* Reset the .industry-grid 4-col border rules so they don't fire here */
    .values-grid .ind-cell:nth-child(4n) {
        border-right: 1px solid var(--border);
    }

    .values-grid .ind-cell:nth-child(n+5) {
        border-bottom: 1px solid var(--border);
    }
    /* Apply the 3-col rules */
    .values-grid .ind-cell:nth-child(3n) {
        border-right: 0;
    }

    .values-grid .ind-cell:nth-child(n+4) {
        border-bottom: 0;
    }
}

@media (max-width: 900px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .values-grid .ind-cell:nth-child(2n) {
            border-right: 0;
        }

        .values-grid .ind-cell:nth-last-child(-n+2) {
            border-bottom: 0;
        }
}

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

        .values-grid .ind-cell {
            border-right: 0;
        }

            .values-grid .ind-cell:last-child {
                border-bottom: 0;
            }
}

/* Per-principle accent dot color so the six cards feel distinct */
.values-grid .ind-cell {
    position: relative;
}

    .values-grid .ind-cell::after {
        content: "";
        position: absolute;
        top: 28px;
        right: 28px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        opacity: 0.65;
    }

    .values-grid .ind-cell:nth-child(1)::after {
        background: #06B6D4;
    }
    /* Value Centricity */
    .values-grid .ind-cell:nth-child(2)::after {
        background: #0078D4;
    }
    /* Integrity */
    .values-grid .ind-cell:nth-child(3)::after {
        background: #F59E0B;
    }
    /* Innovation */
    .values-grid .ind-cell:nth-child(4)::after {
        background: #4D7BFF;
    }
    /* Trust */
    .values-grid .ind-cell:nth-child(5)::after {
        background: #10B981;
    }
    /* Commitment */
    .values-grid .ind-cell:nth-child(6)::after {
        background: #0078D4;
    }
/* Social Responsibility */





/* ===========================================================
   Mobile-friendly polish for iOS + Android
   Layered LAST so it wins specificity battles cleanly.
   =========================================================== */

/* Tap/touch behaviour, kills the iOS grey flash and the
   classic 300 ms tap delay. Works on every focusable element. */
a, button, [role="button"], input, select, textarea, label, summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* iOS Safari refuses to honour `<meta viewport user-scalable=no>`
   and will auto-zoom whenever an input has font-size < 16px.
   Lock all inputs to ≥16px so the page never zooms on focus. */
input, select, textarea {
    font-size: 16px;
}

/* Stop horizontal scroll on tiny viewports - `overflow-x: clip`
   is the modern fix that keeps `position: sticky` working
   (unlike `overflow-x: hidden`). Fall back to hidden where clip
   isn't supported. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* iOS rubber-band background bleed: paint the html the same
   colour as the body so over-scrolling doesn't expose white. */
html {
    background: var(--bg);
}

/* Floating-pill header - respect the notch in landscape on iPhone */
.site-header {
    left: max(14px, env(safe-area-inset-left, 14px)) !important;
    right: max(14px, env(safe-area-inset-right, 14px)) !important;
}

/* On notched iPhones, the system status bar reserves ~47 px at
   the top.  Add the inset to the body padding so the fixed header
   doesn't crash into the page content. */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top, 0);
    }
}

/* Bottom safe-area for footer / CTA strips on home-button-less iPhones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .site-footer {
        padding-bottom: calc(48px + env(safe-area-inset-bottom));
    }

    .cta-strip {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* Minimum touch targets - Apple HIG = 44 px, Material = 48 dp.
   Apply only on touch-class viewports so desktop spacing isn't
   bloated. */
@media (max-width: 900px) {
    .nav-link,
    .nav-cta,
    .mobile-cta,
    .mobile-nav a,
    .btn, .btn-secondary, .btn-accent, .btn-ghost,
    .hfb-cta,
    .dropdown-link,
    .ind-cell {
        min-height: 44px;
    }

    .nav-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* Hero on tiny portrait phones - keep CTA above the fold */
@media (max-width: 480px) {
    .hero-fullbleed {
        height: clamp(440px, 78vh, 560px) !important;
    }

    .hfb-content {
        padding: 48px 0 36px !important;
    }

    .hfb-eyebrow {
        margin-bottom: 18px !important;
        font-size: 0.65rem !important;
        padding: 6px 14px !important;
    }

    .hfb-headline {
        font-size: clamp(1.5rem, 6.5vw, 1.875rem) !important;
        margin-bottom: 12px !important;
        line-height: 1.12 !important;
    }

    .hfb-sub {
        font-size: 0.9375rem !important;
        margin-bottom: 16px !important;
        max-width: 90% !important;
    }

    .hfb-cta {
        padding: 12px 22px !important;
        font-size: 0.9rem !important;
    }
}

/* Prevent ugly word breaks in long headlines on mobile */
@media (max-width: 540px) {
    h1, h2, h3, p, blockquote, .hfb-headline, .hfb-sub {
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }
    /* Reduce container side padding so cards aren't pinched */
    .container {
        padding: 0 18px;
    }
}

/* Disable iOS long-press image preview on logos / icons */
.brand img, .ind-icon svg, .sc-icon svg {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Make hover-only dropdowns behave on touch:
   reveal the dropdown when the parent receives focus via tap
   (the existing JS also toggles it; this is a safety net). */
@media (hover: none) and (pointer: coarse) {
    .nav-item.has-dropdown:focus-within > .dropdown,
    .nav-item.has-dropdown.open > .dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Carousel chevrons / dots, keep them visually small, expand the hit area via padding */
@media (max-width: 760px) {
    .hfb-dots button {
        width: 8px !important;
        height: 8px !important;
        padding: 0 !important;
        min-width: unset;
        min-height: unset;
    }

    .hfb-prev, .hfb-next {
        width: 38px;
        height: 38px;
        padding: 8px;
        min-width: unset;
        min-height: unset;
    }
}

/* Forms feel cramped on mobile, bump field padding */
@media (max-width: 540px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="search"], textarea, select {
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }

    button[type="submit"], .form-submit {
        padding: 14px 22px !important;
        width: 100%;
        justify-content: center;
    }
}

/* Smoother momentum scrolling inside drawers / dropdowns */
.mobile-nav, .dropdown {
    -webkit-overflow-scrolling: touch;
}

/* Prevent iOS Safari from rendering 1px hairline borders as gone
   at certain DPRs by using min(1px, 0.5px) only when not retina */
@media (-webkit-min-device-pixel-ratio: 2) {
    .ind-cell, .sc-card, .team-card {
        border-width: 0.5px;
    }
}


/* === Contact-form trust messaging === */
.contact-trust-list {
    list-style: none;
    padding: 24px 0 0;
    margin: 28px 0 0;
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--border);
}

.contact-trust-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: rgba(6, 182, 212, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: var(--r-md);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

    .contact-trust-item:hover {
        background: rgba(6, 182, 212, 0.08);
        border-color: rgba(6, 182, 212, 0.28);
        transform: translateY(-1px);
    }

.contact-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.10);
    color: #06B6D4;
}

    .contact-trust-icon svg {
        width: 18px;
        height: 18px;
    }

.contact-trust-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.5;
}

    .contact-trust-copy strong {
        color: var(--text);
        font-weight: 600;
        font-size: 0.9375rem;
    }

    .contact-trust-copy span {
        color: var(--text-dim);
        font-size: 0.875rem;
    }

/* Section-light variant, same content over a cream background */
.section-light .contact-trust-item {
    background: rgba(6, 182, 212, 0.06);
    border-color: rgba(27,36,55,0.15);
}

.section-light .contact-trust-icon {
    background: rgba(27,36,55,0.15);
    color: #1F3A93;
}

.section-light .contact-trust-copy strong {
    color: #1B2437;
}

.section-light .contact-trust-copy span {
    color: #475569;
}

@media (max-width: 540px) {
    .contact-trust-list {
        gap: 10px;
        padding-top: 18px;
        margin-top: 22px;
    }

    .contact-trust-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .contact-trust-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}


/* === Additional homepage mobile polish === */
@media (max-width: 760px) {
    /* Hero CTA full-width comfort tap target */
    .hfb-cta {
        padding: 14px 26px !important;
    }
    /* Showcase / ISV grid: single column on small phones to avoid pinch */
    .showcase {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 28px !important;
    }
    /* Industry grid card: more comfortable padding */
    .ind-cell {
        padding: 24px 22px !important;
        min-height: 200px !important;
    }
    /* Section vertical padding -- tighter on phones */
    .section {
        padding: 48px 0 !important;
    }

    .section-lg {
        padding: 64px 0 !important;
    }

    .section-sm {
        padding: 32px 0 !important;
    }
    /* Section headers stack: flex-between rows should wrap */
    .flex-between.sect-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

        .flex-between.sect-head .btn-ghost {
            align-self: flex-start;
        }
    /* Why-grid stacks instead of two-col */
    .why-grid {
        grid-template-columns: 1fr !important;
    }
    /* Metrics grid 2x2 instead of 4-up */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    /* CTA strip: full-width buttons */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

        .cta-actions .btn {
            width: 100%;
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === Light global hover micro-animations === */
.sc-card, .ind-cell, .team-card {
    transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

    .sc-card:hover, .ind-cell:hover, .team-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px -12px rgba(27, 36, 55, 0.12);
    }

@media (prefers-reduced-motion: reduce) {
    .sc-card:hover, .ind-cell:hover, .team-card:hover, .trust-item:hover {
        transform: none !important;
    }
}

/* Soft scroll-in for any element with .reveal, same trigger your JS uses */
.reveal {
    transition: opacity 0.7s cubic-bezier(0.2,1,0.3,1), transform 0.7s cubic-bezier(0.2,1,0.3,1);
}

    .reveal:not(.visible) {
        opacity: 0;
        transform: translateY(14px);
    }

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* === Defensive overrides for trust-strip pill icon colors (final) === */
.trust-strip .trust-pill {
    color: #FFFFFF;
}

.trust-strip .trust-pill--cyan {
    color: #06B6D4 !important;
    background: rgba(6,182,212,0.14) !important;
}

.trust-strip .trust-pill--violet {
    color: #0078D4 !important;
    background: rgba(200,16,46,0.15) !important;
}

.trust-strip .trust-pill--green {
    color: #10B981 !important;
    background: rgba(16,185,129,0.14) !important;
}
/* For stroke-based SVGs, let them inherit the pill's color */
.trust-strip .trust-pill svg path,
.trust-strip .trust-pill svg circle,
.trust-strip .trust-pill svg line {
    stroke: currentColor;
}
/* Hard-coded hex fills on <rect> (e.g. Microsoft squares) MUST be left alone */
.trust-strip .trust-item {
    color: var(--text);
}


/* === Showcase: featured card spans full row (so 7 total cards become 1 + 3 + 3) === */
@media (min-width: 1001px) {
    .showcase .sc-featured {
        grid-column: 1 / -1;
    }
}


/* ===== Suite (family) cards on homepage =================== */
.suite-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
}

@media (max-width: 1000px) {
    .suite-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.suite-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(27, 36, 55, 0.05), 0 8px 24px -8px rgba(27, 36, 55, 0.04);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

    .suite-card:hover {
        transform: translateY(-4px);
        border-color: rgba(200, 16, 46,0.4);
        box-shadow: 0 20px 40px -12px rgba(27, 36, 55, 0.12);
    }

    .suite-card.sc-featured {
        background: linear-gradient(155deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
        border-color: var(--border-hi);
    }

        .suite-card.sc-featured::after {
            content: '';
            position: absolute;
            bottom: -80px;
            right: -40px;
            width: 240px;
            height: 240px;
            background: radial-gradient(circle, rgba(200, 16, 46, 0.15), transparent 70%);
            border-radius: 50%;
            filter: blur(20px);
            pointer-events: none;
        }

.suite-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--f-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(200,16,46,0.10);
    color: #0078D4;
    border-radius: 100px;
    align-self: flex-start;
    margin-bottom: 16px;
}

.suite-tag--cyan {
    background: rgba(6,182,212,0.12);
    color: #06B6D4;
}

.suite-tag--violet {
    background: rgba(200,16,46,0.15);
    color: #0078D4;
}

.suite-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(200,16,46,0.12);
    color: #0078D4;
    margin-bottom: 16px;
}

.suite-icon--cyan {
    background: rgba(6,182,212,0.14);
    color: #06B6D4;
}

.suite-icon--violet {
    background: rgba(200,16,46,0.15);
    color: #0078D4;
}

.suite-icon svg {
    width: 22px;
    height: 22px;
}

.suite-card h3 {
    font-size: 1.375rem;
    margin: 0 0 10px;
    color: var(--text);
}

.suite-card p {
    color: var(--text-dim);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.suite-products {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suite-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .suite-pill:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.16);
        color: var(--text);
        transform: translateY(-1px);
    }

.suite-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 6px;
}

.suite-card .sc-link {
    margin-top: auto;
    color: var(--text);
    font-weight: 600;
}

.suite-card:hover .sc-link {
    color: #0078D4;
}

.suite-card .sc-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.suite-card:hover .sc-link svg {
    transform: translateX(3px);
}

@media (max-width: 540px) {
    .suite-card {
        padding: 22px 20px;
    }

        .suite-card h3 {
            font-size: 1.1875rem;
        }

    .suite-pill {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* Light-section variant */
.section-light .suite-card {
    background: #ffffff;
    color: #1B2437;
    border-color: rgba(27,36,55,0.10);
}

    .section-light .suite-card h3 {
        color: #1B2437;
    }

    .section-light .suite-card p {
        color: #475569;
    }

.section-light .suite-pill {
    background: rgba(27,36,55,0.04);
    border-color: rgba(27,36,55,0.10);
    color: #1F3A93;
}

    .section-light .suite-pill:hover {
        background: rgba(27,36,55,0.08);
        color: #1B2437;
    }


/* === Suite card CTA link, replaces the old card-wide anchor === */
.suite-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--f-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #FFFFFF;
    background: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
    border-radius: 100px;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 10px 24px -10px rgba(200,16,46,0.15);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    min-height: 44px;
}

    .suite-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px -10px rgba(200,16,46,0.15);
    }

    .suite-cta svg {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }

    .suite-cta:hover svg {
        transform: translateX(3px);
    }

/* Cyan + violet variants for Pricing / Inside Sales suite CTAs */
.suite-card[aria-label="Pricing suite"] .suite-cta {
    background: linear-gradient(135deg, #06B6D4 0%, #1F3A93 100%);
    box-shadow: 0 10px 24px -10px rgba(6,182,212,0.45);
}

.suite-card[aria-label="Inside Sales suite"] .suite-cta {
    background: linear-gradient(135deg, #0078D4 0%, #1B2437 100%);
    box-shadow: 0 10px 24px -10px rgba(200,16,46,0.15);
}

/* Remove the old in-card hover-shift on .sc-link (we removed that link) */
.suite-card:hover .sc-link {
    color: inherit;
}

/* Make the whole article a hover region without intercepting clicks */
.suite-card {
    pointer-events: auto;
}


/* === Mobile clickability safety net === */
@media (max-width: 900px) {
    /* Make sure no decorative overlay swallows taps */
    .hfb-overlay,
    .illo-side,
    .cta-illo,
    .sc-featured::after,
    .suite-card.sc-featured::after {
        pointer-events: none !important;
    }
    /* Every visible <a> and <button> stays clickable */
    a, button {
        position: relative;
        z-index: 1;
    }
    /* Suite pills are clearly tappable on phone */
    .suite-pill {
        padding: 10px 14px !important;
        font-size: 0.875rem !important;
        min-height: 40px;
    }
}


/* Category badges on each sc-card */
.sc-tag--ghost {
    background: rgba(200,16,46,0.10);
    color: #0078D4;
    border: 1px solid rgba(200,16,46,0.35);
}

.sc-tag--cyan {
    background: rgba(6,182,212,0.14);
    color: #06B6D4;
}

.sc-tag--violet {
    background: rgba(200,16,46,0.15);
    color: #0078D4;
}


/* === Homepage showcase: 3-col grid === */
@media (min-width: 1101px) {
    .showcase {
        grid-template-columns: repeat(3, 1fr) !important;
    }

        .showcase .sc-featured {
            grid-column: auto !important;
        }
    /* stop full-row span */
}

@media (min-width: 901px) and (max-width: 1100px) {
    .showcase {
        grid-template-columns: repeat(3, 1fr) !important;
    }

        .showcase .sc-featured {
            grid-column: auto !important;
        }
}

@media (max-width: 900px) {
    .showcase {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .showcase {
        grid-template-columns: 1fr !important;
    }
}


/* Eyebrow tags, brighter, on-brand by default and on light sections */
.eyebrow {
    color: #0078D4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
}

    .eyebrow::before {
        background: #0078D4 !important;
        box-shadow: 0 0 12px rgba(200,16,46,0.55) !important;
    }

.section-light .eyebrow {
    color: #0078D4 !important;
}

    .section-light .eyebrow::before {
        background: #0078D4 !important;
    }


/* Brighter, more confident text colour on light sections */
.section-light:not(.ai-innovations) h1,
.section-light:not(.ai-innovations) h2,
.section-light:not(.ai-innovations) h3,
.section-light:not(.ai-innovations) h4 {
    color: #1B2437 !important;
}

.section-light:not(.ai-innovations) .grad-text {
    color: #1B2437 !important;
}

.section-light:not(.ai-innovations) .lead {
    color: #1F2937 !important;
}

.section-light:not(.ai-innovations) p {
    color: #475569;
}


/* Whole VIP heading uses the same brand gradient as "Pricing" - so "Vyas Intelligent" reads */
.vip-spotlight .vip-content .vip-heading {
    background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #6A89FF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

    .vip-spotlight .vip-content .vip-heading .serif-italic {
        /* keep its existing gradient - looks identical but ensures continuity */
        background: linear-gradient(135deg, #0078D4 0%, #0078D4 50%, #6A89FF 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }


/* Make all sc-tag chips share the same crimson visual language by default */
.sc-card .sc-tag {
    color: #0078D4 !important;
    background: rgba(200,16,46,0.10) !important;
    border: 1px solid rgba(200,16,46,0.35) !important;
}
    /* Cyan and violet variants keep their colour but inherit the consistent shape */
    .sc-card .sc-tag.sc-tag--cyan {
        color: #06B6D4 !important;
        background: rgba(6,182,212,0.12) !important;
        border-color: rgba(6,182,212,0.35) !important;
    }

    .sc-card .sc-tag.sc-tag--violet {
        color: #0078D4 !important;
        background: rgba(200,16,46,0.15) !important;
        border-color: rgba(200,16,46,0.15) !important;
    }
/* On light section backgrounds, deepen colours for legibility */
.section-light .sc-card .sc-tag {
    color: #0078D4 !important;
    background: rgba(200,16,46,0.08) !important;
    border-color: rgba(200,16,46,0.30) !important;
}

    .section-light .sc-card .sc-tag.sc-tag--cyan {
        color: #1F3A93 !important;
        background: rgba(27,36,55,0.15) !important;
        border-color: rgba(27,36,55,0.15) !important;
    }

    .section-light .sc-card .sc-tag.sc-tag--violet {
        color: #1B2437 !important;
        background: rgba(200,16,46,0.15) !important;
        border-color: rgba(200,16,46,0.15) !important;
    }


/* ================================================
   PAGE ROUTING
   ================================================ */

.vt-page {
    display: none;
}

    .vt-page:target {
        display: block;
    }

body:not(:has(.vt-page:target)) #page-index {
    display: block;
}

body.vt-no-hash .vt-page {
    display: none;
}

body.vt-no-hash #page-index {
    display: block;
}


/* ==========================================================================
   CLASSIC RICH MATTE & SMOOTH LAYOUT REDESIGN (OVERRIDES)
   ========================================================================== */

/* 1. Page Wrapper & Horizontal Scrolling Prevention */
.vt-page {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Dropdown overflow prevention */
.dropdown {
    max-width: 90vw !important;
}

/* 2. Universal Buttery-Smooth transitions */
.btn,
.sc-card,
.suite-card,
.team-card,
.ind-cell,
.nav-link,
.dropdown,
.dropdown-link,
.footer-socials a,
.nav-cta,
.btn-primary,
.btn-accent,
.btn-secondary,
.btn-ghost,
.ind-arrow,
.ind-icon {
    transition: var(--transition-smooth) !important;
}

    /* 3. Smooth Card Hover Transitions */
    .sc-card:hover,
    .ind-cell:hover,
    .team-card:hover,
    .suite-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 40px -12px rgba(27, 36, 55, 0.12) !important;
        border-color: rgba(158, 27, 50, 0.25) !important;
    }

/* Disable scale transitions that make elements flash or scale weirdly on mobile */
@media (hover: none) {
    .sc-card:hover,
    .ind-cell:hover,
    .team-card:hover,
    .suite-card:hover {
        transform: none !important;
    }
}

/* 4. Text Contrast Upgrades (Resolving low-contrast Slate-600) */
.section-light p,
.section-light li,
.section-light .btn-ghost,
.section-light .metric .desc,
.section-light .sect-head p,
.section-light .form-field label,
.section-light .deliver-body p,
.ai-innov-card p,
.blog-card p,
.post-cta-block p,
.faq-a p,
.section-light .case-bullets li,
.section-light .case-summary-item p,
.calc-context-strip p,
.calc-cta p,
.section-light .contact-trust-copy span,
.section-light .suite-card p,
.section-light:not(.ai-innovations) p {
    color: var(--text-dim) !important; /* Premium high-contrast Slate-800 (#2D3748) */
}

/* 5. Alternating Section Backgrounds (White vs. Alabaster) */
.vt-page .section-light:nth-of-type(even) {
    background-color: var(--bg-elev) !important; /* Warm Alabaster Off-white */
}

.vt-page .section-light:nth-of-type(odd) {
    background-color: var(--bg) !important; /* Pure White */
}
/* Ensure the standard section class without -light also follows this flow */
.vt-page section.section:nth-of-type(even) {
    background-color: var(--bg-elev) !important;
}

.vt-page section.section:nth-of-type(odd) {
    background-color: var(--bg) !important;
}

/* 6. High-Contrast Dark Midnight Navy CTA Strip */
.cta-strip {
    background: var(--logo-navy) !important;
    color: #FFFFFF !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

    .cta-strip h2,
    .cta-strip h3,
    .cta-strip p,
    .cta-strip .lead {
        color: #FFFFFF !important;
    }

    .cta-strip p,
    .cta-strip .lead {
        color: rgba(255, 255, 255, 0.8) !important;
    }

/* 7. Tightened Dark Midnight Navy Footer */
.site-footer {
    background: var(--logo-navy) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 40px 0 20px !important; /* Highly tightened vertical space */
}

    .site-footer h4 {
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 10px !important; /* Tightened gap */
    }

    .site-footer p {
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 12px !important; /* Tightened brand info spacing */
    }

    .site-footer a {
        color: rgba(255, 255, 255, 0.7) !important;
    }

        .site-footer a:hover {
            color: #FF7B8E !important; /* High contrast hover rose-crimson */
        }

.footer-grid {
    gap: 24px !important; /* Reduced column gap */
    margin-bottom: 24px !important; /* Reduced space before bottom line */
}

.footer-col h4 {
    margin-bottom: 10px !important;
}

.footer-col li {
    margin-bottom: 6px !important; /* Reduced spacing between links */
}

.footer-brand .brand {
    margin-bottom: 12px !important;
}

.footer-bottom {
    padding-top: 16px !important; /* Reduced space */
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.site-footer .footer-bottom a {
    color: rgba(255, 255, 255, 0.5) !important;
}

    .site-footer .footer-bottom a:hover {
        color: #FF7B8E !important;
    }

.site-footer .footer-socials a {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

    .site-footer .footer-socials a:hover {
        color: #FF7B8E !important;
        border-color: #FF7B8E !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

.site-footer .footer-brand .brand-logo {
    filter: none !important;
}

/* Footer Responsive Adjustments */
@media (max-width: 760px) {
    .site-footer {
        padding: 32px 0 16px !important;
    }

    .footer-grid {
        margin-bottom: 16px !important;
        gap: 16px 12px !important;
    }

    .footer-col li {
        margin-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 24px 0 12px !important;
    }

    .footer-grid {
        margin-bottom: 12px !important;
        gap: 12px 8px !important;
    }
}

/* 8. Dark Card Fix for Metrics Block */
.metrics-block {
    background: linear-gradient(155deg, #1B2437 0%, #0F1A30 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 9. Responsive Padding & Spacing refinement */
.section {
    padding: 72px 0 !important;
}

.section-lg {
    padding: 96px 0 !important;
}

.section-sm {
    padding: 44px 0 !important;
}

@media (max-width: 1024px) {
    .section {
        padding: 60px 0 !important;
    }

    .section-lg {
        padding: 80px 0 !important;
    }

    .section-sm {
        padding: 36px 0 !important;
    }
}

@media (max-width: 640px) {
    .section {
        padding: 48px 0 !important;
    }

    .section-lg {
        padding: 60px 0 !important;
    }

    .section-sm {
        padding: 28px 0 !important;
    }
}


/* ==========================================================================
   CLASSIC RICH MATTE & CONTRAST REFINEMENTS (ADDITIONAL OVERRIDES)
   ========================================================================== */

/* 1. VIP Spotlight Dark Card & Border Visibility Fix */
.vip-spotlight {
    background: linear-gradient(155deg, #1B2437 0%, #0F1A30 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5) !important;
}

    /* 2. Secondary Button Visibility Overrides inside Dark Containers */
    .cta-strip .btn-secondary,
    .site-footer .btn-secondary,
    .vip-spotlight .btn-secondary {
        color: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        background: transparent !important;
    }

        .cta-strip .btn-secondary:hover,
        .site-footer .btn-secondary:hover,
        .vip-spotlight .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
            color: #FFFFFF !important;
        }

/* 3. Trust-Strip Card Visibility Refinements */
.trust-strip .trust-item {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(27, 36, 55, 0.04) !important;
    color: var(--text) !important;
}

    .trust-strip .trust-item:hover {
        background: #FFFFFF !important;
        border-color: rgba(158, 27, 50, 0.25) !important;
        box-shadow: 0 10px 20px -8px rgba(27, 36, 55, 0.08) !important;
        transform: translateY(-2px) !important;
    }


/* ==========================================================================
   SPOTLIGHT & METRICS TEXT COLOR CONTRAST RESOLUTION (FORCED WHITE ON DARK)
   ========================================================================== */

/* Force high-contrast white/light-gray text inside the dark VIP Spotlight card */
.vip-spotlight p,
.vip-spotlight li,
.vip-spotlight span,
.vip-spotlight h3,
.vip-spotlight h4,
.vip-spotlight .vip-tagline,
.vip-spotlight .vip-desc,
.vip-spotlight .vip-value-list li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.vip-spotlight .vip-desc {
    color: rgba(255, 255, 255, 0.75) !important;
}

.vip-spotlight .vip-heading {
    color: #FFFFFF !important;
}

.vip-spotlight .vip-value-label {
    color: rgba(255, 255, 255, 0.55) !important;
}

.vip-spotlight .vip-value {
    background: rgba(27, 36, 55, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vip-spotlight .vip-value-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Force high-contrast white/light-gray text inside the dark Metrics Block */
.metrics-block p,
.metrics-block span,
.metrics-block h1,
.metrics-block h2,
.metrics-block h3,
.metrics-block h4,
.metrics-block .metric .desc,
.metrics-block .metric .lbl {
    color: rgba(255, 255, 255, 0.9) !important;
}

.metrics-block h1,
.metrics-block h2,
.metrics-block h3,
.metrics-block h4 {
    color: #FFFFFF !important;
}

.metrics-block .metric .lbl {
    color: #FF7B8E !important; /* Rose-crimson highlight */
}

.metrics-block .metric .desc {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ==========================================================================
   CLASSIC BESPOKE EDITORIAL REDESIGN (OVERRIDES)
   ========================================================================== */

/* 1. Lora Editorial Serif Typography */
h1, h2, h3, h4, .vip-heading {
    font-family: var(--f-display) !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

h1 {
    font-weight: 700 !important;
}

/* Italic Serif Highlight Words */
.serif-italic {
    font-family: var(--f-display) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--logo-crimson) !important;
}

/* 2. Raw Iconography Redesign (Removing Colored Circles) */
.sc-icon,
.trust-pill,
.contact-trust-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .sc-icon svg,
    .trust-pill svg,
    .contact-trust-icon svg {
        width: 24px !important;
        height: 24px !important;
        color: var(--logo-crimson) !important;
    }
/* Retain original brand grid dimensions for Microsoft grid icon */
.trust-item:first-child .trust-pill svg {
    width: 18px !important;
    height: 18px !important;
}



/* Restore B2B box card styling for standard service cards */
.showcase .sc-card {
    background: var(--surface) !important;
    border: 1px solid rgba(0, 0, 0, 0.13) !important;
    box-shadow: 0 1px 3px rgba(27, 36, 55, 0.04), 0 1px 2px rgba(27, 36, 55, 0.02) !important;
    border-radius: var(--r-lg) !important;
    padding: 24px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

    .showcase .sc-card:hover {
        background: linear-gradient(135deg, var(--surface) 0%, rgba(0, 120, 212, 0.06) 100%) !important;
        border-color: rgba(0, 120, 212, 0.25) !important;
        box-shadow: 0 24px 48px -12px rgba(0, 120, 212, 0.18) !important;
        transform: translateY(-4px) !important;
    }

    .showcase .sc-card .sc-link {
        color: #0078D4 !important;
        font-weight: 600 !important;
    }

        .showcase .sc-card .sc-link svg {
            color: #0078D4 !important;
        }

/* Adjust heading styles on de-cluttered cards */
.sc-card h3 {
    font-size: 1.1875rem !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

.sc-card p {
    margin-bottom: 14px !important;
}


/* 5. Industry Grid Cells Icon & Arrow Spacing & Hover Fixes */
.ind-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    color: var(--text-dim) !important;
}

    .ind-icon svg {
        width: 100% !important;
        height: 100% !important;
    }

.ind-arrow {
    position: absolute !important;
    top: 36px !important;
    right: 32px !important;
    color: var(--logo-crimson) !important;
    opacity: 0 !important;
}

.ind-cell:hover .ind-arrow {
    opacity: 1 !important;
    transform: translate(4px, -4px) !important;
}

/* 6. AI Innovations Section Alignment Corrections */
.ai-innov-closer {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 760px !important;
    padding: 28px 32px !important;
    border-top: 1px solid var(--border) !important;
}

    .ai-innov-closer p {
        text-align: center !important;
    }


/* === Inner-page light-hero nav fix ===
   On pages that have a .page-hero (white bg), keep the transparent nav
   text dark so it's readable, instead of the white-on-white default.
   Excluded on home page (body.home-top or body.vt-no-hash) where the
   hero is dark and nav links must stay white. */
body:has(.page-hero):not(.home-top):not(.vt-no-hash) .site-header:not(.scrolled) .nav-link {
    color: #1B2437 !important;
}

    body:has(.page-hero):not(.home-top):not(.vt-no-hash) .site-header:not(.scrolled) .nav-link:hover,
    body:has(.page-hero):not(.home-top):not(.vt-no-hash) .site-header:not(.scrolled) .nav-link.active {
        color: #0078D4 !important;
        background: rgba(27, 36, 55, 0.06) !important;
    }

body:has(.page-hero):not(.home-top):not(.vt-no-hash) .site-header:not(.scrolled) .nav-caret {
    filter: none !important;
    opacity: 0.5;
}

body:has(.page-hero):not(.home-top):not(.vt-no-hash) .site-header:not(.scrolled) .nav-toggle {
    color: #1B2437 !important;
}

/* Force white nav items on the homepage hero (when `.home-hero` exists).
   This overrides the inner-page `.page-hero` rules so the top-of-page
   navigation appears white on the main hero and then switches on scroll. */
body:has(.home-hero) .site-header:not(.scrolled) .nav-link,
.site-header:not(.scrolled) .nav-link {
    color: rgba(255,255,255,0.95) !important;
}

    body:has(.home-hero) .site-header:not(.scrolled) .nav-link:hover,
    body:has(.home-hero) .site-header:not(.scrolled) .nav-link.active,
    .site-header:not(.scrolled) .nav-link:hover,
    .site-header:not(.scrolled) .nav-link.active {
        color: #FFFFFF !important;
        background: rgba(255,255,255,0.06) !important;
    }

body:has(.home-hero) .site-header:not(.scrolled) .nav-caret,
.site-header:not(.scrolled) .nav-caret {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

body:has(.home-hero) .site-header:not(.scrolled) .nav-cta,
.site-header:not(.scrolled) .nav-cta {
    color: #FFFFFF !important;
}

body:has(.home-hero) .site-header:not(.scrolled) .nav-toggle,
.site-header:not(.scrolled) .nav-toggle {
    color: #FFFFFF !important;
}

/* Fallback: body class set by JS for broader browser support */
body.home-top .site-header .nav-link {
    color: rgba(255,255,255,0.95) !important;
}

    body.home-top .site-header .nav-link:hover,
    body.home-top .site-header .nav-link.active {
        color: #FFFFFF !important;
        background: rgba(255,255,255,0.06) !important;
    }

body.home-top .site-header .nav-caret {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

body.home-top .site-header .nav-cta {
    color: #FFFFFF !important;
}

body.home-top .site-header .nav-toggle {
    color: #FFFFFF !important;
}


/* ===================================================
   FINAL OVERRIDE: White nav at top of page
   Forces white nav links/toggle when header is NOT scrolled,
   regardless of any earlier floating-pill or other rules.
   =================================================== */
.site-header:not(.scrolled) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

    .site-header:not(.scrolled) .nav-link,
    .site-header:not(.scrolled) .nav-link:hover,
    .site-header:not(.scrolled) .nav-link.active {
        color: #FFFFFF !important;
    }

    .site-header:not(.scrolled) .nav-toggle {
        color: #FFFFFF !important;
    }

    .site-header:not(.scrolled) .nav-caret {
        filter: brightness(0) invert(1) !important;
        opacity: 0.85 !important;
    }

/* ============================================================
   FLUENT DESIGN SYSTEM OVERRIDE LAYER
   Microsoft Dynamics 365 visual alignment
   Segoe UI font stack · Fluent depth · #0078D4 trust blue
   Applied on top of VyasTec base theme
   ============================================================ */

/* ── 1. SEGOE UI FONT STACK (Fluent spec) ─────────────────── */
:root {
    /* Override font stack to Segoe UI (Fluent default) */
    --f-sans: 'Segoe UI', 'Segoe UI Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --f-display: 'Segoe UI', 'Segoe UI Variable', ui-sans-serif, system-ui, sans-serif;
    --f-serif: 'Segoe UI', 'Segoe UI Variable', ui-sans-serif, system-ui, sans-serif;
    /* Keep mono for code/labels */
    --f-mono: 'Cascadia Code', 'Segoe UI Mono', ui-monospace, 'Courier New', monospace;
    /* Fluent Design color tokens */
    --fluent-blue: #0078D4; /* Microsoft brand blue */
    --fluent-blue-hover: #106EBE; /* Darker on hover */
    --fluent-blue-light: #EFF6FC; /* Light tint for focus rings */
    --fluent-blue-mid: #C7E0F4; /* Medium tint */
    --fluent-crimson: #0078D4; /* VyasTec brand red (kept) */
    --fluent-red-hover: #005A9E;
    /* Fluent depth shadows (elevation 2, 4, 8) */
    --fluent-shadow-2: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
    --fluent-shadow-4: 0 3.2px 7.2px 0 rgba(0,0,0,0.132), 0 0.6px 1.8px 0 rgba(0,0,0,0.108);
    --fluent-shadow-8: 0 6.4px 14.4px 0 rgba(0,0,0,0.132), 0 1.2px 3.6px 0 rgba(0,0,0,0.108);
    --fluent-shadow-16: 0 12.8px 28.8px 0 rgba(0,0,0,0.22), 0 2.4px 7.2px 0 rgba(0,0,0,0.18);
    --fluent-shadow-64: 0 25.6px 57.6px 0 rgba(0,0,0,0.22), 0 4.8px 14.4px 0 rgba(0,0,0,0.18);
    /* Fluent border radius (control = 4px, card = 8px, large = 12px) */
    --r-sm: 4px; /* Fluent control radius */
    --r-md: 8px; /* Fluent card radius */
    --r-lg: 12px; /* Fluent panel radius */
    --r-xl: 16px; /* Fluent large surface */
    /* Fluent font size spec */
    --fs-caption: 12px; /* Caption */
    --fs-body: 14px; /* Body */
    --fs-body-large: 16px; /* Body Large — nav tabs */
    --fs-subtitle: 20px; /* Subtitle — form headers */
    --fs-title: 28px; /* Title */
    --fs-title-large: 40px; /* Title Large */
    --fs-display: 68px; /* Display */
}

/* ── 2. BODY & TYPOGRAPHY (Fluent Segoe UI) ──────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, a, button, input, select, textarea,
.btn, .nav-link, .dropdown-link, .lead,
.eyebrow, .sc-eyebrow {
    font-family: 'Segoe UI', 'Segoe UI Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
    font-size: var(--fs-body); /* Fluent 14px body */
    line-height: 1.5714; /* 22/14 — Fluent line height */
    -webkit-font-smoothing: subpixel-antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Fluent heading weights per spec */
h1 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 {
    font-weight: 600;
    letter-spacing: 0;
}

h4 {
    font-weight: 600;
    letter-spacing: 0;
}

/* Section/Form headers = Segoe UI Semibold 20px (Fluent spec) */
.site-header .nav-link {
    font-size: var(--fs-body-large) !important; /* 16px — nav tabs */
    font-weight: 400 !important; /* Regular when inactive */
    letter-spacing: 0 !important;
}

    .site-header .nav-link.active {
        font-weight: 600 !important; /* Semibold when selected */
    }

    .site-header .nav-link:hover {
        font-weight: 600 !important;
    }

/* Body / Grid data = Segoe UI Regular 14px */
p, .lead, td, .text-small {
    font-size: var(--fs-body); /* 14px */
}

/* .lead gets 16px for better readability */
.lead {
    font-size: var(--fs-body-large) !important; /* 16px */
    line-height: 1.5 !important;
    font-weight: 400;
}

/* Section headers (h2) = Semibold */
.sect-head h2, .page-hero h1, .cta-inner h2 {
    font-weight: 600;
}

/* Eyebrow — keep mono but upgrade spacing */
.eyebrow {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

/* ── 3. NAVIGATION — Fluent Command Bar style ────────────── */
.site-header {
    /* Keep the floating pill but refine to Fluent feel */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(40px) saturate(2) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

    /* Nav links — Fluent tab style */
    .site-header .nav-link {
        color: #323130 !important; /* Fluent neutral-160 */
        border-radius: 4px !important; /* Fluent control radius */
        padding: 8px 12px !important;
        position: relative;
        transition: background 0.1s, color 0.1s !important;
    }

        .site-header .nav-link:hover {
            color: #201F1E !important; /* Fluent neutral-190 */
            background: rgba(0, 0, 0, 0.04) !important;
        }

        .site-header .nav-link.active {
            color: #0078D4 !important; /* Fluent brand blue for active */
        }
            /* Fluent active underline indicator — 2px bottom */
            .site-header .nav-link.active::after {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 8px;
                right: 8px;
                height: 2px;
                background: #0078D4;
                border-radius: 2px 2px 0 0;
                display: block !important;
            }

        .site-header .nav-link::before {
            display: none;
        }
    /* remove old crimson underline on nav */

    /* CTA in nav stays brand crimson */
    .site-header .nav-cta {
        background: var(--fluent-crimson) !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        letter-spacing: 0 !important;
        box-shadow: var(--fluent-shadow-4) !important;
    }

        .site-header .nav-cta:hover {
            background: var(--fluent-red-hover) !important;
            box-shadow: var(--fluent-shadow-8) !important;
        }

    /* Dropdown — Fluent callout/panel */
    .site-header .dropdown {
        border-radius: 8px !important; /* Fluent panel */
        box-shadow: var(--fluent-shadow-16) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        padding: 8px !important;
    }

    .site-header .dropdown-link {
        border-radius: 4px !important;
        padding: 10px 10px !important;
    }

        .site-header .dropdown-link:hover {
            background: #EFF6FC !important; /* Fluent blue hover tint */
        }

            .site-header .dropdown-link:hover .dl-title {
                color: #0078D4 !important;
            }

/* ── 4. BUTTONS — Fluent button spec ─────────────────────── */
.btn {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 14px !important; /* Fluent button label */
    font-weight: 600 !important; /* Semibold */
    border-radius: var(--r-sm) !important; /* 4px — Fluent control */
    padding: 8px 20px !important;
    min-height: 32px;
    letter-spacing: 0 !important;
    transition: background 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease !important;
}

.btn-accent, .btn-primary {
    background: var(--fluent-crimson) !important;
    box-shadow: var(--fluent-shadow-4) !important;
}

    .btn-accent:hover, .btn-primary:hover {
        background: var(--fluent-red-hover) !important;
        box-shadow: var(--fluent-shadow-8) !important;
        transform: none !important; /* Fluent buttons don't lift */
    }

.btn-secondary {
    border: 1px solid rgba(0, 0, 0, 0.14) !important; /* Fluent stroke */
    color: #323130 !important;
    background: #FFFFFF !important;
    box-shadow: var(--fluent-shadow-2) !important;
}

    .btn-secondary:hover {
        background: #F5F5F5 !important;
        border-color: rgba(0, 0, 0, 0.2) !important;
        color: #201F1E !important;
        box-shadow: var(--fluent-shadow-4) !important;
    }

/* ── 5. CARDS — Fluent elevation depth ───────────────────── */
.sc-card,
.team-card,
.office-card,
.case-block,
.blog-card,
.ai-innov-card,
.testimonial-box,
.panel {
    border-radius: var(--r-md) !important; /* 8px Fluent card */
    box-shadow: var(--fluent-shadow-4) !important;
    border: 1px solid rgba(0, 0, 0, 0.13) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

    .sc-card:hover,
    .team-card:hover,
    .office-card:hover,
    .case-block:hover,
    .blog-card:hover,
    .ai-innov-card:hover,
    .testimonial-box:hover,
    .panel:hover {
        box-shadow: var(--fluent-shadow-16) !important;
        transform: none !important; /* Fluent doesn't lift cards */
        border-color: rgba(0, 120, 212, 0.2) !important; /* Fluent blue selection hint */
    }

/* Fluent accent panel left-border */
.panel-accent {
    border-left: 4px solid var(--fluent-blue) !important;
}

/* ── 6. EYEBROW — Fluent left-accent indicator ───────────── */
.eyebrow {
    padding-left: 12px !important;
    position: relative;
}

    .eyebrow::before {
        content: '' !important;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px !important;
        height: 14px !important;
        background: var(--fluent-blue) !important; /* Fluent blue accent line */
        border-radius: 2px !important;
        box-shadow: none !important;
        animation: none !important; /* No pulse on Fluent indicators */
        border-radius: 0 2px 2px 0;
    }
/* Crimson eyebrow variant stays on dark hero */
.home-hero .eyebrow::before,
.hfb-eyebrow::before,
.hero-eyebrow::before {
    background: var(--fluent-crimson) !important;
}
/* Light section eyebrow stays brand */
.section-light .eyebrow::before {
    background: var(--fluent-blue) !important;
}

/* ── 7. FORM CONTROLS — Fluent spec ──────────────────────── */
.form-field input,
.form-field select,
.form-field textarea {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 14px !important; /* Fluent 14px body */
    border: 1px solid rgba(0, 0, 0, 0.14) !important; /* Fluent neutral stroke */
    border-radius: var(--r-sm) !important; /* 4px control */
    padding: 7px 10px !important; /* Fluent input padding */
    background: #FFFFFF !important;
    color: #323130 !important;
    box-shadow: none !important;
    transition: border-color 0.1s ease, box-shadow 0.1s ease !important;
}

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
        outline: none !important;
        border-color: var(--fluent-blue) !important;
        box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3) !important; /* Fluent focus ring */
    }

.form-field label {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important; /* Fluent labels are not ALL CAPS */
    color: #323130 !important;
    margin-bottom: 4px !important;
}

/* ── 8. SCROLL PROGRESS BAR — Fluent blue ────────────────── */
.scroll-progress {
    background: var(--fluent-blue) !important;
    box-shadow: none !important;
}

/* ── 9. METRIC LEFT-BORDER — Fluent selection accent ──────── */
.metric {
    border-left: 3px solid var(--fluent-blue) !important;
    padding-left: 16px !important;
}

/* ── 10. WHY-VYAS ITEM HOVER — Fluent selected state ───────── */
.why-item:hover {
    background: rgba(0, 120, 212, 0.08) !important;
    border-bottom-color: rgba(0, 120, 212, 0.25) !important;
}

/* ── 11. FEATURE LIST CHECK — Fluent blue check ─────────── */
.section-light .feature-list .icon-check {
    background: rgba(0, 120, 212, 0.1) !important;
    color: var(--fluent-blue) !important;
}

/* ── 12. FOOTER — Fluent clean surface ───────────────────── */
.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.footer-socials a:hover {
    border-color: var(--fluent-blue) !important;
    color: var(--fluent-blue) !important;
    background: rgba(0, 120, 212, 0.06) !important;
}

/* ── 13. TRUST STRIP / BADGE — Fluent partner badge ────────── */
.trust-item {
    border-radius: var(--r-md) !important;
    box-shadow: var(--fluent-shadow-4) !important;
}

/* ── 14. HERO CTA BUTTON — larger Fluent CTA ────────────── */
.home-hero .btn-accent,
.hfb-cta,
.hero-actions .btn-accent {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
}

/* ── 15. CLIENTS BAND — Fluent partner logo style ───────── */
.client-logo-item {
    border-radius: var(--r-md) !important;
    box-shadow: var(--fluent-shadow-4) !important;
}

    .client-logo-item:hover {
        box-shadow: var(--fluent-shadow-16) !important;
        transform: translateY(-2px) !important;
    }

/* ── 16. BREADCRUMB — Fluent style ───────────────────────── */
.breadcrumb {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

    .breadcrumb a:hover {
        color: var(--fluent-blue) !important;
    }

/* ── 17. FLUENT SELECTION COLOR ───────────────────────────── */
::selection {
    background: rgba(0, 120, 212, 0.2);
    color: #201F1E;
}

/* ── 18. ANCHOR FOCUS RING — Fluent accessibility ────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--fluent-blue) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* ── 19. OFFICE CARDS — Fluent depth ─────────────────────── */
.office-card {
    border-radius: var(--r-md) !important;
    box-shadow: var(--fluent-shadow-4) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── 20. BLOG CARDS — Fluent ──────────────────────────────── */
.blog-card {
    border-radius: var(--r-md) !important;
}

.blog-read {
    color: var(--fluent-blue) !important;
}

.blog-card-link:hover .blog-read {
    color: var(--fluent-blue-hover) !important;
}

/* ── 21. SC-LINK — Fluent link accent ────────────────────── */
.sc-link {
    color: var(--fluent-blue) !important;
}

.sc-card:hover .sc-link {
    color: var(--fluent-blue-hover) !important;
}

/* ── 22. DELIVER CHECKLIST — Fluent checkmark ───────────── */
.deliver-checklist li::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078D4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
}

/* ── 23. MOBILE NAV — Fluent ─────────────────────────────── */
.mobile-group {
    border-left: 3px solid var(--fluent-blue) !important;
}

/* ── 24. VIP VALUE LIST ICON — Fluent ───────────────────── */
.vip-value-list li svg,
.vip-spotlight .vip-value-list li svg {
    color: var(--fluent-blue) !important;
}

/* ── 25. SECTION-LIGHT OVERRIDES ─────────────────────────── */
.section-light .btn-secondary {
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #323130 !important;
}

    .section-light .btn-secondary:hover {
        background: #F5F5F5 !important;
        border-color: rgba(0, 0, 0, 0.2) !important;
    }

/* ── 26. GOOGLE FONTS OVERRIDE: load Segoe if needed ────── */
/* (Segoe UI is available on Windows/Mac natively; no Google Fonts needed)
   If a user is on Linux without Segoe, Inter is a good fallback — 
   we keep the existing Google Fonts import but deprioritize it */

/* ── 27. PAGE BODY TOP PADDING ─── zero out, hero handles its own offset */
body {
    padding-top: 0 !important;
}

@media (max-width: 760px) {
    body {
        padding-top: 0 !important;
    }
}

/* ── 28. ACTIVE NAV STATE — Fluent blue (not crimson) ──────── */
.site-header:not(.scrolled) .nav-link.active {
    color: rgba(255, 255, 255, 0.95) !important;
}

    .site-header:not(.scrolled) .nav-link.active::after {
        background: #FFFFFF !important;
    }

/* ── 29. CARD RADIUS CONSISTENCY ─────────────────────────── */
.deliver-step {
    border-radius: var(--r-md) !important;
}

.ai-demo {
    border-radius: var(--r-md) !important;
}

.hero-card-minimal {
    border-radius: var(--r-lg) !important;
}

.metrics-block {
    border-radius: var(--r-lg) !important;
}

/* ── 30. CTA STRIP — Fluent banner style ─────────────────── */
.cta-strip {
    background: #F3F6FA !important; /* Fluent light neutral background */
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

    .cta-strip::before, .cta-strip::after {
        display: none !important;
    }

.cta-inner h2 {
    color: #201F1E !important;
}

.cta-inner p {
    color: #323130 !important;
}

/* ── 31. SHOWCASE CARD — Fluent AppSource feel ───────────── */
.showcase .sc-card.sc-featured:first-child {
    box-shadow: var(--fluent-shadow-8), 0 0 0 1.5px var(--fluent-crimson) inset !important;
}

/* ── 32. MOBILE NAV LINK ACTIVE ─────────────────────────── */
.mobile-nav a.active {
    color: var(--fluent-blue) !important;
}

/* ── 33. FORM SUBMIT BUTTON CONSISTENT ────────────────────── */
input[type="submit"], button[type="submit"] {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: var(--r-sm) !important;
}

/* ── 34. AI DEMO CARDS — keep dark but add Fluent depth ──── */
.ai-demo {
    border-radius: var(--r-md) !important;
}

/* ── 35. BLOG FEATURED CARD ──────────────────────────────── */
.blog-featured {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--fluent-shadow-8) !important;
}

    .blog-featured:hover {
        box-shadow: var(--fluent-shadow-16) !important;
        transform: none !important;
    }

/* ── 36. CASE BLOCKS — Fluent ────────────────────────────── */
.case-block {
    background: #FFFFFF !important;
}

.section-light .case-block {
    box-shadow: var(--fluent-shadow-4) !important;
}

/* ── 37. TESTIMONIALS — Fluent ───────────────────────────── */
.testimonial-box {
    border-radius: var(--r-md) !important;
}

/* ── 38. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .eyebrow::before {
        animation: none !important;
    }

    .sc-card, .team-card, .btn {
        transition: none !important;
    }
}

/* ── 39. SEO-RICH STRUCTURAL IMPROVEMENTS ────────────────── */
/* Ensure heading hierarchy is visually distinct */
h1 {
    font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem) !important;
}

h2 {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem) !important;
}

h3 {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem) !important;
}

h4 {
    font-size: 1rem !important;
}

/* ── 40. PARTNER BADGE — "Microsoft Partner" style ─────── */
.ms-badge, [class*="ms-badge"] {
    border-color: rgba(0, 120, 212, 0.4) !important;
    color: #0078D4 !important;
    background: rgba(0, 120, 212, 0.06) !important;
}

/* END FLUENT DESIGN OVERRIDE */

/* ============================================================
   MICROSOFT BRAND ACCENT TEXT SYSTEM
   Professional two-tone coloring for "Microsoft Dynamics 365"
   Used wherever these brand names appear in headings/hero copy.
   ─────────────────────────────────────────────────────────────
   .ms-word  → Microsoft brand blue  (#0078D4)
   .ms-d365  → VyasTec crimson       (#0078D4) — partner accent
   .ms-full  → gradient: blue → crimson (for full phrase spans)
   ============================================================ */

/* "Microsoft" — official brand blue */
.ms-word {
    color: #0078D4 !important;
    -webkit-text-fill-color: #0078D4 !important;
    font-weight: inherit;
}

/* "Dynamics 365" — VyasTec crimson (partner brand) */
.ms-d365 {
    color: #0078D4 !important;
    -webkit-text-fill-color: #0078D4 !important;
    font-weight: inherit;
}

/* Full phrase "Microsoft Dynamics 365" — flowing gradient */
.ms-full {
    background: linear-gradient(90deg, #0078D4 0%, #0078D4 38%, #0078D4 62%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: inherit;
    display: inline;
}

/* On dark hero backgrounds — keep readable */
.home-hero .ms-word,
[class*="hero"] .ms-word {
    color: #47A3E8 !important;
    -webkit-text-fill-color: #47A3E8 !important;
}

.home-hero .ms-d365,
[class*="hero"] .ms-d365 {
    color: #D45070 !important;
    -webkit-text-fill-color: #D45070 !important;
}

/* .serif-italic override — use ms-d365 crimson (clean, no italic needed) */
.serif-italic {
    font-style: normal !important;
    color: #0078D4 !important;
    -webkit-text-fill-color: #0078D4 !important;
    background: none !important;
}
/* On dark sections .serif-italic can be slightly brighter */
.section-light .serif-italic {
    color: #0078D4 !important;
    -webkit-text-fill-color: #0078D4 !important;
    background: none !important;
}

/* ── CONTAINER BREATHING ROOM ────────────────────────────────
   Bump up desktop content width. The 1440px container with 20px
   side gutter gives ~4% more usable width per side vs 1280+28px.
   Also increase section padding slightly so content breathes. */
@media (min-width: 1280px) {
    .container {
        padding: 0 40px !important;
    }
}

@media (min-width: 1440px) {
    .container {
        padding: 0 24px !important;
    }
}

@media (max-width: 1279px) {
    .container {
        padding: 0 28px !important;
    }
}

@media (max-width: 760px) {
    .container {
        padding: 0 20px !important;
    }
}

@media (max-width: 420px) {
    .container {
        padding: 0 16px !important;
    }
}

/* END MICROSOFT ACCENT + CONTAINER FIX */

/* ============================================================
   SECONDARY BUTTON VISIBILITY FIX
   "Request a pilot" (dark vip-spotlight) + "Explore Services" (light cta-strip)
   Both were invisible — wrong contrast against their backgrounds.
   ============================================================ */

/* ── Dark background sections: vip-spotlight, ai-section, any dark card ── */
.vip-spotlight .btn-secondary,
.ai-section .btn-secondary,
[class*="dark"] .btn-secondary,
.section-dark .btn-secondary {
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

    .vip-spotlight .btn-secondary:hover,
    .ai-section .btn-secondary:hover,
    [class*="dark"] .btn-secondary:hover,
    .section-dark .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.85) !important;
        color: #FFFFFF !important;
    }

/* ── Light/neutral CTA strip & general light sections ── */
.cta-strip .btn-secondary,
.section-light .cta-actions .btn-secondary,
.cta-actions .btn-secondary {
    color: #201F1E !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

    .cta-strip .btn-secondary:hover,
    .section-light .cta-actions .btn-secondary:hover,
    .cta-actions .btn-secondary:hover {
        background: #F5F5F5 !important;
        border-color: rgba(0, 0, 0, 0.28) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
        color: #201F1E !important;
    }

/* END BUTTON VISIBILITY FIX */

/* ============================================================
   FIX 1 — HERO HEADLINE ACCENT WORDS: FLUENT GRADIENT SYSTEM
   Replaces flat crimson with directional premium gradients
   per each slide's theme. Matches how D365.com treats
   "Transform your business" accent spans.
   ============================================================ */

/* Blue accent — Implementation / D365 slide */
.hfb-accent,
.hfb-accent-blue {
    background: linear-gradient(95deg, #0078D4 0%, #106EBE 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline !important;
}

/* Pink/crimson accent — ISV / margin slide */
.hfb-accent-pink {
    background: linear-gradient(95deg, #0078D4 0%, #0078D4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline !important;
}

/* Purple accent — AI slide: Microsoft blue → VyasTec crimson */
.hfb-accent-purple {
    background: linear-gradient(95deg, #0078D4 0%, #5B2D8E 50%, #0078D4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline !important;
}

/* Green accent — Industry / sector slide: Microsoft green → blue */
.hfb-accent-green {
    background: linear-gradient(95deg, #107C10 0%, #0078D4 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline !important;
}

/* Safety: gradient text doesn't work on some backgrounds — fallback */
@supports not (-webkit-background-clip: text) {
    .hfb-accent {
        color: #0078D4 !important;
        -webkit-text-fill-color: #0078D4 !important;
    }

    .hfb-accent-blue {
        color: #0078D4 !important;
        -webkit-text-fill-color: #0078D4 !important;
    }

    .hfb-accent-pink {
        color: #0078D4 !important;
        -webkit-text-fill-color: #0078D4 !important;
    }

    .hfb-accent-purple {
        color: #5B2D8E !important;
        -webkit-text-fill-color: #5B2D8E !important;
    }

    .hfb-accent-green {
        color: #107C10 !important;
        -webkit-text-fill-color: #107C10 !important;
    }
}

/* ============================================================
   FIX 2 — "WHY VYAS" LIST: FLUENT DETAIL CARD UPGRADE
   Transforms plain bordered list into Fluent "feature comparison"
   card rows — circled number badge, blue left-border accent,
   prominent navy h3, hover tint.
   ============================================================ */

/* Reset the plain row to a card-style block */
.why-item {
    display: grid !important;
    grid-template-columns: 48px 1fr !important; /* tighter: badge + content */
    gap: 0 16px !important;
    padding: 20px 20px 20px 0 !important;
    border-bottom: none !important; /* remove plain divider */
    border-left: 3px solid #0078D4 !important; /* Fluent selection accent */
    border-radius: 0 6px 6px 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1.6px 3.6px rgba(0,0,0,0.08), 0 0.3px 0.9px rgba(0,0,0,0.06) !important;
    margin-bottom: 12px !important;
    padding-left: 20px !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    align-items: start !important;
}

    .why-item:first-child {
        padding-top: 20px !important;
    }

    .why-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    /* Hover: Fluent blue tint + deeper border */
    .why-item:hover {
        border-left-color: #0078D4 !important;
        border-left-width: 4px !important;
        background: #EFF6FC !important;
        box-shadow: 0 3.2px 7.2px rgba(0,0,0,0.10), 0 0.6px 1.8px rgba(0,0,0,0.08) !important;
    }

/* Number badge — filled circle, brand crimson */
.why-num {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important;
    background: #0078D4 !important; /* VyasTec crimson badge */
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* h3 — full dark navy, Semibold 16px (Fluent subtitle spec) */
.why-item h3 {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1B2437 !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

/* Body — Segoe 14px, comfortable */
.why-item p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    margin: 0 !important;
}

/* Section-light overrides (the why-vyas section is light bg) */
.section-light .why-item {
    background: #FFFFFF !important;
    border-left-color: #0078D4 !important;
}

    .section-light .why-item:hover {
        background: #EFF6FC !important;
    }

    .section-light .why-item h3 {
        color: #1B2437 !important;
    }

    .section-light .why-item p {
        color: #444 !important;
    }

    .section-light .why-item .why-num {
        background: #0078D4 !important;
        color: #FFFFFF !important;
    }

/* Mobile: stack badge above text, keep card feel */
@media (max-width: 640px) {
    .why-item {
        grid-template-columns: 1fr !important;
        gap: 10px 0 !important;
        padding: 16px !important;
        border-left-width: 3px !important;
    }

    .why-num {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}

/* END FIX 1 + FIX 2 */

/* ============================================================
   HEADING GRADIENT ACCENTS — SECTION LEVEL
   Matches the hero slide gradient system, applied to
   section h2 accent words on light backgrounds.
   ============================================================ */

/* "applied AI" — blue → crimson (Microsoft + VyasTec AI blend) */
.accent-ai {
    background: linear-gradient(95deg, #0078D4 0%, #5B2D8E 48%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
    font-style: normal !important;
}

/* "Sector context" — Microsoft green → blue */
.accent-sector {
    background: linear-gradient(95deg, #107C10 0%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
    font-style: normal !important;
}

/* ms-word / ms-d365 — already defined, but ensure gradient on light bg */
.ms-word {
    background: linear-gradient(95deg, #0078D4 0%, #106EBE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
}

.ms-d365 {
    background: linear-gradient(95deg, #0078D4 0%, #0078D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline;
}

/* ============================================================
   HFB CTA BUTTONS — GRADIENT BACKGROUNDS + MORE CURVE
   Each slide's CTA button matches its accent gradient.
   Border-radius increased to pill (100px already) — 
   keep pill but add gradient backgrounds that match accents.
   ============================================================ */

/* Base CTA — slide 1: Implementation (blue gradient) */
.hfb-cta {
    background: linear-gradient(110deg, #0060AA 0%, #0078D4 100%) !important;
    box-shadow: 0 10px 28px -8px rgba(0,120,212,0.45), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
    border-radius: 100px !important;
}

    .hfb-cta:hover {
        box-shadow: 0 16px 36px -8px rgba(0,120,212,0.55), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
        transform: translateY(-2px) !important;
    }

/* Slide 2: ISV / margin — crimson gradient */
.hfb-cta-pink {
    background: linear-gradient(110deg, #7A1428 0%, #0078D4 100%) !important;
    box-shadow: 0 10px 28px -8px rgba(158,27,50,0.5), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
}

    .hfb-cta-pink:hover {
        box-shadow: 0 16px 36px -8px rgba(158,27,50,0.6), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
    }

/* Slide 3: AI — blue → purple → crimson gradient */
.hfb-cta-purple {
    background: linear-gradient(110deg, #0078D4 0%, #5B2D8E 55%, #0078D4 100%) !important;
    box-shadow: 0 10px 28px -8px rgba(91,45,142,0.45), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
}

    .hfb-cta-purple:hover {
        box-shadow: 0 16px 36px -8px rgba(91,45,142,0.55), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
    }

/* Slide 4: Industry/sector — green → blue gradient */
.hfb-cta-green {
    background: linear-gradient(110deg, #107C10 0%, #0078D4 100%) !important;
    box-shadow: 0 10px 28px -8px rgba(16,124,16,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset !important;
}

    .hfb-cta-green:hover {
        box-shadow: 0 16px 36px -8px rgba(16,124,16,0.5), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
    }

/* END GRADIENT ACCENTS + CTA BUTTONS */

/* ============================================================
   CARD BORDER VISIBILITY FIX
   var(--border) is near-invisible on light sections.
   Explicit rgba values make borders crisp on all backgrounds.
   ============================================================ */

/* Light section cards — all card types */
.section-light .sc-card,
.section-light .ind-card,
.section-light .case-block,
.section-light .blog-card,
.section-light .team-card,
.section-light .office-card,
.section-light .deliver-step,
.section-light .ai-innov-card,
.section-light .panel {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04) !important;
}

    /* Hover: Fluent blue selection border */
    .section-light .sc-card:hover,
    .section-light .ind-card:hover,
    .section-light .case-block:hover,
    .section-light .blog-card:hover,
    .section-light .team-card:hover,
    .section-light .office-card:hover {
        border-color: rgba(0, 120, 212, 0.30) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05) !important;
    }

/* Default (non-section-light) cards on white/near-white pages */
.sc-card,
.ind-card,
.blog-card,
.team-card,
.office-card {
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
}

/* END CARD BORDER FIX */

/* ============================================================
   CARD BORDER ROOT FIX
   --border at 0.06 opacity is invisible on white/near-white.
   Override the variable itself + target every card type directly.
   ============================================================ */

/* Fix the variable at root — affects ALL uses site-wide */
:root {
    --border: rgba(0, 0, 0, 0.11) !important;
    --border-soft: rgba(0, 0, 0, 0.07) !important;
    --border-hi: rgba(0, 0, 0, 0.16) !important;
}

/* Belt + suspenders — hit every card class directly */
.sc-card,
.ind-card,
.case-block,
.blog-card,
.team-card,
.office-card,
.deliver-step,
.ai-innov-card,
.panel,
.trust-item,
.client-logo-item,
.faq-item,
.metric,
[class*="-card"],
[class*="-block"] {
    border: 1px solid rgba(0, 0, 0, 0.11) !important;
}

    /* Hover — Fluent blue selection hint */
    .sc-card:hover,
    .ind-card:hover,
    .case-block:hover,
    .blog-card:hover,
    .team-card:hover,
    .office-card:hover,
    .deliver-step:hover,
    .ai-innov-card:hover {
        border-color: rgba(0, 120, 212, 0.28) !important;
    }

/* Trust strip items — slightly stronger border */
.trust-item {
    border: 1px solid rgba(0, 0, 0, 0.13) !important;
}

/* END CARD BORDER ROOT FIX */

/* ============================================================
   CARD BORDER — FINAL AUTHORITY (appended last, wins cascade)
   Fixes var(--border) invisibility across all card types.
   Uses html body prefix for max specificity without !important abuse.
   ============================================================ */
html body .sc-card,
html body .ind-card,
html body .case-block,
html body .blog-card,
html body .team-card,
html body .office-card,
html body .deliver-step,
html body .ai-innov-card,
html body .trust-item,
html body .faq-item {
    border: 1px solid rgba(0, 0, 0, 0.13) !important;
}

    html body .sc-card:hover,
    html body .ind-card:hover,
    html body .case-block:hover,
    html body .blog-card:hover,
    html body .team-card:hover,
    html body .office-card:hover {
        border-color: rgba(0, 120, 212, 0.30) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    /* sc-featured first card keeps crimson border accent */
    html body .sc-card.sc-featured:first-child {
        border-color: rgba(158, 27, 50, 0.35) !important;
    }

/* END FINAL CARD BORDER AUTHORITY */

/* ============================================================
   CARD BORDER — DEFINITIVE FIX
   Real problem: white card (#fff) on white section (#fff).
   Border was there but invisible — same color as bg.
   Fix: section bg → warm off-white, card border → solid #d0d0d0
   ============================================================ */

/* Section bg: warm off-white so white cards visually lift off it */
.section-light {
    background: #F3F6FA !important;
}

/* Every card: white bg + strong visible border */
html body .sc-card,
html body .ind-card,
html body .case-block,
html body .blog-card,
html body .team-card,
html body .office-card,
html body .deliver-step,
html body .ai-innov-card,
html body .trust-item,
html body .faq-item,
html body .showcase .sc-card {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
}

    html body .sc-card:hover,
    html body .ind-card:hover,
    html body .case-block:hover,
    html body .blog-card:hover,
    html body .team-card:hover,
    html body .office-card:hover {
        border-color: #0078D4 !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    /* Featured card keeps crimson */
    html body .sc-card.sc-featured:first-child {
        border-color: rgba(158, 27, 50, 0.5) !important;
    }

/* END DEFINITIVE FIX */

/* ============================================================
   TRUST STRIP + CARD BORDERS — FINAL DEFINITIVE
   Trust items had dark-mode rgba(255,255,255) borders on light bg.
   Cards needed stronger border + background contrast.
   ============================================================ */

/* Trust strip section bg */
.trust-strip {
    background: #F3F6FA !important;
    border-top: 1px solid #C8C5BF !important;
    border-bottom: 1px solid #C8C5BF !important;
}

/* Trust items — white card on warm bg, proper border */
html body .trust-item {
    background: #FFFFFF !important;
    border: 1px solid #C9CDD4 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04) !important;
    color: #1A1A2E !important;
}

    html body .trust-item:hover {
        border-color: #0078D4 !important;
        box-shadow: 0 4px 14px rgba(0,120,212,0.15), 0 1px 4px rgba(0,0,0,0.07) !important;
        transform: translateY(-2px) !important;
        background: #FFFFFF !important;
    }

/* Service + industry cards — bump up contrast */
html body .sc-card,
html body .ind-card,
html body .case-block,
html body .blog-card,
html body .team-card,
html body .office-card,
html body .deliver-step,
html body .showcase .sc-card {
    background: #FFFFFF !important;
    border: 1px solid #C9CDD4 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 10px rgba(0,0,0,0.04) !important;
}

    html body .sc-card:hover,
    html body .ind-card:hover,
    html body .case-block:hover,
    html body .blog-card:hover,
    html body .team-card:hover,
    html body .office-card:hover {
        border-color: #0078D4 !important;
        box-shadow: 0 4px 20px rgba(0,120,212,0.12), 0 1px 4px rgba(0,0,0,0.07) !important;
    }

    /* Featured flagship card — crimson border */
    html body .sc-card.sc-featured:first-child {
        border-color: #0078D4 !important;
        border-width: 1.5px !important;
    }

/* Section bg — warm off-white so white cards lift off it */
.section-light {
    background: #F3F6FA !important;
}

/* END TRUST + CARD BORDER FINAL */

/* ============================================================
   WHY-NUM BADGE — STAT/DATE LABELS, SOFTER RED
   Two-line text badges (25+/yrs, Since/2002 etc)
   Softer crimson: #C0394F instead of hard #0078D4
   ============================================================ */

.why-num {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: #C0394F !important; /* softer red — not so harsh */
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important; /* rounded square — fits 2-line text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    padding: 0 4px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    border-radius: 50% !important; /* keep circle shape */
}

/* Section-light variant */
.section-light .why-num,
.why-item .why-num {
    background: #C0394F !important;
    color: #FFFFFF !important;
}

/* END WHY-NUM BADGE */

/* WHY-NUM: pill shape for "01 / 04" format */
.why-num {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    width: auto !important;
    min-width: 64px !important;
    height: 28px !important;
    border-radius: 14px !important; /* pill */
    padding: 0 10px !important;
    white-space: nowrap !important;
    background: #C0394F !important;
    color: #fff !important;
}

/* ============================================================
   WHY-ITEM — SPACING + BADGE ALIGNMENT FIX
   Badge overflowed h3 because col was 48px but pill is ~72px.
   Also: uniform border-radius on all buttons site-wide.
   ============================================================ */

/* Fix grid: badge col wide enough for pill, proper vertical align */
.why-item {
    grid-template-columns: 80px 1fr !important;
    gap: 0 20px !important;
    align-items: center !important;
    padding: 22px 24px !important;
    margin-bottom: 10px !important;
}

/* Badge: proper pill sizing, centered */
.why-num {
    font-family: 'Segoe UI', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: #FFFFFF !important;
    background: #C0394F !important;
    width: 72px !important;
    height: 28px !important;
    min-width: unset !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* h3 + p sit cleanly in right column */
.why-item h3 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1B2437 !important;
    line-height: 1.35 !important;
}

.why-item p {
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

/* ── UNIFORM BUTTON BORDER-RADIUS — all buttons same curve ── */
.btn,
.btn-accent,
.btn-primary,
.btn-secondary,
.btn-ghost,
.hfb-cta,
.hfb-cta-pink,
.hfb-cta-purple,
.hfb-cta-green,
input[type="submit"],
button[type="submit"],
.nav-cta {
    border-radius: 50px !important;
}

/* Keep hero CTAs as pill (100px) — they're intentionally pill-shaped */
.hfb-cta,
.hfb-cta-pink,
.hfb-cta-purple,
.hfb-cta-green {
    border-radius: 100px !important;
}

/* END SPACING + RADIUS FIX */

/* ============================================================
   SCROLL REVEAL — Lazy, gentle, not dramatic
   Replaces all previous .reveal rules.
   translateY: small (18px), opacity fade, smooth ease-out-quart.
   Stagger delays via .reveal-d1/d2/d3/d4 preserved.
   ============================================================ */

/* Base state: invisible, shifted down slightly */
.reveal,
.stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

    /* Revealed: full opacity, back to natural position */
    .reveal.visible,
    .stagger.visible > * {
        opacity: 1;
        transform: translateY(0);
    }

        /* Stagger children delays */
        .stagger.visible > *:nth-child(1) {
            transition-delay: 0ms;
        }

        .stagger.visible > *:nth-child(2) {
            transition-delay: 80ms;
        }

        .stagger.visible > *:nth-child(3) {
            transition-delay: 160ms;
        }

        .stagger.visible > *:nth-child(4) {
            transition-delay: 240ms;
        }

        .stagger.visible > *:nth-child(5) {
            transition-delay: 320ms;
        }

        .stagger.visible > *:nth-child(6) {
            transition-delay: 400ms;
        }

/* Named delays for individual .reveal elements */
.reveal-d1 {
    transition-delay: 90ms !important;
}

.reveal-d2 {
    transition-delay: 180ms !important;
}

.reveal-d3 {
    transition-delay: 270ms !important;
}

.reveal-d4 {
    transition-delay: 360ms !important;
}

/* Reduced motion: no animation at all, just appear */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   BUTTON BORDER-RADIUS — Uniform pill curve across all buttons
   All CTAs, nav buttons, form submits get border-radius: 50px.
   This is the definitive override — appended last, wins cascade.
   ============================================================ */

/* Every button variant gets the same generous curve */
.btn,
.btn-primary,
.btn-accent,
.btn-secondary,
.btn-ghost,
.nav-cta,
.mobile-cta,
.hfb-cta,
.hfb-cta-pink,
.hfb-cta-purple,
.hfb-cta-green,
input[type="submit"],
button[type="submit"],
button.btn,
a.btn,
.cta-block .btn,
.hero-actions .btn,
.sc-card .btn,
.page-hero .btn {
    border-radius: 50px !important;
}

/* ============================================================
   END SCROLL + BUTTON RADIUS
   ============================================================ */

/* ============================================================
   HERO VISUAL SHAPES — Abstract modern design elements
   Curved accent blocks, visual rhythm, enterprise energy
   ============================================================ */

/* END HERO VISUAL SHAPES */

/* ============================================================
   HEADING ACCENT COLORS — Light blue emphasis on key words
   Enterprise hierarchy. Elegant. Focused.
   ============================================================ */

.accent-blue-heading {
    color: #0078D4;
    font-weight: 700;
}

/* END HEADING ACCENTS */

/* ============================================================
   UNIVERSAL LIGHT BLUE HOVER — Subtle background tint
   All interactive elements: cards, boxes, items
   ============================================================ */

/* Industry cards */
.ind-cell:hover {
    background: rgba(0, 120, 212, 0.08) !important;
}

/* Why-vyas items */
.why-item:hover {
    background: rgba(0, 120, 212, 0.08) !important;
}

/* Service cards already have hover, but ensure light blue */
.sc-card:hover {
    background: rgba(0, 120, 212, 0.05) !important;
}

/* Metric cards */
.metric:hover {
    background: rgba(0, 120, 212, 0.06) !important;
}

/* Generic box/card hover */
[class*="card"]:hover,
[class*="box"]:hover,
[class*="item"]:hover {
    background: rgba(0, 120, 212, 0.06) !important;
}

/* Links in lists */
.list-item:hover,
li:hover {
    background: rgba(0, 120, 212, 0.05) !important;
}

/* Tabs and buttons */
.tab:hover,
.tab-item:hover {
    background: rgba(0, 120, 212, 0.08) !important;
}

/* CTA blocks */
.cta-block:hover,
.cta-item:hover {
    background: rgba(0, 120, 212, 0.07) !important;
}

/* END UNIVERSAL HOVER */

/* ============================================================
   BRAND COLOR SYSTEM — VyasTec logo gradient (final overrides)
   Logo gradient: #F01830 (magenta-red) -> #7B3FA0 (purple) -> #001890 (deep blue)
   Re-applied. Keep this block LAST so it wins the cascade.
   ============================================================ */

/* --- 1. Accent headings: logo gradient (clipped to text) --- */
.accent-ai,
.accent-sector,
.accent-blue-heading {
    background: linear-gradient(95deg, #A8202E 0%, #7B3FA0 50%, #2563EB 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- 1b. Hero headline accents: BRIGHTENED gradient + glow for readability on dark image --- */
/* Accent phrase = pure white for instant readability on any slide image */
.hfb-accent,
.hfb-accent-blue,
.hfb-accent-pink,
.hfb-accent-purple,
.hfb-accent-green {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    filter: none !important;
}

/* Focal word = VyasTec logo gradient, stays the focal point on every slide */
.hfb-key {
    background: linear-gradient(90deg, #FF2D55 0%, #B14AD6 50%, #1D4FFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}

@supports not (-webkit-background-clip: text) {
    .hfb-key {
        color: #FF2D55 !important;
        -webkit-text-fill-color: #FF2D55 !important;
    }
}

/* --- 2. Hero CTA buttons: solid logo gradient fill --- */
.hfb-cta,
.hfb-cta-pink,
.hfb-cta-purple,
.hfb-cta-green {
    background: linear-gradient(95deg, #F01830 0%, #7B3FA0 50%, #001890 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
}

/* --- 3. Nav Request Demo button: logo gradient + 45px radius --- */
.site-header .nav-cta,
.nav-cta {
    background: linear-gradient(95deg, #F01830 0%, #7B3FA0 50%, #001890 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 45px !important;
}

/* --- 4. Hero image overlay: medium dim so CONTENT leads (future-proof) --- */
.hero-fullbleed .hfb-overlay {
    background: linear-gradient(180deg, rgba(7,11,22,0.42) 0%, rgba(7,11,22,0.35) 45%, rgba(7,11,22,0.52) 100%), radial-gradient(ellipse at center, rgba(7,11,22,0.20) 0%, rgba(7,11,22,0.45) 100%) !important;
    z-index: 2 !important;
}

/* --- 5. IMPACT metrics box: lighter medium slate-blue (both instances) --- */
.metrics-block {
    background: linear-gradient(155deg, #34415F 0%, #232F4A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* --- 6. Trust strip pills: neutral bg, blue line icons (MS keeps white tile) --- */
.trust-strip .trust-pill {
    color: #0078D4 !important;
    background: transparent !important;
}

.trust-strip .trust-pill--ms {
    background: #FFFFFF !important;
}

.trust-strip .trust-pill svg path,
.trust-strip .trust-pill svg circle,
.trust-strip .trust-pill svg line,
.trust-strip .trust-pill svg ellipse,
.trust-strip .trust-pill svg polyline {
    stroke: currentColor;
}

.trust-strip .trust-item {
    color: var(--text);
}

/* ============================================================
   MOBILE OVERFLOW HARDENING (final, keep LAST)
   Kills horizontal scroll on phones: safety net, blob clipping,
   long-text wrapping, media cap, tighter phone padding.
   ============================================================ */

/* 1. Global safety net — clip any stray horizontal overflow */
html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* 2. Media never wider than its container */
img, svg, video, canvas, iframe {
    max-width: 100%;
}

/* 3. Long unbroken strings (URLs, emails) wrap instead of pushing width */
.office-val, .footer a, .dl-sub, p, address, .hfb-sub, .lead {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 4. Clip decorative glow/blob layers at their hero containers (belt-and-braces) */
.home-hero, .hero-fullbleed, .section, .vt-page {
    overflow-x: clip;
}

/* 5. Tighter box padding on phones so cards fit without overflow */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .sc-card,
    .office-card,
    .why-item,
    .ind-cell {
        padding: 20px !important;
    }

    .vip-spotlight {
        padding: 28px 20px !important;
    }

    .metrics-block {
        padding: 32px 20px !important;
    }

    /* metric numbers can be huge — keep them from overflowing */
    .metric .num {
        font-size: clamp(2rem, 12vw, 3rem) !important;
        word-break: break-word;
    }
}

/* ============================================================
   SMALL-PHONE 2-COLUMN LAYOUTS (final, keep LAST)
   360 / 375 / 480px: metrics, industries, services side-by-side
   + tighter service cards. Guarded against overflow.
   ============================================================ */
@media (max-width: 480px) {

    /* 1. IMPACT metrics — keep 2x2 (override the 1fr stack) */
    .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .metrics-block .metric {
        padding: 12px 10px !important;
        min-width: 0 !important; /* allow shrinking, no overflow */
    }

        .metrics-block .metric .num {
            font-size: clamp(1.6rem, 9vw, 2.4rem) !important;
            word-break: break-word;
        }

        .metrics-block .metric .lbl {
            font-size: 0.6rem !important;
        }

        .metrics-block .metric .desc {
            font-size: 0.78rem !important;
            line-height: 1.35 !important;
        }

    /* 2. Industries cards — 2 columns side-by-side */
    .industry-grid {
        grid-template-columns: 1fr 1fr !important;
    }

        .industry-grid .ind-cell {
            padding: 16px 14px !important;
            min-width: 0 !important;
        }

            .industry-grid .ind-cell h3 {
                font-size: 1rem !important;
            }

            .industry-grid .ind-cell p {
                font-size: 0.8rem !important;
                line-height: 1.4 !important;
            }

    /* 3. Services cards — 2 columns + smaller/compact boxes */
    .showcase {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

        .showcase .sc-card {
            padding: 16px 14px !important;
            min-height: 0 !important;
            min-width: 0 !important;
        }

            .showcase .sc-card h3 {
                font-size: 0.95rem !important;
                line-height: 1.25 !important;
            }

            .showcase .sc-card p {
                font-size: 0.78rem !important;
                line-height: 1.35 !important;
                margin-bottom: 12px !important;
            }

            .showcase .sc-card .sc-tag {
                font-size: 0.55rem !important;
                padding: 3px 8px !important;
                margin-bottom: 12px !important;
            }

            .showcase .sc-card .sc-icon {
                width: 32px !important;
                height: 32px !important;
                margin-bottom: 14px !important;
            }
            /* flagship sits in the 2-col grid, same size as the others */
            .showcase .sc-card.sc-featured:first-child {
                grid-column: auto !important;
            }

        .showcase .sc-link {
            font-size: 0.8rem !important;
        }
}

/* Marquee logo strip — tighter, still centered, on phones */
@media (max-width: 480px) {
    .clients-marquee {
        padding: 24px 0 !important;
    }
}

/* ============================================================
   JUSTIFIED BODY PARAGRAPHS (final, keep LAST)
   Left-aligned body/lead text -> justify, all screen sizes.
   Centered contexts are explicitly excluded so they stay centered.
   ============================================================ */
.section p,
.section .lead,
.two-col p,
.two-col .lead,
.vt-page .container > p,
.post-body p,
.post-article p,
.post-article li,
.team-card p,
.ind-cell p,
.sc-card p {
    text-align: justify;
    text-justify: inter-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* EXCLUDE centered contexts — keep them centered, never justify */
.page-hero .lead,
.home-hero .lead,
.hfb-content p,
.hfb-sub,
.sect-head p,
.sect-head .lead,
.ai-innovations .sect-head .lead,
[style*="text-align:center"] p,
[style*="text-align: center"] p,
.text-center,
.text-center p,
.cta-band p,
.post-cta-block p,
.post-cta-block,
.footer p,
.metrics-block .desc {
    text-align: inherit;
    hyphens: manual;
}

/* ============================================================
   HERO TEXT QUALITY (final, keep LAST)
   Bolder + slightly larger headline, subtle shadows so text
   stays crisp on the lightened hero image.
   ============================================================ */
.hero-fullbleed .hfb-headline {
    font-weight: 900 !important;
    font-size: clamp(2.05rem, 2.2vw + 0.95rem, 3.35rem) !important;
    text-shadow: 0 2px 14px rgba(7, 11, 22, 0.45), 0 1px 3px rgba(7, 11, 22, 0.55) !important;
}

.hero-fullbleed .hfb-sub {
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem) !important;
    color: rgba(255, 255, 255, 0.97) !important;
    text-shadow: 0 1px 8px rgba(7, 11, 22, 0.5) !important;
}

.hero-fullbleed .hfb-eyebrow {
    text-shadow: 0 1px 6px rgba(7, 11, 22, 0.4) !important;
}
/* ==========================================================
   HERO ENHANCEMENT v2
   Brighter image + better headline + improved readability
   ========================================================== */

/* 1. Lighten hero overlay by ~20-25% */
.hero-fullbleed::before,
.hero-slide::before {
    background: rgba(7, 11, 22, 0.38) !important;
}

/* 2. Slight focus behind content (not visible as a card) */
.hero-fullbleed .hero-content,
.hero-fullbleed .hfb-content {
    position: relative;
}

    .hero-fullbleed .hero-content::before,
    .hero-fullbleed .hfb-content::before {
        content: "";
        position: absolute;
        inset: -40px -60px;
        background: radial-gradient( ellipse at center, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0) 100% );
        pointer-events: none;
        z-index: -1;
    }

/* 3. Sharper main headline */
.hero-fullbleed .hfb-headline {
    font-weight: 900 !important;
    font-size: clamp(2.3rem, 2.5vw + 1rem, 4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -1.5px !important;
    color: #fff !important;
    text-shadow: none !important;
}

/* 4. ERP line using brand-inspired gradient */
.hero-fullbleed .erp-gradient,
.hero-fullbleed .gradient-text {
    background: linear-gradient( 90deg, #ff335c 0%, #ff4f7a 22%, #a855f7 58%, #2563eb 100% ) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
}

/* 5. Paragraph readability */
.hero-fullbleed .hfb-sub {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem) !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.96) !important;
    text-shadow: none !important;
}

/* 6. Better spacing */
.hero-fullbleed .hfb-headline {
    margin-bottom: 24px !important;
}

.hero-fullbleed .hfb-sub {
    margin-top: 24px !important;
    margin-bottom: 36px !important;
}

/* 7. Make workflow icons 10-15% more visible */
.hero-fullbleed .hero-side-icon,
.hero-fullbleed .hero-icon,
.hero-fullbleed .workflow-icon,
.hero-fullbleed .slide-icon {
    opacity: 0.22 !important;
    filter: brightness(1.15) !important;
}

/* 8. Slightly clearer eyebrow */
.hero-fullbleed .hfb-eyebrow {
    color: rgba(255,255,255,0.95) !important;
    border-color: rgba(255,255,255,0.25) !important;
    text-shadow: none !important;
}

/* 9. CTA pop a little more */
.hero-fullbleed .btn,
.hero-fullbleed .hero-btn {
    box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08);
}

/* 10. Slider dots visibility */
.hero-fullbleed .hero-dots button,
.hero-fullbleed .slider-dots button {
    opacity: .75;
}

    .hero-fullbleed .hero-dots button.active,
    .hero-fullbleed .slider-dots button.active {
        opacity: 1;
    }
/* ==================================================
   VyasTec Brand Gradient Text
   ================================================== */

.erp-gradient,
.hero-gradient,
.highlight-text,
.gradient-text {
    background: linear-gradient( 90deg, #ff335c 0%, #ff4f7a 20%, #c946b8 45%, #6b5cff 70%, #2563eb 100% ) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
}
/* ============================================================
   BATCH UPDATE: 4 changes
   ============================================================ */

/* --- 1. MONOSPACE → SANS-SERIF for labels/capsules/pills (all specificity levels) --- */
.trust-label,
.sc-tag,
.sc-card .sc-tag,
.section-light .sc-card .sc-tag,
.section-light .sc-card .sc-tag.sc-tag--cyan,
.section-light .sc-card .sc-tag.sc-tag--violet,
.showcase .sc-card .sc-tag,
.office-tag,
.office-hq-badge,
.office-lbl,
.cert,
.cap-badge,
.hero-badge,
.ai-demo-badge,
.team-role {
    font-family: var(--f-sans, 'Inter', system-ui, -apple-system, sans-serif) !important;
}

/* --- 2. ACCENT HEADINGS → VyasTec logo gradient (all specificity levels) --- */
.serif-italic,
.section-light .serif-italic,
.section-light:not(.ai-innovations) .serif-italic,
.vip-spotlight .vip-content .vip-heading .serif-italic,
.home-hero h1 .serif-italic {
    font-style: normal !important;
    background: linear-gradient(95deg, #A8202E 0%, #7B3FA0 50%, #2563EB 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* On dark bg sections keep it brighter */
.section-dark .serif-italic,
[data-theme="dark"] .serif-italic {
    background: linear-gradient(90deg, #FF6178 0%, #D08CE8 50%, #7E9DFF 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* --- 3. OFFICE CARD → MAPS ICON (inside card, no wrapper) --- */
.office-card[data-map-url] {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

    .office-card[data-map-url]:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 120, 212, 0.18), 0 2px 8px rgba(0,0,0,0.06) !important;
        border-color: #0078D4 !important;
    }
/* Map icon: top-right, fades in on hover */
.office-map-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0078D4;
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 3;
    border-radius: 50%;
    background: rgba(0, 120, 212, 0.08);
}

    .office-map-icon svg {
        width: 20px;
        height: 20px;
    }

.office-card[data-map-url]:hover .office-map-icon {
    opacity: 1;
}

@media (hover: none) {
    .office-map-icon {
        opacity: 0.5;
    }
}
/* Card click opens maps (JS fallback for whole-card tap) */

/* --- 4. TEAM CARD → LINKEDIN LINK (whole card hover) --- */
.team-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    outline: none !important;
    border: none !important;
    background: none !important;
    -webkit-tap-highlight-color: transparent;
}

    .team-card-link .team-card {
        position: relative;
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        flex: 1;
    }

    .team-card-link:hover .team-card {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 119, 181, 0.18), 0 2px 8px rgba(0,0,0,0.06) !important;
        border-color: #0077B5 !important;
    }
    /* LinkedIn icon appears on card hover */
    .team-card-link .team-card::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 16px;
        width: 28px;
        height: 28px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230077B5'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E") no-repeat center / contain;
        opacity: 0;
        transition: opacity 0.25s;
    }

    .team-card-link:hover .team-card::after {
        opacity: 1;
    }
/* On touch: no hover needed, icon always subtle */
@media (hover: none) {
    .team-card-link .team-card::after {
        opacity: 0.4;
    }
}

/* Center hero subcopy */
.hero-fullbleed .hfb-sub {
    text-align: center !important;
}

/* Mobile hero responsive */
@media (max-width: 768px) {
    .hero-fullbleed {
        height: clamp(540px, 85vh, 700px) !important;
    }

        .hero-fullbleed .hfb-bg-img {
            object-fit: cover !important;
            object-position: center center !important;
        }

        .hero-fullbleed .hfb-overlay {
            background: linear-gradient(180deg, rgba(7,11,22,0.30) 0%, rgba(7,11,22,0.22) 45%, rgba(7,11,22,0.40) 100%) !important;
        }

        .hero-fullbleed .hfb-headline {
            font-size: clamp(1.4rem, 4.5vw, 2.2rem) !important;
            line-height: 1.25 !important;
            margin-bottom: 12px !important;
        }

        .hero-fullbleed .hfb-sub {
            font-size: clamp(0.82rem, 2.2vw, 1rem) !important;
            line-height: 1.55 !important;
            margin-bottom: 16px !important;
            max-width: 90% !important;
        }

        .hero-fullbleed .hfb-eyebrow {
            font-size: 0.6rem !important;
            padding: 5px 12px !important;
            margin-bottom: 12px !important;
        }

        .hero-fullbleed .hfb-cta {
            padding: 10px 20px !important;
            font-size: 0.8rem !important;
        }

        .hero-fullbleed .hfb-dots {
            bottom: 12px !important;
        }

        .hero-fullbleed .hfb-content {
            padding: 50px 0 60px !important;
        }
}

@media (max-width: 480px) {
    .hero-fullbleed {
        height: clamp(500px, 90vh, 650px) !important;
    }

        .hero-fullbleed .hfb-headline {
            font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
        }

        .hero-fullbleed .hfb-sub {
            font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
        }
}

/* Remove any focus/visited outlines from team card links */
.team-card-link:focus,
.team-card-link:visited,
.team-card-link:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3-col capability grid responsive */
@media (max-width: 768px) {
    .showcase[style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .showcase[style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* === BATCH FIX: softer red + VIP size + testimonial justify === */

/* 1. Soften gradient red (25-30% less vivid) */
.accent-blue-heading {
    background: linear-gradient(95deg, #A8202E 0%, #7B3FA0 50%, #2563EB 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 2. VIP heading slightly larger + clearer */
.vip-spotlight .vip-content .vip-heading {
    font-size: clamp(2.1rem, 1.5rem + 1.8vw, 2.8rem) !important;
    letter-spacing: -0.02em !important;
}

/* 3. Testimonial/blog text justify */
.testimonial-box blockquote,
.testimonial-box p,
.blog-body p,
.post-body p,
.article-body p {
    text-align: justify !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    word-break: break-word !important;
    text-align-last: left !important;
}

/* Soften capsule tag red backgrounds/borders */
.sc-card .sc-tag,
.section-light .sc-card .sc-tag {
    background: rgba(200,16,46,0.05) !important;
    border: 1px solid rgba(200,16,46,0.18) !important;
}

/* Fix gradient text clipping on last character */
.accent-blue-heading,
.serif-italic,
.hfb-key {
    padding-right: 0.15em !important;
    padding-bottom: 0.05em !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* Testimonial cards top-aligned */
.testimonial-grid {
    align-items: start !important;
}

/* === FEATURED CARD: keep red but toned down === */
.showcase .sc-card.sc-featured:first-child::after {
    opacity: 0 !important;
}

.showcase .sc-card.sc-featured:first-child:hover::after {
    opacity: 0.5 !important;
}

/* Capsule tags: softer, no heavy red */
.sc-tag,
.sc-card .sc-tag,
.section-light .sc-card .sc-tag,
.sc-card .sc-tag.sc-tag--cyan,
.sc-card .sc-tag.sc-tag--violet,
.section-light .sc-card .sc-tag.sc-tag--cyan,
.section-light .sc-card .sc-tag.sc-tag--violet {
    background: rgba(0, 120, 212, 0.06) !important;
    border: 1px solid rgba(0, 120, 212, 0.22) !important;
    color: #0078D4 !important;
}

/* Hide all category capsules, keep only Flagship */
.showcase .sc-tag {
    display: none !important;
}

.showcase .sc-tag--flagship {
    display: inline-block !important;
}

/* Shift VIP heading up slightly so descenders aren't clipped */
.vip-spotlight .vip-content .vip-heading {
    margin-top: -8px !important;
    padding-bottom: 4px !important;
    overflow: visible !important;
}