/* Generated by tools/build-css.py from public/css/src/. Edit the sources, then rebuild. */
/* ==========================================================================
   Ideentrix: design tokens, base, layout, components, pages.
   Colours come from the logo artwork. Components read semantic tokens only.
   ========================================================================== */

@font-face { font-family: "Outfit"; src: url("../fonts/outfit-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
    /* Brand (from the logo) */
    --orange: #FF6100;
    --orange-700: #B34400;
    --blue: #0059FF;
    --blue-hover: #0047D6;
    --deep: #002DA6;
    --teal: #00D3BB;
    --teal-700: #00756E;
    --teal-hi: #00FFE1;

    /* Light theme surfaces (Luminous ice-blue palette matching flagship card UI) */
    --bg: #F0F4FC;
    --bg-tint: #E8F0FA;
    --surface: #FFFFFF;
    --surface-2: #F6F9FE;
    --surface-inverse: #07102A;
    --border: #E1E8F5;
    --border-strong: #C8D7EE;
    --text: #0A1330;
    --text-2: #334155;
    --muted: #56657A;
    --link: var(--blue);
    --accent-soft: #EEF4FF;
    --accent-border: #D6E4FF;
    --teal-soft: #E1FAF6;
    --orange-soft: #FFF0E6;
    --focus: #0059FF;

    --shadow-sm: 0 2px 10px rgba(0, 89, 255, .04), 0 1px 3px rgba(10, 30, 80, .05);
    --shadow-md: 0 4px 20px -2px rgba(0, 89, 255, .06), 0 14px 34px -8px rgba(10, 30, 80, .08);
    --shadow-lg: 0 12px 38px -4px rgba(0, 89, 255, .12), 0 28px 64px -12px rgba(10, 30, 80, .16);

    --grad: linear-gradient(100deg, #0059FF 0%, #0B7CFF 48%, #00BFA8 100%);
    --grad-brand: linear-gradient(120deg, var(--orange), var(--blue) 55%, var(--teal));
    --grad-accent-line: linear-gradient(90deg, #00D3BB 0%, #0059FF 50%, rgba(0, 89, 255, 0.15) 100%);
    --grad-accent-hover: linear-gradient(90deg, #00FFE1 0%, #0059FF 100%);

    /* Type */
    --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

    /* Shape and space - 22px border radius signature box style */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --container: 1240px;
    --gutter: 24px;
    --section: clamp(72px, 9vw, 128px);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --header-h: 76px;
}

:root[data-theme="dark"] {
    --bg: #060B19;
    --bg-tint: #0A1226;
    --surface: #0E1630;
    --surface-2: #121B38;
    --surface-inverse: #030713;
    --border: #1D2849;
    --border-strong: #2B3A62;
    --text: #EEF2FB;
    --text-2: #B8C2DB;
    --muted: #8591B1;
    --link: #6E9DFF;
    --accent-soft: #0F1F4A;
    --accent-border: #1E3A78;
    --teal-soft: #06302F;
    --orange-soft: #33190A;
    --focus: #6E9DFF;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
    --grad: linear-gradient(100deg, #4D86FF 0%, #2E9BFF 45%, #00D3BB 100%);
    --grad-accent-line: linear-gradient(90deg, #00D3BB 0%, #4D86FF 50%, rgba(77, 134, 255, 0.2) 100%);
    --grad-accent-hover: linear-gradient(90deg, #00FFE1 0%, #6E9DFF 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.65 var(--font-body);
    overflow-x: clip; /* not hidden: hidden disables position: sticky */
    -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, .h4, .display { font-family: var(--font-display); font-weight: 700; color: var(--text); letter-spacing: -.02em; margin: 0; }
h1, .display { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.22; }
h4, .h4 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.lead { font-size: 18px; line-height: 1.65; color: var(--text-2); max-width: 64ch; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 180% auto; }
@media (prefers-reduced-motion: no-preference) {
    .grad { animation: gradShift 9s ease-in-out infinite alternate; }
}
@keyframes gradShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.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; }
.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }

:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

.section { padding: var(--section) 0; position: relative; }
.section-tight { padding: 32px 0 var(--section); }
.section-tint { background: linear-gradient(180deg, var(--bg-tint), var(--bg)); border-top: 1px solid var(--border); }

/* ---------- Kicker / chips / buttons ---------- */
.kicker { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-weight: 500; }
:root[data-theme="dark"] .kicker { color: var(--link); }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--grad-brand); border-radius: 2px; }
.kicker-light { color: #BFD3FF !important; }

.btn {
    --mx: 0px; --my: 0px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 24px; border-radius: 999px;
    font: 600 15px/1 var(--font-body); letter-spacing: .005em;
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap;
    transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
    transform: translate(var(--mx), var(--my));
}
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary {
    background: linear-gradient(135deg, #1467FF, var(--blue) 60%, #0048E0);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(0, 89, 255, .65);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    background: var(--blue-hover);
    box-shadow: 0 12px 28px -8px rgba(0, 89, 255, .75);
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: rotate(25deg);
    pointer-events: none;
    transition: none;
}
.btn-primary:hover::after {
    animation: btnShimmer 0.85s ease-out;
}
.btn-primary:focus-visible { outline: 2.5px solid #fff; outline-offset: -5px; }
@keyframes btnShimmer {
    from { left: -75%; }
    to { left: 140%; }
}
.btn-ghost { background: var(--surface); color: var(--blue); border-color: rgba(0, 89, 255, .45); }
:root[data-theme="dark"] .btn-ghost { color: var(--link); border-color: rgba(110, 157, 255, .45); background: transparent; }
.btn-ghost:hover { border-color: var(--blue); background: var(--accent-soft); }
.btn-light { background: #fff; color: var(--deep); }
.btn-light:hover { background: #EAF1FF; }
.btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-text { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--link); font-weight: 600; font-size: 14px; cursor: pointer; padding: 6px 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .2s, color .2s; }
.icon-btn:hover { color: var(--blue); border-color: var(--border-strong); }
.icon-btn-sm { width: 34px; height: 34px; border-radius: 10px; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12.5px; line-height: 1; padding: 7px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }

/* ---------- Brand swap (light/dark artwork) ---------- */
.brand-dark { display: none; }
:root[data-theme="dark"] .brand-light { display: none; }
:root[data-theme="dark"] .brand-dark { display: block; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 100%; }
.brand { display: flex; align-items: center; flex: none; text-decoration: none !important; }
.brand img { height: 38px; width: auto; }
.main-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { display: block; padding: 10px 12px; font-weight: 500; font-size: 15px; color: var(--text); text-decoration: none !important; position: relative; border-radius: 10px; }
.nav-item.has-menu .nav-link { padding-right: 2px; }
.nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-item.has-menu .nav-link::after { right: 2px; }
.nav-link:hover::after, .nav-link.is-active::after, .nav-item.is-open .nav-link::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--blue); }
:root[data-theme="dark"] .nav-link.is-active { color: var(--link); }
.nav-caret { background: none; border: 0; padding: 10px 8px 10px 4px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.nav-caret .icon { transition: transform .2s; }
.nav-item.is-open .nav-caret .icon { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta { min-height: 44px; padding: 0 20px; }
.menu-toggle { display: none; }

/* Mega menu */
.mega { position: fixed; left: 0; right: 0; top: var(--header-h); background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 28px 0 32px; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mega.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mega:not(.is-visible) { pointer-events: none; }
.mega-inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 28px; }
.mega-col-wide { grid-column: span 3; }
.mega-head { color: var(--muted); margin-bottom: 10px; padding-left: 12px; }
.mega-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none !important; position: relative; transition: background .2s; }
.mega-link:hover { background: var(--bg-tint); }
.mega-link::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--grad-brand); opacity: 0; transition: opacity .2s; }
.mega-link:hover::before { opacity: 1; }
.mega-link strong { display: block; font-size: 14.5px; font-weight: 600; }
.mega-link small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.mega-link-static { cursor: default; }
.mega-link-static:hover { background: none; }
.mega-link-static:hover::before { opacity: 0; }
.mega-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--blue); flex: none; }
:root[data-theme="dark"] .mega-icon { color: var(--link); }
.mega-icon .icon { width: 18px; height: 18px; }
.mega-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-top: 7px; flex: none; }
.mega-feature { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(160deg, #0B1D4F, #07102A); color: #D8E2FA; text-decoration: none !important; position: relative; overflow: hidden; border: 1px solid #1B2C5E; }
.mega-feature::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 200px; height: 200px; background: conic-gradient(from 200deg, var(--orange), var(--blue), var(--teal), var(--orange)); opacity: .22; filter: blur(2px); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.mega-feature .mono { color: #7FA8FF; }
.mega-feature-teal .mono { color: var(--teal); }
.mega-feature strong { font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: #fff; }
.mega-feature span { font-size: 14px; line-height: 1.5; }
.mega-feature-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.mega-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega-logo { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; color: var(--text); text-decoration: none !important; transition: background .2s; }
.mega-logo:hover { background: var(--bg-tint); }
.mega-logo strong { display: block; font-size: 14.5px; }
.mega-logo small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Vendor logos always sit on light plates */
.logo-plate {
    display: inline-grid;
    place-items: center;
    background: #fff;
    border: 1px solid #E3E8F2;
    border-radius: 12px;
    padding: 8px 12px;
    width: 112px;
    height: 56px;
    flex: none;
    text-decoration: none !important;
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s var(--ease);
}
a.logo-plate:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
    box-shadow: 0 6px 18px -4px rgba(0, 89, 255, .18);
}
.logo-plate img { max-height: 30px; width: auto; max-width: 100%; }
.logo-plate-sm { width: 96px; height: 46px; padding: 6px 10px; }
.logo-plate-sm img { max-height: 24px; }
.logo-plate-lg { width: 168px; height: 80px; }
.logo-plate-lg img { max-height: 42px; }

/* Text plate (Custom Core) */
.logo-plate.logo-plate-text,
.logo-plate-text {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    color: #0A1330;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-decoration: none !important;
    box-sizing: border-box;
}
.logo-plate-text .icon {
    width: 16px;
    height: 16px;
    color: var(--blue);
    flex: none;
}
.logo-plate-text span {
    font-size: 11.5px;
    font-weight: 600;
    color: #0A1330;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .01em;
}
.logo-plate-sm.logo-plate-text {
    gap: 2px;
    padding: 4px 6px;
}
.logo-plate-sm.logo-plate-text .icon {
    width: 13px;
    height: 13px;
}
.logo-plate-sm.logo-plate-text span {
    font-size: 9.5px;
}
a.logo-plate-text:hover span {
    color: var(--blue);
}
.mark-plate { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #E3E8F2; }
.mark-plate img { width: 22px; height: 22px; }

/* Mobile sheet */
.mobile-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: 16px var(--gutter) 20px; overflow-y: auto; }
.mobile-sheet[hidden] { display: none; }
.mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-sheet-head img { height: 32px; width: auto; }
.mobile-nav { display: grid; }
.mobile-nav > a, .mobile-nav summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font: 600 20px/1.2 var(--font-display); color: var(--text); border-bottom: 1px solid var(--border); list-style: none; cursor: pointer; text-decoration: none !important; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] summary .icon { transform: rotate(180deg); }
.mobile-nav details a { display: block; padding: 10px 12px; color: var(--text-2); font-size: 16px; }
.mobile-sheet-cta { margin-top: auto; padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 1260px) {
    .header-inner { gap: 16px; }
    .nav-link { padding: 10px 8px; font-size: 14px; }
}
@media (max-width: 1080px) {
    .main-nav, .header-cta { display: none; }
    .menu-toggle { display: inline-grid; }
    .header-actions { margin-left: auto; }
}
@media (max-width: 420px) { .brand img { height: 30px; } }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .net-pulse, .hero-waves path { display: none; }
}

/* ---------- Section heads ---------- */
.section-head { margin-bottom: 52px; display: grid; gap: 16px; }
.section-head .kicker { margin-bottom: 0; }
.section-head-center { text-align: center; justify-items: center; }
.section-head-center .lead { margin: 0 auto; }
.section-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
.section-head-split .kicker { grid-column: 1 / -1; }
.section-head-split .lead { font-size: 17px; }
@media (max-width: 900px) { .section-head-split { grid-template-columns: 1fr; } }
.center-link { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; padding: 36px 0 0; isolation: isolate; }
.hero-bg { position: absolute; inset: calc(var(--header-h) * -1) 0 0 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(720px 520px at 82% 30%, rgba(0, 89, 255, .10), transparent 70%),
        radial-gradient(520px 420px at 4% 12%, rgba(0, 211, 187, .08), transparent 70%),
        linear-gradient(180deg, #FAFCFF, var(--bg));
}
:root[data-theme="dark"] .hero-bg { background: radial-gradient(720px 520px at 82% 30%, rgba(0, 89, 255, .22), transparent 70%), radial-gradient(520px 420px at 4% 12%, rgba(0, 211, 187, .10), transparent 70%), linear-gradient(180deg, #081132, var(--bg)); }
.hero-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0, 89, 255, .16) 1.2px, transparent 1.4px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 60% 50% at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 70% 40%, #000 20%, transparent 75%); }
.hero-waves { position: absolute; left: -4%; right: -4%; bottom: -80px; width: 108%; height: 380px; overflow: visible; pointer-events: none; }
.hero-waves path { fill: none; stroke-width: 1.35; opacity: .46; transform-box: fill-box; transform-origin: 50% 50%; will-change: transform, opacity; }
.hero-waves .wave-glow { stroke-width: 2.2; opacity: .28; filter: drop-shadow(0 0 6px rgba(0, 211, 187, .3)); }
.w-blue { stroke: #3D82FF; }
.w-orange { stroke: #FF7A26; }
.w-teal { stroke: #1AD5C0; }

@media (prefers-reduced-motion: no-preference) {
    .hero-waves {
        animation: heroWaveDrift 18s ease-in-out infinite alternate;
    }
    .hero-waves .wave-line:nth-child(4n + 1) {
        animation: waveFlow1 6.8s ease-in-out infinite;
    }
    .hero-waves .wave-line:nth-child(4n + 2) {
        animation: waveFlow2 8.4s ease-in-out infinite;
        animation-delay: -2.1s;
    }
    .hero-waves .wave-line:nth-child(4n + 3) {
        animation: waveFlow3 7.5s ease-in-out infinite;
        animation-delay: -4.2s;
    }
    .hero-waves .wave-line:nth-child(4n + 4) {
        animation: waveFlow4 9.6s ease-in-out infinite;
        animation-delay: -5.8s;
    }
    .hero-waves .wave-glow {
        animation: waveGlowFlow 11s ease-in-out infinite alternate;
    }
    .hero-waves .wave-glow:nth-child(even) {
        animation-delay: -5.5s;
    }
}

@keyframes heroWaveDrift {
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-28px) translateY(-14px); }
    100% { transform: translateX(18px) translateY(8px); }
}

@keyframes waveFlow1 {
    0%, 100% { transform: translateY(0) scaleY(1) skewX(0deg); opacity: 0.38; }
    50% { transform: translateY(-16px) scaleY(1.16) skewX(1.8deg); opacity: 0.68; }
}
@keyframes waveFlow2 {
    0%, 100% { transform: translateY(0) scaleY(1) skewX(0deg); opacity: 0.45; }
    50% { transform: translateY(18px) scaleY(0.86) skewX(-1.6deg); opacity: 0.64; }
}
@keyframes waveFlow3 {
    0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); opacity: 0.36; }
    50% { transform: translateY(-12px) scaleY(1.18) scaleX(1.03); opacity: 0.70; }
}
@keyframes waveFlow4 {
    0%, 100% { transform: translateY(0) scaleY(1) skewY(0deg); opacity: 0.42; }
    50% { transform: translateY(15px) scaleY(0.90) skewY(1.2deg); opacity: 0.60; }
}
@keyframes waveGlowFlow {
    0% { transform: translateY(0) scaleY(1); opacity: 0.22; }
    50% { transform: translateY(-18px) scaleY(1.12); opacity: 0.45; }
    100% { transform: translateY(10px) scaleY(0.94); opacity: 0.26; }
}

.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 40px; align-items: center; min-height: min(760px, calc(100vh - var(--header-h) - 120px)); }
.chip-line { display: inline-flex; flex-wrap: wrap; gap: 10px; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border); color: var(--text-2); font-size: 11.5px; letter-spacing: .2em; margin-bottom: 30px; }
.chip-line span { color: var(--border-strong); }
.hero-copy h1 { max-width: 13ch; }
.hero-lead { font-size: 19px; line-height: 1.6; color: var(--text-2); margin-top: 28px; max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.proof-row { margin-top: 40px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11.5px; letter-spacing: .18em; }
.proof-row span { width: 40px; height: 2px; background: var(--blue); border-radius: 2px; flex: none; }

.hero-visual { position: relative; }
.net { position: relative; aspect-ratio: 620 / 560; width: 100%; }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.net-path { fill: none; stroke: url(#net-a); stroke-width: 1.6; opacity: .55; stroke-dasharray: 2 5; }
.net-dot { fill: var(--blue); opacity: .5; transform-box: fill-box; transform-origin: center; }
.net-pulse { stroke: #fff; stroke-width: 2; }
.pulse-orange { fill: var(--orange); }
.pulse-teal { fill: var(--teal); }
.pulse-blue { fill: var(--blue); }

@keyframes corePulse {
    0%, 100% {
        box-shadow: var(--shadow-lg), 0 0 0 8px color-mix(in srgb, var(--surface) 55%, transparent), 0 0 32px rgba(0, 89, 255, 0.08);
    }
    50% {
        box-shadow: var(--shadow-lg), 0 0 0 14px color-mix(in srgb, var(--surface) 35%, transparent), 0 0 54px rgba(0, 89, 255, 0.22);
    }
}
@keyframes nodeFloatA {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 6px)); }
}
@keyframes nodeFloatB {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% + 5px)); }
}
@keyframes dotTwinkle {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.4); }
}

.net-core, .net-node { position: absolute; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-align: center; text-decoration: none !important; color: var(--text); }
.net-core { width: 40%; padding: 22px 16px 16px; border-radius: 26px; display: grid; justify-items: center; gap: 6px; z-index: 2; box-shadow: var(--shadow-lg), 0 0 0 8px color-mix(in srgb, var(--surface) 55%, transparent); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.net-core:hover { transform: translate(-50%, calc(-50% - 6px)) scale(1.02); box-shadow: var(--shadow-lg), 0 0 32px rgba(0, 89, 255, 0.22); border-color: rgba(0, 89, 255, 0.45); }
.net-core img { height: 62px; width: auto; }
.net-core strong { font: 700 clamp(17px, 2vw, 24px)/1.1 var(--font-display); letter-spacing: -.02em; margin-top: 4px; }
.net-core > .mono { font-size: 10px; letter-spacing: .22em; color: var(--muted); }
.net-core-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--blue); font-size: 9.5px; letter-spacing: .12em; }
:root[data-theme="dark"] .net-core-tag { color: var(--link); }
.net-node { width: 25%; padding: 16px 10px 14px; border-radius: 20px; display: grid; justify-items: center; gap: 4px; color: var(--text); text-decoration: none !important; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; z-index: 1; }
.net-node:hover { transform: translate(-50%, calc(-50% - 7px)) scale(1.03); box-shadow: var(--shadow-lg), 0 12px 28px rgba(0, 89, 255, .15); border-color: rgba(0, 89, 255, .45); }
.net-node strong { font: 600 clamp(13px, 1.15vw, 15.5px)/1.2 var(--font-display); }
.net-node > span:last-child { font-size: clamp(11px, .9vw, 12.5px); color: var(--muted); line-height: 1.35; }
.net-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--blue); margin-bottom: 6px; transition: transform .3s var(--ease); }
.net-node:hover .net-icon { transform: scale(1.1) rotate(4deg); }
:root[data-theme="dark"] .net-icon { color: var(--link); }
.net-node:nth-of-type(3n+1) .net-icon { background: var(--orange-soft); color: var(--orange-700); }
.net-node:nth-of-type(3n+2) .net-icon { background: var(--teal-soft); color: var(--teal-700); }
:root[data-theme="dark"] .net-node:nth-of-type(3n+1) .net-icon { color: #FF9A55; }
:root[data-theme="dark"] .net-node:nth-of-type(3n+2) .net-icon { color: var(--teal); }

@media (prefers-reduced-motion: no-preference) {
    .net-core { animation: corePulse 5s ease-in-out infinite; }
    .net-node:nth-of-type(odd) { animation: nodeFloatA 6.5s ease-in-out infinite; }
    .net-node:nth-of-type(even) { animation: nodeFloatB 7.5s ease-in-out infinite; animation-delay: -2s; }
    .net-node:hover { animation-play-state: paused; }
    .net-dot { animation: dotTwinkle 4s ease-in-out infinite; }
    .net-dot:nth-child(even) { animation-delay: -2s; }
}

.stat-band { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); position: relative; z-index: 2; transform: translateY(40px); transition: box-shadow .35s var(--ease); }
.stat-band.is-in { transform: translateY(40px); }
.stat-band li { display: flex; align-items: center; gap: 16px; padding: 26px 28px; transition: background .25s ease; }
.stat-band li:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.stat-band li:hover .stat-icon { transform: scale(1.1) rotate(3deg); }
.stat-band li + li { border-left: 1px solid var(--border); }
.stat-band strong { display: block; font: 700 36px/1 var(--font-display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-band li span:last-child { font-size: 14.5px; color: var(--text-2); line-height: 1.3; }
.stat-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--blue); flex: none; transition: transform .3s var(--ease); }
:root[data-theme="dark"] .stat-icon { color: var(--link); }

@media (max-width: 1080px) {
    .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; }
    .hero-copy h1 { max-width: 16ch; }
    .hero-visual { max-width: 640px; margin: 20px auto 0; width: 100%; }
    .stat-band { grid-template-columns: repeat(2, 1fr); }
    .stat-band li:nth-child(3) { border-left: 0; }
    .stat-band li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
    .hero-lead { font-size: 17px; }
    .net { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .net-lines { display: none; }
    .net-core, .net-node { position: static; transform: none; width: auto; }
    .net-core { grid-column: 1 / -1; box-shadow: var(--shadow-md); }
    .net-node:hover { transform: translateY(-3px); }
    .stat-band { grid-template-columns: 1fr; transform: translateY(24px); }
    .stat-band.is-in { transform: translateY(24px); }
    .stat-band li { padding: 18px 20px; }
    .stat-band li + li { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------- Trust strip ---------- */
.trust { padding: 96px 0 40px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.trust-inner { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.trust .mono { color: var(--muted); font-size: 11.5px; }
.trust-logos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.trust-note { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 980px) { .trust-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- Problem ---------- */
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.problem-quote { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.18; margin-bottom: 24px; }
.problem-viz { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.pv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.pv-label { color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.pv-after .pv-label { color: var(--teal-700); }
:root[data-theme="dark"] .pv-after .pv-label { color: var(--teal); }
.pv-scatter, .pv-hub { position: relative; aspect-ratio: 300 / 260; }
.pv-tile { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 12px; color: var(--text-2); white-space: nowrap; z-index: 1; transition: transform .3s var(--ease), border-color .3s; }
.pv-tile.pv-right { left: auto; right: var(--x); }
.pv-tile:hover { transform: rotate(var(--r)) scale(1.08); border-color: var(--orange); }
.pv-tile .icon { width: 15px; height: 15px; color: var(--orange-700); }
:root[data-theme="dark"] .pv-tile .icon { color: #FF9A55; }
.pv-broken, .pv-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-broken path { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .6; fill: none; }
.pv-links path { stroke: var(--teal); stroke-width: 2; fill: none; }
.pv-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--grad); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-md); white-space: nowrap; transition: transform .3s var(--ease); }
.pv-core:hover { transform: translate(-50%, -50%) scale(1.06); }
.pv-core .icon { width: 16px; height: 16px; }
.pv-sat { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-700); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); font-size: 12.5px; font-weight: 600; transition: transform .3s var(--ease); }
.pv-sat:hover { transform: translate(-50%, -50%) scale(1.08); }
:root[data-theme="dark"] .pv-sat { color: var(--teal); }
.pv-arrow { color: var(--blue); }

@keyframes scatterFloat {
    0%, 100% { transform: rotate(var(--r)) translate(0, 0); }
    50% { transform: rotate(calc(var(--r) + 1.5deg)) translate(-3px, -4px); }
}
@keyframes liveStream {
    to { stroke-dashoffset: -36; }
}
@keyframes coreBeacon {
    0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(0, 89, 255, 0.4); }
    50% { box-shadow: var(--shadow-md), 0 0 0 10px rgba(0, 89, 255, 0); }
}
@keyframes arrowNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: no-preference) {
    .pv-tile { animation: scatterFloat 6s ease-in-out infinite alternate; }
    .pv-tile:nth-child(even) { animation-delay: -3s; }
    .pv-links path { stroke-dasharray: 6 6; animation: liveStream 3.5s linear infinite; }
    .pv-core { animation: coreBeacon 3s ease-in-out infinite; }
    .pv-arrow { animation: arrowNudge 2s ease-in-out infinite; }
}

@media (max-width: 980px) { .problem-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .problem-viz { grid-template-columns: 1fr; } .pv-arrow { transform: rotate(90deg); justify-self: center; } }

/* ---------- Layers ---------- */
.layers-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.layers-viz { display: grid; gap: 0; perspective: 1200px; }
.layer { position: relative; display: grid; gap: 6px; padding: 26px 30px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); }
.layer > span { font-size: 11px; }
.layer strong { font: 700 22px/1.2 var(--font-display); }
.layer em { font-style: normal; font-size: 14px; color: var(--text-2); }
.layer-3 { border-top: 4px solid var(--teal); }
.layer-3 > span { color: var(--teal-700); }
.layer-2 { border-top: 4px solid var(--orange); margin-left: 20px; margin-right: -20px; }
.layer-2 > span { color: var(--orange-700); }
.layer-1 { border-top: 4px solid var(--blue); background: linear-gradient(135deg, #0A2A8C, #0047E0); border-color: transparent; }
.layer-1 strong, .layer-1 em { color: #fff; }
.layer-1 em { color: #CFE0FF; }
.layer-1 > span { color: #9FC2FF; }
:root[data-theme="dark"] .layer-3 > span { color: var(--teal); }
:root[data-theme="dark"] .layer-2 > span { color: #FF9A55; }
.layer-link { text-align: center; color: var(--muted); font-size: 11px; padding: 10px 0; }
.layers-steps { list-style: none; display: grid; gap: 18px; margin-top: 32px; }
.layers-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; color: var(--text-2); }
.layers-steps .mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--blue); font-size: 13px; }
:root[data-theme="dark"] .layers-steps .mono { color: var(--link); }
.layers-steps strong { color: var(--text); }
@media (max-width: 980px) { .layers-grid { grid-template-columns: 1fr; gap: 48px; } .layers-viz { order: 2; } }

/* ---------- Module grid & cards ---------- */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 1200px) { .module-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (max-width: 980px) { .module-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 580px) { .module-grid { grid-template-columns: 1fr; gap: 14px; } }

.module-card {
    --cat: var(--blue);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px 28px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s, opacity .25s var(--ease);
}
.module-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.module-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.module-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.module-card:hover .module-icon {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 8px 20px -4px rgba(0, 89, 255, 0.25);
}
.module-card:hover .module-card-link svg { transform: translateX(4px); }

.cat-operations { --cat: var(--blue); }
.cat-revenue { --cat: var(--blue); }
.cat-back-office { --cat: var(--blue); }
.cat-service { --cat: var(--blue); }
:root[data-theme="dark"] .cat-back-office { --cat: var(--link); }
:root[data-theme="dark"] .cat-service { --cat: var(--link); }

.module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.module-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
:root[data-theme="dark"] .module-cat-pill {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.cat-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 6px rgba(0, 89, 255, 0.6);
}
:root[data-theme="dark"] .cat-indicator {
    background: #6E9DFF;
    box-shadow: 0 0 8px rgba(110, 157, 255, 0.8);
}
.module-code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .08em;
    font-weight: 600;
}
.module-card-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.module-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    flex-shrink: 0;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
:root[data-theme="dark"] .module-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.module-icon-lg { width: 56px; height: 56px; border-radius: 16px; }
.module-card-titles {
    display: flex;
    flex-direction: column;
}
.module-card-name {
    font: 700 21px/1.2 var(--font-display);
    color: var(--text);
    margin: 0;
    display: block;
    transition: color .2s var(--ease);
}
.module-card:hover .module-card-name { color: var(--blue); }
.module-card-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
}
.module-card-blurb {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 20px;
    flex-grow: 1;
}
.module-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    margin-bottom: 20px;
}
.module-chip {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F1F5FD;
    color: var(--text-2);
    border: 1px solid #E2E8F0;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s var(--ease);
}
:root[data-theme="dark"] .module-chip {
    background: #141E3C;
    border-color: #23335A;
    color: #C2D0EA;
}
.module-card-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #EEF4FE;
    border: 1px solid var(--accent-border);
    margin-bottom: 22px;
}
:root[data-theme="dark"] .module-card-outcome {
    background: #0D1C3E;
    border-color: #1C356C;
}
.module-card-outcome .outcome-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 6px;
    background: #DCE8FD;
    flex-shrink: 0;
}
:root[data-theme="dark"] .module-card-outcome .outcome-badge {
    background: #162E68;
    color: #8AB4FF;
}
.module-card-outcome .outcome-desc {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 500;
    line-height: 1.45;
}
:root[data-theme="dark"] .module-card-outcome .outcome-desc {
    color: #C2D0EA;
}
.module-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #EEF3FB;
    margin-top: auto;
}
:root[data-theme="dark"] .module-card-foot {
    border-top-color: #1D2A4E;
}
.module-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-body);
}
.module-card-stat svg { color: var(--blue); }
:root[data-theme="dark"] .module-card-stat svg { color: var(--link); }
.module-card-timeline { font-size: 11.5px; margin-left: auto; font-family: var(--font-mono); }
.module-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    transition: gap .2s var(--ease);
}
:root[data-theme="dark"] .module-card-link { color: var(--link); }
.module-card:hover .module-card-link { gap: 10px; }
.module-card-link svg { transition: transform .25s var(--ease); }

/* Adaptations for compact 3-column / 4-column grids */
.module-grid .module-card {
    padding: 26px 24px 22px;
}
.module-grid .module-card-name {
    font-size: 19px;
}
.module-grid .module-card-blurb {
    font-size: 13.5px;
    margin-bottom: 14px;
}
.module-grid .module-card-chips {
    margin-bottom: 14px;
}
.module-grid .module-card-outcome {
    margin-bottom: 16px;
    padding: 8px 12px;
}

/* Legacy compatibility classes */
.module-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.module-card-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.module-card-meta span { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Flagship Core Systems & Suite Drawer ---------- */
.flagship-section {
    position: relative;
    padding: 100px 0;
}
.flagship-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
}
.section-kicker-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border));
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 16px;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 10%, transparent);
}
:root[data-theme="dark"] .section-kicker-badge {
    background: color-mix(in srgb, var(--blue) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--blue) 38%, transparent);
    color: #8FB0FF;
}
.kicker-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px var(--blue);
    animation: kickerPulse 2s infinite ease-in-out;
}
@keyframes kickerPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--blue); }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px var(--blue); }
}
.flagship-lead {
    max-width: 780px;
    margin: 16px auto 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-2);
}

/* 4 Flagship Spotlight Cards */
.flagship-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}
@media (max-width: 900px) {
    .flagship-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.flagship-card {
    --cat: var(--blue);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px 28px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    color: var(--text);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.flagship-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.flagship-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.flagship-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.flagship-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.flagship-card .module-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    padding: 4px 12px;
    border-radius: 999px;
}
:root[data-theme="dark"] .flagship-card .module-cat-pill {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.flagship-card .cat-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 6px rgba(0, 89, 255, 0.6);
}
:root[data-theme="dark"] .flagship-card .cat-indicator {
    background: #6E9DFF;
    box-shadow: 0 0 8px rgba(110, 157, 255, 0.8);
}
.flagship-code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .08em;
    font-weight: 600;
}
.flagship-card-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.flagship-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    flex-shrink: 0;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
:root[data-theme="dark"] .flagship-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.flagship-card:hover .flagship-icon {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 8px 20px -4px rgba(0, 89, 255, 0.25);
}
.flagship-card-name {
    font: 700 21px/1.2 var(--font-display);
    color: var(--text);
    margin: 0;
    transition: color .2s var(--ease);
}
.flagship-card:hover .flagship-card-name {
    color: var(--blue);
}
.flagship-card-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
}
.flagship-card-blurb {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 20px;
    flex-grow: 1;
}
.flagship-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.flagship-chip {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F1F5FD;
    color: var(--text-2);
    border: 1px solid #E2E8F0;
    transition: all .2s var(--ease);
}
:root[data-theme="dark"] .flagship-chip {
    background: #141E3C;
    border-color: #23335A;
    color: #C2D0EA;
}
.flagship-outcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #EEF4FE;
    border: 1px solid var(--accent-border);
    margin-bottom: 22px;
}
:root[data-theme="dark"] .flagship-outcome {
    background: #0D1C3E;
    border-color: #1C356C;
}
.outcome-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 6px;
    background: #DCE8FD;
    flex-shrink: 0;
}
:root[data-theme="dark"] .outcome-badge {
    background: #162E68;
    color: #8AB4FF;
}
.outcome-desc {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 500;
    line-height: 1.45;
}
:root[data-theme="dark"] .outcome-desc {
    color: #C2D0EA;
}
.flagship-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #EEF3FB;
    margin-top: auto;
}
:root[data-theme="dark"] .flagship-card-foot {
    border-top-color: #1D2A4E;
}
.flagship-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-mono);
}
.flagship-stat svg { color: var(--blue); }
:root[data-theme="dark"] .flagship-stat svg { color: var(--link); }
.flagship-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none !important;
    transition: gap .2s var(--ease), color .2s;
}
:root[data-theme="dark"] .flagship-link { color: var(--link); }
.flagship-link:hover {
    gap: 9px;
    color: var(--blue-hover);
}
.flagship-link svg { transition: transform .25s var(--ease); }
.flagship-link:hover svg { transform: translateX(3px); }

/* ---------- Suite Drawer (Expandable Specialized Systems) ---------- */
.suite-drawer-wrap {
    margin: 40px auto 48px;
    max-width: 100%;
}
.suite-drawer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.suite-drawer-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font: 600 14px var(--font-body);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all .25s var(--ease);
}
.suite-drawer-btn:hover {
    border-color: var(--blue);
    background: var(--surface-2);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.drawer-btn-icon-wrap {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--blue);
    transition: transform .3s var(--ease);
}
.suite-drawer-btn.is-open .drawer-btn-icon-wrap {
    transform: rotate(45deg);
    background: color-mix(in srgb, var(--orange) 15%, transparent);
    color: var(--orange);
}
.drawer-btn-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--blue);
    font-weight: 600;
}
:root[data-theme="dark"] .drawer-btn-badge {
    background: rgba(0, 89, 255, 0.18);
    color: #8FB0FF;
}
.suite-drawer-summary {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0;
}
.suite-drawer-content {
    margin-top: 28px;
    animation: drawerFadeIn .35s var(--ease) forwards;
}
@keyframes drawerFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.suite-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 980px) {
    .suite-drawer-grid { grid-template-columns: 1fr; gap: 16px; }
}
.drawer-module-item {
    --cat: var(--blue);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none !important;
    color: var(--text);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    transition: all .25s var(--ease);
}
.drawer-module-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.drawer-module-item:hover {
    border-color: rgba(0, 89, 255, 0.35);
    background: var(--surface);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px -4px rgba(0, 89, 255, 0.14), 0 24px 50px -10px rgba(10, 30, 80, 0.12);
}
.drawer-module-item:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}

.drawer-module-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cat) 12%, var(--surface));
    color: var(--cat);
    border: 1px solid color-mix(in srgb, var(--cat) 20%, transparent);
    flex-shrink: 0;
}
.drawer-module-info {
    flex-grow: 1;
    min-width: 0;
}
.drawer-module-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.drawer-module-name {
    font: 600 15px/1.2 var(--font-display);
    color: var(--text);
}
.drawer-module-item:hover .drawer-module-name {
    color: var(--cat);
}
.drawer-module-code {
    font-size: 10.5px;
    color: var(--muted);
}
.drawer-module-blurb {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.4;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drawer-module-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--muted);
}
.drawer-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.drawer-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cat);
}
.drawer-stat-pill {
    font-family: var(--font-mono);
    font-size: 11px;
}
.drawer-module-arrow {
    color: var(--muted);
    transition: transform .25s var(--ease), color .25s var(--ease);
    flex-shrink: 0;
}
.drawer-module-item:hover .drawer-module-arrow {
    transform: translateX(4px);
    color: var(--cat);
}

/* Ecosystem Sovereignty Footer Panel */
.flagship-footer-panel {
    position: relative;
    margin-top: 48px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--accent-soft)) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    padding: 36px 40px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
:root[data-theme="dark"] .flagship-footer-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}
.footer-panel-glow {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 20%, transparent) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(28px);
}
.footer-panel-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap;
}
.footer-panel-text {
    flex: 1 1 500px;
}
.footer-panel-kicker {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: inline-block;
    margin-bottom: 8px;
}
:root[data-theme="dark"] .footer-panel-kicker { color: #8FB0FF; }
.footer-panel-heading {
    font: 600 22px/1.3 var(--font-display);
    color: var(--text);
    margin: 0 0 8px;
}
.footer-panel-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0;
    max-width: 640px;
}
.footer-panel-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 860px) {
    .flagship-footer-panel { padding: 28px 24px; }
    .footer-panel-content { flex-direction: column; align-items: flex-start; gap: 24px; }
    .footer-panel-actions { width: 100%; }
    .footer-panel-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Tabs indicator ---------- */
[role="tablist"] { position: relative; }
.tab-indicator { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 3px; background: var(--grad-brand); transition: transform .25s var(--ease), width .25s var(--ease); pointer-events: none; }

/* ---------- IDEA ---------- */
.idea { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.idea-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.idea-tab { display: flex; gap: 14px; align-items: center; text-align: left; padding: 22px 22px; background: none; border: 0; cursor: pointer; border-right: 1px solid var(--border); transition: background .25s; }
.idea-tab:last-of-type { border-right: 0; }
.idea-tab:hover { background: var(--surface-2); }
.idea-tab:hover .idea-letter { transform: scale(1.08) rotate(4deg); }
.idea-tab[aria-selected="true"] { background: var(--bg-tint); }
.idea-tab strong { display: block; font: 600 17px/1.2 var(--font-display); }
.idea-tab small { display: block; font-size: 13px; color: var(--muted); }
.idea-letter { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; font: 700 22px/1 var(--font-display); color: #fff; background: var(--tone); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tone-orange { --tone: var(--orange); --tone-text: var(--orange-700); }
.tone-blue { --tone: var(--blue); --tone-text: var(--blue); }
.tone-deep { --tone: var(--deep); --tone-text: var(--deep); }
.tone-teal { --tone: #00B9A3; --tone-text: var(--teal-700); }
:root[data-theme="dark"] .tone-deep { --tone: #3A68F0; --tone-text: #8FB0FF; }
:root[data-theme="dark"] .tone-orange { --tone-text: #FF9A55; }
:root[data-theme="dark"] .tone-blue { --tone-text: var(--link); }
:root[data-theme="dark"] .tone-teal { --tone-text: var(--teal); }
.idea-panel { display: grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 48px; align-items: center; }
.idea-panel[hidden] { display: none; }
.idea-panel .mono { color: var(--tone-text); margin-bottom: 10px; }
.idea-panel h3 { font-size: 40px; margin-bottom: 14px; }
.idea-panel-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.idea-panel-art::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--tone) 12%, var(--surface)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.idea-panel-art::after { content: ""; position: absolute; inset: 17%; background: color-mix(in srgb, var(--tone) 16%, var(--surface)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.idea-panel-art span { position: relative; z-index: 1; font: 700 140px/1 var(--font-display); color: var(--tone); }
.idea-panel-art .icon { z-index: 1; position: absolute; right: 18%; bottom: 20%; width: 40px; height: 40px; color: var(--tone-text); }
.idea-deliverable { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--tone); }
.idea-deliverable .icon { color: var(--tone-text); margin-top: 2px; }
.idea-deliverable .mono { display: block; margin-bottom: 4px; font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
    .idea-tabs { grid-template-columns: 1fr 1fr; }
    .idea-tab:nth-of-type(2) { border-right: 0; }
    .idea-tab:nth-of-type(-n+2) { border-bottom: 1px solid var(--border); }
    .idea-panel { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
    .idea-panel-art { max-width: 180px; }
    .idea-panel-art span { font-size: 90px; }
    .idea .tab-indicator { display: none; }
}
@media (max-width: 480px) { .idea-tab small { display: none; } .idea-tab { padding: 16px; } }

/* ---------- Compare (home) ---------- */
.compare-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.compare-tabs button { border: 0; background: none; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--text-2); }
.compare-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.compare-tabs .tab-indicator { display: none; }
.compare-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 34px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
}
.compare-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
}
.compare-panel[hidden] { display: none; }
.compare-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.compare-head p { color: var(--teal-700); font-weight: 600; }
:root[data-theme="dark"] .compare-head p { color: var(--teal); }
.compare-cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; }
.compare-manual { position: sticky; top: calc(var(--header-h) + 20px); }
.compare-label { display: inline-flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.compare-manual .compare-label .icon { color: var(--orange); }
.compare-auto .compare-label .icon { color: var(--teal); }
.compare-manual ol { list-style: none; display: grid; gap: 8px; }
.compare-manual li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface-2); cursor: default; transition: border-color .2s, background .2s; }
.compare-manual li:hover, .compare-manual li:focus-visible { border-color: var(--orange); background: var(--orange-soft); }
.compare-manual strong { font-size: 14.5px; }
.compare-manual span { font-size: 13px; color: var(--muted); }
.compare-manual em { font-style: normal; font-size: 10.5px; color: var(--orange-700); }
:root[data-theme="dark"] .compare-manual em { color: #FF9A55; }
@media (max-width: 900px) { .compare-cols { grid-template-columns: minmax(0, 1fr); } .compare-manual { position: static; } .compare-panel { padding: 22px; } }
@media (max-width: 520px) { .compare-tabs { display: flex; overflow-x: auto; border-radius: 16px; } .compare-tabs button { padding: 10px 14px; } }

/* ---------- Pipeline ---------- */
.pipe { --done: var(--teal); }
.pipe-scroll { overflow-x: auto; scrollbar-width: thin; padding: 6px 2px 10px; }
.pipe-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(112px, 1fr)); gap: 8px; position: relative; min-width: calc(var(--n) * 112px); }
.pipe-steps::before { content: ""; position: absolute; top: 30px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 2px; background: var(--border-strong); }
.pipe-steps::after { content: ""; position: absolute; top: 30px; left: calc(100% / var(--n) / 2); height: 2px; width: calc((100% - 100% / var(--n)) * var(--progress, 0)); background: linear-gradient(90deg, var(--blue), var(--teal), var(--blue)); background-size: 200% 100%; transition: width .6s var(--ease); animation: pipeGradientFlow 3s linear infinite; }
.pipe-step { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 0 4px; transition: opacity .3s; }
.pipe-node { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--muted); margin-bottom: 8px; transition: all .35s var(--ease); box-shadow: var(--shadow-sm); }
.pipe-meta { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.pipe-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pipe-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.pipe-status { font-size: 10px; margin-top: 4px; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.pipe-step.type-human .pipe-node { border-style: dashed; }
.pipe-step.is-running .pipe-node { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 18%, transparent); transform: scale(1.08); animation: pipeRadarPulse 1.8s infinite; }
.pipe-step.is-running .pipe-status { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.pipe-step.is-done .pipe-node { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-700); }
:root[data-theme="dark"] .pipe-step.is-done .pipe-node { color: var(--teal); }
.pipe-step.is-done .pipe-status { color: var(--teal-700); background: var(--teal-soft); border-color: transparent; }
:root[data-theme="dark"] .pipe-step.is-done .pipe-status { color: var(--teal); }
.pipe-step.type-human.is-done .pipe-node { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-700); }
.pipe-step.is-dim { opacity: .28; }
.pipe-step.is-hl .pipe-node { border-color: var(--orange); box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 16%, transparent); }

@keyframes pipeRadarPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 89, 255, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(0, 89, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 89, 255, 0); }
}
@keyframes pipeGradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.pipe-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pipe-log { display: inline-flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--muted); }
.pipe-log .icon { color: var(--teal); }
@media (max-width: 720px) {
    .pipe-scroll { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .pipe-scroll.at-end { mask-image: none; -webkit-mask-image: none; }
}

/* ---------- Why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-card {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.why-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.why-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.why-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--accent-soft); opacity: .8; }
.why-num { color: var(--muted); font-size: 11px; }
.why-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    margin: 18px 0 18px;
    position: relative;
    z-index: 1;
    transition: transform .35s var(--ease);
}
:root[data-theme="dark"] .why-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.why-card:hover .why-icon {
    transform: scale(1.08) rotate(3deg);
}
.why-card p { font-size: 15px; color: var(--text-2); margin-top: 10px; }
@media (max-width: 1080px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Proof placeholder ---------- */
.proof-slot { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 26px 28px; border-radius: var(--r-lg); border: 1.5px dashed var(--border-strong); background: var(--surface-2); }
.proof-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.proof-label { color: var(--orange-700); font-size: 11px; margin-bottom: 6px; }
:root[data-theme="dark"] .proof-label { color: #FF9A55; }
.proof-slot p:not(.mono) { color: var(--text-2); font-size: 15px; max-width: 70ch; }
@media (max-width: 820px) { .proof-slot { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-section { padding-top: 0; }
.cta-band { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 64px; border-radius: var(--r-xl); background: radial-gradient(600px 300px at 90% 0%, rgba(0, 211, 187, .25), transparent 70%), linear-gradient(130deg, #0033C4, #0059FF 45%, #0A2A8C); color: #DDE7FF; box-shadow: var(--shadow-lg); }
.cta-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; }
.cta-waves path { fill: none; stroke-width: 1.2; }
.cta-waves .w-orange { stroke: #FF8A3D; }
.cta-waves .w-blue { stroke: #7FB0FF; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-top: 14px; font-size: 17px; }
.cta-actions { display: grid; gap: 12px; justify-items: start; }
.cta-note { font-size: 11px; color: #A9C3FF; margin-top: 8px !important; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; padding: 40px 28px; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: #050A18; color: #A9B4CF; padding: 72px 0 28px; margin-top: 0; isolation: isolate; font-size: 14.5px; }
.footer-facet { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; z-index: -1; opacity: .07; }
.ff-orange { fill: var(--orange); } .ff-blue { fill: var(--blue); } .ff-teal { fill: var(--teal); }
.site-footer a { color: #D5DDF0; }
.site-footer a:hover { color: #fff; }
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 28px 32px; border-radius: var(--r-lg); border: 1px solid #1A2547; background: #0A1330; margin-bottom: 64px; }
.newsletter .h4 { color: #fff; margin-bottom: 6px; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.newsletter-form input { height: 48px; border-radius: 999px; border: 1px solid #25325C; background: #060C20; color: #fff; padding: 0 20px; font: inherit; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1.4fr 1fr 1fr .85fr; gap: 32px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 14px; }
.footer-brand address { margin-top: 18px; line-height: 1.7; font-size: 13.5px; font-style: normal; }
.footer-brand .addr-line { display: inline-block; white-space: nowrap; }
.footer-head { color: #fff; font-size: 11.5px; margin-bottom: 16px; }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.footer-cols-2 { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.soon { color: #6E7A99; }
.soon em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; border: 1px solid #25325C; margin-left: 4px; }
.footer-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 52px; padding-top: 28px; border-top: 1px solid #16203F; }
.footer-platforms .mono { color: #7C88A8; font-size: 11px; }
.footer-logos { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid #16203F; font-size: 13px; }
.footer-legal { display: flex; align-items: center; gap: 16px; }
.site-footer .icon-btn { background: transparent; border-color: #25325C; color: #A9B4CF; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .newsletter { grid-template-columns: 1fr; padding: 22px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .newsletter-form { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .footer-brand .addr-line { white-space: normal; } }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { position: relative; isolation: isolate; padding: 20px 0 64px; }
.page-hero .hero-bg { inset: calc(var(--header-h) * -1) 0 0 0; }
.page-hero h1 { font-size: clamp(38px, 4.8vw, 60px); max-width: 18ch; }
.page-hero-compact h1 { max-width: 22ch; }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 18px; }
.page-hero .kicker { margin-top: 12px; }
.section-top-tight { padding-top: 24px; }
@media (max-width: 980px) { .page-hero-inner { grid-template-columns: 1fr; gap: 36px; } }

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 500; }

.spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.spec-strip div { padding: 18px 22px; }
.spec-strip div + div { border-left: 1px solid var(--border); }
.spec-strip dt { font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.spec-strip dd { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.4; }
@media (max-width: 900px) { .spec-strip { grid-template-columns: 1fr 1fr; } .spec-strip div:nth-child(3) { border-left: 0; } .spec-strip div:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 480px) { .spec-strip { grid-template-columns: 1fr; } .spec-strip div + div { border-left: 0; border-top: 1px solid var(--border); } }

/* Solutions orbit */
.orbit-viz { position: relative; aspect-ratio: 1; max-width: 440px; justify-self: center; width: 100%; }
.orbit-viz::before, .orbit-viz::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed var(--border-strong); }
.orbit-viz::before { inset: 6%; }
.orbit-viz::after { inset: 26%; border-style: solid; border-color: var(--border); }
.orbit-item { --cat: var(--blue); position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; display: grid; place-items: center; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--cat); transform: rotate(var(--a)) translate(194px) rotate(calc(var(--a) * -1)); }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); }
.orbit-core strong { font: 700 64px/1 var(--font-display); }
.orbit-core .mono { font-size: 11px; color: #DDE9FF; }
@media (max-width: 980px) { .orbit-viz { display: none; } }

/* Filters */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { border: 1px solid var(--border); background: var(--surface-2); padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-2); cursor: pointer; transition: all .2s; }
.filter-chip:hover { border-color: var(--border-strong); }
.filter-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; height: 44px; padding: 0 38px 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; width: 100%; }
.select .icon { position: absolute; right: 14px; pointer-events: none; color: var(--muted); }
.search { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
.search input { border: 0; background: none; outline: none; font: inherit; font-size: 14.5px; color: var(--text); width: 220px; }
.search:focus-within { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.filter-status { margin: 18px 0 16px; color: var(--muted); font-size: 11.5px; }
.module-card[hidden] { display: none; }
.empty-state { text-align: center; padding: 56px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); display: grid; justify-items: center; gap: 10px; color: var(--text-2); }
.empty-state[hidden] { display: none; }
.empty-state .icon { width: 34px; height: 34px; color: var(--muted); }
@media (max-width: 720px) { .filter-bar { position: static; } .search input { width: 100%; } .filter-controls, .search, .select { width: 100%; } }

.feature-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 48px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.feature-band .lead { margin-top: 14px; }
.mini-steps { list-style: none; display: grid; gap: 10px; }
.mini-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.mini-steps .mono { color: var(--blue); }
.mini-steps-out { background: var(--teal-soft) !important; color: var(--teal-700); border-color: transparent !important; }
:root[data-theme="dark"] .mini-steps-out { color: var(--teal); }
@media (max-width: 900px) { .feature-band { grid-template-columns: 1fr; padding: 28px; } }

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.matrix { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
.matrix th, .matrix td { padding: 14px 18px; border-bottom: 1px solid var(--border); text-align: center; }
.matrix th[scope="row"], .matrix thead th:first-child { text-align: left; }
.matrix thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--surface-2); }
.matrix tbody tr:hover { background: var(--surface-2); }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.tick { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-700); }
:root[data-theme="dark"] .tick { color: var(--teal); }
.dash { color: var(--border-strong); }

/* Module hero */
.cat-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; color: var(--text-2); margin: 16px 0 18px; }
.cat-chip span { width: 10px; height: 10px; border-radius: 3px; background: var(--cat); }
.module-h1 { font-size: clamp(36px, 4.4vw, 56px) !important; }
.module-headline { font: 600 clamp(19px, 1.8vw, 23px)/1.35 var(--font-display); color: var(--text); margin-top: 16px; max-width: 34ch; letter-spacing: -.01em; }
.page-hero .hero-lead { margin-top: 16px; }

.sysviz { position: relative; aspect-ratio: 600 / 460; width: 100%; }
.sysviz-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sysviz-orbit { fill: none; stroke: var(--border-strong); stroke-dasharray: 3 6; }
.sysviz-spoke { stroke-width: 2; opacity: .6; }
.sysviz-dot { fill: var(--cat, var(--blue)); }
.sysviz-hub { position: absolute; transform: translate(-50%, -50%); width: 34%; padding: 20px 14px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; justify-items: center; text-align: center; gap: 6px; z-index: 2; }
.sysviz-hub strong { font: 700 18px/1.2 var(--font-display); }
.sysviz-hub .mono { font-size: 9.5px; color: var(--muted); }
.sysviz-node { position: absolute; transform: translate(-50%, -50%); width: 28%; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: center; z-index: 1; }
.sysviz-node .mono { display: block; font-size: 9.5px; color: var(--cat, var(--blue)); margin-bottom: 3px; }
@media (max-width: 560px) { .sysviz-node { font-size: 10.5px; padding: 7px 8px; } .sysviz-hub strong { font-size: 14px; } }

.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pain-card {
    position: relative;
    padding: 30px 30px 26px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.pain-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.pain-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.pain-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.pain-mark { position: absolute; top: 4px; right: 22px; font: 700 96px/1 var(--font-display); color: var(--orange); opacity: .18; }
.pain-quote { font: 600 20px/1.4 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.pain-cons { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-strong); color: var(--text-2); font-size: 15px; }
.pain-cons .icon { color: var(--orange-700); margin-top: 2px; }
:root[data-theme="dark"] .pain-cons .icon { color: #FF9A55; }
.pain-grid .pain-card:only-child { grid-column: 1 / -1; max-width: 760px; }
@media (max-width: 800px) { .pain-grid { grid-template-columns: 1fr; } }

.cap-list { display: grid; gap: 12px; }
.cap-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 26px 28px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.cap-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.cap-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.cap-row:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.cap-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--blue); font-size: 13px; }
:root[data-theme="dark"] .cap-num { color: var(--link); }
.cap-body p { color: var(--text-2); margin-top: 8px; }
.cap-tech { color: var(--text-2); padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.cap-tech .mono { display: flex; align-items: center; gap: 6px; color: var(--teal-700); font-size: 10.5px; margin-bottom: 6px; }
:root[data-theme="dark"] .cap-tech .mono { color: var(--teal); }
@media (max-width: 900px) { .cap-row { grid-template-columns: 1fr; gap: 14px; padding: 22px; } }

.outcome-band { background: linear-gradient(130deg, #061446, #0A2A8C 55%, #0048E0); color: #D6E2FF; padding: 72px 0; position: relative; overflow: hidden; }
.outcome-band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 360px; height: 360px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, rgba(0, 211, 187, .25), transparent); }
.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 0; }
.outcome { padding: 8px 28px; border-left: 1px solid rgba(255, 255, 255, .16); }
.outcome-metric { font: 700 clamp(28px, 3vw, 38px)/1.1 var(--font-display); color: #fff; letter-spacing: -.02em; }
.outcome-label { font-weight: 600; color: #fff; margin-top: 10px; }
.outcome-note { font-size: 14.5px; margin-top: 6px; color: #B7C9F5; }
.outcome-foot { margin-top: 36px; display: flex; gap: 8px; align-items: center; color: #9FB8F2; font-size: 11px; }

.flow-tabs, .map-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.flow-tabs button, .map-tabs button { border: 0; background: none; padding: 12px 16px; font-weight: 600; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.flow-tabs button .mono { color: var(--blue); font-size: 11px; margin-right: 4px; }
.flow-tabs button[aria-selected="true"], .map-tabs button[aria-selected="true"] { color: var(--text); }
.flow-panel {
    padding: 34px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
}
.flow-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
}
.flow-panel[hidden] { display: none; }
.flow-head { margin-bottom: 26px; }
.flow-head p { color: var(--text-2); margin-top: 8px; max-width: 80ch; }

/* Approach map */
.amap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.amap-rail { position: sticky; top: calc(var(--header-h) + 20px); }
.amap-rail-inner { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.amap-type { font-size: 10.5px; color: var(--muted); }
.amap-duration { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 6px 0 16px; font-size: 14.5px; }
.amap-list { list-style: none; display: grid; gap: 2px; position: relative; }
.amap-list::before { content: ""; position: absolute; left: 22px; top: 16px; bottom: 16px; width: 2px; background: var(--border); }
.amap-link { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 8px; align-items: center; padding: 8px 8px 8px 0; border-radius: 10px; color: var(--text-2); font-size: 13.5px; text-decoration: none !important; }
.amap-link:hover { background: var(--surface-2); }
.amap-code { position: relative; z-index: 1; display: grid; place-items: center; height: 26px; margin-left: 2px; width: 42px; border-radius: 8px; background: var(--surface); border: 1.5px solid var(--border-strong); font-size: 10.5px; letter-spacing: .02em; color: var(--muted); transition: all .25s; }
.amap-link-dur { font-size: 9.5px; color: var(--muted); letter-spacing: .02em; }
.amap-link.is-active { color: var(--text); font-weight: 600; background: var(--surface-2); }
.amap-link.is-active .amap-code { color: #fff; border-color: transparent; background: var(--idea); }
.idea-I { --idea: var(--orange); --idea-text: var(--orange-700); }
.idea-D { --idea: var(--blue); --idea-text: var(--blue); }
.idea-E { --idea: var(--deep); --idea-text: var(--deep); }
.idea-A { --idea: #00B9A3; --idea-text: var(--teal-700); }
:root[data-theme="dark"] .idea-E { --idea: #3A68F0; --idea-text: #8FB0FF; }
:root[data-theme="dark"] .idea-I { --idea-text: #FF9A55; }
:root[data-theme="dark"] .idea-D { --idea-text: var(--link); }
:root[data-theme="dark"] .idea-A { --idea-text: var(--teal); }
.amap-checkpoints { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.amap-checkpoints .mono { font-size: 10.5px; color: var(--muted); margin-bottom: 8px; }
.amap-checkpoints ul { list-style: none; display: grid; gap: 4px; }
.amap-checkpoints li { display: flex; gap: 6px; align-items: center; }
.amap-checkpoints .icon { color: var(--teal); }
.amap-reporting { margin-top: 10px; color: var(--muted); font-size: 13px; }
.amap-panels { display: grid; gap: 16px; }
.amap-stage { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.amap-stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--idea); }
.amap-stage.is-active { border-color: color-mix(in srgb, var(--idea) 45%, var(--border)); box-shadow: var(--shadow-md); }
.amap-stage-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 22px 26px 12px 28px; text-align: left; background: none; border: 0; cursor: default; }
.amap-chev { display: none; }
.amap-badge { display: grid; place-items: center; width: 58px; height: 58px; font-size: 14px; letter-spacing: .02em; color: #fff; background: var(--idea); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.amap-stage-title { display: grid; gap: 2px; }
.amap-idea { font-size: 10.5px; color: var(--idea-text); }
.amap-stage-dur { font-size: 11px; color: var(--text-2); padding: 6px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.amap-stage-body { padding: 0 28px 26px 28px; }
.amap-summary { color: var(--text-2); font-size: 16px; margin-bottom: 18px; max-width: 76ch; }
.gate { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--orange-soft); color: var(--text); font-size: 14.5px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.gate .icon { color: var(--orange-700); }
.amap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amap-grid > div, .idea-row-lists > div { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.amap-grid h4, .idea-row-lists h4 { font-size: 10.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-weight: 500; }
.amap-grid ul, .idea-row-lists ul { list-style: none; display: grid; gap: 5px; font-size: 14.5px; }
.amap-grid li, .idea-row-lists li { position: relative; padding-left: 14px; }
.amap-grid li::before, .idea-row-lists li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 2px; background: var(--idea, var(--blue)); }
.amap-needs { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--blue) 25%, transparent) !important; }
.amap-needs h4 { color: var(--blue) !important; }
:root[data-theme="dark"] .amap-needs h4 { color: var(--link) !important; }
.amap-risk p { font-size: 14.5px; }
@media (max-width: 980px) {
    .amap { grid-template-columns: 1fr; }
    .amap-rail { display: none; }
    .amap-panels { gap: 10px; }
    .amap-stage-head { cursor: pointer; padding: 16px 18px 16px 20px; grid-template-columns: auto 1fr auto auto; gap: 12px; }
    .amap-badge { width: 46px; height: 46px; font-size: 12px; }
    .amap-chev { display: block; color: var(--muted); transition: transform .25s; }
    .amap-stage.is-open .amap-chev { transform: rotate(180deg); }
    .amap-stage-body { display: none; padding: 0 18px 20px 20px; }
    .amap-stage.is-open .amap-stage-body { display: block; }
    .amap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .amap-stage-dur { display: none; } }

.plat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plat-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    color: var(--text);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.plat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.plat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.plat-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.plat-card strong { font: 700 18px/1.2 var(--font-display); }
.plat-card > span:nth-of-type(2) { font-size: 14px; color: var(--text-2); }
.plat-card .mono { display: block; font-size: 10px; color: var(--teal-700); margin-bottom: 4px; }
:root[data-theme="dark"] .plat-card .mono { color: var(--teal); }
.plat-card-custom { border-style: dashed; }

.int-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.int-card { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.int-marks { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.int-card .mono { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.int-card p:last-child { font-size: 14px; color: var(--text-2); }
@media (max-width: 980px) { .int-grid { grid-template-columns: 1fr 1fr; } }

.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tech-card { padding: 24px 26px; border-radius: var(--r-lg); background: #07102A; border: 1px solid #1A2753; color: #C4CFEA; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; }
.tech-card .mono { display: flex; gap: 8px; align-items: center; color: var(--teal); font-size: 11px; margin-bottom: 10px; }
@media (max-width: 800px) { .tech-grid { grid-template-columns: 1fr; } }

/* FAQ with sticky heading column */
.split-sticky { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.split-sticky-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; justify-items: start; }
.split-sticky-aside .kicker { margin-bottom: 0; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 22px; cursor: pointer; font: 600 17px/1.4 var(--font-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { color: var(--muted); transition: transform .25s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.faq-answer { padding: 0 22px 20px; color: var(--text-2); }
@media (max-width: 900px) { .split-sticky { grid-template-columns: 1fr; gap: 28px; } .split-sticky-aside { position: static; } }

.module-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .module-grid-3 { grid-template-columns: 1fr; } }

/* Platforms */
.eco-viz { position: relative; aspect-ratio: 500 / 440; width: 100%; max-width: 520px; justify-self: center; }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eco-lines line { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 4 6; }
.eco-ring { fill: color-mix(in srgb, var(--blue) 5%, transparent); stroke: var(--border); }
.eco-energy-pulse { fill: var(--teal); opacity: 0.95; filter: drop-shadow(0 0 6px var(--teal)); }
.eco-energy-pulse.pulse-0 { fill: #00a960; filter: drop-shadow(0 0 8px #00a960); }
.eco-energy-pulse.pulse-1 { fill: #00A1E0; filter: drop-shadow(0 0 8px #00A1E0); }
.eco-energy-pulse.pulse-2 { fill: #00A4EF; filter: drop-shadow(0 0 8px #00A4EF); }
.eco-energy-pulse.pulse-3 { fill: #2f5fe3; filter: drop-shadow(0 0 8px #2f5fe3); }
.eco-energy-pulse.pulse-4 { fill: #714B67; filter: drop-shadow(0 0 8px #964f84); }
.eco-node {
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.eco-node:hover {
    transform: translate(-50%, calc(-50% - 8px)) scale(1.1);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 89, 255, 0.35);
    z-index: 10;
}
.eco-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 24px;
    border-radius: 22px;
    background: var(--grad);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 4px;
    transition: transform .3s var(--ease);
    overflow: hidden;
}
.eco-core:hover { transform: translate(-50%, -50%) scale(1.05); }
.eco-core strong { font: 700 20px/1.1 var(--font-display); }
.eco-core .mono { font-size: 9.5px; color: #DCE8FF; }
.eco-core-glow {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 60%);
    pointer-events: none;
    animation: coreBeacon 4s ease-in-out infinite;
}

@keyframes lineDashStream {
    to { stroke-dashoffset: -40; }
}
@keyframes ecoNodeBob {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 6px)); }
}
@keyframes ecoCoreAura {
    0%, 100% { box-shadow: var(--shadow-lg), 0 0 24px rgba(0, 89, 255, 0.2); }
    50% { box-shadow: var(--shadow-lg), 0 0 46px rgba(0, 211, 187, 0.35); }
}

@media (prefers-reduced-motion: no-preference) {
    .eco-lines line { animation: lineDashStream 8s linear infinite; }
    .eco-core { animation: ecoCoreAura 4.5s ease-in-out infinite; }
    .eco-node:nth-child(odd) { animation: ecoNodeBob 5.5s ease-in-out infinite; }
    .eco-node:nth-child(even) { animation: ecoNodeBob 6.5s ease-in-out infinite; animation-delay: -2.5s; }
    .eco-node:hover { animation-play-state: paused; }
}
.posture-strip { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 48px; }
.posture-strip li { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.posture-strip .icon { color: var(--blue); margin-top: 2px; }
.posture-strip strong { display: block; color: var(--text); font-size: 15px; }

.explorer-view { min-height: 420px; }
.explorer-view.is-entering {
    animation: explorerEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes explorerEnter {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Platform Explorer & Premium Platform Cards */
.intro-platform { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.intro-platform .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
:root[data-theme="dark"] .intro-platform .eyebrow { color: var(--link); }
.intro-platform h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em; }
.intro-platform p { font-size: 16px; color: var(--text-2); line-height: 1.65; margin: 0; }
.intro-platform .cue { margin-top: 18px; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .platform-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 640px) { .platform-grid { grid-template-columns: 1fr; } }

.platform-grid .card, .eco-cards .card, .eco-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 30px;
  box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .3s ease;
  outline: none;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.platform-grid .card::before, .eco-cards .card::before, .eco-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 3.5px;
  background: var(--grad-accent-line);
  z-index: 2;
  transition: all .4s var(--ease);
}
.platform-grid .card:hover, .platform-grid .card:focus-within, .platform-grid .card.is-expanded,
.eco-cards .card:hover, .eco-cards .card:focus-within, .eco-cards .card.is-expanded {
  box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
  transform: translateY(-6px);
  border-color: rgba(0, 89, 255, 0.35);
}
.platform-grid .card:hover::before, .platform-grid .card:focus-within::before, .platform-grid .card.is-expanded::before,
.eco-cards .card:hover::before, .eco-cards .card:focus-within::before, .eco-cards .card.is-expanded::before {
  background: var(--grad-accent-hover);
  box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}

.platform-grid .badge, .eco-cards .badge {
  width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-border);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  margin-bottom: 22px;
}
:root[data-theme="dark"] .platform-grid .badge, :root[data-theme="dark"] .eco-cards .badge {
  background: #0F224D;
  border-color: #1E3A78;
}
.platform-grid .card:hover .badge, .platform-grid .card:focus-within .badge, .platform-grid .card.is-expanded .badge,
.eco-cards .card:hover .badge, .eco-cards .card:focus-within .badge, .eco-cards .card.is-expanded .badge {
  transform: scale(1.08) rotate(-2deg);
}

.platform-grid .card h3, .eco-cards .card h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.platform-grid .card .desc, .eco-cards .card .desc { font-size: 14.5px; color: var(--text-2); line-height: 1.65; margin: 0 0 20px; min-height: 44px; }

.platform-grid .stats, .eco-cards .stats { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.platform-grid .pill, .eco-cards .pill { font-size: 11.5px; font-weight: 500; color: var(--text-2); background: #F1F5FD; border: 1px solid #E2E8F0; padding: 5px 12px; border-radius: 8px; letter-spacing: .01em; }
:root[data-theme="dark"] .platform-grid .pill, :root[data-theme="dark"] .eco-cards .pill {
  background: #141E3C;
  border-color: #23335A;
  color: #C2D0EA;
}

.platform-grid .cue-row, .eco-cards .cue-row { display: flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 12.5px; font-weight: 600; color: var(--blue); opacity: .85; transition: all .35s ease; cursor: pointer; }
:root[data-theme="dark"] .platform-grid .cue-row, :root[data-theme="dark"] .eco-cards .cue-row { color: var(--link); }
.platform-grid .cue-row svg, .eco-cards .cue-row svg { width: 13px; height: 13px; transition: transform .35s ease; }
.platform-grid .card:hover .cue-row svg, .platform-grid .card:focus-within .cue-row svg, .platform-grid .card.is-expanded .cue-row svg,
.eco-cards .card:hover .cue-row svg, .eco-cards .card:focus-within .cue-row svg, .eco-cards .card.is-expanded .cue-row svg { transform: translateY(2px) rotate(180deg); }
.platform-grid .card:hover .cue-row, .platform-grid .card:focus-within .cue-row, .platform-grid .card.is-expanded .cue-row,
.eco-cards .card:hover .cue-row, .eco-cards .card:focus-within .cue-row, .eco-cards .card.is-expanded .cue-row { opacity: 0; height: 0; margin: 0; overflow: hidden; pointer-events: none; }

.platform-grid .details, .eco-cards .details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.platform-grid .details-inner, .eco-cards .details-inner { overflow: hidden; }
.platform-grid .card:hover .details, .platform-grid .card:focus-within .details, .platform-grid .card.is-expanded .details,
.eco-cards .card:hover .details, .eco-cards .card:focus-within .details, .eco-cards .card.is-expanded .details { grid-template-rows: 1fr; }

.platform-grid .divider, .eco-cards .divider { height: 1px; background: var(--border); margin: 22px 0 18px; }
.platform-grid .list-label, .eco-cards .list-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.platform-grid .list-label.bad, .eco-cards .list-label.bad { margin-top: 16px; }
.platform-grid ul.fit, .eco-cards ul.fit { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.platform-grid ul.fit li, .eco-cards ul.fit li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.platform-grid ul.fit li .ic, .eco-cards ul.fit li .ic { flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.platform-grid ul.fit.good li .ic, .eco-cards ul.fit.good li .ic { background: var(--teal-soft); color: var(--teal-700); }
:root[data-theme="dark"] .platform-grid ul.fit.good li .ic, :root[data-theme="dark"] .eco-cards ul.fit.good li .ic { color: var(--teal); }
.platform-grid ul.fit.bad li .ic, .eco-cards ul.fit.bad li .ic { background: var(--orange-soft); color: var(--orange-700); }
:root[data-theme="dark"] .platform-grid ul.fit.bad li .ic, :root[data-theme="dark"] .eco-cards ul.fit.bad li .ic { color: #FF9A55; }
.platform-grid ul.fit li .ic svg, .eco-cards ul.fit li .ic svg { width: 10px; height: 10px; }

.platform-grid .stack-note, .eco-cards .stack-note { font-size: 11px; color: var(--muted); letter-spacing: .04em; margin: 2px 0 4px; font-weight: 600; font-family: var(--font-mono); }

.platform-grid .cta-row, .eco-cards .cta-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.platform-grid .cta-row .btn, .eco-cards .cta-row .btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 12px; text-decoration: none;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.platform-grid .cta-row .btn svg, .eco-cards .cta-row .btn svg { width: 13px; height: 13px; transition: transform .25s ease; }
.platform-grid .cta-row .btn:hover svg, .eco-cards .cta-row .btn:hover svg { transform: translateX(3px); }
.platform-grid .cta-row .btn.primary, .eco-cards .cta-row .btn.primary { background: var(--text); color: var(--surface); border: 1px solid transparent; }
.platform-grid .cta-row .btn.primary:hover, .eco-cards .cta-row .btn.primary:hover { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px var(--blue); transform: translateY(-1px); }
.platform-grid .cta-row .btn.ghost, .eco-cards .cta-row .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.platform-grid .cta-row .btn.ghost:hover, .eco-cards .cta-row .btn.ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

.platform-grid .card.muted, .eco-cards .card.muted { border-style: dashed; background: var(--surface-2); }
.exp-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; }
.exp-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.exp-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.exp-crumbs button { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit; padding: 2px; }
.exp-crumbs [aria-current] { font-weight: 600; }
.exp-summary { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); margin-bottom: 22px; }
.exp-summary p { color: var(--text-2); font-size: 14.5px; flex: 1 1 320px; }
.exp-level { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.exp-level h3:focus { outline: none; }
.exp-level .mono { color: var(--muted); font-size: 11px; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.exp-node { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.exp-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(0, 89, 255, .35); }
.exp-node strong { font: 600 16px/1.25 var(--font-display); }
.exp-node span { font-size: 12.5px; color: var(--muted); }
.exp-leaf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.exp-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.exp-cap-group { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.exp-cap-group h4 { font-size: 15px; margin-bottom: 8px; }
.exp-cap-group .chips { gap: 5px; list-style: none; }
.exp-next { position: sticky; top: calc(var(--header-h) + 90px); padding: 24px; border-radius: var(--r-lg); background: linear-gradient(160deg, #0B1D4F, #07102A); color: #CFDAF5; display: grid; gap: 12px; justify-items: start; }
.exp-next .h4 { color: #fff; }
@media (max-width: 1000px) { .eco-cards { grid-template-columns: 1fr 1fr; } .exp-leaf { grid-template-columns: 1fr; } .exp-next { position: static; } }
@media (max-width: 640px) { .eco-cards { grid-template-columns: 1fr; } }

.custom-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.custom-grid > div:first-child { position: sticky; top: calc(var(--header-h) + 24px); }
.custom-grid .lead { margin-top: 16px; }
.stack-cards { display: grid; gap: 14px; }
.stack-card {
    padding: 26px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.stack-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.stack-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.stack-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.stack-card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.stack-card-head .why-icon { margin: 0; }
.stack-card > p { color: var(--text-2); }
.stack-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0; font-size: 14px; }
.stack-card li { display: flex; gap: 6px; align-items: center; }
.stack-card li .icon { color: var(--teal); }
.stack-card .int-marks { margin: 0; }
@media (max-width: 980px) { .custom-grid { grid-template-columns: 1fr; } .custom-grid > div:first-child { position: static; } }

.platform-id { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 20px; }
.status-pill { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-700); font-size: 13px; font-weight: 600; }
.plat-viz { padding: 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.plat-viz-core { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--border-strong); }
.plat-viz-core .mono { font-size: 11px; color: var(--muted); }
.plat-viz-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plat-viz-mod { --cat: var(--blue); display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; }
.plat-viz-mod .icon { color: var(--cat); }
@media (max-width: 420px) { .plat-viz-mods { grid-template-columns: 1fr; } }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit-col { padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.fit-label { display: flex; gap: 8px; align-items: center; font-size: 11.5px; margin-bottom: 16px; }
.fit-yes { border-top: 4px solid var(--teal); }
.fit-yes .fit-label { color: var(--teal-700); }
.fit-no { border-top: 4px solid var(--orange); background: linear-gradient(180deg, var(--orange-soft), var(--surface) 60%); }
.fit-no .fit-label { color: var(--orange-700); }
:root[data-theme="dark"] .fit-yes .fit-label { color: var(--teal); }
:root[data-theme="dark"] .fit-no .fit-label { color: #FF9A55; }
.fit-col ul { list-style: none; display: grid; gap: 12px; }
.fit-col li { position: relative; padding-left: 20px; }
.fit-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .35; }
.fit-note { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-strong); font-size: 14px; color: var(--text-2); }
@media (max-width: 800px) { .fit-grid { grid-template-columns: 1fr; } }

.mig-list { display: grid; gap: 12px; }
.mig-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, .8fr) auto; gap: 16px; align-items: center; padding: 20px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.mig-row .mono { display: block; font-size: 10px; color: var(--muted); }
.mig-row strong { font: 600 17px/1.3 var(--font-display); }
.mig-arrow { display: flex; align-items: center; color: var(--blue); }
.mig-arrow span { flex: 1; height: 2px; background: linear-gradient(90deg, var(--orange), var(--blue)); }
.mig-effort { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--blue); font-size: 11px; }
:root[data-theme="dark"] .mig-effort { color: var(--link); }
.mig-notes { grid-column: 1 / -1; color: var(--text-2); font-size: 14.5px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media (max-width: 720px) { .mig-row { grid-template-columns: 1fr; } .mig-arrow { transform: rotate(90deg); width: 40px; } .mig-effort { justify-self: start; } }

.notice { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); }
.notice .why-icon { margin: 0; flex: none; }
.notice p { color: var(--text-2); margin-top: 6px; }

/* AI page */
.doc-viz { display: grid; grid-template-columns: 1.2fr auto 1fr; gap: 14px; align-items: center; }
.doc-card { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.doc-card::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--teal), #00ffcc, var(--blue), transparent); box-shadow: 0 0 10px var(--teal); pointer-events: none; animation: ocrLaserScan 4s ease-in-out infinite; }
.doc-title { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.doc-field { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 10px; border-radius: 10px; margin-bottom: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; transition: transform .25s var(--ease), border-color .25s; }
.doc-field:hover { transform: translateX(3px); border-color: var(--blue); }
.doc-field span { color: var(--muted); font-size: 12px; }
.doc-field strong { grid-column: 1; font-weight: 600; }
.doc-field em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 9.5px; padding: 4px 8px; border-radius: 999px; }
.conf-high em { background: var(--teal-soft); color: var(--teal-700); }
.conf-mid { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: var(--orange-soft); }
.conf-mid em { background: var(--orange-700); color: #fff; }
:root[data-theme="dark"] .conf-high em { color: var(--teal); }
.doc-note { font-size: 9.5px; color: var(--muted); margin-top: 8px; }
.doc-arrow { color: var(--blue); animation: arrowNudge 2s ease-in-out infinite; }
.doc-checks { padding: 20px; border-radius: var(--r-lg); background: linear-gradient(160deg, #0B1D4F, #07102A); color: #D2DCF6; display: grid; gap: 10px; font-size: 13.5px; box-shadow: var(--shadow-lg); border: 1px solid rgba(0, 89, 255, .25); }
.doc-checks .mono { font-size: 10.5px; color: #7FA8FF; }
.doc-checks p { display: flex; gap: 8px; align-items: flex-start; }
.doc-checks .icon { color: var(--teal); margin-top: 3px; }
.doc-checks .warn .icon { color: #FF9A55; }

@keyframes ocrLaserScan {
    0% { top: -2px; opacity: 0; }
    15% { opacity: 0.95; }
    85% { opacity: 0.95; }
    100% { top: 100%; opacity: 0; }
}
@media (max-width: 640px) { .doc-viz { grid-template-columns: 1fr; } .doc-arrow { transform: rotate(90deg); justify-self: center; } }

.thesis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.thesis-col { padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--border); }
.thesis-col .mono { display: flex; gap: 8px; align-items: center; font-size: 11.5px; margin-bottom: 18px; }
.thesis-col ul { list-style: none; display: grid; gap: 12px; }
.thesis-col li { padding-left: 18px; position: relative; }
.thesis-col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .4; }
.thesis-bad { background: var(--surface-2); color: var(--text-2); border-style: dashed; }
.thesis-bad .mono { color: var(--orange-700); }
:root[data-theme="dark"] .thesis-bad .mono { color: #FF9A55; }
.thesis-good { background: linear-gradient(150deg, #0A2A8C, #0059FF); color: #E3ECFF; border: 0; box-shadow: var(--shadow-lg); }
.thesis-good .mono { color: var(--teal-hi); }
@media (max-width: 800px) { .thesis { grid-template-columns: 1fr; } }

.big-pipe { padding: 32px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 20px; }
.ba-table { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ba-row { display: grid; grid-template-columns: 180px 1fr 1fr; }
.ba-row > * { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ba-row:last-child > * { border-bottom: 0; }
.ba-head > * { background: var(--surface-2); font-size: 11px; display: flex; gap: 6px; align-items: center; }
.ba-head > :nth-child(2) .icon { color: var(--orange); }
.ba-head > :nth-child(3) .icon { color: var(--teal); }
.ba-before { color: var(--text-2); background: color-mix(in srgb, var(--orange-soft) 45%, transparent); }
.ba-after { color: var(--text); background: color-mix(in srgb, var(--teal-soft) 45%, transparent); }
@media (max-width: 800px) { .ba-row { grid-template-columns: 1fr; } .ba-head { display: none; } .ba-row strong { background: var(--surface-2); } .ba-before::before { content: "Before: "; font-weight: 600; } .ba-after::before { content: "After: "; font-weight: 600; } }
.big-pipe .pipe-steps { grid-template-columns: repeat(var(--n), minmax(140px, 1fr)); }

.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-card {
    padding: 30px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.hub-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.hub-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.hub-top { display: flex; justify-content: space-between; align-items: center; }
.hub-top .why-icon { margin: 0; }
.hub-top .mono { font-size: 11px; color: var(--muted); }
.hub-card > p { color: var(--text-2); }
.hub-card ul { list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.hub-card li { display: flex; gap: 8px; }
.hub-card li .icon { color: var(--teal); margin-top: 4px; }
.hub-guard { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--border-strong); display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--teal-700); }
:root[data-theme="dark"] .hub-guard { color: var(--teal); }
@media (max-width: 800px) { .hub-grid { grid-template-columns: 1fr; } }

.roi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.roi-inputs { display: grid; gap: 14px; padding: 30px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.roi-field { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.roi-field:last-child { border-bottom: 0; padding-bottom: 0; }
.roi-label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-weight: 600; font-size: 15px; }
.roi-label output { font-size: 15px; color: var(--blue); letter-spacing: 0; text-transform: none; }
:root[data-theme="dark"] .roi-label output { color: var(--link); }
.roi-help { font-size: 13px; color: var(--muted); margin-top: 4px; }
input[type="range"] { width: 100%; margin: 12px 0 4px; accent-color: var(--blue); cursor: pointer; }
.roi-output { display: flex; flex-direction: column; gap: 10px; padding: 34px; border-radius: var(--r-xl); background: radial-gradient(400px 260px at 100% 0%, rgba(0, 211, 187, .28), transparent 70%), linear-gradient(150deg, #0A2A8C, #0047E0); color: #D6E2FF; box-shadow: var(--shadow-lg); }
.roi-kicker { color: var(--teal-hi); font-size: 11px; }
.roi-big { font: 700 clamp(44px, 5vw, 64px)/1 var(--font-display); color: #fff; letter-spacing: -.03em; }
.roi-sub { font-size: 14px; }
.roi-bars { display: grid; gap: 12px; margin: 16px 0 6px; }
.roi-bars > div { display: grid; grid-template-columns: 150px 1fr 70px; gap: 12px; align-items: center; font-size: 13px; }
.roi-bars strong { text-align: right; color: #fff; font-size: 12px; letter-spacing: 0; }
.roi-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.roi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #FF8A3D; transition: width .5s var(--ease); }
.roi-bar-teal i { background: var(--teal); }
.roi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0; }
.roi-stats div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.roi-stats dt { font-size: 10px; color: #A9C3FF; }
.roi-stats dd { margin: 4px 0 0; font: 700 26px/1.1 var(--font-display); color: #fff; }
.roi-assume { font-size: 12.5px; color: #B3C6F2; margin-bottom: 8px; }
.roi-output .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .roi { grid-template-columns: minmax(0, 1fr); } .roi-inputs, .roi-output { padding: 22px; } .roi-bars > div { grid-template-columns: 1fr 70px; } .roi-bars > div > span { grid-column: 1 / -1; } }

/* How we work */
.idea-hex { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 420px; justify-self: center; width: 100%; padding-bottom: 60px; }
.idea-hex-item { aspect-ratio: 1.05; display: grid; place-content: center; text-align: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--tone); color: #fff; }
.idea-hex-item:nth-child(2), .idea-hex-item:nth-child(4) { transform: translateY(34%); }
.idea-hex-item strong { font: 700 64px/1 var(--font-display); }
.idea-hex-item small { font-size: 15px; font-weight: 600; }
.idea-hex-core { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 10.5px; color: var(--text-2); white-space: nowrap; box-shadow: var(--shadow-sm); }
@media (max-width: 980px) { .idea-hex { display: none; } }
.idea-full { display: grid; gap: 14px; }
.idea-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--tone); }
.idea-row-head { display: flex; gap: 20px; align-items: flex-start; }
.idea-row-head .mono { color: var(--tone-text); font-size: 11px; margin-bottom: 6px; }
.idea-row-head h3 { margin-bottom: 10px; }
.idea-row-head p:last-child { color: var(--text-2); }
.idea-row-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; --idea: var(--tone); }
@media (max-width: 980px) { .idea-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .idea-row-lists { grid-template-columns: 1fr; } .idea-row { padding: 22px; } .idea-row-head { flex-direction: column; } }
.map-tabs { margin-bottom: 18px; }
.map-panel[hidden] { display: none; }
.map-scope { display: flex; gap: 8px; align-items: center; color: var(--text-2); margin-bottom: 22px; }
.gov-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.gov-cadence { padding: 30px; border-radius: var(--r-lg); background: linear-gradient(160deg, #0B1D4F, #07102A); color: #CFDAF5; }
.gov-cadence .h4 { color: #fff; margin-bottom: 18px; }
.gov-list { list-style: none; display: grid; gap: 14px; }
.gov-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; }
.gov-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.gov-list .mono { color: var(--teal); font-size: 10.5px; padding-top: 3px; }
.why-grid-2 { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 900px) { .gov-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .why-grid-2 { grid-template-columns: 1fr !important; } }

/* Configurator */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; align-items: start; }
.cfg-main { padding: 30px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-width: 0; }
.cfg-progress { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 28px; }
.cfg-progress button { width: 100%; display: grid; gap: 4px; text-align: left; padding: 12px 14px 14px; border-radius: 12px; border: 0; background: var(--surface-2); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); position: relative; overflow: hidden; }
.cfg-progress button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.cfg-progress .mono { font-size: 10.5px; }
.cfg-progress li.is-done button { color: var(--text-2); }
.cfg-progress li.is-done button::after { background: var(--teal); }
.cfg-progress li[aria-current] button { color: var(--text); background: var(--accent-soft); }
.cfg-progress li[aria-current] button::after { background: var(--blue); }
.cfg-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.cfg-step[hidden] { display: none; }
.cfg-step legend { font: 700 28px/1.2 var(--font-display); letter-spacing: -.02em; padding: 0; display: grid; gap: 6px; }
.cfg-step legend .mono { font-size: 11px; color: var(--blue); font-weight: 500; letter-spacing: .1em; }
.cfg-help { color: var(--text-2); margin: 10px 0 20px; }
.cfg-q { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 24px 0 10px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt-grid-3 { grid-template-columns: repeat(3, 1fr); }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opt > span { display: flex; align-items: center; min-height: 52px; height: 100%; padding: 12px 16px 12px 44px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); font-size: 14.5px; font-weight: 500; transition: border-color .2s, background .2s; position: relative; }
.opt > span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); transition: all .2s; }
.opt input[type="checkbox"] + span::before { border-radius: 5px; }
.opt:hover > span { border-color: var(--border-strong); }
.opt input:checked + span { border-color: var(--blue); background: var(--accent-soft); }
.opt input:checked + span::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px var(--surface); }
.opt input[type="checkbox"]:checked + span::before { box-shadow: none; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.opt input:focus-visible + span { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.opt-pill > span { min-height: 44px; border-radius: 999px; padding-right: 18px; }
.opt-card > span { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 16px; }
.opt-card > span::before { left: auto; right: 14px; top: 18px; margin: 0; }
.opt-card .module-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
.opt-card strong { font-size: 14.5px; padding-right: 22px; }
.opt-card small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.opt-card-wide > span { min-height: 88px; }
.cfg-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.cfg-nav [data-next] { margin-left: auto; }
.cfg-nav [hidden] { display: none; }
.cfg-summary { position: sticky; top: calc(var(--header-h) + 16px); }
.cfg-summary-inner { padding: 26px; border-radius: var(--r-xl); background: linear-gradient(170deg, #0B1D4F, #060D24); color: #CCD7F3; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.cfg-summary .mono { font-size: 10.5px; color: #8FA8E0; }
.cfg-summary-kicker { display: flex; gap: 8px; align-items: center; color: var(--teal) !important; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(0, 211, 187, .25); }
.cfg-rec { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.cfg-rec-name { font: 700 22px/1.2 var(--font-display); color: #fff; margin: 4px 0; }
.cfg-rec-why { font-size: 13.5px; }
.cfg-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-figures > div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.cfg-fig { font: 700 20px/1.2 var(--font-display); color: #fff; margin-top: 4px; }
.cfg-disclaimer { display: flex; gap: 8px; font-size: 12px; color: #9FB0D8; }
.cfg-disclaimer .icon { color: #FF9A55; margin-top: 2px; }
.cfg-lists { display: grid; gap: 8px; }
.cfg-lists .chips { list-style: none; }
.cfg-lists .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #E3EAFB; }
.cfg-lists .chip-empty { color: #8492B8; border-style: dashed; background: none; }
.cfg-phases ol { list-style: none; display: grid; gap: 6px; margin-top: 8px; font-size: 13px; }
.cfg-phases li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; }
.cfg-phases li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; font: 700 12px/1 var(--font-display); }
.cfg-phases li span:last-child { font-family: var(--font-mono); font-size: 10.5px; color: #8FA8E0; }
.cfg-summary .btn-text { color: #9FC0FF; justify-self: start; }
.cfg-send { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 10px; }
.cfg-send .h4 { color: #fff; font-size: 17px; }
.cfg-send-fields { display: grid; gap: 8px; }
.cfg-send input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .2); color: #fff; padding: 0 14px; font: inherit; font-size: 14.5px; }
.cfg-send input::placeholder { color: #8391B5; }
.cfg-send-status { font-size: 13.5px; min-height: 1em; }
.cfg-send-status.ok { color: var(--teal); }
.cfg-send-status.err { color: #FF9A55; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 1080px) { .cfg { grid-template-columns: 1fr; } .cfg-summary { position: static; } }
@media (max-width: 720px) { .opt-grid, .opt-grid-3 { grid-template-columns: 1fr; } .cfg-main { padding: 20px; } .cfg-progress button { font-size: 12px; padding: 10px; } }
@media (max-width: 460px) { .cfg-progress button { font-size: 0; } .cfg-progress .mono { font-size: 11px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.contact-form, .form-success { padding: 34px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.form-kicker { font-size: 11px; color: var(--blue); margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea, .field select { width: 100%; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); padding: 12px 14px; font: inherit; font-weight: 400; font-size: 15px; transition: border-color .2s; }
.field input, .field select { height: 48px; padding-top: 0; padding-bottom: 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent); }
.field .select { width: 100%; }
.field [aria-invalid="true"] { border-color: #D93A2B; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.check strong { color: var(--text); }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 22px; }
.form-status { font-size: 14px; color: var(--text-2); }
.form-status.err { color: #C0392B; }
:root[data-theme="dark"] .form-status.err { color: #FF9A55; }
.form-success { display: flex; gap: 18px; align-items: flex-start; }
.form-success .why-icon { margin: 0; flex: none; }
.form-success p { color: var(--text-2); margin: 6px 0 16px; }
.contact-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.contact-card {
    padding: 34px 30px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
}
.contact-card > img { height: 40px; width: auto; }
.contact-legal { font-size: 14px; color: var(--text-2); }
.contact-lines { list-style: none; display: grid; gap: 14px; font-size: 14.5px; }
.contact-lines li { display: flex; gap: 12px; align-items: flex-start; }
.contact-lines .icon { color: var(--blue); margin-top: 3px; }
.contact-expect { padding: 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.contact-expect .mono { font-size: 10.5px; color: var(--muted); margin-bottom: 10px; }
.contact-expect ol { list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); counter-reset: ex; }
.contact-expect li { counter-increment: ex; padding-left: 28px; position: relative; }
.contact-expect li::before { content: counter(ex); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--blue); font: 600 11px/20px var(--font-mono); text-align: center; }
.contact-expect strong { color: var(--text); }
.contact-config { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: linear-gradient(120deg, #0047E0, #0059FF 55%, #0A7BFF); color: #fff; text-decoration: none !important; }
.contact-config .why-icon { margin: 0; background: rgba(255, 255, 255, .18); }
.contact-config strong { display: block; }
.contact-config small { display: block; color: #E6EEFF; font-size: 13px; }
.contact-config > .icon { margin-left: auto; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } .contact-aside { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .contact-form { padding: 22px; } }

/* 404 */
.notfound { padding: 60px 0 120px; }
.notfound-inner { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.notfound-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.notfound-art::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--accent-soft); }
.notfound-art img { position: relative; height: 140px; width: auto; }
.notfound-art .mono { position: absolute; bottom: 12%; font-size: 14px; color: var(--muted); }
.notfound-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.notfound-links a { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.notfound-links a:hover { border-color: var(--blue); }
.notfound-links .icon { color: var(--blue); }
.notfound-links strong { display: block; }
.notfound-links small { display: block; color: var(--muted); }
@media (max-width: 800px) { .notfound-inner { grid-template-columns: 1fr; } .notfound-art { max-width: 200px; } .notfound-links { grid-template-columns: 1fr; } }
.cfg-step legend:focus, [data-exp-heading]:focus { outline: none; }

/* AI Automation Sub-Pages & 3 Operational Domains Directory */
.ai-sim-card {
    background: linear-gradient(165deg, #0b1a3d 0%, #060e22 100%);
    border: 1px solid rgba(120, 160, 255, 0.22);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow: 0 20px 45px -10px rgba(2, 6, 23, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
}
.sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sim-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00D3BB;
    box-shadow: 0 0 10px #00D3BB;
    display: inline-block;
    animation: livePulse 2s infinite ease-in-out;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(0.85); }
}
.sim-title {
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
}
.sim-channel {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #8FB2FF;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .03em;
}
.sim-body {
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sim-chat-stream {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sim-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.sim-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    flex: none;
}
.sim-msg-customer .sim-avatar {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}
.sim-msg-agent .sim-avatar {
    background: linear-gradient(135deg, #0059FF, #00D3BB);
    color: #fff;
}
.sim-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}
.sim-msg-customer .sim-bubble {
    background: rgba(255, 255, 255, 0.07);
    color: #e2e8f0;
    border-bottom-left-radius: 3px;
}
.sim-msg-agent .sim-bubble {
    background: rgba(0, 89, 255, 0.18);
    border: 1px solid rgba(0, 89, 255, 0.35);
    color: #f8fafc;
    border-bottom-left-radius: 3px;
}
.sim-system-pill {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    color: #a7f3d0;
    line-height: 1.4;
}
.sim-system-pill span {
    font-size: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    color: #34d399;
    margin-bottom: 4px;
    font-weight: 600;
}
.sim-verified {
    font-size: 10px;
    color: #34d399;
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 6px;
}
.sim-doc-stream {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sim-doc-grid {
    display: grid;
    gap: 6px;
}
.sim-field-row {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
}
.sim-field-key {
    font-size: 11.5px;
    color: #94a3b8;
}
.sim-field-val {
    grid-column: 1;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}
.sim-field-row em {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 9.5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-style: normal;
    background: rgba(0, 211, 187, 0.2);
    color: #00D3BB;
    font-weight: 600;
}
.sim-doc-checks {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #cbd5e1;
}
.sim-doc-checks p {
    font-size: 10px;
    color: #8FB2FF;
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 6px;
}
.sim-doc-checks ul {
    list-style: none;
    display: grid;
    gap: 5px;
}
.sim-doc-checks li {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sim-doc-checks li .icon {
    color: #00D3BB;
}
.sim-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}
.sim-badge {
    font-size: 10.5px;
    color: #94a3b8;
    display: flex;
    gap: 6px;
    align-items: center;
}
.sim-badge .icon {
    color: #00D3BB;
}

/* 3 Operational Domains Grid */
.ai-domains-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ai-domain-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}
.ai-domain-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}
.ai-domain-header .mono {
    font-size: 11px;
    color: var(--muted);
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.ai-domain-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}
.ai-domain-header p {
    font-size: 13.5px;
    color: var(--text-2);
    margin-top: 6px;
    line-height: 1.45;
}
.ai-domain-cards {
    display: grid;
    gap: 14px;
}
.ai-subpage-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    text-decoration: none !important;
    color: var(--text);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
    position: relative;
    overflow: hidden;
}
.ai-subpage-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.ai-subpage-card:hover {
    border-color: rgba(0, 89, 255, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
}
.ai-subpage-card:hover::before,
.ai-subpage-card.is-active::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.ai-subpage-card.is-active {
    border-color: var(--blue);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14);
}
.ai-subpage-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.ai-subpage-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--blue);
    flex: none;
}
:root[data-theme="dark"] .ai-subpage-icon {
    color: var(--link);
}
.ai-subpage-code {
    font-size: 11px;
    color: var(--muted);
    margin-left: 4px;
}
.ai-current-badge {
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-700);
    font-weight: 600;
    margin-left: auto;
}
:root[data-theme="dark"] .ai-current-badge {
    color: var(--teal);
}
.ai-subpage-card strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.ai-subpage-card p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.45;
}
.ai-subpage-metric {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 11.5px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-top: 4px;
}
.ai-subpage-metric .metric-val {
    font-weight: 700;
    color: var(--blue);
    font-size: 13px;
}
:root[data-theme="dark"] .ai-subpage-metric .metric-val {
    color: var(--link);
}
.ai-subpage-metric .metric-lbl {
    color: var(--muted);
    font-size: 11px;
}
.ai-subpage-link {
    font-size: 11.5px;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-weight: 600;
}
:root[data-theme="dark"] .ai-subpage-link {
    color: var(--link);
}

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

/* ==========================================================================
   Engineering Services & Subpages
   ========================================================================== */
.service-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.service-hero-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), 0 14px 30px -10px rgba(0, 89, 255, 0.16);
    border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}
.service-hero-card:hover .service-hero-icon {
    transform: scale(1.08) rotate(3deg);
}
.service-hero-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad);
}
.service-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.service-hero-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--blue);
    flex: none;
    transition: transform .3s var(--ease);
}
:root[data-theme="dark"] .service-hero-icon { color: var(--link); }
.service-code { font-size: 11.5px; color: var(--blue); display: block; font-weight: 600; }
:root[data-theme="dark"] .service-code { color: var(--link); }
.service-title { font-size: 18px; font-weight: 700; color: var(--text); }
.service-hero-overview p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.service-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}
@media (max-width: 600px) {
    .service-hero-metrics { grid-template-columns: 1fr; }
}
.hero-metric-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-metric-box .metric-val {
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--blue);
    line-height: 1.1;
}
:root[data-theme="dark"] .hero-metric-box .metric-val { color: var(--link); }
.hero-metric-box .metric-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.hero-metric-box .metric-note {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.35;
}

/* Overview Section */
.overview-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .overview-split { grid-template-columns: 1fr; }
}
.overview-body { margin-top: 24px; display: grid; gap: 16px; }
.lead-text { font-size: 17px; line-height: 1.7; color: var(--text-2); }
.aside-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.aside-kicker { font-size: 11px; color: var(--blue); font-weight: 600; margin-bottom: 10px; display: block; }
.aside-box h3 { font-size: 20px; margin-bottom: 12px; line-height: 1.3; }
.aside-box p { font-size: 14px; color: var(--text-2); margin-bottom: 16px; line-height: 1.55; }
.aside-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.aside-cta { margin-top: 8px; }

/* Tech Stack Section */
.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 36px;
}
.tech-stack-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.tech-cat {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
:root[data-theme="dark"] .tech-cat { color: var(--link); }
.tech-pills { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tech-pill {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tech-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    flex: none;
}

/* Approach Map Table */
.approach-table-wrap {
    overflow-x: auto;
    margin-top: 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.approach-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}
.approach-table th, .approach-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.approach-table th {
    background: var(--bg-tint);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
}
.stage-badge {
    display: inline-block;
    padding: 4px 8px;
    background: var(--accent-soft);
    color: var(--blue);
    font-weight: 700;
    border-radius: 6px;
    font-size: 11.5px;
}
:root[data-theme="dark"] .stage-badge { color: var(--link); }
.deliverable-cell {
    color: var(--text);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chk-icon { color: var(--teal); flex: none; }

/* Anti-pattern Cards */
.anti-pattern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 36px;
}
.anti-pattern-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) {
    .anti-pattern-card { grid-template-columns: 1fr; }
}
.pattern-bad {
    padding: 24px;
    background: var(--orange-soft);
    border-right: 1px solid var(--border);
}
.pattern-good {
    padding: 24px;
    background: var(--teal-soft);
}
.pattern-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
}
.pattern-bad .pattern-label { color: var(--orange-700); }
.pattern-good .pattern-label { color: var(--teal-700); }
:root[data-theme="dark"] .pattern-bad .pattern-label { color: var(--orange); }
:root[data-theme="dark"] .pattern-good .pattern-label { color: var(--teal); }
.pattern-bad p, .pattern-good p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
}

/* Related Services Bar */
.related-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-top: 20px;
}
.related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.related-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--bg-tint);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
}
.related-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
    text-decoration: none;
    background: var(--surface);
}

/* Services Catalog Overview */
.services-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
@media (max-width: 600px) {
    .services-catalog-grid { grid-template-columns: 1fr; }
}
.service-catalog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.service-catalog-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.service-catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.service-catalog-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.catalog-card-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.catalog-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .35s var(--ease);
}
.service-catalog-card:hover .catalog-card-icon {
    transform: scale(1.08) rotate(3deg);
}
:root[data-theme="dark"] .catalog-card-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.catalog-badge { font-size: 11px; color: var(--blue); font-weight: 600; display: block; margin-bottom: 4px; }
:root[data-theme="dark"] .catalog-badge { color: var(--link); }
.catalog-card-head h3 { font-size: 20px; line-height: 1.25; margin: 0; }
.catalog-card-head h3 a { color: var(--text); text-decoration: none; }
.catalog-summary { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; flex-grow: 1; }
.catalog-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.catalog-metric { display: flex; flex-direction: column; }
.catalog-metric .val { font-size: 16px; font-weight: 700; color: var(--blue); font-family: var(--font-display); }
:root[data-theme="dark"] .catalog-metric .val { color: var(--link); }
.catalog-metric .lbl { font-size: 11px; color: var(--muted); line-height: 1.2; }
.catalog-card-footer { margin-top: auto; }

/* Services Hero Stat Box */
.services-hero-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}
.stat-pill-list { display: flex; flex-direction: column; gap: 16px; }
.stat-pill-item {
    padding: 14px 18px;
    background: var(--bg-tint);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-pill-lbl { font-size: 11px; color: var(--blue); font-weight: 600; }
:root[data-theme="dark"] .stat-pill-lbl { color: var(--link); }
.stat-pill-item strong { font-size: 16px; color: var(--text); }
.stat-pill-item small { font-size: 12px; color: var(--text-2); }

/* ==========================================================================
   Industries Page
   ========================================================================== */
.industry-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
}
.industry-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.industry-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.industry-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.industry-card:hover .industry-icon {
    transform: scale(1.08) rotate(3deg);
}
.industry-card-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}
.industry-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .3s var(--ease);
}
:root[data-theme="dark"] .industry-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.industry-badge { font-size: 11.5px; color: var(--blue); font-weight: 600; display: block; margin-bottom: 4px; }
.industry-card-head h3 { font-size: 24px; margin-bottom: 6px; }
.industry-tagline { font-size: 15px; color: var(--text-2); }
.ind-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .ind-split { grid-template-columns: 1fr; }
}
.ind-friction {
    background: var(--orange-soft);
    padding: 20px;
    border-radius: var(--r-md);
    border-left: 3px solid var(--orange);
}
.ind-solution {
    background: var(--teal-soft);
    padding: 20px;
    border-radius: var(--r-md);
    border-left: 3px solid var(--teal);
}
.ind-label-bad { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--orange-700); margin-bottom: 8px; }
.ind-label-good { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--teal-700); margin-bottom: 8px; }
:root[data-theme="dark"] .ind-label-bad { color: var(--orange); }
:root[data-theme="dark"] .ind-label-good { color: var(--teal); }
.ind-details-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
    .ind-details-grid { grid-template-columns: 1fr; }
}
.ind-subhead { font-size: 11px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 8px; }
.ind-detail-text { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.industry-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.ind-impact { display: flex; flex-direction: column; gap: 4px; }
.ind-impact span { font-size: 11.5px; color: var(--muted); }
.ind-impact strong { font-size: 16px; color: var(--blue); }
:root[data-theme="dark"] .ind-impact strong { color: var(--link); }

/* Industry Hero Summary */
.industry-hero-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}
.summary-pill-list { display: flex; flex-direction: column; gap: 14px; }
.summary-pill {
    padding: 14px 18px;
    background: var(--bg-tint);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.summary-pill span { font-size: 11px; color: var(--blue); font-weight: 600; }
.summary-pill strong { font-size: 16px; color: var(--text); }
.summary-pill small { font-size: 12px; color: var(--text-2); }

/* ==========================================================================
   About Page: Corporate Factsheet, Mission & Vision, Leadership, Squads, Timeline
   ========================================================================== */
.about-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.about-hero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--grad-brand);
}
.company-stat-box h3 { font-size: 22px; margin: 8px 0 16px; color: var(--text); }
.card-divider { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.company-quick-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.company-quick-facts span { font-size: 11px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 3px; }
.company-quick-facts strong { font-size: 14.5px; color: var(--text); line-height: 1.4; display: block; }
.hero-tag-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.hero-tag-pills .pill { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--bg-tint); color: var(--text-2); border: 1px solid var(--border); font-family: var(--font-mono); }

/* Mission & Vision */
.mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; }
.mv-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.mv-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.mv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.mv-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.mv-badge { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }
.mv-mission .mv-badge { color: var(--blue); }
.mv-vision .mv-badge { color: var(--teal-700); }
:root[data-theme="dark"] .mv-vision .mv-badge { color: var(--teal); }
.mv-card h3 { font-size: 22px; margin-bottom: 14px; line-height: 1.3; }
.mv-card p { font-size: 15px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; }
.mv-points { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.mv-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.mv-points .icon { width: 16px; height: 16px; color: var(--blue); flex: none; margin-top: 2px; }
.mv-vision .mv-points .icon { color: var(--teal); }

/* Factsheet stats */
.factsheet-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.fstat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 26px;
    text-align: left;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.fstat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.fstat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.fstat-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.fstat-num { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; margin-bottom: 6px; color: var(--blue); }
:root[data-theme="dark"] .fstat-num { color: var(--link); }
.fstat-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.fstat-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Factsheet Guarantees */
.guarantees-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.guarantee-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.guarantee-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.guarantee-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.guarantee-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.guarantee-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--blue);
    border: 1px solid var(--accent-border);
    display: grid;
    place-items: center;
    margin-bottom: 4px;
}
:root[data-theme="dark"] .guarantee-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.guarantee-icon .icon { width: 18px; height: 18px; }
.guarantee-card strong { font-size: 14px; color: var(--text); }
.guarantee-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0; }

/* CEO Spotlight Card */
.ceo-spotlight-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 40px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.ceo-spotlight-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.ceo-spotlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.ceo-spotlight-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.ceo-spotlight-card::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 89, 255, .12), transparent 70%);
    pointer-events: none;
}
.ceo-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: center;
}
.ceo-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ceo-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange) 0%, var(--blue) 55%, var(--teal) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    box-shadow: 0 12px 30px -8px rgba(0, 89, 255, .4);
    margin-bottom: 16px;
    position: relative;
}
.ceo-avatar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 89, 255, .35);
}
.ceo-name-badge h3 { font-size: 22px; margin-bottom: 4px; color: var(--text); }
.ceo-role-title { font-family: var(--font-mono); font-size: 12.5px; color: var(--blue); font-weight: 600; letter-spacing: .04em; }
:root[data-theme="dark"] .ceo-role-title { color: var(--link); }
.ceo-meta-pills { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; width: 100%; }
.ceo-meta-item { font-size: 11.5px; color: var(--text-2); background: var(--bg-tint); padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); font-family: var(--font-mono); }

.ceo-body { display: flex; flex-direction: column; gap: 16px; }
.ceo-quote {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text);
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--orange);
    font-style: italic;
}
.ceo-bio { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.ceo-focus-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ceo-focus-pills span { font-size: 12px; font-family: var(--font-mono); padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--blue); font-weight: 500; }
:root[data-theme="dark"] .ceo-focus-pills span { color: var(--link); }
.ceo-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.ceo-linkedin-btn:hover {
    color: #0077B5;
    border-color: #0077B5;
    box-shadow: 0 4px 14px rgba(0, 119, 181, 0.25);
}

/* Leadership grid */
.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.leader-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.leader-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.leader-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.leader-top { display: flex; gap: 16px; align-items: center; }
.leader-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    flex: none;
    box-shadow: var(--shadow-sm);
}
.la-blue { background: linear-gradient(135deg, #1467FF, var(--blue)); }
.la-teal { background: linear-gradient(135deg, #00BFA8, var(--teal-700)); }
.la-orange { background: linear-gradient(135deg, #FF7A29, var(--orange)); }
.la-deep { background: linear-gradient(135deg, #002DA6, #3B6BFF); }
.la-violet { background: linear-gradient(135deg, #6C38FF, #9D6BFF); }

.leader-info h4 { font-size: 17px; margin-bottom: 2px; }
.leader-role { font-family: var(--font-mono); font-size: 11.5px; color: var(--blue); font-weight: 500; }
:root[data-theme="dark"] .leader-role { color: var(--link); }
.leader-bio { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.leader-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.leader-tags span { font-size: 11px; font-family: var(--font-mono); color: var(--muted); background: var(--bg-tint); padding: 3px 8px; border-radius: 6px; }

/* Employee Squads */
.squads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.squad-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.squad-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.squad-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.squad-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.squad-head { display: flex; align-items: center; justify-content: space-between; }
.squad-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--blue);
    display: grid;
    place-items: center;
}
:root[data-theme="dark"] .squad-icon-badge { color: var(--link); }
.squad-icon-badge .icon { width: 20px; height: 20px; }
.squad-badge { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--bg-tint); color: var(--muted); border: 1px solid var(--border); }
.squad-card h4 { font-size: 16px; margin: 0; }
.squad-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0; }
.squad-skills { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.squad-skills li { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.squad-skills li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex: none; }

/* Timeline */
.timeline-strip { position: relative; margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.timeline-strip::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--blue) 50%, var(--teal));
    z-index: 0;
}
.timeline-node {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease);
}
.timeline-node:hover { transform: translateY(-4px); }
.timeline-year {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.timeline-year::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
    display: inline-block;
}
.timeline-node h4 { font-size: 15px; margin: 0; color: var(--text); }
.timeline-node p { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }

/* Responsive adjustments */
@media (max-width: 1100px) {
    .leadership-grid { grid-template-columns: repeat(2, 1fr); }
    .squads-grid { grid-template-columns: repeat(2, 1fr); }
    .timeline-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .timeline-strip::before { display: none; }
    .guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .ceo-layout { grid-template-columns: 1fr; text-align: center; }
    .ceo-avatar-wrap { margin: 0 auto; }
    .ceo-quote { text-align: left; }
    .ceo-actions { justify-content: center; }
    .factsheet-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .mission-vision-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
    .leadership-grid { grid-template-columns: 1fr; }
    .squads-grid { grid-template-columns: 1fr; }
    .factsheet-stats-grid { grid-template-columns: 1fr; }
    .guarantees-grid { grid-template-columns: 1fr; }
    .timeline-strip { grid-template-columns: 1fr; }
    .company-quick-facts { grid-template-columns: 1fr; }
}

.story-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; }
}
.story-content h2 { margin-bottom: 20px; }
.story-content p { font-size: 16px; line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }
.pillars-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.pillars-badge { font-size: 11px; color: var(--blue); font-weight: 700; margin-bottom: 20px; display: block; }
.principles-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.principles-list li { display: flex; gap: 16px; align-items: flex-start; }
.p-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}
:root[data-theme="dark"] .p-num { color: var(--link); }
.principles-list strong { font-size: 15px; color: var(--text); display: block; margin-bottom: 4px; }
.principles-list p { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }

.office-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .office-split { grid-template-columns: 1fr; }
}
.office-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 30px;
    margin-top: 24px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.office-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.office-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.office-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.office-badge { font-size: 11.5px; color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.office-address { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 20px; }
.office-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; border-top: 1px solid var(--border); padding-top: 18px; }
.office-contact span { font-size: 11px; color: var(--muted); display: block; margin-bottom: 4px; }
.office-contact a, .office-contact span { font-size: 13.5px; }

.global-reach-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 34px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.global-reach-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.global-reach-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.global-reach-box:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.global-reach-box h3 { font-size: 20px; margin-bottom: 14px; }
.global-reach-box p { font-size: 14.5px; color: var(--text-2); margin-bottom: 20px; line-height: 1.6; }
.reach-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.reach-list li { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.reach-list strong { color: var(--text); }

/* ==========================================================================
   Work / Case Studies Page
   ========================================================================== */
.nda-notice-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
}
.nda-badge { font-size: 11.5px; color: var(--teal-700); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-weight: 700; }
:root[data-theme="dark"] .nda-badge { color: var(--teal); }
.nda-notice-card h4 { font-size: 18px; margin-bottom: 10px; }
.nda-notice-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 14px; }
.nda-footnote { font-size: 11px; color: var(--muted); }

.cs-filters-wrapper { margin: 28px 0 36px; }
.cs-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.case-studies-list { display: flex; flex-direction: column; gap: 36px; margin-top: 10px; }
.case-study-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 40px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.case-study-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.case-study-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.case-study-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.case-study-card.is-filtered-in {
    animation: cardFilteredIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cardFilteredIn {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cs-head-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-sector { font-size: 12px; color: var(--blue); font-weight: 700; letter-spacing: .04em; }
:root[data-theme="dark"] .cs-sector { color: var(--link); }
.cs-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-700);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid rgba(0, 211, 187, 0.35);
}
:root[data-theme="dark"] .cs-highlight-pill {
    color: var(--teal);
    background: rgba(0, 211, 187, 0.14);
}
.cs-highlight-pill svg { color: var(--teal); animation: kickerPulse 2.5s ease-in-out infinite; }
.cs-stack-badge { font-size: 11px; padding: 5px 12px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); font-weight: 600; }
.cs-title { font-size: 26px; line-height: 1.25; margin-bottom: 12px; }
.cs-context { font-size: 15px; color: var(--text-2); line-height: 1.6; margin-bottom: 28px; }
.cs-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 800px) {
    .cs-body-grid { grid-template-columns: 1fr; }
}
.cs-col {
    padding: 24px;
    border-radius: var(--r-md);
    background: var(--bg-tint);
    border: 1px solid var(--border);
    transition: transform .25s ease, border-color .25s ease;
}
.cs-col:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.cs-label { font-size: 11px; color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
:root[data-theme="dark"] .cs-label { color: var(--link); }
.cs-col p { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.cs-arch-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cs-arch-list li { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.cs-arch-list strong { color: var(--text); }
.cs-deliverables-box {
    padding: 24px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 28px;
}
.cs-deliv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.cs-deliv-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); line-height: 1.45; }
.cs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-top: 7px; flex: none; box-shadow: 0 0 6px var(--teal); }
.cs-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
    flex-wrap: wrap;
}
.cs-result { display: flex; flex-direction: column; gap: 4px; }
.cs-result span { font-size: 11.5px; color: var(--muted); }
.cs-result strong { font-size: 16px; color: var(--blue); }
:root[data-theme="dark"] .cs-result strong { color: var(--link); }

.reference-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}

/* ==========================================================================
   Insights Page
   ========================================================================== */
.insights-hero-badge {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-md);
}
.badge-kicker { font-size: 11.5px; color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.insights-hero-badge h4 { font-size: 18px; margin-bottom: 10px; }
.insights-hero-badge p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.newsletter-sub-hint { font-size: 11px; color: var(--muted); }

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 28px;
    margin-top: 40px;
}
@media (max-width: 600px) {
    .insights-grid { grid-template-columns: 1fr; }
}
.insight-article-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.insight-article-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.insight-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.insight-article-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.article-cat { color: var(--blue); font-weight: 700; }
:root[data-theme="dark"] .article-cat { color: var(--link); }
.article-title { font-size: 21px; line-height: 1.3; margin-bottom: 14px; color: var(--text); }
.article-summary { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; }
.article-takeaways {
    background: #EEF4FE;
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
}
.takeaway-label { font-size: 11px; color: var(--blue); font-weight: 700; display: block; margin-bottom: 10px; }
.article-takeaways ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.article-takeaways li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text); line-height: 1.45; }
.article-takeaways li svg { color: var(--teal); margin-top: 3px; flex: none; }
.article-quote {
    border-left: 3px solid var(--blue);
    padding-left: 16px;
    margin: 0 0 24px 0;
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-2);
}
.article-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 18px; }

/* ==========================================================================
   Careers Page
   ========================================================================== */
.careers-culture-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 30px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
}
.careers-culture-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
}
.culture-kicker { font-size: 11.5px; color: var(--blue); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.careers-culture-card h4 { font-size: 18px; margin-bottom: 14px; }
.culture-checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.culture-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.culture-checklist li svg { color: var(--teal); margin-top: 3px; flex: none; }

.career-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.roles-list { display: flex; flex-direction: column; gap: 28px; margin-top: 10px; }
.role-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.role-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.role-card:hover {
    border-color: rgba(0, 89, 255, 0.35);
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
}
.role-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.role-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.role-team { font-size: 11.5px; color: var(--blue); font-weight: 700; display: block; margin-bottom: 6px; }
.role-title { font-size: 24px; margin: 0; }
.role-meta-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg-tint);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-2);
}
.role-summary { font-size: 15px; color: var(--text-2); line-height: 1.6; margin-bottom: 22px; }
.role-body { margin-bottom: 24px; }
.role-subhead { font-size: 11.5px; color: var(--muted); font-weight: 700; display: block; margin-bottom: 12px; }
.role-req-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.role-req-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.5; }
.role-req-list li svg { color: var(--teal); margin-top: 4px; flex: none; }
.role-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--border);
    padding-top: 22px;
    flex-wrap: wrap;
}
.role-tech { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-tech span { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ==========================================================================
   Legal Pages (Privacy, Terms)
   ========================================================================== */
.legal-hero { padding-bottom: 30px; }
.legal-date { font-size: 12px; color: var(--blue); font-weight: 600; }
:root[data-theme="dark"] .legal-date { color: var(--link); }
.legal-layout { max-width: 820px; margin: 0 auto; }
.legal-content h2 { font-size: 24px; margin: 36px 0 16px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); margin-bottom: 16px; }
.legal-content ul { margin: 0 0 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.legal-content li { font-size: 15px; color: var(--text-2); line-height: 1.6; }
.legal-content strong { color: var(--text); }
.legal-content code { background: var(--bg-tint); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13.5px; }
.legal-contact-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    margin-top: 20px;
    font-size: 14.5px;
    line-height: 1.65;
}

/* ==========================================================================
   Contact Office Location & Interactive Map
   ========================================================================== */
.contact-map-layout {
    margin-top: 32px;
    width: 100%;
}
.contact-map-frame {
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    height: 480px;
    width: 100%;
    position: relative;
}
.contact-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
:root[data-theme="dark"] .contact-map-frame iframe {
    filter: invert(90%) hue-rotate(180deg) contrast(90%);
}

@media (max-width: 768px) {
    .contact-map-frame {
        height: 380px;
        border-radius: var(--r-lg);
    }
}

/* ==========================================================================
   Global Interactive UI (Scroll Progress, Back-to-Top, Industry Nav)
   ========================================================================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3.5px;
    background: linear-gradient(90deg, var(--orange), var(--blue), var(--teal));
    z-index: 9999;
    pointer-events: none;
    transition: width 0.08s linear;
    box-shadow: 0 0 10px rgba(0, 211, 187, 0.6);
}

.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease), border-color .2s, color .2s, box-shadow .2s;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 89, 255, 0.3);
    transform: translateY(-3px) scale(1.05);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}
.back-to-top svg {
    width: 18px;
    height: 18px;
    transition: transform .2s var(--ease);
}
.back-to-top:hover svg {
    transform: translateY(-2px);
}

/* Quick Jump Sector Navigation (industries.php) */
.industry-nav-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 4px 16px;
    margin-bottom: 28px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.ind-nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all .22s var(--ease);
}
.ind-nav-chip:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--surface-2);
    transform: translateY(-1px);
}
.ind-nav-chip.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 89, 255, 0.35);
}

.industry-card.is-spotlight {
    animation: indSpotlight 1.8s ease-in-out 2;
}
@keyframes indSpotlight {
    0%, 100% { box-shadow: var(--shadow-sm); transform: none; }
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent), 0 20px 40px -10px rgba(0, 89, 255, 0.25);
        transform: translateY(-6px);
        border-color: var(--blue);
    }
}

/* ==========================================================================
   Universal Card Grids & Feature / Idea Boxes (Reference Box System)
   ========================================================================== */
.cards-grid {
    display: grid;
    gap: 24px;
}
.cards-3 {
    grid-template-columns: repeat(3, 1fr);
}
.cards-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
    .cards-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 820px) {
    .cards-3 {
        grid-template-columns: 1fr;
    }
    .cards-4 {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 30px 28px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.feature-card:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.feature-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .35s var(--ease);
}
:root[data-theme="dark"] .feature-icon {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(-3deg);
}
.feature-card h4, .feature-card h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin: 0;
}
.feature-card p {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}

.idea-box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 30px 26px;
    box-shadow: 0 4px 20px -2px rgba(0, 89, 255, 0.05), 0 14px 34px -8px rgba(10, 30, 80, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.idea-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5px;
    background: var(--grad-accent-line);
    z-index: 2;
    transition: all .4s var(--ease);
}
.idea-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px -4px rgba(0, 89, 255, 0.14), 0 26px 54px -10px rgba(10, 30, 80, 0.12);
    border-color: rgba(0, 89, 255, 0.35);
}
.idea-box:hover::before {
    background: var(--grad-accent-hover);
    box-shadow: 0 2px 10px rgba(0, 89, 255, 0.4);
}
.idea-letter {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    font-weight: 800;
    font-size: 18px;
    color: var(--blue);
    margin-bottom: 16px;
    transition: transform .35s var(--ease);
}
:root[data-theme="dark"] .idea-letter {
    background: #0F224D;
    border-color: #1E3A78;
}
.idea-box:hover .idea-letter {
    transform: scale(1.08) rotate(3deg);
}
.idea-box h4, .idea-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
}
.idea-box p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 18px;
    flex-grow: 1;
}
.idea-deliv {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    background: #EEF4FE;
    border: 1px solid #D6E4FF;
    padding: 8px 12px;
    border-radius: 8px;
    width: fit-content;
}
:root[data-theme="dark"] .idea-deliv {
    background: #0F224D;
    border-color: #1E3A78;
    color: #7EB0FF;
}

/* ==========================================================================
   Social Channels (Contact Card & Footer)
   ========================================================================== */
.footer-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0E1630;
    border: 1px solid #1E2D55;
    color: #A9B4CF;
    text-decoration: none !important;
    transition: all .25s var(--ease);
}
.footer-social-link:hover {
    color: #fff;
    transform: translateY(-2px);
}
.footer-social-link.social-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: #d6249f;
    box-shadow: 0 4px 14px rgba(214, 36, 159, 0.4);
}
.footer-social-link.social-facebook:hover {
    background: #1877F2;
    border-color: #1877F2;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.4);
}
.footer-social-link.social-linkedin:hover {
    background: #0A66C2;
    border-color: #0A66C2;
    box-shadow: 0 4px 14px rgba(10, 102, 194, 0.4);
}
.footer-social-link.social-x:hover {
    background: #000;
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
}
.footer-social-link.social-threads:hover {
    background: #101010;
    border-color: #777;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
}
.footer-social-link svg {
    width: 17px;
    height: 17px;
    transition: transform .25s var(--ease);
}
.footer-social-link:hover svg {
    transform: scale(1.1);
}

/* Contact Page Social Section */
.contact-social-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-social-head .mono {
    font-size: 11px;
    color: var(--blue);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}
:root[data-theme="dark"] .contact-social-head .mono {
    color: var(--link);
}
.contact-social-head p {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
}
.contact-social-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none !important;
    transition: all .25s var(--ease);
}
.contact-social-item:hover {
    background: var(--surface);
    border-color: var(--blue);
    transform: translateX(4px);
    box-shadow: 0 4px 16px -2px rgba(0, 89, 255, 0.12);
}
.social-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--blue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .25s var(--ease);
}
:root[data-theme="dark"] .social-icon-box {
    background: #0F224D;
    border-color: #1E3A78;
    color: #6E9DFF;
}
.contact-social-item:hover .social-icon-box {
    transform: scale(1.05);
}
.contact-social-item.social-instagram:hover .social-icon-box {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
    border-color: #d6249f;
}
.contact-social-item.social-facebook:hover .social-icon-box {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}
.contact-social-item.social-linkedin:hover .social-icon-box {
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
}
.contact-social-item.social-x:hover .social-icon-box {
    background: #000;
    color: #fff;
    border-color: #444;
}
.contact-social-item.social-threads:hover .social-icon-box {
    background: #101010;
    color: #fff;
    border-color: #555;
}
.social-icon-box svg {
    width: 18px;
    height: 18px;
}
.social-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}
.social-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.contact-social-item:hover .social-name {
    color: var(--blue);
}
.social-handle {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .02em;
}
.social-arrow {
    color: var(--muted);
    transition: transform .25s var(--ease), color .25s;
    flex-shrink: 0;
}
.contact-social-item:hover .social-arrow {
    color: var(--blue);
    transform: translate(2px, -2px);
}



/* =====================================================================
   2026-10 repositioning: consulting pages, shared fixes
   ===================================================================== */

/* ---------- Motion: one ambient animation (hero waves); everything else is still ---------- */
.grad, .net-core, .net-node, .net-dot, .pv-tile, .pv-links path, .pv-core, .pv-arrow,
.kicker-pulse-dot, .eco-energy-pulse, .wave-glow,
.eco-lines line, .eco-core, .eco-node, .doc-card::after, .doc-arrow, .cs-highlight-pill svg { animation: none !important; }
.eco-energy-pulse, .net-pulse { display: none; }
.reveal { transform: translateY(10px); transition-duration: .45s; }
.hero .reveal, .page-hero .reveal { opacity: 1; transform: none; }

/* ---------- One heading treatment: gradient words on the H1 only ---------- */
h2 .grad, .h2 .grad, h3 .grad {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor; color: inherit;
}

/* ---------- Mega menu additions ---------- */
.mega-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.mega-text-link { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; text-decoration: none !important; }
.mega-text-link:hover { background: var(--bg-tint); color: var(--text); }
.mega-text-strong { color: var(--text); font-weight: 600; margin-top: 4px; }
.mobile-nav > .mobile-nav-link { display: flex; }

/* ---------- Footer: LinkedIn instead of a mailto form ---------- */
.newsletter-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.newsletter-actions .btn-ghost { color: #DCE6FF; border-color: #33427A; background: transparent; }
@media (max-width: 720px) { .newsletter-actions { justify-content: flex-start; } }

/* ---------- Shared lists ---------- */
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tick-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-2); line-height: 1.5; }
.tick-list li .icon { color: var(--teal-700); margin-top: 2px; }
:root[data-theme="dark"] .tick-list li .icon { color: var(--teal); }
.tick-list-muted li .icon { color: var(--muted) !important; }
.tick-list strong { color: var(--text); }
.next-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--text-2); line-height: 1.55; }
.next-steps li::marker { color: var(--orange-700); font-weight: 700; }
:root[data-theme="dark"] .next-steps li::marker { color: var(--orange); }
.next-steps-lg { font-size: 17px; margin: 28px 0 32px; max-width: 62ch; }

/* ---------- Consulting offer cards ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.offer-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.offer-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.offer-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--blue); }
:root[data-theme="dark"] .offer-card-icon { color: var(--link); }
.offer-card-name { font: 700 19px/1.25 var(--font-display); }
.offer-card-tagline { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.offer-card-for { color: var(--muted); font-size: 14px; line-height: 1.5; }
.offer-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.offer-card-foot .mono { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; }
.offer-card-link { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--blue); }
:root[data-theme="dark"] .offer-card-link { color: var(--link); }
@media (max-width: 1000px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Consulting page layout ---------- */
.consult-hero-panel { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.consult-hero-panel > .mono { color: var(--muted); margin-bottom: 16px; }
.consult-for { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0; }
.consult-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.consult-split h2 { margin-bottom: 16px; }
.consult-lists { display: grid; gap: 28px; }
.consult-lists h3 { margin-bottom: 14px; }
.consult-aside { display: grid; gap: 18px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: var(--bg-tint); border: 1px solid var(--border); }
.consult-direct { color: var(--muted); font-size: 14.5px; margin: 0; }
.lead-map { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lead-map li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.lead-map li .icon { color: var(--muted); }
.lead-map a:first-child { font-weight: 600; }
.step-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step-row li { padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.step-num { display: inline-block; color: var(--orange-700); margin-bottom: 10px; }
:root[data-theme="dark"] .step-num { color: var(--orange); }
.step-row h3 { margin-bottom: 8px; }
.step-row p { color: var(--text-2); margin: 0; }
@media (max-width: 900px) { .consult-split, .step-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Home: implementation paths and founder note ---------- */
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.path-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.path-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.path-card p { color: var(--text-2); margin: 0; }
.path-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--teal-soft); color: var(--teal-700); }
:root[data-theme="dark"] .path-icon { color: var(--teal); }
.path-link { margin-top: auto; padding-top: 8px; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--blue); font-size: 14.5px; }
:root[data-theme="dark"] .path-link { color: var(--link); }
@media (max-width: 900px) { .path-grid { grid-template-columns: minmax(0, 1fr); } }
.founder-note { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; padding: 36px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.founder-note .mono { color: var(--muted); margin-bottom: 12px; }
.founder-note blockquote { margin: 0 0 16px; font: 600 clamp(19px, 2vw, 24px)/1.45 var(--font-display); color: var(--text); }
.founder-note figcaption { color: var(--text-2); font-size: 15px; }
@media (max-width: 640px) { .founder-note { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

/* ---------- About: roles and facts ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.staff-card { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.staff-card h3 { margin: 14px 0 8px; }
.staff-card p { color: var(--text-2); margin: 0; }
@media (max-width: 900px) { .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .staff-grid { grid-template-columns: minmax(0, 1fr); } }
.company-quick-facts { margin: 0; }
.company-quick-facts dt { font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.company-quick-facts dd { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.4; font-weight: 600; text-wrap: balance; }
.company-stat-box > .mono { color: var(--muted); }

/* ---------- Contact and forms ---------- */
.contact-card-kicker { color: var(--muted); margin-bottom: 12px; }
.contact-founder { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.contact-founder p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.ceo-avatar.ceo-avatar-sm { width: 44px; height: 44px; font-size: 15px; flex: none; }
.ceo-avatar.ceo-avatar-sm::after { display: none; }
.founder-note .ceo-avatar { width: 72px; height: 72px; font-size: 22px; }
.form-privacy { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.contact-map-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .contact-map-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Thank-you page ---------- */
.thanks-inner { max-width: 820px; }
.thanks-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--teal-700); margin-bottom: 12px; }
:root[data-theme="dark"] .thanks-icon { color: var(--teal); }
.thanks h1 { max-width: 24ch; }

/* ---------- Configurator note, industries add-ons, insights status ---------- */
.cfg-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 14px 0 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--text); font-size: 14.5px; line-height: 1.5; }
.cfg-note[hidden] { display: none; }
.cfg-note .icon { color: var(--blue); margin-top: 2px; }
:root[data-theme="dark"] .cfg-note .icon { color: var(--link); }
.chip-addon { border-style: dashed; }
.article-status { color: var(--orange-700); }
:root[data-theme="dark"] .article-status { color: var(--orange); }

/* ---------- Platform explorer: real logos on white plates ---------- */
.badge-logo { background: #fff; padding: 8px 10px; border-radius: 10px; display: inline-flex; align-items: center; }
.badge-logo img { height: 22px; width: auto; }

/* ---------- Optional WhatsApp button ---------- */
.wa-float { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-700); color: #fff; box-shadow: var(--shadow-lg); }
.wa-float:hover { filter: brightness(1.08); }
.problem-copy h2 { margin-bottom: 18px; }

/* ---------- Dark-mode contrast fixes found by the 2026-10 audit ---------- */
:root[data-theme="dark"] .article-takeaways { background: var(--surface-2); }
:root[data-theme="dark"] .takeaway-label,
:root[data-theme="dark"] .form-kicker,
:root[data-theme="dark"] .pillars-badge,
:root[data-theme="dark"] .mini-steps .mono { color: var(--link); }
/* The Automate badge sits on a fixed teal in both themes, so its text is a fixed dark. */
.idea-A .amap-badge { color: #04211D; }

/* Small mono labels in brand blue: AA in light, too dark on navy, so they use the link blue in dark. */
:root[data-theme="dark"] :is(.cfg-step legend .mono, .sysviz-node .mono, .flow-tabs .mono, .culture-kicker, .role-team, .aside-kicker) { color: var(--link); }
/* Outcome badges: brand blue on pale blue was 4.4:1; the deep brand blue passes. */
.outcome-badge, .module-card-outcome .outcome-badge { color: var(--deep); }
:root[data-theme="dark"] .outcome-badge, :root[data-theme="dark"] .module-card-outcome .outcome-badge { color: #A9C6FF; }
/* IDEA hexagons on How we work: white on orange and teal is under 3:1, so use the fixed dark ink. */
.idea-hex-item.tone-orange small, .idea-hex-item.tone-teal small,
.idea-hex-item.tone-orange, .idea-hex-item.tone-teal { color: #04211D; }
/* Stage labels in the approach map use the stronger text shades on light surfaces. */
:root[data-theme="light"] .amap-idea { color: var(--idea-text); }
/* Orange (Identify) and teal (Automate) are too light for white text: those badges use a fixed dark ink. */
.idea-I .amap-badge, .amap-link.idea-I.is-active .amap-code, .amap-link.idea-A.is-active .amap-code { color: #1A0B00; }
.idea-A .amap-badge, .amap-link.idea-A.is-active .amap-code { color: #04211D; }
/* Long button labels wrap on phones instead of pushing the page sideways. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; max-width: 100%; height: auto; min-height: 44px; } }

/* =====================================================================
   2026-10 (part 2): practices, cloud platforms, service breakdowns, sitemap
   ===================================================================== */

/* ---------- Mega menus: consulting practices across the full width ---------- */
.mega-col-full { grid-column: 1 / -1; }
.mega-practices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 20px; }
.mega-practice { display: flex; flex-direction: column; gap: 2px; }
.mega-practice-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 4px; border-radius: 10px; color: var(--text); text-decoration: none !important; }
.mega-practice-head:hover { background: var(--bg-tint); }
.mega-practice-head strong { font-size: 15px; line-height: 1.25; }
.mega-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; padding: 14px 18px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--text); text-decoration: none !important; }
.mega-strip .mono { color: var(--muted); }
.mega-strip .mega-feature-cta { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--blue); font-weight: 600; }
:root[data-theme="dark"] .mega-strip .mega-feature-cta { color: var(--link); }
@media (max-width: 1260px) { .mega-practices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Mobile menu: sub-levels ---------- */
.mobile-nav details a.mobile-sub { padding-left: 26px; font-size: 15px; }
.mobile-nav details a.mobile-sub-head { font-weight: 600; color: var(--text); margin-top: 6px; }
.mobile-label { display: block; padding: 12px 12px 4px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Consulting practice cards ---------- */
.practice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.practice-card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: clip; }
.practice-card-head { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 16px; color: var(--text); text-decoration: none !important; }
.practice-card-head:hover .offer-card-name { color: var(--blue); }
:root[data-theme="dark"] .practice-card-head:hover .offer-card-name { color: var(--link); }
.practice-offers { list-style: none; margin: auto 0 0; padding: 8px 12px 14px; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.practice-offers a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; text-decoration: none !important; }
.practice-offers a:hover { background: var(--bg-tint); color: var(--text); }
.practice-offers .icon { color: var(--muted); flex: none; }
@media (max-width: 1000px) { .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .practice-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Service breakdown ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease); }
.svc-item:hover { border-color: var(--accent-border); }
.svc-icon { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--blue); }
:root[data-theme="dark"] .svc-icon { color: var(--link); }
.svc-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.svc-text { color: var(--text-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cloud platform cards ---------- */
.cloud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cloud-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cloud-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.cloud-card .logo-plate { align-self: flex-start; }
.cloud-fit { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.cloud-card .offer-card-link { margin-top: auto; }
@media (max-width: 1000px) { .cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cloud-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HTML sitemap ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; align-items: start; }
.sitemap-group h2 { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.sitemap-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sitemap-group a { color: var(--text-2); }
.sitemap-group a:hover { color: var(--text); }
.sitemap-child { padding-left: 16px; font-size: 14.5px; }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   2026-10 (part 3): client work, case studies, founder photo, big screens
   ===================================================================== */

/* ---------- Client work index ---------- */
.cs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.work-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.work-card:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.work-card[hidden] { display: none; }
.work-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.work-card-num { color: var(--muted); font-size: 11px; line-height: 1.5; }
.work-card-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 55%; }
.work-card-stat strong { font: 700 22px/1.1 var(--font-display); color: var(--orange-700); }
:root[data-theme="dark"] .work-card-stat strong { color: var(--orange); }
.work-card-stat span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.work-card-title { font: 700 18px/1.3 var(--font-display); }
.work-card-meta { display: grid; gap: 6px; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.work-card-meta span { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; }
.work-card-meta .icon { margin-top: 3px; color: var(--muted); }
.work-card .offer-card-link { margin-top: auto; }
.work-facts { margin: 0 0 14px; display: grid; gap: 12px; }
.work-facts div { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.work-facts dt { font: 700 28px/1 var(--font-display); color: var(--text); }
.work-facts dd { margin: 0; color: var(--text-2); }
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Case study detail ---------- */
.csd-title { max-width: 22em; }
.cs-lead { max-width: 70ch; }
.cs-stats { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.cs-stats li { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.cs-stats li + li { border-left: 1px solid var(--border); }
.cs-stats strong { font: 700 clamp(24px, 3vw, 34px)/1.1 var(--font-display); color: var(--orange-700); }
:root[data-theme="dark"] .cs-stats strong { color: var(--orange); }
.cs-stats span { color: var(--text-2); font-size: 14px; }
.cs-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; align-items: start; }
.cs-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.cs-glance, .cs-toc { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.cs-glance > .mono, .cs-toc > .mono { color: var(--muted); margin-bottom: 12px; }
.cs-glance dl { margin: 0; display: grid; gap: 12px; }
.cs-glance dt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cs-glance dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.cs-toc { display: grid; gap: 4px; }
.cs-toc a { padding: 6px 8px; border-radius: 8px; color: var(--text-2); font-size: 14px; }
.cs-toc a:hover { background: var(--bg-tint); color: var(--text); }
.csd-body { min-width: 0; display: grid; gap: 56px; }
.cs-section h2 { margin: 2px 0 16px; }
.cs-section h3 { margin: 28px 0 14px; }
.cs-section .lead-text + .lead-text { margin-top: 12px; }
.cs-step { color: var(--orange-700); }
:root[data-theme="dark"] .cs-step { color: var(--orange); }
.cs-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cs-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--text-2); line-height: 1.6; }
.cs-points li .icon { margin-top: 3px; color: var(--teal-700); }
:root[data-theme="dark"] .cs-points li .icon { color: var(--teal); }
.cs-points-bad li .icon { color: var(--orange-700); }
:root[data-theme="dark"] .cs-points-bad li .icon { color: var(--orange); }
.cs-points strong { color: var(--text); }
.cs-callout { margin-top: 24px; padding: 20px 24px; border-radius: var(--r-md); background: var(--orange-soft); border-left: 3px solid var(--orange); }
.cs-callout .mono { color: var(--orange-700); margin-bottom: 8px; }
:root[data-theme="dark"] .cs-callout .mono { color: var(--orange); }
.cs-callout p { margin: 0; color: var(--text); line-height: 1.6; }
.cs-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.cs-table th, .cs-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.5; }
.cs-table thead th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cs-table tbody th { font-weight: 600; color: var(--text); width: 32%; }
.cs-table td { color: var(--text-2); }
.cs-table tr:last-child th, .cs-table tr:last-child td { border-bottom: 0; }
.cs-table .cs-after { color: var(--text); font-weight: 600; }
.cs-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.cs-part { padding: 22px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.cs-part-num { color: var(--blue); }
:root[data-theme="dark"] .cs-part-num { color: var(--link); }
.cs-part h3 { margin: 8px 0 8px !important; }
.cs-part p { margin: 0; color: var(--text-2); line-height: 1.6; }
.cs-footnote { color: var(--muted); font-size: 13.5px; margin: 0; }
.cs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-pager a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-md); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; font-weight: 600; }
.cs-pager a:hover { border-color: var(--accent-border); }
.cs-pager .mono { color: var(--muted); }
.cs-pager-next { text-align: right; grid-column: 2; }
.story-quote { margin: 28px 0 0; padding: 22px 26px; border-left: 3px solid var(--blue); background: var(--accent-soft); border-radius: 0 var(--r-md) var(--r-md) 0; font: 600 18px/1.5 var(--font-display); color: var(--text); }
.story-quote cite { display: block; margin-top: 10px; font: 500 14px/1.4 var(--font-body); font-style: normal; color: var(--text-2); }
@media (max-width: 980px) {
    .cs-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cs-aside { position: static; }
    .cs-toc { display: none; }
}
@media (max-width: 720px) {
    .cs-stats { grid-template-columns: minmax(0, 1fr); }
    .cs-stats li + li { border-left: 0; border-top: 1px solid var(--border); }
    .cs-parts, .cs-pager { grid-template-columns: minmax(0, 1fr); }
    .cs-pager-next { grid-column: auto; text-align: left; }
}

/* ---------- Founder photo, when FOUNDER_PHOTO exists under public/img/photos ---------- */
img.ceo-photo { object-fit: cover; border-radius: 50%; display: block; }

/* ---------- Insight articles ---------- */
.article-h1 { max-width: 22em; }
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.article-byline .ceo-avatar, .article-byline .ceo-photo { width: 56px; height: 56px; flex: none; }
.article-byline strong { display: block; color: var(--text); }
.article-byline .mono { color: var(--muted); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.article-body { min-width: 0; display: grid; gap: 36px; }
.article-section h2 { margin: 0 0 12px; }
.article-section p { margin: 0 0 12px; color: var(--text-2); line-height: 1.65; }
.article-section p:last-child { margin-bottom: 0; }
.article-section .cs-points { margin-top: 8px; }
.article-related { margin: 8px 0 0; }
.article-aside { position: sticky; top: 96px; padding: 22px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); display: grid; gap: 12px; }
.article-aside p { margin: 0; color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px) {
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .article-aside { position: static; }
}

/* ---------- Tablets: keep two-column grids from cramping ---------- */
@media (min-width: 621px) and (max-width: 900px) {
    .page-hero h1 { font-size: clamp(34px, 5.4vw, 48px); }
    .consult-hero-panel { padding: 22px; }
}

/* ---------- 2026-10 polish: diagram, type, motion, small screens ---------- */
.net-node { width: 26%; padding: 14px 12px 13px; }
.net-node > span:last-child { display: block; min-height: 2.7em; text-wrap: balance; hyphens: none; }
.net-core > .mono { letter-spacing: .1em; line-height: 1.35; white-space: nowrap; }
.field input, .field textarea, .field select { font-size: 16px; }
@media (max-width: 640px) {
    .net-node { width: auto; }
    .net-node > span:last-child { min-height: 0; }
    /* Leave the corner clear so the WhatsApp button does not cover the logo card. */
    .hero-home .net { padding-right: 68px; }
    .hero-copy h1, .page-hero h1 { text-wrap: balance; }
    .chip-line { letter-spacing: .04em; font-size: 10.5px; gap: 6px; padding: 8px 14px; }
    .footer-brand .addr-line { white-space: normal; }
    .footer-bottom { padding-bottom: 64px; }
}
@media (max-width: 420px) {
    .mobile-sheet-cta { grid-template-columns: 1fr; }
    .mobile-sheet-cta .btn { width: 100%; }
}

/* Big screens and projectors: scale the whole layout in proportion. */
@media (min-width: 1800px) { html { zoom: 1.12; } }
@media (min-width: 2200px) { html { zoom: 1.3; } }
@media (min-width: 2800px) { html { zoom: 1.6; } }
@media (min-width: 3600px) { html { zoom: 2; } }
@media (min-width: 4400px) { html { zoom: 2.3; } }
@media (min-width: 5200px) { html { zoom: 2.7; } }
@media (min-width: 6000px) { html { zoom: 3.1; } }
@media (min-width: 6800px) { html { zoom: 3.5; } }
@media (min-width: 7600px) { html { zoom: 4; } }
/* Grid items default to min-width: auto, which lets a wide table push the page sideways. */
.csd-body > *, .cs-section, .cs-layout > * { min-width: 0; }
:root[data-theme="dark"] .status-pill { color: var(--teal); }
.work-card-stat.is-long strong { font-size: 16px; line-height: 1.2; }
@media (min-width: 1001px) { .cloud-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* ==========================================================================
   Editorial redesign (October 2026)
   Calmer, consulting-firm look: white surfaces, photography, fewer boxes,
   and system visuals that animate once when they scroll into view.
   ========================================================================== */

:root {
    --bg: #FFFFFF;
    --bg-tint: #F4F6FA;
    --surface-2: #F7F9FC;
    --border: #E4E8F0;
    --border-strong: #CDD5E3;
    --shadow-sm: 0 1px 2px rgba(10, 19, 48, .06);
    --shadow-md: 0 6px 24px -8px rgba(10, 19, 48, .14);
    --shadow-lg: 0 24px 60px -20px rgba(10, 19, 48, .28);
    --navy: #0A1330;
    --scrim: linear-gradient(180deg, rgba(7, 16, 42, 0) 30%, rgba(7, 16, 42, .82) 100%);
}
:root[data-theme="dark"] { --navy: #030713; }

body { background: var(--bg); }
.section { padding: clamp(80px, 9vw, 136px) 0; }
.section-soft { background: var(--bg-tint); }
.section-tint { background: var(--bg-tint); border-top: 0; }
.section-head { margin-bottom: 48px; }
.section-head h2 { max-width: 20ch; }
.section-head-center h2 { margin-inline: auto; }
.section-head-split .lead { max-width: 44ch; justify-self: end; }
.lead { max-width: 58ch; }

.photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home hero ---------- */
.hero-editorial .hero-bg .hero-waves { opacity: .3; }
.stat-band-quiet { position: relative; z-index: 2; }
.hero-editorial .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; min-height: min(700px, calc(100vh - var(--header-h) - 80px)); padding-block: 24px 8px; }
.hero-editorial .hero-lead { font-size: 19px; max-width: 46ch; }
.hero-photo { position: relative; aspect-ratio: 5 / 5.4; max-height: 620px; }
.hero-photo-img { border-radius: 20px; box-shadow: var(--shadow-lg); }
.hero-float {
    position: absolute; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 16px 18px;
    animation: hf-in .8s var(--ease) both;
}
.hero-float .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.hero-float-a { left: -40px; bottom: 56px; width: 230px; animation-delay: .3s; }
.hero-float-b { right: -24px; top: 40px; display: flex; gap: 12px; align-items: center; animation-delay: .55s; }
.hero-float-b strong { display: block; font-size: 14px; color: var(--text); }
.hero-float-b small { font-size: 12.5px; color: var(--muted); }
.hf-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-700); flex: none; }
.hf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hf-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); opacity: .35; animation: hf-step .5s var(--ease) forwards; animation-delay: calc(.9s + var(--i) * .45s); }
.hf-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-family: var(--font-mono); font-size: 12px; color: #fff; background: var(--blue); }
.hf-steps .tone-orange span { background: var(--orange-700); }
.hf-steps .tone-deep span { background: var(--deep); }
.hf-steps .tone-teal span { background: var(--teal-700); }
@keyframes hf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hf-step { to { opacity: 1; } }

.stat-band.stat-band-quiet { transform: none; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; margin-top: 56px; padding-top: 28px; }
.stat-band-quiet li { display: grid; gap: 4px; padding: 0 24px 0 0; border: 0; background: none; }
.stat-band-quiet strong { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--text); }
.stat-band-quiet span { font-size: 14px; color: var(--muted); }
.hero-editorial + .trust { padding: 40px 0; background: none; border-top: 0; }

/* ---------- Practice tiles ---------- */
.practice-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 280px; gap: 18px; }
.practice-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.practice-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 18px; }
.practice-grid > * { grid-column: span 2; }
.practice-grid > :nth-child(4):nth-last-child(2), .practice-grid > :nth-child(5):last-child { grid-column: span 3; }
.practice-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; }
.practice-tile { position: relative; display: block; overflow: hidden; border-radius: 16px; color: #fff; text-decoration: none; background: var(--navy); isolation: isolate; }
.practice-tile-media { position: absolute; inset: 0; z-index: -2; }
.practice-tile-media img { transition: transform .8s var(--ease); }
.practice-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.practice-tile:hover .practice-tile-media img { transform: scale(1.04); }
.practice-tile-body { position: absolute; inset: auto 0 0 0; padding: 22px; display: grid; gap: 6px; }
.practice-tile-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #CFE0FF; }
.practice-tile-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; }
.practice-mosaic > :first-child .practice-tile-name { font-size: clamp(26px, 2.4vw, 34px); }
.practice-tile-tagline { font-size: 14px; line-height: 1.5; color: #E3EAF7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.practice-tile-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #fff; margin-top: 4px; }
.practice-tile:hover .practice-tile-link .icon { transform: translateX(3px); }
.practice-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Feature split ---------- */
.feature-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.feature-split.is-reversed > :first-child { order: 2; }
.feature-copy h2 { margin-bottom: 18px; }
.point-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.point-list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text); }
.point-list .icon { color: var(--blue); flex: none; }
.feature-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }

/* ---------- Animated visuals (play once, on .is-in) ---------- */
.viz { margin: 0; }
.viz > svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz text { font-family: var(--font-body); text-anchor: middle; }

.viz-connect { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(12px, 2.5vw, 28px); box-shadow: var(--shadow-md); }
.vz-ring { fill: none; stroke: var(--border); stroke-dasharray: 3 6; }
.vz-ring-2 { stroke: var(--accent-border); }
.vz-line { fill: none; stroke: var(--border-strong); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vz-pulse { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: .07; opacity: 0; }
.vz-pulse-teal { stroke: var(--teal); }
.vz-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vz-node rect { fill: var(--surface); stroke: var(--border-strong); }
.vz-t { font-size: 14px; font-weight: 600; fill: var(--text); }
.vz-s { font-size: 11px; fill: var(--muted); }
.vz-hub { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vz-hub circle { fill: var(--blue); }
.vz-t-light { fill: #fff; }
.vz-s-light { fill: #D6E4FF; }
.viz-connect.is-in .vz-node { animation: vz-pop .6s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms); }
.viz-connect.is-in .vz-line { animation: vz-draw .9s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * 110ms); }
.viz-connect.is-in .vz-hub { animation: vz-pop .7s var(--ease) 1.2s forwards; }
.viz-connect.is-in .vz-pulse { animation: vz-flow 1.6s linear 3; animation-delay: calc(1.6s + var(--i) * 220ms); }
@keyframes vz-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes vz-draw { to { stroke-dashoffset: 0; } }
@keyframes vz-flow { 0% { opacity: 1; stroke-dashoffset: .07; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }

/* Roadmap */
.viz-roadmap { --label: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px clamp(16px, 3vw, 36px) 32px; box-shadow: var(--shadow-sm); }
.rm-brackets { position: relative; height: 34px; margin-left: var(--label); }
.rm-brackets span { position: absolute; top: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-top: 2px solid var(--border-strong); padding-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rm-brackets span:first-child { border-color: var(--orange); color: var(--orange-700); }
.rm-brackets span:last-child { border-color: var(--blue); color: var(--link); top: 0; }
.rm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rm-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; }
.rm-label { display: flex; gap: 12px; align-items: center; }
.rm-label strong { display: block; font-size: 16px; color: var(--text); }
.rm-label small { font-size: 13px; color: var(--muted); }
.rm-letter { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; font-family: var(--font-display); font-weight: 700; background: var(--blue); flex: none; }
.rm-row.tone-orange .rm-letter, .rm-row.tone-orange .rm-bar { background: var(--orange-700); }
.rm-row.tone-deep .rm-letter, .rm-row.tone-deep .rm-bar { background: var(--deep); }
.rm-row.tone-teal .rm-letter, .rm-row.tone-teal .rm-bar { background: var(--teal-700); }
.rm-track { position: relative; height: 58px; background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 25%); border-radius: 8px; }
.rm-bar { position: absolute; top: 8px; height: 14px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 7px; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.rm-out { position: absolute; top: 30px; left: calc(var(--a) * 1%); display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; }
.rm-out .icon { color: var(--teal-700); flex: none; }
.rm-late .rm-out { left: auto; right: 0; }
.viz-roadmap.is-in .rm-bar { animation: rm-grow .8s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .35s); }
.viz-roadmap.is-in .rm-out { animation: hf-step .4s ease forwards; animation-delay: calc(.8s + var(--i) * .35s); }
@keyframes rm-grow { to { transform: scaleX(1); } }

/* Radar */
.viz-radar { max-width: 460px; margin-inline: auto; }
.rd-grid { fill: none; stroke: var(--border); }
.rd-axis { stroke: var(--border); }
.rd-label { font-size: 12.5px; fill: var(--text-2); font-weight: 500; }
.rd-target { fill: color-mix(in srgb, var(--teal) 14%, transparent); stroke: var(--teal-700); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0; }
.rd-today { fill: color-mix(in srgb, var(--orange) 22%, transparent); stroke: var(--orange-700); stroke-width: 2; opacity: 0; transform-origin: 200px 190px; transform: scale(.2); }
.viz-radar.is-in .rd-today { animation: rd-in 1s var(--ease) .3s forwards; }
.viz-radar.is-in .rd-target { animation: hf-step .8s ease 1.2s forwards; }
@keyframes rd-in { to { opacity: 1; transform: none; } }
.viz-radar figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--text-2); margin-top: 8px; }
.rd-key { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.rd-key-today { background: var(--orange-700); }
.rd-key-target { background: var(--teal-700); margin-left: 10px; }
.rd-note { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

/* Reduced motion and no-JS: show the end state. */
@media (prefers-reduced-motion: reduce) {
    .hero-float, .hf-steps li { animation: none; opacity: 1; }
    .vz-node, .vz-hub, .rm-out, .rd-target { animation: none !important; opacity: 1; }
    .vz-line { animation: none !important; stroke-dashoffset: 0; }
    .vz-pulse { display: none; }
    .rm-bar, .rd-today { animation: none !important; transform: none; opacity: 1; }
}
.no-js .vz-node, .no-js .vz-hub, .no-js .rm-out, .no-js .rd-target, .no-js .rd-today { opacity: 1; transform: none; }
.no-js .vz-line { stroke-dashoffset: 0; }
.no-js .rm-bar { transform: none; }

/* ---------- Media band ---------- */
.media-band { position: relative; isolation: isolate; color: #fff; padding: clamp(96px, 12vw, 168px) 0; background: var(--navy); overflow: clip; }
.media-band-img { position: absolute; inset: 0; z-index: -2; }
.media-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 16, 42, .92) 0%, rgba(7, 16, 42, .7) 50%, rgba(7, 16, 42, .25) 100%); }
.media-band-inner { display: grid; justify-items: start; gap: 18px; }
.media-band-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; margin: 0; color: #fff; }
.media-band-text { font-size: 18px; line-height: 1.6; color: #D9E2F3; max-width: 48ch; margin: 0 0 8px; }

/* ---------- Photo path cards ---------- */
.path-grid-photo { gap: 24px; }
.path-card.path-card-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.path-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.path-media img { transition: transform .8s var(--ease); }
.path-card-photo:hover .path-media img { transform: scale(1.04); }
.path-body { display: grid; gap: 8px; padding: 22px 22px 24px; color: var(--text-2); font-size: 15px; }
.path-body .h4 { color: var(--text); }

/* ---------- CTA band with photo ---------- */
.cta-band.cta-band-photo { background: linear-gradient(120deg, rgba(0, 35, 140, .94), rgba(0, 70, 220, .86) 60%, rgba(0, 40, 140, .9)); }
.cta-photo { position: absolute; inset: 0; z-index: -3; }
.cta-scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(110deg, rgba(0, 30, 120, .96) 0%, rgba(0, 60, 200, .9) 55%, rgba(0, 40, 140, .78) 100%); }
.cta-band-photo .cta-waves { opacity: .35; }

/* ---------- Page hero with photo (inner pages) ---------- */
.page-hero-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); align-self: center; }
.page-hero-photo .hero-float { left: 18px; right: 18px; bottom: 18px; animation-delay: .3s; }
.page-hero-photo .tick-list { margin: 0; }
.page-hero-photo .tick-list li { font-size: 14px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-chips li { font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }

/* ---------- Offer index (compact list of every offer) ---------- */
.offer-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.offer-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.offer-index a:hover strong { color: var(--link); }
.offer-index strong { font-size: 16px; font-weight: 600; transition: color .2s; }
.offer-index small { grid-column: 1; font-size: 13px; color: var(--muted); }
.offer-index .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); }

/* ---------- Industry photos ---------- */
.ind-photo { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .practice-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
    .practice-grid, .practice-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .practice-grid > :nth-child(n):nth-child(n):nth-child(n) { grid-column: auto; }
    .hero-float-a { left: 16px; }
    .hero-float-b { right: 16px; }
}
@media (max-width: 900px) {
    .hero-editorial .hero-inner, .feature-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .feature-split.is-reversed > :first-child { order: 0; }
    .hero-photo { aspect-ratio: 4 / 3; }
    .viz-roadmap { --label: 0px; }
    .rm-brackets { margin-left: 0; }
    .rm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .offer-index { grid-template-columns: minmax(0, 1fr); }
    .section-head-split .lead { justify-self: start; }
}
@media (max-width: 640px) {
    .practice-mosaic, .practice-grid, .practice-grid-compact { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
    .practice-mosaic > :first-child { grid-column: auto; grid-row: auto; }
    .stat-band.stat-band-quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .hero-float-b { display: none; }
    .hero-float-a { width: auto; right: 16px; bottom: 16px; }
    .hf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rm-track { height: auto; display: grid; gap: 8px; padding: 6px 0; background: none; }
    .rm-bar { position: relative; top: 0; height: 10px; }
    .rm-out { position: static; white-space: normal; font-size: 12.5px; align-items: flex-start; }
    .rm-out .icon { margin-top: 3px; }
    .media-band::after { background: rgba(7, 16, 42, .78); }
}

.viz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(16px, 3vw, 32px); box-shadow: var(--shadow-md); }
.step-row li { background: var(--surface); }
.practice-grid.practice-grid-compact > :nth-child(n) { grid-column: auto; }
.hero-float-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Approach maps: an accordion at every width, one stage open at a time. */
.amap-stage-head { cursor: pointer; grid-template-columns: auto 1fr auto auto; padding-bottom: 22px; }
.amap-stage .amap-chev { display: block; color: var(--muted); transition: transform .25s var(--ease); }
.amap-stage.is-open .amap-chev { transform: rotate(180deg); }
.amap-stage-body { display: none; }
.amap-stage.is-open .amap-stage-body { display: block; }
.amap-panels { display: grid; gap: 12px; }
.no-js .amap-stage-body { display: block; }

/* How we work: stage cards under the roadmap */
.stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.stage-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.stage-card > p { font-size: 14.5px; color: var(--text-2); margin: 0; }
.stage-card-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.stage-card .rm-letter { width: 28px; height: 28px; font-size: 14px; }
.stage-card.tone-orange .rm-letter { background: var(--orange-700); }
.stage-card.tone-deep .rm-letter { background: var(--deep); }
.stage-card.tone-teal .rm-letter { background: var(--teal-700); }
.stage-gets { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.stage-gets li { display: flex; gap: 8px; font-size: 13.5px; color: var(--text); }
.stage-gets .icon { color: var(--teal-700); flex: none; margin-top: 3px; }
.stage-more { margin-top: auto; font-size: 13.5px; }
.stage-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--link); padding-top: 8px; }
.stage-more summary::-webkit-details-marker { display: none; }
.stage-more[open] summary .icon { transform: rotate(180deg); }
.stage-more ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }
@media (max-width: 1080px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stage-grid { grid-template-columns: minmax(0, 1fr); } }

/* Module pages: capabilities as a two-column grid, technical notes on demand */
.cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cap-row { grid-template-columns: 52px minmax(0, 1fr); gap: 8px 16px; padding: 24px; border-radius: 16px; box-shadow: none; }
.cap-row:hover { transform: none; }
.cap-tech-more { grid-column: 2; font-size: 13px; }
.cap-tech-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--teal-700); text-transform: uppercase; letter-spacing: .08em; }
.cap-tech-more p { margin: 8px 0 0; color: var(--text-2); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.tech-details { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.tech-details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; }
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary .kicker { margin-bottom: 6px; }
.tech-details > summary .h3 { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.tech-details[open] > summary > .icon { transform: rotate(180deg); }
.tech-details .tech-grid { padding: 0 28px 28px; }
.module-hero .hero-lead { font-size: 20px; color: var(--text); }
@media (max-width: 800px) { .cap-list { grid-template-columns: minmax(0, 1fr); } }

/* Industries: photo beside each sector, detail on demand */
.industry-card.industry-card-photo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 36px; padding: 28px; box-shadow: none; border-radius: 18px; }
.industry-card-photo:hover { transform: none; box-shadow: var(--shadow-md); }
.industry-card-photo::before { display: none; }
.industry-card-photo .ind-photo { grid-row: 1 / span 3; aspect-ratio: auto; height: 100%; min-height: 260px; margin: 0; }
.industry-card-photo > :not(.ind-photo) { grid-column: 2; }
.ind-more { margin-top: 18px; }
.ind-more .ind-details-grid { margin-top: 14px; }
@media (max-width: 900px) {
    .industry-card.industry-card-photo { grid-template-columns: minmax(0, 1fr); }
    .industry-card-photo .ind-photo { grid-row: auto; aspect-ratio: 16 / 9; height: auto; min-height: 0; margin-bottom: 20px; }
    .industry-card-photo > :not(.ind-photo) { grid-column: 1; }
}
.story-photo { margin: 28px 0; aspect-ratio: 16 / 9; }

/* ---------- Internal pages (second pass) ---------- */
.page-hero .stat-band.stat-band-quiet { margin-top: 48px; }
.more-para { color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin: 12px 0 0; }
.connects-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.connects-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.connects-list .logo-plate { width: 100%; justify-content: center; }

/* Step line: numbered stages joined by a line that draws once */
.step-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.step-line::before, .step-line::after { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--border); }
.step-line::after { background: linear-gradient(90deg, var(--orange), var(--blue), var(--teal)); transform-origin: left; transform: scaleX(0); }
.step-line.is-in::after { animation: rm-grow 1.6s var(--ease) .2s forwards; }
.step-line li { position: relative; display: grid; gap: 6px; align-content: start; padding-right: 20px; }
.step-line-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); color: var(--blue); font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.step-line strong { font-size: 16px; color: var(--text); }
.step-line-dur { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.step-line p { font-size: 14px; color: var(--text-2); margin: 4px 0 0; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .step-line::after { animation: none !important; transform: none; } }
.no-js .step-line::after { transform: none; }
@keyframes rm-grow-y { to { transform: scaleY(1); } }

/* Standards: shortcut vs. our way */
.std-list { display: grid; gap: 12px; }
.std-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.std-row p { display: flex; gap: 10px; margin: 0; padding: 18px 22px; font-size: 14.5px; line-height: 1.6; }
.std-row .icon { flex: none; margin-top: 4px; }
.std-bad { color: var(--muted); border-right: 1px solid var(--border); }
.std-bad .icon { color: var(--orange-700); }
.std-good { color: var(--text); }
.std-good .icon { color: var(--teal-700); }

@media (max-width: 900px) {
    .step-line { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .step-line::before, .step-line::after { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
    .step-line::after { transform-origin: top; transform: scaleY(0); }
    .step-line.is-in::after { animation-name: rm-grow-y; }
    .step-line li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0; }
    .step-line li > :not(.step-line-dot) { grid-column: 2; }
    .step-line-dot { grid-row: 1 / span 3; margin: 0; }
    .std-row { grid-template-columns: minmax(0, 1fr); }
    .std-bad { border-right: 0; border-bottom: 1px solid var(--border); }
    .connects-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* AI topic pages */
.point-list-detail li { align-items: flex-start; font-weight: 400; color: var(--text-2); }
.point-list-detail li .icon { margin-top: 3px; }
.point-list-detail strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.ai-sim-card-flat { box-shadow: var(--shadow-md); }
.std-row-staged { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); }
.std-stage { font-weight: 600; color: var(--text); border-right: 1px solid var(--border); }
@media (max-width: 900px) { .std-row-staged { grid-template-columns: minmax(0, 1fr); } .std-stage { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px !important; } }

/* Case study cards with a group photo */
.work-card.work-card-photo { padding: 0; gap: 0; overflow: hidden; border-radius: 16px; box-shadow: none; }
.work-card-photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.work-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.work-card-media img { transition: transform .8s var(--ease); }
.work-card-photo:hover .work-card-media img { transform: scale(1.04); }
.work-card-stat-float { position: absolute; left: 14px; bottom: 14px; display: grid; padding: 8px 12px; border-radius: 10px; background: rgba(7, 16, 42, .82); backdrop-filter: blur(6px); color: #fff; max-width: calc(100% - 28px); }
.work-card-stat-float strong { font-family: var(--font-display); font-size: 20px; line-height: 1.1; color: #FFB27A; }
.work-card-stat-float span { font-size: 12px; color: #D9E2F3; }
.work-card-body { display: grid; gap: 10px; padding: 18px 20px 22px; }
.work-card-photo .work-card-title { font-size: 16.5px; line-height: 1.35; }
.work-card[hidden] { display: none; }
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }

/* Case study detail */
.cs-banner { margin: 8px 0 0; border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 7; box-shadow: var(--shadow-md); }
@media (max-width: 640px) { .cs-banner { aspect-ratio: 16 / 9; } }

/* Hero photo cards sit on the photo's lower edge so the photo stays visible */
.page-hero-inner .page-hero-photo { overflow: visible; aspect-ratio: 5 / 4; }
.page-hero-photo > .photo { border-radius: 18px; }
.page-hero-photo .hero-float { left: -28px; right: auto; bottom: -28px; max-width: min(380px, 88%); }
@media (max-width: 900px) {
    .page-hero-inner .page-hero-photo { aspect-ratio: 4 / 3; margin-bottom: 36px; }
    .page-hero-photo .hero-float { left: 12px; right: 12px; bottom: -36px; max-width: none; }
}

/* Responsive audit fixes (320px) */
.tech-card, .sim-bubble, .sim-system-pill, .sim-field-row, .ai-sim-card { overflow-wrap: anywhere; min-width: 0; }
.sim-msg > * { min-width: 0; }
@media (max-width: 640px) {
    .tech-details > summary { padding: 18px; }
    .tech-details .tech-grid { padding: 0 12px 14px; }
    .tech-card { padding: 18px; }
}
.stat-band-quiet li { min-width: 0; }
.stat-band-quiet strong { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 640px) { .stat-band-quiet strong { font-size: clamp(24px, 7.5vw, 34px); } }
.stat-band.stat-band-quiet { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 24px; row-gap: 24px; }
.stat-band.stat-band-quiet li { grid-column: auto; grid-row: auto; }
.stat-band.stat-band-quiet li { border: 0 !important; }

/* ---------- Who we work with (audience_section) ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.aud-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-top: 3px solid var(--blue); }
.aud-card:nth-child(2) { border-top-color: var(--teal); }
.aud-card:nth-child(3) { border-top-color: var(--deep); }
.aud-card:nth-child(4) { border-top-color: var(--orange); }
.aud-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--blue); }
:root[data-theme="dark"] .aud-icon { color: var(--link); }
.aud-card h3 { font-size: 20px; line-height: 1.25; }
.aud-size { margin: -4px 0 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.aud-line { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.aud-points { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; }
.aud-points li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.45; color: var(--text); }
.aud-points .icon { margin-top: 3px; color: var(--teal-700); }
:root[data-theme="dark"] .aud-points .icon { color: var(--teal); }
.aud-links { margin: auto 0 0; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.aud-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--blue); }
:root[data-theme="dark"] .aud-links a { color: var(--link); }
.aud-markets { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px auto 0; padding: 14px 22px; width: fit-content; max-width: 100%; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 15px; text-align: center; }
.aud-markets .icon { flex: none; color: var(--blue); }
:root[data-theme="dark"] .aud-markets .icon { color: var(--link); }
@media (max-width: 1100px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .aud-grid { grid-template-columns: minmax(0, 1fr); }
    .aud-markets { border-radius: var(--r-lg); align-items: flex-start; text-align: left; }
}
.footer-markets { font-size: 13.5px; opacity: .8; }

/* Approach map stage heading: an h3 that only wraps the toggle button */
.amap-stage-h { margin: 0; font: inherit; letter-spacing: normal; }

/* ---------- About: procurement details ---------- */
.proc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.proc-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.proc-facts > div { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.proc-facts > div:nth-child(odd) { border-right: 1px solid var(--border); }
.proc-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.proc-facts dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.proc-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.proc-side { padding: 24px; border-radius: var(--r-lg); background: var(--surface-inverse); color: #fff; }
.proc-side .icon { color: var(--teal); width: 28px; height: 28px; }
.proc-side-title { font: 700 18px/1.3 var(--font-display); margin: 12px 0 8px; color: #fff; }
.proc-side p { color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.55; }
.proc-side a { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .proc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
    .proc-facts { grid-template-columns: minmax(0, 1fr); }
    .proc-facts > div:nth-child(odd) { border-right: 0; }
    .proc-facts > div:nth-last-child(2) { border-bottom: 1px solid var(--border); }
}

/* ---------- Regions: hub cards and region pages ---------- */
.region-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.region-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.region-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.region-card-media { position: relative; min-height: 220px; }
.region-card-media .photo, .region-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.region-card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.region-card-kicker { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.region-card-kicker .icon { flex: none; margin-top: 2px; }
.region-card-name { font: 700 24px/1.2 var(--font-display); letter-spacing: -.02em; }
.region-card-link { margin-top: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 14px; color: var(--blue); }
:root[data-theme="dark"] .region-card-link { color: var(--link); }

.region-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.region-rule { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.region-rule-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--blue); margin-bottom: 14px; }
:root[data-theme="dark"] .region-rule-icon { color: var(--link); }
.region-rule h3 { margin-bottom: 8px; }
.region-rule p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }

.region-hosting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.region-hosting h2 { margin-bottom: 16px; }
.region-note { font-size: 14px; color: var(--muted); line-height: 1.6; }
.region-hosting-list { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.region-hosting-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.region-hosting-list > div:last-child { border-bottom: 0; }
.region-hosting-list dt { font-weight: 700; color: var(--text); }
.region-hosting-list dd { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }

.region-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.region-mini { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; transition: border-color .2s var(--ease); }
.region-mini:hover { border-color: var(--accent-border); }
.region-mini .mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.region-mini strong { font: 700 19px/1.3 var(--font-display); }
.region-mini-link { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; color: var(--blue); }
:root[data-theme="dark"] .region-mini-link { color: var(--link); }
.aud-markets a { color: var(--blue); font-weight: 600; }
:root[data-theme="dark"] .aud-markets a { color: var(--link); }

@media (max-width: 1000px) {
    .region-cards { grid-template-columns: minmax(0, 1fr); }
    .region-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .region-hosting { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 620px) {
    .region-card { grid-template-columns: minmax(0, 1fr); }
    .region-card-media { min-height: 160px; }
    .region-rules, .region-mini-grid { grid-template-columns: minmax(0, 1fr); }
    .region-hosting-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Header dropdowns: one row style everywhere (October 2026) ----------
   Every item is mega_item(): icon tile, name, one short line. */
.mega { max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
.mega-head { display: block; }
a.mega-head { text-decoration: none; transition: color .2s; }
a.mega-head:hover { color: var(--blue); }
:root[data-theme="dark"] a.mega-head:hover { color: var(--link); }
.mega-link { align-items: center; padding: 8px 12px; }
.mega-link strong { font-size: 14px; line-height: 1.3; }
.mega-link small { font-size: 12.5px; line-height: 1.35; margin-top: 1px; }
.mega-icon { width: 32px; height: 32px; border-radius: 9px; }
.mega-icon .icon { width: 17px; height: 17px; }
.mega-practices .mega-col { min-width: 0; }
.mega-all { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0 12px; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.mega-all:hover { text-decoration: underline; }
:root[data-theme="dark"] .mega-all { color: var(--link); }
.mega-practices .mega-head { min-height: 2.9em; }
@media (max-width: 1260px) { .mega-practices .mega-head { min-height: 0; } }