/* ================================
   QSS Technosoft - Modern Website Styles
   ================================ */

/* CSS Variables */
:root {
    /* Primary Colors - QSS Brand */
    --primary: #E63946;
    --primary-dark: #C1121F;
    --primary-light: #FF6B6B;

    /* Secondary/Accent Colors */
    --accent: #4361EE;
    --accent-light: #4CC9F0;

    /* Neutral Colors */
    --dark: #0D1117;
    --dark-lighter: #161B22;
    --gray-900: #1F2937;
    --gray-800: #374151;
    --gray-700: #4B5563;
    --gray-600: #6B7280;
    --gray-500: #9CA3AF;
    --gray-400: #D1D5DB;
    --gray-300: #E5E7EB;
    --gray-200: #F3F4F6;
    --gray-100: #F9FAFB;
    --white: #FFFFFF;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --gradient-dark: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--gray-100) 0%, var(--white) 100%);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 40px rgba(230, 57, 70, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Container */
    --container-max: 1440px;
    --container-padding: 60px;
}

/* Full width container variant */
.container--full {
    max-width: 100%;
    padding: 0 var(--container-padding);
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--white);
    overflow-x: hidden;
}

/* Prevent scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
    cursor: pointer;
}

ul {
    list-style: none;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Wide container for sections that need more width */
.container--wide {
    max-width: 1600px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn--primary {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 48px;
    background: var(--Blue-2, #E63946);
    box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.65) inset;
    color: var(--white);
}

.btn--primary:hover {
    transform: translateY(-2px);
    background: #C1121F;
    box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.65) inset, 0 6px 16px rgba(230, 57, 70, 0.35);
}

.btn--outline {
    border: 2px solid var(--gray-300);
    color: var(--dark);
    background: transparent;
}

.btn--outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn--large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Ensure minimum touch target size on mobile */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
    }

    .btn--large {
        min-height: 48px;
    }

    .nav__link {
        min-height: 44px;
    }

    .social-link {
        min-width: 44px;
        min-height: 44px;
    }

    .service-card__link,
    .footer__links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

.btn--full {
    width: 100%;
}

.btn-arrow {
    transition: transform var(--transition-fast);
}

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

/* ================================
   Header & Navigation (Hexaview-inspired)
   ================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background: var(--gray-100);
}

.header.scrolled {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.nav__logo {
    display: flex;
    align-items: center;
}

/* Logo Image Styles — official QSS PNG logo, white background blends with header */
.logo-img {
    height: 38px;
    width: auto;
    transition: opacity 0.3s ease;
    display: block;
}

/* Legacy text logo styles (kept for fallback) */
.logo-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
}

.logo-sub {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav__item {
    position: relative;
    cursor: pointer;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-700);
    padding: 8px 14px;
    transition: color 0.2s ease, background-color 0.2s ease;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    cursor: pointer !important;
}

.nav__link:hover,
.nav__item.active > .nav__link {
    color: var(--primary);
    background: transparent;
}

.dropdown-icon {
    width: 10px;
    height: 6px;
    transition: transform 0.3s ease;
    opacity: 0.6;
    flex-shrink: 0;
    pointer-events: none;
}

.nav__link * {
    pointer-events: none;
}

.nav__item:hover .dropdown-icon,
.nav__item.active .dropdown-icon {
    opacity: 1;
}

.nav__item.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 200px;
    padding: var(--space-md);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.nav__item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav__item.dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu li {
    margin-bottom: var(--space-sm);
}

.dropdown-menu li:last-child {
    margin-bottom: 0;
}

.dropdown-menu a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.9375rem;
    transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
    background: var(--gray-100);
    color: var(--primary);
}

/* ================================
   Mega Menu Styles (Hexaview-style)
   ================================ */
.megamenu-overlay {
    /* Disabled — no page-dim overlay when megamenu opens */
    display: none !important;
}

.megamenu-overlay.active {
    display: none !important;
}

.nav__item.has-megamenu {
    position: relative;
    cursor: pointer;
}

.nav__item.has-megamenu > .nav__link {
    position: relative;
    cursor: pointer !important;
}

/* Ensure pointer cursor across the entire nav link area */
.nav__item.has-megamenu > .nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    min-width: 500px;
    max-width: 700px;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
    z-index: 999;
}

.megamenu__inner {
    background: var(--white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    padding: 32px 40px;
}

.nav__item.has-megamenu.active .megamenu,
.nav__item.has-megamenu:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease-out, visibility 0s linear 0s;
}

.nav__item.has-megamenu.active .dropdown-icon,
.nav__item.has-megamenu:hover .dropdown-icon {
    transform: rotate(180deg);
    opacity: 1;
}

.megamenu__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.megamenu__column {
    padding: 0;
}

.megamenu__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.megamenu__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.megamenu__list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--gray-800);
    font-size: 0.9375rem;
    font-weight: 400;
    transition: color 0.2s ease;
    border-radius: 0;
}

.megamenu__list li a:hover {
    color: var(--primary);
    background: transparent;
}

.megamenu__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    flex-shrink: 0;
}

.megamenu__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.megamenu__list li a:hover .megamenu__icon {
    color: var(--primary);
}

/* Bottom CTA Bar */
.megamenu__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.megamenu__footer-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.megamenu__footer-content p {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 0;
}

.megamenu__footer .btn {
    padding: 10px 24px;
    font-size: 0.875rem;
    background: var(--accent);
    color: var(--white);
    border-radius: var(--radius-md);
    font-weight: 500;
    box-shadow: none;
}

.megamenu__footer .btn:hover {
    background: var(--primary);
    transform: none;
    box-shadow: none;
}

/* Compact megamenu for smaller dropdowns */
.megamenu--compact {
    min-width: 400px;
    max-width: 450px;
}

.megamenu--compact .megamenu__inner {
    padding: 24px 28px;
}

.megamenu--compact .megamenu__columns {
    gap: 24px;
}

.megamenu--compact .megamenu__footer {
    display: none;
}

/* Legacy container support - hide if using new structure */
.megamenu__container {
    display: none;
}

.megamenu__cta {
    display: none;
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* Header CTA Button - Hexaview style (outlined) */
.nav__actions .btn--primary {
    /* Solid blue pill per spec — inline-flex so the button sizes to its
       content rather than stretching to fill the header's flex slot. */
    display: inline-flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 48px;
    background: #E63946;
    box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.65) inset;
    border: 0;
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.nav__actions .btn--primary:hover {
    background: #C1121F;
    color: var(--white);
    transform: none;
    box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.65) inset;
    border: 0;
}

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    height: 20px;
    cursor: pointer;
}

.nav__toggle span {
    width: 100%;
    height: 2px;
    background: var(--dark);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

/* ================================
   Hero Section
   ================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0 0;
    margin-top: 80px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 50%, #16213e 100%);
}

.hero__pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(230, 57, 70, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(67, 97, 238, 0.1) 0%, transparent 50%);
    opacity: 0.8;
}

.hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.hero__content {
    color: var(--white);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(10px);
}

.badge-icon {
    color: var(--primary-light);
}

.hero__title {
    color: var(--white);
    margin-bottom: var(--space-lg);
    font-weight: 800;
}

.hero__title .gradient-text {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-xl);
    max-width: 540px;
    line-height: 1.7;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.hero__cta .btn--outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.hero__cta .btn--outline:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.hero__trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.trust-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.trust-badge {
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Hero Visual */
.hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.hero__card--main {
    width: 100%;
    max-width: 420px;
}

.card-header {
    padding: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-dots {
    display: flex;
    gap: var(--space-sm);
}

.card-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.card-dots span:nth-child(1) { background: #FF5F56; }
.card-dots span:nth-child(2) { background: #FFBD2E; }
.card-dots span:nth-child(3) { background: #27CA40; }

.card-content {
    padding: var(--space-lg);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
}

.code-line {
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, 0.9);
}

.code-line.indent {
    padding-left: var(--space-lg);
}

.code-keyword { color: #FF79C6; }
.code-function { color: #50FA7B; }
.code-prop { color: #8BE9FD; }
.code-string { color: #F1FA8C; }

/* Floating Cards */
.hero__floating {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--dark);
}

.hero__floating--1 {
    top: 10%;
    right: -10%;
}

.hero__floating--2 {
    bottom: 20%;
    left: -5%;
}

.floating-icon {
    font-size: 1.25rem;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Hero Scroll Indicator */
.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    position: relative;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--white);
    border-radius: var(--radius-full);
}

@keyframes scroll {
    0%, 100% { opacity: 1; top: 8px; }
    50% { opacity: 0.3; top: 20px; }
}

/* ================================
   Hero Background
   ================================ */

/* Dark gradient background */
.hero__gradient-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0a0a0f 0%, #0d1117 40%, #1a1a2e 100%);
}

.hero--split-ai {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    overflow: hidden;
}

.hero-ai {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 0;
    width: 100%;
}

/* Left Content */
.hero-ai__content {
    max-width: 560px;
}

/* Badge */
.hero-ai__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-ai__badge .badge-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.hero-ai__badge .badge-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Title */
.hero-ai__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.15;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.hero-ai__title .title-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b6b 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    font-weight: 500;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Description */
.hero-ai__desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin: 0 0 2rem;
}

/* CTA Buttons */
.hero-ai__actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hero-ai__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-ai__cta--primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(230, 57, 70, 0.3);
}

.hero-ai__cta--primary:hover {
    background: #ff4757;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(230, 57, 70, 0.4);
}

.hero-ai__cta--primary svg {
    transition: transform 0.3s ease;
}

.hero-ai__cta--primary:hover svg {
    transform: translateX(4px);
}

.hero-ai__cta--outline {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-ai__cta--outline:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

/* Stats */
.hero-ai__stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-stat {
    text-align: center;
}

.ai-stat__number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.ai-stat__label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ai-stat__divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
}

/* Right: AI Graphic */
.hero-ai__graphic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-visual {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.ai-brain {
    width: 100%;
    height: auto;
}

/* Ring animations */
.ai-brain .ring--outer {
    animation: rotateRing 45s linear infinite;
    transform-origin: center;
}

.ai-brain .ring--middle {
    animation: rotateRing 38s linear infinite reverse;
    transform-origin: center;
}

.ai-brain .ring--inner {
    animation: rotateRing 30s linear infinite;
    transform-origin: center;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Node pulse animations */
.ai-brain .node {
    animation: nodePulse 9s ease-in-out infinite;
}

.ai-brain .node--1 { animation-delay: 0s; }
.ai-brain .node--2 { animation-delay: 1.8s; }
.ai-brain .node--3 { animation-delay: 3.6s; }
.ai-brain .node--4 { animation-delay: 5.40s; }
.ai-brain .node--5 { animation-delay: 7.2s; }
.ai-brain .node--6 { animation-delay: 9s; }

.ai-brain .node--outer {
    animation: nodePulse 12s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Data pulse animations */
.ai-brain .pulse {
    opacity: 0;
    animation: dataPulse 4.5s ease-in-out infinite;
}

.ai-brain .pulse--1 { animation-delay: 0s; }
.ai-brain .pulse--2 { animation-delay: 0.75s; }
.ai-brain .pulse--3 { animation-delay: 1.5s; }
.ai-brain .pulse--4 { animation-delay: 2.25s; }
.ai-brain .pulse--5 { animation-delay: 3s; }
.ai-brain .pulse--6 { animation-delay: 3.75s; }

@keyframes dataPulse {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* Connection line animations */
.ai-brain .conn {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLine 3s ease-in-out infinite;
}

.ai-brain .connections line:nth-child(1) { animation-delay: 0s; }
.ai-brain .connections line:nth-child(2) { animation-delay: 0.4s; }
.ai-brain .connections line:nth-child(3) { animation-delay: 0.8s; }
.ai-brain .connections line:nth-child(4) { animation-delay: 1.2s; }
.ai-brain .connections line:nth-child(5) { animation-delay: 1.6s; }
.ai-brain .connections line:nth-child(6) { animation-delay: 2s; }
.ai-brain .connections line:nth-child(7) { animation-delay: 2.4s; }
.ai-brain .connections line:nth-child(8) { animation-delay: 2.8s; }

@keyframes drawLine {
    0%, 100% { stroke-dashoffset: 100; }
    50% { stroke-dashoffset: 0; }
}

/* Core hexagon animation */
.ai-brain .core-hex {
    animation: hexPulse 4s ease-in-out infinite;
}

@keyframes hexPulse {
    0%, 100% { stroke-opacity: 0.8; transform: scale(1); }
    50% { stroke-opacity: 1; transform: scale(1.02); }
}

/* Floating Icons */
.ai-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ai-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    animation: iconFloat 5s ease-in-out infinite;
    transition: all 0.3s ease;
}

.ai-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(230, 57, 70, 0.3);
    transform: scale(1.05);
}

.ai-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--primary);
}

.ai-icon svg.salesforce-logo {
    fill: #00A1E0;
    stroke: none;
}

.ai-icon span {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ai-icon--1 {
    top: 0;
    right: 10%;
    animation-delay: 0s;
}

.ai-icon--2 {
    top: 35%;
    right: -12%;
    animation-delay: 1s;
}

.ai-icon--3 {
    bottom: 5%;
    left: 10%;
    animation-delay: 2s;
}

.ai-icon--4 {
    top: 20%;
    left: -10%;
    animation-delay: 3s;
}

.ai-icon--5 {
    bottom: 10%;
    right: -8%;
    animation-delay: 1.5s;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* GSAP Animation States */
.hero--split-ai.gsap-ready .gsap-badge,
.hero--split-ai.gsap-ready .gsap-title,
.hero--split-ai.gsap-ready .gsap-desc,
.hero--split-ai.gsap-ready .gsap-actions,
.hero--split-ai.gsap-ready .gsap-stats,
.hero--split-ai.gsap-ready .gsap-graphic,
.hero--split-ai.gsap-ready .gsap-label {
    opacity: 0;
    visibility: hidden;
}

/* Fallback: Show elements if GSAP animation hasn't run after 3 seconds */
@keyframes gsapFallback {
    to {
        opacity: 1;
        visibility: visible;
    }
}

.hero--split-ai.gsap-ready .gsap-badge,
.hero--split-ai.gsap-ready .gsap-title,
.hero--split-ai.gsap-ready .gsap-desc,
.hero--split-ai.gsap-ready .gsap-actions,
.hero--split-ai.gsap-ready .gsap-stats,
.hero--split-ai.gsap-ready .gsap-graphic,
.hero--split-ai.gsap-ready .gsap-label {
    animation: gsapFallback 0.5s ease forwards 3s;
}

/* Responsive Split AI Hero */
@media (max-width: 1024px) {
    .hero-ai {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-ai__content {
        max-width: 100%;
        order: 1;
    }

    .hero-ai__graphic {
        order: 0;
    }

    .ai-visual {
        max-width: 350px;
        margin: 0 auto;
    }

    .hero-ai__actions {
        justify-content: center;
    }

    .hero-ai__stats {
        justify-content: center;
    }

    .ai-icon {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero--split-ai {
        min-height: auto;
    }

    .hero-ai {
        padding: 0;
    }

    .hero-ai__title {
        font-size: 2rem;
    }

    .hero-ai__desc {
        font-size: 1rem;
    }

    .hero-ai__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-ai__cta {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .hero-ai__stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .ai-stat__divider {
        display: none;
    }

    .ai-visual {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .hero-ai__title {
        font-size: 1.75rem;
    }

    .hero-ai__badge .badge-text {
        font-size: 0.65rem;
    }

    .ai-stat__number {
        font-size: 1.5rem;
    }

    .ai-visual {
        max-width: 240px;
    }
}
/* ================================
   Stats Section
   ================================ */
.stats {
    padding: var(--space-2xl) 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    margin-top: -1px;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.stat {
    text-align: center;
    padding: var(--space-lg);
}

.stat__number {
    display: block;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stat__label {
    font-size: 0.9375rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ================================
   Section Styles
   ================================ */
.section__header {
    margin-bottom: var(--space-3xl);
}

.section__header--center {
    text-align: center;
}

.section__badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(230, 57, 70, 0.1);
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.section__title {
    margin-bottom: var(--space-md);
}

.section__subtitle {
    font-size: 1.125rem;
    color: var(--gray-600);
    max-width: 600px;
}

.section__header--center .section__subtitle {
    margin: 0 auto;
}

/* ================================
   AI Engineering Services Section
   ================================ */
.ai-services {
    padding: var(--space-2xl) 0;
    background: var(--white);
}

.ai-services__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-3xl);
    align-items: center;
}

.ai-services__content {
    max-width: 700px;
}

.ai-services__desc {
    font-size: 1.1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.ai-services__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.ai-service-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    border: 1px solid transparent;
    transition: all var(--transition-base);
}

.ai-service-card:hover {
    background: var(--white);
    border-color: var(--gray-200);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.ai-service-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
}

.ai-service-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--white);
}

.ai-service-card__content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: var(--space-xs);
}

.ai-service-card__content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* AI Services Visual */
.ai-services__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-services__image {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.ai-visual-abstract {
    width: 100%;
}

.ai-visual-abstract svg {
    width: 100%;
    height: auto;
}

/* Neural network animations */
.ai-nodes circle {
    animation: nodeGlow 3s ease-in-out infinite;
}

.ai-nodes circle:nth-child(odd) {
    animation-delay: 0s;
}

.ai-nodes circle:nth-child(even) {
    animation-delay: 1.5s;
}

@keyframes nodeGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Responsive AI Services */
@media (max-width: 1024px) {
    .ai-services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .ai-services__content {
        max-width: 100%;
        text-align: center;
    }

    .ai-services__cards {
        max-width: 600px;
        margin: 0 auto;
    }

    .ai-service-card {
        text-align: left;
    }

    .ai-services__visual {
        order: -1;
    }

    .ai-services__image {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .ai-services__cards {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .ai-services__image {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .ai-services {
        padding: var(--space-xl) 0;
    }

    .ai-service-card {
        padding: var(--space-md);
    }

    .ai-service-card__icon {
        width: 40px;
        height: 40px;
    }

    .ai-service-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .ai-services__image {
        max-width: 240px;
    }
}

/* ================================
   Services Section
   ================================ */
.services {
    padding: var(--space-2xl) 0;
    background: var(--gray-100);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.service-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-base);
    border: 1px solid var(--gray-200);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.service-card--featured {
    grid-row: span 2;
    background: var(--gradient-dark);
    color: var(--white);
    border: none;
}

.service-card--featured:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
}

.service-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(230, 57, 70, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.service-card--featured .service-card__icon {
    background: rgba(255, 255, 255, 0.1);
}

.service-card__icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--primary);
}

.service-card--featured .service-card__icon svg {
    stroke: var(--primary-light);
}

.service-card__title {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}

.service-card--featured .service-card__title {
    color: var(--white);
}

.service-card__description {
    color: var(--gray-600);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

.service-card--featured .service-card__description {
    color: rgba(255, 255, 255, 0.7);
}

.service-card__features {
    margin-bottom: var(--space-lg);
}

.service-card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
}

.service-card__features li::before {
    content: '✓';
    color: var(--accent-light);
    font-weight: 700;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--primary);
    transition: gap var(--transition-fast);
}

.service-card--featured .service-card__link {
    color: var(--primary-light);
}

.service-card__link:hover {
    gap: var(--space-md);
}

/* ================================
   Why Us Section
   ================================ */
.why-us {
    padding: var(--space-2xl) 0;
    background: var(--white);
}

.why-us__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.why-us__description {
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: var(--space-2xl);
    line-height: 1.7;
}

.pillars {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.pillar {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--gray-100);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.pillar:hover {
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.pillar__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
}

.pillar__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--white);
}

.pillar__content h4 {
    margin-bottom: var(--space-xs);
}

.pillar__content p {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

/* Achievement Cards */
.achievement-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
}

.achievement-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.achievement-card__icon {
    font-size: 2rem;
}

.achievement-card__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
}

.achievement-card__label {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

/* ================================
   Industries Section
   ================================ */
.industries {
    padding: var(--space-2xl) 0;
    background: var(--gray-100);
}

.industries__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg);
}

.industry-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    border: 1px solid var(--gray-200);
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.industry-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.industry-card__icon img {
    width: 64px;
    height: 64px;
}

.industry-card h4 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.industry-card p {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

/* ================================
   Technologies Section
   ================================ */
.technologies {
    padding: var(--space-4xl) 0;
    background: var(--white);
}

.tech-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.tech-category__title {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: var(--space-md);
}

.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.tech-pill {
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-100);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: all var(--transition-fast);
}

.tech-pill:hover {
    background: var(--gradient-primary);
    color: var(--white);
}

/* ================================
   Testimonials Section
   ================================ */
.testimonials {
    padding: var(--space-2xl) 0;
    background: var(--gray-100);
}

.testimonials__slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.testimonial-card {
    background: var(--white);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

.testimonial-card__rating {
    color: #FFB800;
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.testimonial-card__quote {
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    font-style: italic;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.author-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: var(--white);
    font-weight: 700;
    border-radius: 50%;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--dark);
}

.author-role {
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ================================
   CTA Section
   ================================ */
.cta {
    padding: var(--space-2xl) 0;
    background: var(--gradient-dark);
}

.cta__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta__title {
    color: var(--white);
    margin-bottom: var(--space-md);
}

.cta__description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-2xl);
}

.cta__form-wrapper {
    margin-bottom: var(--space-2xl);
}

.contact-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    backdrop-filter: blur(10px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group:last-child {
    margin-bottom: 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    color: var(--white);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form select {
    cursor: pointer;
}

.contact-form select option {
    background: var(--dark);
    color: var(--white);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.15);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.cta__contact-info {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.8);
}

.contact-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary-light);
}

/* ================================
   FAQ Section
   ================================ */
/* ================================
   FAQ — numbered, card-style accordion
   ================================ */
.faq-section {
    padding: var(--space-4xl) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.faq-section::before {
    content: "";
    position: absolute;
    top: 5%;
    left: -150px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(228, 57, 70, 0.07), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.faq-section::after {
    content: "";
    position: absolute;
    bottom: 5%;
    right: -150px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(67, 97, 238, 0.07), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.faq__grid {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    counter-reset: faq-counter;
    position: relative;
    z-index: 1;
}

.faq__item {
    counter-increment: faq-counter;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq__item:hover {
    transform: translateY(-2px);
    border-color: rgba(228, 57, 70, 0.3);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

/* Open state — branded highlight */
.faq__item:has(.faq__question[aria-expanded="true"]) {
    border-color: rgba(228, 57, 70, 0.45);
    box-shadow: 0 14px 32px rgba(228, 57, 70, 0.1);
    background: linear-gradient(135deg, #fff 0%, #fefafa 100%);
}

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.6rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.5;
    transition: color 0.2s ease;
    position: relative;
}

/* Auto-numbered red gradient badge — generated via CSS counter */
.faq__question::before {
    content: counter(faq-counter, decimal-leading-zero);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #b91220 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(228, 57, 70, 0.3);
    letter-spacing: 0.02em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq__item:hover .faq__question::before {
    transform: scale(1.06) rotate(-4deg);
    box-shadow: 0 6px 14px rgba(228, 57, 70, 0.4);
}

.faq__question[aria-expanded="true"]::before {
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(228, 57, 70, 0.45);
}

/* Question text takes the rest of the row, before the chevron */
.faq__question > span {
    flex: 1;
}

.faq__question:hover {
    color: var(--primary);
}

.faq__question[aria-expanded="true"] {
    color: var(--primary);
}

/* Chevron — animated open/close */
.faq__icon {
    flex-shrink: 0;
    color: #9ca3af;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    background: #f3f4f6;
    transition: transform 0.3s ease, color 0.2s ease, background 0.2s ease;
}

.faq__question:hover .faq__icon {
    color: var(--primary);
    background: rgba(228, 57, 70, 0.1);
}

.faq__question[aria-expanded="true"] .faq__icon {
    transform: rotate(180deg);
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #b91220);
}

/* Answer — collapsed by default, expands when --open */
.faq__answer {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.25s ease, visibility 0s linear 0.4s;
}

.faq__answer.faq__answer--open {
    max-height: 600px;
    visibility: visible;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.25s ease 0.05s, visibility 0s linear 0s;
}

.faq__answer > p {
    margin: 0;
    padding: 1.25rem 1.6rem 1.5rem calc(1.6rem + 40px + 1.25rem);  /* align under question text, not under number */
    font-size: 0.98rem;
    color: #4b5563;
    line-height: 1.8;
    border-top: 1px dashed #e5e7eb;
}

.faq__answer > p strong {
    color: #111827;
    font-weight: 700;
}

@media (max-width: 768px) {
    .faq__question {
        padding: 1.1rem 1.1rem;
        gap: 0.85rem;
        font-size: 0.97rem;
    }
    .faq__question::before {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }
    .faq__icon {
        width: 30px;
        height: 30px;
        padding: 6px;
    }
    .faq__answer > p {
        padding: 1rem 1.1rem 1.25rem calc(1.1rem + 32px + 0.85rem);
    }
}

/* ================================
   FAQ — kebab-case markup (.faq-item) used across most pages
   Provides smooth open/close animation + single-open accordion styling
   ================================ */
.faq-list,
.faq-container {
    max-width: 880px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(228, 57, 70, 0.3);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.faq-item[open] {
    border-color: rgba(228, 57, 70, 0.45);
    box-shadow: 0 14px 32px rgba(228, 57, 70, 0.10);
    background: linear-gradient(135deg, #fff 0%, #fefafa 100%);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }

.faq-item summary::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--primary); }

.faq-item > p {
    margin: 0;
    padding: 0 1.5rem 1.4rem;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.65;
    animation: faqContentReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item > p a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@keyframes faqContentReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item > p { animation: none; }
    .faq-item summary::after { transition: none; }
}

/* ================================
   Footer
   ================================ */
/* Footer — light theme with red decorative blur on the right */
.footer {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 1.5rem;
    background: linear-gradient(180deg, #f5f6f8 0%, #ebedf0 100%);
    color: var(--gray-700);
    border-top: 1px solid var(--gray-200);
}

.footer__decoration {
    position: absolute;
    top: -10%;
    right: -200px;
    width: 720px;
    height: 130%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 35% 50%, rgba(228, 57, 70, 0.55) 0%, rgba(228, 57, 70, 0.18) 38%, transparent 65%);
    filter: blur(8px);
    opacity: 0.55;
    z-index: 0;
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer__logo {
    display: inline-block;
    margin-bottom: 2.5rem;
}

.footer__logo .logo-img {
    height: 70px;
    width: auto;
    display: block;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer__col-heading {
    color: #0d1117;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.footer__tagline {
    color: var(--gray-700);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    max-width: 360px;
}

.footer__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer__links a {
    color: #1f2937;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__links a:hover {
    color: var(--primary);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer__copy {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.875rem;
}

.footer__copy-name {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.footer__copy-name:hover {
    text-decoration: underline;
}

.footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer__legal li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer__legal li:not(:last-child)::after {
    content: '|';
    color: var(--primary);
    font-weight: 500;
}

.footer__legal a {
    color: var(--gray-700);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__legal a:hover {
    color: var(--primary);
}

@media (max-width: 968px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer__decoration { opacity: 0.35; }
}

@media (max-width: 600px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================
   Responsive Design
   ================================ */
@media (max-width: 1200px) {
    .hero__container {
        gap: var(--space-2xl);
    }

    .services__grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-card--featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 1024px) {
    .hero__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-2xl);
    }

    .hero__content {
        order: 1;
    }

    .hero__visual {
        order: 0;
        margin-bottom: 0;
    }

    .hero__description {
        margin: 0 auto var(--space-xl);
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__trust {
        align-items: center;
    }

    .hero__floating--1 {
        right: 5%;
        top: 5%;
    }

    .hero__floating--2 {
        left: 5%;
        bottom: 10%;
    }

    .why-us__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .why-us__content {
        text-align: center;
    }

    .pillar {
        text-align: left;
    }

    .achievement-cards {
        max-width: 500px;
        margin: 0 auto;
    }

    .industries__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tech-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials__slider {
        grid-template-columns: 1fr 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 1024px) {
    /* Hide megamenu on tablets and below, use mobile menu */
    .megamenu {
        display: none;
    }

    .megamenu-overlay {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
    }

    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        height: 100dvh;
        padding: 5rem var(--space-lg) var(--space-xl);
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        transition: right var(--transition-base);
        box-shadow: var(--shadow-2xl);
        overflow-y: auto;
        z-index: 1001;
    }

    .nav__menu.active {
        right: 0;
    }

    /* Mobile menu overlay */
    .nav__menu.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        
        z-index: -1;
    }

    .nav__item {
        width: 100%;
    }

    .nav__item.has-megamenu {
        position: relative;
    }

    .nav__link {
        color: var(--dark);
        font-size: 1.125rem;
        padding: var(--space-md) 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--gray-200);
    }

    /* Mobile dropdown styles */
    .nav__item.dropdown .dropdown-menu,
    .nav__item.has-megamenu .megamenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        box-shadow: none;
        background: #F6F6F6;
        border-radius: var(--radius-md);
        margin-top: 0;
        transition: max-height var(--transition-base), padding var(--transition-base), margin var(--transition-base);
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-top: none;
        padding-top: 0;
    }

    /* Neutralize desktop megamenu inner chrome on mobile */
    .nav__item.has-megamenu .megamenu__inner {
        background: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .nav__item.has-megamenu .megamenu__columns {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--space-sm);
        width: 100%;
    }

    .nav__item.has-megamenu .megamenu__list {
        width: 100%;
    }

    .nav__item.has-megamenu .megamenu__list li a {
        white-space: normal;
        word-break: break-word;
        width: 100%;
    }

    .nav__item.has-megamenu .megamenu__footer {
        display: none;
    }

    .nav__item.dropdown.active .dropdown-menu,
    .nav__item.has-megamenu.active .megamenu {
        max-height: 1200px;
        padding: var(--space-sm);
        margin-top: var(--space-sm);
        overflow: visible;
    }

    .nav__item.dropdown.active .dropdown-icon,
    .nav__item.has-megamenu.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Mobile megamenu container */
    .megamenu__container {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-sm);
    }

    .megamenu__column {
        padding: 0;
    }

    .megamenu__title {
        font-size: 0.7rem;
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-xs);
    }

    .megamenu__list li a {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.875rem;
    }

    .megamenu__icon {
        width: 24px;
        height: 24px;
        font-size: 0.875rem;
    }

    .megamenu__cta {
        display: none;
    }

    .dropdown-menu li {
        margin-bottom: 0;
    }

    .dropdown-menu a {
        padding: var(--space-md);
    }

    .nav__toggle {
        display: flex;
        z-index: 1002;
    }

    /* Hamburger animation */
    .nav__toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav__toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .header .btn--primary {
        display: none;
    }

    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .stat {
        padding: var(--space-md);
    }

    .services__grid {
        grid-template-columns: 1fr;
    }

    .service-card--featured {
        grid-column: span 1;
    }

    .industries__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 0.75rem;
    }

    .hero {
        padding: 5rem 0 2rem;
        min-height: auto;
    }

    .hero__badge {
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .hero__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .hero__description {
        font-size: 1rem;
    }

    .hero__cta {
        flex-direction: column;
        width: 100%;
    }

    .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__floating {
        display: none;
    }

    .hero__card--main {
        max-width: 100%;
    }

    .hero__scroll {
        display: none;
    }

    .stats {
        padding: var(--space-xl) 0;
    }

    .stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .stat {
        padding: var(--space-sm);
    }

    .stat__number {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    .stat__label {
        font-size: 0.8125rem;
    }

    .section__header {
        margin-bottom: var(--space-xl);
    }

    .services {
        padding: var(--space-2xl) 0;
    }

    .service-card {
        padding: var(--space-lg);
    }

    .industries {
        padding: var(--space-2xl) 0;
    }

    .industries__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .industry-card {
        padding: var(--space-lg);
    }

    .industry-card__icon {
        font-size: 2rem;
    }

    .technologies {
        padding: var(--space-2xl) 0;
    }

    .tech-categories {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .testimonials {
        padding: var(--space-2xl) 0;
    }

    .testimonials__slider {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: var(--space-lg);
    }

    .cta {
        padding: var(--space-2xl) 0;
    }

    .cta__contact-info {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }

    .contact-form {
        padding: var(--space-lg);
    }

    .footer {
        padding: 2.5rem 0 1rem;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .hero__title {
        font-size: 1.5rem;
    }

    .stats__grid {
        grid-template-columns: 1fr;
    }

    .industries__grid {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        flex-direction: column;
        align-items: center;
    }

    .achievement-cards {
        grid-template-columns: 1fr;
    }
}

/* ─── Industry Page: Use Cases / Agencies / Clients Sections ─── */
.use-cases-section {
    padding: var(--space-4xl, 5rem) 0;
    background: var(--gray-50, #f9fafb);
}

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.use-case-card {
    background: #ffffff;
    border: 1px solid rgba(67, 97, 238, 0.1);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.use-case-card:hover {
    box-shadow: 0 8px 32px rgba(67, 97, 238, 0.12);
    transform: translateY(-3px);
    border-color: rgba(67, 97, 238, 0.25);
}

.use-case-card__icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(67, 97, 238, 0.08) 0%, rgba(67, 97, 238, 0.14) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.use-case-card__icon svg {
    width: 26px;
    height: 26px;
    color: #4361ee;
}

.use-case-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin: 0 0 0.6rem;
    line-height: 1.35;
}

.use-case-card p {
    font-size: 0.875rem;
    color: var(--gray-600, #4b5563);
    line-height: 1.65;
    margin: 0;
}

/* ─── Industry Page: CTA Section ─── */
.cta-section {
    padding: var(--space-4xl, 5rem) 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(67, 97, 238, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.cta-title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cta-desc {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    margin: 0 0 2.25rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive: use-case-grid */
@media (max-width: 1100px) {
    .use-case-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-actions .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* === Internal-link helpers (homepage cross-links) === */
.testimonial-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    transition: color 0.2s, transform 0.2s;
}
.testimonial-card__link:hover {
    color: var(--primary-dark, #b91220);
    transform: translateX(2px);
}

.testimonials__more,
.faq__more {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.95rem;
    color: var(--gray-600);
}
.faq__more p { margin: 0; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}
.link-arrow:hover {
    color: var(--primary-dark, #b91220);
    gap: 0.55rem;
}

/* Make industry-card behave correctly when wrapped in <a> */
a.industry-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ============================================================
   Site-wide floating CTAs: Quick Enquiry side tab + WhatsApp FAB
   ============================================================ */

/* Quick Enquiry — vertical tab pinned to the left edge */
.qss-quick-enquiry {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 8000;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.95rem 0.75rem;
    background: linear-gradient(135deg, #ff5e6c 0%, #e63946 60%, #b91220 100%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0 10px 10px 0;
    writing-mode: vertical-rl;
    transform-origin: left center;
    box-shadow: 0 8px 22px rgba(230, 57, 70, 0.35);
    transition: padding-left 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
.qss-quick-enquiry::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.qss-quick-enquiry:hover {
    padding-left: 1rem;
    box-shadow: 0 12px 30px rgba(230, 57, 70, 0.5);
}

/* WhatsApp floating action button — bottom right */
.qss-whatsapp-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 8000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
    cursor: pointer;
}
.qss-whatsapp-fab::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.45);
    animation: qssWhatsappPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes qssWhatsappPulse {
    0%   { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(1.4);  opacity: 0;   }
}
.qss-whatsapp-fab:hover {
    background: #1ebd58;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 32px rgba(37, 211, 102, 0.6);
}
.qss-whatsapp-fab svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

@media (max-width: 640px) {
    .qss-quick-enquiry { padding: 0.75rem 0.6rem; font-size: 0.72rem; }
    .qss-whatsapp-fab { width: 54px; height: 54px; bottom: 1rem; right: 1rem; }
    .qss-whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ============================================================
   HOME V2 — Desktop.html design implementation (scoped to .home-v2)
   ============================================================ */

body{
    background: #070b18;
    color: #cbd5e1;
}
html, body { margin: 0; padding: 0; }
body{ min-width: 100%; }
.home-v2 .container { max-width: 1600px; padding: 0 48px; }
@media (max-width: 768px) {
    .home-v2 .container { padding: 0 1rem; }
}

/* Logo swap: default for light pages, dark-themed for home-v2 */
.logo-img--dark { display: none; }
body .logo-img--default { display: none; }
body .logo-img--dark {
    display: block;
    height: 64px;
    width: auto;
    mix-blend-mode: screen;
}

/* Hide legacy content fully */
.hv2-legacy-content[hidden] { display: none !important; }

/* Header dark variant */
body .header,
.header--dark {
    background: #070b18 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    box-shadow: none !important;
}
body .nav__link { color: #e2e8f0; }
body .nav__link:hover { color: #fff; }
body .nav__toggle span { background: #fff; }
body .dropdown-icon { color: #cbd5e1; }
body .nav__actions .btn--primary {
    background: #E63946;
    color: #fff;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.92rem;
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.28);
}
body .nav__actions .btn--primary:hover { background: #C1121F; }

/* Megamenu - keep its light style but tweak shadow */
body .megamenu { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }

/* ===== Common HV2 elements ===== */
.hv2-text-red { color: #E63946; }
.hv2-text-gradient {
    background: linear-gradient(90deg, #E63946 0%, #FF6B6B 50%, #FF6B6B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hv2-text-gradient--blue {
    background: linear-gradient(90deg, #C1121F 0%, #E63946 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hv2-section-header { margin-bottom: 2.5rem; }
.hv2-section-header--center { text-align: center; }
/* Homepage display headings — Accenture-style modern grotesque feel:
   tight tracking, medium weight (not bold) so the type reads as elegant
   rather than chunky. Inter is loaded as a variable font (100–900) so we
   can use a precise sub-500 weight. */
.hv2-section-title {
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 450;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.03em;
    margin: 0 0 0.75rem;
}
.hv2-section-title--light { color: #0f172a; }
.hv2-section-sub {
    color: #94a3b8;
    font-size: 1rem;
    max-width: 760px;
    margin: 0 auto;
}
.hv2-section-sub--light { color: #475569; }

.hv2-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FF6B6B;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}
.hv2-link:hover { gap: 10px; color: #93c5fd; }

.hv2-btn--red {
    background: #E63946;
    color: #fff;
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.28);
    border-radius: 10px;
    padding: 14px 26px;
}
.hv2-btn--red:hover { background: #ff4757; transform: translateY(-2px); }
.hv2-btn--blue {
    background: #E63946;
    color: #fff;
    box-shadow: 0 8px 22px rgba(230, 57, 70, 0.32);
    border-radius: 999px;
    padding: 12px 26px;
}
.hv2-btn--blue:hover { background: #C1121F; transform: translateY(-2px); }
.hv2-btn--sm { padding: 10px 20px; font-size: 0.85rem; }

/* ===== HERO ===== */
.hv2-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 100px 0 80px;
    min-height: 700px;
    overflow: hidden;
    background: #000;
}
.hv2-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025) 0,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 28px
    );
}
.hv2-hero__inner {
    /* Single-column block so the content stays inside the container; the
       video escapes via absolute positioning relative to .hv2-hero so it
       can reach the viewport edge (matches the reference image). No
       position:relative on this wrapper — that's intentional so the
       absolute visual's `right: 0` bubbles up to .hv2-hero. */
    display: block;
    width: 100%;
}
.hv2-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Gap matching the spacing rhythm in the reference image — slightly
       more breathing room between badge → heading → description → CTA. */
    gap: 50px;
    /* Wide enough that the description wraps to 2 lines like the image
       ("…enterprise / automation, we deliver…"). */
    max-width: 720px;
    /* Lift content above the video so the "Transformation Company" line
       (which extends beyond this column) can paint OVER the video. */
    position: relative;
    z-index: 2;
}
/* The 28px column gap handles spacing between badge / title / description /
   CTA — zero their legacy margins so the gap isn't doubled. */
.hv2-hero__content > .hv2-hero__badge,
.hv2-hero__content > .hv2-hero__title,
.hv2-hero__content > .hv2-hero__desc,
.hv2-hero__content > .hv2-hero__cta {
    margin: 0;
}
.hv2-hero__badge {
    /* display:flex per spec — inline-flex so the badge sizes to its content
       (the chip in the reference is not full-width). */
    display: inline-flex;
    padding: 6px 16px 7px 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 59px;
    background: #737373;
    border: 0;
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
}
.hv2-hero__badge-check { display: inline-flex; align-items: center; justify-content: center; }
.hv2-hero__title {
    font-family: 'Inter', sans-serif;
    /* Larger, heavier display weight to match the reference hero */
    font-size: clamp(2.6rem, 5.4vw, 4.6rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    /* Keep "Transformation Company" on a single line. The <br> after
       "#1 AI Digital" still forces the two-line layout, but this stops
       the second line from wrapping when the content column is narrow. */
    white-space: nowrap;
}
.hv2-hero__title-blue {
    /* Solid bright blue (no gradient) — matches the reference and the
       "Global Scale" / "With You" accent treatment used elsewhere. */
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
}
/* "Transformation Company" display line — uses Plus Jakarta Sans per spec
   and overflows the content column so the wide text sits OVER the hero
   video on the right. position:relative + high z-index keeps it on top of
   the video, which lives in the next grid column. */
.hv2-hero__title-line {
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.02em;
    display: inline-block;
    position: relative;
    z-index: 3;
    white-space: nowrap;
    /* Don't get clipped by the content column's max-width */
    width: max-content;
    max-width: none;
}
.hv2-hero__desc {
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* Match parent content width so the description can wrap at the same
       point as the reference image ("...enterprise / automation..."). */
    max-width: 720px;
    margin: 0 0 2.25rem;
}
.hv2-hero__cta {
    /* display:flex per spec — using inline-flex so the button sizes to its
       content (as shown in the reference image) rather than stretching to
       fill its parent block. Internal flex layout (centering + gap) is
       identical. */
    display: inline-flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 48px;
    background: #E63946;
    box-shadow: 0 3px 6px 0 rgba(255, 255, 255, 0.65) inset;
    font-size: 1rem;
}
.hv2-hero__cta:hover {
    background: #C1121F;
}
.hv2-hero__visual {
    /* Absolutely positioned relative to .hv2-hero (its closest positioned
       ancestor — .hv2-hero__inner and .container are static). This lets
       the video extend past the container's right padding all the way to
       the viewport edge, matching the reference image where the animation
       reaches the very right of the screen. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    height: auto;
    min-height: 0;
    z-index: 1;
    background: transparent;
    -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #000 60%, transparent 100%);
    mask-image: radial-gradient(130% 130% at 50% 50%, #000 60%, transparent 100%);
}
.hv2-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    mix-blend-mode: screen;
}
@media (max-width: 1024px) {
    .hv2-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .hv2-hero__visual { max-width: 560px; justify-self: start; }
}

/* ===== STATS ===== */
.hv2-stats {
    display: flex;
    padding: 40px 0 80px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    align-self: stretch;
    background: #070b18;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
/* The section's only direct child is .container, which wraps the heading +
   stats grid. Mirror the flex layout onto .container with a tighter gap
   so the heading sits closer to the stats numbers. */
.hv2-stats > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.hv2-stats .hv2-section-title {
    align-self: stretch;
    color: #FFF;
    text-align: center;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: normal;
}
.hv2-stats .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}
.hv2-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.hv2-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    text-align: center;
    padding-right: 2rem;
    position: relative;
}
.hv2-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(148, 163, 184, 0.18);
}
.hv2-stat__value {
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: normal;
    margin: 0;
}
.hv2-stat__label {
    align-self: stretch;
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    margin: 0;
}
.hv2-stat__desc {
    align-self: stretch;
    color: #BDC0CD;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

/* ===== AI ENGINEERING SERVICES (carousel) =====
   Visual reference: accenture.com/in-en — "Enterprise-Grade AI Engineering"
   section. Solid card colors (no gradients), squarer corners, medium-weight
   body type, restrained tag weight with wider letter-spacing. */
.hv2-ai-svc { padding: 80px 0; background: #000; }
.hv2-scroll-wrap { position: relative; overflow: hidden; }
.hv2-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 4px 24px;
}
.hv2-scroll::-webkit-scrollbar { display: none; }

.hv2-ai-svc .hv2-section-title {
    align-self: stretch;
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: normal;
}
.hv2-ai-svc .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.hv2-svc-card {
    flex: 0 0 340px;
    display: flex;
    width: 340px;
    height: 440px;
    padding: 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hv2-svc-card:hover { transform: translateY(-4px); }

.hv2-svc-card--light { background: #F1F1EF; color: #0f172a; }
.hv2-svc-card--dark {
    background: #0e1f4a;
    color: #fff;
}

/* AI-FIRST TEAMS card — solid cream background per spec. */
.hv2-svc-card--bg-m1 {
    background: #F1F1EF;
}

/* AGENTIC AI SYSTEMS card — image baked into the card background with a
   dark blue gradient overlay at the top (matches the Figma spec). The
   inner __media/<img> is removed in the HTML for this card since the
   image is part of the card's own background. */
.hv2-svc-card--bg-m2 {
    display: flex;
    width: 340px;
    height: 440px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    /* `cover` scales the image to fill the card (may crop slightly) but
       avoids the shrinking that happened with the Figma-exported pixel
       offset/% sizing on a card of different dimensions. */
    background:
        linear-gradient(180deg, #003179 21.7%, rgba(0, 49, 121, 0) 75.91%),
        url('/images/m2.png') center / cover no-repeat,
        #003179;
    color: #fff;
}

/* PRODUCT ENGINEERING card — medium-gray background (#4E4F53) with the m6
   photo baked in. Gradient covers top 28% solid, fades to transparent by
   72%, so the tag + body copy reads cleanly over the dark gray area while
   the photo dominates the lower portion. Same pattern as bg-m2 / bg-m4. */
.hv2-svc-card--bg-m6 {
    display: flex;
    width: 340px;
    height: 440px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    background:
        linear-gradient(180deg, #4E4F53 28.38%, rgba(78, 79, 83, 0) 71.91%),
        url('/images/m6.png') center / cover no-repeat,
        #4E4F53;
    color: #fff;
}

/* AI-NATIVE AUTOMATION card — dark teal background (#00282E) with the m4
   photo baked in, gradient overlay covering the top section so the tag +
   body copy reads clearly. Mirrors the bg-m2 pattern. */
.hv2-svc-card--bg-m4 {
    display: flex;
    width: 340px;
    height: 440px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    /* Full image visible (no horizontal crop) sitting at the bottom of the
       card; the dark teal gradient + solid color fills the empty area
       above the image so the tag + body copy reads clearly. */
    background:
        linear-gradient(180deg, #00282E 22.61%, rgba(0, 40, 46, 0) 48.64%),
        url('/images/mm4.png') center bottom / 100% auto no-repeat,
        #00282E;
    color: #fff;
}

.hv2-svc-card__head {
    /* Padding now lives on the card itself (24 all sides). The head just
       holds the tag + body copy at the top of the flex column. */
    padding: 0;
    flex: 0 0 auto;
    width: 100%;
}
.hv2-svc-card__tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 16px;
}
.hv2-svc-card--dark .hv2-svc-card__tag { color: #cbd5e1; }
.hv2-svc-card__head p {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    color: inherit;
    letter-spacing: -0.005em;
}

.hv2-svc-card__media {
    /* Fixed-size media area so the card's space-between distributes empty
       space between the text (top) and the illustration (bottom) instead
       of the media flexing to fill all remaining space. */
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: transparent;
    position: relative;
}
.hv2-svc-card__media svg { width: 100%; height: 100%; display: block; }
.hv2-svc-card--dark .hv2-svc-card__media { background: transparent; }

/* Card media images (Img-1…Img-6).
   Light cards carry flat illustrations whose own off-white background
   (~#f0f0f0) is *slightly lighter* than the cream card (#ece8e0).
   mix-blend-mode:darken picks the darker of image vs card per channel —
   so the image's near-white falls back to the card cream (no visible seam)
   while the dark blue illustration ink stays opaque on top.
   Dark cards carry photos — full-bleed cover, no blend needed. */
.hv2-svc-card__media img {
    width: 100%;
    height: 100%;
    display: block;
}
.hv2-svc-card--light .hv2-svc-card__media {
    /* Match the card's new cream background (#F1F1EF) so the media area
       doesn't show a visible inner rectangle in a different tone. */
    background: #F1F1EF;
}
.hv2-svc-card--light .hv2-svc-card__media img {
    /* `cover` so square and landscape illustrations all fill the media
       area at the same visual size (a square image with `contain` would
       look much smaller than landscape illustrations side-by-side).
       `center` balances any crop between top and bottom so figures stay
       mostly visible regardless of image aspect ratio. */
    object-fit: cover;
    object-position: center;
    mix-blend-mode: darken;
}
.hv2-svc-card--dark .hv2-svc-card__media img {
    object-fit: cover;
    object-position: center;
}
.hv2-svc-card .hv2-link { margin-top: 14px; }

/* Pagination */
.hv2-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 1.5rem;
}
.hv2-pagination--right { justify-content: flex-end; }
.hv2-pagination__counter {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-right: 6px;
}
/* Visually reorder so the layout reads "prev → counter → next". The HTML
   order is "counter → prev → next" (kept for screen-reader logical flow);
   CSS `order` shifts the prev button before the counter and the next
   button after it without touching markup. */
.hv2-pagination__btn[aria-label="Previous"] { order: -1; }
.hv2-pagination__counter                     { order: 0; }
.hv2-pagination__btn[aria-label="Next"]      { order: 1; }
.hv2-pagination__btn {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.20);
    border: 0;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.hv2-pagination__btn:hover { background: rgba(255, 255, 255, 0.30); }
/* Active state inherits the same square translucent look — the previous
   white-pill "active" treatment is dropped in favor of the uniform style
   shown in the reference. */
.hv2-pagination__btn--active { background: rgba(255, 255, 255, 0.20); color: #fff; }
.hv2-pagination__btn--active:hover { background: rgba(255, 255, 255, 0.30); color: #fff; }
/* Disabled state fades per Figma's opacity:0.3. */
.hv2-pagination__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.hv2-pagination__btn:disabled:hover { background: rgba(255, 255, 255, 0.20); }

/* ===== ENTERPRISE SOLUTIONS — portrait cards in a responsive grid =====
   Reference design: photo on top, white content area beneath holding tag,
   title, description, and "Learn more" link. Each card sits in a clean
   responsive grid (auto-fit) — no sticky-stack scroll animation. */
.hv2-ent-sol {
    padding: 80px 0 120px;
    position: relative;
    overflow: visible;
    background-color: #000;
    background-image: url('/images/line-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    /* `contain` so the line pattern keeps its natural aspect and doesn't
       get blown up to fill the whole tall section. `fixed` pins the bg
       to the viewport — as the user scrolls through the cards, the line
       pattern stays anchored in place behind the heading rather than
       scrolling with the section. */
    background-size: contain;
    background-attachment: fixed;
}
/* The heading is sticky and centered behind the cards. Cards have a
   higher z-index so they visually pass OVER the heading as the user
   scrolls past the section (Accenture-style background-text effect). */
.hv2-ent-sol .hv2-section-header {
    position: sticky;
    top: 30vh;
    z-index: 1;
    text-align: center;
    margin-bottom: 0;
    pointer-events: none;
}
/* Per spec — Plus Jakarta Sans, weight 800, white. Main line at 84px,
   the second (accent) line at 96px. */
.hv2-ent-sol .hv2-section-title {
    color: #FFF;
    text-align: center;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 84px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.02em;
    margin: 0;
}
/* Accent line ("Architected for Scale") — slightly larger, also white
   (overrides the inherited blue→purple gradient). */
.hv2-ent-sol .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #FFF;
    color: #FFF;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 96px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
}
/* Push the cards stack down so when the user first scrolls into the
   section, the heading is visible alone. Cards live below the viewport
   until the user scrolls further, then rise up and pass OVER the heading. */
.hv2-ent-stack {
    margin-top: 70vh;
}
/* Lift the card grid above the sticky heading so cards paint OVER it. */
.hv2-ent-stack {
    position: relative;
    z-index: 2;
}

/* ----- Premium scroll-driven heading reveal -----
   Initial CSS state matches the GSAP starting values so there's no flash
   of fully-rendered content before the JS hydrates. The animation script
   (in index.html) drives all transforms / opacity / blur to their final
   values, scrubbed to scroll position. Respects prefers-reduced-motion. */
.heading-reveal {
    will-change: transform, opacity, filter;
    transform: translate3d(0, 120px, 0) scale(0.95);
    opacity: 0;
    filter: blur(8px);
}
.heading-reveal__mask {
    display: block;
    overflow: hidden;
    /* a tiny extra line-height pad so descenders (g, p, y) aren't clipped */
    padding-bottom: 0.05em;
}
.heading-reveal__line {
    display: inline-block;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}
/* Once GSAP has booted and registered the reveal, mark the heading
   ready — at that point the inline transforms from JS take over and the
   element becomes visible. */
.heading-reveal.is-ready {
    opacity: 1;
}
/* Accessibility: skip the animation entirely for users who prefer
   reduced motion. Snap to the final state instantly. */
@media (prefers-reduced-motion: reduce) {
    .heading-reveal {
        transform: none;
        opacity: 1;
        filter: none;
    }
    .heading-reveal__line {
        transform: none;
    }
}

.hv2-ent-stack {
    /* Vertical flex column with alternating left/right alignment so each
       card scrolls into view independently and passes OVER the sticky
       heading one at a time — Accenture-style zig-zag composition. */
    display: flex;
    flex-direction: column;
    gap: 140px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* Each card takes ~half the container width so the alternation reads
   clearly. Cap with max-width so the cards stay readable on huge screens. */
.hv2-ent-slide {
    width: 50%;
    min-width: 380px;
    max-width: 560px;
}
/* Odd cards align left (with QSS logo), even cards align right (with
   "Get in Touch" button). */
.hv2-ent-slide:nth-child(odd)  { align-self: flex-start; }
.hv2-ent-slide:nth-child(even) { align-self: flex-end; }
/* Pad the section above/below so the cards have room to scroll past the
   sticky heading without being clipped at the section edges. */
.hv2-ent-sol {
    padding-top: 140px;
    padding-bottom: 200px;
}

.hv2-ent-slide {
    /* Portrait card: photo on top, content area below. */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #0f172a;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hv2-ent-slide:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* ----- Premium scroll-driven Enterprise Solutions card reveal -----
   The initial hidden state is ONLY applied once JS confirms it's running
   the animation (via the .js-anim class). If JS / GSAP fails to load,
   cards remain visible at their natural rendered state.
   Animation simplified for the horizontal banner layout — rotateX and
   scale were causing visible tilt/misalignment on full-width cards. */
.hv2-ent-stack[data-cards-reveal] .hv2-ent-slide {
    will-change: transform, opacity;
    transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hv2-ent-stack[data-cards-reveal].js-anim .hv2-ent-slide {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
}
/* Once GSAP marks the stack ready, allow the hover transition on transform
   too (GSAP no longer owns transform after the reveal completes). */
.hv2-ent-stack[data-cards-reveal].is-ready .hv2-ent-slide {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Enhanced hover — bigger lift, soft glow tinted with the brand blue. */
.hv2-ent-stack[data-cards-reveal].is-ready .hv2-ent-slide:hover {
    transform: translate3d(0, -10px, 0) scale(1.015);
    box-shadow:
        0 24px 48px -12px rgba(230, 57, 70, 0.18),
        0 12px 24px -8px rgba(0, 0, 0, 0.10);
    z-index: 2;
}

/* Accessibility: skip the reveal entirely for users who prefer reduced
   motion — snap to final state, keep hover lift modest. */
@media (prefers-reduced-motion: reduce) {
    .hv2-ent-stack[data-cards-reveal] .hv2-ent-slide {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .hv2-ent-stack[data-cards-reveal].is-ready .hv2-ent-slide:hover {
        transform: translate3d(0, -3px, 0);
    }
}

/* Photo at the top of the portrait card — uses aspect-ratio so the photo
   proportion stays consistent regardless of column width. */
.hv2-ent-slide__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    background-image: url('/images/og-image.jpg');
}
/* Card 1 — Cloud & DevOps */
.hv2-ent-slide__media[data-img="team-collab"] {
    background-image: url('/images/Cloud%20DevOps.jpg');
    background-color: #0a1226;
}
/* Card 2 — Talk to an AI Architect */
.hv2-ent-slide__media[data-img="team-meeting"] {
    background-image: url('/images/Talk%20to%20an%20AI%20Architect.jpg');
    background-color: #0a1226;
}
/* Card 3 — Gen AI Legacy Code Transformation */
.hv2-ent-slide__media[data-img="dev-coding"] {
    background-image: url('/images/Agentic%20AI%20Systems.png');
    background-color: #0a1226;
}
.hv2-ent-slide__media[data-img="healthcare-ai"] {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        url('/images/og-image.jpg');
    background-color: #f4f1e9;
}
.hv2-ent-slide__media[data-img="data-platform"] {
    background-image:
        linear-gradient(135deg, rgba(10,18,38,0.35), rgba(10,18,38,0.05)),
        url('/images/og-image.jpg');
    background-color: #0a1226;
}

/* Content area — white, padded, flex column. The "Learn more" link is
   pushed to the bottom via margin-top:auto on the link so cards with
   shorter copy still have the CTA anchored at the same vertical position. */
.hv2-ent-slide__body {
    /* White content area beneath the photo. */
    background: #ffffff;
    color: #0f172a;
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.hv2-ent-slide__body .hv2-svc-card__tag {
    background: none;
    padding: 0;
    color: #64748b;
    align-self: flex-start;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.hv2-ent-slide__title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.005em;
}
.hv2-ent-slide__body p {
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    color: #64748b;
    opacity: 1;
}
.hv2-ent-slide__body .hv2-link,
.hv2-ent-slide__body .hv2-link--dark {
    color: #E63946;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 4px;
    font-weight: 500;
}
.hv2-ent-slide__body .hv2-link:hover { color: #C1121F; }
.hv2-ent-slide__body .hv2-btn {
    align-self: flex-start;
    margin-top: auto;
}
.hv2-link--dark { color: #E63946; }
.hv2-link--dark:hover { color: #C1121F; }

/* Normalize variants — uniform white card style for all. */
.hv2-ent-slide--light,
.hv2-ent-slide--cta,
.hv2-ent-slide--feature {
    background: #ffffff;
    color: #0f172a;
}
.hv2-ent-slide--light .hv2-svc-card__tag,
.hv2-ent-slide--cta .hv2-svc-card__tag,
.hv2-ent-slide--feature .hv2-svc-card__tag {
    color: #64748b;
}
/* Metrics block re-toned for the light background. */
.hv2-ent-slide .hv2-metrics { color: #0f172a; }
.hv2-ent-slide .hv2-metric__num { color: #E63946; }
.hv2-ent-slide .hv2-metric__lbl { color: #64748b; }
.hv2-ent-slide .hv2-metric__lbl { color: #64748b; }

/* ----- Feature banner sub-sections -----
   Two horizontal banner panels rendered AFTER the card stack inside the
   Enterprise Solutions section. Independent class namespace
   (.hv2-ent-banner*) so they don't collide with the card styles. */
.hv2-ent-banners {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    gap: 120px;
    position: relative;
    z-index: 2;
    color: #fff;
}
.hv2-ent-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}
.hv2-ent-banner__media {
    flex: 0 0 45%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    /* Lift above the body so the scaleX-2.22 initial state visually
       covers the content area where the body would normally render. */
    position: relative;
    z-index: 2;
}
.hv2-ent-banner__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.hv2-ent-banner__tag {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #cbd5e1;
    align-self: flex-start;
}
.hv2-ent-banner__title {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
}
.hv2-ent-banner__accent {
    color: #E63946;
}
.hv2-ent-banner__body p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
    max-width: 540px;
}
.hv2-ent-banner__body .hv2-btn {
    align-self: flex-start;
}
.hv2-ent-banner__metrics {
    display: flex;
    gap: 32px;
    margin: 8px 0;
    flex-wrap: wrap;
}
.hv2-ent-banner__metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hv2-ent-banner__metric-num {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.hv2-ent-banner__metric-lbl {
    color: #94a3b8;
    font-size: 0.85rem;
}
.hv2-ent-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    transition: gap 0.2s ease, color 0.2s ease;
    align-self: flex-start;
}
.hv2-ent-banner__link:hover {
    gap: 10px;
    color: #93c5fd;
}
.hv2-ent-banner__link svg {
    width: 14px;
    height: 14px;
}

/* ----- Premium scroll-reveal animation for banner sub-section -----
   Targets the [data-banner-reveal] block. Initial hidden states are only
   applied once JS commits to the animation via the .js-anim class — so
   the banner stays visible if GSAP/ScrollTrigger fails to load.

   Masking wrapper on the heading line lets the text rise from below the
   "floor" of its container for the cinematic editorial reveal. */
.hv2-ent-banner__title-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}
.hv2-ent-banner__title-line {
    display: inline-block;
    will-change: transform, opacity, filter;
}

[data-banner-reveal] [data-banner-image] {
    transform-origin: left center;
    will-change: transform;
}
[data-banner-reveal] [data-banner-heading],
[data-banner-reveal] [data-banner-paragraph],
[data-banner-reveal] [data-banner-cta] {
    will-change: transform, opacity;
}

/* Initial state once JS commits to animating — image scaled wide enough
   to visually cover the entire row, content hidden. */
[data-banner-reveal].js-anim [data-banner-image] {
    transform: scaleX(2.22);
}
[data-banner-reveal].js-anim [data-banner-heading] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}
[data-banner-reveal].js-anim [data-banner-paragraph] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}
[data-banner-reveal].js-anim [data-banner-cta] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

/* Hover micro-interaction on the CTA — subtle X-slide + soft glow halo */
[data-banner-reveal] [data-banner-cta] {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-banner-reveal].is-ready [data-banner-cta]:hover {
    transform: translate3d(4px, 0, 0) scale(1.02);
    box-shadow:
        0 12px 32px -6px rgba(230, 57, 70, 0.45),
        0 3px 6px 0 rgba(255, 255, 255, 0.65) inset;
}

@media (prefers-reduced-motion: reduce) {
    [data-banner-reveal].js-anim [data-banner-image],
    [data-banner-reveal].js-anim [data-banner-heading],
    [data-banner-reveal].js-anim [data-banner-paragraph],
    [data-banner-reveal].js-anim [data-banner-cta] {
        opacity: 1;
        transform: none;
        filter: none;
    }
    [data-banner-reveal].is-ready [data-banner-cta]:hover {
        transform: translate3d(2px, 0, 0);
    }
}

/* ----- Banner carousel -----
   The second banner sub-section is a horizontal scroll of banner-style
   cards. Reuses the .hv2-scroll + .hv2-pagination machinery from the AI
   Engineering Services section so prev/next + counter wire up automatically. */
.hv2-ent-banner-carousel {
    margin-top: 80px;
    position: relative;
    z-index: 2;
}
.hv2-ent-banner-carousel__scroll {
    gap: 60px;
    padding-bottom: 8px;
}
/* Each card occupies the full container width minus a small inset so the
   next card peeks in from the right. */
.hv2-ent-banner--carousel-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    max-width: 100%;
}
.hv2-ent-banner-carousel__scroll {
    scroll-snap-type: x mandatory;
}
.hv2-ent-banner-carousel .hv2-pagination {
    margin-top: 24px;
}

@media (max-width: 768px) {
    .hv2-ent-banner-carousel {
        margin-top: 56px;
    }
    .hv2-ent-banner-carousel__scroll {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .hv2-ent-stack {
        gap: 24px;
        max-width: 100%;
        /* Clear the 70vh desktop push-down on mobile so cards aren't far
           below the heading on small screens. */
        margin-top: 1.5rem;
    }
    /* Cards span full width on mobile and skip the zig-zag alignment. */
    .hv2-ent-slide {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .hv2-ent-slide:nth-child(odd),
    .hv2-ent-slide:nth-child(even) {
        align-self: stretch;
    }
    /* On mobile, drop the sticky behavior — single-column stacking and a
       sticky background heading would be cramped on small screens. */
    .hv2-ent-sol {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .hv2-ent-sol .hv2-section-header {
        position: static;
        margin-bottom: 1.5rem;
        pointer-events: auto;
    }
    .hv2-ent-sol .hv2-section-title,
    .hv2-ent-sol .hv2-section-title .hv2-text-gradient {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }
    /* Stack image above content on phones — side-by-side would crush both. */
    .hv2-ent-banners {
        margin-top: 80px;
        gap: 56px;
    }
    .hv2-ent-banner {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .hv2-ent-banner__media {
        flex: 0 0 auto;
        width: 100%;
    }
    /* On mobile, the scaleX reveal animation doesn't apply (cards stack
       vertically). Force everything visible to override the JS-set
       initial state. */
    [data-banner-reveal].js-anim [data-banner-image] {
        transform: none !important;
    }
    [data-banner-reveal].js-anim [data-banner-heading],
    [data-banner-reveal].js-anim [data-banner-paragraph],
    [data-banner-reveal].js-anim [data-banner-cta] {
        opacity: 1 !important;
        transform: none !important;
    }
    .hv2-ent-banner__metrics {
        gap: 20px;
    }
}

.hv2-ent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.hv2-ent-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #0f172a;
}
.hv2-ent-card__media {
    aspect-ratio: 16 / 8;
    background:
        linear-gradient(135deg, rgba(15,23,42,0.55), rgba(15,23,42,0.1)),
        linear-gradient(135deg, #94a3b8, #cbd5e1);
    background-size: cover;
    background-position: center;
}
.hv2-ent-card__media[data-img="team-collab"] {
    background:
        linear-gradient(135deg, rgba(15,23,42,0.35), rgba(15,23,42,0.15)),
        url('/images/og-image.jpg') center/cover, #1e293b;
}
.hv2-ent-card__body { padding: 22px 24px; }
.hv2-ent-card__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; color: #0f172a; }
.hv2-ent-card__body p { color: #475569; font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.75rem; }
.hv2-ent-card .hv2-link { color: #E63946; }
.hv2-ent-card .hv2-link:hover { color: #C1121F; }

/* Talk to AI Architect card */
.hv2-arch-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #0a1226;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0;
    overflow: hidden;
}
.hv2-arch-card__media {
    background:
        linear-gradient(135deg, rgba(10,18,38,0.35), rgba(10,18,38,0.15)),
        url('/images/qss-logo.png') center/40% no-repeat, #1e293b;
}
.hv2-arch-card__body {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.hv2-arch-card__title {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.hv2-arch-card__body p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.hv2-arch-card .hv2-btn { align-self: flex-start; margin-top: 6px; }

/* Gen AI Legacy feature */
.hv2-legacy-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #0a1226;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 0;
}
.hv2-legacy-feature__media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(10,18,38,0.4), rgba(10,18,38,0.1)), #1e293b;
}
.hv2-legacy-feature__body { padding: 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.hv2-legacy-feature__body h3 {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 700;
    color: #fff;
    margin: 4px 0 0;
}
.hv2-legacy-feature__body p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; margin: 0; }

.hv2-metrics { display: flex; gap: 28px; margin: 8px 0; flex-wrap: wrap; }
.hv2-metric { display: flex; flex-direction: column; gap: 4px; }
.hv2-metric__num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #FF6B6B, #FF6B6B);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hv2-metric__lbl { font-size: 0.82rem; color: #94a3b8; }

/* ===== POWERING INNOVATION ACROSS INDUSTRIES =====
   Standalone section that hosts the 5 case-study carousel. Intentionally
   does NOT use any sticky/scroll-driven heading mechanics — heading is
   a plain centered title at the top of the section, carousel below. */
.hv2-power-innov {
    padding: 100px 0 120px;
    background-color: #000;
    position: relative;
    overflow: visible;
}
.hv2-power-innov .hv2-section-header {
    position: static !important;
    top: auto !important;
    pointer-events: auto;
    text-align: center;
    margin-bottom: 56px;
}
.hv2-power-innov .hv2-section-title {
    color: #fff;
    text-align: center;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}
.hv2-power-innov .hv2-section-title .hv2-text-gradient {
    background: linear-gradient(90deg, #FF6B6B, #FF8E53);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.hv2-power-innov .hv2-ent-banner-carousel { margin-top: 0; }

/* ===== TRUSTED BRANDS (light) ===== */
.hv2-brands {
    background: #ffffff;
    padding: 70px 0;
    color: #0f172a;
}
.hv2-brands .hv2-section-header { text-align: center; margin-bottom: 0; }
.hv2-brands .hv2-section-title,
.hv2-brands .hv2-section-title--light { color: #0f172a !important; }
.hv2-brands .hv2-section-sub,
.hv2-brands .hv2-section-sub--light { color: #475569 !important; }
.hv2-brands__cta a,
.hv2-brands a.hv2-btn--blue {
    background: transparent !important;
    color: #E63946 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    font-weight: 600;
    text-decoration: none;
}
.hv2-brands__cta a::after {
    content: " \2192";
}
.hv2-brands__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px 40px;
    align-items: center;
    margin: 44px 0 28px;
}
/* ===== Single-row infinite marquee slider =====
   Logos render in their original colors on white. Track auto-scrolls
   left; duplicated set in markup creates seamless looping. */
.hv2-brands__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 44px 0 28px;
    /* Soft fade on the left and right edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.hv2-brands__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 64px;
    animation: hv2-brands-marquee 38s linear infinite;
    will-change: transform;
}
.hv2-brands__slider:hover .hv2-brands__track { animation-play-state: paused; }
@keyframes hv2-brands-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.hv2-brand {
    height: 80px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: none !important;
    transition: transform 0.25s ease;
}
.hv2-brand:hover { transform: scale(1.05); }
.hv2-brand img {
    max-height: 60px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .hv2-brands__track { animation: none; }
}
.hv2-brand-text {
    font-weight: 700;
    color: #334155;
    font-size: 1.05rem;
}
.hv2-brands__cta { text-align: center; margin-top: 16px; }

/* ===== INDUSTRIES =====
   Light cream cards on dark section. Featured card (Healthcare) spans 2
   rows in a 4-column grid; other cards each have a pastel icon circle on
   top. Mirrors the reference design 1:1. */
.hv2-industries { padding: 80px 0; }

/* Heading accent — solid bright blue (matching Global Scale / With You) */
.hv2-industries .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
}

.hv2-ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
}
.hv2-ind-card {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border: 1px solid rgba(230, 57, 70, 0.10);
    background: #F1F1EF;
    border-radius: 0;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}
.hv2-ind-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(230, 57, 70, 0.45);
}

/* ----- Domain Expertise card scroll reveal -----
   Initial hidden states gated behind .js-anim so cards remain visible if
   GSAP fails to load. GSAP adds .js-anim, sets initial transforms via
   gsap.set, then ScrollTrigger plays the staggered reveal. */
.hv2-ind-grid[data-domain-reveal] .hv2-ind-card {
    will-change: transform, opacity;
}
.hv2-ind-grid[data-domain-reveal].js-anim .hv2-ind-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}
@media (prefers-reduced-motion: reduce) {
    .hv2-ind-grid[data-domain-reveal].js-anim .hv2-ind-card {
        opacity: 1;
        transform: none;
    }
}

/* Icon circle on each non-feature card — slightly larger and softer pastels */
.hv2-ind-card__icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    /* Default = blue (Finance) */
    background: #e0e7ff;
    color: #E63946;
    /* Micro-interaction on parent-card hover */
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hv2-ind-card:hover .hv2-ind-card__icon {
    transform: scale(1.06);
}
.hv2-ind-card__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
}
.hv2-ind-card__icon[data-tone="green"]    { background: #dcfce7; color: #16a34a; }
.hv2-ind-card__icon[data-tone="lavender"] { background: #ede9fe; color: #7c3aed; }
.hv2-ind-card__icon[data-tone="purple"]   { background: #f3e8ff; color: #7c3aed; }
.hv2-ind-card__icon[data-tone="pink"]     { background: #fce7f3; color: #db2777; }

/* Featured (Healthcare) — spans 2 rows in column 1, photo on top */
.hv2-ind-card--feature {
    grid-row: span 2;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Wide variant — spans 2 columns (Manufacturing in row 2) */
.hv2-ind-card--wide { grid-column: span 2; }
.hv2-ind-card__media {
    align-self: stretch;
    aspect-ratio: 16 / 10;
    background: url('/images/HH.png') center/cover no-repeat, #1e293b;
    margin: 18px 18px 0;
    border-radius: 16px;
}
.hv2-ind-card--feature .hv2-ind-card__body {
    padding: 22px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Typography — dark text on cream cards */
.hv2-ind-card__title {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    letter-spacing: -0.005em;
}
.hv2-ind-card__sub {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0 0 0.9rem;
}
.hv2-ind-card p {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

/* Stats list — checkmark icons (replaces blue dot bullets) */
.hv2-ind-card__stats { list-style: none; padding: 0; margin: 0 0 18px; }
.hv2-ind-card__stats li {
    color: #334155;
    font-size: 0.9rem;
    padding: 5px 0 5px 26px;
    position: relative;
}
.hv2-ind-card__stats li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='9 12 12.5 15 17 9.5'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    /* unset legacy dot bullet */
    border-radius: 0;
}
/* Healthcare card CTA — full-width rounded-pill button at the bottom of
   the card, matching the reference design. margin-top:auto pushes it
   against the bottom edge regardless of how much copy sits above it. */
.hv2-ind-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    align-self: stretch;
    margin-top: auto;
    padding: 15px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    /* Match the brand "Get in Touch" / hero CTA palette — #E63946. */
    background: #E63946;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hv2-ind-card__cta:hover {
    background: #C1121F;
}

/* ===== AWS PARTNER ===== */
.hv2-aws {
    position: relative;
    padding: 90px 0;
    /* Layered background: subtle radial brand-blue glow on top of the
       AWS Partner.png artwork, with #050816 as the solid base. */
    background:
        radial-gradient(800px 400px at 50% 50%, rgba(230, 57, 70, 0.12), transparent 60%),
        url('/images/AWS%20Partner.png') center / cover no-repeat,
        #050816;
    text-align: center;
    overflow: hidden;
}
.hv2-aws__watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(4rem, 12vw, 11rem);
    font-weight: 900;
    color: rgba(148, 163, 184, 0.05);
    letter-spacing: 0.05em;
    pointer-events: none;
    user-select: none;
}
.hv2-aws .container { position: relative; z-index: 1; }

/* Heading + subheading sizing/spacing to match the reference */
.hv2-aws .hv2-section-title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
}
.hv2-aws .hv2-section-sub {
    color: #cbd5e1;
    font-size: 1rem;
    margin: 0 auto;
}

/* Pills — solid white pills with brand-blue icon, matching the reference */
.hv2-aws__pills {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 36px 0 32px;
}
.hv2-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: #ffffff;
    border: 0;
    border-radius: 999px;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 600;
}
.hv2-pill__icon {
    color: #E63946;
    flex-shrink: 0;
}

/* Bullets — circle-checkmark icons on the left, vertically aligned with text */
.hv2-aws__bullets {
    list-style: none;
    padding: 0;
    margin: 24px auto 32px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hv2-aws__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #e5e7eb;
    font-size: 0.98rem;
    line-height: 1.45;
    text-align: left;
    padding: 0;
    position: static;
}
.hv2-aws__bullets li::before {
    /* Disable the old dot pseudo-element — replaced with inline SVG below. */
    display: none;
}
.hv2-aws__check {
    color: #cbd5e1;
    flex-shrink: 0;
    margin-top: 2px;
}
.hv2-aws__cta { margin-top: 24px; }

/* ===== ENGAGEMENT MODELS ===== */
.hv2-engage { padding: 80px 0; }
.hv2-engage .hv2-section-title { font-size: clamp(2rem, 4vw, 3.2rem); }
/* "With You" accent — solid bright blue (no gradient), matching the
   "Global Scale" treatment in the AI Engineering section. */
.hv2-engage .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
}
/* Subheading sits directly under the H2, left-aligned to match the title.
   The base .hv2-section-sub rule centers itself with margin:0 auto, which
   pushed this line to the middle-right of the container — undo that here. */
.hv2-engage .hv2-section-sub {
    margin: 0;
    max-width: 760px;
    color: #cbd5e1;
    font-size: 1.02rem;
}
.hv2-engage .hv2-scroll { gap: 22px; padding-bottom: 8px; }
.hv2-eng-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 380px;
    background: #0c1024;
    border: 0;
    border-radius: 0;
    padding: 36px 32px 38px;
    position: relative;
}
.hv2-eng-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ic, #FF6B6B);
    border-radius: 0;
}
.hv2-eng-card__icon {
    width: auto;
    height: 44px;
    background: transparent;
    border-radius: 0;
    color: var(--ic, #FF6B6B);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 26px;
}
.hv2-eng-card__icon svg { width: 44px; height: 44px; }
.hv2-eng-card__title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 26px;
}
.hv2-eng-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hv2-eng-card__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: #cbd5e1;
    font-size: 0.96rem;
    line-height: 1.55;
}
.hv2-eng-card__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--ic, #FF6B6B);
    margin-top: 2px;
}
.hv2-eng-card__list li b {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .hv2-eng-card { flex: 0 0 380px; }
}
.hv2-engage__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 16px;
}
/* "Compare engagement models" CTA — per spec. inline-flex so the button
   sizes to its content rather than stretching across the footer row. */
.hv2-engage__footer .hv2-btn--blue {
    display: inline-flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.32) inset;
}
.hv2-engage__footer .hv2-btn--blue:hover {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.32) inset;
}

/* ===== TESTIMONIAL ===== */
.hv2-testi { padding: 80px 0; }

/* "Themselves" accent — solid bright blue (no gradient), matching the
   site-wide accent palette (#E63946). */
.hv2-testi .hv2-section-title .hv2-text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #E63946;
    color: #E63946;
}

/* Slider — each .hv2-testi__item occupies the full container width so the
   user sees one testimonial at a time. The existing .hv2-scroll machinery
   (flex row, overflow-x: auto, smooth scrolling) handles the rest, and the
   inline pagination IIFE auto-wires the prev/next + 1/N counter. */
.hv2-testi__scroll {
    scroll-snap-type: x mandatory;
    gap: 40px;
    margin-top: 2.5rem;
}
.hv2-testi__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}
.hv2-testi__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.hv2-testi__video { position: relative; }
.hv2-testi__thumb {
    aspect-ratio: 4 / 3;
    background-color: #1e293b;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
/* Per-slide background images so each testimonial shows a distinct visual */
.hv2-testi__thumb[data-img="jim-laitze"] {
    background-image: url('/images/Jim%20Laitze.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hv2-testi__thumb[data-img="testi-2"] {
    background-image:
        linear-gradient(135deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.05)),
        url('/images/og-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hv2-testi__thumb[data-img="testi-3"] {
    background-image:
        linear-gradient(135deg, rgba(67, 56, 202, 0.30), rgba(15, 23, 42, 0.05)),
        url('/images/og-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* ===== Inline HTML5 testimonial videos =====
   Drops a real <video> element into the same 4:3 thumb container used
   by the static testimonial slides. Uses absolute positioning so the
   video reliably fills the aspect-ratio box across browsers, and shows
   the poster image before the user clicks play. */
.hv2-testi__thumb--video {
    background: #000 !important;
    background-image: none !important;
    display: block;
    width: 100%;
}
.hv2-testi__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    border: 0;
    border-radius: 0;
}
.hv2-testi__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}
.hv2-testi__play:hover { transform: translate(-50%, -50%) scale(1.05); }
/* Quote body — white, slightly larger, comfortable line-height */
.hv2-testi__quote p {
    color: #ffffff;
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    font-weight: 400;
}
/* Author block — name larger and bolder, role lighter */
.hv2-testi__author { display: flex; flex-direction: column; gap: 4px; }
.hv2-testi__name {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hv2-testi__role {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 400;
}

/* ===== BLOG ===== */
.hv2-blog { padding: 80px 0; }
.hv2-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* "Our Blog" accent — solid bright blue with underline (no gradient). */
.hv2-blog__accent {
    color: #E63946;
    text-decoration: underline;
    text-underline-offset: 0.1em;
}

.hv2-blog-card {
    background: #F1F1EF;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hv2-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}
.hv2-blog-card__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #1e293b, #0f172a) center/cover no-repeat;
}
.hv2-blog-card__media[data-img="blog-data"]    { background: url('/images/blog1.png') center/cover no-repeat; }
.hv2-blog-card__media[data-img="blog-pacs"]    { background: url('/images/blog2.png') center/cover no-repeat; }
.hv2-blog-card__media[data-img="blog-fintech"] { background: url('/images/blog3.png') center/cover no-repeat; }

.hv2-blog-card__body {
    padding: 22px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Category tag — dark navy pill with folder icon + label */
.hv2-blog-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #0e1f4a;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    align-self: flex-start;
}
.hv2-blog-card__tag svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.hv2-blog-card__title {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 4px 0 0;
}
.hv2-blog-card__excerpt {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hv2-blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
}
.hv2-blog-card__date {
    color: #64748b;
    font-size: 0.86rem;
}

/* "Learn more" CTA — blue label + blue filled arrow box */
.hv2-blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #E63946;
    font-size: 0.92rem;
    font-weight: 600;
    transition: gap 0.2s ease;
}
.hv2-blog-card__cta:hover { gap: 12px; }
.hv2-blog-card__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #E63946;
    color: #ffffff;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.hv2-blog-card__cta:hover .hv2-blog-card__cta-arrow {
    background: #C1121F;
}

/* ===== FAQ + CONTACT ===== */
.hv2-faq-contact { padding: 80px 0; }

/* Heading sized large + centered to match the reference */
.hv2-faq-contact .hv2-section-title {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: -0.02em;
}

/* ----- FAQ + Contact scroll-reveal animations -----
   Initial states gated behind .js-anim so the section remains visible if
   GSAP fails to load. GSAP adds .js-anim and drives the timeline. */
[data-faq-reveal] .hv2-section-header,
[data-faq-reveal] .hv2-cform,
[data-faq-reveal] .hv2-faq-list {
    will-change: transform, opacity;
}
[data-faq-reveal].js-anim .hv2-section-header {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}
[data-faq-reveal].js-anim .hv2-cform {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
}
[data-faq-reveal].js-anim .hv2-faq-list {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
    [data-faq-reveal].js-anim .hv2-section-header,
    [data-faq-reveal].js-anim .hv2-cform,
    [data-faq-reveal].js-anim .hv2-faq-list {
        opacity: 1;
        transform: none;
    }
}
.hv2-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
    margin-top: 2rem;
    align-items: start;
}

.hv2-cform {
    /* Professional dark card matching the homepage palette. A single subtle
       red glow in the bottom-right corner adds brand accent without the
       previous dual-tone gradient. */
    background:
        radial-gradient(circle at 95% 95%, rgba(230, 57, 70, 0.18) 0%, rgba(230, 57, 70, 0) 50%),
        #0f1729;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    padding: 36px 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.hv2-cform__title { color: #fff; font-size: 1.55rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.hv2-cform__sub { color: #94a3b8; font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.6rem; }
.hv2-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.hv2-cform__group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hv2-cform__row .hv2-cform__group { margin-bottom: 0; }
.hv2-cform__group label {
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.hv2-required { color: #FF6B6B; }
.hv2-cform__group input,
.hv2-cform__group select,
.hv2-cform__group textarea {
    background: #070b18;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 10px;
    color: #f8fafc;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.hv2-cform__group input::placeholder,
.hv2-cform__group textarea::placeholder { color: #64748b; }
.hv2-cform__group input:focus,
.hv2-cform__group select:focus,
.hv2-cform__group textarea:focus {
    border-color: #E63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
    background: #0a0f1c;
}
.hv2-cform__group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23cbd5e1' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
.hv2-cform__group select option { color: #f8fafc; background: #0f1729; }
.hv2-cform__group textarea { resize: vertical; min-height: 110px; }
.hv2-cform__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    gap: 16px;
    flex-wrap: wrap;
}
.hv2-cform__nda {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 500;
}
/* Shield icon — outlined for the dark theme */
.hv2-cform__nda-icon {
    flex-shrink: 0;
}
.hv2-cform__submit {
    display: inline-flex;
    padding: 14px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E63946 0%, #C1121F 100%);
    box-shadow: 0 8px 22px rgba(230, 57, 70, 0.42);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    border: 0;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hv2-cform__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(230, 57, 70, 0.55);
    background: linear-gradient(135deg, #FF5060 0%, #E63946 100%);
}

.hv2-faq-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 18px;
    padding: 8px 8px 8px 24px;
    overflow-y: scroll;
    height: var(--hv2-faq-h, 640px);
}
/* Chrome/Edge/Safari — explicit pseudo-elements force a non-overlay scrollbar */
.hv2-faq-list::-webkit-scrollbar {
    width: 10px;
    background: #e2e8f0;
}
.hv2-faq-list::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 0 8px 8px 0;
}
.hv2-faq-list::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
    min-height: 50px;
}
.hv2-faq-list::-webkit-scrollbar-thumb:hover { background: #64748b; }
.hv2-faq-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 4px 0;
}
.hv2-faq-item:last-child { border-bottom: 0; }
.hv2-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 8px;
    cursor: pointer;
    list-style: none;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.4;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.hv2-faq-item summary:hover {
    background: rgba(230, 57, 70, 0.05);
    color: #E63946;
}
.hv2-faq-item summary::-webkit-details-marker { display: none; }
.hv2-faq-icon { color: #475569; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.hv2-faq-item[open] .hv2-faq-icon { transform: rotate(180deg); }
/* Body height is animated by JS; CSS provides the transition curve. */
.hv2-faq-body {
    padding: 0 0 16px;
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .hv2-faq-body,
    .hv2-faq-icon {
        transition: none;
    }
}
.hv2-faq-body p {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 8px;
}

/* ===== FOOTER ===== */
.hv2-footer {
    position: relative;
    background: #050816;
    color: #94a3b8;
    padding: 60px 0 28px;
    overflow: hidden;
}
.hv2-footer__deco {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 50%, rgba(148, 163, 184, 0.04) 50%, rgba(148, 163, 184, 0.04) 52%, transparent 52%),
        linear-gradient(135deg, transparent 60%, rgba(148, 163, 184, 0.04) 60%, rgba(148, 163, 184, 0.04) 62%, transparent 62%);
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.6;
}
.hv2-footer .container { position: relative; z-index: 1; }
.hv2-footer__main {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 64px;
    align-items: stretch;
}
.hv2-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hv2-footer__logo { display: inline-block; }
.hv2-footer__logo img { display: block; width: 130px; height: auto; }
.hv2-footer__socials { display: flex; gap: 10px; }
.hv2-footer__socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.hv2-footer__socials a svg { width: 16px; height: 16px; }
.hv2-footer__socials a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.hv2-footer__right {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.hv2-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 40px;
}
.hv2-footer__col h4 {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.hv2-footer__col-h2 { margin-top: 24px !important; }
.hv2-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hv2-footer__col a {
    color: #94a3b8;
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s;
}
.hv2-footer__col a:hover { color: #fff; }

.hv2-footer__addr h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin: 0 0 12px; }
.hv2-footer__addr p { color: #94a3b8; font-size: 0.88rem; margin: 6px 0; }
.hv2-footer__addr a { color: #94a3b8; }
.hv2-footer__addr a:hover { color: #fff; }

/* Clutch — pushed to bottom of brand column to align with the bottom of the
   link grid + address block on the right side. */
.hv2-footer__clutch {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
}
.hv2-footer__clutch-img { display: block; width: 180px; height: auto; }

.hv2-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    margin-top: 40px;
    padding-top: 24px;
    gap: 20px;
    flex-wrap: wrap;
}
.hv2-footer__copy { color: #94a3b8; font-size: 0.85rem; margin: 0; }
.hv2-footer__certs { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.hv2-footer__certs li {
    background: #3a3a44;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .hv2-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .hv2-stat:nth-child(2)::after { display: none; }
    .hv2-ent-grid { grid-template-columns: 1fr; }
    .hv2-arch-card { grid-template-columns: 1fr; }
    .hv2-legacy-feature { grid-template-columns: 1fr; }
    .hv2-blog__grid { grid-template-columns: 1fr; }
    .hv2-faq-grid { grid-template-columns: 1fr; }
    .hv2-cform { position: static; }
    .hv2-ind-grid { grid-template-columns: repeat(2, 1fr); }
    .hv2-ind-card--feature { grid-row: span 1; }
    .hv2-brands__grid { grid-template-columns: repeat(3, 1fr); }
    .hv2-footer__main { grid-template-columns: 1fr; gap: 40px; }
    .hv2-footer__cols { grid-template-columns: repeat(2, 1fr); }
    .hv2-footer__clutch { margin-top: 8px; }
    .hv2-testi__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .container { padding: 0 1rem; }
    .hv2-hero { padding: 100px 0 60px; min-height: auto; }
    .hv2-hero__content { max-width: 100%; gap: 22px; }
    /* On mobile the absolute video would either obscure content or be off-
       screen — fall back to in-flow stacked below the content. */
    .hv2-hero__visual {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 260px;
        margin-top: 28px;
        right: auto;
        top: auto;
        bottom: auto;
    }
    .hv2-hero__title { font-size: 2.1rem; line-height: 1.15; white-space: normal; }
    .hv2-hero__title-line { font-size: 2.1rem; line-height: 1.2; white-space: normal; width: auto; }
    .hv2-stats__grid { grid-template-columns: 1fr; }
    .hv2-stat::after { display: none !important; }
    .hv2-stat { padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid rgba(148,163,184,.12); }
    .hv2-section-title { font-size: 1.7rem; }
    .hv2-ind-grid { grid-template-columns: 1fr; }
    .hv2-brands__grid { grid-template-columns: repeat(2, 1fr); }
    .hv2-cform__row { grid-template-columns: 1fr; }
    .hv2-footer__cols { grid-template-columns: 1fr; }
    .hv2-engage__footer { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   LEGACY DARK THEME OVERRIDES — applies to every page that loads styles.css
   ===========================================================================
   Forces legacy (non-hv2-*) components used by /about/, /healthcare-*/,
   /hire-*/, /portfolio/*, blog posts, etc. into the dark + red palette so
   they visually align with the home-v2 homepage. Scoped to NOT touch the
   homepage's hv2-* sections (those already self-style). Targets the most
   common legacy class patterns found across tasks.txt + tasks-blogs.txt
   pages. Use `:not(.home-v2 *)` selectors are intentionally avoided so the
   overrides ALSO apply to legacy elements that happen to sit inside .home-v2,
   keeping behavior simple and consistent. */

/* Page-level surfaces ---------------------------------------------------- */
.section,
.section--white,
.section--light,
.section--gray,
.cta-section,
.cta--simple,
.cta-simple,
.impact-section,
.trust-strip {
    background: transparent !important;
    color: #cbd5e1;
}

/* Section headings and copy --------------------------------------------- */
.section__title,
.section__subtitle,
.section__badge,
.cta-title,
.cta-desc,
.impact-content,
.impact-desc,
.impact-stat__number,
.impact-stat__label,
.trust-strip__label,
/* Light-text override for headings on legacy DARK pages only.
   Excluded: hv2-* (homepage v2 self-styled), gradient text, anything
   inside .blog-post__body (white card), and the floating CTA popup
   modal (white card). */
h1:not([class*="hv2-"]):not([class*="gradient"]):not(.blog-post__body *):not(.blog-post__body):not(.cta-floating-popup *),
h2:not([class*="hv2-"]):not([class*="gradient"]):not(.blog-post__body *):not(.cta-floating-popup *),
h3:not([class*="hv2-"]):not([class*="gradient"]):not(.blog-post__body *):not(.cta-floating-popup *),
h4:not([class*="hv2-"]):not(.blog-post__body *):not(.cta-floating-popup *) {
    color: #f8fafc;
}
.section__subtitle,
.cta-desc,
.impact-desc {
    color: #94a3b8 !important;
}

/* Cards (service, feature, generic) ------------------------------------- */
.card,
.service-card,
.feature-card,
.solution-card,
.industry-card,
.tech-card,
.value-card,
.team-card,
.benefit-card,
.process-card,
.testimonial-card,
.blog-card,
.case-study-card {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    color: #cbd5e1 !important;
}
.service-card__title,
.feature-card__title,
.solution-card__title,
.industry-card__title,
.tech-card__title,
.value-card__title,
.benefit-card__title,
.process-card__title,
.blog-card__title,
.case-study-card__title {
    color: #f8fafc !important;
}
.service-card__description,
.feature-card__description,
.solution-card__description,
.industry-card__description,
.tech-card__description,
.value-card__description,
.benefit-card__description,
.process-card__description,
.blog-card__excerpt,
.case-study-card__description {
    color: #94a3b8 !important;
}

/* Hero (legacy) --------------------------------------------------------- */
.hero,
.hero-ai,
.hero--split-ai,
.hero--simple,
.page-hero,
.inner-hero {
    background: linear-gradient(180deg, #050816 0%, #070b18 100%) !important;
    color: #f8fafc;
}
.hero__title,
.hero-ai__title,
.page-hero__title,
.inner-hero__title { color: #f8fafc !important; }
.hero__description,
.hero-ai__desc,
.page-hero__desc { color: #94a3b8 !important; }
.hero__badge,
.hero-ai__badge {
    background: rgba(230, 57, 70, 0.12) !important;
    border: 1px solid rgba(230, 57, 70, 0.35) !important;
    color: #FF6B6B !important;
}

/* Footer (legacy <footer class="footer">) ------------------------------- */
.footer {
    background: #050816 !important;
    color: #94a3b8;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.footer__title,
.footer__heading,
.footer__col-heading,
.footer__logo + p,
.footer h3,
.footer h4 { color: #f8fafc !important; }
.footer a { color: #94a3b8; }
.footer a:hover { color: #fff; }

/* CTAs and buttons (legacy) -------------------------------------------- */
.cta-actions .btn--primary,
.btn--accent,
.btn--cta {
    background: #E63946 !important;
    color: #fff !important;
    border-color: #E63946 !important;
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.28);
}
.btn--outline,
.btn--secondary {
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: #f8fafc !important;
    background: transparent !important;
}
.btn--outline:hover,
.btn--secondary:hover {
    border-color: #E63946 !important;
    color: #E63946 !important;
}

/* Gradient text — re-tint blue gradients to red ------------------------ */
.gradient-text,
.title-gradient,
.text-gradient {
    background: linear-gradient(90deg, #FF6B6B 0%, #E63946 50%, #C1121F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Trust strip / brand logos — white-bg strip with full-color logos
   (no filter), matching the homepage's .hv2-brands look. Used on all
   service / hire / industry pages that have <section class="trust-strip">. */
.trust-strip {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.trust-strip .container { color: #0f172a; }
.trust-strip__label,
.trust-strip h2, .trust-strip h3 {
    color: #0f172a !important;
    text-align: center;
}
.trust-strip__logos,
.trust-strip__logos--img {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 56px;
    margin-top: 28px;
}
.trust-strip__logos img,
.trust-strip__logos--img img {
    max-height: 56px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.25s ease;
}
.trust-strip__logos img:hover,
.trust-strip__logos--img img:hover {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.05);
}

/* Forms (contact, newsletter) ----------------------------------------- */
input[type="text"]:not([class*="hv2-"]),
input[type="email"]:not([class*="hv2-"]),
input[type="tel"]:not([class*="hv2-"]),
input[type="url"]:not([class*="hv2-"]),
textarea:not([class*="hv2-"]),
select:not([class*="hv2-"]) {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    color: #f8fafc !important;
}
input:focus:not([class*="hv2-"]),
textarea:focus:not([class*="hv2-"]),
select:focus:not([class*="hv2-"]) {
    border-color: #E63946 !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18) !important;
    outline: none !important;
}
label:not([class*="hv2-"]) { color: #cbd5e1; }

/* Tables (used in some service pages) ---------------------------------- */
table:not([class*="hv2-"]) {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.18);
}
table:not([class*="hv2-"]) th {
    background: #0f1729;
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.18);
}
table:not([class*="hv2-"]) td {
    border-color: rgba(148, 163, 184, 0.10);
}

/* Note: blog post pages have their own light-theme typography in
   /css/blog.css (dark text on a white .blog-post__content card).
   We deliberately do NOT override those colors here. Generic article
   prose on other legacy pages keeps its own colors too — anything that
   needs dark-theme prose should explicitly opt in. */

/* Anchor links default (not in nav/footer) ---------------------------- */
a:not([class]):not(.nav__link):not(.footer__link) {
    color: #FF6B6B;
}
a:not([class]):hover { color: #E63946; }

/* ============================================================================
   EXTENDED DARK THEME — service / hire / portfolio / industry pages.
   Comprehensive overrides so legacy templates pick up the homepage's dark
   palette. Excluded: .blog-page (handled in /css/blog.css) and .home-v2
   (already self-styled with hv2-* classes).
   ============================================================================ */

/* Cover the legacy hero variants that subpages use */
.hero-section,
.page-banner,
.banner-section,
.inner-banner,
.about-hero,
.contact-hero,
.industries-hero,
.tech-hero,
.services-hero,
.solutions-hero,
.hero--blog,
.hero--about {
    background: linear-gradient(180deg, #050816 0%, #070b18 100%) !important;
    color: #f8fafc;
}
.hero-section *:not(a):not(.btn),
.page-banner *:not(a):not(.btn) {
    color: inherit;
}
.hero-section h1, .page-banner h1, .inner-banner h1,
.about-hero h1, .contact-hero h1, .industries-hero h1,
.services-hero h1, .solutions-hero h1, .tech-hero h1 { color: #fff; }
.hero-section p, .page-banner p, .inner-banner p,
.about-hero p, .contact-hero p, .industries-hero p,
.services-hero p, .solutions-hero p, .tech-hero p { color: #cbd5e1; }

/* Body itself — service / hire / industry / portfolio pages (tasks.txt scope).
   Matches the homepage palette exactly: same #070b18 deep navy and #cbd5e1
   light slate text used by .home-v2. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}
/* All raw text descendants without an explicit color override → light. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) li,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) td,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) span,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) label,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) dd,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) dt {
    color: #e2e8f0;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h4,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h5,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) h6 {
    color: #ffffff;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) strong,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) b { color: #ffffff; }
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) em,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) i { color: #cbd5e1; }

/* Every "section" / surface on legacy pages — match homepage's deep navy. */
.section,
.about-section, .services-section, .features-section, .benefits-section,
.technologies-section, .process-section, .industries-section,
.testimonials-section, .clients-section, .partners-section,
.team-section, .case-studies-section, .stats-section, .why-us-section,
.faq-section, .contact-section, .pricing-section,
.engagement-section, .approach-section, .achievements-section,
.awards-section, .gallery-section,
.bg-light, .bg-gray, .bg-section, .bg-white,
.alternate-section {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}
/* Alternating sections — slightly lifted (matches homepage's section rhythm) */
.section--alt, .section--gray, .section--cream, .section--white,
.bg-section--alt, .bg-section--gray {
    background: #0d1424 !important;
    color: #cbd5e1 !important;
}

/* Inline `style="background: var(--white)"` / `style="background: #fff"` /
   `style="background: white"` on <section>, <div>, <main> — override with
   !important. The attribute selector + !important wins over inline declarations
   that lack !important themselves. Excludes blog pages and homepage. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background: var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background:var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background: white"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background:white"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background: #fff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background:#fff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background: #FFF"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background: #ffffff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[style*="background:#ffffff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background: var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background:var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background: #fff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background:#fff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background: #ffffff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background:#ffffff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background-color: var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) div[style*="background-color:#fff"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) main[style*="background"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:var(--white)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: var(--gray-100)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:var(--gray-100)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: var(--gray-50)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:var(--gray-50)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: var(--gray-200)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:var(--gray-200)"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: #f"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background: #F"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:#f"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background:#F"] {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h4,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h5,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] h6 {
    color: #ffffff !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] li,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [style*="background"] span:not(.btn span) {
    color: #e2e8f0 !important;
}

/* All card variants — homepage-matching surface (#0f1729) + subtle border */
.card-item, .info-card, .stat-card, .testimonial,
.client-logo, .partner-card, .team-member, .award-card,
.service-card, .feature-card, .solution-card, .industry-card,
.tech-card, .value-card, .benefit-card, .process-card,
.testimonial-card, .blog-card, .case-study-card, .pricing-card,
.about-card, .approach-card, .why-us-card, .faq-card,
.icon-card, .step-card, .achievement-card {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-item:hover, .info-card:hover, .service-card:hover,
.feature-card:hover, .solution-card:hover, .industry-card:hover,
.tech-card:hover, .value-card:hover, .benefit-card:hover,
.process-card:hover, .blog-card:hover, .case-study-card:hover,
.team-member:hover, .icon-card:hover {
    border-color: rgba(230, 57, 70, 0.40) !important;
    box-shadow: 0 14px 32px rgba(230, 57, 70, 0.15) !important;
    transform: translateY(-4px);
}
/* Headings inside dark legacy cards — but NOT homepage hv2-* cards or
   blog cards (those sit on light cream/white surfaces with their own dark
   text styling). */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) h4,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) h5,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial h4,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .client-logo h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .partner-card h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .team-member h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .award-card h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .achievement-card h3 {
    color: #f8fafc !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"]:not([class*="hv2-"]):not([class*="blog-card-new"]) li,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial blockquote { color: #94a3b8 !important; }

/* Pure-white "cards" the legacy templates spawn from light bg */
.card, .panel, .box, .info-box, .feature-box, .content-box {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
}
.card *, .panel *, .box *, .info-box *, .feature-box *, .content-box * {
    border-color: rgba(148, 163, 184, 0.10);
}

/* Tabbed / accordion components */
.tab-pane, .accordion-item, .accordion-button, .accordion-body,
.tab-content, .nav-tabs .nav-link {
    background: transparent !important;
    color: #cbd5e1 !important;
}
.accordion-item { border-color: rgba(148, 163, 184, 0.10) !important; }
.accordion-button:not(.collapsed) {
    background: rgba(230, 57, 70, 0.10) !important;
    color: #fff !important;
}

/* Footer (legacy) — matches the homepage hv2-footer aesthetic */
.footer, footer.footer, .site-footer {
    background: #050816 !important;
    color: #94a3b8;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.footer h2, .footer h3, .footer h4, .footer h5,
footer.footer h3, footer.footer h4, .site-footer h3, .site-footer h4 {
    color: #f8fafc !important;
}
.footer a, footer.footer a, .site-footer a { color: #94a3b8; }
.footer a:hover, footer.footer a:hover, .site-footer a:hover { color: #fff; }

/* Buttons — legacy variants picked up by the brand red */
.btn--cta, .btn-cta, .button--primary, .button-primary,
.btn-gradient, .btn-red, .btn-brand, .read-more-btn {
    background: #E63946 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.28);
    border-radius: 999px;
}
.btn--cta:hover, .btn-cta:hover, .button--primary:hover,
.btn-gradient:hover, .btn-red:hover, .read-more-btn:hover {
    background: #C1121F !important;
    transform: translateY(-2px);
}

/* Inputs in legacy contact forms */
.contact-form input,
.contact-form textarea,
.contact-form select,
input.form-control:not([class*="hv2-"]),
textarea.form-control:not([class*="hv2-"]),
select.form-control:not([class*="hv2-"]) {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    color: #f8fafc !important;
    border-radius: 10px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder { color: #64748b !important; }
.contact-form input:focus,
.contact-form textarea:focus,
input.form-control:focus,
textarea.form-control:focus {
    border-color: #E63946 !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18) !important;
    outline: none !important;
}

/* Iconboxes / number badges */
.icon-box, .icon-circle, .step-number, .stat-number,
.number-badge, .feature-icon-wrap {
    background: linear-gradient(135deg, #E63946, #C1121F) !important;
    color: #fff !important;
    border: none !important;
}

/* Highlighted/quote/blockquote */
blockquote:not([class*="hv2-"]):not(.blog-page *) {
    background: #0f1729 !important;
    border-left: 4px solid #E63946;
    color: #cbd5e1;
    padding: 1.25rem 1.5rem;
    border-radius: 0 12px 12px 0;
}

/* Code / pre on tech pages */
pre:not([class*="hv2-"]):not(.blog-page *),
code:not([class*="hv2-"]):not(.blog-page *) {
    background: #0a0f1c !important;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 10px;
}

/* Lists default */
.list-item, .step-item, .feature-item, .benefit-item,
ul.checklist li, ol.numbered li {
    color: #cbd5e1;
}
/* ============================================================================
   HOMEPAGE-PARITY POLISH — service / hire / industry pages (tasks.txt)
   Make section headings, section subtitles, badges, links, and ctas
   visually match the homepage's hv2-* design language.
   ============================================================================ */

/* Section heading style (matches .hv2-section-title — large, white, tight
   tracking, weight 450 for the Accenture-style modern grotesque feel) */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .section__title,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .section-title,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .heading-title,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .page-title,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .display-heading {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important;
    font-weight: 450 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .section__subtitle,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .section-subtitle,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .lead {
    color: #94a3b8 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Red gradient accent on the inline keyword span — matches .hv2-text-gradient */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .accent,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .highlight,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .text-gradient {
    background: linear-gradient(90deg, #E63946 0%, #FF6B6B 50%, #FF6B6B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Section eyebrow / category badge (matches the small uppercase tags
   in the homepage's enterprise-grade engineering cards) */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .badge:not(.btn),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .eyebrow,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .label,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .tag-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.30);
    color: #FF6B6B !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Cards on tasks.txt pages — homepage-style hover state */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .card-item:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .info-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .service-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .feature-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .solution-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .industry-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .tech-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .value-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .benefit-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .process-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .testimonial-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .case-study-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .team-member:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .approach-card:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .why-us-card:hover {
    border-color: rgba(230, 57, 70, 0.40) !important;
    box-shadow: 0 14px 32px rgba(230, 57, 70, 0.18) !important;
    transform: translateY(-4px);
}

/* Primary CTA buttons across legacy pages — homepage red pill */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--primary,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .button--primary,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn-primary,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) a.cta-button,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cta-btn--primary {
    background: #E63946 !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(230, 57, 70, 0.32) !important;
    transition: background 0.2s, transform 0.2s;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--primary:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .button--primary:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn-primary:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) a.cta-button:hover {
    background: #C1121F !important;
    transform: translateY(-2px);
}

/* Outline / secondary buttons */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--outline,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn-outline,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--secondary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #f8fafc !important;
    padding: 12px 26px !important;
    border-radius: 999px !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--outline:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn-outline:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .btn--secondary:hover {
    border-color: #E63946 !important;
    color: #FF6B6B !important;
    background: rgba(230, 57, 70, 0.06) !important;
}

/* Stats / counters — large white numbers, muted labels */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .stat-number,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .counter-number,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .stat__number {
    color: #ffffff !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    font-weight: 700 !important;
    background: transparent !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .stat-label,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .stat__label,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .counter-label {
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
}

/* FAQ accordion (legacy) — match homepage FAQ aesthetic */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-item,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .accordion-item {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 12px;
    margin-bottom: 12px;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-question,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .accordion-button {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 600;
    padding: 18px 24px !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-answer,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .accordion-body {
    color: #cbd5e1 !important;
    padding: 0 24px 18px !important;
}

/* Containers — keep legacy max-widths but ensure inner cards have a dark surface */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .container,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .container-fluid {
    color: inherit;
}
/* ============================================================================
   SCORCHED-EARTH DARK SWEEP — service / hire / industry / portfolio pages.
   Catch every <section> + class-substring pattern legacy templates use.
   Skipped: .blog-page (own dark theme in blog.css) and .home-v2 (homepage).
   ============================================================================ */

/* Every <section> element on legacy pages → dark navy. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) > main,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) > main > *,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) main > section,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) article {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}

/* Every class containing the substring "section", "hero", "block",
   "wrapper", "container-wrap" → dark (covers cs-section, cs-hero,
   cs-block-header, hiring-section, process-section, faq-section, etc.) */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-section"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-hero"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="hero-"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-block"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-banner"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-wrapper"]:not([class*="card"]) {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}

/* Every class containing the substring "card", "tile", "item-box",
   "chip", "step-pin" → dark card surface. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-card"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="card-"]:not([class*="cards-grid"]):not([class*="cards-row"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-tile"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-chip"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-step"]:not([class*="-steps"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-step__"] {
    background: #0f1729 !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.10) !important;
}

/* Every class containing "title", "heading", "h1-" → white */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__title"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-title"]:not([class*="subtitle"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-heading"]:not([class*="subheading"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class$="title"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class$="heading"] {
    color: #ffffff !important;
}

/* Every class containing "subtitle", "sub-heading", "lead", "desc", "description" → muted */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__subtitle"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-subtitle"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__lead"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-lead"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__desc"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-desc"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__description"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-description"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__copy"] p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-copy"] p {
    color: #cbd5e1 !important;
}

/* Trust strip / brand logo strip — clean white-background section with
   logos in their original colors (matches the homepage .hv2-brands look).
   Works for both colored SVGs and raster WebPs with their own white bg. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .trust-strip,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="client-logos"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logo-grid"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="logo-strip"] {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 60px 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"] h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"] p,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="client-logos"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="client-logos"] p {
    color: #0f172a !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .trust-strip img,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] img,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"] img,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="client-logos"] img,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logo-grid"] img {
    filter: none !important;
    opacity: 1 !important;
    max-height: 56px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .trust-strip img:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="trust-strip"] img:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logos"] img:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="client-logos"] img:hover,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="brand-logo-grid"] img:hover {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.05);
}

/* CTA strips: cs-cta, cta-simple, cta-section etc. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="cta-"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-cta"] {
    background: linear-gradient(135deg, #0f1729 0%, #1e293b 100%) !important;
    color: #cbd5e1 !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="cta-"] h1,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="cta-"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="-cta"] h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="cta-"] h3 {
    color: #ffffff !important;
}

/* Case-study page namespace (cs-*) — explicitly dark every container */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-hero,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-section,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-tech,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-impact,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-block-header,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="cs-section--"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-approaches,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-flow,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-tech__grid {
    background: #070b18 !important;
    color: #cbd5e1 !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-hero__title,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-section h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-section h3,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-tech h2,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-block-header h2 {
    color: #ffffff !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-hero__badge,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-block-header__badge {
    background: rgba(230, 57, 70, 0.14) !important;
    border: 1px solid rgba(230, 57, 70, 0.40) !important;
    color: #FF6B6B !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-flow__step,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-approach,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-tech__chip {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-flow__pin {
    background: linear-gradient(135deg, #E63946, #C1121F) !important;
    color: #ffffff !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-section__list li,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .cs-section__copy p { color: #cbd5e1 !important; }

/* Tech stack chips / pills used across many service pages */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="tech-logo-item"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="stack-category"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="tech-chip"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .tech-pill {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #e2e8f0 !important;
}

/* Capability cards / roadmap cards / hiring steps (frequent patterns) */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .capability-card,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .roadmap-card,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .hiring-step,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .engagement-card,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .process-step,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .services-offered .service-card {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    border-radius: 14px;
}

/* Hero-stats numbers + labels (some hero sections have inline stats) */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .hero-stats,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .hero-stats__number,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .impact-stat,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .impact-stat__number {
    color: #ffffff !important;
    background: transparent !important;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .impact-stat__label,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .hero-stats__label {
    color: #94a3b8 !important;
}

/* FAQ list — match homepage FAQ */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-list,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-section { background: #070b18 !important; }
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-list details,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-section details {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 0 24px;
    color: #cbd5e1;
}
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-list summary,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .faq-section summary {
    color: #ffffff !important;
    padding: 18px 0;
    font-weight: 600;
    cursor: pointer;
}

/* Reset inner content containers to TRANSPARENT so a parent section with
   a hero video/image background remains visible underneath. The substring
   selectors above ([class*="hero-"]) catch every `hero-x__y` descendant
   element and force opaque black — which on the contact page (and any page
   with a full-bleed video hero) blots out the video. The rule below wins
   because it's loaded after, has the same specificity, and uses !important.
   Names that should stay TRANSPARENT (content layers, not surfaces): */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__content"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__layout"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__visual"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__video"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__inner"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__bg"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__overlay"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__wrap"]:not([class*="card"]):not([class*="grid"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__actions"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__stats"]:not([class*="card"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__title"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__subtitle"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__desc"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__copy"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__heading"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__badge"],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) [class*="__lead"] {
    background: transparent !important;
}

/* Sections that contain a full-bleed background video — keep section bg
   transparent / explicitly set so the video reads through. */
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section:has([class*="__video"]),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section:has(video.qss-hero-video),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section:has(> [class*="hero-"] video),
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) .hero--contact,
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[data-bg-video],
body:not(.blog-page):not(.home-v2):not(.agri-light-page):not(.healthcare-page) section[data-video] {
    background: #0a0d14 !important;
}

/* ===== end scorched-earth dark sweep ===== */

/* ============================================================================
   NAVBAR + MEGAMENU — dark theme on every page (excluded: .home-v2 handles
   its own via the existing body .header rules; those already work for it).
   Forces nav link text, dropdown chevrons, and the megamenu panel to be
   dark-theme readable. Applies to ALL pages (no body class scoping needed).
   ============================================================================ */

/* Header itself — fully opaque dark with subtle bottom border */
.header,
header.header,
header#header {
    background: #070b18 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    box-shadow: none !important;
}

/* Nav links — light grey, white on hover */
.header .nav__link,
.header .nav-link,
header .nav__link {
    color: #e2e8f0 !important;
}
.header .nav__link:hover,
.header .nav__link:focus,
.header .nav__item.active > .nav__link {
    color: #ffffff !important;
}

/* Dropdown chevron arrow — visible light slate */
.header .dropdown-icon,
.header .dropdown-arrow,
header .dropdown-icon {
    color: #cbd5e1 !important;
    opacity: 0.9;
}
.header .nav__item:hover .dropdown-icon,
.header .nav__item.has-megamenu:hover .dropdown-icon,
.header .nav__item.has-megamenu.active .dropdown-icon {
    color: #ffffff !important;
    opacity: 1;
}

/* Mobile hamburger lines — white */
.header .nav__toggle span,
header .nav__toggle span { background: #ffffff !important; }

/* Get-in-Touch CTA in navbar — homepage red pill */
.header .nav__actions .btn--primary,
.header .nav__actions a.btn,
header .nav__actions .btn--primary {
    background: #E63946 !important;
    color: #ffffff !important;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.92rem;
    font-weight: 600;
    border: none !important;
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.28) !important;
}
.header .nav__actions .btn--primary:hover {
    background: #C1121F !important;
    transform: translateY(-1px);
}

/* MEGAMENU CONTAINER — solid dark, isolated stacking context, high z-index
   so no page content can bleed through the dropdown. */
.megamenu,
.nav__item.has-megamenu .megamenu,
.nav .megamenu,
.header .megamenu {
    background: #0f1729 !important;
    padding-top: 0 !important;
    z-index: 1500 !important;
    isolation: isolate;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* MEGAMENU INNER PANEL — same dark, sits inside the now-opaque container */
.megamenu__inner,
.nav__item.has-megamenu .megamenu__inner,
.nav .megamenu__inner,
.header .megamenu__inner {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
    color: #cbd5e1 !important;
    margin-top: 0 !important;
    opacity: 1 !important;
}

/* Megamenu column headings — small uppercase red eyebrow */
.megamenu__title {
    color: #FF6B6B !important;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Megamenu list links — light grey, white-and-red on hover */
.megamenu__list li a {
    color: #e2e8f0 !important;
    border-radius: 8px;
    padding: 10px 8px !important;
    transition: color 0.2s ease, background 0.2s ease;
}
.megamenu__list li a:hover {
    color: #FF6B6B !important;
    background: rgba(230, 57, 70, 0.08) !important;
}

/* Megamenu inline SVG icons — currentColor for graceful theming */
.megamenu__icon {
    color: #94a3b8 !important;
}
.megamenu__list li a:hover .megamenu__icon {
    color: #FF6B6B !important;
}
.megamenu__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
}
.megamenu__icon svg path,
.megamenu__icon svg circle,
.megamenu__icon svg line,
.megamenu__icon svg rect,
.megamenu__icon svg polyline,
.megamenu__icon svg polygon {
    stroke: currentColor;
    fill: none;
}

/* Megamenu footer (the bottom CTA strip with category-summary text) */
.megamenu__footer {
    border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
    background: rgba(7, 11, 24, 0.4) !important;
}
.megamenu__footer-content {
    color: #94a3b8 !important;
}
.megamenu__footer-content h5,
.megamenu__footer-content strong { color: #ffffff !important; }
.megamenu__footer-content a:not(.btn) {
    color: #FF6B6B !important;
}

/* Simple (non-megamenu) dropdown menus */
.dropdown-menu {
    background: #0f1729 !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
}
.dropdown-menu li a,
.dropdown-menu a {
    color: #e2e8f0 !important;
}
.dropdown-menu li a:hover,
.dropdown-menu a:hover {
    color: #FF6B6B !important;
    background: rgba(230, 57, 70, 0.08) !important;
}

/* Megamenu overlay dim (when a panel opens) */
.megamenu-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Nav logo — the new logo is pre-themed for dark navbars, no halo needed */
.header .nav__logo img.logo-img {
    background: transparent;
    padding: 0;
}
.header .nav__logo .logo-img--default { display: block; }
.header .nav__logo .logo-img--dark { display: none; }
body.home-v2 .header .nav__logo .logo-img--default,
.header.header--dark .nav__logo .logo-img--default { display: block; }
body.home-v2 .header .nav__logo .logo-img--dark,
.header.header--dark .nav__logo .logo-img--dark { display: none; }
/* ===== end navbar + megamenu dark theme ===== */
/* ===== end homepage-parity polish ===== */