/* ==========================================
   Hoàng Khang Incotech Landing Page - Finpay-Inspired Design
   Clean, modern fintech aesthetic
   ========================================== */

/* ==========================================
   CSS Variables & Theme (Notion-HK Hybrid Palette)
   ========================================== */
:root {
    /* ── Hoàng Khang Incotech Enterprise palette — Deep Navy + Ink ──
       Discipline: ONE brand colour (navy). Blue is structural, never decorative.
       No orange / teal / purple / rainbow. Text is near-black for crisp authority. */
    --primary: #183060;            /* official Hoàng Khang Incotech navy — logo, primary buttons, highlight text */
    --primary-light: #1a4585;      /* lifted navy — button hover, gradients */
    --primary-dark: #0F203D;       /* deepest navy — active/press, dark sections */
    --logo-color: var(--primary);  /* keep HK mark + INCOTECH wordmark synced with brand navy */
    --brand-orange: #f5821f;       /* HK mark accent — the middle bar under the monogram */
    --primary-subtle: rgba(24, 48, 96, 0.05);   /* faint navy wash — tints, illustration fills */
    --accent: #2f6abf;             /* single restrained steel-blue — small interactive accents only (~the 20%) */
    --accent-light: rgba(47, 106, 191, 0.10);
    /* Neutral, non-blue-tinted surfaces */
    --secondary-bg: #f6f7f9;
    --text-dark: #0b0f15;          /* near-black — headings, crisp */
    --text-gray: #313840;          /* dark slate — body & secondary text, high-contrast (not faded) */
    --text-light: #565e69;         /* muted captions/labels — still clearly legible */
    --border: #e7e9ee;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-contrast: #071625;
    --contrast-panel-bg: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    --contrast-panel-border: rgba(255, 255, 255, 0.14);
    --contrast-panel-text: #ffffff;
    --contrast-panel-muted-strong: rgba(255, 255, 255, 0.92);
    --contrast-panel-muted: rgba(255, 255, 255, 0.82);
    --contrast-panel-muted-soft: rgba(255, 255, 255, 0.70);
    --contrast-glass-bg: rgba(255, 255, 255, 0.12);
    --contrast-glass-bg-hover: rgba(255, 255, 255, 0.18);
    --contrast-glass-border: rgba(255, 255, 255, 0.24);
    --contrast-decoration-bg: rgba(255, 255, 255, 0.08);
    --contrast-action-bg: #ffffff;
    --contrast-action-text: var(--primary);
    --footer-bg: #0b1a24;
    --footer-text: rgba(255, 255, 255, 0.62);
    --footer-text-muted: rgba(255, 255, 255, 0.42);
    --footer-heading: #ffffff;
    --header-bg: rgba(255, 255, 255, 0.96);
    --button-primary-bg: var(--primary);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: var(--primary-dark);
    --button-secondary-bg: var(--surface);
    --button-secondary-text: var(--primary);
    --button-secondary-border: var(--border);
    --button-secondary-hover-bg: var(--primary-subtle);
    --shadow-color: rgba(24, 48, 96, 0.06);
    --shadow-hover: rgba(24, 48, 96, 0.11);
    /* Notion-style: larger radius, generous feel */
    --card-radius: 14px;
    --section-radius: 20px;
    --btn-radius: 10px;
}

html[data-theme="dark"] {
    /* Dark mode uses ink surfaces and white brand/action treatment.
       Blue is kept as a restrained line accent, never as a large pastel block. */
    --primary: #f8fafc;
    --primary-light: #dbe7f5;
    --primary-dark: #ffffff;
    --primary-subtle: rgba(255, 255, 255, 0.08);
    --accent: #9fb4ce;
    --accent-light: rgba(159, 180, 206, 0.14);
    --secondary-bg: #0a131e;
    --text-dark: #f1f5f9;
    --text-gray: #d7dee7;
    --text-light: #b8c3cf;
    --border: #20303f;
    --surface: #101a26;
    --surface-elevated: #152232;
    --surface-contrast: #070f18;
    --contrast-panel-bg: linear-gradient(135deg, #08111c 0%, #0e1b2a 58%, #132438 100%);
    --contrast-panel-border: rgba(255, 255, 255, 0.10);
    --contrast-panel-text: #ffffff;
    --contrast-panel-muted-strong: rgba(255, 255, 255, 0.90);
    --contrast-panel-muted: rgba(255, 255, 255, 0.78);
    --contrast-panel-muted-soft: rgba(255, 255, 255, 0.66);
    --contrast-glass-bg: rgba(255, 255, 255, 0.10);
    --contrast-glass-bg-hover: rgba(255, 255, 255, 0.16);
    --contrast-glass-border: rgba(255, 255, 255, 0.20);
    --contrast-decoration-bg: rgba(255, 255, 255, 0.08);
    --contrast-action-bg: #ffffff;
    --contrast-action-text: #0b0f15;
    --footer-bg: #070f18;
    --footer-text: rgba(255, 255, 255, 0.66);
    --footer-text-muted: rgba(255, 255, 255, 0.44);
    --footer-heading: #ffffff;
    --header-bg: rgba(13, 24, 35, 0.94);
    --button-primary-bg: #ffffff;
    --button-primary-text: #0b0f15;
    --button-primary-hover-bg: #e9eef5;
    --button-secondary-bg: var(--surface-elevated);
    --button-secondary-text: #ffffff;
    --button-secondary-border: #2a3a4c;
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.30);
    --shadow-hover: rgba(0, 0, 0, 0.44);
}

/* ==========================================
   Global Styles
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--surface);
    color: var(--text-dark);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   Weight ceiling — never render heavier than 600 (semibold).
   Keeps the whole site to normal / 500 / 600 for a smoother look,
   capping UA + Bootstrap defaults (b, strong, th, fw-bold, …).
   ========================================== */
b, strong, th, dt, optgroup, legend {
    font-weight: 600;
}
.fw-bold, .fw-bolder, .fw-semibold {
    font-weight: 600 !important;
}

html[data-theme="dark"] body {
    background: #0d141d;
    color-scheme: dark;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: inherit;
    vertical-align: middle;
}

/* ==========================================
   Utilities & Layout
   ========================================== */
.container-v5 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    /* Notion-style: generous vertical breathing room */
    padding: 5.5rem 0;
}

/* Section Header — Notion-HK style: bold display title + readable subtitle */
.section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.85rem;
}

.section-title {
    /* Notion-inspired: larger, bolder display heading */
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.85rem;
    letter-spacing: 0;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-gray);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.75;
}

.section-header--with-visual {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-header--with-visual .section-subtitle {
    max-width: 700px;
}

.section-header__visual-row {
    --visual-size: 70px;
    --visual-step-width: 112px;
    position: relative;
    display: flex;
    align-items: start;
    width: min(820px, 100%);
    margin: 1.7rem auto 0;
    justify-content: center;
}

.section-header__visual-step {
    width: var(--visual-step-width);
    flex: 0 0 var(--visual-step-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    color: var(--primary);
}

.section-header__visual-connector {
    flex: 1 1 42px;
    min-width: 32px;
    height: 1px;
    margin-top: calc(var(--visual-size) / 2);
    background: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.section-header__visual-icon {
    width: var(--visual-size);
    height: var(--visual-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    color: var(--primary);
    font-size: 1.86rem;
    line-height: 1;
    box-shadow: 0 7px 18px var(--shadow-color);
    font-variation-settings: 'FILL' 0, 'wght' 280, 'GRAD' 0, 'opsz' 32;
}

.section-header__visual-label {
    color: var(--text-dark);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
}

html[data-theme="dark"] .section-header__visual-icon {
    background: var(--surface-elevated);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 8px 22px var(--shadow-color);
}

@media (max-width: 768px) {
    .section-header__visual-row {
        --visual-size: 50px;
        --visual-step-width: 62px;
        width: 100%;
    }

    .section-header__visual-connector {
        min-width: 8px;
        flex-basis: 14px;
    }

    .section-header__visual-icon {
        border-radius: 14px;
        font-size: 1.38rem;
    }

    .section-header__visual-label {
        font-size: 0.72rem;
    }
}

.page-hero-compact {
    min-height: 46vh;
    display: flex;
    align-items: center;
    padding: 4.25rem 0 3.75rem;
    background: linear-gradient(135deg, var(--surface) 0%, var(--secondary-bg) 100%);
}

.page-hero-compact__inner {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}

.page-hero-compact__title {
    font-size: 2.35rem;
    font-weight: 600;
    line-height: 1.18;
    margin-bottom: 1.15rem;
    color: var(--text-dark);
    letter-spacing: 0;
}

.page-hero-compact__lead {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.page-hero-compact__support {
    font-size: 0.98rem;
    color: var(--text-gray);
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto;
}

/* ==========================================
   Header & Navigation (Finpay clean nav)
   ========================================== */
header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

html[data-theme="dark"] header {
    background: var(--header-bg);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.logo {
    display: flex;
    align-items: center;
    /* gap: 0.4rem; */
    font-weight: 600;
    font-size: 1rem;
    color: var(--logo-color);
    text-decoration: none;
    flex-shrink: 0;
    letter-spacing: 0;
}

.logo img,
.logo svg {
    height: 38px;
    width: auto;
    display: block;
}

/* Logo is inline SVG (partials/brand-logo): navy parts follow currentColor —
   var(--logo-color) in light, white in dark/footer — while the accent bar
   stays orange in every context. No whitening filter needed. */
html[data-theme="dark"] .logo {
    color: var(--contrast-panel-text);
}

.logo span {
    display: inline-block;
    transform: translateY(5px);
}

.logo:hover {
    opacity: 0.85;
}

nav {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 0;
    padding: 0 0.6rem;
    overflow: visible;
}

nav a.nav-link-v5 {
    color: var(--text-gray);
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: color 0.22s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.32rem 0.65rem;
    border-radius: 0;
    white-space: nowrap !important;
    flex-shrink: 0;
    word-break: keep-all;
}

nav a.nav-link-v5:hover {
    color: var(--text-dark);
}

nav a.nav-link-v5--active {
    color: var(--text-dark);
    font-weight: 600;
}

nav a.nav-link-v5--active::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
}

/* ==========================================
   Nav Dropdown Groups
   ========================================== */
.nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-group--services { --nav-mega-accent: var(--primary); --nav-mega-accent-2: var(--accent); }
.nav-group--expertise { --nav-mega-accent: var(--primary); --nav-mega-accent-2: var(--accent); }
.nav-group--company { --nav-mega-accent: var(--primary); --nav-mega-accent-2: var(--accent); }

.nav-group__trigger {
    color: var(--text-gray);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0;
    padding: 0.32rem 0.65rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.22s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-group__trigger:hover,
.nav-group:hover .nav-group__trigger,
.nav-group--active .nav-group__trigger {
    color: var(--text-dark);
}

.nav-group--active .nav-group__trigger {
    font-weight: 600;
}

.nav-chevron {
    font-size: 15px !important;
    line-height: 1;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.nav-group:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-group__panel {
    position: absolute;
    /* Reduce the "hover gap" so moving mouse into panel doesn't close dropdown */
    top: calc(100% + 0px);
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 0.35rem;
    min-width: 210px;
    box-shadow: 0 8px 32px var(--shadow-color), 0 2px 6px rgba(0,0,0,0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform: translateY(-2px);
    z-index: 1002;
}

.nav-group__panel--mega {
    padding: 0.55rem;
    min-width: 640px;
}

.nav-group:hover .nav-group__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-group__panel a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    color: var(--text-gray);
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    letter-spacing: 0;
}

.nav-group__panel a .material-symbols-rounded {
    font-size: 15px;
    opacity: 0.65;
    flex-shrink: 0;
}

.nav-group__panel a:hover {
    background: var(--secondary-bg);
    color: var(--primary);
}

.nav-group__panel a:hover .material-symbols-rounded {
    opacity: 1;
}

.nav-group__panel a.nav-item--active {
    background: var(--primary-subtle);
    color: var(--primary);
    font-weight: 600;
}

.nav-group__panel a.nav-item--active .material-symbols-rounded {
    opacity: 1;
}

html[data-theme="dark"] .nav-group__panel {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
}

/* ==========================================
   Mega Dropdown (Image-inspired)
   ========================================== */
.nav-mega {
    display: grid;
    grid-template-columns: minmax(340px, 1.15fr) minmax(260px, 0.85fr);
    grid-template-areas: "main aside";
    gap: 0.75rem;
    align-items: stretch;
}

.nav-mega__aside {
    grid-area: aside;
    position: relative;
    border-radius: 14px;
    padding: 1rem 1rem 0.9rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--nav-mega-accent, var(--primary)) 88%, var(--surface)) 0%,
        color-mix(in srgb, var(--nav-mega-accent-2, var(--accent)) 88%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--nav-mega-accent, var(--primary)) 30%, var(--surface));
    overflow: hidden;
}

/* Fallback if color-mix unsupported */
@supports not (background: color-mix(in srgb, var(--primary) 50%, var(--surface))) {
    .nav-mega__aside {
        background: linear-gradient(135deg, rgba(24, 48, 96, 0.95) 0%, rgba(26, 69, 133, 0.95) 100%);
        border-color: rgba(24, 48, 96, 0.35);
    }
    .nav-group--expertise .nav-mega__aside {
        background: linear-gradient(135deg, rgba(24, 48, 96, 0.95) 0%, rgba(26, 69, 133, 0.95) 100%);
        border-color: rgba(24, 48, 96, 0.35);
    }
    .nav-group--company .nav-mega__aside {
        background: linear-gradient(135deg, rgba(24, 48, 96, 0.95) 0%, rgba(26, 69, 133, 0.95) 100%);
        border-color: rgba(24, 48, 96, 0.35);
    }
}

.nav-mega__aside::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: var(--contrast-glass-bg-hover);
    filter: blur(1px);
    pointer-events: none;
}

.nav-mega__aside-top {
    position: relative;
    z-index: 1;
    margin-bottom: 0.85rem;
}

.nav-mega__aside-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--contrast-panel-text);
    margin-bottom: 0.35rem;
}

.nav-mega__aside-desc {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--contrast-panel-muted);
    max-width: 22ch;
}

.nav-mega__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    position: relative;
    z-index: 1;
}

.nav-mega__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--contrast-panel-muted-strong);
    background: var(--contrast-glass-bg-hover);
    border: 1px solid var(--contrast-glass-border);
    white-space: nowrap;
}

.nav-mega__main {
    grid-area: main;
    padding: 0.3rem 0.2rem;
    min-width: 0;
}

.nav-mega__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: 0.25rem 0.55rem 0.4rem;
}

/* Override base dropdown link styles for mega items */
.nav-group__panel--mega a.nav-mega__item {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    white-space: normal;
}

.nav-mega__icon {
    font-size: 18px !important;
    margin-top: 0.05rem;
    opacity: 0.75;
}

.nav-mega__text {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.nav-mega__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0;
    line-height: 1.2;
}

.nav-mega__desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-gray);
}

.nav-group__panel--mega a.nav-mega__item:hover .nav-mega__icon {
    opacity: 1;
}

.nav-group__panel--mega a.nav-mega__item:hover .nav-mega__title {
    color: var(--primary);
}

html[data-theme="dark"] .nav-mega__aside {
    background: var(--surface-contrast);
    border-color: var(--border);
}

html[data-theme="dark"] .nav-mega__aside::after {
    background: var(--contrast-decoration-bg);
}

html[data-theme="dark"] .nav-mega__tag {
    background: var(--contrast-decoration-bg);
    border-color: var(--contrast-panel-border);
}

@media (max-width: 1024px) {
    /* On mobile, keep accordion behavior and simple list appearance */
    .nav-group__panel--mega {
        min-width: unset;
        padding: 0;
    }

    .nav-mega {
        display: block;
    }

    .nav-mega__aside,
    .nav-mega__main {
        grid-area: auto;
    }

    .nav-mega__aside,
    .nav-mega__label,
    .nav-mega__desc {
        display: none;
    }

    .nav-group__panel--mega a.nav-mega__item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.75rem 1.5rem 0.75rem 2.25rem;
    }
}

.btn-header {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 0.5rem 1.15rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-header:hover {
    background: var(--button-primary-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--shadow-hover);
}

.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    margin-left: 0.6rem;
}

.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Icon reflects current theme — CSS-driven from html[data-theme] so it shows the
   right glyph instantly on load (no JS ligature swap). Light: moon (→ go dark);
   dark: sun (→ go light). */
.theme-toggle__moon { display: inline-flex; }
.theme-toggle__sun  { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__sun  { display: inline-flex; }

/* Language Menu */
.lang-menu {
    position: relative;
    flex-shrink: 0;
    display: block;
    z-index: 1100;
    margin-left: 0;
}

.lang-trigger {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.65rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.lang-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-hover);
    border-color: var(--primary);
    color: var(--text-dark);
}

.lang-globe,
.lang-chevron {
    font-size: 1rem;
    line-height: 1;
}

.lang-current-label {
    line-height: 1;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--shadow-hover);
    padding: 0.35rem;
    display: none;
    z-index: 1200;
}

.lang-menu.open .lang-dropdown {
    display: block;
}

.lang-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 8px;
    padding: 0.65rem 0.7rem;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
}

.lang-dropdown a:hover {
    background: var(--primary-subtle);
    color: var(--text-dark);
}

.lang-dropdown a.lang-option--active {
    background: var(--primary-subtle);
    color: var(--text-dark);
}

.lang-option-code {
    width: 34px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg);
    color: var(--text-dark);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.lang-option-copy {
    display: grid;
    gap: 0.05rem;
    line-height: 1.2;
}

.lang-option-copy strong {
    color: var(--text-dark);
    font-size: 0.84rem;
}

.lang-option-copy small {
    color: var(--text-light);
    font-size: 0.72rem;
    font-weight: 500;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

nav.mobile-open {
    display: flex !important;
}

/* ==========================================
   Hero Section
   ========================================== */
.hero {
    display: flex;
    align-items: center;
    padding: 3.5rem 2rem 2rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--secondary-bg) 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(24, 48, 96, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(24, 48, 96, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-centered {
    text-align: left;
    max-width: 560px;
    margin: 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-subtle);
    color: var(--primary);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(24, 48, 96, 0.12);
}

.hero h1 {
    font-size: 2.7rem;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
    margin-bottom: 1.25rem;
    color: var(--text-dark);
}

.hero h1 span {
    color: var(--primary);
    position: relative;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin: 0 auto 2rem;
    line-height: 1.8;
    max-width: 560px;
}

.hero-buttons {
    display: flex;
    gap: 0.85rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* Social proof avatars */
.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.hero-avatars {
    display: flex;
    align-items: center;
}

.hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--contrast-panel-text);
    margin-left: -10px;
    flex-shrink: 0;
}

.hero-avatar:first-child { margin-left: 0; }

.hero-avatar-more {
    background: var(--secondary-bg) !important;
    color: var(--text-gray);
    border-color: var(--border);
    font-size: 0.65rem;
}

.hero-social-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

.hero-social-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hero-social-rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-stars {
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.hero-rating-score {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
}

.hero-social-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
}

.hero-dashboard {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    /* let the diagram grow and bleed slightly toward the edge */
    margin: 0 -1.75rem 0 0;
}

.hero-dashboard-inner {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(24, 48, 96, 0.1), 0 4px 12px rgba(0,0,0,0.04);
    overflow: hidden;
}

.hero-dashboard-inner--illustration {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-dashboard-illustration__img {
    width: min(860px, 100%);
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ============================================================
   HERO ILLUSTRATION — "Live Data-Flow Topology" (theme-aware)
   Hand-authored SVG. Monochrome navy + one steel-blue accent
   + one success-green. Adapts to light & dark mode via tokens.
   ============================================================ */
.topoflow {
    /* ---- light theme palette (default) ---- */
    --tf-card-bg-1: #fbfcfe;
    --tf-card-bg-2: #f4f6fa;
    --tf-card-tint: rgba(47, 106, 191, 0.07);
    --tf-card-border: rgba(24, 48, 96, 0.08);
    --tf-card-shadow: rgba(24, 48, 96, 0.10);
    --tf-card-shadow-2: rgba(15, 32, 61, 0.05);
    --tf-card-inset: rgba(255, 255, 255, 0.85);

    --tf-surface-1: #ffffff;
    --tf-surface-2: #f3f6fb;
    --tf-node-border: rgba(24, 48, 96, 0.12);
    --tf-node-rim: rgba(255, 255, 255, 0.80);

    --tf-ink: #0b0f15;
    --tf-sub: #475569;
    --tf-edge: rgba(24, 48, 96, 0.16);
    --tf-divider: rgba(24, 48, 96, 0.10);

    --tf-accent: #2f6abf;
    --tf-green: #059669;

    --tf-core-1: #23509a;
    --tf-core-2: #1a4585;
    --tf-core-3: #0F203D;
    --tf-core-ring: rgba(47, 106, 191, 0.30);
    --tf-core-ring-soft: rgba(47, 106, 191, 0.22);
    --tf-core-rim: rgba(47, 106, 191, 0.55);
    --tf-core-title: #eef4fc;
    --tf-chip-border: rgba(255, 255, 255, 0.22);
    --tf-chip-text: #e9eef7;
    --tf-chip-dot: #7fb0f0;
    --tf-glow: rgba(47, 106, 191, 0.30);
    --tf-dot: #183060;
    --tf-dot-op: 0.06;

    /* chromeless — merges into the hero (no card, no border, no shadow) */
    position: relative;
    width: 100%;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

html[data-theme="dark"] .topoflow {
    --tf-card-bg-1: #101d31;
    --tf-card-bg-2: #0b1626;
    --tf-card-tint: rgba(47, 106, 191, 0.16);
    --tf-card-border: rgba(255, 255, 255, 0.08);
    --tf-card-shadow: rgba(0, 0, 0, 0.45);
    --tf-card-shadow-2: rgba(0, 0, 0, 0.35);
    --tf-card-inset: rgba(255, 255, 255, 0.05);

    --tf-surface-1: #17273f;
    --tf-surface-2: #111e32;
    --tf-node-border: rgba(255, 255, 255, 0.10);
    --tf-node-rim: rgba(255, 255, 255, 0.06);

    --tf-ink: #eef2f8;
    --tf-sub: #9fb1c8;
    --tf-edge: rgba(159, 180, 206, 0.24);
    --tf-divider: rgba(159, 180, 206, 0.16);

    --tf-accent: #5b91d6;
    --tf-green: #34d399;

    --tf-core-1: #2c5da9;
    --tf-core-2: #1e4d93;
    --tf-core-3: #122a4d;
    --tf-core-ring: rgba(120, 165, 225, 0.42);
    --tf-core-ring-soft: rgba(120, 165, 225, 0.28);
    --tf-core-rim: rgba(130, 175, 235, 0.65);
    --tf-core-title: #f3f7fd;
    --tf-chip-border: rgba(255, 255, 255, 0.20);
    --tf-chip-text: #eaf1fb;
    --tf-chip-dot: #9cc2f5;
    --tf-glow: rgba(91, 145, 214, 0.34);
    --tf-dot: #9fb4ce;
    --tf-dot-op: 0.12;
}

.topoflow__svg { display: block; width: 100%; height: auto; }

/* typography */
.topoflow text { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.topoflow .tf-label { font-size: 11px; font-weight: 600; fill: var(--tf-ink); letter-spacing: .15px; }
.topoflow .tf-sub { font-size: 9px; font-weight: 500; fill: var(--tf-sub); letter-spacing: .25px; }
.topoflow .tf-chip-text { font-size: 9.5px; font-weight: 600; fill: var(--tf-chip-text); letter-spacing: .2px; }
.topoflow .tf-eyebrow { font-size: 10px; font-weight: 600; fill: var(--tf-core-title); letter-spacing: .8px; text-transform: uppercase; }

/* gradient stops (themeable via tokens) */
.topoflow .tf-node-s0 { stop-color: var(--tf-surface-1); }
.topoflow .tf-node-s1 { stop-color: var(--tf-surface-2); }
.topoflow .tf-core-s0 { stop-color: var(--tf-core-1); }
.topoflow .tf-core-s1 { stop-color: var(--tf-core-2); }
.topoflow .tf-core-s2 { stop-color: var(--tf-core-3); }
.topoflow .tf-glow-s0 { stop-color: var(--tf-glow); stop-opacity: 1; }
.topoflow .tf-glow-s1 { stop-color: var(--tf-glow); stop-opacity: .35; }
.topoflow .tf-glow-s2 { stop-color: var(--tf-glow); stop-opacity: 0; }

/* nodes / structure */
.topoflow .tf-card { fill: url(#tf-node); stroke: var(--tf-node-border); }
.topoflow .tf-rim { fill: none; stroke: var(--tf-node-rim); }
.topoflow .tf-dots { fill: var(--tf-dot); opacity: var(--tf-dot-op); }
.topoflow .tf-divider { stroke: var(--tf-divider); stroke-width: 1; }
.topoflow .tf-node-port { fill: none; stroke: var(--tf-accent); stroke-width: 1.5; }
.topoflow .tf-node-port-core { fill: var(--tf-accent); }

/* core */
.topoflow .tf-core-body { fill: url(#tf-core); stroke: var(--tf-core-rim); stroke-width: 1; }
.topoflow .tf-core-ring { fill: none; stroke: var(--tf-core-ring); stroke-width: 1; }
.topoflow .tf-core-ring--soft { fill: none; stroke: var(--tf-core-ring-soft); stroke-width: 1; }
.topoflow .tf-chip-rect { fill: url(#tf-chip); stroke: var(--tf-chip-border); }
.topoflow .tf-chip-dot { fill: var(--tf-chip-dot); }
.topoflow .tf-port-dot { fill: var(--tf-accent); }
.topoflow .tf-port-acc { fill: var(--tf-green); }

/* governance check */
.topoflow .tf-check-bg { fill: var(--tf-green); fill-opacity: 0.08; stroke: var(--tf-green); stroke-width: 1.4; }
.topoflow .tf-check { fill: none; stroke: var(--tf-green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* edges (base + live) */
.topoflow .tf-edge-base { fill: none; stroke: var(--tf-edge); stroke-width: 1.25; stroke-linecap: round; }
.topoflow .tf-edge-live {
    fill: none; stroke: var(--tf-accent); stroke-width: 1.5; stroke-linecap: round;
    opacity: .9; stroke-dasharray: 26 150; stroke-dashoffset: 176;
    animation: tf-dash 4s linear infinite;
}
.topoflow .tf-edge-live.acc { stroke: var(--tf-green); }
.topoflow .tf-edge-live.d1 { animation-duration: 4.0s; animation-delay: -0.0s; }
.topoflow .tf-edge-live.d2 { animation-duration: 4.6s; animation-delay: -1.1s; }
.topoflow .tf-edge-live.d3 { animation-duration: 4.3s; animation-delay: -2.4s; }
.topoflow .tf-edge-live.d4 { animation-duration: 4.8s; animation-delay: -0.7s; }
.topoflow .tf-edge-live.d5 { animation-duration: 4.2s; animation-delay: -3.0s; }
.topoflow .tf-edge-live.d6 { animation-duration: 4.5s; animation-delay: -1.8s; }
.topoflow .tf-edge-live.d7 { animation-duration: 5.0s; animation-delay: -2.0s; }
@keyframes tf-dash { to { stroke-dashoffset: 0; } }

/* data packets (motion path) */
.topoflow .tf-packet { offset-rotate: 0deg; offset-distance: 0%; animation: tf-flow 4s linear infinite; will-change: offset-distance, opacity; }
@keyframes tf-flow {
    0% { offset-distance: 0%; opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}
.topoflow .pk1 { offset-path: path("M 196 132 C 256 132, 256 198, 318 210"); animation-duration: 4.0s; animation-delay: -0.0s; }
.topoflow .pk2 { offset-path: path("M 196 232 C 252 232, 262 234, 312 240"); animation-duration: 4.6s; animation-delay: -1.1s; }
.topoflow .pk3 { offset-path: path("M 196 332 C 256 332, 256 286, 318 272"); animation-duration: 4.3s; animation-delay: -2.4s; }
.topoflow .pk4 { offset-path: path("M 462 226 C 512 214, 512 138, 560 132"); animation-duration: 4.8s; animation-delay: -0.7s; }
.topoflow .pk5 { offset-path: path("M 470 244 C 516 244, 520 240, 560 240"); animation-duration: 4.2s; animation-delay: -3.0s; }
.topoflow .pk6 { offset-path: path("M 462 262 C 512 274, 512 332, 560 338"); animation-duration: 4.5s; animation-delay: -1.8s; }
.topoflow .pk7 { offset-path: path("M 392 318 C 392 372, 392 392, 392 426"); animation-duration: 5.0s; animation-delay: -2.0s; }

/* core ambient pulse */
.topoflow .tf-core-pulse { transform-box: fill-box; transform-origin: center; animation: tf-pulse 6s ease-in-out infinite; }
@keyframes tf-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.035); }
}

/* port receive blink */
.topoflow .tf-port { animation: tf-blink 4s ease-in-out infinite; }
.topoflow .tf-port.b2 { animation-delay: -1.3s; }
.topoflow .tf-port.b3 { animation-delay: -2.6s; }
@keyframes tf-blink {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

/* freeze all motion to a clean static state */
@media (prefers-reduced-motion: reduce) {
    .topoflow .tf-edge-live { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .55; }
    .topoflow .tf-packet { animation: none; opacity: 1; }
    .topoflow .pk1 { offset-distance: 64%; } .topoflow .pk2 { offset-distance: 52%; } .topoflow .pk3 { offset-distance: 40%; }
    .topoflow .pk4 { offset-distance: 58%; } .topoflow .pk5 { offset-distance: 46%; } .topoflow .pk6 { offset-distance: 36%; }
    .topoflow .pk7 { offset-distance: 70%; }
    .topoflow .tf-core-pulse { animation: none; opacity: .75; }
    .topoflow .tf-port { animation: none; opacity: .8; }
}

.hero-dashboard-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--secondary-bg);
    border-bottom: 1px solid var(--border);
}

.hero-dashboard-topbar .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.hero-dashboard-svg {
    padding: 1.25rem;
}

.hero-dashboard-svg svg {
    width: 100%;
    display: block;
}

.hero-stats-row {
    display: flex;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
    padding: 2rem 0 0;
    max-width: 740px;
    margin: 0 auto;
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hero-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
}

.hero-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0;
    line-height: 1.2;
}

.hero-stat-label {
    font-size: 0.82rem;
    color: var(--text-gray);
    line-height: 1.3;
}

.hero-float-card {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 24px rgba(24, 48, 96, 0.08);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}

.hero-float-card .float-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.float-left  { left: -30px; top: 40%; animation: floatY 4s ease-in-out infinite; }
.float-right { right: -30px; top: 30%; animation: floatY 4s ease-in-out infinite 1.5s; }
.float-bottom { right: 60px; bottom: -18px; animation: floatY 4s ease-in-out infinite 0.8s; }

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

@media (max-width: 991px) {
    .hero-main-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-centered { max-width: 900px; text-align: center; margin: 0 auto; }
    .hero-buttons { justify-content: center; }
    .hero-social-proof { justify-content: center; }
    .hero h1 { font-size: 2.4rem; }
    .hero-dashboard { max-width: 680px; margin: 0 auto; }
    .hero-stats-row { gap: 2.5rem; }
    .hero-float-card { display: none; }
}

@media (max-width: 767px) {
    .hero { padding: 5.25rem 0 2rem; }
    .hero h1 { font-size: 2rem; line-height: 1.15; }
    .hero-desc { font-size: 0.95rem; margin-bottom: 1.75rem; }
    .hero-buttons { flex-direction: column; align-items: center; gap: 0.65rem; margin-bottom: 2rem; }
    .hero-stats-row { gap: 1.5rem; flex-direction: column; align-items: center; }
    .hero-stat-item { flex-direction: row; gap: 0.75rem; }
    .hero-float-card { display: none; }
    .hero-dashboard-inner { border-radius: 12px; }
}

/* ==========================================
   Buttons (Finpay style)
   ========================================== */
.btn-primary-v5 {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 0.75rem 1.75rem;
    border-radius: var(--btn-radius);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.22s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0;
}

.btn-primary-v5:hover {
    background: var(--button-primary-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--shadow-hover);
}

.btn-secondary-v5 {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    padding: 0.75rem 1.75rem;
    border-radius: var(--btn-radius);
    border: 1.5px solid var(--button-secondary-border);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.22s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0;
}

.btn-secondary-v5:hover {
    border-color: var(--primary);
    background: var(--button-secondary-hover-bg);
    transform: translateY(-1px);
}

/* ==========================================
   Cards (Finpay style — larger radius, cleaner)
   ========================================== */
.fp-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2.25rem 2rem;
    transition: all 0.25s ease;
}

.fp-card:hover {
    border-color: rgba(24, 48, 96, 0.25);
    box-shadow: 0 6px 24px var(--shadow-color);
    transform: translateY(-2px);
}

/* Why-choose-us cards: accent border color on hover */
.why-card:hover {
    /* Fallback for browsers without color-mix() support */
    border-color: rgba(24, 48, 96, 0.25) !important;
    /* Modern: per-card accent color via CSS custom property */
    border-color: color-mix(in srgb, var(--card-accent, var(--primary)) 25%, transparent) !important;
    box-shadow: 0 8px 28px var(--shadow-color);
}

/* Focus-visible state for all interactive cards */
.fp-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.fp-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.35rem;
    background: var(--primary-subtle);
    color: var(--primary);
}

.fp-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.65rem;
    letter-spacing: 0;
}

.fp-card p {
    color: var(--text-gray);
    font-size: 0.93rem;
    line-height: 1.7;
}

/* ==========================================
   Solution Pages
   ========================================== */
.solution-hero {
    background: linear-gradient(135deg, var(--surface) 0%, var(--secondary-bg) 100%);
    padding: 5rem 0 4rem;
}

.solution-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
    gap: 3rem;
    align-items: center;
}

.solution-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.solution-hero__title {
    font-size: 2.45rem;
    line-height: 1.16;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 0;
    margin-bottom: 1.1rem;
    max-width: 860px;
}

.solution-hero__description {
    font-size: 1.03rem;
    line-height: 1.78;
    color: var(--text-gray);
    max-width: 780px;
    margin-bottom: 1.5rem;
}

.solution-action-row {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.solution-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 1.8rem;
}

.solution-proof {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.45;
}

.solution-proof .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.05rem;
    margin-top: 0.1rem;
}

.solution-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: 0 14px 36px var(--shadow-color);
    padding: 1.5rem;
}

.solution-panel--dark {
    background: var(--contrast-panel-bg);
    color: var(--contrast-panel-text);
    border-color: var(--contrast-panel-border);
}

.solution-panel--flat {
    box-shadow: none;
}

.solution-panel__title {
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    margin-bottom: 0.95rem;
}

.solution-sidebar-list {
    display: grid;
    gap: 0.65rem;
}

.solution-sidebar-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.55;
}

.solution-sidebar-list__item .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.1rem;
    margin-top: 0.12rem;
}

.factory-map {
    display: grid;
    gap: 0.8rem;
}

.factory-map__screen {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
}

.factory-map__svg {
    width: 100%;
    height: auto;
    display: block;
}

.factory-map__legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.factory-map__legend-item {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    padding: 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-gray);
}

.factory-map__audience {
    color: var(--text-gray);
    font-size: 0.86rem;
    line-height: 1.65;
    margin: 0;
}

.solution-context {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: start;
}

.solution-copy-stack {
    display: grid;
    gap: 0.9rem;
}

.solution-context h3,
.solution-card h3,
.solution-module-card h3 {
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
    letter-spacing: 0;
}

.solution-context p,
.solution-card p,
.solution-module-card p {
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
}

.solution-fit-panel__items {
    display: grid;
    gap: 1rem;
}

.solution-fit-panel__item + .solution-fit-panel__item {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.solution-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.solution-card-grid--spaced,
.solution-module-grid--spaced {
    margin-top: 1rem;
}

.solution-card,
.solution-module-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.35rem;
}

.solution-card__icon,
.solution-module-card__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-subtle);
    color: var(--primary);
    margin-bottom: 0.9rem;
}

.solution-framework {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 2rem;
    align-items: center;
}

.solution-framework__diagram {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.25rem;
}

.framework-layer-list {
    display: grid;
    gap: 0.85rem;
}

.framework-layer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.framework-layer__num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
    font-size: 0.85rem;
}

.framework-layer h3 {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
}

.framework-layer ul,
.solution-module-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.framework-layer li,
.solution-module-card li {
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.45;
    display: flex;
    gap: 0.45rem;
}

.framework-layer li::before,
.solution-module-card li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--primary);
    margin-top: 0.58em;
    flex-shrink: 0;
}

.solution-technology-section {
    margin-top: 3rem;
}

.section-header--compact {
    margin-bottom: 1.6rem;
}

.section-title--small {
    font-size: 1.65rem;
}

.solution-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 992px) {
    .solution-module-grid--center-five {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .solution-module-grid--center-five > .solution-module-card {
        grid-column: span 2;
    }

    .solution-module-grid--center-five > .solution-module-card:nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    .solution-module-grid--center-five > .solution-module-card:last-child {
        grid-column: 4 / span 2;
    }
}

.shopfloor-matrix {
    margin-top: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
}

.shopfloor-matrix__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1.2fr);
    gap: 1.5rem;
    align-items: start;
}

.shopfloor-matrix h3 {
    color: var(--text-dark);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.65rem;
}

.shopfloor-matrix p {
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
}

.shopfloor-matrix__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.shopfloor-matrix__items--flush {
    margin-top: 0;
}

.shopfloor-matrix__item {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.8rem;
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.45;
}

.solution-section--surface {
    background: var(--surface);
    padding: 4.6rem 0;
}

.solution-section--muted {
    background: var(--secondary-bg);
    padding: 4.6rem 0;
}

.solution-section--surface .section-header,
.solution-section--muted .section-header {
    margin-bottom: 2.2rem;
}

.solution-section--surface .section-title,
.solution-section--muted .section-title {
    font-size: 2.05rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.solution-section--surface .section-title.section-title--small,
.solution-section--muted .section-title.section-title--small {
    font-size: 1.55rem;
}

.solution-pain-map {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    gap: 1.25rem;
    align-items: start;
}

.solution-pain-map__narrative,
.solution-flow-panel,
.solution-role-panel,
.solution-delivery-model,
.solution-proof-feature,
.solution-assurance-panel,
.solution-baseline-panel,
.solution-expansion-map,
.solution-note-panel {
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background: var(--surface);
    padding: 1.45rem;
}

.solution-pain-map__narrative {
    position: relative;
    overflow: hidden;
}

.solution-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.solution-pain-map__narrative h3,
.solution-flow-panel h3,
.solution-role-panel h3,
.solution-assurance-panel h3,
.solution-baseline-panel h3,
.solution-note-panel h3,
.solution-cta-panel h2 {
    color: var(--text-dark);
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 0.7rem;
}

.solution-pain-map__narrative h3 {
    font-size: 1.2rem;
}

.solution-pain-map__narrative p,
.solution-flow-panel p,
.solution-role-panel p,
.solution-assurance-panel p,
.solution-baseline-panel p,
.solution-note-panel p {
    color: var(--text-gray);
    line-height: 1.75;
    margin: 0;
}

.solution-data-map {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.solution-data-map__node {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    padding: 0.82rem;
}

.solution-data-map__node::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    bottom: -0.65rem;
    width: 1px;
    height: 0.65rem;
    background: var(--border);
}

.solution-data-map__node:last-child::after {
    content: none;
}

.solution-data-map__node .material-symbols-rounded {
    grid-row: span 2;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.08rem;
}

.solution-data-map__node strong {
    color: var(--text-dark);
    font-size: 0.9rem;
}

.solution-data-map__node small {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.solution-pain-flow {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.25rem;
}

.solution-pain-flow__item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--secondary-bg);
    padding: 0.8rem;
    color: var(--text-gray);
    font-size: 0.88rem;
    line-height: 1.45;
}

.solution-pain-flow__item .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.1rem;
    margin-top: 0.08rem;
}

.solution-pain-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.solution-pain-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.2rem;
    min-height: 100%;
}

.solution-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.solution-pain-card__icon,
.solution-principle-card__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-subtle);
    color: var(--primary);
    margin-bottom: 0.8rem;
}

.solution-card-index {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.solution-pain-card h3,
.solution-principle-card h3,
.solution-roadmap-stage h3,
.solution-package-card h3 {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
}

.solution-pain-card p,
.solution-principle-card p,
.solution-roadmap-stage p,
.solution-package-card p {
    color: var(--text-gray);
    line-height: 1.68;
    margin: 0;
}

.solution-implementation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    gap: 1.35rem;
    align-items: start;
}

.solution-timeline {
    position: relative;
    display: grid;
    gap: 0.85rem;
}

.solution-timeline::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;
    width: 2px;
    background: var(--border);
}

.solution-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.solution-timeline__num {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.86rem;
    z-index: 1;
}

.solution-timeline__content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1rem 1.1rem;
}

.solution-timeline__content h3 {
    color: var(--text-dark);
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.solution-timeline__content p {
    color: var(--text-gray);
    line-height: 1.62;
    margin: 0;
    font-size: 0.9rem;
}

.solution-delivery-stack {
    display: grid;
    gap: 1rem;
}

.solution-delivery-model {
    background: var(--secondary-bg);
}

.solution-delivery-model h3,
.solution-expansion-map h3 {
    color: var(--text-dark);
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.solution-delivery-model__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.solution-delivery-model__item {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    padding: 0.85rem;
    min-height: 100%;
}

.solution-delivery-model__item .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.45rem;
}

.solution-delivery-model__item strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
}

.solution-delivery-model__item small {
    display: block;
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.solution-flow-list,
.solution-role-grid,
.solution-principle-grid,
.solution-assurance-grid,
.solution-roadmap-rail,
.solution-baseline-grid,
.solution-mini-grid,
.solution-risk-grid,
.solution-packages-grid,
.solution-support-grid {
    display: grid;
    gap: 1rem;
}

.solution-flow-list {
    counter-reset: delivery-flow;
    gap: 0.65rem;
}

.solution-flow-list li {
    list-style: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    color: var(--text-gray);
    line-height: 1.55;
}

.solution-flow-list li::before {
    counter-increment: delivery-flow;
    content: counter(delivery-flow, decimal-leading-zero);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.solution-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-role-card,
.solution-mini-card,
.solution-risk-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--secondary-bg);
    padding: 0.9rem;
}

.solution-role-card strong,
.solution-mini-card strong,
.solution-risk-card strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.solution-role-card span,
.solution-mini-card span,
.solution-risk-card span {
    color: var(--text-gray);
    display: block;
    font-size: 0.86rem;
    line-height: 1.5;
}

.solution-proof-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: start;
}

.solution-proof-feature {
    background: var(--contrast-panel-bg);
    border-color: var(--contrast-panel-border);
    color: var(--contrast-panel-text);
}

.solution-proof-feature h3,
.solution-proof-feature p {
    color: inherit;
}

.solution-proof-feature h3 {
    font-size: 1.45rem;
    line-height: 1.25;
}

.solution-proof-feature .solution-kicker {
    color: var(--contrast-panel-text);
    opacity: 0.82;
}

.solution-proof-feature p {
    opacity: 0.92;
}

.solution-capability-board {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.solution-capability-board__row {
    display: grid;
    gap: 0.2rem;
    border: 1px solid var(--contrast-glass-border);
    border-radius: 11px;
    background: var(--contrast-glass-bg);
    padding: 0.8rem;
}

.solution-capability-board__row strong {
    color: var(--contrast-panel-text);
    font-size: 0.86rem;
}

.solution-capability-board__row span {
    color: var(--contrast-panel-muted-strong);
    font-size: 0.8rem;
    line-height: 1.45;
}

.solution-proof-feature__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--contrast-action-bg);
    color: var(--contrast-action-text);
    margin-bottom: 1rem;
}

.solution-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-principle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.1rem;
}

.solution-assurance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
}

.solution-check-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-check-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    color: var(--text-gray);
    line-height: 1.55;
}

.solution-check-list li::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--primary);
    margin-top: 0.58em;
}

.solution-roadmap-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.solution-roadmap-stage {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.3rem;
}

.solution-roadmap-stage__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.85rem;
}

.solution-roadmap-stage__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 10px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    font-weight: 600;
}

.solution-roadmap-stage__head .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.35rem;
}

.solution-roadmap-note {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--primary-subtle);
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.6;
    padding: 1rem 1.1rem;
}

.solution-expansion-map {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
    gap: 1.2rem;
    align-items: center;
}

.solution-expansion-map__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.solution-expansion-map__node {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--secondary-bg);
    padding: 0.9rem;
    min-height: 100%;
}

.solution-expansion-map__node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.75rem;
    width: 0.75rem;
    height: 1px;
    background: var(--border);
}

.solution-expansion-map__node:first-child::before {
    content: none;
}

.solution-expansion-map__node .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.45rem;
}

.solution-expansion-map__node strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
}

.solution-expansion-map__node small {
    display: block;
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}

.solution-baseline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.solution-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-note-panel {
    margin-top: 1rem;
    background: var(--secondary-bg);
}

.solution-note-panel strong {
    color: var(--text-dark);
    line-height: 1.7;
}

.solution-cta-panel {
    background: var(--contrast-panel-bg);
    color: var(--contrast-panel-text);
    border: 1px solid var(--contrast-panel-border);
    border-radius: var(--card-radius);
    padding: 2.6rem 2rem;
    text-align: center;
}

.solution-cta-panel h2 {
    color: inherit;
    font-size: 1.8rem;
}

.solution-cta-panel p {
    color: inherit;
    opacity: 0.92;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto 1.4rem;
    max-width: 760px;
}

.solution-cta-panel__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--contrast-action-bg);
    color: var(--contrast-action-text);
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    padding: 0.9rem 1.35rem;
}

.solution-commercial {
    margin-top: 2rem;
}

.solution-packages-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-package-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.35rem;
}

.solution-package-card__price {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.solution-package-card ul {
    display: grid;
    gap: 0.55rem;
    color: var(--text-gray);
    line-height: 1.55;
    margin: 0;
    padding-left: 1.1rem;
}

.solution-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
}

/* Custom software delivery module */
.custom-delivery-section {
    background: var(--secondary-bg);
}

.custom-delivery-stack {
    display: grid;
    gap: 1.35rem;
    margin-bottom: 4rem;
}

.custom-process-panel,
.custom-scrum-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: 0 16px 42px var(--shadow-color);
}

.custom-process-panel {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.35fr);
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
    align-items: stretch;
    padding: clamp(1.35rem, 2.4vw, 2rem);
}

.custom-process-panel__intro,
.custom-transparency-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--secondary-bg);
}

.custom-process-panel__intro {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 2vw, 1.8rem);
}

.custom-process-panel__intro::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -3.5rem;
    width: 10rem;
    height: 10rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--primary-subtle);
}

.custom-process-panel__icon {
    position: relative;
    z-index: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 1.35rem;
}

.custom-process-panel__intro h3,
.custom-scrum-panel__head h3 {
    position: relative;
    z-index: 1;
    color: var(--text-dark);
    font-size: clamp(1.08rem, 1.5vw, 1.28rem);
    font-weight: 600;
    line-height: 1.32;
    margin-bottom: 0.75rem;
}

.custom-process-panel__intro p,
.custom-scrum-panel__head p {
    position: relative;
    z-index: 1;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
}

.custom-transparency-card {
    padding: clamp(1.25rem, 2vw, 1.65rem);
}

.custom-transparency-card h4 {
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.custom-transparency-list {
    display: grid;
    gap: 0.85rem;
    list-style: none;
    margin: 0;
}

.custom-transparency-item {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    color: var(--text-gray);
    line-height: 1.62;
}

.custom-transparency-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.22rem;
    color: var(--primary);
    font-size: 1.22rem;
    line-height: 1;
}

.custom-transparency-item strong {
    color: var(--text-dark);
    font-weight: 600;
}

.custom-scrum-panel {
    padding: clamp(1.35rem, 2.6vw, 2.1rem);
}

.custom-scrum-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.65rem;
}

.custom-scrum-panel__head > div {
    flex: 0 0 auto;
}

.custom-scrum-panel__head p {
    max-width: 34rem;
    text-align: right;
}

.custom-scrum-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.custom-scrum-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.3vw, 0.95rem);
    isolation: isolate;
}

.custom-scrum-flow__line {
    position: absolute;
    z-index: 0;
    top: 2rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border);
}

.custom-scrum-step {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    min-width: 0;
    text-align: center;
}

.custom-scrum-step__num {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.custom-scrum-step.is-active .custom-scrum-step__num {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    border-color: var(--button-primary-bg);
}

.custom-scrum-step__card {
    width: 100%;
    min-height: 6.15rem;
    display: grid;
    align-content: start;
    padding: 0.9rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--secondary-bg);
}

.custom-scrum-step.is-active .custom-scrum-step__card {
    border-color: var(--primary);
    background: var(--primary-subtle);
}

.custom-scrum-step__card h4 {
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.38rem;
}

.custom-scrum-step__card p {
    min-height: 2.55em;
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.34;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.custom-scrum-governance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: min(100%, 46rem);
    margin: 1.25rem auto 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--primary-subtle);
    color: var(--primary);
    text-align: center;
}

.custom-scrum-governance .material-symbols-rounded {
    font-size: 1.15rem;
    line-height: 1;
}

.custom-scrum-governance strong {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.services-tech-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.services-tech-icon--subtle {
    background: var(--primary-subtle);
    color: var(--primary);
    border: 1px solid var(--border);
}

.services-tech-icon .material-symbols-rounded {
    color: currentColor;
    font-size: 1.5rem;
}

/* SCRUM delivery operating model */
.scrum-operating-section {
    background: var(--secondary-bg);
    padding: 4.8rem 0;
}

.scrum-operating-section .section-header {
    margin-bottom: 2.4rem;
}

.scrum-operating-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 1.35rem;
    align-items: start;
}

.scrum-sprint-stack {
    display: grid;
    gap: 0.85rem;
}

.scrum-sprint-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.15rem;
    box-shadow: 0 10px 28px var(--shadow-color);
}

.scrum-sprint-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.scrum-sprint-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.08rem;
}

.scrum-sprint-card__index {
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.scrum-sprint-card h3 {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.42rem;
}

.scrum-sprint-card p {
    color: var(--text-gray);
    line-height: 1.58;
    margin: 0;
    font-size: 0.9rem;
}

.scrum-sprint-card__artifact {
    margin-top: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--secondary-bg);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.62rem 0.75rem;
}

.scrum-operating-model {
    background: var(--contrast-panel-bg);
    border: 1px solid var(--contrast-panel-border);
    border-radius: var(--card-radius);
    color: var(--contrast-panel-text);
    padding: 1.45rem;
    box-shadow: 0 18px 42px var(--shadow-hover);
}

.scrum-operating-model .solution-kicker,
.scrum-operating-model h3 {
    color: var(--contrast-panel-text);
}

.scrum-operating-model h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.65rem;
}

.scrum-operating-model p {
    color: var(--contrast-panel-muted-strong);
    line-height: 1.65;
    margin: 0;
}

.scrum-flow-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.scrum-flow-node,
.scrum-control-card {
    border: 1px solid var(--contrast-glass-border);
    border-radius: 12px;
    background: var(--contrast-glass-bg);
    padding: 0.78rem;
}

.scrum-flow-node {
    position: relative;
    min-height: 100%;
}

.scrum-flow-node::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: -0.65rem;
    width: 0.65rem;
    height: 1px;
    background: var(--contrast-glass-border);
}

.scrum-flow-node:first-child::before {
    content: none;
}

.scrum-flow-node .material-symbols-rounded,
.scrum-control-card .material-symbols-rounded {
    color: var(--contrast-panel-text);
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
}

.scrum-flow-node strong,
.scrum-control-card strong {
    display: block;
    color: var(--contrast-panel-text);
    font-size: 0.86rem;
    margin-bottom: 0.22rem;
}

.scrum-flow-node small,
.scrum-control-card small {
    display: block;
    color: var(--contrast-panel-muted);
    font-size: 0.76rem;
    line-height: 1.42;
}

.scrum-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.8rem;
}

/* Bento Grid (Notion-HK style) */
.bento-grid {
    display: grid;
    gap: 1.25rem;
}

.bento-grid-2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.bento-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2.25rem 2rem;
    transition: all 0.25s ease;
}

.bento-card:hover {
    box-shadow: 0 4px 20px var(--shadow-color);
    transform: translateY(-1px);
}

.bento-card-lg {
    grid-column: span 2;
}

/* Stat number — large display numbers */
.fp-stat-value {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.fp-stat-label {
    font-size: 0.88rem;
    color: var(--text-gray);
}

/* ==========================================
   Steps Section (Finpay numbered steps)
   ========================================== */
.fp-step-number {
    font-size: 3rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.12;
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: 0;
}

.fp-step-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem 1.75rem;
    text-align: center;
    transition: all 0.3s ease;
}

.fp-step-card:hover {
    background: var(--surface);
    box-shadow: 0 8px 24px var(--shadow-color);
}

/* ==========================================
   Pricing Cards (Finpay style)
   ========================================== */
.fp-pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2.5rem 2rem;
    transition: all 0.3s ease;
}

.fp-pricing-featured {
    background: var(--primary);
    color: var(--contrast-panel-text);
    border-color: var(--primary);
}

.fp-pricing-featured .fp-stat-value,
.fp-pricing-featured h3,
.fp-pricing-featured p,
.fp-pricing-featured .fp-stat-label {
    color: var(--contrast-panel-text);
}

/* ==========================================
   CTA Banner (Finpay dark teal banner)
   ========================================== */
.fp-cta-banner {
    background: var(--contrast-panel-bg);
    border-radius: var(--section-radius);
    padding: 3.5rem 3rem;
    color: var(--contrast-panel-text);
    margin: 0 2rem;
}

.fp-cta-banner h2 {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    letter-spacing: 0;
    line-height: 1.2;
}

.fp-cta-banner p {
    color: var(--contrast-panel-muted);
    font-size: 0.95rem;
    margin-bottom: 1.75rem;
    max-width: 480px;
    line-height: 1.7;
}

.fp-cta-banner .btn-primary-v5 {
    background: var(--contrast-action-bg);
    color: var(--contrast-action-text);
}

.fp-cta-banner .btn-primary-v5:hover {
    background: var(--contrast-panel-muted-strong);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fp-cta-banner .btn-secondary-v5 {
    background: transparent;
    color: var(--contrast-panel-text);
    border-color: var(--contrast-glass-border);
}

.fp-cta-banner .btn-secondary-v5:hover {
    background: var(--contrast-glass-bg);
    border-color: var(--contrast-panel-border);
}

/* ==========================================
   Footer (Finpay clean dark footer)
   ========================================== */
footer {
    background: var(--footer-bg);
    color: var(--footer-heading);
    padding: 4rem 0 1.5rem;
    margin-top: 0;
}

/* Dark mode component overrides */
html[data-theme="dark"] nav a.nav-link-v5:hover,
html[data-theme="dark"] nav a.nav-link-v5--active {
    color: var(--text-dark);
}

/* Dark mode: light green/blue gradient sections */
html[data-theme="dark"] section[style*="linear-gradient(135deg, #f8fafc 0%, #ecfdf5"] {
    background: var(--secondary-bg) !important;
}

/* Dark mode: hkspace gradient sidebar */
html[data-theme="dark"] div[style*="linear-gradient(135deg, #f0f9ff 0%, #ecfdf5"] {
    background: var(--secondary-bg) !important;
    border-color: var(--border) !important;
}

/* Dark mode: AI platform amber gradient sidebar */
html[data-theme="dark"] div[style*="linear-gradient(135deg, #fef3c7 0%, #fde68a"] {
    background: rgba(24, 48, 96, 0.1) !important;
    border-color: rgba(24, 48, 96, 0.25) !important;
}

/* Dark mode: navy-tinted blockquotes in ai article */
html[data-theme="dark"] div[style*="background: #fef3c7"][style*="border-left: 4px solid #d97706"] {
    background: rgba(24, 48, 96, 0.1) !important;
}

/* Dark mode: navy badge text (#92400e is too dark) */
html[data-theme="dark"] [style*="color: #92400e"] {
    color: var(--primary) !important;
}

html[data-theme="dark"] [style*="color: #d97706"] {
    color: var(--primary) !important;
}

/* Dark mode: hkspace blockquotes (#f8fafc) */
html[data-theme="dark"] div[style*="background: #f8fafc"][style*="border-left: 4px solid var(--primary)"] {
    background: var(--surface-elevated) !important;
}

/* Dark mode: override inline var(--secondary-bg) sections */
html[data-theme="dark"] section[style*="background: var(--secondary-bg)"] {
    background: var(--secondary-bg) !important;
}

/* Dark mode: override inline light backgrounds */
html[data-theme="dark"] div[style*="background: #f8fafc"],
html[data-theme="dark"] div[style*="background: #f9fafb"],
html[data-theme="dark"] div[style*="background: #f0f9ff"],
html[data-theme="dark"] section[style*="background: #f0f9ff"] {
    background: var(--secondary-bg) !important;
}

/* Dark mode: override accent pill backgrounds */
html[data-theme="dark"] div[style*="background: #e0f2fe"] {
    background: var(--primary-subtle) !important;
}

html[data-theme="dark"] div[style*="background: #fef3c7"],
html[data-theme="dark"] div[style*="background: #fde68a"] {
    background: var(--primary-subtle) !important;
}

html[data-theme="dark"] div[style*="background: #ecfdf5"],
html[data-theme="dark"] div[style*="background: #d1fae5"] {
    background: var(--primary-subtle) !important;
}

html[data-theme="dark"] div[style*="background: #dbeafe"],
html[data-theme="dark"] div[style*="background: #e0e7ff"] {
    background: var(--primary-subtle) !important;
}

/* Dark mode: override inline border colors */
html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border: 1px solid #e0ebe9"],
html[data-theme="dark"] [style*="border: 1px solid var(--border)"] {
    border-color: var(--border) !important;
}

html[data-theme="dark"] [style*="border-top: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-top: 1px solid var(--border)"],
html[data-theme="dark"] [style*="border-bottom: 1px solid var(--border)"] {
    border-color: var(--border) !important;
}

/* Dark mode: override hardcoded text colors */
html[data-theme="dark"] [style*="color: #0f172a"] {
    color: var(--text-dark) !important;
}

html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color: #556a7b"] {
    color: var(--text-gray) !important;
}

/* Dark mode: SVG text in inline SVGs */
html[data-theme="dark"] svg text[fill="#1a4d5e"] {
    fill: var(--primary);
}

html[data-theme="dark"] svg circle[fill="#1a4d5e"],
html[data-theme="dark"] svg line[stroke="#1a4d5e"] {
    fill: var(--primary);
    stroke: var(--primary);
}

html[data-theme="dark"] svg circle[fill="#183060"],
html[data-theme="dark"] svg line[stroke="#183060"],
html[data-theme="dark"] svg text[fill="#183060"] {
    fill: var(--primary);
    stroke: var(--primary);
}

footer a {
    color: var(--footer-text);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.88rem;
    line-height: 1.55;
}

footer a:hover {
    color: var(--footer-heading);
}

.footer-section h3 {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--footer-heading);
    letter-spacing: 0.01em;
}

.footer-grid-5col {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) repeat(4, minmax(150px, 1fr));
    gap: 2rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

.footer-section {
    min-width: 0;
}

.footer-logo {
    color: var(--contrast-panel-text);
    margin-bottom: 1rem;
    display: inline-flex;
}

.footer-about {
    color: var(--footer-text);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-top: 1rem;
    max-width: 32ch;
}

/* Footer contact block + social icons */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 1.1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 32ch;
}
.footer-contact li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    color: var(--footer-text);
    font-size: 0.85rem;
    line-height: 1.5;
}
.footer-contact li .material-symbols-rounded {
    font-size: 1.05rem;
    color: var(--contrast-action-bg, #9fb4ce);
    flex-shrink: 0;
    margin-top: 1px;
}
.footer-contact a { color: inherit; text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: #fff; color: var(--primary); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

@media (max-width: 1100px) {
    .footer-grid-5col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-section:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-grid-5col {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.footer-section ul {
    list-style: none;
    display: grid;
    gap: 0.65rem;
}

.footer-section li {
    margin-bottom: 0;
}

.footer-divider {
    border-top: 1px solid var(--contrast-decoration-bg);
    margin: 2.5rem 0 1rem;
    padding-top: 1.25rem;
    text-align: center;
    color: var(--footer-text-muted);
    font-size: 0.82rem;
}

/* ==========================================
   Partner Logos Row
   ========================================== */
.fp-partners {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 2.5rem 0;
    opacity: 0.5;
    filter: grayscale(100%);
}

.fp-partners img {
    height: 28px;
    width: auto;
}

/* ==========================================
   Inline style overrides for blade templates
   (make existing inline-styled cards match Notion-HK aesthetic)
   ========================================== */
section[style*="background: var(--secondary-bg)"] {
    background: var(--secondary-bg) !important;
}

/* Notion-style: smooth transitions on all inline-styled cards */
div[style*="border-radius: var(--card-radius)"],
div[style*="border-radius: 12px"],
div[style*="border-radius: 14px"],
div[style*="border-radius: 16px"] {
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

/* Slightly larger inline headings — Notion display weight feel */
[style*="font-size: 2.75rem"] {
    font-size: 3rem !important;
    letter-spacing: 0;
}

[style*="font-size: 2rem; font-weight: 600"] {
    font-size: 2.2rem !important;
    letter-spacing: 0;
}

[style*="font-size: 1.75rem; font-weight: 600"] {
    font-size: 1.9rem !important;
    letter-spacing: 0;
}

/* ==========================================
   Responsive Design
   ========================================== */

/* Hamburger menu breakpoint — 6 top-level items (3 dropdowns + 3 links) */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: block;
    }

    .btn-header {
        padding: 0.45rem 0.9rem;
        font-size: 0.78rem;
    }

    .logo {
        font-size: 0.92rem;
    }

    nav {
        display: none;
        position: fixed;
        top: 54px;
        left: 0;
        right: 0;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        text-align: left;
        border-top: 1px solid var(--border);
        padding: 0;
        z-index: 999;
        max-height: calc(100vh - 54px);
        overflow-x: hidden;
        overflow-y: auto;
        box-shadow: 0 12px 32px var(--shadow-color);
        justify-content: flex-start;
    }

    .header-actions {
        margin-left: 0;
    }

    nav a.nav-link-v5 {
        padding: 0.85rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
        white-space: normal;
        max-width: none;
        border-radius: 0;
    }

    nav a.nav-link-v5::after {
        display: none !important;
    }

    nav a.nav-link-v5--active {
        background: var(--secondary-bg);
        color: var(--primary);
    }

    /* Mobile dropdown group overrides */
    .nav-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-group__trigger {
        padding: 0.85rem 1.5rem;
        font-size: 0.9rem;
        border-bottom: 1px solid var(--border);
        width: 100%;
        justify-content: space-between;
        border-radius: 0;
    }

    /* On mobile: disable CSS hover, rely on JS .open class */
    .nav-group:hover .nav-group__panel {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
    }

    .nav-group:hover .nav-chevron {
        transform: none;
    }

    .nav-group.open .nav-group__trigger {
        color: var(--primary);
        font-weight: 600;
    }

    .nav-group.open .nav-chevron {
        transform: rotate(180deg);
        opacity: 1;
    }

    .nav-group__panel {
        position: static;
        transform: none !important;
        opacity: 0;
        pointer-events: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: unset;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.28s ease, opacity 0.18s ease;
    }

    .nav-group.open .nav-group__panel {
        opacity: 1;
        pointer-events: auto;
        max-height: 500px;
    }

    .nav-group__panel a {
        padding: 0.75rem 1.5rem 0.75rem 2.25rem;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.88rem;
        background: var(--secondary-bg);
    }

    .nav-group__panel a:hover,
    .nav-group__panel a.nav-item--active {
        background: var(--primary-subtle);
        color: var(--primary);
    }
}

/* Tablet (991px and down) */
@media (max-width: 991px) {
    .section-title {
        font-size: 2rem;
    }

    section {
        padding: 4rem 0;
    }

    .fp-cta-banner {
        margin: 0 1rem;
        padding: 2.5rem 1.75rem;
    }

    .case-study-grid {
        grid-template-columns: 1fr !important;
    }

    .bento-grid-2x2 {
        grid-template-columns: 1fr;
    }

    .bento-card-lg {
        grid-column: span 1;
    }

    .solution-hero__grid,
    .solution-context,
    .solution-framework,
    .shopfloor-matrix__grid,
    .solution-pain-map,
    .solution-implementation-grid,
    .solution-proof-layout,
    .solution-expansion-map,
    .scrum-operating-grid,
    .solution-baseline-grid,
    .solution-support-grid {
        grid-template-columns: 1fr;
    }

    .solution-card-grid,
    .solution-module-grid,
    .shopfloor-matrix__items,
    .solution-expansion-map__grid,
    .scrum-flow-board,
    .solution-risk-grid,
    .solution-packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-expansion-map__node::before {
        content: none;
    }

    .custom-process-panel {
        grid-template-columns: 1fr;
    }

    .custom-scrum-panel__head {
        flex-direction: column;
        gap: 0.85rem;
    }

    .custom-scrum-panel__head p {
        max-width: none;
        text-align: left;
    }
}

/* Footer responsive grid */
@media (max-width: 991px) {
    footer .footer-grid-5col {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 767px) {
    footer .footer-grid-5col {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile (768px and down) */
@media (max-width: 767px) {
    header {
        padding: 0.65rem 0;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--surface);
    }

    .header-container {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .logo {
        font-size: 1rem;
        gap: 0.5rem;
    }

    .logo img {
        height: 32px;
    }

    .logo span {
        display: none;
    }

    .mobile-menu-toggle {
        order: 2;
    }

    .btn-header {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        order: 3;
    }

    .lang-current-label {
        display: none;
    }

    .lang-trigger {
        width: 34px;
        padding: 0;
    }

    .lang-chevron {
        display: none;
    }

    nav {
        top: 58px;
        max-height: calc(100vh - 58px);
    }

    nav a.nav-link-v5 {
        padding: 1rem 1.5rem;
        font-size: 0.92rem;
        border-radius: 0;
    }

    body {
        padding-top: 58px;
    }

    section {
        padding: 3.5rem 0;
    }

    .section-title {
        font-size: 1.65rem;
    }

    .page-hero-compact {
        min-height: auto;
        padding: 3rem 0 2.5rem;
    }

    .page-hero-compact__title {
        font-size: 1.9rem;
    }

    .page-hero-compact__lead {
        font-size: 0.98rem;
    }

    .solution-hero {
        padding: 3.5rem 0 3rem;
    }

    .solution-hero__title {
        font-size: 2rem;
    }

    .solution-proof-grid,
    .solution-card-grid,
    .solution-module-grid,
    .factory-map__legend,
    .shopfloor-matrix__items,
    .solution-pain-grid,
    .solution-delivery-model__grid,
    .solution-role-grid,
    .solution-principle-grid,
    .solution-assurance-grid,
    .solution-roadmap-rail,
    .solution-expansion-map__grid,
    .solution-mini-grid,
    .scrum-flow-board,
    .scrum-control-grid,
    .solution-risk-grid,
    .solution-packages-grid {
        grid-template-columns: 1fr;
    }

    .scrum-operating-section {
        padding: 3.5rem 0;
    }

    .scrum-operating-model,
    .scrum-sprint-card {
        padding: 1.15rem;
    }

    .scrum-flow-node::before {
        content: none;
    }

    .custom-delivery-stack {
        margin-bottom: 3rem;
    }

    .custom-process-panel,
    .custom-scrum-panel {
        padding: 1.15rem;
    }

    .custom-transparency-card,
    .custom-process-panel__intro {
        padding: 1.1rem;
    }

    .custom-transparency-item {
        grid-template-columns: 1.85rem minmax(0, 1fr);
        gap: 0.72rem;
    }

    .custom-transparency-icon {
        width: 1.45rem;
        height: 1.45rem;
        margin-top: 0.25rem;
        font-size: 1.1rem;
    }

    .custom-scrum-flow {
        grid-template-columns: 1fr;
        gap: 0.72rem;
    }

    .custom-scrum-flow__line {
        top: 1.35rem;
        bottom: 1.35rem;
        left: 1.35rem;
        right: auto;
        width: 2px;
        height: auto;
    }

    .custom-scrum-step {
        grid-template-columns: 2.7rem minmax(0, 1fr);
        gap: 0.75rem;
        justify-items: start;
        align-items: start;
        text-align: left;
    }

    .custom-scrum-step__num {
        width: 2.7rem;
        height: 2.7rem;
        font-size: 0.76rem;
    }

    .custom-scrum-step__card {
        min-height: auto;
        padding: 0.85rem;
    }

    .custom-scrum-governance {
        border-radius: 14px;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .solution-context,
    .solution-panel,
    .shopfloor-matrix,
    .solution-pain-map__narrative,
    .solution-flow-panel,
    .solution-role-panel,
    .solution-proof-feature,
    .solution-assurance-panel,
    .solution-baseline-panel,
    .solution-note-panel {
        padding: 1.25rem;
    }

    .solution-timeline::before {
        left: 1rem;
    }

    .solution-timeline__num {
        width: 2rem;
        height: 2rem;
    }

    .solution-cta-panel {
        padding: 2rem 1.25rem;
    }

    .solution-cta-panel h2 {
        font-size: 1.45rem;
    }

    .container-v5 {
        padding: 0 1.25rem;
    }

    .fp-cta-banner {
        margin: 0;
        border-radius: 0;
        padding: 2rem 1.25rem;
    }

    .fp-cta-banner h2 {
        font-size: 1.3rem;
    }
}

/* Carousel: hide side arrows on mobile, use swipe/dots instead */
@media (max-width: 767px) {
    #prevBtn, #nextBtn {
        display: none !important;
    }
}

/* Small Phone (480px and down) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.45rem;
    }

    .section-subtitle {
        font-size: 0.82rem;
    }

    .btn-primary-v5 {
        padding: 0.6rem 1.2rem;
        font-size: 0.82rem;
    }

    section {
        padding: 2rem 0 !important;
    }

    .container-v5 {
        padding: 0 1rem !important;
    }

    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="gap: 2rem"] {
        gap: 1rem !important;
    }

    [style*="gap: 3rem"] {
        gap: 1.5rem !important;
    }

    [style*="padding: 2.5rem"] {
        padding: 1.5rem !important;
    }

    [style*="padding: 2rem"] {
        padding: 1rem !important;
    }
}


/* ==========================================
   Dark mode: additional inline style overrides
   ========================================== */
html[data-theme="dark"] [style*="border: 1px solid #d1e7f5"],
html[data-theme="dark"] [style*="border: 1px solid #bfdbfe"],
html[data-theme="dark"] [style*="border: 1px solid #fcd34d"],
html[data-theme="dark"] [style*="border: 1px solid #fde68a"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e5f1ff"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #fef3c7"] {
    border-color: var(--border) !important;
}

/* Services page: improve dark contrast for Tech Stack block */
html[data-theme="dark"] .services-tech-stack-block {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .services-tech-stack-block [style*="background: var(--secondary-bg)"] {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

html[data-theme="dark"] .services-tech-stack-block [style*="font-weight: 600; color: var(--text-dark)"] {
    color: var(--text-dark) !important;
}

html[data-theme="dark"] .services-tech-stack-block [style*="color: var(--text-gray)"] {
    color: var(--text-gray) !important;
}

html[data-theme="dark"] .services-tech-stack-block a[style*="background: var(--primary)"] {
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

/* Dark mode: additional inline text colors not covered above */
html[data-theme="dark"] [style*="color: #1a4d5e"],
html[data-theme="dark"] [style*="color:#1a4d5e"] {
    color: var(--text-dark) !important;
}

html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"] {
    color: var(--text-dark) !important;
}

html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#64748b"] {
    color: var(--text-gray) !important;
}

/* Dark mode: fix hover box-shadow on interactive cards */
html[data-theme="dark"] [onmouseover*="boxShadow"]:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    border-color: var(--primary) !important;
}

/* Dark mode: fix static box-shadows with hardcoded rgba(26, 77, 94) */
html[data-theme="dark"] [style*="box-shadow: 0 12px 32px rgba(26, 77, 94"],
html[data-theme="dark"] [style*="box-shadow: 0 12px 48px rgba(26, 77, 94"],
html[data-theme="dark"] [style*="box-shadow: 0 8px 32px rgba(26, 77, 94"],
html[data-theme="dark"] [style*="box-shadow: 0 4px 15px rgba(26, 77, 94"],
html[data-theme="dark"] [style*="box-shadow: 0 2px 8px rgba(26, 77, 94"] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode: fix timeline gradient lines */
html[data-theme="dark"] [style*="linear-gradient(180deg, var(--primary) 0%, rgba(26, 77, 94"] {
    background: linear-gradient(180deg, var(--primary) 0%, rgba(26, 69, 133, 0.2) 100%) !important;
}

/* Dark mode: fix hardcoded dark-primary gradient banners */
html[data-theme="dark"] div[style*="linear-gradient(135deg, var(--primary) 0%, #0a4a78"] {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #0a3558 100%) !important;
}

/* ==========================================
   Dark mode: Hero dashboard illustration
   ========================================== */
html[data-theme="dark"] .hero-dashboard-inner {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0,0,0,0.15);
}

html[data-theme="dark"] .hero-float-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ==========================================
   Dark mode: Form elements
   ========================================== */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--surface-elevated) !important;
    color: var(--text-dark) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-light) !important;
    opacity: 1;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 0;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-subtle) !important;
}

html[data-theme="dark"] select option {
    background: var(--surface-elevated);
    color: var(--text-dark);
}

/* Dark mode: alert/notification boxes */
html[data-theme="dark"] [style*="background: #eaf8f2"] {
    background: var(--primary-subtle) !important;
    border-color: rgba(24, 48, 96, 0.3) !important;
    color: var(--primary) !important;
}

/* Dark mode: R&D pill badge */
html[data-theme="dark"] [style*="background: #e0f2fe"][style*="color: #0369a1"] {
    background: var(--primary-subtle) !important;
    color: var(--primary-light) !important;
}

/* Dark mode: testimonial cards */
html[data-theme="dark"] .opacity-75 {
    opacity: 1 !important;
}

/* Dark mode: index blog preview cards */
html[data-theme="dark"] a[style*="background: linear-gradient(135deg, #f0f9ff"] {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] a[style*="background: linear-gradient(135deg, #fef3c7"] {
    background: var(--surface-elevated) !important;
    border-color: var(--border) !important;
}

/* ================================================================
   NEW SECTIONS — Hero Clients, Trust Badges, Tech Bar,
   Capabilities, Process Steps, Case Cards, CTA, Comparison
   ================================================================ */

/* ── Utility classes (extracted from inline styles) ─────────────── */
.section-alt { background: var(--secondary-bg); }
.section-cta { text-align: center; margin-top: 2.5rem; }
/* Card-list grids — wrap & CENTER so a partial last row (orphan cards) stays
   centered for symmetry, instead of left-aligning with an empty gap.
   One consistent mechanism for every card grid; tune per-section with
   --card-min / --card-max / --card-gap (no per-place hacks). */
.card-grid, .grid-4col, .grid-3col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-gap, 1.5rem);
}
.card-grid > *, .grid-4col > *, .grid-3col > * {
    flex: 1 1 var(--card-min, 300px);
    max-width: var(--card-max, 440px);
}
.dot { width: 5px; height: 5px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }

/* ── Service Cards ──────────────────────────────────────────────── */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem 1.75rem;
    overflow: hidden;
    transition: all 0.25s ease;
}

.service-card--featured {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--primary-subtle) 78%, var(--surface)) 0%,
            var(--surface) 58%);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 16px 38px color-mix(in srgb, var(--primary) 10%, transparent);
}

.service-card--featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--shadow-color);
}

.service-card__badge {
    position: absolute;
    top: 2rem;
    right: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: var(--contrast-panel-bg);
    border: 1px solid var(--contrast-panel-border);
    color: var(--contrast-panel-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
}

.service-card__badge .material-symbols-rounded {
    font-size: 0.95rem;
}

@media (max-width: 520px) {
    .service-card__badge {
        position: static;
        align-self: flex-start;
        margin-bottom: 1rem;
    }
}

.service-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-subtle);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    margin-bottom: 1rem;
}

.service-card__icon .material-symbols-rounded {
    font-size: 1.65rem;
}

.service-card__title { font-size: 1.05rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.75rem; }
.service-card__desc { color: var(--text-gray); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; }
.service-card__features { list-style: none; padding: 0; margin-bottom: 1.25rem; }
.service-card__features li {
    padding: 0.35rem 0;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.service-card__link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
}
.service-card__link .material-symbols-rounded { font-size: 1rem; }

/* ── Why Cards ──────────────────────────────────────────────────── */
.why-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.75rem;
    transition: all 0.25s ease;
}
.why-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.why-card__icon {
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--primary);
    background: var(--primary-subtle);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}
.why-card__title { font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; }
.why-card__desc { font-size: 0.88rem; color: var(--text-gray); line-height: 1.65; }

.governance-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 16px 42px var(--shadow-color);
}

.governance-panel__intro {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1rem;
    align-items: start;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.governance-panel__intro > .material-symbols-rounded {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-subtle);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    font-size: 1.6rem;
}

.governance-panel__intro h3 {
    margin: 0 0 0.35rem;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 600;
}

.governance-panel__intro p {
    margin: 0;
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.65;
}

.governance-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.governance-panel__item {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem;
}

.governance-panel__item .material-symbols-rounded {
    color: var(--primary);
    font-size: 1.35rem;
    margin-bottom: 0.7rem;
}

.governance-panel__item h4 {
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.45rem;
}

.governance-panel__item p {
    color: var(--text-gray);
    font-size: 0.84rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .governance-panel__intro {
        grid-template-columns: 1fr;
    }

    .governance-panel__grid {
        grid-template-columns: 1fr;
    }
}

/* ── CTA Banner (extracted) ─────────────────────────────────────── */
.cta-banner__inner { text-align: center; position: relative; z-index: 1; }
.cta-banner__label { color: var(--contrast-panel-muted-soft); }
.cta-banner__title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--contrast-panel-text);
    margin-bottom: 1rem;
    letter-spacing: 0;
}
.cta-banner__subtitle {
    font-size: 1.05rem;
    color: var(--contrast-panel-muted);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}
.cta-banner__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Hero Micro-copy ────────────────────────────────────────────── */
.hero-microcopy {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

/* ── Hero Client Logos Bar ──────────────────────────────────────── */
.hero-clients-bar {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.hero-clients-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}
.hero-clients-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.hero-client-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-gray);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s;
}
.hero-client-logo:hover {
    opacity: 0.8;
}

/* ── Hero Trust Badges ──────────────────────────────────────────── */
.hero-trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.hero-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-gray);
    white-space: nowrap;
}
.hero-trust-badge .material-symbols-rounded {
    font-size: 1rem;
    color: var(--primary);
}

/* ── Hero Tech Badge Bar ────────────────────────────────────────── */
.hero-tech-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.hero-tech-pill {
    padding: 0.3rem 0.7rem;
    background: var(--primary);
    color: var(--button-primary-text);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}
.hero-tech-pill--more {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    opacity: 1;
}

/* ── Capabilities Grid ──────────────────────────────────────────── */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.capability-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem 1.75rem;
    text-align: center;
    transition: all 0.25s ease;
}
.capability-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--primary);
}
.capability-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.6rem;
}
.capability-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}
.capability-desc {
    font-size: 0.88rem;
    color: var(--text-gray);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .capability-card {
        padding: 1.5rem 1.25rem;
    }
}
@media (max-width: 480px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Process Steps (3-step) ─────────────────────────────────────── */
.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}
.process-step {
    flex: 1;
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    position: relative;
}
.process-step-number {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.1;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    line-height: 1;
}
.process-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}
.process-step-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}
.process-step-desc {
    font-size: 0.85rem;
    color: var(--text-gray);
    line-height: 1.65;
}
.process-step-connector {
    display: flex;
    align-items: center;
    padding-top: 4rem;
    color: var(--primary);
    opacity: 0.3;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
        gap: 1rem;
    }
    .process-step-connector {
        display: none;
    }
}

/* ── Case Study Cards ───────────────────────────────────────────── */
.case-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem 1.75rem;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.case-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.case-card-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: var(--primary-subtle);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: flex-start;
}
.case-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}
.case-card-desc {
    font-size: 0.88rem;
    color: var(--text-gray);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.case-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.95rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.case-metric {
    text-align: center;
    min-width: 0;
    padding: 0 0.25rem;
}
.case-metric-value {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.2rem;
    line-height: 1.25;
    white-space: nowrap;
}
.case-metric-label {
    display: block;
    font-size: 0.66rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.35;
}
.case-card-practices {
    margin-top: auto;
    padding-top: 0.25rem;
}
.case-card-practices__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
}
.case-card-practices__head > span,
.case-card-practices__label {
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 600;
}
.case-card-practices__head small {
    color: var(--text-light);
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: right;
    max-width: 16rem;
}
.case-card-practices__label {
    margin: 0.85rem 0 0.5rem;
}
.case-card-tech {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.case-card-tech span {
    padding: 0.24rem 0.55rem;
    background: var(--secondary-bg);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-gray);
    border: 1px solid var(--border);
    line-height: 1.2;
}
.case-card-tech--patterns span {
    background: var(--primary-subtle);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
}

@media (max-width: 520px) {
    .case-card-metrics {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .case-metric {
        text-align: left;
    }

    .case-card-practices__head {
        display: block;
    }

    .case-card-practices__head small {
        display: block;
        text-align: left;
        max-width: none;
        margin-top: 0.35rem;
    }
}

/* ── Case Study Detail Tags ──────────────────────────────────────── */
.case-study-practices {
    display: grid;
    gap: 0.55rem;
}

.case-study-practices__label {
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.35rem;
}

.case-study-practices__tags {
    display: flex;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.case-study-practices__tags span {
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    color: var(--text-gray);
    padding: 0.28rem 0.62rem;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.25;
}

.case-study-practices__tags--patterns span {
    background: var(--primary-subtle);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
}

/* ── Pricing FAQ ─────────────────────────────────────────────────── */
.pricing-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.pricing-faq-card {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 1rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 1.25rem 1.35rem;
}

.pricing-faq-card__icon {
    color: var(--primary);
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 0.2rem;
}

.pricing-faq-card__content h3 {
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.55rem;
}

.pricing-faq-card__content p {
    color: var(--text-gray);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 520px) {
    .pricing-faq-card {
        grid-template-columns: 24px 1fr;
        gap: 0.75rem;
        padding: 1.1rem;
    }
}

/* ── Certifications Learning Panel ───────────────────────────────── */
.learning-panel {
    background: var(--contrast-panel-bg);
    border: 1px solid var(--contrast-panel-border);
    border-radius: var(--card-radius);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--contrast-panel-text);
}

.learning-panel h2 {
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.85rem;
}

.learning-panel > p {
    color: var(--contrast-panel-muted);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 auto 1.75rem;
    max-width: 760px;
}

.learning-panel__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
}

.learning-panel__item {
    background: var(--contrast-decoration-bg);
    border: 1px solid var(--contrast-panel-border);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.learning-panel__value {
    font-size: 1.42rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.learning-panel__label {
    color: var(--contrast-panel-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

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

@media (max-width: 520px) {
    .learning-panel {
        padding: 2rem 1rem;
    }

    .learning-panel__grid {
        grid-template-columns: 1fr;
    }
}

/* ── CTA Banner ─────────────────────────────────────────────────── */
.cta-banner {
    background: var(--contrast-panel-bg);
    color: var(--contrast-panel-text);
    position: relative;
    overflow: hidden;
}
.cta-banner::before,
.cta-banner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background: var(--contrast-decoration-bg);
}
.cta-banner::before {
    width: 400px; height: 400px;
    top: -100px; right: -100px;
}
.cta-banner::after {
    width: 250px; height: 250px;
    bottom: -60px; left: -60px;
}
.btn-cta-white {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    background: var(--contrast-action-bg);
    color: var(--contrast-action-text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-cta-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.btn-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    background: transparent;
    color: var(--contrast-panel-text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1.5px solid var(--contrast-glass-border);
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-cta-ghost:hover {
    background: var(--contrast-glass-bg);
    border-color: var(--contrast-panel-border);
}

/* ── Comparison Page ────────────────────────────────────────────── */
.comparison-table-wrap {
    overflow-x: auto;
    margin: 2rem 0;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.comparison-table th {
    background: var(--secondary-bg);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.comparison-table td:first-child {
    font-weight: 600;
    color: var(--text-dark);
    min-width: 180px;
}
.comparison-table tr:hover td {
    background: var(--secondary-bg);
}
.comparison-highlight {
    background: var(--primary-subtle);
}
.comparison-table .check {
    color: var(--primary);
    font-weight: 600;
}
.comparison-table .cross {
    color: var(--text-light);
}

/* ── Pain Section ───────────────────────────────────────────────── */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 940px;
    margin: 0 auto;
}
.pain-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: 188px;
    padding: 1.35rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary));
    border-radius: calc(var(--card-radius) + 2px);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 6%, transparent);
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pain-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary-subtle) 52%, transparent), transparent 44%),
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 34%);
    opacity: 0.72;
}
.pain-card::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4.25rem;
    height: 4.25rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    border-radius: 50%;
    opacity: 0.42;
}
.pain-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    box-shadow: 0 22px 56px color-mix(in srgb, var(--primary) 10%, transparent);
}
.pain-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    background: color-mix(in srgb, var(--primary-subtle) 74%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 0.9rem;
    color: var(--primary);
}
.pain-icon .material-symbols-rounded {
    font-size: 1.45rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.pain-card__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.pain-kicker {
    display: inline-flex;
    margin-bottom: 0.35rem;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pain-card__title {
    margin: 0 0 0.45rem;
    color: var(--text-dark);
    font-size: clamp(1rem, 1.35vw, 1.14rem);
    font-weight: 600;
    line-height: 1.32;
}
.pain-text {
    margin: 0;
    color: var(--text-gray);
    font-size: 0.94rem;
    line-height: 1.6;
    font-weight: 400;
}
.pain-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.55rem;
    max-width: 760px;
    margin: 1.65rem auto 0;
    color: var(--text-gray);
    text-align: center;
}
.pain-note__icon {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.25rem;
    line-height: 1.55;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.pain-note p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    font-weight: 400;
}
html[data-theme="dark"] .pain-card {
    background: var(--surface-elevated);
    border-color: color-mix(in srgb, var(--border) 82%, var(--primary));
    box-shadow: 0 18px 44px color-mix(in srgb, var(--surface-contrast) 34%, transparent);
}
html[data-theme="dark"] .pain-card::before {
    opacity: 0.28;
}
html[data-theme="dark"] .pain-icon {
    background: color-mix(in srgb, var(--surface) 82%, var(--primary-subtle));
}
@media (max-width: 600px) {
    .pain-grid {
        grid-template-columns: 1fr;
    }
    .pain-card {
        min-height: auto;
        padding: 1.15rem;
    }
    .pain-note {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        margin-top: 1.35rem;
        text-align: center;
    }
    .pain-note p {
        font-size: 0.92rem;
    }
}

/* ── Contact Location Panel ─────────────────────────────────────── */
.contact-location-section {
    background: var(--secondary-bg);
    padding: 0 0 6rem;
}
.contact-location-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 0;
    min-height: 430px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--section-radius);
    box-shadow: 0 18px 48px var(--shadow-color);
}
.contact-location-map {
    position: relative;
    min-height: 430px;
    background:
        radial-gradient(circle at 28% 28%, var(--primary-subtle), transparent 30%),
        radial-gradient(circle at 76% 62%, var(--accent-light), transparent 28%),
        var(--surface-elevated);
    border-right: 1px solid var(--border);
    overflow: hidden;
}
.contact-location-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.34;
}
.contact-location-map::before,
.contact-location-map::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.contact-location-map::before {
    width: 280px;
    height: 280px;
    left: 12%;
    top: 18%;
}
.contact-location-map::after {
    width: 190px;
    height: 190px;
    right: 12%;
    bottom: 16%;
}
.contact-location-node {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 0.2rem;
    width: 188px;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 30px var(--shadow-color);
}
.contact-location-node .material-symbols-rounded {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--contrast-action-text);
    background: var(--button-secondary-hover-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1.2rem;
}
.contact-location-node strong {
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.25;
}
.contact-location-node small {
    color: var(--text-gray);
    font-size: 0.78rem;
    line-height: 1.45;
}
.contact-location-node--hq {
    left: 11%;
    top: 17%;
}
.contact-location-node--client {
    right: 11%;
    top: 18%;
}
.contact-location-node--delivery {
    left: 41%;
    bottom: 13%;
}
.contact-location-route {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: var(--primary);
    opacity: 0.38;
    transform-origin: left center;
}
.contact-location-route::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--primary);
}
.contact-location-route--one {
    left: 30%;
    top: 33%;
    width: 34%;
    transform: rotate(5deg);
}
.contact-location-route--two {
    left: 31%;
    top: 50%;
    width: 26%;
    transform: rotate(34deg);
}
.contact-location-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem);
}
.contact-location-content h2 {
    margin: 0.6rem 0 1rem;
    color: var(--text-dark);
    font-size: clamp(1.6rem, 2vw, 2.2rem);
    line-height: 1.12;
    letter-spacing: 0;
}
.contact-location-content p {
    color: var(--text-gray);
    line-height: 1.75;
    margin-bottom: 1.7rem;
}
.contact-location-list {
    display: grid;
    gap: 0.85rem;
}
.contact-location-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.contact-location-item .material-symbols-rounded {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 1.1rem;
}
.contact-location-item strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}
.contact-location-item small {
    display: block;
    color: var(--text-gray);
    font-size: 0.84rem;
    line-height: 1.55;
}
@media (max-width: 992px) {
    .contact-location-panel {
        grid-template-columns: 1fr;
    }
    .contact-location-map {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}
@media (max-width: 600px) {
    .contact-location-section {
        padding-bottom: 4rem;
    }
    .contact-location-panel {
        border-radius: 14px;
    }
    .contact-location-map {
        min-height: 360px;
    }
    .contact-location-node {
        width: 148px;
        padding: 0.8rem;
    }
    .contact-location-node--hq {
        left: 7%;
        top: 13%;
    }
    .contact-location-node--client {
        right: 6%;
        top: 20%;
    }
    .contact-location-node--delivery {
        left: 27%;
        bottom: 10%;
    }
    .contact-location-route--one {
        left: 28%;
        width: 32%;
    }
    .contact-location-route--two {
        left: 27%;
        width: 30%;
    }
    .contact-location-content {
        padding: 1.5rem;
    }
}

/* ── Testimonials ───────────────────────────────────────────────── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
    max-width: 860px;
    margin: 0 auto;
}
.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: 2rem;
    position: relative;
}
.testimonial-quote-mark {
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0.15;
    line-height: 1;
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
}
.testimonial-text {
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1.5rem;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--contrast-panel-text);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}
.testimonial-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}
.testimonial-role {
    font-size: 0.78rem;
    color: var(--text-light);
}

/* ── Responsive: hero extras ────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-clients-logos {
        gap: 1.5rem;
    }
    .hero-trust-badges {
        gap: 0.75rem;
    }
    .hero-trust-badge {
        font-size: 0.72rem;
        padding: 0.3rem 0.65rem;
    }
    .hero-tech-bar {
        gap: 0.35rem;
    }
    .hero-tech-pill {
        font-size: 0.65rem;
        padding: 0.25rem 0.55rem;
    }
}