@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    --ink: #0a1020;
    --muted: #617086;
    --line: #dfe7f1;
    --surface: #f5f8fc;
    --white: #fff;
    --navy: #030817;
    --navy-2: #071226;
    --blue: #278cf5;
    --cyan: #13d6cc;
    --teal: #00bda7;
    --danger: #e26370;
    --shadow: 0 20px 60px rgba(15, 35, 68, .09);
    --shadow-sm: 0 10px 30px rgba(15, 35, 68, .06);
    --radius: 16px;
    --container: 1220px;
    --header-height: 78px;
    --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Manrope', var(--font-body);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: clip;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.nav-open {
    overflow: hidden;
}

img, svg, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button, a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
    cursor: pointer;
}

h1, h2, h3, h4, p {
    margin-top: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -.03em;
}

h1 {
    font-size: clamp(2.1rem, 5vw, 3.8rem);
}

h2 {
    margin-bottom: 16px;
    font-size: clamp(1.65rem, 3.4vw, 2.65rem);
}

h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
}

p {
    color: var(--muted);
}

.container {
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
    margin-inline: auto;
}

.hero-grid > *,
.two-column > *,
.page-hero-grid > *,
.product-explainer > *,
.stack-grid > *,
.solution-lists > *,
.contact-grid > * {
    min-width: 0;
}

/* Screen-fitting Section Sizing */
.section {
    position: relative;
    padding: clamp(48px, 6.5vh, 88px) 0;
    overflow: hidden;
}

.dark-section {
    background: var(--navy);
    color: var(--white);
}

.dark-section p {
    color: #aab8cc;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    transition: top .2s;
    font-weight: 600;
    box-shadow: var(--shadow);
}

.skip-link:focus {
    top: 16px;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-height);
    color: var(--ink);
    border-bottom: 1px solid rgba(17, 43, 72, .08);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background .25s, box-shadow .25s, border-color .25s;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 30px rgba(14, 39, 70, .08);
    border-color: rgba(17, 43, 72, .12);
}

.nav-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.brand-image {
    line-height: 0;
}

.brand-logo {
    width: clamp(140px, 18vw, 190px);
    height: auto;
    max-height: 52px;
    object-fit: contain;
    object-position: left center;
}

.footer-logo {
    width: 175px;
    height: auto;
    max-height: 52px;
    filter: brightness(0) invert(1);
    opacity: .92;
}

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

.primary-nav-links {
    display: flex;
    align-items: center;
    gap: 26px;
}

.primary-nav a {
    position: relative;
    color: #4b5d73;
    font-size: .9rem;
    font-weight: 600;
    transition: color .2s;
    white-space: nowrap;
}

.primary-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan);
    transition: right .2s ease;
}

.primary-nav a:hover,
.primary-nav a.is-active {
    color: #0878ca;
}

.primary-nav a:hover::after,
.primary-nav a.is-active::after {
    right: 0;
}

/* Nav Item Dropdown */
.nav-item-dropdown {
    position: relative;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.nav-item-dropdown:hover .dropdown-arrow,
.nav-item-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(17, 43, 72, .12);
    box-shadow: 0 16px 40px rgba(14, 39, 70, .14);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 105;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.nav-item-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(2px);
}

.dropdown-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    color: #3f5168;
    font-size: .86rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.dropdown-menu a::after {
    display: none !important;
}

.dropdown-menu a:hover,
.dropdown-menu a.is-active {
    background: #edf6fd;
    color: #0878ca;
}

.mobile-nav-cta {
    display: none;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(17, 43, 72, .12);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    transition: background .2s, border-color .2s;
}

.nav-toggle .icon {
    width: 24px;
    height: 24px;
}

.nav-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.nav-toggle-close {
    display: none;
}

.nav-toggle.is-active .nav-toggle-open {
    display: none;
}

.nav-toggle.is-active .nav-toggle-close {
    display: block;
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(3, 8, 23, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.nav-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Buttons & Links
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #177ef1, #3197ff);
    box-shadow: 0 10px 24px rgba(39, 140, 245, .25);
    font-weight: 700;
    font-size: .92rem;
    transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
    white-space: nowrap;
    text-align: center;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(39, 140, 245, .32);
}

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

.button .icon {
    width: 17px;
    height: 17px;
}

.button-small {
    min-height: 40px;
    padding-inline: 16px;
    font-size: .84rem;
}

.button-ghost {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: none;
}

.button-ghost:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

.button-light {
    color: #0b4d8f;
    background: #fff;
    box-shadow: 0 12px 28px rgba(3, 42, 82, .15);
}

.button-light:hover {
    box-shadow: 0 16px 32px rgba(3, 42, 82, .22);
}

.button-outline-light {
    border-color: rgba(255, 255, 255, .55);
    background: transparent;
    box-shadow: none;
}

.button-outline-light:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #167ee9;
    font-weight: 700;
    font-size: .92rem;
}

.text-link .icon {
    transition: transform .2s;
}

.text-link:hover .icon {
    transform: translateX(4px);
}

/* ==========================================================================
   Hero Section - Screen Fitting Desktop & Responsive Mobile
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--header-height) + clamp(16px, 3vh, 36px));
    padding-bottom: clamp(16px, 2.5vh, 28px);
    overflow: hidden;
}

.grid-glow {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 133, 188, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 133, 188, .07) 1px, transparent 1px),
        radial-gradient(circle at 10% 47%, rgba(12, 91, 205, .28), transparent 32%),
        radial-gradient(circle at 85% 56%, rgba(0, 198, 183, .25), transparent 30%);
    background-size: 50px 50px, 50px 50px, auto, auto;
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    pointer-events: none;
}

.hero::before {
    content: '';
    position: absolute;
    width: min(720px, 90vw);
    height: min(720px, 90vw);
    top: 10%;
    right: -180px;
    border: 1px solid rgba(19, 214, 204, .09);
    border-radius: 50%;
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(28px, 4.5vw, 68px);
    flex: 1;
}

.hero-copy h1 {
    margin: 18px 0 16px;
    color: #f8fbff;
}

.hero-copy h1 span {
    background: linear-gradient(90deg, var(--cyan), #32a6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    max-width: 640px;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.55;
}

.eyebrow {
    margin-bottom: 12px;
    color: #2088ee;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dark-section .eyebrow {
    color: #3fa7ff;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 13px;
    border: 1px solid rgba(48, 147, 247, .28);
    border-radius: 999px;
    color: #81bfff !important;
    background: rgba(26, 107, 201, .14);
    font-size: .73rem;
    letter-spacing: .02em;
    text-transform: none;
}

.pill .icon {
    color: var(--cyan);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.hero-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2.5vw, 24px);
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: #afbdd0;
    font-size: .84rem;
}

.hero-assurances li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-assurances .icon {
    color: var(--cyan);
}

/* Clock Dashboard Visual */
.clock-stage {
    position: relative;
    width: 100%;
    min-height: 380px;
    display: grid;
    place-items: center;
    perspective: 1000px;
}

.clock-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 460px);
    padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 34px) clamp(20px, 3.5vw, 28px);
    border: 1px solid rgba(91, 140, 195, .25);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(12, 27, 51, .94), rgba(6, 19, 37, .88));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05);
    transform: rotateY(-4deg) rotateX(2deg);
    transition: transform .3s ease;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    color: #8191a8;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cyan);
}

.live-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(19, 214, 204, .12), 0 0 14px var(--cyan);
}

.clock-panel time {
    display: block;
    color: #fff;
    font: 700 clamp(1.8rem, 3.4vw, 2.7rem) var(--font-display);
    letter-spacing: -.05em;
    line-height: 1.1;
}

.clock-panel > p {
    margin: 2px 0 0;
    font-size: .8rem;
    color: #8fa0b5;
}

.panel-rule {
    height: 1px;
    margin: 18px 0 14px;
    background: rgba(255, 255, 255, .12);
}

.clock-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clock-panel li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: #9eacc1;
    font-size: .86rem;
}

.clock-panel li strong {
    color: var(--cyan);
    font-weight: 600;
}

.floating-stat {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 3px;
    min-width: 110px;
    padding: 12px 16px;
    border: 1px solid rgba(19, 214, 204, .25);
    border-radius: 12px;
    background: rgba(6, 24, 42, .92);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.floating-stat span {
    color: #7d90aa;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.floating-stat strong {
    color: var(--cyan);
    font: 700 1.25rem var(--font-display);
}

.stat-one {
    right: 0;
    top: 40px;
}

.stat-two {
    left: 0;
    bottom: 30px;
}

.stat-two strong {
    color: #65a9ff;
    font-size: 1rem;
}

.orbit {
    position: absolute;
    border: 1px solid rgba(42, 128, 221, .12);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: min(420px, 85vw);
    height: min(420px, 85vw);
}

.orbit-two {
    width: min(540px, 92vw);
    height: min(540px, 92vw);
}

/* Trust Strip */
.trust-strip {
    position: relative;
    z-index: 2;
    margin-top: clamp(18px, 3vh, 36px);
    padding: clamp(14px, 2vh, 22px) 0 clamp(6px, 1.2vh, 14px);
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.trust-strip p {
    margin-bottom: 14px;
    text-align: center;
    color: #64758e;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.trust-names {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: center;
    color: #8290a3;
    font: 700 .92rem var(--font-display);
    text-align: center;
}

/* ==========================================================================
   Page Hero (Secondary Pages)
   ========================================================================== */

.page-hero {
    position: relative;
    min-height: min(460px, 55vh);
    min-height: min(460px, 55dvh);
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + clamp(24px, 5vh, 48px)) 0 clamp(28px, 5vh, 48px);
    overflow: hidden;
}

.page-hero h1 {
    max-width: 820px;
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.page-hero p:not(.eyebrow) {
    max-width: 680px;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.page-hero > .container {
    position: relative;
    z-index: 1;
    width: min(calc(100% - clamp(24px, 4vw, 48px)), var(--container));
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
}

.narrow-hero {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}

.narrow-hero h1,
.narrow-hero p {
    margin-inline: auto;
}

.narrow-hero .hero-actions {
    justify-content: center;
}

/* ==========================================================================
   Product Subnav Banner & Tabs (Overview, Instant Time Travel, Automation)
   ========================================================================== */

.product-subnav-banner {
    position: relative;
    background: linear-gradient(180deg, #030a1b 0%, #06173a 100%);
    border-bottom: 1px solid rgba(19, 214, 204, .2);
    padding-top: calc(var(--header-height) + clamp(20px, 3vh, 36px));
    overflow: hidden;
}

.product-subnav-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 133, 188, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 133, 188, .07) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(39, 140, 245, .28), transparent 55%);
    background-size: 44px 44px, 44px 44px, auto;
    pointer-events: none;
}

.product-subnav-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.product-subnav-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(39, 140, 245, .15);
    border: 1px solid rgba(39, 140, 245, .32);
    color: #8ec3ff;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.product-subnav-badge .icon {
    color: var(--cyan);
}

.product-subnav-title {
    margin: 0 0 10px;
    color: #fff;
    font: 800 clamp(2.4rem, 5.2vw, 4rem) var(--font-display);
    letter-spacing: -.035em;
    line-height: 1.1;
}

.product-subnav-title sup {
    font-size: .45em;
    top: -.7em;
    color: var(--cyan);
    font-weight: 700;
}

.product-subnav-lead {
    max-width: 680px;
    margin: 0 auto;
    color: #a3b5ce;
    font-size: clamp(.96rem, 1.4vw, 1.1rem);
    line-height: 1.55;
}

.product-tabs-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: clamp(22px, 3.5vh, 40px);
    padding-inline: 16px;
}

.product-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 0;
    border-radius: 14px 14px 0 0;
    background: rgba(8, 24, 52, .92);
    border: 1px solid rgba(91, 140, 195, .28);
    border-bottom: 0;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.product-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 10px 10px 0 0;
    color: #8fa1b8;
    font: 700 .94rem var(--font-display);
    transition: all .2s ease;
    white-space: nowrap;
    position: relative;
    border-bottom: 3px solid transparent;
}

.product-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.product-tab.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(39, 140, 245, .24), rgba(19, 214, 204, .1));
    border-bottom-color: var(--cyan);
}

.product-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
}

.product-tab-panel {
    display: none;
    animation: fadeInTab .3s ease forwards;
}

.product-tab-panel.is-active {
    display: block;
}

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

/* Product Orbit Visual */
.product-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 380px;
    width: 100%;
}

.product-orbit {
    position: absolute;
    width: min(320px, 80vw);
    height: min(320px, 80vw);
    border: 1px solid rgba(45, 150, 242, .25);
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(16, 148, 223, .12);
}

.product-orbit::before {
    content: '';
    position: absolute;
    inset: 40px;
    border: 1px solid rgba(19, 214, 204, .18);
    border-radius: inherit;
}

.product-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(160px, 45vw);
    height: min(160px, 45vw);
    border: 1px solid rgba(75, 170, 247, .35);
    border-radius: 50%;
    background: linear-gradient(145deg, #0b3152, #07192f);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
    text-align: center;
    padding: 12px;
}

.product-core .icon {
    width: 32px;
    height: 32px;
    color: var(--cyan);
}

.product-core strong {
    color: #fff;
    font: 700 .95rem var(--font-display);
    margin-top: 4px;
}

.product-core span {
    max-width: 110px;
    color: #7fa0bb;
    font-size: .64rem;
    line-height: 1.35;
}

.product-node {
    position: absolute;
    z-index: 3;
    padding: 8px 13px;
    border: 1px solid rgba(91, 151, 207, .25);
    border-radius: 8px;
    color: #aad1ef;
    background: rgba(7, 27, 50, .94);
    font-size: .74rem;
    font-weight: 600;
}

.node-a { top: 20px; }
.node-b { right: 8px; }
.node-c { bottom: 20px; }
.node-d { left: 8px; }

/* ==========================================================================
   Section Layouts & Grids (All Screens)
   ========================================================================== */

.section-heading {
    max-width: 740px;
    margin-bottom: clamp(24px, 4vh, 44px);
}

.section-heading > p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 0;
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

.section-heading.centered {
    margin-inline: auto;
    text-align: center;
}

.section-heading.centered > p {
    margin-inline: auto;
}

/* Two-column layout */
.two-column {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}

.section-intro {
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.section-intro h2 {
    max-width: 540px;
}

.section-intro > p:not(.eyebrow) {
    max-width: 560px;
    font-size: clamp(1rem, 1.3vw, 1.06rem);
}

.section-intro .text-link {
    margin-top: 14px;
}

.principles {
    border-top: 1px solid var(--line);
}

.principle {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    padding: clamp(20px, 3vh, 30px) 0;
    border-bottom: 1px solid var(--line);
}

.principle > span {
    color: #2f91ef;
    font: 700 .78rem var(--font-display);
}

.principle h3 {
    margin: 0 0 8px;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.principle p {
    margin: 0;
    font-size: .92rem;
}

/* ==========================================================================
   HOME VIDEO & OVERVIEW SECTION
   ========================================================================== */
.home-video-section {
    position: relative;
    padding: clamp(56px, 7.5vh, 92px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.home-video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
    gap: clamp(36px, 5.5vw, 68px);
    align-items: center;
}

.home-video-copy .eyebrow {
    margin-bottom: 12px;
}

.home-video-copy h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 20px;
    letter-spacing: -0.025em;
}

.home-video-lead {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 26px;
}

.home-video-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.video-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.video-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
}

.video-highlights .icon {
    color: var(--teal);
    flex-shrink: 0;
}

/* Video Frame Wrapper */
.home-video-frame-wrap {
    position: relative;
    border-radius: 20px;
    background: #ffffff;
    padding: 10px;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(15, 35, 68, 0.12);
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #050a18;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 8px;
}

.caption-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.caption-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(39, 140, 245, 0.12);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.video-caption strong {
    font-size: 0.92rem;
    color: var(--navy);
    display: block;
    line-height: 1.2;
}

.video-caption small {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 2px;
}

.video-yt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.video-yt-link:hover {
    background: #e2e8f0;
    color: #0f172a;
    gap: 8px;
}

.video-yt-link .icon {
    width: 0.9em;
    height: 0.9em;
    color: #e11d48;
}

@media (max-width: 980px) {
    .home-video-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ==========================================================================
   HOME CORE PILLARS VISUAL SHOWCASE
   ========================================================================== */
.home-pillars-section {
    position: relative;
    padding: clamp(52px, 7vh, 88px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.home-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(18px, 2.4vw, 36px);
    align-items: start;
}

/* Fallback: Triangle sequence if only 3 pillars exist */
.home-pillars-grid.has-3-pillars,
.home-pillars-grid:has(> .home-pillar-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4.5vw, 56px);
}

.home-pillar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 12px;
    transition: transform 0.25s ease;
}

.home-pillar-card:hover {
    transform: translateY(-4px);
}

.pillar-image-wrap {
    width: 100%;
    max-width: 250px;
    height: 210px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pillar-image-wrap img {
    max-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.home-pillar-card:hover .pillar-image-wrap img {
    transform: scale(1.05);
}

.home-pillar-card h3 {
    font-size: clamp(1.1rem, 1.2vw, 1.22rem);
    font-weight: 700;
    color: #003366;
    margin: 0 0 10px;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.home-pillar-card p {
    font-size: 0.92rem;
    line-height: 1.62;
    color: #475569;
    margin: 0;
    max-width: 320px;
}

@media (max-width: 1080px) and (min-width: 681px) {
    .home-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 28px;
        max-width: 760px;
        margin: 0 auto;
    }

    /* In a 3-pillar setup on tablet, card 3 centers into a triangle */
    .home-pillars-grid.has-3-pillars > .home-pillar-card:nth-child(3),
    .home-pillars-grid:has(> .home-pillar-card:nth-child(3):last-child) > .home-pillar-card:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 360px;
    }
}

@media (max-width: 680px) {
    .home-pillars-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 440px;
        margin: 0 auto;
    }

    .pillar-image-wrap {
        height: 180px;
        margin-bottom: 16px;
    }

    .pillar-image-wrap img {
        max-height: 170px;
    }
}

/* Product Cards */
.home-product-grid {
    display: grid;
    gap: 12px;
}

.home-product-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.home-product-card .icon-box {
    margin: 0;
}

.home-product-card h3 {
    margin: 2px 0 6px;
    font-size: 1.12rem;
}

.home-product-card p {
    margin: 0;
    font-size: .88rem;
}

.section-action {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 3.5vh, 36px);
}

/* Process & Step Grid */
.process {
    background: linear-gradient(180deg, #061126, #030917);
}

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

.step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    border: 1px solid rgba(111, 151, 199, .18);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(17, 37, 68, .76), rgba(7, 20, 39, .58));
    overflow: hidden;
}

.step-card::after {
    content: '';
    position: absolute;
    inset: auto -25% -55% 30%;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 202, 188, .15), transparent 66%);
    pointer-events: none;
}

.step-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.step-number {
    color: #61afff;
    font: 700 .72rem var(--font-display);
    letter-spacing: .12em;
}

.step-top .icon {
    width: 26px;
    height: 26px;
    color: var(--cyan);
}

.step-card h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.15rem;
}

.step-card p {
    margin: 0;
    font-size: .88rem;
}

/* Solutions Home Mini Grid */
.home-solutions {
    background: var(--surface);
}

.home-solutions-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.industry-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.industry-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

.industry-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(22, 48, 83, .07);
}

/* .industry-mini:last-child moved to half-row */

.industry-mini .icon-box {
    margin: 0;
}

.industry-mini strong {
    font: 700 .88rem var(--font-display);
    color: var(--ink);
}

/* Feature Grid (Product Capabilities) */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.feature-card {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3.5vw, 34px);
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background .2s;
}

.feature-card:nth-child(3n) {
    border-right: 0;
}

.feature-card:nth-child(3n+1):nth-last-child(-n+3),
.feature-card:nth-child(3n+1):nth-last-child(-n+3) ~ .feature-card {
    border-bottom: 0;
}

.feature-card:hover {
    background: #f8fbff;
}

.icon-box {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 11px;
    color: #1688ef;
    background: #e9f4ff;
    flex-shrink: 0;
}

.icon-box .icon {
    width: 22px;
    height: 22px;
}

.icon-box.small {
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 9px;
}

.icon-box.small .icon {
    width: 19px;
    height: 19px;
}

.feature-card h3 {
    margin-bottom: 10px;
    font-size: 1.18rem;
}

.feature-card p {
    margin: 0;
    color: #526379;
    font-size: .88rem;
    line-height: 1.65;
}

.dark-section .feature-card h3 {
    color: var(--ink);
}

.dark-section .feature-card p {
    color: #526379;
}

.feature-image-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 290px;
    margin: 0;
    padding: clamp(24px, 3vw, 36px);
    border-right: 0;
    border-bottom: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(39, 140, 245, .13), transparent 62%),
        linear-gradient(145deg, #f8fbff, #eef7ff);
    overflow: hidden;
}

.feature-image-card-wide {
    grid-column: span 2;
}

.feature-image-card > img {
    width: min(100%, 390px);
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(16, 54, 91, .13));
}

.feature-image-card figcaption {
    align-self: end;
    margin-top: 16px;
    color: #49637f;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.feature-logo-mosaic > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.feature-logo-mosaic > div > img {
    width: 100%;
    height: 70px;
    padding: 14px;
    border: 1px solid #dce9f5;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
}

/* Alternating product capability stories */
.capability-stories {
    background: #fff;
}

.capability-heading {
    padding-top: clamp(54px, 7vw, 90px);
    padding-bottom: clamp(28px, 4vw, 46px);
}

.capability-row {
    border-top: 1px solid #e2ebf4;
    background: #fff;
}

.capability-row:nth-of-type(even) {
    background: #eef8fc;
}

.capability-row-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: clamp(38px, 7vw, 100px);
    align-items: center;
    min-height: 390px;
    padding-top: clamp(50px, 6vw, 78px);
    padding-bottom: clamp(50px, 6vw, 78px);
}

.capability-row.is-reversed .capability-copy {
    order: 2;
}

.capability-row.is-reversed .capability-media {
    order: 1;
}

.capability-copy {
    max-width: 650px;
}

.capability-copy .icon-box {
    float: left;
    margin: 0 14px 8px 0;
}

.capability-copy .eyebrow {
    padding-top: 3px;
    margin-bottom: 7px;
}

.capability-copy h2 {
    clear: both;
    margin-bottom: 14px;
    color: #086eaf;
    font-size: clamp(1.55rem, 2.7vw, 2.35rem);
}

.capability-copy > p:last-child {
    margin: 0;
    color: #4f6177;
    font-size: clamp(.96rem, 1.2vw, 1.06rem);
    line-height: 1.75;
}

.capability-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 270px;
    margin: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(23, 126, 205, .14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 42%, rgba(67, 178, 224, .14), transparent 62%),
        rgba(255, 255, 255, .72);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 88% auto;
    box-shadow: 0 22px 50px rgba(26, 72, 112, .08);
    overflow: hidden;
}

.capability-media::after {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(22, 138, 219, .12);
    border-radius: 16px;
    pointer-events: none;
}


/* Product imagery and verified compatibility marks */
.product-explainer {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(34px, 5vw, 64px);
}

.product-explainer .section-heading {
    margin: 0;
}

.product-explainer-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 330px;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid rgba(88, 151, 211, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 35%, rgba(31, 137, 234, .17), transparent 58%),
        rgba(255, 255, 255, .035);
    overflow: hidden;
}

.product-explainer-visual::before {
    content: '';
    position: absolute;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(19, 214, 204, .16);
    border-radius: 50%;
}

.product-explainer-visual img {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    height: auto;
    filter: drop-shadow(0 22px 35px rgba(0, 0, 0, .28));
}

.visual-caption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    max-width: 250px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    color: #c5d3e5 !important;
    background: rgba(3, 13, 30, .86);
    font-size: .74rem;
    line-height: 1.45;
    backdrop-filter: blur(10px);
}

.compatibility-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 390px;
    padding: clamp(28px, 4vw, 50px);
    border: 1px solid rgba(88, 151, 211, .18);
    border-radius: 22px;
    background: radial-gradient(circle, rgba(30, 111, 184, .17), transparent 64%);
}

.compatibility-art img {
    width: min(100%, 520px);
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .24));
}

.platform-logo-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.platform-logo-strip div {
    display: grid;
    place-items: center;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}

.platform-logo-strip img {
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

/* Story Panel (Instant Time Travel) */
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 75px);
    align-items: center;
}

.story-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.story-panel > div {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}

.story-panel > div:last-child {
    border: 0;
}

.story-panel span {
    grid-row: 1 / 3;
    color: var(--cyan);
    font: 700 .72rem var(--font-display);
}

.story-panel h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 1.1rem;
}

.story-panel p {
    margin: 0;
    font-size: .86rem;
}

/* Automation Grid */
.automation-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
}

.tool-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #edf7ff, #f5fbfa);
}

.tool-cloud span {
    padding: 10px 16px;
    border: 1px solid #d6e7f2;
    border-radius: 8px;
    color: #365371;
    background: #fff;
    box-shadow: 0 6px 16px rgba(23, 61, 94, .05);
    font-size: .84rem;
    font-weight: 600;
}

.product-benefits {
    background: var(--surface);
}

/* Industry Detail Cards (Solutions page) */
.solutions-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(38px, 6vw, 86px);
    align-items: center;
}

.solutions-hero-grid > div > p:not(.eyebrow) {
    max-width: 700px;
    font-size: clamp(1rem, 1.6vw, 1.16rem);
}

.solutions-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 26px 0 0;
    padding: 0;
    color: #bdcadd;
    list-style: none;
    font-size: .82rem;
    font-weight: 600;
}

.solutions-hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.solutions-hero-proof .icon {
    color: var(--cyan);
}

.solutions-hero-visual {
    min-height: 390px;
    margin: 0;
    border: 1px solid rgba(95, 151, 207, .18);
    border-radius: 26px;
    background-color: rgba(255, 255, 255, .035);
    background-image: url('../images/capability-app-database.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 92% auto;
    box-shadow: 0 28px 65px rgba(0, 0, 0, .22);
}

.solution-path {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

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

.solution-path-grid a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding: 24px clamp(18px, 3vw, 34px);
    border-right: 1px solid var(--line);
    color: var(--ink);
    transition: background .2s;
}

.solution-path-grid a:last-child {
    border-right: 0;
}

.solution-path-grid a:hover {
    background: #f4f9ff;
}

.solution-path-grid span {
    grid-row: 1 / 3;
    color: #1688ef;
    font: 800 .75rem var(--font-display);
}

.solution-path-grid strong {
    font: 700 .94rem var(--font-display);
}

.solution-path-grid small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .74rem;
}

.industry-explorer {
    background: linear-gradient(180deg, #f8fbff, #fff);
}

.industry-switcher {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.industry-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #526379;
    background: #fff;
    font: 700 .79rem var(--font-body);
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.industry-switch:hover {
    color: #087bd8;
    border-color: #b6d9f5;
    transform: translateY(-1px);
}

.industry-switch.is-active {
    color: #fff;
    border-color: #1688ef;
    background: linear-gradient(135deg, #1688ef, #0aa4a2);
    box-shadow: 0 10px 24px rgba(22, 136, 239, .2);
}

.industry-switch .icon {
    width: 18px;
    height: 18px;
}

.industry-stage {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.industry-panel {
    display: none;
    grid-template-columns: 1.05fr .95fr;
    min-height: 460px;
}

.industry-panel.is-active {
    display: grid;
    animation: solutionPanelIn .35s ease both;
}

@keyframes solutionPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.industry-panel-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 64px);
}

.industry-panel-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.industry-panel-copy > p:not(.eyebrow) {
    max-width: 620px;
    font-size: 1rem;
}

.industry-panel-copy ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

.industry-panel-copy li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #425870;
    font-size: .82rem;
    font-weight: 600;
}

.industry-panel-copy li .icon {
    color: var(--teal);
}

.industry-panel-copy .text-link {
    margin-top: auto;
}

.industry-panel-visual {
    min-height: 100%;
    margin: 0;
    border-left: 1px solid var(--line);
    background-color: #eef7fd;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90% auto;
}

.scenario-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.scenario-tabs button {
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: #526379;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
}

.scenario-tabs button.is-active {
    color: #fff;
    border-color: #167fdc;
    background: #167fdc;
}

.scenario-panel {
    display: none;
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.scenario-panel.is-active {
    display: block;
    animation: solutionPanelIn .28s ease both;
}

.scenario-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.scenario-intro .icon-box {
    margin: 0;
}

.scenario-intro h3,
.scenario-intro p {
    margin: 0;
}

.scenario-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scenario-chip-grid li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #e2ebf4;
    border-radius: 9px;
    color: #486079;
    background: #f8fbff;
    font-size: .8rem;
    font-weight: 600;
}

.scenario-chip-grid .icon {
    color: var(--teal);
}

.application-marquee {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.application-marquee span {
    padding: 7px 10px;
    border: 1px solid rgba(104, 157, 207, .2);
    border-radius: 7px;
    color: #a8c8e7;
    background: rgba(255, 255, 255, .035);
    font-size: .72rem;
}

.industry-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.industry-detail {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.industry-detail:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 8px);
}

.industry-detail .icon-box {
    margin: 0;
}

.industry-detail h3 {
    margin: 2px 0 10px;
    font-size: 1.25rem;
}

.industry-detail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.industry-detail li {
    padding: 5px 10px;
    border-radius: 6px;
    color: #527087;
    background: #edf6fc;
    font-size: .74rem;
    font-weight: 500;
}

.solution-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 65px);
}

.scenarios {
    background: var(--surface);
}

.tag-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.tag-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #53657b;
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
}

.tag-list .icon {
    color: var(--teal);
}

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

.coverage-card {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3.5vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.coverage-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.coverage-card p {
    margin-bottom: auto;
    font-size: .88rem;
}

.coverage-card .text-link {
    margin-top: 14px;
    font-size: .84rem;
}

/* Stack / App Cloud */
.stack {
    background: linear-gradient(125deg, #04142a 0%, #020917 66%);
}

.stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 75px);
    align-items: center;
}

.stack-copy > p:not(.eyebrow) {
    max-width: 580px;
    font-size: 1rem;
}

.check-list {
    display: grid;
    gap: 11px;
    margin: 22px 0 28px;
    padding: 0;
    list-style: none;
    color: #c5d0df;
    font-size: .92rem;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.check-list .icon {
    color: var(--cyan);
}

.app-cloud {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 9px;
    min-height: 400px;
    padding: clamp(28px, 4vw, 50px);
    overflow: hidden;
}

.app-cloud::before,
.app-cloud::after {
    content: '';
    position: absolute;
    inset: 5%;
    border: 1px solid rgba(65, 155, 238, .14);
    border-radius: 50%;
    pointer-events: none;
}

.app-cloud::after {
    inset: 18%;
    border-color: rgba(19, 214, 204, .12);
}

.app-cloud span {
    position: relative;
    z-index: 1;
    padding: 8px 14px;
    border: 1px solid rgba(90, 149, 207, .21);
    border-radius: 8px;
    color: #bfccdd;
    background: rgba(9, 32, 58, .85);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    font-size: .78rem;
    font-weight: 500;
}

.app-cloud span:nth-child(3n) {
    color: #77c5ff;
    border-color: rgba(39, 140, 245, .34);
}

.app-cloud span:nth-child(4n) {
    color: #72e6dc;
    border-color: rgba(19, 214, 204, .3);
}

/* Customer Logos & Stories */
.customers {
    background: linear-gradient(180deg, #071328, #030816);
}

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

.customer-logo {
    display: grid;
    place-items: center;
    height: 110px;
    padding: 20px;
    border: 1px solid rgba(111, 151, 199, .15);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    transition: background .2s, border-color .2s;
}

.customer-logo img {
    max-width: 140px;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .75;
    transition: filter .2s, opacity .2s;
}

.customer-logo:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(111, 151, 199, .3);
}

.customer-logo:hover img {
    filter: none;
    opacity: 1;
}

.story-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.success-card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.success-logo {
    height: 52px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.success-logo img {
    max-width: 110px;
    max-height: 48px;
    object-fit: contain;
}

.success-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #087bd8;
    background: #e9f4ff;
    font: 800 1.1rem var(--font-display);
}

.success-card .case-industry {
    color: #2387e5;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.success-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.success-card > p:not(.case-industry) {
    margin-bottom: auto;
    font-size: .88rem;
    padding-bottom: 16px;
}

.success-card .text-link {
    font-size: .82rem;
    margin-top: auto;
}

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

.testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: clamp(24px, 3.5vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.testimonial > span {
    position: absolute;
    right: 22px;
    top: 10px;
    color: #d3e9fb;
    font: 800 4.5rem/1 var(--font-display);
    pointer-events: none;
}

.testimonial p {
    position: relative;
    z-index: 1;
    color: #43546b;
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
}

.testimonial footer {
    margin-top: 20px;
    color: #137fdb;
    font-weight: 700;
    font-size: .88rem;
}

/* Customers — editorial case study experience */
.customer-hero {
    overflow: hidden;
    padding-block: clamp(84px, 9vw, 132px) clamp(68px, 8vw, 110px);
}

.customer-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
}

.customer-hero-grid > *,
.customer-heading-row > *,
.customer-case-grid > * {
    min-width: 0;
}

.customer-hero-copy h1 {
    max-width: 780px;
    margin-bottom: 22px;
    font-size: clamp(2.8rem, 5vw, 5.35rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.customer-hero-copy > p:not(.eyebrow) {
    max-width: 680px;
    font-size: clamp(1rem, 1.3vw, 1.16rem);
}

.customer-proof-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 38px;
    overflow: hidden;
    border: 1px solid rgba(126, 169, 219, .17);
    border-radius: 14px;
    background: rgba(126, 169, 219, .17);
}

.customer-proof-row span {
    min-height: 82px;
    padding: 17px 18px;
    color: #91a6c2;
    background: rgba(5, 17, 35, .84);
    font-size: .7rem;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.customer-proof-row strong {
    display: block;
    margin-bottom: 4px;
    color: #f7fbff;
    font: 700 .94rem var(--font-display);
    letter-spacing: -.01em;
    text-transform: none;
}

.customer-hero-visual {
    position: relative;
    min-height: 520px;
    isolation: isolate;
}

.customer-hero-visual::before {
    content: '';
    position: absolute;
    inset: 8% 7%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 142, 235, .23), transparent 68%);
    filter: blur(18px);
}

.customer-orbit {
    position: absolute;
    inset: 13%;
    border: 1px solid rgba(111, 184, 238, .22);
    border-radius: 50%;
    transform: rotate(-12deg);
}

.customer-orbit::before,
.customer-orbit::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(111, 184, 238, .13);
    border-radius: inherit;
}

.customer-orbit::before { inset: 13%; }
.customer-orbit::after { inset: -17%; }

.hero-visual-core {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    width: 190px;
    aspect-ratio: 1;
    padding: 28px;
    border: 1px solid rgba(123, 207, 255, .31);
    border-radius: 50%;
    background: linear-gradient(145deg, #0b5fa2, #07213d 72%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .14);
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-visual-core > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: rgba(38, 160, 248, .23);
}

.hero-visual-core .icon { width: 23px; height: 23px; }
.hero-visual-core strong { color: #fff; font: 700 1.22rem var(--font-display); }
.hero-visual-core small { color: #9db4cf; font-size: .68rem; line-height: 1.4; }

.hero-logo-card {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 170px;
    height: 105px;
    padding: 22px;
    border: 1px solid rgba(120, 169, 220, .21);
    border-radius: 17px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .27);
    animation: customer-float 7s ease-in-out infinite;
}

.hero-logo-card img { max-width: 125px; max-height: 56px; object-fit: contain; }
.logo-card-nationwide { top: 5%; left: 5%; }
.logo-card-gazprom { top: 8%; right: 0; animation-delay: -1.5s; }
.logo-card-wipro { bottom: 5%; left: 1%; animation-delay: -3s; }
.logo-card-ericsson { right: 5%; bottom: 1%; animation-delay: -4.5s; }

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

.customer-stories-section { background: #f5f8fc; }

.customer-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
    align-items: end;
    gap: 36px;
    max-width: none;
}

.customer-heading-row > p { margin-bottom: 6px; }

.customer-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin: 42px 0 28px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(13, 42, 76, .06);
}

.customer-filter-list { display: flex; flex-wrap: wrap; gap: 7px; }

.customer-filter {
    min-height: 40px;
    padding: 9px 15px;
    border: 0;
    border-radius: 9px;
    color: #53667e;
    background: transparent;
    font: 700 .76rem var(--font-body);
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s;
}

.customer-filter:hover { color: #0878d2; background: #eef7ff; }
.customer-filter.is-active { color: #fff; background: #087bd8; box-shadow: 0 8px 18px rgba(8, 123, 216, .22); }

.customer-result-count { flex: 0 0 auto; margin: 0; color: #7a899d; font-size: .72rem; }
.customer-result-count strong { color: #0b2d4d; font-size: .9rem; }

.customer-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.customer-case-card {
    display: grid;
    grid-template-columns: minmax(200px, .78fr) minmax(0, 1.22fr);
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 46, 80, .07);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.customer-case-card:hover {
    transform: translateY(-4px);
    border-color: #bbd9f3;
    box-shadow: 0 25px 55px rgba(16, 62, 104, .12);
}

.customer-case-card[hidden] { display: none !important; }
.customer-case-card.is-featured { min-height: 430px; }

.customer-case-image {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #06152a;
}

.customer-case-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .68;
    filter: saturate(.85) contrast(1.08);
    transition: transform .45s, opacity .3s;
}

.customer-case-card:hover .customer-case-image > img { transform: scale(1.035); opacity: .78; }

.customer-case-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 12, 27, .08), rgba(2, 12, 27, .76));
}

.customer-case-brand {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 22px;
    display: grid;
    place-items: center;
    min-width: 126px;
    min-height: 64px;
    max-width: calc(100% - 40px);
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.customer-case-brand img { max-width: 105px; max-height: 43px; object-fit: contain; }
.customer-case-brand span { color: #0a3158; font: 750 .94rem var(--font-display); text-align: center; }

.customer-case-number {
    position: absolute;
    z-index: 2;
    top: 17px;
    right: 17px;
    color: rgba(255, 255, 255, .72);
    font: 700 .68rem var(--font-display);
    letter-spacing: .12em;
}

.customer-case-body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
.case-meta span { padding: 6px 9px; border-radius: 6px; color: #1a76bb; background: #edf7ff; font-size: .63rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.case-meta span + span { color: #69798e; background: #f1f4f7; }
.customer-case-body h3 { margin-bottom: 12px; font-size: clamp(1.16rem, 1.5vw, 1.45rem); line-height: 1.2; }
.customer-case-body > p { margin-bottom: 18px; color: #5a6a7e; font-size: .84rem; line-height: 1.65; }

.case-outcome {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: auto 0 21px;
    padding-top: 15px;
    border-top: 1px solid #e8eef5;
    color: #173f62;
    font-size: .74rem;
    font-weight: 750;
}

.case-outcome > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #087bd8; background: #e6f3ff; }
.case-outcome .icon { width: 13px; height: 13px; }
.customer-case-body .text-link { font-size: .76rem; }

.customer-empty { padding: 35px; border: 1px dashed #b8c8da; border-radius: 14px; text-align: center; color: #627287; background: #fff; }

.customer-logo-section { position: relative; overflow: hidden; }
.customer-logo-section::before { content: ''; position: absolute; width: 520px; height: 520px; top: -280px; left: 50%; border-radius: 50%; background: rgba(20, 133, 217, .14); filter: blur(70px); transform: translateX(-50%); }

.customer-logo-wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(127, 167, 212, .16);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(125, 164, 209, .12);
    gap: 1px;
}

.customer-logo-tile {
    display: grid;
    place-items: center;
    min-height: 140px;
    padding: 28px;
    background: #08162b;
    position: relative;
    transition: background .25s ease, box-shadow .25s ease;
}

.customer-logo-tile:hover {
    background: #0c2242;
    box-shadow: inset 0 0 0 1px rgba(110, 190, 255, .32), 0 8px 24px rgba(0, 0, 0, .35);
}
.customer-logo-tile img {
    max-width: 145px;
    max-height: 66px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .75;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.customer-logo-tile:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(131, 217, 255, .5));
    opacity: 1;
    transform: scale(1.06);
}
.wordmark { color: #dce8f6; font: 750 1.2rem var(--font-display); letter-spacing: -.025em; text-align: center; }
.laser-mark { font-size: 1.6rem; font-weight: 650; }
.laser-mark small { color: #fe5361; font-size: .52em; }
.capfin-mark { color: #64b2ed; font-size: 1.55rem; letter-spacing: .04em; }
.government-mark, .education-mark { font-size: 1rem; letter-spacing: .02em; }
.logo-wall-note { position: relative; margin: 20px auto 0; color: #7185a0 !important; text-align: center; font-size: .69rem; }

.customer-voices { overflow: hidden; }
.testimonial-topline { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.testimonial-topline .section-heading { margin-bottom: 0; }
.testimonial-controls { display: flex; align-items: center; gap: 13px; padding-bottom: 7px; color: #738399; font-size: .74rem; }
.testimonial-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: #087bd8; background: #fff; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.testimonial-controls button:hover { color: #fff; background: #087bd8; transform: translateY(-2px); }
.testimonial-controls button:first-child .icon { transform: rotate(180deg); }
.testimonial-controls .icon { width: 16px; height: 16px; }
.testimonial-controls strong { color: #143a5d; }

.testimonial-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    min-height: 330px;
    margin-top: 38px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg, #f7fbff, #eef6fd);
    box-shadow: 0 24px 55px rgba(13, 51, 88, .08);
}

.testimonial-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    margin: 0;
    padding: clamp(38px, 6vw, 76px);
}

.testimonial-slide[hidden] { display: none; }
.testimonial-quote { position: absolute; top: 22px; right: 36px; color: #cde8fa; font: 800 7rem/1 var(--font-display); }
.testimonial-slide > p { position: relative; z-index: 1; max-width: 890px; margin: 0; color: #173957; font: 500 clamp(1.25rem, 2.25vw, 2rem)/1.45 var(--font-display); letter-spacing: -.025em; }
.testimonial-slide footer { display: flex; flex-direction: column; gap: 4px; margin-top: 34px; }
.testimonial-slide footer span { color: #087bd8; font-weight: 800; }
.testimonial-slide footer small { color: #78899e; font-size: .7rem; }

.testimonial-side-note { display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; color: #fff; background: linear-gradient(160deg, #0d88df, #064b8f); }
.testimonial-side-note > span { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: auto; border-radius: 13px; background: rgba(255, 255, 255, .14); }
.testimonial-side-note .icon { width: 21px; height: 21px; }
.testimonial-side-note strong { margin-bottom: 5px; font: 700 1.06rem var(--font-display); }
.testimonial-side-note p { margin: 0; color: #c8e7ff; font-size: .76rem; }

@media (prefers-reduced-motion: reduce) {
    .hero-logo-card { animation: none; }
}

/* ========================================================================== 
   Resources, FAQ and Contact — 2026 experience refresh
   ========================================================================== */

/* Resources */
.resource-hero { padding-block: clamp(82px, 9vw, 128px) clamp(68px, 8vw, 108px); }
.resource-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .88fr); align-items: center; gap: clamp(48px, 7vw, 100px); }
.resource-hero-copy h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.resource-hero-copy > p:not(.eyebrow) { max-width: 650px; font-size: clamp(1rem, 1.25vw, 1.16rem); }
.resource-hero-visual { position: relative; min-height: 460px; }
.resource-hero-visual::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(13, 135, 223, .25), transparent 67%); filter: blur(20px); }
.knowledge-card { position: absolute; z-index: 2; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 13px; width: 190px; min-height: 94px; padding: 17px; border: 1px solid rgba(125, 178, 224, .22); border-radius: 15px; background: rgba(8, 28, 51, .92); box-shadow: 0 20px 45px rgba(0, 0, 0, .25); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.knowledge-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); border-color: rgba(81, 190, 255, .5); }
.knowledge-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; color: #58c7ff; background: rgba(27, 151, 230, .16); }
.knowledge-card .icon { width: 20px; height: 20px; }
.knowledge-card strong { color: #fff; font: 700 .88rem var(--font-display); }
.knowledge-card small { color: #8299b3; font-size: .65rem; }
.knowledge-card.card-tl,
.knowledge-card:nth-of-type(1) { top: 0; left: 0; right: auto; bottom: auto; }
.knowledge-card.card-tr,
.knowledge-card:nth-of-type(2) { top: 0; right: 0; left: auto; bottom: auto; }
.knowledge-card.card-br,
.knowledge-card:nth-of-type(3) { bottom: 0; right: 0; top: auto; left: auto; }
.knowledge-card.card-bl,
.knowledge-card:nth-of-type(4) { bottom: 0; left: 0; top: auto; right: auto; }
.knowledge-card.knowledge-card-main,
.knowledge-card.card-center { top: 50%; right: auto; bottom: auto; left: 50%; width: 215px; min-height: 118px; transform: translate(-50%, -50%); border-color: rgba(81, 190, 255, .45); background: linear-gradient(145deg, #0b69ad, #073155); }
.knowledge-card.knowledge-card-main:hover,
.knowledge-card.card-center:hover { transform: translate(-50%, -54%); }
.knowledge-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(75, 178, 241, .25); stroke-width: 1.2; stroke-dasharray: 5 7; }
.resource-library { background: #f5f8fc; }
.resource-heading-row { display: grid; grid-template-columns: 1fr minmax(300px, .55fr); align-items: end; gap: 40px; max-width: none; }
.resource-heading-row > p { margin-bottom: 6px; }
.resource-filter-bar { display: flex; gap: 8px; margin: 40px 0 26px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(13, 42, 76, .06); }
.resource-filter-bar button { padding: 11px 16px; border: 0; border-radius: 8px; color: #5d6e83; background: transparent; font: 750 .75rem var(--font-body); cursor: pointer; }
.resource-filter-bar button:hover { color: #087bd8; background: #eef7ff; }
.resource-filter-bar button.is-active { color: #fff; background: #087bd8; box-shadow: 0 7px 18px rgba(8, 123, 216, .22); }
.resource-editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.resource-editorial-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 16px 40px rgba(14, 49, 84, .07); transition: transform .25s, box-shadow .25s; }
.resource-editorial-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(14, 49, 84, .12); }
.resource-editorial-card[hidden] { display: none; }
.resource-card-art { position: relative; min-height: 100%; overflow: hidden; background: #07172a; }
.resource-card-art > img { width: 100%; height: 100%; object-fit: cover; opacity: .68; filter: saturate(.75); transition: transform .4s, opacity .3s; }
.resource-editorial-card:hover .resource-card-art > img { transform: scale(1.04); opacity: .78; }
.resource-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 12, 28, .02), rgba(1, 12, 28, .74)); }
.resource-number { position: absolute; z-index: 2; top: 17px; right: 17px; color: rgba(255, 255, 255, .76); font: 700 .66rem var(--font-display); letter-spacing: .13em; }
.resource-art-icon { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; color: #087bd8; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .23); }
.resource-art-icon .icon { width: 24px; height: 24px; }
.resource-card-copy { display: flex; flex-direction: column; padding: 30px; }
.resource-type { margin-bottom: 13px; color: #1887df; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.resource-card-copy h3 { margin-bottom: 12px; font-size: clamp(1.24rem, 1.8vw, 1.58rem); }
.resource-card-copy > p:not(.resource-type) { font-size: .84rem; line-height: 1.65; }
.resource-card-copy .text-link { margin-top: auto; padding-top: 18px; font-size: .76rem; }
.resource-path-section { background: #fff; }
.resource-path { display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px rgba(14, 52, 89, .08); }
.resource-path-intro { padding: clamp(36px, 5vw, 68px); color: #fff; background: linear-gradient(150deg, #087fd9, #074a88); }
.resource-path-intro h2 { color: #fff; }
.resource-path-intro > p:not(.eyebrow) { color: #c8e4f9; }
.resource-path-intro .eyebrow { color: #aee6ff; }
.resource-steps { margin: 0; padding: clamp(28px, 4vw, 52px); list-style: none; counter-reset: none; background: #f8fbfe; }
.resource-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 19px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.resource-steps li:last-child { border-bottom: 0; }
.resource-steps li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #087bd8; background: #e6f3ff; font: 800 .69rem var(--font-display); }
.resource-steps strong { color: #153a5a; font: 700 1rem var(--font-display); }
.resource-steps p { margin: 5px 0 0; font-size: .79rem; }

/* FAQ */
.faq-modern-hero { padding-block: clamp(82px, 8vw, 118px) clamp(62px, 7vw, 92px); }
.faq-modern-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .65fr); align-items: center; gap: clamp(45px, 7vw, 90px); }
.faq-modern-copy h1 { max-width: 760px; margin-bottom: 20px; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1; letter-spacing: -.052em; }
.faq-modern-copy > p:not(.eyebrow) { max-width: 650px; }
.faq-search { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; max-width: 650px; margin-top: 30px; padding: 8px 12px 8px 18px; border: 1px solid rgba(125, 181, 229, .28); border-radius: 13px; color: #70c9ff; background: rgba(255, 255, 255, .075); backdrop-filter: blur(12px); }
.faq-search .icon { width: 19px; height: 19px; }
.faq-search input { min-width: 0; height: 46px; border: 0; outline: 0; color: #fff; background: transparent; font: 500 .9rem var(--font-body); }
.faq-search input::placeholder { color: #8196af; }
.faq-search:focus-within { border-color: #39aef2; box-shadow: 0 0 0 3px rgba(33, 159, 239, .12); }
.faq-search kbd { padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; color: #9eb0c6; background: rgba(0, 0, 0, .15); font: 600 .7rem var(--font-body); }
.faq-hero-summary { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid rgba(124, 173, 218, .2); border-radius: 18px; background: rgba(117, 170, 218, .12); gap: 1px; box-shadow: 0 25px 60px rgba(0, 0, 0, .24); }
.faq-hero-summary > div { padding: 30px; background: rgba(6, 21, 40, .9); }
.faq-hero-summary > div > strong { display: block; color: #fff; font: 700 2.5rem var(--font-display); letter-spacing: -.05em; }
.faq-hero-summary > div > span { color: #8097b2; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.faq-hero-summary .faq-summary-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; }
.faq-summary-wide > span { display: grid; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; border-radius: 13px; color: #69cbff !important; background: rgba(35, 153, 224, .15); }
.faq-summary-wide .icon { width: 24px; height: 24px; }
.faq-summary-wide p { margin: 0; color: #91a5bd; font-size: .78rem; }
.faq-summary-wide p strong { display: block; color: #fff; font: 700 .94rem var(--font-display); }
.faq-modern { background: #f5f8fc; }
.faq-category-chips { position: relative; z-index: 3; display: flex; gap: 7px; margin-bottom: 12px; padding: 9px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(13, 46, 81, .07); scrollbar-width: thin; }
.faq-category-chips button { flex: 0 0 auto; padding: 11px 15px; border: 0; border-radius: 8px; color: #5b6d82; background: transparent; font: 750 .73rem var(--font-body); cursor: pointer; }
.faq-category-chips button:hover { color: #087bd8; background: #eef7ff; }
.faq-category-chips button.is-active { color: #fff; background: #087bd8; }
.faq-result-line { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 36px; padding-inline: 4px; color: #78889c; font-size: .72rem; }
.faq-result-line strong { color: #143b5f; }
.faq-modern .faq-page-layout { grid-template-columns: 250px minmax(0, 1fr); }
.faq-modern .faq-sidebar { top: calc(var(--header-height) + 20px); }
.faq-modern .faq-sidebar nav { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 12px 30px rgba(13, 46, 81, .055); }
.faq-modern .faq-sidebar nav a { position: relative; padding: 14px 16px; border-bottom: 1px solid #edf1f6; }
.faq-modern .faq-sidebar nav a:hover { padding-left: 20px; }
.faq-modern .faq-help { padding: 23px; border-radius: 14px; background: linear-gradient(145deg, #0a5798, #073864); }
.faq-modern .faq-help .icon-box { width: 40px; height: 40px; margin-bottom: 18px; color: #8dd7ff; background: rgba(255,255,255,.1); }
.faq-modern .faq-help strong { color: #fff; }
.faq-modern .faq-help p { color: #b7cee2; }
.faq-modern .faq-help .text-link { color: #8ed9ff; }
.faq-modern .faq-category { scroll-margin-top: calc(var(--header-height) + 25px); padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 15px 40px rgba(14, 48, 82, .06); }
.faq-modern .faq-category[hidden], .faq-modern .faq-item[hidden] { display: none; }
.faq-modern .faq-category > header { margin-bottom: 23px; }
.faq-modern .faq-category > header h2 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); }
.faq-modern .faq-item button { padding: 21px 3px; }
.faq-modern .faq-panel > p { color: #596b80; }
.faq-no-results { padding: 58px 25px; border: 1px dashed #b8c8d9; border-radius: 18px; text-align: center; background: #fff; }
.faq-no-results > span { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; color: #087bd8; background: #e8f4ff; }
.faq-no-results h2 { margin-bottom: 8px; }
.faq-no-results p { max-width: 520px; margin-inline: auto; }

/* Contact */
.contact-modern-hero { padding-block: clamp(82px, 8vw, 120px) clamp(65px, 7vw, 95px); }
.contact-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .68fr); align-items: center; gap: clamp(50px, 8vw, 110px); }
.contact-hero-copy h1 { max-width: 780px; margin-bottom: 22px; font-size: clamp(2.8rem, 5vw, 5.1rem); line-height: 1; letter-spacing: -.055em; }
.contact-hero-copy > p:not(.eyebrow) { max-width: 650px; }
.contact-hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 31px; }
.contact-hero-points span { display: flex; align-items: center; gap: 8px; color: #a9bbd0; font-size: .74rem; }
.contact-hero-points .icon { color: #4dc5ff; width: 15px; height: 15px; }
.contact-direct-card { padding: 13px; border: 1px solid rgba(122, 176, 221, .22); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: 0 26px 60px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
.contact-direct-card > .eyebrow { padding: 14px 15px 7px; }
.contact-direct-primary { display: grid; grid-template-columns: 46px 1fr 20px; align-items: center; gap: 13px; min-height: 83px; margin-top: 8px; padding: 14px; border: 1px solid rgba(122, 176, 221, .14); border-radius: 12px; color: #fff; background: rgba(1, 13, 28, .46); }
.contact-direct-primary:hover { border-color: rgba(76, 185, 246, .42); background: rgba(14, 71, 116, .46); }
.contact-direct-primary > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; color: #6bcfff; background: rgba(45, 160, 225, .14); }
.contact-direct-primary small { display: block; margin-bottom: 3px; color: #849bb5; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.contact-direct-primary strong { font: 700 .9rem var(--font-display); }
.contact-direct-primary > .icon { color: #6bcfff; }
.contact-location { display: flex; align-items: flex-start; gap: 12px; padding: 21px 16px 12px; }
.contact-location .icon { flex: 0 0 18px; margin-top: 2px; color: #62c8ff; }
.contact-location p { margin: 0; color: #8fa4bd; font-size: .72rem; }
.contact-planner-section { background: #f5f8fc; }
.contact-planner-grid { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); align-items: start; gap: clamp(45px, 7vw, 95px); }
.contact-planner-intro { position: sticky; top: calc(var(--header-height) + 25px); }
.contact-planner-intro > p:not(.eyebrow) { max-width: 500px; }
.contact-process { margin: 34px 0 0; padding: 0; list-style: none; }
.contact-process li { display: grid; grid-template-columns: 42px 1fr; gap: 15px; padding: 17px 0; border-top: 1px solid #dce5ef; }
.contact-process li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #087bd8; background: #e4f2ff; font: 800 .65rem var(--font-display); }
.contact-process strong { color: #173b5c; font: 700 .92rem var(--font-display); }
.contact-process p { margin: 4px 0 0; font-size: .74rem; }
.contact-inquiry-form { padding: clamp(25px, 4vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 22px 55px rgba(12, 48, 84, .09); }
.contact-inquiry-form fieldset { margin: 0 0 29px; padding: 0; border: 0; }
.contact-inquiry-form legend, .contact-form-grid label > span { display: block; margin-bottom: 10px; color: #193b5a; font-size: .72rem; font-weight: 800; }
.inquiry-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.inquiry-type-grid label { cursor: pointer; }
.inquiry-type-grid input { position: absolute; opacity: 0; pointer-events: none; }
.inquiry-type-grid label > span { display: flex; flex-direction: column; min-height: 112px; padding: 16px; border: 1px solid #dce5ee; border-radius: 12px; transition: border-color .2s, background .2s, box-shadow .2s; }
.inquiry-type-grid label > span > .icon { margin-bottom: auto; color: #1687df; width: 20px; height: 20px; }
.inquiry-type-grid strong { color: #1c3f60; font: 750 .85rem var(--font-display); }
.inquiry-type-grid small { margin-top: 3px; color: #7a899a; font-size: .62rem; line-height: 1.35; }
.inquiry-type-grid input:checked + span { border-color: #1688df; background: #eef8ff; box-shadow: 0 0 0 2px rgba(22, 136, 223, .1); }
.inquiry-type-grid input:focus-visible + span { outline: 3px solid rgba(22, 136, 223, .2); }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.contact-form-grid label { min-width: 0; }
.contact-form-grid input, .contact-form-grid select, .contact-form-grid textarea { width: 100%; border: 1px solid #d7e1eb; border-radius: 10px; outline: 0; color: #173957; background: #fbfdff; font: 500 .82rem var(--font-body); transition: border-color .2s, box-shadow .2s; }
.contact-form-grid input, .contact-form-grid select { height: 48px; padding: 0 13px; }
.contact-form-grid textarea { resize: vertical; min-height: 120px; padding: 13px; line-height: 1.55; }
.contact-form-grid input:focus, .contact-form-grid select:focus, .contact-form-grid textarea:focus { border-color: #1688df; box-shadow: 0 0 0 3px rgba(22, 136, 223, .1); }
.contact-form-wide { grid-column: 1 / -1; }
.contact-submit { margin-top: 23px; }
.contact-form-note { margin: 12px 0 0; font-size: .65rem; }
.contact-route-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); gap: 1px; box-shadow: 0 20px 50px rgba(15, 49, 82, .07); }
.contact-route-card { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: clamp(25px, 3vw, 38px); background: #fff; }
.route-number { position: absolute; top: 24px; right: 25px; color: #a4b1c0; font: 750 .65rem var(--font-display); letter-spacing: .12em; }
.contact-route-card .icon-box { margin-bottom: 25px; }
.contact-route-card p { font-size: .83rem; }
.contact-route-card .text-link { margin-top: auto; padding-top: 19px; font-size: .75rem; }
.contact-final { padding-block: 52px; }
.contact-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-final-inner h2 { margin-bottom: 8px; color: #fff; }
.contact-final-inner p:not(.eyebrow) { margin: 0; }

@media (max-width: 1020px) {
    .resource-hero-grid, .faq-modern-hero-grid, .contact-hero-grid { grid-template-columns: 1fr 390px; gap: 42px; }
    .resource-editorial-card { grid-template-columns: 170px minmax(0, 1fr); }
    .inquiry-type-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .resource-hero-grid, .faq-modern-hero-grid, .contact-hero-grid, .contact-planner-grid { grid-template-columns: 1fr; }
    .resource-hero-visual { width: min(100%, 560px); min-height: 440px; margin-inline: auto; }
    .faq-hero-summary, .contact-direct-card { width: min(100%, 600px); }
    .resource-heading-row { grid-template-columns: 1fr; gap: 12px; }
    .resource-editorial-grid { grid-template-columns: 1fr; }
    .resource-path { grid-template-columns: 1fr; }
    .faq-modern .faq-page-layout { grid-template-columns: 1fr; }
    .faq-modern .faq-sidebar { position: static; }
    .faq-modern .faq-sidebar > .eyebrow, .faq-modern .faq-sidebar nav { display: none; }
    .contact-planner-intro { position: static; }
    .contact-route-grid { grid-template-columns: 1fr; }
    .contact-route-card { min-height: 270px; }
}

@media (max-width: 620px) {
    .resource-hero-copy h1, .faq-modern-copy h1, .contact-hero-copy h1 { font-size: clamp(2.35rem, 11.5vw, 2.9rem); overflow-wrap: anywhere; }
    .resource-hero-visual { min-height: 360px; overflow: hidden; }
    .knowledge-card { width: 140px; min-height: 78px; grid-template-columns: 34px 1fr; padding: 11px; column-gap: 8px; }
    .knowledge-card > span { width: 34px; height: 34px; }
    .knowledge-card strong { font-size: .68rem; }
    .knowledge-card small { font-size: .52rem; }
    .knowledge-card.knowledge-card-main { width: 160px; min-height: 92px; }
    .resource-filter-bar { width: 100%; overflow-x: auto; scrollbar-width: thin; }
    .resource-filter-bar button { flex: 0 0 auto; }
    .resource-editorial-card { grid-template-columns: 1fr; }
    .resource-card-art { min-height: 245px; }
    .faq-hero-summary > div { padding: 22px; }
    .faq-modern .faq-category { padding: 21px; }
    .faq-result-line { flex-direction: column; gap: 4px; }
    .contact-hero-points { align-items: flex-start; flex-direction: column; }
    .inquiry-type-grid, .contact-form-grid { grid-template-columns: 1fr; }
    .inquiry-type-grid label > span { min-height: 92px; }
    .contact-form-wide { grid-column: auto; }
    .contact-final-inner { align-items: flex-start; flex-direction: column; }
}

/* Customer artwork supplied from original Vornex materials */
.customer-logo-crop {
    display: block !important;
    flex: 0 0 auto;
    width: 130px;
    height: 50px;
    max-width: 100%;
    padding: 0 !important;
    background-image: url('../images/customer-story-logos.png');
    background-repeat: no-repeat;
    background-size: 337px 536px;
    color: transparent !important;
    overflow: hidden;
}

.customer-logo-crop.is-laser { background-position: -53px -205px; }
.customer-logo-crop.is-capfin { background-position: -62px -292px; }
.customer-logo-crop.is-rabobank { background-position: -58px -449px; }
.customer-logo-crop.is-missouri { width: 72px; height: 58px; background-position: -89px -365px; }
.customer-case-brand .customer-logo-crop { transform: scale(.88); }
.customer-logo-tile .customer-logo-crop { filter: none; }

.customer-network-panel {
    margin: 28px 0 0;
    overflow: hidden;
    border: 1px solid rgba(122, 165, 209, .18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .22);
}

.customer-network-panel img { display: block; width: 100%; height: auto; }
.customer-network-panel figcaption { padding: 14px 20px; color: #718299; background: #f7faff; font-size: .69rem; text-align: center; }
.customer-logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Home — proof-led presentation */
.home-proof-story { background: #f5f8fc; }
.home-proof-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(45px, 7vw, 95px); }
.home-proof-media { position: relative; min-height: 520px; margin: 0; overflow: hidden; border-radius: 22px; background: #07162a; box-shadow: 0 28px 65px rgba(13, 50, 85, .16); }
.home-proof-media > img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; opacity: .9; }
.home-proof-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 16, 34, .72)); }
.home-proof-media figcaption { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 3px 14px; padding: 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; color: #fff; background: rgba(4, 21, 41, .83); backdrop-filter: blur(12px); }
.home-proof-media figcaption > span { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #62cfff; background: rgba(45, 157, 225, .17); }
.home-proof-media figcaption strong { font: 700 .93rem var(--font-display); }
.home-proof-media figcaption small { color: #9db1c8; font-size: .68rem; }
.home-proof-copy h2 { max-width: 590px; }
.home-proof-copy > p:not(.eyebrow) { max-width: 580px; }
.home-proof-list { display: grid; gap: 1px; margin: 30px 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); list-style: none; }
.home-proof-list li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 13px; padding: 17px; background: #fff; }
.home-proof-list li > .icon { width: 17px; height: 17px; color: #1688df; }
.home-proof-list span { color: #68788c; font-size: .75rem; }
.home-proof-list strong { display: block; margin-bottom: 2px; color: #173b5d; font: 700 .87rem var(--font-display); }

.home-critical-section { background: #fff; }
.home-critical-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.home-critical-card { position: relative; min-height: 270px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, #fff, #f6faff); transition: transform .25s, box-shadow .25s; }
.home-critical-card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(14, 53, 91, .1); }
.home-critical-card .icon-box { margin-bottom: 55px; }
.home-critical-card h3 { margin-bottom: 8px; }
.home-critical-card p { margin: 0; font-size: .78rem; }
.critical-number { position: absolute; top: 26px; right: 25px; color: #a4b3c4; font: 750 .64rem var(--font-display); letter-spacing: .12em; }
.home-critical-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.home-critical-tags span { padding: 8px 12px; border: 1px solid #dce7f1; border-radius: 999px; color: #5e7187; background: #f8fbfe; font-size: .68rem; font-weight: 650; }

.home-compatibility { background: #f5f8fc; }
.home-compatibility-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(45px, 7vw, 95px); }
.home-compatibility-copy > p:not(.eyebrow) { max-width: 530px; }
.compatibility-stat-row { display: grid; gap: 1px; margin: 28px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.compatibility-stat-row span { padding: 16px 20px; color: #475569; background: #fff; font-size: .95rem; line-height: 1.5; }
.compatibility-stat-row strong { display: inline-block; min-width: 115px; color: #0f172a; font: 750 .98rem var(--font-display); }
.home-platform-board { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); gap: 1px; box-shadow: 0 24px 55px rgba(14, 52, 88, .08); }
.home-platform-board > div { display: grid; place-items: center; min-height: 135px; padding: 20px 14px; background: #fff; text-align: center; transition: background .2s; }
.home-platform-board > div:hover { background: #f0f8ff; }
.home-platform-board img { max-width: 82px; max-height: 52px; object-fit: contain; }
.home-platform-board span { margin-top: 10px; color: #334155; font-size: .84rem; font-weight: 700; }

.home-client-wall { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(119, 161, 207, .17); border-radius: 18px; background: rgba(119, 161, 207, .12); gap: 1px; }
.hero .trust-names { grid-template-columns: repeat(4, 1fr); }
.home-client-logo { display: grid; place-items: center; min-height: 125px; padding: 25px; background: #08162b; position: relative; transition: background .25s ease, box-shadow .25s ease; }
.home-client-logo:hover { background: #0d2242; box-shadow: inset 0 0 0 1px rgba(110, 190, 255, .32), 0 8px 24px rgba(0, 0, 0, .35); }
.home-client-logo img { max-width: 145px; max-height: 60px; object-fit: contain; filter: brightness(0) invert(1); opacity: .74; transition: opacity .25s ease, transform .25s ease, filter .25s ease; }
.home-client-logo:hover img { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(131, 217, 255, .5)); opacity: 1; transform: scale(1.06); }
.home-case-snapshots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.home-case-snapshot { position: relative; min-height: 180px; overflow: hidden; border: 1px solid rgba(119, 161, 207, .17); border-radius: 15px; color: #fff; background: #07172a; }
.home-case-snapshot > img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: transform .35s, opacity .35s; }
.home-case-snapshot:hover > img { transform: scale(1.035); opacity: .55; }
.home-case-snapshot > span { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 1fr 24px; align-items: end; gap: 5px; padding: 25px; background: linear-gradient(transparent, rgba(2, 13, 29, .95)); }
.home-case-snapshot small { grid-column: 1 / -1; color: #68c8ff; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.home-case-snapshot strong { font: 700 1.04rem var(--font-display); }

@media (max-width: 920px) {
    .home-proof-grid, .home-compatibility-grid { grid-template-columns: 1fr; }
    .home-proof-media { min-height: 440px; }
    .home-proof-media > img { min-height: 440px; }
    .home-critical-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .home-proof-media, .home-proof-media > img { min-height: 350px; }
    .home-proof-media figcaption { right: 14px; bottom: 14px; left: 14px; }
    .home-critical-grid { grid-template-columns: 1fr; }
    .home-critical-card { min-height: 225px; }
    .home-platform-board, .home-client-wall { grid-template-columns: repeat(2, 1fr); }
    .home-platform-board > div, .home-client-logo { min-height: 105px; }
    .home-case-snapshots { grid-template-columns: 1fr; }
    .hero .trust-names { grid-template-columns: repeat(2, 1fr); }
}

/* Local customer case studies */
.case-hero { position: relative; padding: calc(var(--header-height) + 38px) 0 clamp(62px, 7vw, 96px); overflow: hidden; }
.case-breadcrumb { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin-bottom: 34px; color: #7086a0; font-size: .7rem; }
.case-breadcrumb a { color: #6dcaff; font-weight: 700; }
.case-breadcrumb .icon { width: 13px; height: 13px; }
.case-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .78fr); align-items: center; gap: clamp(48px, 7vw, 95px); }
.case-hero-copy h1 { max-width: 820px; margin-bottom: 20px; color: #fff; font-size: clamp(2.7rem, 4.8vw, 4.9rem); line-height: 1; letter-spacing: -.055em; }
.case-hero-copy > p { max-width: 700px; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.case-hero-media { position: relative; min-height: 470px; margin: 0; overflow: hidden; border: 1px solid rgba(119, 166, 211, .2); border-radius: 22px; background: #06152a; box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.case-hero-media > img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; opacity: .72; }
.case-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,13,28,.03), rgba(2,13,28,.72)); }
.case-hero-brand { position: absolute; z-index: 2; right: 25px; bottom: 25px; left: 25px; display: grid; place-items: center; min-height: 94px; padding: 20px; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 16px 35px rgba(0,0,0,.25); }
.case-hero-brand > img { max-width: 180px; max-height: 70px; object-fit: contain; }
.case-hero-brand > strong { color: #0b3155; font: 750 1.3rem var(--font-display); }
.case-details { background: #f5f8fc; }
.case-story-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 85px); }
.case-story-nav { position: sticky; top: calc(var(--header-height) + 22px); display: grid; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 35px rgba(13,48,83,.06); }
.case-story-nav > a { padding: 12px 0; border-bottom: 1px solid #e8eef5; color: #5b6d82; font-size: .76rem; font-weight: 700; }
.case-story-nav > a:hover { color: #087bd8; padding-left: 4px; }
.case-story-nav > div { margin-top: 22px; padding: 18px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #0a69af, #073d70); }
.case-story-nav > div > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 28px; border-radius: 10px; color: #83d9ff; background: rgba(255,255,255,.1); }
.case-story-nav > div strong { font: 700 .9rem var(--font-display); }
.case-story-nav > div p { margin: 5px 0 0; color: #c0d9eb; font-size: .67rem; }
.case-story-content { display: grid; gap: 24px; }
.case-narrative { display: grid; grid-template-columns: 62px 1fr; gap: 25px; padding: clamp(30px, 5vw, 58px); border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 16px 42px rgba(13,48,83,.06); scroll-margin-top: calc(var(--header-height) + 25px); }
.case-narrative > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #087bd8; background: #e7f4ff; font: 800 .72rem var(--font-display); }
.case-narrative h2 { max-width: 720px; }
.case-narrative div > p:last-child { max-width: 800px; margin: 0; font-size: .94rem; line-height: 1.75; }
.case-scope { display: grid; grid-template-columns: .72fr 1.28fr; gap: 40px; padding: clamp(30px, 5vw, 55px); border-radius: 19px; color: #fff; background: linear-gradient(145deg, #087fd8, #075098); scroll-margin-top: calc(var(--header-height) + 25px); }
.case-scope .eyebrow { color: #b3e6ff; }
.case-scope h2 { color: #fff; }
.case-scope ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.case-scope li { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #e5f4ff; background: rgba(255,255,255,.07); font-size: .74rem; font-weight: 650; }
.case-scope li .icon { color: #8de2ff; }
.case-outcomes { padding: clamp(30px, 5vw, 55px); border: 1px solid var(--line); border-radius: 19px; background: #fff; scroll-margin-top: calc(var(--header-height) + 25px); }
.case-outcomes > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }
.case-outcomes article { min-height: 210px; padding: 26px; background: #f9fbfd; }
.case-outcomes article > span { color: #1688df; font: 800 .66rem var(--font-display); letter-spacing: .1em; }
.case-outcomes h3 { margin: 42px 0 8px; }
.case-outcomes article p { margin: 0; font-size: .75rem; }
.case-more .section-action { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* Enhanced Case Study Narrative & Components */
.case-highlight-pill { color: #0284c7 !important; background: #e0f2fe !important; border: 1px solid #bae6fd; font-weight: 800; }
.case-story-switcher { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e8eef5; }
.case-story-switcher label { display: block; margin-bottom: 8px; color: #173c5d; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.case-story-switcher select { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid #cbd5e1; background: #f8fafc; color: #0f172a; font-size: .8rem; font-weight: 600; cursor: pointer; outline: none; transition: border-color .2s; }
.case-story-switcher select:focus { border-color: #087bd8; background: #fff; }
.case-story-callout { margin-top: 20px; padding: 18px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #0a69af, #073d70); }
.case-story-callout > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 10px; color: #83d9ff; background: rgba(255,255,255,.1); }
.case-story-callout strong { display: block; font: 700 .9rem var(--font-display); margin-bottom: 6px; }
.case-story-callout p { margin: 0; color: #c0d9eb; font-size: .74rem; line-height: 1.5; }

/* Company Profile Section (Matches Screenshot) */
.case-company-profile { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 44px); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 16px 42px rgba(13, 48, 83, .06); scroll-margin-top: calc(var(--header-height) + 25px); }
.case-profile-aside { display: flex; flex-direction: column; align-items: center; padding-right: clamp(16px, 3vw, 32px); border-right: 1px solid #eef2f6; }
.case-profile-logo-wrap { display: grid; place-items: center; width: 100%; min-height: 100px; padding: 18px; margin-bottom: 20px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.case-profile-logo-wrap img { max-width: 190px; max-height: 68px; object-fit: contain; }
.case-profile-meta { width: 100%; display: grid; gap: 10px; }
.case-profile-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.case-profile-meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.case-profile-meta-label { font-weight: 700; color: #173c5d; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.case-profile-meta-value { color: #475569; font-weight: 600; font-size: .82rem; text-align: right; }
.case-profile-meta-value a { color: #087bd8; text-decoration: none; font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.case-profile-meta-value a:hover { text-decoration: underline; }
.case-profile-meta-value .icon-ext { stroke-width: 2.2; }
.case-profile-body { display: flex; flex-direction: column; justify-content: center; }
.case-profile-body h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 6px 0 14px; color: #092540; }
.case-profile-body p { color: #475569; font-size: .95rem; line-height: 1.78; margin: 0; }

/* Narrative Paragraphs */
.case-narrative div > p { max-width: 820px; margin: 0 0 16px; font-size: .94rem; line-height: 1.78; color: #475569; }
.case-narrative div > p:last-child { margin-bottom: 0; }

/* Scope 2-Column Grid (From Screenshot) */
.case-scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0 26px; padding: 0; list-style: none; }
.case-scope-card { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a; font-size: .86rem; font-weight: 650; transition: transform .2s, background .2s, border-color .2s; }
.case-scope-card:hover { background: #f0f7ff; border-color: #bae6fd; transform: translateY(-1px); }
.case-scope-card .icon { width: 16px; height: 16px; color: #087bd8; flex-shrink: 0; }

/* Compliance Highlight Box */
.case-compliance-callout { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 22px 26px; border-radius: 14px; background: #f0f7ff; border: 1px solid #dbeafe; border-left: 4px solid #087bd8; color: #1e3a8a; font-size: .92rem; line-height: 1.72; }
.case-compliance-callout .icon { width: 22px; height: 22px; color: #087bd8; flex-shrink: 0; margin-top: 3px; }
.case-compliance-callout strong { display: block; margin-bottom: 6px; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; color: #0369a1; }
.case-compliance-callout p { margin: 0; color: #334155; font-size: .92rem; }

/* Downsides / Drawbacks List */
.case-downside-list { display: grid; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; }
.case-downside-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-radius: 11px; background: #fff5f5; border: 1px solid #fed7d7; color: #742a2a; font-size: .87rem; font-weight: 600; line-height: 1.5; }
.case-downside-item .icon { width: 17px; height: 17px; color: #e53e3e; flex-shrink: 0; margin-top: 2px; }

/* Solution Features */
.case-solution-features { margin-top: 24px; padding: 20px 24px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.case-solution-features > strong { display: block; margin-bottom: 12px; color: #0f172a; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.case-feature-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.case-feature-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; background: #fff; border: 1px solid #cbd5e1; color: #1e293b; font-size: .8rem; font-weight: 650; }
.case-feature-tag .icon { width: 14px; height: 14px; color: #087bd8; }

/* Benefits Checklist */
.case-benefits-checklist { display: grid; gap: 11px; margin: 22px 0 24px; padding: 0; list-style: none; }
.case-benefit-check-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: .88rem; font-weight: 600; line-height: 1.5; }
.case-benefit-check-item .icon { width: 17px; height: 17px; color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.case-summary-highlight { padding: 18px 22px; border-radius: 12px; background: #f1f5f9; border-left: 3px solid #64748b; color: #334155; font-size: .93rem; line-height: 1.72; font-style: italic; }

/* Previous / Next Case Study Navigation */
.case-prev-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.case-prev-card, .case-next-card { display: flex; flex-direction: column; padding: 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; box-shadow: 0 10px 28px rgba(13, 48, 83, .04); transition: transform .25s, border-color .25s, box-shadow .25s; }
.case-prev-card:hover, .case-next-card:hover { transform: translateY(-2px); border-color: #bae6fd; box-shadow: 0 16px 36px rgba(13, 48, 83, .08); }
.case-prev-card small, .case-next-card small { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.case-prev-card strong, .case-next-card strong { color: #0b3155; font: 750 1.05rem var(--font-display); line-height: 1.3; }
.case-next-card { text-align: right; }
.case-next-card small { justify-content: flex-end; }

/* Local resource guides */
.resource-detail-hero { position: relative; padding: calc(var(--header-height) + 55px) 0 clamp(68px, 8vw, 105px); overflow: hidden; }
.resource-detail-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .7fr); align-items: center; gap: clamp(50px, 8vw, 105px); }
.resource-detail-hero-grid h1 { max-width: 820px; margin-bottom: 20px; color: #fff; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.resource-detail-hero-grid > div > p:not(.eyebrow) { max-width: 680px; }
.resource-detail-art { position: relative; min-height: 440px; margin: 0; overflow: hidden; border-radius: 22px; background: #06152a; box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.resource-detail-art img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; opacity: .78; }
.resource-detail-art > span { position: absolute; right: 25px; bottom: 25px; display: grid; place-items: center; width: 65px; height: 65px; border-radius: 16px; color: #087bd8; background: #fff; box-shadow: 0 13px 30px rgba(0,0,0,.24); }
.resource-detail-art .icon { width: 29px; height: 29px; }
.resource-detail-body { background: #f5f8fc; }
.resource-detail-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: clamp(40px, 6vw, 85px); }
.resource-detail-aside { position: sticky; top: calc(var(--header-height) + 22px); display: grid; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.resource-detail-aside > a { padding: 11px 0; border-bottom: 1px solid #e8eef5; color: #5b6d82; font-size: .72rem; font-weight: 700; }
.resource-detail-aside > div { margin-top: 20px; padding: 18px; border-radius: 12px; background: #edf7ff; }
.resource-detail-aside > div strong { color: #173c5d; font: 700 .86rem var(--font-display); }
.resource-detail-aside > div p { margin: 6px 0 13px; font-size: .68rem; }
.resource-article { display: grid; gap: 22px; }
.resource-article > section { scroll-margin-top: calc(var(--header-height) + 25px); }
.resource-article > section:first-child { padding: clamp(34px, 5vw, 60px); border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.resource-lead { margin: 0; color: #43566c; font: 500 clamp(1.15rem, 2vw, 1.55rem)/1.65 var(--font-display); }
.resource-scenario-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 36px; padding: clamp(32px, 5vw, 55px); border-radius: 19px; color: #fff; background: linear-gradient(145deg, #087fd8, #075098); }
.resource-scenario-panel .eyebrow { color: #b8e9ff; }
.resource-scenario-panel h2 { color: #fff; }
.resource-scenario-panel ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 0; padding: 0; list-style: none; }
.resource-scenario-panel li { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #e5f4ff; background: rgba(255,255,255,.07); font-size: .72rem; }
.resource-article-section { position: relative; padding: clamp(32px, 5vw, 55px); border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.resource-article-section > span { position: absolute; top: 30px; right: 32px; color: #1688df; font: 800 .66rem var(--font-display); letter-spacing: .12em; }
.resource-article-section h2 { max-width: 720px; }
.resource-article-section p { max-width: 830px; margin: 0; font-size: .92rem; line-height: 1.75; }

@media (max-width: 900px) {
    .case-hero-grid, .resource-detail-hero-grid { grid-template-columns: 1fr; }
    .case-hero-media, .resource-detail-art { min-height: 380px; }
    .case-hero-media > img, .resource-detail-art img { min-height: 380px; }
    .case-story-layout, .resource-detail-layout { grid-template-columns: 1fr; }
    .case-story-nav, .resource-detail-aside { position: static; }
    .case-story-nav > a, .resource-detail-aside > a { display: none; }
    .case-company-profile { grid-template-columns: 1fr; gap: 24px; }
    .case-profile-aside { border-right: none; border-bottom: 1px solid #eef2f6; padding-right: 0; padding-bottom: 24px; }
    .case-profile-meta { max-width: 420px; }
    .case-scope-grid { grid-template-columns: 1fr; }
    .case-prev-next { grid-template-columns: 1fr; }
    .case-next-card { text-align: left; }
    .case-next-card small { justify-content: flex-start; }
}

@media (max-width: 620px) {
    .case-hero-copy h1, .resource-detail-hero-grid h1 { font-size: clamp(2.3rem, 11vw, 2.9rem); }
    .case-hero-media, .resource-detail-art, .case-hero-media > img, .resource-detail-art img { min-height: 310px; }
    .case-narrative { grid-template-columns: 1fr; }
    .case-scope, .resource-scenario-panel { grid-template-columns: 1fr; }
    .case-scope ul, .resource-scenario-panel ul { grid-template-columns: 1fr; }
    .case-outcomes > div { grid-template-columns: 1fr; }
    .case-outcomes article { min-height: 175px; }
}

@media (max-width: 1080px) {
    .customer-hero-grid { grid-template-columns: 1fr 420px; gap: 34px; }
    .customer-hero-visual { min-height: 440px; }
    .hero-logo-card { width: 142px; height: 90px; padding: 18px; }
    .hero-visual-core { width: 160px; }
    .customer-case-card { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .customer-hero-grid { grid-template-columns: 1fr; }
    .customer-hero-copy { text-align: center; }
    .customer-hero-copy > p:not(.eyebrow) { margin-inline: auto; }
    .customer-hero-copy .hero-actions { justify-content: center; }
    .customer-hero-visual { width: min(100%, 560px); min-height: 470px; margin-inline: auto; }
    .customer-heading-row { grid-template-columns: 1fr; gap: 15px; }
    .customer-filter-bar { align-items: flex-start; flex-direction: column; }
    .customer-case-grid { grid-template-columns: 1fr; }
    .customer-case-card { grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr); }
    .customer-logo-wall { grid-template-columns: repeat(2, 1fr); }
    .testimonial-stage { grid-template-columns: 1fr; }
    .testimonial-side-note { display: none; }
}

@media (max-width: 620px) {
    .customer-hero { padding-top: 66px; }
    .customer-hero-grid,
    .customer-heading-row {
        display: block;
        max-width: 100%;
    }
    .customer-hero-copy,
    .customer-heading-row > div,
    .customer-heading-row > p,
    .customer-case-grid,
    .customer-case-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .customer-hero-copy h1 { max-width: 100%; font-size: clamp(2.3rem, 11.5vw, 2.8rem); overflow-wrap: anywhere; }
    .customer-heading-row h2 { max-width: 100%; font-size: 1.85rem; overflow-wrap: anywhere; }
    .customer-heading-row > p { margin-top: 15px; }
    .customer-proof-row { grid-template-columns: 1fr; }
    .customer-proof-row span { min-height: auto; text-align: left; }
    .customer-hero-grid { width: 100%; min-width: 0; }
    .customer-hero-visual { width: 100%; min-width: 0; min-height: 390px; margin-block: -20px; overflow: hidden; }
    .hero-logo-card { width: 125px; height: 78px; padding: 14px; }
    .logo-card-nationwide { left: 0; }
    .logo-card-gazprom { right: 0; }
    .logo-card-wipro { left: 0; }
    .logo-card-ericsson { right: 0; }
    .hero-visual-core { width: 145px; }
    .customer-filter-bar { width: 100%; min-width: 0; }
    .customer-filter-list { flex-wrap: nowrap; width: 100%; min-width: 0; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
    .customer-filter { flex: 0 0 auto; }
    .customer-case-card, .customer-case-card.is-featured { grid-template-columns: 1fr; min-height: 0; }
    .customer-case-image { min-height: 240px; }
    .customer-logo-tile { min-height: 115px; padding: 20px; }
    .testimonial-topline { align-items: flex-start; flex-direction: column; }
    .testimonial-controls { padding: 0; }
    .testimonial-stage { min-height: 390px; }
    .testimonial-slide { padding: 36px 27px; }
    .testimonial-quote { right: 20px; font-size: 5rem; }
}

/* Company / About Layout */
.company-year {
    justify-self: center;
    width: min(300px, 75vw);
    height: min(300px, 75vw);
    display: grid;
    place-content: center;
    border: 1px solid rgba(58, 160, 239, .3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 81, 139, .5), rgba(4, 18, 37, .7));
    box-shadow: 0 0 80px rgba(19, 165, 220, .15);
    text-align: center;
}

.company-year span {
    color: #78accb;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}

.company-year strong {
    color: #fff;
    font: 800 clamp(3.2rem, 8vw, 4.8rem) var(--font-display);
    letter-spacing: -.08em;
    line-height: 1;
    margin: 4px 0;
}

.company-year p {
    margin: 0;
    font-size: .74rem !important;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.about-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 75px);
    align-items: start;
}

.about-statement p:not(.eyebrow) {
    max-width: 560px;
    font-size: 1.02rem;
}

.mission-panel {
    padding: clamp(28px, 4vw, 42px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.mission-panel blockquote {
    margin: 0 0 20px;
    color: var(--ink);
    font: 600 clamp(1.15rem, 2vw, 1.6rem)/1.4 var(--font-display);
    letter-spacing: -.025em;
}

.mission-panel p:last-child {
    margin: 0;
    font-size: .92rem;
}

.company-values {
    background: var(--surface);
}

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

.value-card {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.value-card h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.value-card p {
    margin: 0;
    font-size: .88rem;
}

.split-stat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.split-stat > div {
    display: grid;
    gap: 6px;
    align-content: center;
    padding: clamp(20px, 3vw, 26px);
    border-right: 1px solid var(--line);
    text-align: center;
}

.split-stat > div:last-child {
    border: 0;
}

.split-stat strong {
    color: #167fdc;
    font: 800 clamp(1.25rem, 2vw, 1.45rem) var(--font-display);
}

.split-stat span {
    color: var(--muted);
    font-size: .76rem;
}

/* Contact Page Layout */
.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

.contact-panel {
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #fff;
}

.contact-panel h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.contact-secondary {
    color: #146fba;
    border-color: #bdd9ec;
    background: #eef8ff;
    box-shadow: none;
}

.contact-secondary:hover {
    background: #e0f1fe;
    box-shadow: none;
}

.form-note {
    margin: 20px 0 0;
    font-size: .78rem;
}

.contact-details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.contact-details > div {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 16px;
    padding: 22px;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.contact-details > div:last-child {
    border: 0;
}

.contact-details .icon-box {
    grid-row: 1 / 3;
    margin: 0;
}

.contact-details p {
    margin: 0;
    color: #8592a4;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.contact-details a,
.contact-details address {
    color: #24354b;
    font-style: normal;
    font-weight: 600;
    font-size: .92rem;
    word-break: break-word;
}

.contact-paths {
    background: var(--surface);
}

/* Resources, partners, careers, and legal pages */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.resource-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: clamp(26px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f6faff);
    box-shadow: var(--shadow-sm);
}

.resource-card h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.resource-card > p:not(.eyebrow) {
    margin-bottom: 28px;
}

.resource-card .text-link {
    margin-top: auto;
}

/* ==========================================================================
   PARTNER PROGRAM & DIRECTORY STYLES
   ========================================================================== */

/* Partner Hero */
.partner-hero {
    position: relative;
    padding: clamp(60px, 8.5vh, 105px) 0 clamp(50px, 6.5vh, 85px);
    background: radial-gradient(circle at 80% 25%, rgba(39, 140, 245, 0.18), transparent 48%),
                radial-gradient(circle at 15% 75%, rgba(19, 214, 204, 0.12), transparent 42%),
                var(--navy);
    overflow: hidden;
}

.partner-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.95fr);
    gap: clamp(36px, 5.5vw, 76px);
    align-items: center;
}

.partner-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(39, 140, 245, 0.12);
    border: 1px solid rgba(39, 140, 245, 0.35);
    color: #72b9ff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 22px;
}

.partner-eyebrow-pill .icon {
    width: 1em;
    height: 1em;
    color: var(--cyan);
}

.partner-gradient-text {
    background: linear-gradient(135deg, #ffffff 20%, #7ec2ff 65%, #13d6cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.partner-hero-lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    color: #b2c5dc;
    max-width: 620px;
    margin-bottom: 32px;
}

.button-glow {
    box-shadow: 0 4px 22px rgba(39, 140, 245, 0.45);
}

.partner-proof-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.partner-proof-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.partner-proof-stat span {
    display: block;
    font-size: 0.8rem;
    color: #8da5c4;
    margin-top: 4px;
}

/* Constellation / Visual Orbit */
.partner-hero-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.partner-orbit-glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(39, 140, 245, 0.3) 0%, rgba(19, 214, 204, 0.15) 50%, transparent 75%);
    filter: blur(32px);
    pointer-events: none;
}

.partner-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.partner-orbit-ring.ring-outer {
    inset: 2%;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    animation: partnerSpinSlow 60s linear infinite;
}

.partner-orbit-ring.ring-inner {
    inset: 22%;
    border: 1px solid rgba(39, 140, 245, 0.25);
}

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

.partner-core-orb {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 154px;
    height: 154px;
    border-radius: 50%;
    background: linear-gradient(135deg, #071736, #0e2b5e);
    border: 2px solid rgba(39, 140, 245, 0.55);
    box-shadow: 0 12px 42px rgba(3, 10, 25, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 14px;
}

.partner-core-orb .core-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(39, 140, 245, 0.25);
    display: grid;
    place-items: center;
    color: var(--cyan);
    margin-bottom: 6px;
}

.partner-core-orb strong {
    font-size: 0.96rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.partner-core-orb small {
    font-size: 0.7rem;
    color: #8da5c4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Floating Orbit Badges */
.partner-orbit-badge {
    position: absolute;
    z-index: 6;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 28px rgba(3, 8, 23, 0.28);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-orbit-badge:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 16px 36px rgba(39, 140, 245, 0.4);
    z-index: 10;
}

.partner-orbit-badge img {
    height: 24px;
    max-width: 95px;
    width: auto;
    object-fit: contain;
    display: block;
}

.partner-orbit-badge.badge-oracle {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
}

.partner-orbit-badge.badge-microsoft {
    top: 22%;
    right: 0%;
}

.partner-orbit-badge.badge-redhat {
    bottom: 22%;
    right: 0%;
}

.partner-orbit-badge.badge-vmware {
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
}

.partner-orbit-badge.badge-accenture {
    bottom: 22%;
    left: 0%;
}

.partner-orbit-badge.badge-ibm {
    top: 22%;
    left: 0%;
}

/* Partner Tracks Section */
.partner-tracks-section {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.partner-section-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 760px;
    margin: 12px auto 0;
}

.partner-tracks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 48px;
}

.partner-track-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.partner-track-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 35, 68, 0.09);
    border-color: rgba(39, 140, 245, 0.45);
}

.partner-track-card .track-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.track-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(39, 140, 245, 0.1);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.track-badge-pill {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf5fe;
    color: #1a62ac;
}

.partner-track-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--navy);
}

.track-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 20px;
}

.track-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.track-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #334155;
}

.track-benefits-list li .icon {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 3px;
    width: 1em;
    height: 1em;
}

.track-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}

.track-sample-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.track-sample-partners {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

/* Partner Directory Section */
.partner-directory-section {
    position: relative;
    padding: clamp(56px, 7.5vh, 96px) 0;
    background: #ffffff;
}

.partner-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 40px 0 32px 0;
    padding: 16px 22px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.partner-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.partner-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d5e0ee;
    color: #41536b;
    font-size: 0.86rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.partner-filter-btn:hover {
    border-color: var(--blue);
    color: var(--navy);
}

.partner-filter-btn.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(3, 8, 23, 0.16);
}

.filter-count {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: #edf2f7;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.partner-filter-btn.is-active .filter-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.partner-search-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.partner-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.partner-search-box input {
    height: 40px;
    width: 270px;
    padding: 0 14px 0 38px;
    border-radius: 999px;
    border: 1px solid #d5e0ee;
    background: #ffffff;
    font-size: 0.86rem;
    color: var(--ink);
    outline: none;
    transition: all 0.2s ease;
}

.partner-search-box input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(39, 140, 245, 0.15);
    width: 310px;
}

.partner-search-box .search-icon {
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
}

.partner-live-count {
    font-size: 0.84rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Directory Cards Grid */
.partner-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.partner-detail-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.partner-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(15, 35, 68, 0.08);
    border-color: rgba(39, 140, 245, 0.4);
}

.partner-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.partner-type-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
}

.partner-type-badge.is-technology {
    background: #eef6ff;
    color: #1e62aa;
}

.partner-type-badge.is-integrator {
    background: #f0fdf4;
    color: #15803d;
}

.partner-type-badge.is-reseller {
    background: #faf5ff;
    color: #7e22ce;
}

.partner-type-badge.is-specialized {
    background: #fff7ed;
    color: #c2410c;
}

.partner-tier-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Partner Logo Box: Clean container with NO OVERLAPPING TEXT */
.partner-logo-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 86px;
    margin: 0 0 18px 0;
    padding: 12px 20px;
    border-radius: 12px;
    background: #fbfcfe;
    border: 1px solid #eef2f6;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.partner-detail-card:hover .partner-logo-box {
    border-color: #dbe4ef;
    background: #ffffff;
}

.partner-logo-box img {
    display: block;
    max-height: 48px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    transition: transform 0.25s ease;
}

.partner-detail-card:hover .partner-logo-box img {
    transform: scale(1.04);
}

.partner-logo-fallback {
    color: #365371;
    font: 800 1.05rem var(--font-display);
    text-align: center;
}

.partner-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.partner-name {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
    line-height: 1.3;
}

.partner-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.partner-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.partner-tag-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
}

.partner-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.partner-external-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--blue);
    transition: gap 0.2s ease, color 0.2s ease;
}

.partner-external-link:hover {
    gap: 9px;
    color: #146ecc;
}

.partner-empty-state {
    text-align: center;
    padding: 64px 20px;
    max-width: 520px;
    margin: 0 auto;
}

.partner-empty-state .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
}

.partner-empty-state h3 {
    font-size: 1.25rem;
    color: var(--navy);
    margin-bottom: 8px;
}

.partner-empty-state p {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Program Value / Why Partner Section */
.partner-benefits-section {
    padding: clamp(60px, 8vh, 100px) 0;
}

.partner-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.partner-benefit-card {
    padding: 32px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.partner-benefit-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(39, 140, 245, 0.45);
}

.benefit-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(39, 140, 245, 0.16);
    color: var(--cyan);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.partner-benefit-card h3 {
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 12px;
}

.partner-benefit-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #a5b7ce;
    margin: 0;
}

/* 4-Step Process Section */
.partner-process-section {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.partner-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.partner-step-card {
    padding: 30px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 35, 68, 0.08);
}

.step-badge-number {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #e2eaf4;
    margin-bottom: 16px;
}

.partner-step-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.partner-step-card p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* Partner Application & CTA Section */
.partner-cta-section {
    padding: clamp(60px, 8vh, 100px) 0;
}

.partner-apply-card {
    border-radius: 24px;
    background: linear-gradient(135deg, #050c1f 0%, #0a1838 100%);
    border: 1px solid rgba(39, 140, 245, 0.25);
    box-shadow: 0 24px 60px rgba(5, 12, 31, 0.35);
    padding: clamp(32px, 5vw, 64px);
    color: #ffffff;
}

.partner-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1.15fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
}

.partner-apply-info .eyebrow {
    color: var(--cyan);
}

.partner-apply-info h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.partner-apply-info p {
    font-size: 1rem;
    line-height: 1.65;
    color: #b2c5dc;
}

.partner-contact-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 32px 0;
}

.partner-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.partner-contact-item .contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(39, 140, 245, 0.16);
    color: var(--cyan);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.partner-contact-item strong {
    display: block;
    font-size: 0.78rem;
    color: #8da5c4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.partner-contact-item a,
.partner-contact-item span {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
}

.partner-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
}

.trust-pill .icon {
    color: var(--cyan);
    width: 1em;
    height: 1em;
}

/* Partner Form Wrap */
.partner-apply-form-wrap {
    background: #ffffff;
    border-radius: 18px;
    padding: 34px;
    color: var(--ink);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.partner-apply-form-wrap .form-header h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px;
}

.partner-apply-form-wrap .form-header p {
    font-size: 0.86rem;
    color: var(--muted);
    margin-bottom: 24px;
}

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

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--ink);
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(39, 140, 245, 0.15);
}

.button-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 13px 24px;
    font-weight: 700;
}

/* Responsive Rules for Partner Page */
@media (max-width: 1140px) {
    .partner-tracks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 980px) {
    .partner-hero-grid {
        grid-template-columns: 1fr;
    }

    .partner-hero-visual {
        max-width: 420px;
        margin: 40px auto 0;
    }

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

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

    .partner-apply-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .partner-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .partner-search-wrapper {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .partner-search-box {
        flex-grow: 1;
    }

    .partner-search-box input {
        width: 100% !important;
    }

    .partner-proof-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

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

@media (max-width: 580px) {
    .partner-cards-grid {
        grid-template-columns: 1fr;
    }

    .partner-tracks-grid {
        grid-template-columns: 1fr;
    }

    .partner-steps-grid {
        grid-template-columns: 1fr;
    }

    .partner-benefits-grid {
        grid-template-columns: 1fr;
    }

    .partner-orbit-badge {
        padding: 6px 10px;
    }

    .partner-orbit-badge img {
        height: 18px;
        max-width: 65px;
    }

    .partner-apply-form-wrap {
        padding: 24px 18px;
    }
}


.career-layout {
    display: grid;
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: clamp(30px, 6vw, 90px);
    align-items: start;
}

.career-summary {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f5f9fd;
}

.career-summary h2 {
    margin-bottom: 8px;
}

.career-summary .button {
    width: 100%;
    margin-top: 16px;
}

.career-detail {
    max-width: 760px;
}

.career-detail h3 {
    margin-top: 32px;
}

.light-check-list {
    color: #40546c;
}

.legal-copy {
    max-width: 850px;
}

.legal-copy h2 {
    margin-top: 34px;
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
}

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

/* FAQ Layout */
.faq-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(32px, 5vw, 75px);
    align-items: start;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item:first-child {
    border-top: 1px solid var(--line);
}

.faq-item h3 {
    margin: 0;
}

.faq-item button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    font-weight: 700;
    font-size: .98rem;
    cursor: pointer;
}

.faq-item button .icon {
    flex: 0 0 18px;
    color: #187fe5;
    transition: transform .25s ease;
}

.faq-item.is-open button .icon {
    transform: rotate(45deg);
}

.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.faq-panel > p {
    min-height: 0;
    margin: 0;
    overflow: hidden;
    font-size: .92rem;
    line-height: 1.6;
}

.faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-item.is-open .faq-panel > p {
    padding-bottom: 22px;
}

.faq-directory {
    background: var(--surface);
}

.faq-page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(28px, 4.5vw, 65px);
    align-items: start;
}

.faq-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.faq-sidebar nav {
    display: grid;
    margin-bottom: 20px;
}

.faq-sidebar nav a {
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    color: #526379;
    font-size: .84rem;
    font-weight: 600;
    transition: color .2s;
}

.faq-sidebar nav a:last-child {
    border-bottom: 0;
}

.faq-sidebar nav a:hover {
    color: #1582dd;
}

.faq-help {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.faq-help strong {
    font-family: var(--font-display);
    font-size: .88rem;
}

.faq-help p {
    margin: 4px 0 10px;
    font-size: .78rem;
}

.faq-help .text-link {
    font-size: .78rem;
}

.faq-groups {
    display: grid;
    gap: clamp(40px, 6vh, 65px);
}

.faq-category {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.faq-category > header {
    max-width: 650px;
    margin-bottom: 22px;
}

.faq-category > header h2 {
    margin-bottom: 8px;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.faq-category > header p:last-child {
    margin: 0;
    font-size: .92rem;
}

.faq-category .accordion {
    border-radius: 12px;
    background: #fff;
    padding-inline: 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
}

/* CTA Section */
.cta-section {
    padding-top: clamp(20px, 3vh, 32px);
}

.cta-panel {
    position: relative;
    padding: clamp(48px, 6vw, 75px) max(24px, 6vw);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(130deg, #1688f3, #087bd8 48%, #0ca99c);
    box-shadow: 0 24px 60px rgba(19, 112, 193, .25);
    overflow: hidden;
    text-align: center;
}

.cta-panel::before,
.cta-panel::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    pointer-events: none;
}

.cta-panel::before {
    width: 450px;
    height: 450px;
    top: -280px;
    left: -80px;
}

.cta-panel::after {
    width: 380px;
    height: 380px;
    right: -120px;
    bottom: -240px;
}

.cta-panel > * {
    position: relative;
    z-index: 1;
}

.cta-panel .eyebrow {
    color: #d9ffff;
}

.cta-panel h2 {
    margin-bottom: 14px;
    font-size: clamp(1.75rem, 3.5vw, 2.8rem);
}

.cta-panel > p:not(.eyebrow) {
    max-width: 680px;
    margin-inline: auto;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

.cta-clock {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .17);
}

.cta-clock .icon {
    width: 28px;
    height: 28px;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

/* Footer */
.site-footer {
    padding: clamp(50px, 7vh, 75px) 0 25px;
    color: #a4b0c0;
    background: var(--navy);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: clamp(28px, 4vw, 60px);
    padding-bottom: 40px;
}

.footer-brand p {
    max-width: 360px;
    margin: 18px 0 12px;
    font-size: .88rem;
    line-height: 1.55;
}

.footer-brand > a:last-child {
    color: #66b9ff;
    font-size: .86rem;
    font-weight: 600;
}

.footer-grid h2 {
    margin-bottom: 16px;
    color: #fff;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-grid > div:not(.footer-brand) a {
    display: block;
    margin: 10px 0;
    color: #8190a5;
    font-size: .86rem;
    transition: color .2s;
}

.footer-grid a:hover {
    color: #fff !important;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-bottom p {
    margin: 0;
    color: #596a82;
    font-size: .74rem;
}

/* ==========================================================================
   Professional Scroll Reveals & Entrance Animations
   ========================================================================== */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Staggered Children Transitions for Card Grids */
.js .home-pillars-grid .reveal:nth-child(1),
.js .step-grid .reveal:nth-child(1),
.js .partner-cards-grid .reveal:nth-child(1),
.js .customer-case-grid .reveal:nth-child(1),
.js .home-critical-grid .reveal:nth-child(1) {
    transition-delay: 0.04s;
}

.js .home-pillars-grid .reveal:nth-child(2),
.js .step-grid .reveal:nth-child(2),
.js .partner-cards-grid .reveal:nth-child(2),
.js .customer-case-grid .reveal:nth-child(2),
.js .home-critical-grid .reveal:nth-child(2) {
    transition-delay: 0.12s;
}

.js .home-pillars-grid .reveal:nth-child(3),
.js .step-grid .reveal:nth-child(3),
.js .partner-cards-grid .reveal:nth-child(3),
.js .customer-case-grid .reveal:nth-child(3),
.js .home-critical-grid .reveal:nth-child(3) {
    transition-delay: 0.20s;
}

.js .home-pillars-grid .reveal:nth-child(4),
.js .step-grid .reveal:nth-child(4),
.js .partner-cards-grid .reveal:nth-child(4),
.js .customer-case-grid .reveal:nth-child(4),
.js .home-critical-grid .reveal:nth-child(4) {
    transition-delay: 0.28s;
}

.js .partner-cards-grid .reveal:nth-child(5),
.js .customer-case-grid .reveal:nth-child(5) {
    transition-delay: 0.36s;
}

.js .partner-cards-grid .reveal:nth-child(6),
.js .customer-case-grid .reveal:nth-child(6) {
    transition-delay: 0.44s;
}

/* Ambient Floating Keyframe Animations */
@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes floatGentleAlt {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7px);
    }
}

@keyframes liveGlowPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(19, 214, 204, .12), 0 0 14px var(--cyan);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(19, 214, 204, .25), 0 0 20px var(--cyan);
        transform: scale(1.1);
    }
}

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

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

/* Apply Floating to Hero Elements */
.stat-one {
    animation: floatGentle 5s ease-in-out infinite;
}

.stat-two {
    animation: floatGentleAlt 6s ease-in-out infinite 0.8s;
}

.live-dot::before {
    animation: liveGlowPulse 2.4s ease-in-out infinite;
}

.orbit-one {
    animation: orbitSpinSlow 75s linear infinite;
}

.orbit-two {
    animation: orbitSpinReverse 95s linear infinite;
}

/* Micro-interactions for Buttons & Links */
.button .icon {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:hover .icon {
    transform: translateX(4px);
}

.text-link {
    transition: color 0.2s ease, gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-link .icon {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-link:hover .icon {
    transform: translateX(4px);
}

/* Card Hover Elevate Transitions */
.home-critical-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.home-critical-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 35, 68, 0.08);
    border-color: rgba(39, 140, 245, 0.4);
}

.step-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
    border-color: rgba(39, 140, 245, 0.45);
}

.home-case-snapshot {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.home-case-snapshot:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    border-color: rgba(39, 140, 245, 0.45);
}

.home-case-snapshot .icon {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-case-snapshot:hover .icon {
    transform: translateX(4px);
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .stat-one,
    .stat-two,
    .live-dot::before,
    .orbit-one,
    .orbit-two,
    .partner-orbit-ring {
        animation: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Responsive Breakpoints & Mobile Optimization
   ========================================================================== */

/* Laptop / Medium Desktop adjustments */
@media (max-width: 1100px) {
    :root {
        --header-height: 72px;
    }

    .primary-nav-links {
        gap: 18px;
    }

    .primary-nav a {
        font-size: .84rem;
    }

    .hero-grid {
        gap: 32px;
    }

    .stat-one {
        right: -8px;
    }

    .stat-two {
        left: -8px;
    }
}

/* Tablet Landscape & Below (<= 992px) */
@media (max-width: 992px) {
    .section {
        padding: clamp(42px, 5.5vh, 70px) 0;
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--header-height) + 24px);
        padding-bottom: 36px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: left;
    }

    .hero-copy {
        max-width: 680px;
    }

    .clock-stage {
        min-height: 360px;
        max-width: 500px;
        margin: 0 auto;
    }

    .page-hero {
        min-height: auto;
        padding: calc(var(--header-height) + 28px) 0 44px;
    }

    .page-hero-grid,
    .solutions-hero-grid,
    .two-column,
    .stack-grid,
    .product-explainer,
    .faq-grid,
    .about-grid,
    .story-grid,
    .automation-grid,
    .contact-grid,
    .solution-lists,
    .home-solutions-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .solutions-hero-visual {
        min-height: 330px;
    }

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

    .industry-panel,
    .industry-panel.is-active {
        grid-template-columns: 1fr;
    }

    .industry-panel-visual {
        min-height: 330px;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .capability-row-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 28px;
    }

    .capability-row.is-reversed .capability-copy,
    .capability-row.is-reversed .capability-media {
        order: initial;
    }

    .capability-media {
        min-height: 250px;
    }

    .section-intro {
        position: static;
    }

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

    .feature-card:nth-child(3n) {
        border-right: 1px solid var(--line);
    }

    .feature-card:nth-child(2n) {
        border-right: 0;
    }

    .feature-card:nth-child(n) {
        border-bottom: 1px solid var(--line);
    }

    .feature-card:nth-child(2n+1):nth-last-child(-n+2),
    .feature-card:nth-child(2n+1):nth-last-child(-n+2) ~ .feature-card {
        border-bottom: 0;
    }

    .feature-image-card-wide {
        grid-column: span 1;
    }

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

    .coverage-grid,
    .story-card-grid,
    .testimonial-grid,
    .value-grid,
    .partner-grid,
    .partner-cards-grid,
    .partner-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .career-layout {
        grid-template-columns: 1fr;
    }

    .career-summary {
        position: static;
    }

    .trust-names {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

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

    .faq-page-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .faq-sidebar {
        position: static;
    }

    .faq-sidebar nav {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 8px;
    }

    .faq-sidebar nav a {
        padding: 8px 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        text-align: center;
        background: var(--surface);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 36px;
    }

    .footer-grid > div:last-child {
        grid-column: 2;
    }
}

/* Mobile Drawer & Small Tablet (<= 860px) */
@media (max-width: 860px) {
    :root {
        --header-height: 66px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    .primary-nav {
        position: fixed;
        inset: var(--header-height) 0 auto 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 20px 24px;
        border-bottom: 1px solid rgba(17, 43, 72, .12);
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 24px 50px rgba(14, 39, 70, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
    }

    .primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .primary-nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .primary-nav a {
        padding: 11px 14px;
        border-radius: 8px;
        color: #3b4d63;
        font-size: .95rem;
    }

    .primary-nav a:hover,
    .primary-nav a.is-active {
        background: #edf6fd;
    }

    .primary-nav a::after {
        display: none;
    }

    /* Mobile Dropdown */
    .nav-item-dropdown {
        display: flex;
        flex-direction: column;
    }

    .dropdown-trigger {
        justify-content: space-between;
    }

    .dropdown-menu {
        position: static;
        transform: none !important;
        box-shadow: none;
        border: 0;
        border-left: 2px solid #d0e4f7;
        margin-left: 14px;
        margin-top: 2px;
        padding: 2px 0 6px 8px;
        background: transparent;
        opacity: 1;
        visibility: visible;
        display: flex;
    }

    .dropdown-menu a {
        padding: 8px 12px;
        font-size: .88rem;
        color: #4b5d73;
    }

    .mobile-nav-cta {
        display: block;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }

    .mobile-nav-cta .button {
        width: 100%;
    }

    .industry-detail-grid {
        grid-template-columns: 1fr;
    }

    .industry-detail:last-child {
        max-width: none;
    }

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

    .split-stat > div:nth-child(2) {
        border-right: 0;
    }

    .split-stat > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }
}

/* Mobile Phones (<= 640px) */
@media (max-width: 640px) {
    .container {
        width: min(calc(100% - 24px), var(--container));
    }

    .section {
        padding: clamp(36px, 5vh, 56px) 0;
    }

    .product-tabs-wrapper {
        padding-inline: 10px;
        margin-top: 18px;
    }

    .solution-path-grid {
        grid-template-columns: 1fr;
    }

    .solution-path-grid a {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .solution-path-grid a:last-child {
        border-bottom: 0;
    }

    .industry-switcher {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }

    .industry-switch {
        flex: 0 0 auto;
    }

    .industry-panel-copy {
        padding: 28px 20px;
    }

    .industry-panel-copy ul,
    .scenario-chip-grid {
        grid-template-columns: 1fr;
    }

    .industry-panel-visual {
        min-height: 260px;
    }

    .scenario-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .product-subnav-header {
        min-width: 0;
    }

    .product-subnav-badge {
        max-width: 100%;
        justify-content: center;
        border-radius: 12px;
        text-align: center;
        line-height: 1.35;
    }

    .product-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-radius: 10px 10px 0 0;
        padding: 4px;
        gap: 2px;
    }

    .product-tab {
        min-width: 0;
        padding: 9px 4px;
        font-size: .74rem;
        justify-content: center;
        text-align: center;
        border-radius: 6px;
        border-bottom: 0;
        white-space: normal;
        line-height: 1.25;
    }

    .product-tab.is-active {
        background: #177ef1;
        border-bottom: 0;
    }

    .product-tab.is-active::after {
        display: none;
    }

    .hero-actions,
    .cta-actions,
    .contact-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-actions .button,
    .cta-actions .button,
    .contact-actions .button {
        width: 100%;
    }

    .product-visual {
        min-height: 290px;
    }

    .product-node {
        font-size: .68rem;
        padding: 5px 9px;
    }

    .clock-stage {
        min-height: auto;
        perspective: none;
        padding: 14px 0;
    }

    .clock-panel {
        width: 100%;
        min-width: 0;
        transform: none;
        padding: 22px 18px 18px;
    }

    .clock-panel li {
        align-items: flex-start;
        gap: 12px;
    }

    .clock-panel li span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .clock-panel li strong {
        flex: 0 0 auto;
        text-align: right;
    }

    .orbit-one,
    .orbit-two {
        display: none;
    }

    .floating-stat {
        position: static;
        display: inline-grid;
        margin-top: 10px;
        min-width: 0;
        width: calc(50% - 6px);
    }

    .stat-one,
    .stat-two {
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
    }

    .clock-stage {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
    }

    .step-grid,
    .feature-grid,
    .coverage-grid,
    .story-card-grid,
    .testimonial-grid,
    .value-grid,
    .resource-grid,
    .partner-grid,
    .partner-cards-grid,
    .industry-mini-grid,
    .customer-grid {
        grid-template-columns: 1fr;
    }

    .feature-card,
    .feature-card:nth-child(n) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .feature-image-card,
    .feature-image-card-wide {
        grid-column: 1;
        min-height: 260px;
        border-bottom: 0;
    }

    .feature-logo-mosaic > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-row-inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .capability-media {
        min-height: 220px;
        padding: 20px;
        border-radius: 16px;
    }

    .home-product-card {
        grid-template-columns: 42px 1fr;
        gap: 14px;
        padding: 16px;
    }

    .tag-list {
        grid-template-columns: 1fr;
    }

    .trust-names {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        font-size: .84rem;
    }

    .tool-cloud {
        padding: 24px 14px;
    }

    .tool-cloud span {
        font-size: .78rem;
        padding: 8px 12px;
    }

    .app-cloud {
        min-height: 320px;
        padding: 24px 12px;
    }

    .app-cloud span {
        font-size: .74rem;
        padding: 6px 11px;
    }

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

    .contact-panel {
        padding: 24px 16px;
    }

    .contact-details > div {
        padding: 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-grid > div:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .platform-logo-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-explainer-visual {
        min-height: 270px;
        border-radius: 16px;
    }

    .visual-caption {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 14px;
    }
}

/* Very Small Mobile Devices (<= 380px) */
@media (max-width: 380px) {
    .floating-stat {
        width: 100%;
    }

    .clock-panel time {
        font-size: 1.6rem;
    }

    .trust-names {
        grid-template-columns: 1fr;
    }

    .split-stat {
        grid-template-columns: 1fr;
    }

    .split-stat > div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .split-stat > div:last-child {
        border-bottom: 0;
    }
}

/* ==========================================================================
   Comprehensive Mobile Responsiveness Enhancements (Phones & Tablets)
   ========================================================================== */
@media (max-width: 768px) {
    .home-video-section {
        padding: clamp(38px, 6vh, 56px) 0;
    }

    .home-video-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .home-video-copy h2 {
        font-size: clamp(1.45rem, 5.5vw, 1.95rem);
        margin-bottom: 14px;
        line-height: 1.25;
    }

    .home-video-lead {
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .home-video-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .home-video-actions .button {
        width: 100%;
    }

    .video-highlights {
        gap: 8px;
        padding-top: 16px;
    }

    .video-highlights span {
        font-size: 0.82rem;
    }

    .home-video-frame-wrap {
        padding: 6px;
        border-radius: 16px;
    }

    .video-container {
        min-height: auto;
        border-radius: 12px;
    }

    .video-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 8px 6px;
    }

    .video-yt-link {
        width: 100%;
        justify-content: center;
    }

    /* Core Pillars Mobile Showcase */
    .home-pillars-section {
        padding: clamp(36px, 5.5vh, 52px) 0;
    }

    .home-pillars-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 440px;
        margin: 0 auto;
    }

    .home-pillar-card {
        padding: 6px;
    }

    .pillar-image-wrap {
        max-width: 240px;
        height: auto;
        min-height: 140px;
        margin: 0 auto 16px;
    }

    .pillar-image-wrap img {
        max-height: 160px;
        width: auto;
        max-width: 100%;
    }

    .home-pillar-card h3 {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .home-pillar-card p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    /* Partner Portal Mobile */
    .partner-hero {
        padding: calc(var(--header-height) + 16px) 0 36px;
    }

    .partner-hero-title {
        font-size: clamp(1.75rem, 6.5vw, 2.3rem);
    }

    .partner-hero-lead {
        font-size: 0.92rem;
        margin-bottom: 22px;
    }

    .partner-hero .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .partner-hero .hero-actions .button {
        width: 100%;
    }

    .partner-proof-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .partner-hero-visual {
        max-width: 300px;
        margin-top: 24px;
    }

    .partner-core-orb {
        width: 105px;
        height: 105px;
        padding: 8px;
    }

    .partner-core-orb .core-icon-circle {
        width: 26px;
        height: 26px;
        margin-bottom: 4px;
    }

    .partner-core-orb strong {
        font-size: 0.8rem;
    }

    .partner-core-orb small {
        font-size: 0.6rem;
    }

    .partner-orbit-badge {
        padding: 4px 7px;
        border-radius: 7px;
    }

    .partner-orbit-badge img {
        height: 15px;
        max-width: 48px;
    }

    .partner-toolbar {
        padding: 12px;
        margin: 24px 0 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .partner-filter-pills {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 4px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .partner-filter-pills::-webkit-scrollbar {
        display: none;
    }

    .partner-filter-btn {
        flex: 0 0 auto;
        font-size: 0.78rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    .partner-search-wrapper {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
    }

    .partner-search-box {
        width: 100%;
    }

    .partner-search-box input {
        width: 100% !important;
    }

    .partner-live-count {
        font-size: 0.76rem;
        text-align: right;
    }

    .partner-cards-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .partner-detail-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .partner-logo-box {
        height: 72px;
        padding: 10px;
        margin-bottom: 14px;
    }

    .partner-logo-box img {
        max-height: 40px;
        max-width: 140px;
    }

    .partner-apply-card {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .partner-apply-form-wrap {
        padding: 20px 14px;
        border-radius: 14px;
    }

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

    /* Customers & Case Studies Mobile */
    .customer-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .customer-filter-list {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .customer-filter-list::-webkit-scrollbar {
        display: none;
    }

    .customer-filter {
        flex: 0 0 auto;
        font-size: 0.8rem;
        padding: 6px 14px;
        white-space: nowrap;
    }

    .case-profile-aside {
        padding-bottom: 16px;
    }

    .case-profile-logo-wrap {
        height: 56px;
        max-width: 150px;
    }

    .case-story-switcher select {
        width: 100%;
        font-size: 0.86rem;
    }

    .case-prev-next {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .case-prev-card,
    .case-next-card {
        padding: 16px;
        text-align: left;
    }

    .case-next-card small {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 20px) !important;
    }

    h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }

    h2 {
        font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    }

    .hero-assurances {
        flex-direction: column;
        gap: 8px;
    }

    .hero-assurances li {
        font-size: 0.82rem;
    }

    .home-client-wall {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-client-logo {
        min-height: 90px;
        padding: 14px;
    }

    .home-client-logo img {
        max-width: 110px;
        max-height: 42px;
    }

    .home-platform-board {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .home-platform-board > div {
        min-height: 105px;
        padding: 14px 10px;
    }

    .home-platform-board img {
        max-width: 65px;
        max-height: 42px;
    }

    .home-platform-board span {
        font-size: .78rem;
    }
}

/* Global Overflow Prevention */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

img, svg, picture, video, iframe {
    max-width: 100%;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* Signup & Thank You Page Styles */
.signup-section { background: #f8fafc; padding: clamp(48px, 6vw, 84px) 0; }
.signup-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.signup-form-header { margin-bottom: 24px; }
.signup-form-header h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: #0f172a; margin: 4px 0 8px; }
.signup-form-header p { color: #64748b; font-size: .95rem; margin: 0; }
.signup-trust-card { padding: clamp(24px, 4vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 40px rgba(15, 23, 42, .06); }
.signup-trust-card h3 { font-size: 1.45rem; color: #0f172a; margin: 6px 0 12px; }
.signup-trust-card > p { color: #475569; font-size: .92rem; line-height: 1.6; margin-bottom: 20px; }
.signup-clients-wrap { margin: 20px 0 26px; }
.signup-features-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #e2e8f0; }
.signup-feature-item { display: flex; gap: 14px; align-items: flex-start; }
.signup-feature-item strong { display: block; font-size: .92rem; color: #0f172a; margin-bottom: 2px; }
.signup-feature-item p { margin: 0; font-size: .84rem; color: #64748b; line-height: 1.5; }
.signup-direct-note { margin-top: 24px; padding: 14px 16px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; font-size: .84rem; color: #0369a1; line-height: 1.5; }
.signup-direct-note a { color: #0284c7; font-weight: 600; text-decoration: underline; }

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


/* ==========================================================================
   Blog & Article Styles
   ========================================================================== */

.blog-hero {
    position: relative;
    padding-top: calc(var(--header-height) + clamp(36px, 5vw, 64px));
    padding-bottom: clamp(36px, 5vw, 60px);
    overflow: hidden;
}
.blog-hero-inner { max-width: 860px; }
.blog-hero-copy h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 16px; }
.blog-hero-copy p { font-size: 1.15rem; color: #cbd5e1; line-height: 1.6; }

.blog-section { background: #f8fafc; padding: clamp(40px, 6vw, 72px) 0; min-height: 60vh; }

/* Filter & Search Toolbar */
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.blog-filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid #dce5ee; color: #475569; font-size: .88rem; font-weight: 600; text-decoration: none; transition: all .2s ease; cursor: pointer; }
.blog-filter-pill small { display: inline-block; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: .74rem; font-weight: 700; }
.blog-filter-pill:hover { border-color: #0284c7; color: #0284c7; background: #f0f9ff; }
.blog-filter-pill.is-active { background: #0284c7; border-color: #0284c7; color: #fff; box-shadow: 0 4px 14px rgba(2, 132, 199, .25); }
.blog-filter-pill.is-active small { background: rgba(255, 255, 255, .25); color: #fff; }

.blog-search-box { position: relative; min-width: 240px; flex: 1; max-width: 340px; }
.blog-search-box input { width: 100%; padding: 10px 16px 10px 40px; border-radius: 999px; border: 1px solid #dce5ee; background: #fff; font-size: .88rem; color: #0f172a; outline: none; transition: all .2s; }
.blog-search-box input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2, 132, 199, .15); }
.blog-search-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }

/* Meta Row & Tags */
.blog-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: #64748b; }
.blog-category-tag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #e0f2fe; color: #0369a1; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.blog-category-tag.mini { font-size: .68rem; padding: 2px 7px; }
.blog-meta-dot { color: #94a3b8; }
.blog-read-time { display: inline-flex; align-items: center; gap: 4px; }
.blog-read-time .icon { width: 13px; height: 13px; }

/* Featured Card */
.blog-featured-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; overflow: hidden; margin-bottom: 44px; box-shadow: 0 20px 45px rgba(15, 23, 42, .06); transition: box-shadow .25s ease, transform .25s ease; }
.blog-featured-card:hover { box-shadow: 0 28px 60px rgba(15, 23, 42, .1); transform: translateY(-3px); }
.blog-featured-media { display: block; overflow: hidden; background: #08162b; min-height: 280px; position: relative; }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.blog-featured-card:hover .blog-featured-media img { transform: scale(1.04); }
.blog-featured-body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.3; margin: 12px 0 14px; color: #0f172a; }
.blog-featured-body h2 a { color: #0f172a; text-decoration: none; transition: color .2s ease; }
.blog-featured-body h2 a:hover { color: #0284c7; }
.blog-featured-body p { color: #475569; font-size: .98rem; line-height: 1.6; margin: 0 0 22px; }
.blog-author-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
.blog-author-info strong { display: block; color: #0f172a; font-size: .88rem; }
.blog-author-info span { color: #64748b; font-size: .78rem; }

/* Blog Grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .04); transition: all .25s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(15, 23, 42, .08); border-color: #cbd5e1; }
.blog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #08162b; position: relative; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.05); }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card-body h3 { font-size: 1.18rem; line-height: 1.4; margin: 10px 0 12px; color: #0f172a; }
.blog-card-body h3 a { color: #0f172a; text-decoration: none; transition: color .2s ease; }
.blog-card-body h3 a:hover { color: #0284c7; }
.blog-card-body p { color: #64748b; font-size: .88rem; line-height: 1.55; margin: 0 0 18px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #f1f5f9; font-size: .8rem; color: #94a3b8; }

/* Pagination */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 52px; flex-wrap: wrap; }
.pagination-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; background: #fff; border: 1px solid #dce5ee; color: #1e293b; font-size: .88rem; font-weight: 600; text-decoration: none; transition: all .2s ease; }
.pagination-prev .icon { transform: rotate(180deg); }
.pagination-btn:hover { background: #f0f9ff; border-color: #0284c7; color: #0284c7; }
.pagination-numbers { display: flex; align-items: center; gap: 6px; }
.pagination-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #dce5ee; color: #334155; font-size: .88rem; font-weight: 600; text-decoration: none; transition: all .2s ease; }
.pagination-number:hover { border-color: #0284c7; color: #0284c7; }
.pagination-number.is-active { background: #0284c7; border-color: #0284c7; color: #fff; }
.pagination-ellipsis { padding: 0 6px; color: #94a3b8; font-weight: 700; }

/* Empty State */
.blog-empty-state { text-align: center; padding: 60px 20px; max-width: 500px; margin: 0 auto; }
.blog-empty-state h3 { margin: 18px 0 8px; color: #0f172a; }
.blog-empty-state p { color: #64748b; margin-bottom: 22px; }

/* ==========================================================================
   Single Blog Post Layout & Reading Experience
   ========================================================================== */

.reading-progress-bar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    z-index: 99;
    transition: width .08s linear;
}

.blog-post-hero {
    position: relative;
    padding-top: calc(var(--header-height) + clamp(36px, 5vw, 64px));
    padding-bottom: clamp(36px, 5vw, 60px);
    overflow: hidden;
}
.blog-post-hero-inner {
    max-width: 860px;
    margin-inline: auto;
}

.blog-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
    font-size: .84rem;
    color: #94a3b8;
}
.blog-breadcrumb a {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s ease;
    display: inline-flex;
    align-items: center;
}
.blog-breadcrumb a:hover {
    color: #7dd3fc;
    text-decoration: underline;
}
.blog-breadcrumb .breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    opacity: .7;
}
.blog-breadcrumb .breadcrumb-separator .icon {
    width: 12px;
    height: 12px;
}
.blog-breadcrumb .breadcrumb-current {
    color: #cbd5e1;
    font-weight: 500;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-post-title {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.22;
    letter-spacing: -.03em;
    margin: 16px 0 24px;
    color: #fff;
    font-weight: 800;
}

.blog-post-author-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.blog-post-author-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}
.blog-author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .15);
    border: 1px solid rgba(56, 189, 248, .3);
    color: #38bdf8;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.blog-author-avatar.large { width: 56px; height: 56px; flex-shrink: 0; }
.blog-author-details strong { display: block; color: #f8fafc; font-size: .95rem; }
.blog-author-details span { color: #94a3b8; font-size: .8rem; }

.blog-post-share {
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #e2e8f0;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}
.blog-share-btn .icon { width: 14px; height: 14px; }
.blog-share-btn:hover {
    background: rgba(56, 189, 248, .2);
    border-color: rgba(56, 189, 248, .5);
    color: #38bdf8;
}

.blog-post-content-section { background: #f8fafc; padding: clamp(40px, 6vw, 72px) 0; }
.blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(36px, 5vw, 64px); align-items: start; }
.blog-post-main { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 16px 40px rgba(15, 23, 42, .05); }
.blog-post-featured-figure { margin: 0 0 36px; border-radius: 14px; overflow: hidden; background: #08162b; border: 1px solid #e2e8f0; }
.blog-post-featured-figure img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }

/* Article Typography */
.blog-article-content { color: #334155; font-size: 1.06rem; line-height: 1.85; }
.blog-article-content p,
.blog-article-content .wp-block-paragraph { margin: 0 0 1.6em; color: #334155; font-size: 1.06rem; line-height: 1.85; }
.blog-article-content h2,
.blog-article-content .wp-block-heading { font-size: 1.75rem; color: #0f172a; margin: 2em 0 .7em; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.blog-article-content h3 { font-size: 1.35rem; color: #0f172a; margin: 1.8em 0 .6em; line-height: 1.4; font-weight: 700; }
.blog-article-content h4 { font-size: 1.15rem; color: #0f172a; margin: 1.5em 0 .5em; font-weight: 700; }
.blog-article-content ul,
.blog-article-content .wp-block-list,
.blog-article-content ol { margin: 0 0 1.6em 1.6em; padding: 0; }
.blog-article-content li { margin-bottom: .65em; color: #334155; line-height: 1.75; }
.blog-article-content blockquote,
.blog-article-content .wp-block-quote { margin: 2em 0; padding: 20px 26px; border-left: 4px solid #0284c7; background: #f0f9ff; border-radius: 0 14px 14px 0; color: #0369a1; font-style: italic; font-size: 1.08rem; line-height: 1.7; }
.blog-article-content strong { color: #0f172a; font-weight: 700; }
.blog-article-content a { color: #0284c7; text-decoration: underline; font-weight: 600; transition: color .2s; }
.blog-article-content a:hover { color: #0369a1; }
.blog-article-content code { background: #f1f5f9; padding: 3px 8px; border-radius: 6px; font-size: .88em; color: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; border: 1px solid #e2e8f0; }
.blog-article-content pre { background: #0b1526; color: #e2e8f0; padding: 24px; border-radius: 14px; overflow-x: auto; margin: 2em 0; border: 1px solid #1e293b; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.blog-article-content pre code { background: transparent; padding: 0; border: none; color: inherit; }
.blog-article-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.8em 0; display: block; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); border: 1px solid #e2e8f0; }

.blog-post-author-box { display: flex; gap: 20px; padding: 24px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; margin: 44px 0 32px; }
.blog-post-author-box h4 { margin: 0 0 6px; font-size: 1.05rem; color: #0f172a; }
.blog-post-author-box p { margin: 0; font-size: .88rem; color: #64748b; line-height: 1.55; }

/* Next / Prev Navigation */
.blog-adjacent-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; padding-top: 32px; border-top: 1px solid #e2e8f0; }
.adjacent-post-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; text-decoration: none; transition: all .2s ease; }
.adjacent-post-card:not(.is-disabled):hover { background: #f0f9ff; border-color: #38bdf8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2, 132, 199, .08); }
.adjacent-prev .adjacent-label .icon { transform: rotate(180deg); }
.adjacent-label { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0284c7; }
.adjacent-label .icon { width: 12px; height: 12px; }
.adjacent-post-card strong { font-size: .95rem; color: #0f172a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adjacent-post-card.is-disabled { opacity: .55; background: #f1f5f9; pointer-events: none; }
.adjacent-post-card.is-disabled strong { color: #64748b; }

.blog-post-nav-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; gap: 14px; }

/* Sidebar */
.blog-post-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--header-height) + 20px); }
.blog-sidebar-widget { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(15, 23, 42, .04); }
.blog-sidebar-widget h3 { font-size: 1.25rem; color: #0f172a; margin: 4px 0 10px; }
.blog-sidebar-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.blog-sidebar-bullets li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #475569; }
.blog-sidebar-bullets .icon { width: 14px; height: 14px; color: #0284c7; flex-shrink: 0; }
.blog-category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.blog-category-list a { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; color: #334155; font-size: .86rem; font-weight: 500; text-decoration: none; transition: all .2s; }
.blog-category-list a:hover { background: #f0f9ff; color: #0284c7; }
.blog-category-list a span { color: #94a3b8; font-size: .78rem; font-weight: 600; }
.blog-recent-list { display: flex; flex-direction: column; gap: 16px; }
.blog-recent-item { display: block; text-decoration: none; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; transition: transform .2s ease; }
.blog-recent-item:last-child { border-bottom: 0; padding-bottom: 0; }
.blog-recent-item strong { display: block; font-size: .88rem; color: #0f172a; line-height: 1.4; margin: 6px 0 4px; transition: color .2s ease; }
.blog-recent-item:hover strong { color: #0284c7; }
.blog-recent-item time { font-size: .75rem; color: #94a3b8; }

/* Related Section */
.blog-related-section { background: #fff; border-top: 1px solid #e2e8f0; padding: clamp(48px, 6vw, 80px) 0; }

@media (max-width: 960px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-post-layout { grid-template-columns: 1fr; }
    .blog-post-sidebar { position: static; }
    .blog-adjacent-nav { grid-template-columns: 1fr; }
    .blog-toolbar { flex-direction: column; align-items: stretch; }
    .blog-search-box { max-width: 100%; }
}