/* ULTRA-BOLD OPEN DESIGN - 4colors Research */

/* AOS stylesheet import removed by bin/build-v4.sh: it hides [data-aos]
   elements until AOS runs, and this site loads no third-party scripts. */

/* Metric-matched fallback fonts: rendered (from a local system font) at the
   same footprint as the web fonts, so text does NOT jump in size when Inter /
   Space Grotesk finish loading (eliminates the flash-of-unstyled-text reflow). */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Grotesk Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
    size-adjust: 102%;
    ascent-override: 95%;
    descent-override: 24%;
    line-gap-override: 0%;
}

:root {
    /* 4colors Logo Palette - sampled directly from the logo artwork */
    --color-navy: #181F79;     /* wordmark navy */
    --color-teal: #54EFD5;     /* mint/teal triangle */
    --color-blue: #006FCD;     /* blue triangle */
    --color-deep: #0014AF;     /* deep royal blue */
    --color-indigo: #381FCC;   /* indigo/violet triangle */
    /* Legacy accent aliases, remapped onto the real logo hues so existing
       components stay on-brand. */
    --color-pink: var(--color-indigo);
    --color-yellow: var(--color-blue);
    --color-green: var(--color-teal);
    --color-cyan: var(--color-teal);

    /* Primary - logo blues */
    --primary-900: #0A0A4A;
    --primary-700: #0014AF;
    --primary-600: #006FCD;
    --primary-500: #3E9FE8;
    --primary-50: #E8F2FB;

    /* Accent - logo indigo */
    --accent-700: #2814A0;
    --accent-500: #381FCC;
    --accent-400: #5A45E0;
    --accent-300: #9488F0;
    --accent-100: #E2E0FA;

    /* Purple - logo indigo/violet */
    --purple-500: #5838E0;
    --purple-600: #3818C8;
    
    --gray-900: #0F172A;
    --gray-800: #1E293B;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-500: #64748B;
    --gray-400: #94A3B8;
    --gray-300: #CBD5E1;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --gray-50: #F8FAFC;
    
    --font-primary: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Schibsted Grotesk', 'Grotesk Fallback', var(--font-primary);
    
    --container-width: 1440px;
    --container-wide: 1600px;
    --section-padding: 160px;
    
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 8px 16px -4px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 16px 32px -8px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.15);
    --shadow-2xl: 0 32px 64px -16px rgb(0 0 0 / 0.2);
    
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 18px;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-primary);
    color: var(--gray-900);
    background: white;
    line-height: 1.7;
    overflow-x: hidden;
    letter-spacing: -0.01em;
    max-width: 100vw;
    position: relative;
}

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

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

/* Announcement Banner */
.announcement-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-indigo) 50%, var(--color-teal) 100%);
    padding: 8px 24px;
    transition: all 0.3s ease;
}

.announcement-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.announcement-badge {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    animation: pulse 2s ease-in-out infinite;
}

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

.announcement-text {
    color: white;
    font-size: 14px;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

.announcement-text strong {
    font-weight: 700;
}

.announcement-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition-fast);
    opacity: 0.8;
    flex-shrink: 0;
}

.announcement-close:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* Navigation Bar - App Style */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(30px) saturate(180%);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all var(--transition-base), top 0.3s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-md);
}

.nav-container {
    /* App-window style: the logo is absolutely positioned in the corner (see
       .logo), so the menu lane below is a FIXED left padding — the menu layout
       no longer depends on the logo's size. */
    --logo-lane: 315px;
    position: relative;
    padding: 0 32px 0 var(--logo-lane);
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
}

.logo {
    /* Pinned to the top-left corner, lifted above everything; out of the flex
       flow so its size doesn't push the menu. */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--transition-base);
}

.logo-icon {
    /* Larger than the 56px nav bar so the wordmark reads bigger; the
       fixed-height .nav-container keeps the top stripe from growing. */
    height: 97px;
    /* Pull the logo's ~12.5% transparent padding back on both sides so the
       visible mark sits near the left edge and the first menu item sits close
       to it (app-window corner placement). Margins scaled with the smaller logo. */
    margin-left: -18px;
    margin-right: -24px;
    width: auto;
    max-width: 100%;
    background: transparent;
    object-fit: contain;
    display: block;
    transition: var(--transition-base);
}

/* The logo image already contains the "4COLORS" wordmark, so the
   adjacent text label is redundant in the navbar. */
.logo-text {
    display: none;
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px !important;
    font-family: var(--font-primary);
    border-radius: 8px;
    transition: var(--transition-fast);
}

.nav-link:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.dropdown-arrow {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-base);
    opacity: 0.5;
}

.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.btn-nav {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px !important;
    font-family: var(--font-primary);
    border-radius: 8px;
    transition: var(--transition-base);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}

.gradient-blue {
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.35);
}

.gradient-purple {
    background: linear-gradient(135deg, var(--color-indigo), var(--purple-500));
    box-shadow: 0 8px 24px rgba(255, 0, 110, 0.35);
}

.gradient-green {
    background: linear-gradient(135deg, var(--color-teal), #0AA890);
    box-shadow: 0 8px 24px rgba(0, 255, 148, 0.35);
}

.gradient-yellow {
    background: linear-gradient(135deg, var(--color-blue), var(--color-deep));
    box-shadow: 0 8px 24px rgba(255, 230, 0, 0.35);
}

/* Mega Dropdown */
.mega-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 720px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.mega-dropdown-wide {
    width: 880px;
}

.has-dropdown:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-dropdown-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
}

.mega-section {
    padding: 24px;
}

.mega-highlight {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--purple-600) 100%);
    padding: 32px 24px;
    color: white;
}

.mega-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.mega-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition-fast);
    margin-bottom: 6px;
}

.mega-item:hover {
    background: var(--gray-50);
}

.mega-item:hover .mega-item-title {
    color: var(--primary-700);
}

.mega-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.mega-icon svg {
    width: 24px;
    height: 24px;
}

.mega-title {
    font-size: 17px !important;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--gray-900);
    margin-bottom: 4px;
}

.mega-desc {
    font-size: 14px !important;
    font-family: var(--font-primary);
    color: var(--gray-600);
    line-height: 1.6;
}

/* Enhanced Expertise Dropdown Cards */
.mega-dropdown-expertise .mega-item-card {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.mega-dropdown-expertise .mega-item-card:hover {
    background: white;
    border-color: var(--gray-300);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.mega-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mega-link-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    transition: var(--transition-fast);
}

.mega-read-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-600);
    transition: var(--transition-fast);
}

.mega-arrow {
    color: var(--primary-600);
    transition: transform var(--transition-fast);
}

.mega-dropdown-expertise .mega-item-card:hover .mega-read-more {
    color: var(--primary-700);
}

.mega-dropdown-expertise .mega-item-card:hover .mega-arrow {
    transform: translateX(4px);
}

.mega-featured {
    color: white;
}

.featured-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mega-featured h4 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.mega-featured p {
    font-size: 15px;
    opacity: 0.95;
    line-height: 1.7;
    margin-bottom: 24px;
}

.featured-link {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.featured-link:hover {
    gap: 14px;
    transition: gap var(--transition-base);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    padding: 10px;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: var(--gray-900);
    border-radius: 3px;
    transition: var(--transition-base);
}

.hero-modern {
    position: relative;
    /* Overall hero length — lower this to make the hero shorter. */
    min-height: 83vh;
    min-height: 83svh; /* avoids mobile browser-chrome overflow */
    display: flex;
    flex-direction: column;
    /* Content sits up top; the trusted-by band is pushed down by its own
       margin-top (a fixed gap that doesn't depend on spare vertical space). */
    justify-content: flex-start;
    /* Fluid top padding clears the fixed nav; 58px bottom keeps the trusted-by
       row just clear of the deep (56px) wavy bottom zone so it isn't cropped. */
    padding: clamp(141px, 10vh, 231px) 0 20px;
    overflow: visible;
    /* Fades to the section tint at the bottom so the masked wavy bottom edge
       reads against the white page, matching the other section transitions. */
    background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 62%, #FAFCFE 100%);
    /* Same masked wavy bottom as .section-waved, but bottom edge only (the top
       stays straight under the fixed nav). */
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 56px no-repeat,
        linear-gradient(#000 0 0) top / 100% calc(100% - 55px) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% 56px no-repeat,
        linear-gradient(#000 0 0) top / 100% calc(100% - 55px) no-repeat;
}

.hero-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 14% 16%, rgba(84, 239, 213, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 30% 54%, rgba(0, 20, 175, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 75% 76%, rgba(0, 111, 205, 0.3) 0%, transparent 40%);
    z-index: 0;
}

.hero-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.015) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.015) 2px, transparent 2px);
    background-size: 80px 80px;
    z-index: 0;
}

.hero-content-wrapper {
    position: relative;
    z-index: 1;
    /* Hidden until JS has aligned the text to the menu, so it never paints at
       the un-indented position first (no left-then-right jump). Safety reveal
       at 1.2s in case the script is slow or absent. */
    visibility: hidden;
    animation: heroReveal 0s linear 1.2s forwards;
    display: grid;
    grid-template-columns: 11fr 9fr; /* text 55% / picture 45% */
    gap: 80px;
    align-items: start;
}

.hero-content-wrapper.is-aligned {
    visibility: visible;
    animation: none;
}

@keyframes heroReveal {
    to { visibility: visible; }
}

.hero-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-right {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

/* Hero wayfinding shortcuts — a calm full-width row of text links sitting
   between the hero content and the "Trusted by" band. Pure text + inline SVG
   on the metric-matched font stack, so it stays stable across the font swap. */
.hero-shortcuts {
    position: relative;
    z-index: 1;
    margin-top: 80px;
}

.hero-shortcuts .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 36px;
}

.hero-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-size: 15.8px;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.hero-shortcut-icon {
    flex-shrink: 0;
    width: 18.6px;
    height: 18.6px;
    color: var(--primary-600);
}

.hero-shortcut-arrow {
    flex-shrink: 0;
    width: 16.7px;
    height: 16.7px;
    color: var(--gray-400);
    transition: transform var(--transition-base), color var(--transition-fast);
}

.hero-shortcut:hover {
    color: var(--gray-900);
}

.hero-shortcut:hover .hero-shortcut-arrow {
    transform: translateX(4px);
    color: var(--primary-600);
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px 10px 14px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 48px;
    box-shadow: var(--shadow-xl);
}

.badge-pulse {
    width: 10px;
    height: 10px;
    background: var(--accent-500);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

.hero-title-large {
    /* Fluid: scales smoothly from ~30px on phones to 58px on large screens,
       so no per-breakpoint font-size overrides are needed. */
    font-size: clamp(30px, 4.2vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--gray-900);
    margin-bottom: 32px;
    font-family: var(--font-display);
}

.gradient-text-animated {
    /* Diagonal so the two lines progress through different colors, and stops
       spread so the full palette shows instead of reading as one dark color. */
    background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-deep) 55%, var(--color-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Shrink-wrap the text so the gradient spans exactly the text box (the
       full spectrum is trimmed to the text, not the full container width). */
    display: inline-block;
    width: fit-content;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.hero-description {
    font-size: 19px;
    line-height: 1.7;
    color: var(--gray-700);
    margin-bottom: 32px;
    max-width: 560px;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 48px;
}

.btn-primary-large {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    background: #8ACFF2;
    color: #181F79;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 12px;
    transition: var(--transition-base);
    box-shadow: 0 8px 28px rgba(70, 180, 235, 0.4);
}

.btn-primary-large:hover {
    background: #5FBCEE;
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(70, 180, 235, 0.45);
}

.btn-primary-large svg {
    transition: transform var(--transition-base);
}

.btn-primary-large:hover svg {
    transform: translateX(6px);
}

.btn-secondary-large {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    background: #B9E0C4;
    color: #181F79;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    border-radius: 12px;
    border: 2px solid #B9E0C4;
    box-shadow: 0 8px 28px rgba(120, 200, 150, 0.28);
    transition: var(--transition-base);
}

.btn-secondary-large:hover {
    border-color: #A6D6B4;
    background: #A6D6B4;
    color: #181F79;
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(120, 200, 150, 0.35);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 48px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    line-height: 1;
}

.stat-label {
    font-size: 15px;
    color: var(--gray-600);
    font-weight: 600;
}

.stat-divider {
    width: 2px;
    height: 60px;
    background: var(--gray-300);
}

/* Network Carousel */
.network-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 32px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-slide.active {
    opacity: 1;
}

/* Carousel Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-btn svg {
    color: var(--gray-700);
}

.carousel-btn-prev {
    left: 20px;
}

.carousel-btn-next {
    right: 20px;
}

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.carousel-dot.active {
    background: white;
    width: 32px;
    border-radius: 6px;
}

/* Network Pattern Visualization */
.network-pattern-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.network-pattern-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Network animations */
@keyframes dash-flow {
    to {
        stroke-dashoffset: 24;
    }
}

@keyframes node-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }
}

@keyframes node-pulse-strong {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* Apply animations to network paths */
.net-path {
    animation: dash-flow 4s linear infinite;
}

.path-1, .path-3, .path-5, .path-7 {
    animation-duration: 3.5s;
}

.path-2, .path-4, .path-6, .path-8 {
    animation-duration: 4.2s;
}

/* Network node animations */
.node-hub {
    animation: node-pulse-strong 2.8s ease-in-out infinite;
    transform-origin: 420px 320px;
}

/* Large nodes */
.node-lg-1 {
    animation: node-pulse 3.2s ease-in-out infinite 0.3s;
    transform-origin: 280px 240px;
}

.node-lg-2 {
    animation: node-pulse 3.4s ease-in-out infinite 0.6s;
    transform-origin: 280px 350px;
}

.node-lg-3 {
    animation: node-pulse 3.1s ease-in-out infinite 0.9s;
    transform-origin: 380px 400px;
}

/* Medium nodes */
.node-md-1 {
    animation: node-pulse 3.6s ease-in-out infinite 0.2s;
    transform-origin: 80px 120px;
}

.node-md-2 {
    animation: node-pulse 3.3s ease-in-out infinite 0.7s;
    transform-origin: 520px 180px;
}

.node-md-3 {
    animation: node-pulse 3.5s ease-in-out infinite 1.1s;
    transform-origin: 160px 280px;
}

.node-md-4 {
    animation: node-pulse 3.7s ease-in-out infinite 0.4s;
    transform-origin: 450px 500px;
}

.node-md-5 {
    animation: node-pulse 3.4s ease-in-out infinite 1.3s;
    transform-origin: 140px 480px;
}

/* Small nodes */
.node-sm-1 {
    animation: node-pulse 3.8s ease-in-out infinite 0.5s;
    transform-origin: 380px 140px;
}

.node-sm-2 {
    animation: node-pulse 3.2s ease-in-out infinite 1s;
    transform-origin: 540px 380px;
}

.node-sm-3 {
    animation: node-pulse 3.6s ease-in-out infinite 0.8s;
    transform-origin: 210px 540px;
}

.node-sm-4 {
    animation: node-pulse 3.3s ease-in-out infinite 1.2s;
    transform-origin: 280px 560px;
}

.node-sm-5 {
    animation: node-pulse 3.5s ease-in-out infinite 0.6s;
    transform-origin: 530px 580px;
}

/* Flow dots opacity pulse */
.dot {
    opacity: 0.9;
    filter: drop-shadow(0 0 4px currentColor);
}

.hero-wave {
    /* Retired: the hero now gets a masked wavy bottom (see .hero-modern), so its
       transition into the next section matches every other section transition. */
    display: none;
}

.hero-wave svg {
    width: 100%;
    height: 100%;
}

/* The old separate wave divider divs are retired — the waves are now part of
   each section (see .section-waved). */
.wave-stripe { display: none; }

/* Wavy section edges. Each section's OWN background is clipped to a wave at its
   top and bottom via a mask, so the wave is the section's gradient — not a
   separate object. The masked-away troughs reveal the white page behind, giving
   a thin white separation between one section's wavy bottom and the next's wavy
   top. A faint cool tint makes the light sections (and the white gaps) read;
   the dark Awards band keeps its own .awards-bg. */
.section-waved {
    --waveh: 56px;
    /* The wavy edges inset each section ~--waveh into its box, so the visible
       white band ≈ --waveh + margin. A negative margin overlaps the wave bands
       (only the masked-transparent padding overlaps, never content), leaving a
       thin white separation of ≈ --waveh + margin. -38 → ~18px (3× the prior 6px). */
    margin: -47px 0;
    background: linear-gradient(180deg, #FAFCFE 0%, #FFFFFF 100%);
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,56 L0,56 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--waveh) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--waveh) no-repeat,
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--waveh) + 2px) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,56 L0,56 Z' fill='black'/%3E%3C/svg%3E") top / 100% var(--waveh) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0,28 Q150,6 300,28 Q450,50 600,28 Q750,6 900,28 Q1050,50 1200,28 L1200,0 L0,0 Z' fill='black'/%3E%3C/svg%3E") bottom / 100% var(--waveh) no-repeat,
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--waveh) + 2px) no-repeat;
}
/* Keep the dark Awards band dark (its .awards-bg child covers the tint). */
.awards-showcase-section.section-waved { background: #0A0A4A; }

.trusted-section {
    padding: 80px 0;
    background: white;
}

.trusted-section--hero {
    position: relative;
    z-index: 1;
    background: transparent;
    /* auto top margin eats the hero's leftover vertical space, pushing the
       band to the bottom of the fold; the min keeps a gap when space is tight. */
    margin-top: auto;
    padding: clamp(110px, 7vh, 100px) 0 clamp(4px, 1vh, 12px);
}

/* Negative margin pulls the logo row up toward the label (the row's top is
   whitespace since the logos are vertically centred, so they overlap cleanly). */
.trusted-section--hero .trusted-label {
    margin-bottom: -30px;
}

.trusted-label {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Headline blue (--primary-700), subdued toward gray so it reads as a quiet
       label rather than competing with the section titles. */
    color: color-mix(in srgb, var(--primary-700) 58%, var(--gray-400));
    margin-bottom: 48px;
}

.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: nowrap;
}

.company-logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--gray-400);
    font-family: var(--font-display);
    transition: var(--transition-base);
}

.logo-item:hover .company-logo {
    color: var(--gray-900);
    transform: scale(1.1);
}

.company-logo-img {
    height: 51px;
    width: auto;
    transition: var(--transition-base);
}

.logo-item:hover .company-logo-img {
    transform: scale(1.1);
}

.company-logo-img--small {
    height: 46px;
}

.company-logo-img--large {
    height: 86px;
}

/* Orca wordmark reads larger than the others at --large; trim it 15%. */
.company-logo-img[src="orca-logo.png"] {
    height: 73px;
}

.company-logo-img--medium {
    height: 96px;
}

.company-logo-img--xlarge {
    height: 150px;
}


/* ============================================================
   PERSONA SECTION — calmed colour pass
   Replace everything in styles.css from the "/* Persona Section *​/"
   comment down to the last ".persona-cta:hover svg" rule with this block.

   The system:
   - Cards are plain white on the grey section background. No tinted washes.
   - ONE brand hue per card, used in exactly two places: the 4px top
     stripe and the icon. That's the "4 colors" wink.
   - All text is neutral grey. All links share one colour. All four
     CTAs share one style (the hero's light-blue button).
   ============================================================ */

/* Persona Section */
.persona-section {
    padding: 120px 0;
    margin-top: -38px;
    background: linear-gradient(180deg, #FAFCFE 0%, #FFFFFF 100%);
}

.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
}

.persona-card {
    /* --persona-accent: the stripe colour (raw logo hue, fine at any lightness)
       --persona-ink:    the icon colour (darkened where needed for contrast) */
    --persona-accent: var(--color-blue);
    --persona-ink: var(--color-blue);

    padding: 44px 40px 36px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 26px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 64, 0.04);
    transition: border-color 250ms ease,
                transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* One logo triangle per card: blue / indigo / teal. */
.persona-card--strategy {
    --persona-accent: var(--color-blue);
    --persona-ink: var(--color-blue);
}

.persona-card--ops {
    --persona-accent: var(--color-indigo);
    --persona-ink: var(--color-indigo);
}

.persona-card--build {
    --persona-accent: var(--color-teal);
    /* teal at full lightness fails contrast as an icon colour */
    --persona-ink: color-mix(in srgb, var(--color-teal) 55%, #000);
}

/* The stripe: solid, small, honest. No gradient, no opacity games. */
.persona-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--persona-accent);
}

.persona-card:hover {
    border-color: var(--gray-300);
    transform: translateY(-6px);
    /* Neutral shadow — no coloured glow */
    box-shadow: 0 24px 48px -20px rgba(16, 24, 64, 0.16),
                0 8px 20px -12px rgba(16, 24, 64, 0.10);
}

/* Icon + role label */
.persona-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}

.persona-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--persona-ink);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.persona-icon svg {
    width: 44px;
    height: 44px;
}

.persona-card:hover .persona-icon {
    transform: translateY(-2px);
}

/* Eyebrow goes neutral — the stripe and icon already say which card this is */
.persona-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.persona-card h3 {
    font-size: 24px;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--gray-900);
    margin-bottom: 12px;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

.persona-card p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-600);
    margin-bottom: 24px;
}

/* The visitor's question — still set off as a quote, but in plain ink
   with a quiet neutral rule. The words carry it; they don't need a colour. */
.persona-card .persona-question {
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: var(--gray-700);
    margin: 0 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--gray-200);
}

.persona-card .persona-pain {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gray-500);
    margin: 0 0 6px;
}

.persona-card .persona-fix {
    display: flex;
    gap: 8px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gray-700);
    margin: 0;
}

.persona-card .persona-fix::before {
    content: '\2192';
    color: var(--color-navy);
    font-weight: 700;
    flex-shrink: 0;
}

/* Secondary links: one shared link colour across all four cards */
.persona-wants {
    padding: 22px 0 0;
    margin: 20px 0 28px;
    width: 100%;
    border-top: 1px solid var(--gray-100);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--gray-600);
}

.persona-wants a {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-600) 30%, transparent);
    transition: border-color var(--transition-fast);
}

.persona-wants a:hover {
    border-bottom-color: var(--primary-600);
}

/* One CTA style for all four cards: the hero's primary light-blue button.
   Repetition here is a feature — it reads as one system, not four products. */
.persona-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 12px;
    background: #8ACFF2;
    color: var(--color-navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(70, 180, 235, 0.30);
    transition: var(--transition-base);
}

.persona-cta svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base);
}

.persona-cta:hover {
    background: #5FBCEE;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(70, 180, 235, 0.38);
}

.persona-cta:hover svg {
    transform: translateX(5px);
}

.section-padding {
    padding: var(--section-padding) 0;
}

/* Hero-derived atmosphere for the content sections below the fold. Mirrors
   .hero-bg-gradient (soft teal/blue radial blobs) + .hero-grid-pattern (faint
   80px grid) so the page reads as one continuous, airy surface instead of a
   stack of unrelated bands. Decorative only — sits behind the content. */
.section-aura {
    position: relative;
    overflow: hidden;
}

.section-aura > .container,
.section-aura > .container-wide {
    position: relative;
    z-index: 1;
}

.section-aura::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(80, 232, 208, 0.12) 0%, transparent 46%),
        radial-gradient(circle at 88% 82%, rgba(0, 104, 200, 0.14) 0%, transparent 46%);
}

.section-aura::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.013) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.013) 2px, transparent 2px);
    background-size: 80px 80px;
}

/* Mirrored blob placement so adjacent aura sections don't repeat the exact
   same lighting. */
.section-aura--flip::before {
    background:
        radial-gradient(circle at 84% 14%, rgba(56, 24, 200, 0.10) 0%, transparent 46%),
        radial-gradient(circle at 10% 86%, rgba(0, 104, 200, 0.13) 0%, transparent 46%);
}

.section-header-center {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 100px;
}

.section-label {
    display: inline-block;
    padding: 8px 20px;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 24px;
    margin-bottom: 28px;
}

.section-label.light {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.section-title-xl {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--gray-900);
    margin-bottom: 32px;
    font-family: var(--font-display);
    /* Hero's signature: navy→deep→blue gradient clipped to the headline, so
       every section title carries the same spectrum as the hero h1. */
    background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-deep) 55%, var(--color-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title-xl.light {
    /* On dark sections the headline stays solid white, not the dark gradient. */
    background: none;
    color: white;
    -webkit-text-fill-color: white;
}

.section-subtitle-large {
    font-size: 22px;
    line-height: 1.7;
    color: var(--gray-600);
}

.section-subtitle-large.light {
    color: rgba(255, 255, 255, 0.95);
}

.solutions-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.solution-card-modern {
    padding: 48px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}

.solution-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(120deg, var(--color-teal), var(--color-blue) 55%, var(--color-indigo));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.solution-card-modern:hover::before {
    transform: scaleX(1);
}

.solution-card-modern:hover {
    border-color: var(--gray-300);
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.solution-number {
    font-size: 18px;
    font-weight: 900;
    color: var(--gray-300);
    font-family: var(--font-display);
    margin-bottom: 32px;
}

.solution-icon-large {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
}

.solution-icon-large svg {
    width: 44px;
    height: 44px;
}

.solution-title-large {
    font-size: 28px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 20px;
    font-family: var(--font-display);
    line-height: 1.3;
}

.solution-desc-large {
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 32px;
}

.solution-features-list {
    list-style: none;
    margin-bottom: 36px;
}

.solution-features-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    color: var(--gray-700);
    margin-bottom: 16px;
}

.solution-features-list svg {
    color: var(--accent-500);
    flex-shrink: 0;
}

.solution-features-list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--gray-300);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.solution-features-list a:hover {
    color: var(--primary-600);
    text-decoration-color: var(--primary-600);
}

.solution-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: var(--transition-base);
}

.solution-link:hover {
    gap: 16px;
}

.awards-showcase-section {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.awards-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* The hero's radial-blob lighting inverted onto a deep navy base — the
       same teal-top-left / blue glow language, just at night. */
    background:
        radial-gradient(circle at 16% 20%, rgba(80, 232, 208, 0.20) 0%, transparent 46%),
        radial-gradient(circle at 82% 78%, rgba(0, 104, 200, 0.45) 0%, transparent 52%),
        linear-gradient(135deg, #0A0A4A 0%, #0010A8 55%, #181878 100%);
    z-index: 0;
}

.awards-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 2px, transparent 2px);
    background-size: 80px 80px;
}

.awards-showcase-section .container {
    position: relative;
    z-index: 1;
}

.awards-grid-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 80px;
}

.award-card-large {
    padding: 48px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
    color: white;
}

.award-card-large:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.36);
}

.award-badge-large {
    font-size: 64px;
    margin-bottom: 32px;
}

.award-card-large h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
    line-height: 1.3;
}

.award-meta {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    font-weight: 700;
}

.award-card-large p {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

.award-impact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 32px;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.impact-item {
    text-align: center;
}

.impact-value {
    font-size: 36px;
    font-weight: 900;
    color: var(--color-teal);
    font-family: var(--font-display);
    margin-bottom: 6px;
    line-height: 1;
}

.impact-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.award-status {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.status-badge {
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.25);
    color: var(--accent-300);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 800;
}

.client-logos {
    display: flex;
    gap: 16px;
    padding-top: 32px;
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.client-badge {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.awards-cta {
    text-align: center;
}

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 20px 40px;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 14px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-base);
}

.btn-outline-white:hover {
    background: white;
    color: var(--primary-600);
    border-color: white;
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(255, 255, 255, 0.3);
}

.cta-modern {
    padding: 160px 0;
    position: relative;
    overflow: hidden;
}

.cta-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 14% 16%, rgba(80, 232, 208, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 82% 72%, rgba(0, 104, 200, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.cta-content-modern {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 80px;
    background: white;
    border-radius: 40px;
    box-shadow: var(--shadow-2xl);
    border: 3px solid var(--gray-200);
}

.cta-title-large {
    font-size: 64px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -2px;
    color: var(--gray-900);
    margin-bottom: 28px;
    font-family: var(--font-display);
}

.cta-description {
    font-size: 20px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 48px;
}

.cta-buttons-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 44px;
    background: #8ACFF2;
    color: #181F79;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 14px;
    transition: var(--transition-base);
    box-shadow: 0 8px 32px rgba(70, 180, 235, 0.4);
}

.btn-cta-primary:hover {
    background: #5FBCEE;
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(70, 180, 235, 0.5);
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 22px 44px;
    background: #B9E0C4;
    color: #181F79;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(120, 200, 150, 0.28);
    transition: var(--transition-base);
}

.btn-cta-secondary:hover {
    background: #A6D6B4;
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(120, 200, 150, 0.35);
}

.footer-modern {
    background: var(--gray-900);
    color: white;
    padding: 100px 0 50px;
}

.footer-content-modern {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 100px;
    margin-bottom: 80px;
}

.footer-brand {
    max-width: 420px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Footer sits on a dark background; the logo's navy wordmark would be
   invisible, so render it as a clean white mark and keep its aspect ratio. */
.footer-logo .logo-icon {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-tagline {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-400);
    margin-bottom: 40px;
}

.footer-social {
    display: flex;
    gap: 16px;
}

.social-icon {
    width: 48px;
    height: 48px;
    background: var(--gray-800);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--gray-400);
    font-weight: 800;
    font-size: 16px;
    transition: var(--transition-base);
}

.social-icon:hover {
    background: var(--primary-600);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px;
}

.footer-column h4 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 24px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.footer-column a {
    display: block;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 14px;
    transition: var(--transition-fast);
}

.footer-column a:hover {
    color: white;
    padding-left: 6px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 48px;
    border-top: 2px solid var(--gray-800);
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 15px;
    color: var(--gray-500);
}

.footer-legal a {
    color: var(--gray-500);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-legal a:hover {
    color: white;
}

.footer-location {
    font-size: 15px;
    color: var(--gray-500);
}

@media (max-width: 1400px) {
    .container, .container-wide {
        padding: 0 60px;
    }

    .section-title-xl {
        font-size: 60px;
    }
}

@media (max-width: 1200px) {
    .section-title-xl {
        font-size: 52px;
    }

    .hero-content-wrapper {
        gap: 80px;
    }
}

@media (max-width: 968px) {
    html {
        font-size: 16px;
    }
    
    .nav-menu {
        display: none;
    }

    /* Hamburger opens a simple stacked panel; the hover mega-dropdowns are
       desktop-only, so each top-level link navigates to its pillar page. */
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        gap: 2px;
        padding: 12px 20px 20px;
        background: #fff;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 16px 32px -16px rgba(15, 23, 42, 0.18);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .nav-menu.open .mega-dropdown {
        display: none;
    }

    .nav-menu.open .nav-link {
        width: 100%;
        justify-content: space-between;
        padding: 14px 12px;
    }

    /* The desktop logo lane would push the CTA and hamburger off-screen. */
    .nav-container {
        --logo-lane: 0px;
        padding: 0 20px;
    }

    .nav-actions {
        margin-left: auto;
    }

    .logo-icon {
        height: 64px;
        margin-left: -12px;
        margin-right: -16px;
    }

    .hamburger {
        display: flex;
    }
    
    .hero-content-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .gradient-mesh-container {
        height: 500px;
    }

    .solutions-grid-modern {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .awards-grid-showcase {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-content-modern {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .floating-metric {
        display: none;
    }
}

@media (max-width: 768px) {
    .container, .container-wide {
        padding: 0 32px;
    }
    
    :root {
        --section-padding: 100px;
    }
    
    .gradient-mesh-container {
        height: 400px;
        border-radius: 24px;
    }

    .section-title-xl {
        font-size: 38px;
    }
    
    .cta-title-large {
        font-size: 42px;
    }
    
    .cta-content-modern {
        padding: 60px 40px;
    }
    
    .hero-cta-group,
    .cta-buttons-group {
        flex-direction: column;
    }
    
    .btn-primary-large,
    .btn-secondary-large,
    .btn-cta-primary {
        width: 100%;
        justify-content: center;
    }
    
    .solution-card-modern,
    .award-card-large {
        padding: 36px;
    }
}

@media (max-width: 480px) {
    .hero-title-large {
        font-size: 36px;
    }

    .section-title-xl {
        font-size: 32px;
    }

    .stat-number {
        font-size: 36px;
    }
}

/* Additional Page Styles */
.hero-simple {
    padding: 200px 0 120px;
    text-align: center;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.hero-title-xl {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2.5px;
    color: var(--gray-900);
    margin-bottom: 32px;
    font-family: var(--font-display);
}

.hero-description-large {
    font-size: 22px;
    line-height: 1.7;
    color: var(--gray-600);
    max-width: 800px;
    margin: 0 auto;
}

.bg-gray {
    background: var(--gray-50);
}

.text-large {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 24px;
}

/* Products Page */
.products-grid {
    display: grid;
    gap: 60px;
}

.product-card-large {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 56px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.product-card-large:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-xl);
}

.product-header {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}

.product-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon svg {
    width: 40px;
    height: 40px;
}

.product-header h2 {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-display);
    margin-bottom: 8px;
}

.product-tagline {
    font-size: 18px;
    color: var(--gray-600);
}

.product-description {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 40px;
}

.product-features {
    margin-bottom: 40px;
}

.product-features h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 24px;
    font-family: var(--font-display);
}

.product-features ul {
    list-style: none;
}

.product-features li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--gray-700);
}

.product-features svg {
    color: var(--accent-500);
    flex-shrink: 0;
    margin-top: 4px;
}

.product-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 32px;
    background: var(--gray-50);
    border-radius: 20px;
    margin-bottom: 40px;
}

.spec-item {
    text-align: center;
}

.spec-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.spec-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-900);
    font-family: var(--font-display);
}

.product-cta {
    display: flex;
    gap: 20px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    background: var(--color-teal);
    color: var(--color-navy);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    border-radius: 12px;
    transition: var(--transition-base);
    box-shadow: 0 6px 24px rgba(80, 232, 208, 0.35);
}

.btn-primary:hover {
    background: #36D9BF;
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(80, 232, 208, 0.45);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    background: white;
    color: var(--gray-700);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    border-radius: 12px;
    border: 2px solid var(--gray-300);
    transition: var(--transition-base);
}

.btn-secondary:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
    transform: translateY(-3px);
}

.comparison-table {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table thead {
    background: var(--gray-900);
    color: white;
}

.comparison-table th {
    padding: 24px 32px;
    text-align: left;
    font-weight: 800;
    font-size: 17px;
}

.comparison-table td {
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 16px;
    color: var(--gray-700);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:hover {
    background: var(--gray-50);
}

/* Solutions Page */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.process-step {
    padding: 48px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.process-step:hover {
    border-color: var(--gray-300);
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.step-number {
    font-size: 48px;
    font-weight: 900;
    color: var(--gray-200);
    font-family: var(--font-display);
    margin-bottom: 20px;
    line-height: 1;
}

.process-step h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.process-step p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.solutions-detailed {
    display: grid;
    gap: 60px;
}

.solution-detail-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
}

.solution-detail-header {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}

.solution-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.solution-detail-icon svg {
    width: 40px;
    height: 40px;
}

.solution-detail-header h2 {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-display);
    margin-bottom: 8px;
}

.solution-meta {
    font-size: 18px;
    color: var(--gray-600);
}

.solution-detail-desc {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 48px;
}

.solution-benefits {
    margin-bottom: 48px;
}

.solution-benefits h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 32px;
    font-family: var(--font-display);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.benefit-item {
    display: flex;
    gap: 20px;
}

.benefit-item svg {
    color: var(--accent-500);
    flex-shrink: 0;
}

.benefit-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.benefit-item p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.solution-industries {
    margin-bottom: 40px;
}

.solution-industries h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 24px;
    font-family: var(--font-display);
}

.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.industry-tag {
    padding: 12px 24px;
    background: var(--gray-100);
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.industry-tag:hover {
    background: var(--accent-500);
    color: white;
}

/* Optimization Page */
.industries-grid {
    display: grid;
    gap: 80px;
}

.industry-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
}

.industry-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.industry-icon svg {
    width: 48px;
    height: 48px;
}

.industry-card h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.industry-desc {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 40px;
}

.use-cases {
    margin-bottom: 40px;
}

.use-cases h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.use-cases ul {
    list-style: none;
}

.use-cases li {
    position: relative;
    padding-left: 28px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.use-cases li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-500);
    font-size: 24px;
    line-height: 1.4;
}

.industry-impact {
    margin-bottom: 40px;
}

.industry-impact h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 28px;
    font-family: var(--font-display);
}

.impact-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.metric {
    text-align: center;
    padding: 28px;
    background: var(--gray-50);
    border-radius: 16px;
}

.metric-value {
    font-size: 40px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 8px;
}

.metric-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-600);
}

.gradient-cyan {
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.35);
}

.gradient-pink {
    background: linear-gradient(135deg, var(--color-indigo), var(--purple-500));
    box-shadow: 0 8px 24px rgba(255, 0, 110, 0.35);
}

/* Quantum Page */
.quantum-grid {
    display: grid;
    gap: 60px;
}

.quantum-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
}

.quantum-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.quantum-icon svg {
    width: 48px;
    height: 48px;
}

.quantum-card h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.quantum-card > p {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 40px;
}

.quantum-details h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    margin-top: 32px;
    font-family: var(--font-display);
}

.quantum-details ul {
    list-style: none;
}

.quantum-details li {
    margin-bottom: 28px;
    padding: 24px;
    background: var(--gray-50);
    border-radius: 16px;
}

.quantum-details strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.quantum-details p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.readiness-card {
    padding: 40px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    transition: var(--transition-base);
}

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

.readiness-number {
    font-size: 64px;
    font-weight: 900;
    color: var(--gray-100);
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 20px;
}

.readiness-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.readiness-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.quantum-awards {
    display: grid;
    gap: 60px;
}

.award-highlight {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
    text-align: center;
}

.award-badge-huge {
    font-size: 96px;
    margin-bottom: 32px;
}

.award-highlight h2 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.award-year {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-500);
    margin-bottom: 24px;
}

.award-description {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.award-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 40px;
    border-top: 2px solid var(--gray-200);
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-600);
}

.award-status-badge {
    display: inline-block;
    padding: 16px 32px;
    background: var(--accent-100);
    color: var(--accent-700);
    border-radius: 32px;
    font-size: 16px;
    font-weight: 700;
}

.award-status-badge-large {
    display: inline-block;
    padding: 20px 40px;
    background: var(--accent-500);
    color: white;
    border-radius: 48px;
    font-size: 18px;
    font-weight: 800;
    margin-top: 40px;
}

/* Algorithms Page */
.algorithms-showcase {
    display: grid;
    gap: 80px;
}

.algorithm-category {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}

.category-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon svg {
    width: 40px;
    height: 40px;
}

.category-header h2 {
    font-size: 36px;
    font-weight: 800;
    font-family: var(--font-display);
    margin-bottom: 8px;
}

.category-tagline {
    font-size: 18px;
    color: var(--gray-600);
}

.category-description {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 48px;
}

.algorithm-list {
    display: grid;
    gap: 32px;
}

.algorithm-item {
    padding: 32px;
    background: var(--gray-50);
    border-radius: 20px;
    border: 2px solid transparent;
    transition: var(--transition-base);
}

.algorithm-item:hover {
    background: white;
    border-color: var(--accent-500);
    box-shadow: var(--shadow-md);
}

.algorithm-item h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.algorithm-item > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.algorithm-applications {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-tag {
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-700);
}

.custom-algo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.custom-algo-card {
    padding: 40px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    transition: var(--transition-base);
}

.custom-algo-card:hover {
    border-color: var(--accent-500);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.custom-number {
    font-size: 64px;
    font-weight: 900;
    color: var(--gray-100);
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 20px;
}

.custom-algo-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.custom-algo-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

/* Awards Page */
.awards-timeline {
    display: grid;
    gap: 80px;
}

.award-major {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 32px;
    padding: 64px;
    position: relative;
}

.award-year-badge {
    position: absolute;
    top: 32px;
    right: 32px;
    padding: 12px 24px;
    background: var(--accent-500);
    color: white;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 800;
}

.award-content {
    max-width: 900px;
}

.award-icon-large {
    font-size: 80px;
    margin-bottom: 32px;
}

.award-content h2 {
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.award-status {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 28px;
}

.award-status.winner {
    background: linear-gradient(135deg, var(--color-teal), #0AA890);
    color: white;
}

.award-status.semifinalist {
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
    color: white;
}

.award-status.finalist {
    background: linear-gradient(135deg, var(--color-blue), var(--color-deep));
    color: white;
}

.award-description-large {
    font-size: 19px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 40px;
}

.award-details {
    margin-bottom: 40px;
}

.award-details h3 {
    font-size: 24px;
    font-weight: 800;
    margin-top: 32px;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

.award-details p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.award-details ul {
    list-style: none;
    margin-top: 16px;
}

.award-details li {
    position: relative;
    padding-left: 28px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.award-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-500);
    font-weight: 900;
}

.award-metrics-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 40px;
    border-top: 2px solid var(--gray-200);
}

.metric-large {
    text-align: center;
}

.metric-value-large {
    font-size: 56px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 12px;
}

.metric-label-large {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-600);
}

.client-recognition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.client-card {
    padding: 48px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    transition: var(--transition-base);
}

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

.client-logo-text {
    font-size: 28px;
    font-weight: 900;
    color: var(--gray-900);
    font-family: var(--font-display);
    margin-bottom: 20px;
}

.client-card p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 24px;
}

.partnership-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-item {
    padding: 8px 16px;
    background: var(--gray-100);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
}

.validation-content {
    max-width: 1200px;
    margin: 0 auto;
}

.validation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.validation-card {
    padding: 40px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    text-align: center;
    transition: var(--transition-base);
}

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

.validation-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.validation-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.validation-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-600);
}

/* Company Page */
.story-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: start;
}

.story-content {
    max-width: 700px;
}

.story-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.stat-card {
    padding: 32px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 20px;
    text-align: center;
    transition: var(--transition-base);
}

.stat-card:hover {
    border-color: var(--accent-500);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.stat-number-xl {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label-xl {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-600);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.value-card {
    padding: 40px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    transition: var(--transition-base);
}

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

.value-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.value-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.value-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

.expertise-card {
    padding: 40px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
}

.expertise-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.expertise-card p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.team-disciplines h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 24px;
    font-family: var(--font-display);
    text-align: center;
}

.discipline-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.discipline-tag {
    padding: 14px 28px;
    background: var(--gray-100);
    border-radius: 28px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.discipline-tag:hover {
    background: var(--accent-500);
    color: white;
}

.location-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    align-items: start;
}

.location-info {
    max-width: 700px;
}

.location-benefits {
    margin-top: 40px;
}

.location-benefits .benefit-item {
    margin-bottom: 32px;
}

.location-benefits .benefit-icon {
    font-size: 32px;
}

.address-card {
    padding: 48px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
}

.address-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.address-card p {
    font-size: 17px;
    color: var(--gray-600);
    margin-bottom: 32px;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--primary-50);
    color: var(--primary-700);
    text-decoration: none;
    font-weight: 700;
    border-radius: 12px;
    transition: var(--transition-base);
}

.contact-method:hover {
    background: var(--primary-600);
    color: white;
    transform: translateX(4px);
}

/* Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.contact-info h2 {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 20px;
    font-family: var(--font-display);
}

.contact-methods {
    margin-top: 48px;
}

.contact-method-card {
    padding: 32px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 20px;
    margin-bottom: 24px;
    transition: var(--transition-base);
}

.contact-method-card:hover {
    border-color: var(--accent-500);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.method-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.contact-method-card h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.contact-method-card p {
    font-size: 15px;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.contact-link {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

.contact-link:hover {
    color: var(--accent-500);
}

.contact-detail {
    font-size: 16px;
    color: var(--gray-700);
    font-weight: 600;
}

.response-time {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 12px;
    margin-top: 32px;
    font-size: 15px;
    color: var(--gray-700);
}

.response-time svg {
    color: var(--accent-500);
    flex-shrink: 0;
}

.contact-form-container {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--shadow-lg);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 14px 18px;
    border: 2px solid var(--gray-300);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--font-primary);
    color: var(--gray-900);
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-700);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.btn-large {
    padding: 20px 40px;
    font-size: 18px;
}

.form-privacy {
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-600);
    text-align: center;
    margin-top: 16px;
}

.form-privacy a {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 700;
}

.form-privacy a:hover {
    color: var(--accent-500);
}

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

.form-success {
    text-align: center;
    padding: 60px 40px;
}

.form-success .success-icon {
    margin-bottom: 24px;
}

.form-success h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--gray-900);
}

.form-success p {
    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 8px;
}

.form-success .text-muted {
    font-size: 14px;
    color: var(--gray-500);
}

.form-success a {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
}

.form-success a:hover {
    color: var(--accent-500);
}

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

/* Trust Badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: 0.02em;
}

/* Testimonials */
.testimonial-inline {
    margin-top: 32px;
    padding: 24px;
    background: var(--gray-50);
    border-left: 3px solid var(--primary-500);
    border-radius: 0 12px 12px 0;
}

.testimonial-inline p {
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.testimonial-inline cite {
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--gray-500);
}

.testimonial-cta {
    margin-top: 32px;
    padding: 0;
    border: none;
}

.testimonial-cta p {
    font-size: 16px;
    font-style: italic;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.testimonial-cta cite {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

/* Case Studies */
.case-study-card {
    background: white;
    border-radius: 24px;
    padding: 48px;
    border: 2px solid var(--gray-200);
}

.bg-gray .case-study-card {
    border-color: var(--gray-100);
}

.case-study-header {
    margin-bottom: 32px;
}

.case-study-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin-bottom: 16px;
}

.case-study-header h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
}

.case-study-snapshot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px;
    background: var(--gray-50);
    border-radius: 16px;
    margin-bottom: 32px;
}

.snapshot-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.snapshot-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
}

.case-study-body h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: 24px;
    margin-bottom: 12px;
}

.case-study-body p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.case-study-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}

.case-study-body ul li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 15px;
    color: var(--gray-700);
    line-height: 1.6;
}

.case-study-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 16px;
    height: 16px;
    background: var(--accent-500);
    border-radius: 50%;
    opacity: 0.2;
}

.case-study-body ul li::after {
    content: '✓';
    position: absolute;
    left: 3px;
    top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-500);
}

.case-study-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 24px 0;
}

@media (max-width: 768px) {
    .case-study-card {
        padding: 28px 20px;
    }
    .case-study-snapshot {
        grid-template-columns: 1fr 1fr;
    }
    .case-study-metrics {
        grid-template-columns: 1fr;
    }
    .case-study-header h2 {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .case-study-snapshot {
        grid-template-columns: 1fr;
    }
}

/* Inline Lead Capture */
.lead-capture-inline {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 48px;
    background:
        radial-gradient(circle at 0% 0%, rgba(80, 232, 208, 0.10) 0%, transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(0, 104, 200, 0.10) 0%, transparent 42%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 2px solid var(--gray-200);
    border-radius: 24px;
}

.lead-capture-content {
    flex: 1;
}

.lead-capture-content h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.lead-capture-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-600);
}

.inline-capture-form {
    flex-shrink: 0;
    width: 360px;
}

.capture-input-group {
    display: flex;
    gap: 8px;
}

.capture-input-group input[type="email"] {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 15px;
    font-family: var(--font-primary);
    background: white;
    transition: border-color var(--transition-fast);
}

.capture-input-group input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-500);
}

.capture-input-group button {
    padding: 14px 24px;
    background: #8ACFF2;
    color: #181F79;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(70, 180, 235, 0.35);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.capture-input-group button:hover {
    background: #5FBCEE;
    transform: translateY(-2px);
}

.capture-privacy {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 8px;
}

.capture-privacy a {
    color: var(--primary-600);
    text-decoration: none;
}

@media (max-width: 768px) {
    .lead-capture-inline {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
    }
    .inline-capture-form {
        width: 100%;
    }
    .capture-input-group {
        flex-direction: column;
    }
}

/* Legal Pages */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: 40px;
    margin-bottom: 12px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.legal-content ul {
    margin-bottom: 16px;
    padding-left: 24px;
}

.legal-content ul li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.legal-content a {
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
}

.legal-content a:hover {
    color: var(--accent-500);
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.quick-link-card {
    padding: 40px 32px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 24px;
    text-decoration: none;
    transition: var(--transition-base);
    position: relative;
}

.quick-link-card:hover {
    border-color: var(--accent-500);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.quick-link-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.quick-link-icon svg {
    width: 32px;
    height: 32px;
}

.quick-link-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.quick-link-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.link-arrow {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-500);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item {
    padding: 32px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 20px;
}

.faq-item h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-display);
}

.faq-item p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-600);
}

.nav-link.active {
    background: var(--gray-100);
    color: var(--primary-600);
}

.btn-nav.active {
    background: linear-gradient(135deg, var(--primary-700), var(--purple-600));
}

/* Responsive adjustments for new pages */
@media (max-width: 968px) {
    .story-grid,
    .location-content,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .process-timeline,
    .readiness-grid,
    .custom-algo-grid,
    .validation-grid,
    .values-grid,
    .quick-links-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .benefits-grid,
    .impact-metrics,
    .expertise-grid,
    .client-recognition-grid {
        grid-template-columns: 1fr;
    }

    .product-specs,
    .award-stats,
    .award-metrics-large {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-simple {
        padding: 150px 0 80px;
    }

    .hero-title-xl {
        font-size: 42px;
    }

    .product-card-large,
    .solution-detail-card,
    .industry-card,
    .quantum-card,
    .algorithm-category,
    .award-major {
        padding: 40px 32px;
    }

    .story-stats {
        grid-template-columns: 1fr;
    }

    .announcement-banner {
        padding: 6px 16px;
    }

    .announcement-content {
        flex-wrap: wrap;
        gap: 8px;
    }

    .announcement-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .announcement-text {
        font-size: 12px;
        flex: 1;
        min-width: 0;
    }
}

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-text {
    color: var(--gray-200);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.cookie-btn {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--accent-500) 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    flex-shrink: 0;
}

.cookie-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cookie-text {
        font-size: 13px;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========== ENHANCED EXPERTISE MEGA DROPDOWN ========== */

.mega-dropdown-expertise {
    width: 1200px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

.mega-dropdown-expertise .mega-dropdown-content {
    grid-template-columns: 1fr 2fr;
    gap: 32px;
}

/* Featured Banner */
.mega-highlight-enhanced {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-indigo) 50%, var(--purple-500) 100%);
    padding: 32px;
    border-radius: 16px;
    color: white;
    grid-column: 1 / -1;
}

.mega-highlight-enhanced::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: shimmer 25s linear infinite;
    opacity: 0.3;
}

@keyframes shimmer {
    0% { transform: translate(0, 0); }
    100% { transform: translate(400px, 400px); }
}

.highlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.badge-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: pulse-badge 2s ease-in-out infinite;
}

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

.mega-featured-title {
    position: relative;
    z-index: 1;
    font-size: 28px !important;
    font-weight: 900 !important;
    margin-bottom: 12px !important;
    font-family: var(--font-display);
}

.mega-featured-desc {
    position: relative;
    z-index: 1;
    font-size: 15px;
    opacity: 0.95;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Featured Stats */
.featured-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

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

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 900;
    color: #FFE600;
    font-family: var(--font-display);
    margin-bottom: 4px;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.featured-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    color: var(--primary-600);
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.featured-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    gap: 12px;
}

/* Enhanced Labels */
.mega-label-enhanced {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    color: var(--gray-900);
}

.label-emoji {
    font-size: 18px;
    display: inline-block;
}

/* Enhanced Card Items */
.mega-item-enhanced {
    position: relative;
    overflow: hidden;
    border: 1.5px solid var(--gray-200);
    background: linear-gradient(135deg, #FAFBFC 0%, white 100%);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega-item-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mega-item-enhanced:hover {
    border-color: var(--primary-300);
    background: white;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}

.mega-item-enhanced:hover::before {
    opacity: 1;
}

/* Icon Enhancement */
.mega-icon-enhanced {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.mega-item-enhanced:hover .mega-icon-enhanced {
    transform: scale(1.15) rotate(-12deg) translateZ(0);
    filter: brightness(1.1);
}

/* Content Enhancement */
.mega-item-content-enhanced {
    position: relative;
}

.mega-item-enhanced:hover .mega-title {
    color: var(--primary-600);
    transform: translateX(2px);
}

/* Tags */
.expertise-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.tag {
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-700);
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
}

.mega-item-enhanced:hover .tag {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: scale(1.08);
}

/* Card Badges */
.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #FF006E, #FFE600);
    color: white;
    font-size: 10px;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: badgeBounce 2.5s ease-in-out infinite;
}

.badge-featured {
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue)) !important;
}

.badge-popular {
    background: linear-gradient(135deg, #FF006E, #FF1493) !important;
}

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

/* Arrow Animation */
.mega-item-enhanced:hover .mega-arrow {
    transform: translateX(6px) scale(1.15);
}

/* Divider */
.mega-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
    margin: 20px 0;
    grid-column: 1 / -1;
}

.mega-divider::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    background: white;
    border-radius: 4px;
}

/* Capabilities Section */
.mega-capabilities-section {
    grid-column: 1 / -1;
    padding-top: 12px;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.capability-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.capability-item:hover {
    background: white;
    border-color: var(--primary-300);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    transform: translateY(-3px);
}

.cap-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.capability-item:hover .cap-icon {
    transform: scale(1.2) rotate(10deg);
}

.cap-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-700);
    transition: color 0.2s ease;
}

.capability-item:hover .cap-name {
    color: var(--primary-600);
}

/* ===== NEW NAV STRUCTURE ===== */

/* Mobile menu button — hidden on desktop */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gray-700);
    border-radius: 2px;
    transition: var(--transition-fast);
}

/* Shown from the same width the nav menu collapses at (968px), so no
   breakpoint range is left without navigation. */
@media (max-width: 968px) {
    .mobile-menu-btn {
        display: flex;
    }
}

/* Book a Call button */
.btn-book-call {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #2E8FDC;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-primary);
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-book-call:hover {
    background: #1E7BC8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 143, 220, 0.45);
}

/* Nav actions wrapper */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mega dropdown: new two-column inner layout */
.mega-dropdown-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 24px;
}

.mega-dropdown--narrow .mega-dropdown-inner {
    grid-template-columns: 1fr 1fr;
}

/* Single-column dropdown (Company) */
.mega-dropdown--single {
    width: 360px;
}

.mega-dropdown--single .mega-dropdown-inner {
    grid-template-columns: 1fr;
}

.mega-col {
    padding: 0 16px;
}

.mega-col + .mega-col {
    border-left: 1px solid var(--gray-100);
}

.mega-col-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--gray-400);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
}

/* Dropdown visible state (JS-controlled) */
.mega-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mega item icon (small, inline) */
.mega-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gray-600);
    transition: var(--transition-fast);
}

.mega-item:hover .mega-item-icon {
    background: var(--primary-50, #EFF6FF);
    color: var(--primary-600);
}

.mega-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    font-family: var(--font-primary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mega-item-desc {
    font-size: 12px;
    color: var(--gray-500);
    font-family: var(--font-primary);
    line-height: 1.4;
}

/* Credentials column */
.mega-col--credentials {
    padding-left: 24px;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.credential-item:last-child {
    border-bottom: none;
}

.credential-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.credential-badge--gold {
    background: #FEF3C7;
    color: #92400E;
}

.credential-badge--blue {
    background: #DBEAFE;
    color: var(--primary-700);
}

.credential-badge--green {
    background: #D1FAE5;
    color: #065F46;
}

.credential-badge--gray {
    background: var(--gray-100);
    color: var(--gray-600);
}

.credential-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    font-family: var(--font-primary);
}

/* Nav chevron */
.nav-chevron {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    transition: transform var(--transition-fast);
}

.has-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

/* ========== OPTIMIZATION MEGA DROPDOWN — QUIET COLUMNS ========== */

.mega-dropdown--wide {
    width: 880px;
    left: 0;
    transform: translateY(-6px);
}

.mega-dropdown--narrow {
    width: 560px;
}

.mega-dropdown--wide.visible,
.has-dropdown:hover .mega-dropdown--wide {
    transform: translateY(0);
}

/* Four quiet text columns: Solvers · Apps · By Industry · Get it */
.mega-dropdown-inner--four {
    grid-template-columns: 1.12fr 1fr 0.95fr 1.08fr;
}

/* Text-only item — no icon box, tighter padding for dense columns */
.mega-item--slim {
    gap: 0;
    padding: 8px 10px;
    margin-bottom: 2px;
}

.mega-item--slim .mega-item-desc {
    margin-top: 1px;
}

/* Column label that doubles as a link ("By Industry →", "Blog →") */
.mega-col-label--link {
    display: block;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mega-col-label--link:hover {
    color: var(--primary-600);
}

/* Featured tile — at most one per dropdown, the dropdown's only coloured
   element. Quiet logo-hue wash on white. */
.mega-feature {
    display: block;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--gray-150, #EAECF0);
    background: linear-gradient(135deg, rgba(84, 239, 213, 0.10), rgba(0, 111, 205, 0.07));
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mega-feature:hover {
    border-color: var(--color-blue, #006FCD);
    box-shadow: 0 0 0 3px rgba(0, 111, 205, 0.10);
}

.mega-feature-eyebrow {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-blue, #006FCD);
    margin-bottom: 4px;
    font-family: var(--font-primary);
}

.mega-feature-title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -0.1px;
    line-height: 1.35;
    color: var(--color-navy, #181F79);
    margin-bottom: 3px;
}

.mega-feature-body {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.5;
    font-family: var(--font-primary);
    margin-bottom: 6px;
}

.mega-feature-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-blue, #006FCD);
    font-family: var(--font-primary);
}

/* Full-width footer line under a dropdown's columns */
.mega-foot {
    margin: 0 24px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--gray-100);
}

.mega-foot a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mega-foot a:hover {
    color: var(--primary-600);
}


/* ============================================================
   Use Cases page (use-cases.html) — docs-style layout
   Always-visible left nav + stacked use-case articles.
   Brand cools: teal -> blue -> indigo -> deep navy.
   ============================================================ */

/* --- Layout constants --- */
:root { --docs-rail: 292px; --docs-nav-top: 64px; }

/* --- Compact page header (inside the content column) --- */
.docs-header {
    padding: 104px 56px 40px;
    background: linear-gradient(180deg, #F4F8FC 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--gray-100);
}
.docs-header .hero-badge { margin-bottom: 22px; }
.docs-title {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--gray-900);
    margin-bottom: 14px;
    line-height: 1.08;
}
.docs-intro {
    font-size: 18px;
    color: var(--gray-600);
    max-width: 760px;
    line-height: 1.6;
}

/* --- Always-visible fixed left rail --- */
.docs-sidebar {
    position: fixed;
    top: var(--docs-nav-top);
    left: 0;
    bottom: 0;
    width: var(--docs-rail);
    overflow-y: auto;
    padding: 30px 18px 48px 40px;
    background: #fff;
    border-right: 1px solid var(--gray-100);
    z-index: 50;
    scrollbar-width: thin;
}
.docs-sidebar::-webkit-scrollbar { width: 8px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 8px; }
.docs-sidebar-toggle { display: none; }
.docs-nav-wrap { display: block; }

/* --- Content column, offset to the right of the rail --- */
.docs-content { margin-left: var(--docs-rail); }

.docs-group { margin-bottom: 22px; }
.docs-group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-deep);
    margin-bottom: 8px;
    padding-left: 14px;
}
.docs-nav { border-left: 1px solid var(--gray-200); }
.docs-link {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.4;
    color: var(--gray-500);
    text-decoration: none;
    transition: var(--transition-fast);
}
.docs-link:hover { color: var(--gray-900); }
.docs-link.active {
    color: var(--color-blue);
    border-left-color: var(--color-blue);
    font-weight: 600;
}

/* --- Main content --- */
.docs-main {
    min-width: 0;
    max-width: 1120px;
    padding: 44px 56px 80px;
}

.docs-industry { scroll-margin-top: 96px; }
.docs-industry + .docs-industry { margin-top: 60px; }
.docs-industry-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-blue);
    padding-bottom: 14px;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--gray-100);
}
.docs-industry-heading::before {
    content: "";
    width: 30px; height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #50E8D0, #0068C8 55%, #3818C8);
}

/* --- Use-case article --- */
.uc-doc {
    scroll-margin-top: 96px;
    padding: 34px 40px;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    background: #fff;
    margin-bottom: 24px;
    transition: var(--transition-base);
}
.uc-doc:hover {
    border-color: rgba(0, 104, 200, 0.28);
    box-shadow: 0 20px 44px -18px rgba(8, 32, 120, 0.18);
}
.uc-doc-title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--gray-900);
    line-height: 1.25;
    margin-bottom: 20px;
}
.uc-doc-body p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-700);
    margin-bottom: 15px;
}
.uc-doc-body p:last-child { margin-bottom: 0; }
.uc-lead {
    font-family: var(--font-display);
    font-weight: 700;
    margin-right: 8px;
}
.uc-lead--problem  { color: var(--color-deep); }   /* deep royal blue */
.uc-lead--story    { color: var(--color-indigo); } /* logo indigo */
.uc-lead--solution { color: var(--color-blue); }   /* logo blue */
.uc-lead--result   { color: var(--color-teal); }   /* logo teal */

/* --- Footer metadata --- */
.uc-doc-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--gray-200);
}
.uc-foot-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-700);
}
.uc-foot-k {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-400);
}

/* --- Responsive --- */
@media (max-width: 968px) {
    .docs-header { padding: 104px 22px 32px; }
    .docs-title { font-size: 34px; }
    .docs-main { padding: 28px 22px 60px; }
    .docs-content { margin-left: 0; }
    .docs-sidebar {
        position: sticky;
        top: var(--docs-nav-top);
        left: auto;
        bottom: auto;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 12px 22px;
        margin: 0;
        background: #fff;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        z-index: 40;
    }
    .docs-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 18px;
        background: var(--gray-50);
        border: 1px solid var(--gray-200);
        border-radius: 12px;
        font-weight: 600;
        font-size: 15px;
        color: var(--gray-800);
        cursor: pointer;
    }
    .docs-nav-wrap {
        display: none;
        max-height: 60vh;
        overflow-y: auto;
        margin-top: 12px;
        padding: 4px 2px;
        border: 1px solid var(--gray-100);
        border-radius: 12px;
    }
    .docs-sidebar.open .docs-nav-wrap { display: block; }
    .uc-doc { padding: 26px 22px; }
}
@media (max-width: 768px) {
    .uc-doc-title { font-size: 20px; }
    .uc-doc-body p { font-size: 15px; }
}

/* Three solution cards: triangulation palette (teal / blue / navy) */
.solutions-grid-modern .solution-card-modern:nth-child(1) .solution-icon-large {
    background: #50E8D0;
    color: #181878;
}
.solutions-grid-modern .solution-card-modern:nth-child(2) .solution-icon-large {
    background: #0068C8;
    color: #FFFFFF;
}
.solutions-grid-modern .solution-card-modern:nth-child(3) .solution-icon-large {
    background: #181878;
    color: #FFFFFF;
}

/* --- Components ported from v2 alongside the quantum / solver / process pages.
       These are the only classes those pages used that main did not already have. --- */
.prose-narrow { max-width: 820px; margin: 0 auto; }
.lead-line { font-size: 20px; color: var(--gray-600); line-height: 1.7; max-width: 760px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.note-slot {
    border: 1px dashed var(--gray-300);
    border-radius: 12px;
    padding: 20px 24px;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 15px;
}
.note-slot strong { color: var(--gray-800); }

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

/* =========================================================================
   Homepage rework: simplified personas, solvers footnote, quantum band,
   process strip, four-up recognition, featured case band, home FAQ.
   Reuses existing card and button components; these are layout only.
   ========================================================================= */

.persona-line {
    font-size: 17px;
    line-height: 1.55;
    color: var(--gray-700);
    margin: 14px 0 16px;
}
.persona-footnote {
    text-align: center;
    margin-top: 36px;
    font-size: 16px;
    color: var(--gray-600);
}
.persona-footnote a { color: var(--primary-700); font-weight: 600; }

.section-footnote {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    color: var(--gray-600);
}
.section-footnote a { color: var(--primary-700); font-weight: 600; }

/* Quantum band: slim, tinted, deliberately not a card in a grid. */
.quantum-band {
    background: linear-gradient(90deg, rgba(56, 31, 204, 0.05), rgba(84, 239, 213, 0.07));
    border-top: 1px solid var(--accent-100);
    border-bottom: 1px solid var(--accent-100);
    padding: 30px 0;
}
.quantum-band p {
    margin: 0;
    max-width: 900px;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--gray-700);
}
.quantum-band strong { color: var(--gray-900); }
.quantum-band a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-700);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.quantum-band a:hover { text-decoration: underline; }

/* Process strip: one slim row, not a full section of cards. */
.process-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    counter-reset: pstep;
}
.process-strip > li {
    position: relative;
    padding: 18px 14px;
    border-radius: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    text-align: center;
}
.process-strip > li::after {
    content: "→";
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-300);
    font-size: 15px;
    z-index: 1;
}
.process-strip > li:last-child::after { content: none; }
.process-step {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}
.process-gloss {
    display: block;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--gray-600);
    margin-top: 5px;
}
.process-strip--five { grid-template-columns: repeat(5, 1fr); }
.process-closing a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.process-closing a:hover { text-decoration: underline; }
@media (max-width: 980px) {
    .process-strip--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .process-strip--five { grid-template-columns: repeat(2, 1fr); }
}
.process-closing {
    text-align: center;
    margin-top: 32px;
    font-size: 17px;
    color: var(--gray-700);
}

@media (max-width: 980px) {
    .process-strip { grid-template-columns: repeat(3, 1fr); }
    .process-strip > li:nth-child(3)::after { content: none; }
}
@media (max-width: 560px) {
    .process-strip { grid-template-columns: repeat(2, 1fr); }
    .process-strip > li::after { content: none; }
}

/* Recognition: four credentials of different kinds, so no single win dominates. */
.awards-grid-showcase--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .awards-grid-showcase--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .awards-grid-showcase--four { grid-template-columns: 1fr; } }

/* Featured case band: one real result, replacing the anonymous testimonial. */
.featured-case-band {
    padding: 34px 0;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.featured-case-band p {
    margin: 0;
    max-width: 980px;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--gray-700);
}
.featured-case-band a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-700);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.featured-case-band a:hover { text-decoration: underline; }

/* Home FAQ */
.faq-home-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 900px;
    margin-inline: auto;
}
.faq-home-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 24px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 650;
    color: var(--gray-900);
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-home-list a:hover {
    border-color: var(--primary-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.faq-home-list svg { color: var(--primary-600); flex: 0 0 auto; }
@media (max-width: 700px) { .faq-home-list { grid-template-columns: 1fr; } }

/* ---- Persona cards: accent-driven polish -------------------------------
   Every rule below reads --persona-accent / --persona-ink, which each card
   already sets, so the three cards differentiate themselves without any
   per-card overrides here. ---------------------------------------------- */

.persona-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 300ms ease;
}

/* Soft accent wash, low opacity until hover. */
.persona-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 80% at 100% 0%,
                color-mix(in srgb, var(--persona-accent) 13%, transparent), transparent 62%);
    opacity: 0.5;
    transition: opacity 380ms ease;
}
.persona-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--persona-accent) 42%, var(--gray-200));
    box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--persona-accent) 32%, transparent);
}
.persona-card:hover::after { opacity: 1; }

/* Icon becomes a tinted chip rather than a bare glyph. */
.persona-icon {
    border-radius: 13px;
    background: color-mix(in srgb, var(--persona-accent) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--persona-accent) 22%, transparent);
}
.persona-card:hover .persona-icon { transform: scale(1.06) rotate(-3deg); }
.persona-icon svg { width: 22px; height: 22px; }

.persona-eyebrow { color: var(--persona-ink); }

/* Push the CTA to the bottom so the three align even with uneven copy. */
.persona-line { flex: 1 1 auto; }
.persona-wants { margin-bottom: 18px; }

.persona-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 11px 19px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
    color: var(--persona-ink);
    background: color-mix(in srgb, var(--persona-accent) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--persona-accent) 30%, transparent);
    transition: background 260ms ease, border-color 260ms ease, gap 260ms ease;
}
.persona-cta svg { width: 16px; height: 16px; }
.persona-cta:hover {
    gap: 13px;
    background: color-mix(in srgb, var(--persona-accent) 20%, #fff);
    border-color: color-mix(in srgb, var(--persona-accent) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .persona-card, .persona-card::after, .persona-icon, .persona-cta { transition: none; }
    .persona-card:hover { transform: none; }
    .persona-card:hover .persona-icon { transform: none; }
}

/* ---- Fourth persona: researcher / quantum ------------------------------
   Deep royal blue is the one logo hue not already spoken for by the other
   three cards, and it stays distinguishable from the brighter blue. ------ */
.persona-card--research {
    /* Deep royal (#0014AF) sat at dE 10.7 from the Operations indigo, which reads
       as the same colour. Navy is the furthest remaining logo hue, and the teal
       Engineering card sits between the two so they never touch. */
    --persona-accent: var(--color-navy);
    --persona-ink: var(--color-navy);
}

/* Four across on wide screens, two on tablet, one on mobile. The previous
   340px minimum forced a 3 + 1 orphan once a fourth card existed. */
.persona-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .persona-grid { grid-template-columns: 1fr; } }

/* Pin the CTA to the card floor so the four stay level even when a link row
   wraps to a second line. */
.persona-cta { margin-top: auto; }

/* ---- Shorter persona cards --------------------------------------------
   The dead band between copy and links came from .persona-line stretching
   to fill the card. The CTA is pinned to the floor separately, so the line
   no longer needs to flex and the gap collapses. ------------------------ */
.persona-card { padding: 30px 28px 26px; border-radius: 20px; }
.persona-head { gap: 15px; margin-bottom: 14px; }
.persona-icon { width: 38px; height: 38px; border-radius: 11px; }
.persona-icon svg { width: 19px; height: 19px; }
.persona-eyebrow { font-size: 12.5px; }
.persona-line {
    flex: 0 0 auto;
    font-size: 15.5px;
    line-height: 1.5;
    margin: 0 0 16px;
}
.persona-wants {
    padding-top: 14px;
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.55;
}
.persona-cta { padding: 9px 16px; font-size: 14.5px; }

/* Inline links inside persona copy. Underlined rather than colour-only so they
   read as links in running text without turning the sentence into a link row. */
.persona-line a {
    color: var(--gray-800);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--persona-accent) 55%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 550;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}
.persona-line a:hover {
    color: var(--persona-ink);
    text-decoration-color: var(--persona-accent);
}



/* ---- Persona board: four equal cards in one uniform row ----------------
   All four share a row, so they match in width AND height; no card is set
   apart. Centred under the heading. ------------------------------------- */
.persona-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1360px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 1180px) { .persona-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .persona-board { grid-template-columns: 1fr; } }

/* ---- Solver board: modern triangle-accented cards ----------------------
   Four equal cards in one row — all four solvers are available today, so
   there is deliberately no today/future split here. Each card carries a
   corner triangle drawn from the logo's own geometry, tinted with the
   card's accent. -------------------------------------------------------- */
.solver-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 22px;
    row-gap: 18px;
    max-width: 1360px;
    margin: 0 auto;
    align-items: stretch;
}

.solver-card {
    --sv: var(--color-blue);   /* accent, per card below */
    --sv-ink: var(--color-blue);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 24px 24px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 64, 0.04);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 300ms ease;
}
.solver-card--sched  { --sv: var(--color-teal);   --sv-ink: color-mix(in srgb, var(--color-teal) 58%, #000); }
.solver-card--route  { --sv: var(--color-blue);   --sv-ink: var(--color-blue); }
.solver-card--pack   { --sv: var(--color-indigo); --sv-ink: var(--color-indigo); }
.solver-card--custom { --sv: var(--color-indigo); --sv-ink: var(--color-indigo); }
.solver-card--qubo   { --sv: var(--color-navy);   --sv-ink: var(--color-navy); }

.solver-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sv) 42%, var(--gray-200));
    box-shadow: 0 18px 42px -16px color-mix(in srgb, var(--sv) 40%, transparent);
}

/* The corner triangle: a right-triangle echoing the logo mark, filled with a
   two-stop accent gradient. It grows a touch on hover. */
.solver-tri {
    position: absolute;
    top: 0;
    right: 0;
    width: 74px;
    height: 74px;
    z-index: -1;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--sv) 85%, #fff),
                color-mix(in srgb, var(--sv) 34%, #fff));
    border-top-right-radius: 20px;
    transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1),
                height 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.solver-card:hover .solver-tri { width: 92px; height: 92px; }

/* Icon: an accent-tinted square, the glyph in the accent ink. */
.solver-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--sv-ink);
    background: color-mix(in srgb, var(--sv) 13%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv) 24%, transparent);
    margin-bottom: 18px;
}
.solver-icon svg { width: 23px; height: 23px; }

.solver-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    margin: 0 0 9px;
}
/* Body copy matches the persona-line scale so the two sections read as one system. */
.solver-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0 0 18px;
    flex: 1 1 auto;
}
.solver-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    color: var(--sv-ink);
    transition: gap 240ms ease;
}
.solver-link svg { width: 16px; height: 16px; }
.solver-card:hover .solver-link { gap: 11px; }

@media (max-width: 1180px) {
    .solver-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .solver-board { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .solver-card, .solver-tri, .solver-link { transition: none; }
    .solver-card:hover { transform: none; }
    .solver-card:hover .solver-tri { width: 74px; height: 74px; }
}

/* =========================================================================
   Homepage v2 + supporting pages: researcher card, solver badge/metric,
   offering ladder, integration strip, case-study teasers, developer band,
   performance tables, solver-page constraint lists.
   ========================================================================= */

/* ---- Solver cards: title row, quantum-ready badge, metric line --------- */
.solver-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 9px;
}
.solver-title-row .solver-title { margin: 0; }
.solver-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 12px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}
.solver-metric {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gray-700);
    padding-top: 12px;
    margin: 0 0 16px;
    border-top: 1px solid var(--gray-100);
}

/* ---- Offering ladder: four solution cards, one accent hue each --------- */
.solutions-grid-modern--offer {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.solutions-grid-modern--offer .solution-card-modern {
    --sv: var(--color-blue);
    padding: 34px 30px 30px;
}
.solutions-grid-modern--offer .solution-card-modern::before {
    background: var(--sv);
}
.offer-card--api        { --sv: var(--color-teal); }
.offer-card--onboarding { --sv: var(--color-blue); }
.offer-card--apps       { --sv: var(--color-indigo); }
.offer-card--custom     { --sv: var(--color-navy); }
.solutions-grid-modern--offer .solution-number { margin-bottom: 20px; }
.solutions-grid-modern--offer .solution-icon-large {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sv) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sv) 24%, transparent);
    color: color-mix(in srgb, var(--sv) 85%, #000);
    margin-bottom: 22px;
}
.offer-card--api .solution-icon-large { color: color-mix(in srgb, var(--color-teal) 55%, #000); }
.solutions-grid-modern--offer .solution-icon-large svg { width: 26px; height: 26px; }
.solutions-grid-modern--offer .solution-title-large { font-size: 22px; margin-bottom: 12px; }
.solutions-grid-modern--offer .solution-desc-large { font-size: 15.5px; line-height: 1.6; margin-bottom: 20px; }
.solutions-grid-modern--offer .solution-features-list { margin-bottom: 22px; }
.solutions-grid-modern--offer .solution-features-list li { font-size: 14.5px; gap: 10px; margin-bottom: 10px; }
.solutions-grid-modern--offer .solution-features-list svg { width: 17px; height: 17px; color: color-mix(in srgb, var(--sv) 70%, #000 10%); }
.solutions-grid-modern--offer .solution-link { font-size: 15px; }
@media (max-width: 1180px) { .solutions-grid-modern--offer { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .solutions-grid-modern--offer { grid-template-columns: 1fr; } }

/* Integration strip: one slim band inside the offering section. */
.integration-strip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 28px;
    padding: 22px 28px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
}
.integration-strip svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--gray-700);
    margin-top: 2px;
}
.integration-strip p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--gray-600);
}
.integration-strip strong { color: var(--gray-900); }
.integration-strip a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.integration-strip a:hover { text-decoration: underline; }

/* ---- Case-study teasers: compact cards, reused on solver/industry pages */
.cs-teaser-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.cs-teaser {
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 64, 0.04);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.cs-teaser:hover {
    transform: translateY(-4px);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-lg);
}
.cs-teaser h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--gray-900);
    margin: 0 0 10px;
}
.cs-teaser-result {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0 0 16px;
    flex: 1 1 auto;
}
.cs-teaser-framing {
    font-size: 14.5px;
    font-style: italic;
    color: var(--gray-500);
    margin: 0 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}
.cs-teaser-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    color: var(--primary-600);
    transition: gap 240ms ease;
}
.cs-teaser-link svg { width: 16px; height: 16px; }
.cs-teaser:hover .cs-teaser-link { gap: 11px; }
@media (max-width: 860px) { .cs-teaser-grid { grid-template-columns: 1fr; } }
.cs-teaser-grid--three { grid-template-columns: repeat(3, 1fr); max-width: 1280px; }
@media (max-width: 1100px) { .cs-teaser-grid--three { grid-template-columns: 1fr; max-width: 720px; } }
.cs-teaser-grid--one { grid-template-columns: 1fr; max-width: 720px; }

/* Industry pages: a filtered board of two solver cards. */
.solver-board--two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (max-width: 560px) { .solver-board--two { grid-template-columns: 1fr; } }

/* ---- Developer band: code left, pitch + stat chips right --------------- */
.dev-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.dev-code {
    background: var(--gray-900);
    border-radius: 16px;
    padding: 26px 28px;
    overflow-x: auto;
    box-shadow: var(--shadow-xl);
}
.dev-code pre {
    margin: 0;
    font-family: 'SF Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-100);
    white-space: pre;
}
.dev-code .tok-method { color: var(--color-teal); font-weight: 700; }
.dev-code .tok-ok { color: #8ACFF2; font-weight: 700; }
.dev-code .tok-dim { color: var(--gray-400); }
.dev-band-copy h2 {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--gray-900);
    margin: 0 0 14px;
}
.dev-band-copy > p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--gray-600);
    margin: 0 0 24px;
    max-width: 520px;
}
.dev-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 28px;
}
.dev-chip {
    padding: 14px 18px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}
.dev-chip-value {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
}
.dev-chip-label {
    display: block;
    font-size: 14.5px;
    color: var(--gray-600);
    margin-top: 2px;
}
.dev-band-ctas {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
.dev-band-ctas .text-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--primary-600);
    text-decoration: none;
    transition: gap 240ms ease;
}
.dev-band-ctas .text-cta:hover { gap: 11px; }
.dev-band-ctas .text-cta svg { width: 16px; height: 16px; }
@media (max-width: 968px) {
    .dev-band-grid { grid-template-columns: 1fr; gap: 36px; }
    .dev-code { order: 2; }
}

/* ---- Performance tables (developers.html + solver pages) --------------- */
.perf-table {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
}
.perf-table th {
    text-align: left;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gray-700);
    background: var(--gray-50);
    padding: 14px 22px;
    border-bottom: 1px solid var(--gray-200);
}
.perf-table td {
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--gray-700);
    padding: 15px 22px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}
.perf-table tbody tr:last-child td { border-bottom: none; }
.perf-table td:first-child { color: var(--gray-900); font-weight: 600; }
.perf-note {
    max-width: 860px;
    margin: 18px auto 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gray-500);
}
.perf-note a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.perf-note a:hover { text-decoration: underline; }
.perf-table-wrap { overflow-x: auto; }

/* ---- Solver pages: prose problem list + two-column constraint list ----- */
.problem-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
}
.problem-list li {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--gray-600);
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-100);
}
.problem-list li:last-child { border-bottom: none; }
.problem-list strong { color: var(--gray-900); font-weight: 650; }
.problem-list a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.problem-list a:hover { text-decoration: underline; }

.constraint-cols {
    columns: 2;
    column-gap: 56px;
    max-width: 860px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.constraint-cols li {
    break-inside: avoid;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--gray-700);
    padding: 10px 0 10px 22px;
    position: relative;
}
.constraint-cols li::before {
    content: '\2192';
    position: absolute;
    left: 0;
    color: var(--gray-400);
}
@media (max-width: 700px) { .constraint-cols { columns: 1; } }

/* Compact CTA row for docs-style page headers. */
.docs-cta-row {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.docs-cta-row .text-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--primary-600);
    text-decoration: none;
    transition: gap 240ms ease;
}
.docs-cta-row .text-cta:hover { gap: 11px; }
.docs-cta-row .text-cta svg { width: 16px; height: 16px; }

/* "Get it" routes at the foot of each solver page. */
.get-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}
.get-links a {
    display: block;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.get-links a:hover {
    border-color: var(--primary-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.get-links .get-k {
    display: block;
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.get-links .get-d {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gray-600);
}
@media (max-width: 820px) { .get-links { grid-template-columns: 1fr; } }

/* Page-top framing note for the illustrative case studies. */
.cs-framing-note {
    max-width: 860px;
    margin: 0 auto 40px;
    padding: 16px 22px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    font-size: 14.5px;
    font-style: italic;
    color: var(--gray-600);
    text-align: center;
}

/* ============================================================
   Part-2 components: Sprint banner, engagement ladder, app pages,
   how-to-buy comparison, services strip.
   ============================================================ */

/* Sprint banner — the offering section's single accent-bordered element. */
.sprint-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 2px solid var(--color-blue, #006FCD);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 0 auto 40px;
    max-width: 1360px;
}

.sprint-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: var(--color-blue, #006FCD);
    background: color-mix(in srgb, var(--color-blue, #006FCD) 10%, #fff);
}

.sprint-banner-icon svg { width: 22px; height: 22px; }

.sprint-banner-body { flex: 1; }

.sprint-banner-body p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--gray-700);
    margin: 0;
}

.sprint-banner-body p strong {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.sprint-banner-cta { flex-shrink: 0; white-space: nowrap; }

.sprint-banner--slim { margin-top: 40px; margin-bottom: 0; }

@media (max-width: 900px) {
    .sprint-banner { flex-direction: column; align-items: flex-start; }
}

/* Services strip — one slim centred add-ons line under the product cards. */
.services-strip {
    text-align: center;
    font-size: 15px;
    color: var(--gray-600);
    margin: 36px 0 0;
}

.services-strip a { color: var(--primary-600); text-decoration: none; font-weight: 600; }
.services-strip a:hover { text-decoration: underline; }

/* Engagement ladder (sprint page) — four steps, step 2 featured. */
.ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
    max-width: 1360px;
    margin: 0 auto;
}

.ladder-step {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
}

.ladder-step--featured {
    border: 2px solid var(--color-blue, #006FCD);
    box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--color-blue, #006FCD) 45%, transparent);
}

.ladder-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--color-navy, #181F79);
    background: color-mix(in srgb, var(--color-teal, #54EFD5) 25%, #fff);
    margin-bottom: 14px;
}

.ladder-step--featured .ladder-num {
    color: #fff;
    background: var(--color-blue, #006FCD);
}

.ladder-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 4px;
}

.ladder-tag {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-600);
    margin: 0 0 10px;
}

.ladder-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gray-600);
    margin: 0;
}

.ladder-note {
    font-size: 12.5px;
    color: var(--gray-500);
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}

.ladder-credit {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 28px 0 0;
}

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

/* Credit-mechanics highlighted line */
.credit-line {
    max-width: 720px;
    margin: 40px auto 0;
    padding: 16px 22px;
    border-left: 3px solid var(--color-teal, #54EFD5);
    background: color-mix(in srgb, var(--color-teal, #54EFD5) 8%, #fff);
    border-radius: 0 12px 12px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--gray-800);
}

/* App pages */
.app-shot {
    margin: 48px auto 0;
    max-width: 860px;
    min-height: 220px;
    border: 1px dashed var(--gray-300);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(84, 239, 213, 0.06), rgba(0, 111, 205, 0.05));
    display: grid;
    place-items: center;
    padding: 32px;
}

.app-shot-note {
    font-size: 14px;
    color: var(--gray-500);
    text-align: center;
    max-width: 46ch;
}

.app-capabilities {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-capabilities p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--gray-600);
    margin: 0;
}

.app-capabilities p strong { color: var(--gray-900); }

.pricing-line {
    text-align: center;
    font-size: 15px;
    color: var(--gray-600);
    margin: 36px 0 0;
}

.pricing-line a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.pricing-line a:hover { text-decoration: underline; }

.cta-subnote {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.cta-subnote a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* how-to-buy comparison table: descriptive cells, nothing below 14.5px */
.comparison-table--buy td,
.comparison-table--buy th {
    font-size: 15px;
    padding: 18px 24px;
}

.comparison-table--buy td:first-child {
    font-weight: 600;
    color: var(--gray-900);
}

.comparison-table--buy th a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.buy-addons-line {
    text-align: center;
    font-size: 15px;
    color: var(--gray-600);
    margin: 28px 0 0;
}

.buy-addons-line a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.buy-addons-line a:hover { text-decoration: underline; }

/* ============================================================
   Part-3 components: proof band, who-does-what matrix, add-on pills,
   offer badges, how-we-work path rows, terms strip.
   ============================================================ */

/* Anchored jumps (#sprint, #benchmark, #matrix, add-on sections)
   must clear the fixed navbar. */
[id] { scroll-margin-top: 96px; }

/* Offer-card badges: Self-serve / Ready-made / Full service */
.offer-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.offer-card-top .solution-number { margin-bottom: 0; }

.offer-badge {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: color-mix(in srgb, var(--sv, var(--color-blue, #006FCD)) 50%, #000);
    background: color-mix(in srgb, var(--sv, var(--color-blue, #006FCD)) 14%, #fff);
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

/* One-line proof mention per product column (products page) */
.offer-proof {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-100);
    padding-top: 14px;
    margin: 0 0 16px;
}

.offer-proof a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.offer-proof a:hover { text-decoration: underline; }

/* Add-on pill line — four pills, attach to any product */
.addon-pill {
    display: inline-block;
    padding: 4px 12px;
    margin: 2px 1px;
    border: 1.5px solid color-mix(in srgb, var(--primary-600) 35%, #fff);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.services-strip a.addon-pill:hover {
    text-decoration: none;
    border-color: var(--primary-600);
    background: color-mix(in srgb, var(--primary-600) 6%, #fff);
}

/* Proof band — reuses the .sprint-banner accent component, placed
   under the product cards (the section's single accent element). */
.proof-band { margin: 40px auto 0; }

/* Centred routing line (how-we-work) */
.routing-line {
    text-align: center;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--gray-600);
    max-width: 880px;
    margin: 36px auto 0;
}

.routing-line a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.routing-line a:hover { text-decoration: underline; }

/* Who-does-what matrix caption + slim how-we-work link */
.matrix-caption {
    text-align: center;
    font-size: 15px;
    color: var(--gray-600);
    margin: 24px 0 0;
}

.matrix-caption a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.matrix-caption a:hover { text-decoration: underline; }

.hww-link {
    text-align: center;
    font-size: 15px;
    color: var(--gray-600);
    margin: 18px 0 0;
}

.hww-link a { color: var(--primary-600); font-weight: 700; text-decoration: none; }
.hww-link a:hover { text-decoration: underline; }

/* Small note under a docs-header CTA row (developers page) */
.docs-subnote {
    margin-top: 18px;
    font-size: 14.5px;
    color: var(--gray-500);
}

.docs-subnote a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.docs-subnote a:hover { text-decoration: underline; }

/* How-we-work path rows: uc-doc cards with an eyebrow, CTA and note */
.hww-rows { max-width: 900px; margin: 0 auto; }

.uc-doc-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary-600);
    margin-bottom: 10px;
}

.uc-doc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-600);
    text-decoration: none;
}

.uc-doc-cta:hover { text-decoration: underline; }

.uc-doc .btn-primary { margin-top: 20px; display: inline-block; }

.uc-doc-note {
    font-size: 12.5px;
    color: var(--gray-500);
    margin: 10px 0 0;
}

/* Terms strip — three short items, plain text, no cards */
.terms-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1080px;
    margin: 0 auto;
}

.terms-strip strong {
    display: block;
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.terms-strip p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-600);
    margin: 0;
}

@media (max-width: 820px) {
    .terms-strip { grid-template-columns: 1fr; gap: 26px; }
}

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

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

/* work-with-us: card subtitle, bring-lines, decision helper, forks */
.offer-sub {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gray-500);
    margin-top: 4px;
}

.bring-line {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-100);
    padding-top: 14px;
    margin: 0 0 16px;
}

.bring-line strong { color: var(--gray-900); }

.decide-box {
    max-width: 900px;
    margin: 44px auto 0;
    background: #fff;
    border: 2px solid var(--color-blue, #006FCD);
    border-radius: 16px;
    padding: 28px 32px;
}

.decide-box h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 14px;
}

.decide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.decide-q {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.decide-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-600);
    text-decoration: none;
}

.decide-a:hover { text-decoration: underline; }

@media (max-width: 820px) {
    .decide-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* quantum page credentials, reusing the nav credential styles */
.credential-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 40px;
    max-width: 960px;
    margin: 0 auto;
}

.credential-grid .credential-item { border-bottom: 1px solid var(--gray-100); }
.credential-grid .credential-text { font-size: 14px; }

@media (max-width: 900px) {
    .credential-grid { grid-template-columns: 1fr; max-width: 480px; }
    .credential-grid .credential-item:last-child { border-bottom: none; }
}

/* Prove -> Pilot -> Production stepper */
.ppp {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1160px;
    margin: 0 auto 22px;
}

.ppp-step {
    flex: 1 1 0;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 26px;
}

.ppp-arrow {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    width: 46px;
    color: var(--gray-300);
}

.ppp-arrow svg { width: 26px; height: 26px; }

.ppp-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--color-navy, #181F79);
    background: color-mix(in srgb, var(--color-teal, #54EFD5) 25%, #fff);
    margin-bottom: 14px;
}

.ppp-step h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px;
}

.ppp-step p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-600);
    margin: 0;
}

/* The two entry offers under Prove */
.entry-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1160px;
    margin: 22px auto 0;
}

.entry-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 24px 26px;
    text-decoration: none;
    transition: var(--transition-base);
}

.entry-tile:hover {
    border-color: rgba(0, 104, 200, 0.35);
    box-shadow: 0 16px 36px -20px rgba(8, 32, 120, 0.25);
}

.entry-tile--accent { border: 2px solid var(--color-blue, #006FCD); }

.entry-k {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.entry-t {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}

.entry-d {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gray-600);
}

.entry-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-600);
}

.entry-tile:hover .entry-cta { text-decoration: underline; }

.ppp-credit {
    text-align: center;
    font-size: 14.5px;
    color: var(--gray-600);
    max-width: 760px;
    margin: 32px auto 0;
}

.routing-line--quiet { font-size: 14px; color: var(--gray-500); margin-top: 12px; }

@media (max-width: 968px) {
    .ppp { flex-direction: column; }
    .ppp-arrow { width: auto; padding: 6px 0; transform: rotate(90deg); }
    .entry-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   Offering redesign — shared responsibility chips, homepage
   mini-split, offer footer band, who-does-what matrix,
   engine bar, assurance strip, Prove fork.
   ============================================================ */

/* ---- Responsibility / commercial chips (mini-split + matrix) ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding: 3px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.chip--you {                              /* You — outline grey */
    color: var(--gray-600);
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--gray-300);
}
.chip--us {                              /* Us — solid brand blue (on-brand, not dark) */
    color: #fff;
    background: var(--color-blue);
}
.chip--together {                        /* Together — indigo tint */
    color: color-mix(in srgb, var(--color-indigo) 72%, #000);
    background: color-mix(in srgb, var(--color-indigo) 12%, #fff);
}
.chip--builtin,
.chip--included {                        /* Built in / Included — teal tint */
    color: color-mix(in srgb, var(--color-teal) 42%, #000);
    background: color-mix(in srgb, var(--color-teal) 22%, #fff);
}
.chip--none {                            /* — soft grey */
    color: var(--gray-400);
    background: var(--gray-100);
}
.chip--neutral {                         /* Commercial named items — soft grey fill */
    color: var(--gray-700);
    background: var(--gray-100);
}

/* ---- Homepage offering: mini responsibility split on each card -------- */
.offer-split {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 0 20px;
}
.offer-split-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 13px;
}
.offer-split-row + .offer-split-row { border-top: 1px solid var(--gray-100); }
.offer-split-k {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-600);
}

/* ---- Homepage offering: single footer band (replaces pills + banner) -- */
.offer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 28px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 24px 28px;
    margin: 40px auto 0;
    max-width: 1360px;
}
.offer-foot p {
    flex: 1 1 440px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--gray-700);
}
.offer-foot p strong { color: var(--gray-900); font-weight: 700; }
.offer-foot .btn-primary-large { flex-shrink: 0; white-space: nowrap; }

/* ---- work-with-us: engine bar above the matrix ------------------------ */
.engine-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--color-teal);
    border-radius: 12px;
    padding: 16px 22px;
    max-width: 1160px;
    margin: 0 auto 22px;
}
.engine-bar p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-700); }
.engine-bar strong { color: var(--gray-900); font-weight: 700; }

/* ---- work-with-us: who-does-what matrix (light, never dark) ----------- */
.matrix-wrap {
    max-width: 1160px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}
.matrix {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}
.matrix th,
.matrix td {
    text-align: left;
    vertical-align: top;
    padding: 15px 20px;
    border-bottom: 1px solid var(--gray-100);
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td { border-bottom: none; }

.matrix thead th {
    position: relative;
    vertical-align: bottom;
    border-bottom: 1px solid var(--gray-200);
}
.mx-corner { width: 24%; }
.mx-corner-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-400);
}
.mx-col::before {
    content: "";
    position: absolute;
    left: 20px; right: 20px; top: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mxc, var(--color-blue));
}
.mx-col--api    { --mxc: var(--color-teal); }
.mx-col--apps   { --mxc: var(--color-indigo); }
.mx-col--custom { --mxc: var(--color-navy); }
.mx-col-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--gray-900);
}
.mx-col-desc {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gray-500);
}

.matrix tbody th[scope="row"] {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--gray-900);
}
.mx-grouprow th.mx-group {
    background: var(--gray-50);
    padding: 9px 20px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}
.mx-subrow th,
.mx-subrow td { background: var(--gray-50); }
.mx-subrow th[scope="row"] { font-weight: 500; }
.mx-with { margin-right: 2px; font-size: 12px; font-weight: 500; color: var(--gray-500); }
.mx-q {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gray-500);
}
.svc-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-600) 12%, #fff);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-600);
    text-decoration: none;
    white-space: nowrap;
}
.svc-pill:hover { background: color-mix(in srgb, var(--primary-600) 20%, #fff); }
.svc-pill:focus-visible,
.matrix a:focus-visible,
.matrix-caption a:focus-visible,
.offer-split a:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- work-with-us: assurance strip ------------------------------------ */
.assure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1160px;
    margin: 28px auto 0;
}
.assure-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 22px 24px;
}
.assure-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--gray-900);
}
.assure-card h3 svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-blue); }
.assure-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gray-600); }

/* ---- work-with-us: three-product responsibility matrix --------------- */
.matrix--cols { table-layout: fixed; min-width: 900px; }
.matrix--cols .mx-c-label { width: 25%; }
.matrix--cols .mx-c-data  { width: 25%; }    /* three equal product columns */
.matrix--cols th,
.matrix--cols td { padding: 16px 22px; }
/* equal-height rows, content vertically centred */
.matrix--cols tbody th,
.matrix--cols tbody td { height: 96px; vertical-align: middle; }
.matrix--cols .mx-col-name { font-size: 18px; }
.matrix--cols .mx-col-desc { font-size: 13px; }
/* row header: icon + name + one-line explainer */
.matrix--cols tbody th[scope="row"] { font-weight: 400; }
.mx-row { display: flex; align-items: center; gap: 12px; }
.mx-row-ic { flex: 0 0 auto; width: 24px; height: 24px; color: color-mix(in srgb, var(--color-blue) 45%, var(--gray-400)); }
.mx-row-txt { display: flex; flex-direction: column; }
.mx-row-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gray-900); }
.mx-row-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--gray-500); }
/* each data cell: capability chip on the left, plain-English detail on the right */
.matrix--cols .mx-cell { display: flex; align-items: center; gap: 12px; }
.matrix--cols .mx-cell .chip { flex: 0 0 auto; min-width: 76px; justify-content: center; font-size: 12.5px; }
.matrix--cols .mx-cell .mx-q { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--gray-600); }

/* ---- work-with-us: service cards under the matrix -------------------- */
.cross-head {
    max-width: 1160px;
    margin: 44px auto 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-500);
}
.cross-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1160px;
    margin: 16px auto 0;
}
.cross-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 24px 26px;
}
.cross-card h4 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 4px;
}
.cross-card > p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0 0 16px;
}
/* two columns at the foot of each card: Standard vs with the service */
.svc-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.svc-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
}
.svc-col--on { background: color-mix(in srgb, var(--color-teal) 7%, #fff); }
.svc-col-h {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-500);
    white-space: nowrap;   /* keep "With" and the service pill on one line */
}
.svc-col-h .svc-pill { text-transform: none; letter-spacing: 0; }
.svc-col .chip { align-self: flex-start; }
.svc-col-d { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
@media (max-width: 980px) { .cross-grid { grid-template-columns: 1fr; } }

/* ---- work-with-us: caption tying the two entry offers to Prove -------- */
.entry-caption {
    max-width: 1160px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--gray-500);
}

/* ---- services.html: one orienting line per service section ------------ */
.svc-orient {
    max-width: 760px;
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 3px solid color-mix(in srgb, var(--color-teal) 55%, #fff);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gray-600);
}
.svc-orient a { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.svc-orient a:hover { text-decoration: underline; }

@media (max-width: 820px) {
    .solutions-grid-modern--offer { grid-template-columns: 1fr; }
    .assure-grid { grid-template-columns: 1fr; }
    .cross-grid { grid-template-columns: 1fr; }
}