:root {
    color-scheme: dark;
    --color-bg-page: #0b0d10;
    --color-bg-deep: #080a0c;
    --color-surface-1: #101419;
    --color-surface-2: #161b22;
    --color-surface-3: #1c222b;
    --color-surface-elevated: #222934;
    --color-text-primary: #f0f3f6;
    --color-text-secondary: #9da8b6;
    --color-text-muted: #6b7888;
    --color-text-inverse: #05070a;
    --color-border: #1a2028;
    --color-border-subtle: rgba(255, 255, 255, 0.04);
    --color-border-strong: #2a3340;
    --color-border-glow: rgba(69, 196, 176, 0.2);
    --color-accent: #45c4b0;
    --color-accent-rgb: 69 196 176;
    --color-accent-dim: rgba(69, 196, 176, 0.08);
    --color-accent-glow: rgba(69, 196, 176, 0.04);
    --color-line-subtle: rgba(130, 142, 158, 0.06);
    --color-line-active: rgba(69, 196, 176, 0.2);
    --color-error: #ff7b86;
    --color-success: #69d09a;
    --color-warning: #e8b760;
    --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-body: 1rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lead: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-h1: clamp(2.5rem, 6vw, 3.75rem);
    --leading-body: 1.625;
    --leading-normal: 1.5;
    --leading-heading: 1.1;
    --leading-relaxed: 1.65;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --header-height: 4.75rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;
    --container-content: 75rem;
    --container-wide: 85rem;
    --container-reading: 47.5rem;
    --gutter-page: 1.25rem;
    --focus-size: 0.1875rem;
    --diagram-grid-size: 2.25rem;
    --diagram-line: 1px;
    --duration-diagram-reveal: 900ms;
    --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
    --transition-base: 250ms cubic-bezier(0.2, 0, 0, 1);
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    min-width: 20rem;
    background: var(--color-bg-page);
    scroll-behavior: auto;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

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

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

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

h1,
h2,
h3,
p,
ol,
ul {
    margin-block-start: 0;
}

h1,
h2,
h3 {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    text-wrap: balance;
}

h1 {
    margin-block-end: var(--space-6);
    font-size: var(--text-h1);
    letter-spacing: -0.025em;
}

p {
    margin-block-end: var(--space-4);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

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

:focus-visible {
    outline: var(--focus-size) solid var(--color-accent);
    outline-offset: 0.1875rem;
}

[hidden] {
    display: none !important;
}

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

.skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transform: translateY(-160%);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
}

.skip-link:focus {
    transform: translateY(0);
}

.container {
    width: min(100% - (2 * var(--gutter-page)), var(--container-content));
    margin-inline: auto;
}

.container--reading {
    width: min(100% - (2 * var(--gutter-page)), var(--container-reading));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    z-index: 100;
    inset-block-start: 0;
    border-block-end: 1px solid var(--color-border);
    background: rgba(11, 13, 16, 0.92);
    backdrop-filter: blur(0.875rem);
}

.site-header::after {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: max(var(--gutter-page), calc((100% - var(--container-content)) / 2));
    width: clamp(3.5rem, 7vw, 6rem);
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    content: "";
    pointer-events: none;
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    min-height: 4.75rem;
    padding-block: var(--space-3);
}

.site-brand {
    display: inline-flex;
    min-height: 2.75rem;
    gap: var(--space-2);
    align-items: center;
    justify-self: start;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-decoration: none;
}

.site-brand__mark {
    flex: 0 0 auto;
    width: auto;
    height: 2.25rem;
}

.site-brand__text {
    color: var(--color-text-primary);
    white-space: nowrap;
}

.site-brand:hover {
    color: var(--color-accent);
}

.site-brand:hover .site-brand__text {
    color: var(--color-accent);
}

.nav-toggle,
.solutions-toggle,
.button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.nav-toggle {
    gap: var(--space-3);
    justify-self: end;
    padding-inline: var(--space-4);
    background: var(--color-surface-1);
}

.nav-toggle:hover,
.solutions-toggle:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-2);
}

.nav-toggle__icon {
    position: relative;
    width: 1rem;
    height: 0.75rem;
    border-block: 2px solid currentColor;
}

.nav-toggle__icon::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    height: 2px;
    transform: translateY(-50%);
    background: currentColor;
    content: "";
}

.button {
    min-width: 2.75rem;
    padding: 0.65rem 1.35rem;
    text-align: center;
    border-radius: 9999px;
    font-size: var(--text-sm);
    letter-spacing: -0.01em;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.button--primary {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 8px -2px rgba(69, 196, 176, 0.4);
}

.button--primary:hover {
    border-color: #5fe0cb;
    background: #5fe0cb;
    color: var(--color-text-inverse);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px -2px rgba(69, 196, 176, 0.5);
    transform: translateY(-1px);
}

.button--secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--color-text-primary);
    backdrop-filter: blur(8px);
}

.button--secondary:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.button--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.button--ghost:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.button:active,
.nav-toggle:active,
.solutions-toggle:active {
    transform: scale(0.98);
}

.primary-nav__list,
.solutions-nav,
.site-footer__links,
.breadcrumbs__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav__list,
.solutions-nav {
    display: grid;
    gap: var(--space-2);
}

.primary-nav {
    grid-column: 1 / -1;
    max-height: calc(100dvh - 5.75rem);
    padding-block-start: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-block-start: 1px solid var(--color-border);
}

.js .primary-nav:not(.is-open),
.js .solutions-nav:not(.is-open) {
    display: none;
}

.primary-nav a,
.site-footer a {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
}

.primary-nav a,
.site-footer a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.primary-nav a.button--primary,
.primary-nav a.button--primary:hover,
.primary-nav a.button--primary[aria-current="page"] {
    color: var(--color-text-inverse);
}

.primary-nav__link {
    width: 100%;
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"],
.site-footer a:hover {
    color: var(--color-accent);
}

.primary-nav__link:hover {
    background: var(--color-surface-1);
}

.primary-nav__paired-control {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.primary-nav__paired-control .primary-nav__link {
    flex: 1;
}

.solutions-toggle {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    padding: 0;
    background: var(--color-surface-1);
}

.solutions-toggle__icon {
    width: 0.55rem;
    height: 0.55rem;
    transform: translateY(-0.125rem) rotate(45deg);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
}

.solutions-toggle[aria-expanded="true"] .solutions-toggle__icon {
    transform: translateY(0.125rem) rotate(225deg);
}

.solutions-nav {
    margin-block-start: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-inline-start: 1px solid var(--color-border);
}

.solutions-nav a {
    width: 100%;
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.solutions-nav a:hover,
.solutions-nav a[aria-current="page"] {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

.no-js .site-header {
    position: static;
}

.no-js .primary-nav {
    max-height: none;
    overflow: visible;
}

.breadcrumbs {
    display: block;
    margin: 0;
    margin-block-end: var(--space-3);
    padding: 0;
}

.breadcrumbs__list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--color-accent);
    text-decoration: none;
}

.breadcrumbs span[aria-current="page"] {
    color: var(--color-text-secondary);
}

.breadcrumbs__item:not(:last-child)::after {
    margin-inline-start: 0.2rem;
    color: var(--color-border-strong);
    content: "/";
    font-size: 0.7rem;
    user-select: none;
}

.page-main {
    min-height: 55vh;
    padding-block: 0;
}

.page-main--padded {
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}

.page-intro {
    max-width: var(--container-reading);
}

.page-status {
    margin-block-end: var(--space-4);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Homepage Hero: Asymmetric Editorial & Architecture Showcase */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 75% 55% at 50% -12%, rgba(69, 196, 176, 0.09), transparent 50rem),
        radial-gradient(circle at 85% 75%, rgba(28, 35, 45, 0.45), transparent 35rem),
        var(--color-bg-page);
}

.hero::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 40%, rgba(69, 196, 176, 0.04), transparent 30rem);
    pointer-events: none;
    content: "";
    animation: heroAtmosphere 16s ease-in-out infinite alternate;
}

@keyframes heroAtmosphere {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.05) translate3d(10px, -5px, 0); }
}

.hero__inner {
    position: relative;
    z-index: 1;
    padding-block-start: clamp(3rem, 7vw, 5.5rem);
    padding-block-end: clamp(3rem, 7vw, 6rem);
}

.hero__stage {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__content {
    max-width: 48rem;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: var(--space-4);
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(69, 196, 176, 0.22);
    border-radius: 9999px;
    background: rgba(69, 196, 176, 0.06);
    color: var(--color-accent);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero__badge-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgba(69, 196, 176, 0.7);
    animation: beaconPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes beaconPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(69, 196, 176, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(69, 196, 176, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(69, 196, 176, 0); }
}

.hero h1 {
    max-width: 17ch;
    margin-block-end: var(--space-5);
    font-size: clamp(2.4rem, 5vw, 3.85rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.text-gradient {
    background: linear-gradient(135deg, #f0f3f6 30%, #45c4b0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__lead {
    max-width: 42rem;
    margin-block-end: var(--space-8);
    color: var(--color-text-secondary);
    font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl));
    line-height: var(--leading-relaxed);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.button__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: 0.5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-fast);
}

.button--secondary .button__icon-circle {
    background: rgba(255, 255, 255, 0.08);
}

.button:hover .button__icon-circle {
    transform: translateX(2px);
}

.hero__trust-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
}

.hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.hero__trust-item svg {
    color: var(--color-accent);
}

/* Hero Showcase Architecture Matrix */
.hero-showcase {
    position: relative;
    max-width: 62rem;
    width: 100%;
    margin-inline: auto;
}

.hero-showcase__outer {
    position: relative;
    padding: 0.35rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-showcase__inner {
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
}

.hero-showcase__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-showcase__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-showcase__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-accent);
}

.hero-showcase__status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px rgba(69, 196, 176, 0.6);
}

.hero-showcase__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 44rem) {
    .hero-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-4);
    }
}

.hero-showcase__card {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    text-decoration: none;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.hero-showcase__card:hover {
    transform: translateX(3px);
    border-color: rgba(69, 196, 176, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.hero-showcase__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.2);
    color: var(--color-accent);
}

.hero-showcase__meta h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.hero-showcase__meta p {
    margin: 0.15rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.hero-showcase__tag {
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-showcase__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* Base Home Section */
.home-section {
    scroll-margin-top: 6rem;
    position: relative;
    padding-block: clamp(var(--space-20), 10vw, var(--space-32));
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.section-intro {
    max-width: 44rem;
    margin-block-end: clamp(var(--space-10), 7vw, var(--space-16));
}

.section-intro--wide {
    max-width: 54rem;
}

.section-intro h2,
.final-cta h2 {
    margin-block-end: var(--space-5);
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.section-intro > :last-child,
.final-cta__shell > :last-child {
    margin-block-end: 0;
}

.section-kicker {
    margin-block-end: var(--space-3);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration-color: rgb(var(--color-accent-rgb) / 0.7);
    transition: color var(--transition-fast);
}

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

/* =========================================================
   SECTION 2 — L: LABEL THE PROBLEM
   ========================================================= */
.problems {
    background:
        radial-gradient(ellipse 70% 40% at 85% 15%, rgba(20, 45, 90, 0.14), transparent 45rem),
        #07090e;
}

.problems__layout {
    display: grid;
    gap: var(--space-10);
}

.problems__intro {
    margin-block-end: 0;
}

.problems__cta-hint {
    margin-block-start: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.problems__cta-hint p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.problem-cards {
    display: grid;
    gap: var(--space-4);
}

.problem-card {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    background: #0e131b;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.problem-card:hover {
    transform: translateY(-2px);
    border-color: rgba(69, 196, 176, 0.3);
    background: #121822;
}

.problem-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
}

.problem-card__body h3 {
    margin-block-end: var(--space-2);
    font-size: 1.125rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.problem-card__body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* =========================================================
   SECTION 3 — O: OVERVIEW THE CURRENT / PAST PAIN
   ========================================================= */
.pain-overview {
    background:
        radial-gradient(ellipse 65% 35% at 15% 45%, rgba(18, 40, 80, 0.12), transparent 40rem),
        #06080d;
}

.pain-matrix {
    display: grid;
    gap: var(--space-5);
}

.pain-matrix__item {
    padding: var(--space-6);
    background: #0b0e14;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pain-matrix__item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.pain-matrix__indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-end: var(--space-4);
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: rgba(255, 123, 134, 0.08);
    border: 1px solid rgba(255, 123, 134, 0.25);
}

.pain-matrix__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-error);
}

.pain-matrix__label {
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-error);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pain-matrix__item h3 {
    margin-block-end: var(--space-2);
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.pain-matrix__item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* =========================================================
   SECTION 4 — S: SELL THE VACATION
   ========================================================= */
.vacation {
    background:
        radial-gradient(ellipse 80% 50% at 50% 10%, rgba(30, 70, 140, 0.15), transparent 50rem),
        radial-gradient(circle at 85% 80%, rgba(69, 196, 176, 0.06), transparent 35rem),
        #080b11;
}

.outcome-grid {
    display: grid;
    gap: var(--space-5);
}

.outcome-card {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-6);
    background: #0e141f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.outcome-card:hover {
    transform: translateY(-2px);
    border-color: rgba(69, 196, 176, 0.35);
}

.outcome-card__number {
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    color: rgba(69, 196, 176, 0.6);
    line-height: 1;
    min-width: 2.25rem;
}

.outcome-card__body h3 {
    margin-block-end: var(--space-2);
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.outcome-card__body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.outcome-visibility {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
}

.outcome-visibility__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: 2px;
}

.outcome-visibility__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(69, 196, 176, 0.75);
}

.outcome-visibility__value {
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
}

.whatsapp-callout {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background:
        radial-gradient(circle at 90% 20%, rgba(37, 211, 102, 0.08), transparent 18rem),
        #0b151a;
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.whatsapp-callout__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #25d366;
}

.whatsapp-callout__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 8px rgba(37, 211, 102, 0.6);
}

.whatsapp-callout h3 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.whatsapp-callout p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.whatsapp-callout .text-link {
    color: #25d366;
    text-decoration-color: rgba(37, 211, 102, 0.6);
    margin-block-start: var(--space-2);
}

.whatsapp-callout .text-link:hover {
    color: #4eed87;
}

/* =========================================================
   SECTION 5 — CAPABILITIES
   ========================================================= */
.capabilities-section {
    background:
        radial-gradient(ellipse 60% 40% at 15% 30%, rgba(20, 45, 90, 0.12), transparent 45rem),
        #070a0f;
}

.capability-grid {
    display: grid;
    gap: var(--space-6);
}

.capability-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d121b;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.capability-card:hover {
    transform: translateY(-3px);
    border-color: rgba(69, 196, 176, 0.35);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
}

.capability-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-5);
}

.capability-card__index {
    font-size: 0.875rem;
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}

.capability-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.2);
    color: var(--color-accent);
}

.capability-card__body h3 {
    margin-block-end: var(--space-3);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.capability-card__body p {
    margin-block-end: var(--space-5);
    font-size: 0.9375rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.capability-card__list {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.capability-card__list li {
    position: relative;
    padding-inline-start: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.capability-card__list li::before {
    position: absolute;
    inset-block-start: 0.6em;
    inset-inline-start: 0;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.capability-card__footer {
    margin-block-start: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.supporting-capability-panel {
    margin-block-start: var(--space-8);
    padding: var(--space-6) var(--space-8);
    background: #0c1017;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    display: grid;
    gap: var(--space-4);
    align-items: center;
}

.supporting-capability-panel__label {
    display: block;
    margin-block-end: var(--space-1);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.supporting-capability-panel__meta h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text-primary);
}

.supporting-capability-panel__desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* =========================================================
   SECTION 6 — E: EXPLAIN AWAY CONCERNS
   ========================================================= */
.concerns-section {
    background:
        radial-gradient(ellipse 65% 35% at 85% 50%, rgba(20, 50, 100, 0.14), transparent 45rem),
        #06090e;
}

.concerns-grid {
    display: grid;
    gap: var(--space-5);
}

.concern-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-6);
    background: #0c1017;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
}

.concern-item__number {
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    font-family: var(--font-mono);
    color: var(--color-accent);
    line-height: 1;
}

.concern-item__content h3 {
    margin-block-end: var(--space-2);
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.concern-item__content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.concern-assistant-card {
    padding: var(--space-6);
    background:
        radial-gradient(circle at 90% 10%, rgba(69, 196, 176, 0.1), transparent 18rem),
        #0e151e;
    border: 1px solid rgba(69, 196, 176, 0.3);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
}

.concern-assistant-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.concern-assistant-card__pulse {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-accent);
    animation: beaconPulse 2.4s infinite;
}

.concern-assistant-card h3 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.concern-assistant-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

/* =========================================================
   SECTION 7 — R: REINFORCE THE DECISION (Selected Work Evidence)
   ========================================================= */
.selected-work-preview {
    background:
        radial-gradient(ellipse 75% 45% at 50% 0%, rgba(25, 55, 110, 0.15), transparent 50rem),
        #080b11;
}

.selected-work-preview__intro {
    max-width: 54rem;
}

.selected-work-preview__top-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}

.selected-work-preview__top-meta .section-kicker {
    margin-block-end: 0;
}

.work-preview-grid {
    display: grid;
    gap: var(--space-6);
}

.work-preview-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d121a;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.work-preview-card:hover {
    transform: translateY(-3px);
    border-color: rgba(69, 196, 176, 0.35);
}

.work-preview-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: var(--space-3);
}

.work-preview-card__tag {
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.work-preview-card__type {
    font-size: 0.7rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    padding: 0.15rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 9999px;
}

.work-preview-card h3 {
    margin-block-end: var(--space-3);
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
}

.work-preview-card p {
    margin-block-end: var(--space-5);
    font-size: 0.9rem;
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.work-preview-card__footer {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.work-preview-card__result {
    font-size: 0.8rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta {
    padding-block: clamp(var(--space-20), 12vw, var(--space-32));
    background: #06080d;
}

.final-cta__shell {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 8vw, var(--space-20));
    border: 1px solid rgba(69, 196, 176, 0.3);
    border-radius: 1.5rem;
    background:
        radial-gradient(ellipse 90% 70% at 85% 20%, rgba(69, 196, 176, 0.12), transparent 30rem),
        radial-gradient(circle at 10% 80%, rgba(30, 60, 120, 0.2), transparent 25rem),
        #0c121a;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.8);
}

.final-cta__shell::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: clamp(4rem, 16vw, 10rem);
    height: 2px;
    background: var(--color-accent);
    content: "";
}

.final-cta h2,
.final-cta__shell > p {
    max-width: 42rem;
}

.final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-8);
}

.site-footer {
    border-block-start: 1px solid var(--color-border);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-16);
}

.site-footer__brand {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.site-footer__statement {
    max-width: 29rem;
    margin-block: var(--space-3) 0;
}

.site-footer__links {
    display: grid;
    gap: var(--space-1);
}

.site-footer__heading {
    margin-block-end: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer__links a {
    display: inline-flex;
    width: 100%;
    padding-block: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    transition: color 250ms var(--ease-standard), transform 250ms var(--ease-standard);
}

.site-footer__links a:hover {
    color: var(--color-accent);
    transform: translateX(4px);
}

.site-footer__legal {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    padding-block: var(--space-4);
    font-size: var(--text-sm);
}

.site-footer__legal p {
    margin: 0;
    color: var(--color-text-muted);
}

@media (min-width: 24.375rem) {
    :root {
        --gutter-page: 1.25rem;
    }
}

@media (min-width: 48rem) {
    :root {
        --gutter-page: 2rem;
    }

    .problems__layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-16);
        align-items: start;
    }

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

    .capability-group__list {
        column-count: 2;
        column-gap: var(--space-5);
    }

    .capability-group__links,
    .final-cta__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .capability-group__links {
        gap: var(--space-6);
    }

    .supporting-capability {
        grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.5fr);
        align-items: start;
    }

    .supporting-capability .text-link {
        grid-column: 2;
    }

    .build-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-8);
        border-block-start: 0;
    }

    .outcome-grid,
    .concerns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .outcome-card:nth-child(5),
    .whatsapp-callout {
        grid-column: 1 / -1;
    }

    .outcome-card:nth-child(5) .outcome-card__body p {
        max-width: 44rem;
    }

    .build-list__item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        align-content: start;
        padding-block: var(--space-6) 0;
        border-block-start: 1px solid var(--color-border-strong);
        border-block-end: 0;
    }

    .build-list__item > .text-link {
        grid-column: 2;
        justify-self: start;
        text-align: start;
    }

    .why-softanalytics__layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
        gap: var(--space-16);
        align-items: start;
    }

    .combination-field {
        grid-column: 1 / -1;
    }

    .combination-field ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4) var(--space-8);
    }

    .process-path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-8);
    }

    .process-path::before {
        display: none;
    }

    .process-path__step,
    .process-path__step:last-child {
        padding: 4rem 0 0;
        border-block-start: 1px solid var(--color-border-strong);
    }

    .process-path__marker {
        inset-block-start: -1.35rem;
    }

    .final-cta__actions .button {
        width: auto;
    }

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

    .hero__actions .button {
        width: auto;
    }

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

    .site-footer__brand-block,
    .site-footer__services {
        grid-column: 1 / -1;
    }

}

@media (min-width: 64rem) {
    :root {
        --gutter-page: 2.5rem;
        --text-body: 1.0625rem;
        --text-lead: 1.25rem;
    }

    .section-intro h2,
    .why-softanalytics h2,
    .final-cta h2 {
        font-size: clamp(2.75rem, 4.4vw, 4.5rem);
    }

    .problems__layout {
        grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr);
        gap: clamp(var(--space-12), 6vw, var(--space-20));
    }

    .problems__intro {
        position: sticky;
        inset-block-start: 7rem;
    }

    .pain-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .outcome-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "one two"
            "three two"
            "five four"
            "whatsapp whatsapp";
        gap: var(--space-6);
    }

    .outcome-card:nth-child(1) {
        grid-area: one;
    }

    .outcome-card:nth-child(2) {
        grid-area: two;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .outcome-card:nth-child(2) .outcome-card__body {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .outcome-card:nth-child(2) .outcome-visibility {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
        margin-block-start: auto;
        padding-block-start: var(--space-5);
    }

    .outcome-card:nth-child(2) .outcome-visibility__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding-block: 0;
    }

    .outcome-card:nth-child(2) .outcome-visibility__label {
        font-size: 0.6875rem;
    }

    .outcome-card:nth-child(2) .outcome-visibility__value {
        font-size: 0.875rem;
    }

    .outcome-card:nth-child(3) {
        grid-area: three;
    }

    .outcome-card:nth-child(4) {
        grid-area: four;
    }

    .outcome-card:nth-child(5) {
        grid-area: five;
        grid-column: auto;
    }

    .outcome-card:nth-child(5) .outcome-card__body p {
        max-width: none;
    }

    .whatsapp-callout {
        grid-area: whatsapp;
    }

    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }

    .supporting-capability-panel {
        grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.4fr) auto;
        gap: var(--space-8);
        align-items: center;
    }

    .concerns-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .concern-assistant-card .button {
        margin-block-start: var(--space-2);
        align-self: flex-start;
    }

    .work-preview-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .work-preview-card:nth-child(1),
    .work-preview-card:nth-child(2) {
        grid-column: span 3;
    }

    .work-preview-card:nth-child(3),
    .work-preview-card:nth-child(4),
    .work-preview-card:nth-child(5) {
        grid-column: span 2;
    }

    .final-cta__actions {
        flex-direction: row;
        align-items: center;
    }

    .final-cta__actions .button {
        width: auto;
    }

    .site-header__inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-6);
        align-items: center;
        min-height: 5rem;
        padding-block: var(--space-2);
    }

    .nav-toggle {
        display: none !important;
    }

    .primary-nav[hidden] {
        display: block !important;
    }

    .js .primary-nav {
        display: block;
    }

    .primary-nav {
        grid-column: auto;
        max-height: none;
        padding-block-start: 0;
        overflow: visible;
        border-block-start: 0;
    }

    .primary-nav__list {
        grid-template-columns: repeat(6, auto);
        justify-content: end;
        align-items: center;
        gap: var(--space-1);
    }

    .primary-nav__link {
        width: auto;
        padding-inline: var(--space-3);
    }

    .primary-nav__solutions {
        position: relative;
    }

    .solutions-nav {
        position: absolute;
        inset-block-start: calc(100% + var(--space-2));
        inset-inline-start: 0;
        width: 32rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface-1);
        box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    }

    .solutions-nav a {
        padding-inline: var(--space-3);
    }

    .no-js .site-header {
        position: static;
    }

    .no-js .site-header__inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .no-js .primary-nav {
        grid-column: 1 / -1;
    }

    .no-js .primary-nav__list {
        grid-template-columns: repeat(5, auto);
        justify-content: start;
        align-items: start;
    }

    .no-js .primary-nav__solutions {
        grid-column: 1 / -1;
        width: min(100%, 38rem);
    }

    .no-js .solutions-nav {
        position: static;
        width: 100%;
    }

    .hero__inner {
        padding-block: clamp(var(--space-24), 10vw, var(--space-32));
    }

    .hero__stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__content {
        position: relative;
        z-index: 1;
        max-width: 59rem;
    }

    .site-footer__inner {
        grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
        gap: var(--space-8);
    }

    .site-footer__brand-block,
    .site-footer__services {
        grid-column: auto;
    }

}

/* Phase 11 — instant estimate scoping tool experience */
.estimate-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    padding-block-end: clamp(var(--space-10), 6vw, var(--space-16));
    border-block-end: 1px solid var(--color-border);
}

.estimate-hero__container {
    max-width: 48rem;
}

.estimate-hero h1 {
    margin-block: var(--space-3) var(--space-4);
    font-size: clamp(2.35rem, 5vw, 3.85rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--color-text-primary);
}

.estimate-hero__lead {
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.estimate-section {
    position: relative;
    padding-block-start: clamp(var(--space-10), 6vw, var(--space-16));
    padding-block-end: clamp(3rem, 5vw, 3.75rem);
    background: var(--color-bg-page);
}

@media (min-width: 48rem) {
    .estimate-section {
        padding-block-end: clamp(4.25rem, 6vw, 5rem);
    }
}

@media (min-width: 64rem) {
    .estimate-section {
        padding-block-end: clamp(5.5rem, 7vw, 6.75rem);
    }
}

.estimate-container {
    max-width: 52rem;
    margin-inline: auto;
}

.estimate-container--wide {
    max-width: var(--container-content);
}

.estimate-progress-bar {
    margin-block-end: clamp(var(--space-8), 5vw, var(--space-12));
}

.estimate-progress-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.estimate-progress-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block-end: var(--space-3);
    border-block-end: 2px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.estimate-progress-item.is-active {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.estimate-progress-item.is-complete {
    border-color: rgba(69, 196, 176, 0.4);
    color: var(--color-text-secondary);
}

.estimate-progress-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}

.estimate-progress-item.is-active .estimate-progress-item__num {
    background: var(--color-accent);
    color: #070a0f;
}

.estimate-progress-item.is-complete .estimate-progress-item__num {
    background: rgba(69, 196, 176, 0.15);
    color: var(--color-accent);
}

.estimate-progress-item__label {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 32rem) {
    .estimate-progress-item__label {
        display: none;
    }
    .estimate-progress-item {
        justify-content: center;
    }
}

.estimate-step-header {
    margin-block-end: var(--space-8);
}

.estimate-step-header h2 {
    margin-block: var(--space-2) var(--space-3);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    letter-spacing: -0.025em;
    color: var(--color-text-primary);
}

.estimate-step-header__lead {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.estimate-card {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: #0b0f17;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.estimate-card__ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.06), transparent 25rem);
    pointer-events: none;
}

.choice-grid {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 36rem) {
    .choice-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.choice-option {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.choice-option:hover {
    border-color: rgba(69, 196, 176, 0.35);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary);
}

.choice-option:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(69, 196, 176, 0.06);
    color: var(--color-text-primary);
}

.choice-option input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-accent);
    cursor: pointer;
    margin: 0;
}

.choice-option__content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.choice-option__title {
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

.choice-option__subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.choice-option__text {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.pricing-question {
    padding: 0;
    border: 0;
    margin: 0 0 var(--space-8);
}

.pricing-question legend,
.form-field.estimate-service-field > label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    color: var(--color-text-primary);
    font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: -0.015em;
}

.pricing-question__text,
.form-field.estimate-service-field > label .pricing-question__text {
    font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-text-primary) !important;
    letter-spacing: -0.015em;
}

.form-field.estimate-service-field > label .pricing-question__index {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
    font-weight: var(--weight-semibold) !important;
    color: var(--color-accent) !important;
}

.pricing-question__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.25);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

.estimate-questions-stack .pricing-question + .pricing-question {
    padding-block-start: var(--space-6);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.estimate-service-field {
    margin-block-start: var(--space-6);
}

.estimate-service-field select#capability-group {
    width: 100%;
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-4);
    background: #080c12;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.estimate-service-field select#capability-group:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(69, 196, 176, 0.2);
}

.estimate-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.estimate-result {
    display: grid;
    gap: var(--space-5);
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    background: #0b0f17;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.estimate-result::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(69, 196, 176, 0.08), transparent 30rem);
    pointer-events: none;
    content: "";
}

.estimate-result__badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.estimate-result__type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(69, 196, 176, 0.1);
    border: 1px solid rgba(69, 196, 176, 0.3);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.estimate-result__headline {
    margin: 0;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.estimate-result__price {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-family: var(--font-mono);
}

.estimate-result__explanation {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.estimate-result__factors {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.estimate-result__factors h4 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

.estimate-result__factors-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.estimate-result__factors-list li {
    position: relative;
    padding-inline-start: 1.25rem;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.estimate-result__factors-list li::before {
    content: "•";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-accent);
}

.estimate-result__notices {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-2);
}

.estimate-result__notice,
.estimate-result__disclaimer {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}

.estimate-followup {
    display: grid;
    gap: clamp(var(--space-8), 6vw, var(--space-12));
    margin-block-start: clamp(var(--space-10), 7vw, var(--space-16));
    padding-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    border-block-start: 1px solid var(--color-border);
}

@media (min-width: 58rem) {
    .estimate-followup {
        grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
        gap: clamp(var(--space-8), 6vw, var(--space-16));
        align-items: start;
    }

    .estimate-followup__intro {
        position: sticky;
        top: 6rem;
    }
}

.estimate-followup__intro h3 {
    margin-block: var(--space-2) var(--space-3);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.estimate-followup__copy {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-6);
}

.estimate-bridge {
    margin-block-start: var(--space-6);
}

.estimate-bridge__prompt {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.estimate-card .enquiry-form {
    max-width: 100%;
}

.estimate-card .form-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .estimate-card .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--space-6);
        column-gap: var(--space-6);
    }

    .estimate-card .form-grid > .form-field {
        display: flex;
        flex-direction: column;
    }

    .estimate-card .form-grid > .form-field > label {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-block-end: var(--space-2);
        min-height: 1.5rem;
    }

    .estimate-card .form-grid > .form-field > input {
        margin-top: auto;
    }
}

@supports (grid-template-rows: subgrid) {
    @media (min-width: 48rem) {
        .estimate-card .form-grid {
            grid-template-rows: auto auto auto auto;
        }

        .estimate-card .form-grid > .form-field {
            grid-row: span 2;
            display: grid;
            grid-template-rows: subgrid;
            gap: var(--space-2);
        }

        .estimate-card .form-grid > .form-field > label {
            min-height: 0;
            margin-block-end: 0;
        }

        .estimate-card .form-grid > .form-field > input {
            margin-top: 0;
        }
    }
}

.estimate-card .form-consent {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--space-3);
    align-items: start;
}

.estimate-card .form-consent input {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-top: 0.15rem;
    cursor: pointer;
    accent-color: var(--color-accent);
}

.estimate-card .form-consent label {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.estimate-card .form-consent label a {
    color: var(--color-accent);
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.estimate-card .form-consent label a:hover {
    color: #5fe0cb;
}

.estimate-card .estimate-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-2);
    padding-block-start: 0;
    border-block-start: 0;
}

.estimate-restart-form {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.estimate-restart-form .button {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
}

.estimate-restart-form .button:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

.estimate-card--receipt {
    text-align: center;
    padding: clamp(var(--space-8), 6vw, var(--space-14));
}

.estimate-receipt h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}

.estimate-receipt p {
    margin: 0 0 var(--space-6);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.estimate-receipt__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Phase 11 — Ask SoftAnalytics conversion assistant */
.assistant-launcher {
    position: fixed;
    z-index: 180;
    inset-inline-end: var(--space-4);
    inset-block-end: var(--space-4);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-5);
    border: 1px solid rgb(var(--color-accent-rgb) / .65);
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 .75rem 2.5rem rgb(0 0 0 / .28);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.assistant-dialog {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    align-items: end;
    background: rgb(3 5 7 / .72);
}

.assistant-dialog__panel {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-height: min(92dvh, 52rem);
    overflow: hidden;
    border-block-start: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-bg-page);
    box-shadow: 0 -1.5rem 4rem rgb(0 0 0 / .35);
}

.assistant-dialog__header {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.assistant-dialog__header strong { color: var(--color-text-primary); }
.assistant-close { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text-primary); cursor: pointer; }
.assistant-dialog__content { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6) var(--space-5) var(--space-10); }
.assistant-dialog__content h3 { margin-block-end: var(--space-3); font-size: clamp(1.45rem, 5vw, 2rem); }
.assistant-choice-list,.assistant-service-links,.assistant-form { display: grid; gap: var(--space-4); }
.assistant-choice { min-height: 3.25rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-1); color: var(--color-text-primary); text-align: start; cursor: pointer; }
.assistant-choice:hover { border-color: var(--color-accent); }
.assistant-service-links a { display: flex; min-height: 2.75rem; align-items: center; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); color: var(--color-text-secondary); text-decoration: none; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: var(--space-3); }
.assistant-back { min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.assistant-form label { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.assistant-form input:not([type="checkbox"]),.assistant-form select,.assistant-form textarea { width: 100%; min-height: 2.75rem; }
.assistant-consent { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); gap: var(--space-3); align-items: start; font-weight: var(--weight-regular) !important; }
.assistant-consent input { width: 1.125rem; height: 1.125rem; margin-block-start: .25rem; accent-color: var(--color-accent); }
.assistant-result { display: grid; gap: var(--space-4); }
.assistant-result > * { margin: 0; }
.assistant-result__headline { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.assistant-result__price { color: var(--color-text-primary); font-size: clamp(2rem, 9vw, 3.25rem); font-weight: var(--weight-semibold); letter-spacing: -.04em; line-height: 1; overflow-wrap: anywhere; }
.assistant-result ul { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-5); color: var(--color-text-secondary); }
.assistant-result__notice,.assistant-note { padding: var(--space-4); border-inline-start: 2px solid var(--color-accent); background: var(--color-surface-1); color: var(--color-text-secondary); }
body.assistant-open { overflow: hidden; }

@media (min-width: 48rem) {
    .assistant-dialog { align-items: end; justify-items: end; padding: var(--space-5); }
    .assistant-dialog__panel { width: min(26.25rem, calc(100vw - 2.5rem)); max-height: min(80dvh, 46rem); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); }
    .assistant-launcher { inset-inline-end: var(--space-6); inset-block-end: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-launcher,.assistant-dialog,.assistant-dialog__panel { scroll-behavior: auto; transition: none; animation: none; }
}

/* Phase 8 supporting pages: elevated editorial foundation with authentic technical authority. */
.support-page { overflow: clip; }

.support-hero {
    padding-block-start: clamp(2.5rem, 5vw, 4.25rem);
    padding-block-end: clamp(2.5rem, 5vw, 4.5rem);
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 60% 40% at 85% 10%, rgb(var(--color-accent-rgb) / 0.08), transparent 32rem),
        var(--color-bg-page);
}

.support-hero--compact {
    padding-block-start: clamp(2rem, 4vw, 3.5rem);
    padding-block-end: clamp(2rem, 4vw, 3.75rem);
}

.support-hero__layout {
    display: grid;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    align-items: start;
}

.support-hero__content {
    max-width: 48rem;
}

.support-hero h1 {
    max-width: 18ch;
    margin: var(--space-3) 0 0;
    font-size: clamp(2.35rem, 6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.support-hero--compact h1 {
    max-width: 20ch;
    font-size: clamp(2.2rem, 5.5vw, 3.75rem);
}

.support-hero__summary, .measure-wide {
    max-width: 48rem;
}

.support-hero__lead {
    margin-block: var(--space-5) 0;
    color: var(--color-text-secondary);
    font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
    line-height: var(--leading-relaxed);
}

.support-hero__summary .support-hero__lead {
    margin-block-start: 0;
}

.support-section {
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
}

.support-section--tonal {
    background: var(--color-bg-deep);
}

.support-section h2, .support-cta h2 {
    margin-block: var(--space-3) 0;
    font-size: clamp(1.8rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.editorial-split, .relationship-layout, .topic-layout, .contact-route, .outcome-band {
    display: grid;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.editorial-split__heading, .topic-layout > div, .contact-route > div, .outcome-band > div {
    max-width: 36rem;
}

.principle-list, .criteria-list, .relationship-list, .topic-index, .scope-question-list, .qualification-groups ul, .policy-nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.principle-list {
    counter-reset: principle;
    border-block-start: 1px solid var(--color-border-strong);
}

.principle-list li {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.principle-list li::before {
    counter-increment: principle;
    content: "0" counter(principle);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
}

.principle-list strong, .scope-question-list strong {
    color: var(--color-text-primary);
}

.principle-list span, .scope-question-list span {
    color: var(--color-text-secondary);
}

.relationship-list {
    border-block-start: 1px solid var(--color-border-strong);
}

.relationship-list li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.relationship-list span {
    color: var(--color-accent);
}

.support-cta {
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
    background: linear-gradient(115deg, rgb(var(--color-accent-rgb) / 0.08), transparent 45%), var(--color-surface-1);
}

.support-cta__layout {
    display: grid;
    gap: var(--space-8);
    align-items: end;
}

.support-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.criteria-list {
    border-block-start: 1px solid var(--color-border-strong);
}

.criteria-list li {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.criteria-list li::before {
    position: absolute;
    inset: 1.45rem auto auto 0;
    width: 0.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.topic-index {
    counter-reset: topic;
    border-block-start: 1px solid var(--color-border-strong);
}

.topic-index li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.topic-index span {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.support-note {
    padding-block: var(--space-10);
    background: var(--color-bg-deep);
}

.support-note__inner {
    display: grid;
    gap: var(--space-3);
    max-width: 58rem;
}

.support-note__inner strong {
    color: var(--color-text-primary);
}

.contact-route__status, .policy-status, .owner-input, .estimate-caveat {
    border-inline-start: 2px solid var(--color-accent);
    background: rgb(var(--color-accent-rgb) / 0.055);
}

.contact-route__status {
    padding: clamp(var(--space-5), 4vw, var(--space-8));
}

.contact-route__status strong {
    color: var(--color-text-primary);
}

.contact-email {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    overflow-wrap: anywhere;
    color: var(--color-accent);
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-email:hover,
.contact-email:focus-visible {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-route__status p {
    margin-block-end: 0;
}

.founder-contact {
    display: grid;
    gap: var(--space-5);
    align-items: end;
}

.founder-contact h2 {
    margin-block: var(--space-2) 0;
    color: var(--color-text-primary);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
}

.founder-contact p {
    margin-block: 0 var(--space-1);
}

.about-location {
    margin-block-start: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.founder-story__layout {
    display: grid;
    gap: clamp(var(--space-8), 7vw, var(--space-20));
}

.founder-story__layout header {
    max-width: 42rem;
}

.founder-story__body {
    max-width: 48rem;
}

.founder-story__body strong {
    color: var(--color-text-primary);
}

.founder-contact-inline {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-8);
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
}

.founder-contact-inline > span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* =========================================================
   ABOUT PAGE — EDITORIAL FOUNDER-LED EXPERIENCE
   ========================================================= */

/* 1. Hero & Portrait Treatment */
.about-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    padding-block-end: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.about-hero__layout {
    display: grid;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    align-items: center;
}

.about-hero__content {
    max-width: 44rem;
}

.about-hero__content h1 {
    margin-block: var(--space-3) var(--space-5);
    font-size: clamp(2.35rem, 5vw, 3.85rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--color-text-primary);
}

.about-hero__lead {
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.about-hero__visual {
    display: flex;
    justify-content: flex-start;
}

.about-portrait {
    margin: 0;
    width: 100%;
    max-width: 20rem;
    position: relative;
}

.about-portrait__frame {
    position: relative;
    padding: var(--space-2);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.about-portrait__frame::before {
    position: absolute;
    inset: -15%;
    background: radial-gradient(circle at 60% 40%, rgba(69, 196, 176, 0.1), transparent 65%);
    z-index: -1;
    pointer-events: none;
    content: "";
}

.about-portrait__frame picture {
    display: block;
}

.about-portrait__frame img {
    border-radius: 0.875rem;
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.96);
    display: block;
}

.about-portrait__caption {
    margin-block-start: var(--space-4);
    padding-inline-start: var(--space-2);
}

.about-portrait__caption strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
}

.about-portrait__caption span {
    display: block;
    margin-block-start: 0.2rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}

@media (min-width: 58rem) {
    .about-hero__layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
        align-items: center;
        justify-items: end;
    }
}

/* 2. Founder Section */
.about-founder-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.editorial-split__sub {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin-block-start: var(--space-3);
}

.about-founder__narrative {
    max-width: 44rem;
}

.about-founder__narrative p {
    font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-4);
}

.about-founder__narrative p:last-child {
    margin-block-end: 0;
}

/* 3. Systems-First Philosophy Section */
.about-philosophy-section {
    position: relative;
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(69, 196, 176, 0.04), transparent 70%), #070a10;
    border-block-end: 1px solid var(--color-border);
}

.about-philosophy__intro {
    max-width: 48rem;
    margin-block-end: clamp(var(--space-10), 6vw, var(--space-16));
}

.about-philosophy__intro h2 {
    margin-block: var(--space-3) var(--space-4);
    font-size: clamp(1.85rem, 3.8vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-text-primary);
}

.about-philosophy__lead {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Editorial Progression Sequence Flow */
.philosophy-flow {
    display: grid;
    gap: var(--space-6);
    max-width: 52rem;
}

.philosophy-flow__step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    position: relative;
}

.philosophy-flow__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
}

.philosophy-flow__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.25);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

.philosophy-flow__line {
    width: 1px;
    flex-grow: 1;
    min-height: 2.5rem;
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.25) 0%, rgba(255, 255, 255, 0.06) 100%);
    margin-block-start: var(--space-2);
}

.philosophy-flow__body {
    padding-block-end: var(--space-6);
}

.philosophy-flow__body h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
}

.philosophy-flow__body p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    max-width: 44rem;
}

@media (min-width: 48rem) {
    .philosophy-flow {
        gap: var(--space-8);
    }

    .philosophy-flow__step {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: var(--space-6);
    }
}

/* 4. What Shapes the Work */
.about-perspectives-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.perspectives-list {
    display: grid;
    gap: var(--space-6);
    max-width: 44rem;
}

.perspective-item {
    padding-block-end: var(--space-6);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.perspective-item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.perspective-item__label {
    display: block;
    margin-block-end: 0.35rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.perspective-item h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
}

.perspective-item p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* 5. Engineering Foundation & Reach */
.about-foundation-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.about-foundation__content {
    display: grid;
    gap: var(--space-8);
    max-width: 44rem;
}

.foundation-block h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
}

.foundation-block p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* 6. Closing Trust CTA */
.about-cta-section {
    position: relative;
    padding-block-start: clamp(var(--space-12), 6vw, var(--space-16));
    padding-block-end: clamp(3rem, 5vw, 3.75rem);
    background: var(--color-bg-page);
}

@media (min-width: 48rem) {
    .about-cta-section {
        padding-block-end: clamp(4.25rem, 6vw, 5rem);
    }
}

@media (min-width: 64rem) {
    .about-cta-section {
        padding-block-end: clamp(5.5rem, 7vw, 6.75rem);
    }
}

.about-cta__box {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-14)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background: #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.about-cta__ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(69, 196, 176, 0.08), transparent 30rem);
    pointer-events: none;
}

.about-cta__content {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    margin-inline: auto;
}

.about-cta-section h2,
.about-cta__content h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}

.about-cta-section p,
.about-cta__content p {
    margin: 0 0 var(--space-6);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.about-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .about-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .about-cta__actions .button {
        width: auto;
    }
}

/* =========================================================
   CONTACT PAGE — EDITORIAL LOW-FRICTION EXPERIENCE
   ========================================================= */

/* 1. Compact Hero */
.contact-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    padding-block-end: clamp(var(--space-10), 6vw, var(--space-16));
    border-block-end: 1px solid var(--color-border);
}

.contact-hero__container {
    max-width: 44rem;
}

.contact-hero h1 {
    margin-block: var(--space-3) var(--space-4);
    font-size: clamp(2.35rem, 5vw, 3.85rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--color-text-primary);
}

.contact-hero__lead {
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* 2. Main Contact Experience */
.contact-section {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.contact-layout {
    display: grid;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
}

@media (min-width: 58rem) {
    .contact-layout {
        grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
    }

    .contact-context {
        position: sticky;
        top: 6rem;
    }
}

.contact-context__header {
    margin-block-end: var(--space-8);
}

.contact-context__header h2 {
    margin-block: var(--space-2) var(--space-3);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    letter-spacing: -0.025em;
    color: var(--color-text-primary);
}

.contact-context__copy {
    color: var(--color-text-secondary);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.contact-direct-card {
    margin-block-end: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-inline-start: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.contact-direct-card__label {
    display: block;
    margin-block-end: var(--space-1);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-direct-card__link {
    color: var(--color-text-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-direct-card__link:hover {
    color: var(--color-accent);
}

.contact-bridge {
    margin-block-start: var(--space-8);
}

.contact-bridge__prompt {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* Contact Form Card */
.contact-card {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: #0b0f17;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.contact-card__ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.06), transparent 25rem);
    pointer-events: none;
}

.contact-form__submit {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-block-start: var(--space-2);
}

@media (min-width: 36rem) {
    .contact-form__submit {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.contact-trust-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* 3. What Happens Next Sequence */
.contact-process-section {
    position: relative;
    padding-block-start: clamp(var(--space-12), 6vw, var(--space-16));
    padding-block-end: clamp(3rem, 5vw, 3.75rem);
    background: var(--color-bg-page);
}

@media (min-width: 48rem) {
    .contact-process-section {
        padding-block-end: clamp(4.25rem, 6vw, 5rem);
    }
}

@media (min-width: 64rem) {
    .contact-process-section {
        padding-block-end: clamp(5.5rem, 7vw, 6.75rem);
    }
}

.contact-process-flow {
    display: grid;
    gap: var(--space-6);
    max-width: 44rem;
}

.process-flow-item {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block-end: var(--space-6);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.process-flow-item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.process-flow-item__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.25);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

.process-flow-item__body h3 {
    margin: 0 0 var(--space-1);
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
}

.process-flow-item__body p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.estimate-caveat {
    max-width: 42rem;
    margin-block-start: var(--space-6);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
}

.qualification-groups {
    display: grid;
    gap: 0;
    margin-block-start: var(--space-10);
    border-block-start: 1px solid var(--color-border-strong);
}

.qualification-groups section {
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.qualification-groups h3 {
    margin: 0 0 var(--space-4);
}

.qualification-groups ul {
    display: grid;
    gap: var(--space-2);
    color: var(--color-text-secondary);
}

.consultation-row {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-8);
    border-block-end: 1px solid var(--color-border-strong);
}

.consultation-row h3 {
    margin: 0;
    color: var(--color-text-secondary);
}

.scope-question-list {
    counter-reset: scope;
    border-block-start: 1px solid var(--color-border-strong);
}

.scope-question-list li {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-end: 1px solid var(--color-border);
}

.scope-question-list li::before {
    counter-increment: scope;
    content: "0" counter(scope);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.policy-status {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-8);
    padding: var(--space-4) var(--space-5);
}

.policy-status strong {
    color: var(--color-text-primary);
}

.policy-layout {
    display: grid;
    gap: var(--space-10);
    padding-block: clamp(var(--space-10), 7vw, var(--space-20));
}

.policy-nav {
    align-self: start;
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
}

.policy-nav strong {
    color: var(--color-text-primary);
}

.policy-nav ol {
    display: grid;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
}

.policy-nav a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.policy-nav a:hover {
    color: var(--color-accent);
}

.policy-content {
    max-width: 48rem;
}

.policy-content section {
    scroll-margin-top: 7rem;
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.policy-content section:first-child {
    padding-block-start: 0;
}

.policy-content h2 {
    margin-block-start: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.owner-input {
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-secondary);
}

/* Work: evidence-led real project records with architectural depth */
.work-page {
    padding-block: 0;
}

.work-hero {
    padding-block: clamp(var(--space-12), 8vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 65% 45% at 15% 15%, rgb(var(--color-accent-rgb) / 0.08), transparent 45rem),
        var(--color-bg-page);
}

.work-hero__container {
    max-width: var(--container-content);
}

.work-hero__content {
    max-width: 52rem;
}

.work-hero h1 {
    margin-block: var(--space-3) var(--space-4);
    font-size: clamp(2.4rem, 5.5vw, 3.85rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.work-hero__lead {
    max-width: 48rem;
    color: var(--color-text-secondary);
    font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-6);
}

.work-hero__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.work-hero__meta-dot {
    color: var(--color-accent);
}

.work-quick-nav {
    position: sticky;
    inset-block-start: var(--header-height, 4.75rem);
    z-index: 20;
    background: rgba(9, 11, 14, 0.94);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-3);
}

.work-quick-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    font-size: var(--text-xs);
}

.work-quick-nav__label {
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.work-quick-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-quick-nav__list a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
    min-height: 2rem;
}

.work-quick-nav__list a:hover,
.work-quick-nav__list a:focus-visible {
    color: var(--color-accent);
    background: var(--color-surface-2);
}

.work-quick-nav__list a span {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.work-showcase {
    display: grid;
    gap: clamp(var(--space-10), 6vw, var(--space-16));
    padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}

/* Work: Curated Engineering Portfolio & Differentiated Case Studies */
.work-entry {
    scroll-margin-top: 8rem;
    position: relative;
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.work-entry:hover {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Flagship Archetype (Fuel Pump ERP) */
.work-entry--flagship {
    border-color: rgba(69, 196, 176, 0.35);
    background: linear-gradient(165deg, rgba(69, 196, 176, 0.05) 0%, rgba(16, 20, 26, 0.95) 30%, var(--color-surface-1) 100%);
    box-shadow: 0 16px 48px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(69, 196, 176, 0.25);
}

.work-entry--flagship:hover {
    border-color: rgba(69, 196, 176, 0.55);
}

/* Spatial Archetype (Location Proximity GIS) */
.work-entry--spatial {
    border-color: rgba(88, 166, 255, 0.3);
    background: linear-gradient(165deg, rgba(88, 166, 255, 0.04) 0%, var(--color-surface-1) 35%);
}

.work-entry--spatial:hover {
    border-color: rgba(88, 166, 255, 0.5);
}

/* Workflow Archetype (Fuel Delivery Management) */
.work-entry--workflow {
    border-color: rgba(232, 183, 96, 0.25);
    background: linear-gradient(165deg, rgba(232, 183, 96, 0.03) 0%, var(--color-surface-1) 35%);
}

.work-entry--workflow:hover {
    border-color: rgba(232, 183, 96, 0.45);
}

/* Analytics Archetype (Call Center Trends Dashboard) */
.work-entry--analytics {
    border-color: rgba(105, 208, 154, 0.3);
    background: linear-gradient(165deg, rgba(105, 208, 154, 0.04) 0%, var(--color-surface-1) 35%);
}

.work-entry--analytics:hover {
    border-color: rgba(105, 208, 154, 0.5);
}

/* Editorial Archetype (Institutional Website) */
.work-entry--editorial {
    border-color: rgba(180, 190, 205, 0.2);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.02) 0%, var(--color-surface-1) 35%);
}

.work-entry__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
}

.work-entry__tags {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.work-entry__tag-dot {
    color: var(--color-border-strong);
}

.work-entry__privacy {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.work-entry__title-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}

.work-entry__number {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    flex-shrink: 0;
}

.work-entry h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.work-entry__summary {
    max-width: 52rem;
    color: var(--color-text-secondary);
    font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
    line-height: var(--leading-relaxed);
    margin-block: var(--space-3) var(--space-6);
}

/* Two-column case study split */
.work-case-split {
    display: grid;
    gap: clamp(var(--space-6), 4vw, var(--space-10));
    margin-block: var(--space-6);
    padding-block: var(--space-6);
    border-block: 1px solid var(--color-border);
}

@media (min-width: 64rem) {
    .work-case-split {
        grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
        align-items: start;
    }
}

.work-narrative h3 {
    margin-block: 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-narrative p {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* Architecture Visual Schematics */
.work-schematic {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.work-schematic__hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-2);
    border-block-end: 1px solid var(--color-border);
}

.work-schematic__layers {
    display: grid;
    gap: var(--space-3);
}

.work-layer {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

.work-layer:hover {
    border-color: rgba(69, 196, 176, 0.4);
}

.work-layer__title {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-block-end: 0.2rem;
}

.work-layer__desc {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Spatial Telemetry Bar */
.work-hud-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-4);
    margin-block-end: var(--space-4);
    background: rgba(88, 166, 255, 0.06);
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #88c0d0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 4-Stage Connected Workflow Pipeline */
.work-pipeline {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

@media (min-width: 48rem) {
    .work-pipeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.work-pipeline__step {
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    position: relative;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.work-pipeline__step:hover {
    border-color: rgba(232, 183, 96, 0.4);
    transform: translateY(-2px);
}

.work-pipeline__num {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #e8b760;
    margin-block-end: 0.25rem;
    font-weight: var(--weight-bold);
}

.work-pipeline__step h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.work-pipeline__step p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* KPI Telemetry Grid for Analytics */
.work-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-block-end: var(--space-5);
}

@media (min-width: 48rem) {
    .work-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.work-kpi-card {
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: left;
    transition: border-color var(--transition-fast);
}

.work-kpi-card:hover {
    border-color: rgba(105, 208, 154, 0.4);
}

.work-kpi-card__val {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: var(--weight-bold);
    color: #69d09a;
    line-height: 1;
    margin-block-end: 0.35rem;
}

.work-kpi-card__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
}

/* IA Hierarchy Tree Visual */
.work-ia-tree {
    display: grid;
    gap: var(--space-2);
    margin-block: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.work-ia-node {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.4rem 0.6rem;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.work-ia-node__level {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* Outcome Bar */
.work-entry__outcome {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
}

.work-entry__outcome-text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    max-width: 44rem;
}

.work-entry__outcome-text strong {
    color: var(--color-text-primary);
}

.work-entry__cta-btn {
    align-self: center;
}

.work-entry__cta-btn {
    margin-block-start: 0;
    flex-shrink: 0;
}

@media (min-width: 54rem) {
    .work-entry__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (min-width: 48rem) {
    .support-hero__layout, .editorial-split, .relationship-layout, .topic-layout, .contact-route, .outcome-band, .support-cta__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
    .qualification-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qualification-groups section:nth-child(odd) { padding-inline-end: var(--space-8); border-inline-end: 1px solid var(--color-border); }
    .qualification-groups section:nth-child(even) { padding-inline-start: var(--space-8); }
    .consultation-row { grid-template-columns: minmax(12rem,.75fr) minmax(0,1fr); }
    .consultation-row .text-link { grid-column: 2; justify-self: start; }
    .policy-layout { grid-template-columns: minmax(12rem, .35fr) minmax(0, 1fr); align-items: start; }
    .policy-nav { position: sticky; inset-block-start: 6.5rem; }
    .founder-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .founder-story__layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .about-capabilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-capabilities__grid section { padding-inline: var(--space-8); }
    .about-capabilities__grid section:nth-child(odd) { padding-inline-start: 0; border-inline-end: 1px solid var(--color-border); }
    .about-capabilities__grid section:nth-child(even) { padding-inline-end: 0; }
    .contact-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-option { padding-inline: var(--space-8); }
    .contact-option:first-child { padding-inline-start: 0; border-inline-end: 1px solid var(--color-border); }
    .contact-option:last-child { padding-inline-end: 0; }
}

@media (min-width: 64rem) {
    .support-hero__layout { grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr); align-items: start; }
    .about-hero__layout { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: start; justify-items: end; }
    .qualification-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .qualification-groups section, .qualification-groups section:nth-child(odd), .qualification-groups section:nth-child(even) { padding-inline: var(--space-6); border-inline-end: 1px solid var(--color-border); }
    .qualification-groups section:first-child { padding-inline-start: 0; }
    .qualification-groups section:last-child { padding-inline-end: 0; border-inline-end: 0; }
}

@media (min-width: 80rem) {
    :root {
        --gutter-page: 3rem;
    }

    .build-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-12) var(--space-8);
    }

    .build-list__item {
        min-height: 17rem;
    }

}

@media (min-width: 90rem) {
    :root {
        --gutter-page: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* Phase 10 shared enquiry surfaces */
.form-layout { display: grid; gap: var(--space-10); }
.form-layout__intro { max-width: 34rem; }
.form-direct-route {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-inline-start: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
}
.form-direct-route strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}
.enquiry-form { max-width: 52rem; display: grid; gap: var(--space-8); }
.form-grid { display: grid; gap: var(--space-6); }
.form-field { display: grid; gap: var(--space-2); min-width: 0; }
.form-field__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.char-counter { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mono); }
.form-field label, .form-consent label { color: var(--color-text-primary); font-weight: 600; }
.form-field label span { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 2.75rem; padding: .75rem 1rem; color: var(--color-text-primary);
  background: #0d1015; border: 1px solid #202631; border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  font: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-field input:hover, .form-field select:hover, .form-field textarea:hover {
  border-color: var(--color-border-strong);
  background: #11151c;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 20px rgba(69, 196, 176, 0.16), inset 0 1px 2px rgba(0, 0, 0, 0.2);
  outline: none;
  background: #11151c;
}
.form-field textarea { resize: vertical; line-height: 1.55; }
.form-field [aria-invalid="true"] { border-color: var(--color-error); }
.form-help { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.form-error { margin: 0; color: #ffaaa5; font-size: var(--text-sm); }
.form-consent { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-3); align-items: start; }
.form-consent input { inline-size: 1.25rem; block-size: 1.25rem; margin-top: .15rem; accent-color: var(--color-accent); }
.form-consent .form-error { grid-column: 2; }
.form-honeypot { position: absolute !important; inset-inline-start: -10000px !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; }
.form-status { margin-bottom: var(--space-8); padding: var(--space-6); border-left: 3px solid; background: var(--color-surface-1); }
.form-status h2 { font-size: 1.5rem; }
.form-status--success { border-color: var(--color-success); }
.form-status--error { border-color: var(--color-error); }
.form-step { margin: 0; padding: var(--space-8) 0 0; border: 0; border-top: 1px solid var(--color-border); display: grid; gap: var(--space-6); }
.form-step legend { padding: 0; color: var(--color-text-primary); font-size: 1.5rem; font-weight: 600; }
.form-step legend span { display: block; margin-bottom: var(--space-2); color: var(--color-accent); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); }
.estimate-progress { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }
.estimate-progress span[aria-current="step"] { color: var(--color-accent); }
[hidden] { display: none !important; }
.enquiry-form .button { justify-self: start; }

@media (min-width: 48rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .form-layout { grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.25fr); align-items: start; }
  .form-layout__intro { position: sticky; top: 7rem; }
}

/* Phase 7: shared specialist-service system with page-specific compositions. */
.service-page {
    overflow: clip;
}

.service-hero {
    position: relative;
    padding-block-start: clamp(2.5rem, 5vw, 4.25rem);
    padding-block-end: clamp(2.5rem, 5vw, 4.5rem);
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 70% 50% at 85% 20%, rgb(var(--color-accent-rgb) / 0.08), transparent 38rem),
        radial-gradient(circle at 15% 85%, rgba(26, 33, 43, 0.4), transparent 28rem),
        var(--color-bg-page);
}

.service-hero::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(69, 196, 176, 0.03), transparent 30rem);
    content: "";
    pointer-events: none;
}

.service-hero__layout,
.service-split,
.service-editorial,
.service-outcomes__layout,
.service-answers__layout,
.service-boundaries__layout,
.service-related__layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(var(--space-10), 7vw, var(--space-20));
}

.service-hero__content {
    max-width: 48rem;
}

.service-hero h1 {
    max-width: 16ch;
    margin-block-end: var(--space-6);
    font-size: var(--text-h1);
    letter-spacing: -0.035em;
}

.service-hero__lead {
    max-width: 43rem;
    margin-block-end: var(--space-8);
    font-size: var(--text-lead);
}

.service-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.service-system {
    position: relative;
    align-self: center;
    max-width: 36rem;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgb(15 19 24 / 0.88);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.service-system__caption {
    margin-block-end: var(--space-6);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-system__map,
.service-problem-list,
.service-process__path,
.service-use-case-list,
.service-outcomes ul,
.service-boundaries ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-system__map {
    display: grid;
    gap: var(--space-3);
}

.service-system__node {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 3.5rem;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-deep);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.service-system__node:hover {
    border-color: var(--color-border-strong);
    transform: translateX(2px);
}

.service-system__node span,
.service-build__index {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.service-system__node:not(:last-child)::after {
    position: absolute;
    inset-block-end: calc(-1 * var(--space-3) - 1px);
    inset-inline-start: 1.75rem;
    width: 1px;
    height: var(--space-3);
    background: rgb(var(--color-accent-rgb) / 0.45);
    content: "";
}

.service-page--mobile .service-system {
    border-radius: 2rem;
}

.service-page--mobile .service-system__node:nth-child(2) {
    margin-inline: var(--space-5);
    border-color: rgb(var(--color-accent-rgb) / 0.38);
}

.service-page--automation .service-system__node,
.service-page--analytics .service-system__node {
    border-inline-start: 2px solid rgb(var(--color-accent-rgb) / 0.55);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.service-page--agents .service-system__node:nth-child(even) {
    margin-inline-start: var(--space-8);
}

.service-page--spatial .service-system {
    background:
        linear-gradient(var(--color-line-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-line-subtle) 1px, transparent 1px),
        var(--color-surface-1);
    background-size: 1.5rem 1.5rem;
}

.service-page--spatial .service-system__node:nth-child(odd) {
    margin-inline-end: var(--space-8);
}

.service-page--spatial .service-system__node:nth-child(even) {
    margin-inline-start: var(--space-8);
}

.service-page--assurance .service-system {
    background: var(--color-bg-deep);
}

.service-page--assurance .service-system__node {
    border-inline-start: 3px solid var(--color-border-strong);
    background: var(--color-surface-1);
}

.service-page--assurance .service-system__node:first-child {
    border-inline-start-color: rgb(var(--color-accent-rgb) / 0.7);
}

.service-section {
    padding-block: clamp(var(--space-16), 9vw, var(--space-32));
    border-block-end: 1px solid var(--color-border);
}

.service-section:nth-of-type(odd) {
    background: var(--color-bg-deep);
}

.service-section__intro {
    max-width: 42rem;
}

.service-section__intro--wide {
    max-width: 54rem;
    margin-block-end: clamp(var(--space-10), 6vw, var(--space-16));
}

.service-section h2,
.service-cta h2 {
    margin-block-end: var(--space-5);
    font-size: clamp(2rem, 5.5vw, 3.75rem);
    letter-spacing: -0.03em;
}

.service-problem-list {
    border-block-start: 1px solid var(--color-border-strong);
}

.service-problem-list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.service-problem-list span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.service-problem-list p,
.service-build p,
.service-process__path p,
.service-use-case-list p,
.service-related p {
    margin: 0;
}

.service-build-grid {
    display: grid;
    gap: var(--space-8);
}

.service-build {
    display: grid;
    align-content: start;
    min-width: 0;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-strong);
}

.service-build h3,
.service-process__path h3,
.service-use-case-list h3,
.service-related h3 {
    margin-block: var(--space-4) var(--space-3);
    font-size: clamp(1.2rem, 3vw, 1.55rem);
    letter-spacing: -0.015em;
}

.service-process {
    overflow: hidden;
}

.service-process__path {
    position: relative;
    display: grid;
}

.service-process__path::before {
    position: absolute;
    inset-block: 1.25rem;
    inset-inline-start: 1.25rem;
    width: 1px;
    background: linear-gradient(var(--color-accent), var(--color-border-strong));
    content: "";
}

.service-process__path li {
    position: relative;
    padding: 0 0 var(--space-10) 4rem;
}

.service-process__path li:last-child {
    padding-block-end: 0;
}

.service-process__marker {
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    width: 2.5rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(var(--color-accent-rgb) / 0.55);
    border-radius: 50%;
    background: var(--color-bg-page);
    color: var(--color-accent);
    font-size: var(--text-sm);
}

.service-use-case-list {
    display: grid;
    gap: 0 var(--space-8);
    border-block-start: 1px solid var(--color-border-strong);
}

.service-use-case-list li {
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.service-use-case-list h3 {
    margin-block-start: 0;
}

.service-outcomes {
    background:
        radial-gradient(circle at 12% 50%, rgb(var(--color-accent-rgb) / 0.08), transparent 26rem),
        var(--color-surface-1) !important;
}

.service-outcomes header {
    max-width: 39rem;
}

.service-outcomes ul,
.service-boundaries ul {
    display: grid;
    gap: var(--space-4);
}

.service-outcomes li,
.service-boundaries li {
    position: relative;
    padding-inline-start: var(--space-6);
    color: var(--color-text-secondary);
}

.service-outcomes li::before,
.service-boundaries li::before {
    position: absolute;
    inset-block-start: 0.65em;
    inset-inline-start: 0;
    width: 0.42rem;
    aspect-ratio: 1;
    border: 1px solid rgb(var(--color-accent-rgb) / 0.7);
    border-radius: 50%;
    content: "";
}

.service-answer-list {
    border-block-start: 1px solid var(--color-border-strong);
}

.service-answer-list details {
    border-block-end: 1px solid var(--color-border);
}

.service-answer-list summary {
    min-height: 3.75rem;
    padding: var(--space-5) var(--space-8) var(--space-5) 0;
    color: var(--color-text-primary);
    cursor: pointer;
    font-weight: var(--weight-semibold);
}

.service-answer-list summary::marker {
    color: var(--color-accent);
}

.service-answer-list details[open] summary {
    color: var(--color-accent);
}

.service-answer-list details p {
    max-width: 45rem;
    padding-block-end: var(--space-6);
}

.service-boundaries {
    background: var(--color-bg-deep) !important;
}

.service-boundaries header {
    max-width: 38rem;
}

.service-related__links {
    display: grid;
    gap: var(--space-8);
}

.service-related__links > div {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-strong);
}

.service-related__links h3 {
    margin-block-start: 0;
}

.service-related__links .text-link {
    margin-block-start: var(--space-4);
}

.service-cta {
    padding-block: clamp(var(--space-16), 10vw, var(--space-32));
    background: var(--color-bg-deep);
}

.service-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 7vw, var(--space-20));
    border: 1px solid rgb(var(--color-accent-rgb) / 0.35);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 15%, rgb(var(--color-accent-rgb) / 0.11), transparent 20rem),
        var(--color-surface-1);
}

.service-cta__panel::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: min(9rem, 35%);
    height: 2px;
    background: var(--color-accent);
    content: "";
}

.service-cta__panel > p {
    max-width: 43rem;
}

.service-cta__panel .service-hero__actions {
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .service-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-hero__layout,
    .service-split,
    .service-editorial,
    .service-outcomes__layout,
    .service-answers__layout,
    .service-boundaries__layout,
    .service-related__layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: start;
    }

    .service-build-grid,
    .service-use-case-list,
    .service-related__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-process__path {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-8);
    }

    .service-process__path::before {
        display: none;
    }

    .service-process__path li,
    .service-process__path li:last-child {
        padding: var(--space-16) 0 0;
        border-block-start: 1px solid var(--color-border-strong);
    }

    .service-process__marker {
        inset-block-start: -1.25rem;
    }
}

@media (min-width: 64rem) {
    .service-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
        align-items: center;
    }

    .service-problems .service-section__intro,
    .service-answers .service-section__intro {
        position: sticky;
        inset-block-start: 7rem;
    }

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

    .service-process__path {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .service-process__path::before {
        inset-block: 1.25rem auto;
        inset-inline: 1.25rem;
        display: block;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, var(--color-accent), var(--color-border-strong));
    }

    .service-process__path li,
    .service-process__path li:last-child {
        padding: var(--space-16) var(--space-6) 0 0;
        border: 0;
    }

    .service-process__path li:not(:first-child) {
        padding-inline-start: var(--space-6);
    }

    .service-process__path li:not(:first-child) .service-process__marker {
        inset-inline-start: var(--space-6);
    }

    .service-process__marker {
        inset-block-start: 0;
    }

    .service-page--agents .service-use-case-list,
    .service-page--spatial .service-use-case-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        transform: translateY(var(--space-8));
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-page--agents .service-use-case-list,
    .service-page--spatial .service-use-case-list {
        transition: none;
    }
}

/* =========================================================
   SOLUTIONS DIRECTORY & DECISION MATRIX (Phase 8 Redesign)
   Fast, decision-oriented routing into specialist capabilities
   ========================================================= */

.solutions-hub {
    overflow: clip;
}

/* 1. Compact Routing Hero */
.solutions-hero {
    position: relative;
    padding-block-start: clamp(2.5rem, 5vw, 4rem);
    padding-block-end: clamp(2.5rem, 5vw, 4rem);
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 75% 55% at 50% -10%, rgba(69, 196, 176, 0.08), transparent 42rem),
        var(--color-bg-page);
}

.solutions-hero__content {
    max-width: 44rem;
}

.solutions-hero h1 {
    max-width: 18ch;
    margin-block: var(--space-4) var(--space-4);
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.solutions-hero__lead {
    max-width: 40rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
    line-height: var(--leading-relaxed);
}

/* 2. Primary 2x2 Decision Matrix Section */
.solutions-matrix-section {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.solutions-matrix {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-block-end: clamp(var(--space-8), 5vw, var(--space-12));
}

@media (min-width: 48rem) {
    .solutions-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .solutions-matrix {
        gap: var(--space-8);
    }
}

/* Quadrant Card (Hardware Double-Bezel Surface) */
.decision-quadrant {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-fast);
}

.decision-quadrant:hover {
    border-color: rgba(69, 196, 176, 0.32);
    background: #0f151e;
    transform: translateY(-2px);
}

.decision-quadrant__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.decision-quadrant__intent {
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.decision-quadrant__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.22);
    color: var(--color-accent);
    flex-shrink: 0;
}

.decision-quadrant__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.decision-quadrant__desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* Focused WhatsApp Callout within Quadrant 2 */
.decision-quadrant__whatsapp {
    margin-block: var(--space-5) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(69, 196, 176, 0.04);
    border: 1px solid rgba(69, 196, 176, 0.16);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.whatsapp-mini-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-accent);
    margin-block-end: 0.25rem;
}

.whatsapp-mini-header strong {
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
}

.decision-quadrant__whatsapp p {
    margin: 0;
}

/* Quadrant Specialist Navigation Links */
.decision-quadrant__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: auto;
    padding-block-start: var(--space-6);
}

.matrix-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    margin-inline: calc(-1 * var(--space-3));
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-block-start: 1px solid rgba(255, 255, 255, 0.05);
    transition: color var(--transition-fast), background-color var(--transition-fast), padding-inline var(--transition-fast);
}

.matrix-link:hover {
    color: var(--color-accent);
    background: rgba(255, 255, 255, 0.035);
}

.matrix-link__arrow {
    color: var(--color-accent);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.matrix-link:hover .matrix-link__arrow {
    transform: translateX(4px);
}

.service-focused-solution {
    background: var(--color-bg-deep);
}

.service-focused-solution__layout {
    display: grid;
    gap: var(--space-8);
    padding-block: clamp(var(--space-10), 7vw, var(--space-16));
    border-block: 1px solid var(--color-border);
}

.service-focused-solution__intro {
    max-width: 42rem;
}

.service-focused-solution__intro .text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-block-start: var(--space-4);
}

.service-focused-solution__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-focused-solution__list li {
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

@media (min-width: 48rem) {
    .service-focused-solution__layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
        align-items: start;
    }

    .service-focused-solution__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3. Cybersecurity & Infrastructure Foundation Band */
.cybersecurity-band {
    display: grid;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cybersecurity-band__kicker {
    display: block;
    margin-block-end: 0.25rem;
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cybersecurity-band h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
}

.cybersecurity-band__copy {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.matrix-link--standalone {
    border-block-start: 0;
    padding-inline: var(--space-4);
    margin-inline: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.matrix-link--standalone:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(69, 196, 176, 0.3);
}

@media (min-width: 58rem) {
    .cybersecurity-band {
        grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: var(--space-8);
    }
}

/* 4. Final Routing / Conversion Block */
.solutions-decision {
    position: relative;
    padding-block-start: clamp(var(--space-12), 6vw, var(--space-16));
    padding-block-end: clamp(3rem, 5vw, 3.75rem);
    background: var(--color-bg-page);
}

@media (min-width: 48rem) {
    .solutions-decision {
        padding-block-end: clamp(4.25rem, 6vw, 5rem);
    }
}

@media (min-width: 64rem) {
    .solutions-decision {
        padding-block-end: clamp(5.5rem, 7vw, 6.75rem);
    }
}

.solutions-decision__box {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-14)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background: #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.solutions-decision__ambient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(69, 196, 176, 0.08), transparent 30rem);
    pointer-events: none;
}

.solutions-decision__content {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    margin-inline: auto;
}

.solutions-decision h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}

.solutions-decision p {
    margin: 0 0 var(--space-6);
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.solutions-decision__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .solutions-decision__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .solutions-decision__actions .button {
        width: auto;
    }
}

/* Reveal on scroll */
.js .reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-standard), transform 800ms var(--ease-standard); }
.js .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   CUSTOM SOFTWARE SPECIALIST PAGE STYLING
   Scoped specialist-service architecture and editorial layouts
   ========================================================= */

.custom-software-page {
    overflow: clip;
}

/* 1. Specialist Hero */
.software-hero {
    position: relative;
    padding-block-start: clamp(2.5rem, 5vw, 4.25rem);
    padding-block-end: clamp(3rem, 6vw, 5rem);
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgb(var(--color-accent-rgb) / 0.08), transparent 40rem),
        radial-gradient(circle at 15% 85%, rgba(26, 33, 43, 0.4), transparent 28rem),
        var(--color-bg-page);
}

.software-hero__layout {
    display: grid;
    gap: clamp(var(--space-8), 5vw, var(--space-14));
}

@media (min-width: 64rem) {
    .software-hero__layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
        align-items: center;
    }
}

.software-hero__content {
    max-width: 48rem;
}

.software-hero h1 {
    max-width: 18ch;
    margin-block: var(--space-4) var(--space-5);
    font-size: clamp(2.25rem, 4.4vw, 3.65rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.software-hero__lead {
    max-width: 44rem;
    margin-block-end: var(--space-8);
    font-size: clamp(var(--text-base), 1.6vw, var(--text-lg));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.software-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 36rem) {
    .software-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .software-hero__actions .button {
        width: auto;
    }
}

/* Architectural Workflow Schematic (Hero Visual) */
.workflow-schematic {
    position: relative;
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.workflow-schematic__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: var(--space-5);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workflow-schematic__tag {
    color: var(--color-accent);
}

.workflow-schematic__status {
    color: var(--color-text-muted);
}

.workflow-schematic__body {
    display: grid;
    gap: 0;
}

.schematic-node {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    background: #111622;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.schematic-node:hover {
    border-color: rgba(69, 196, 176, 0.35);
}

.schematic-node__indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    margin-top: 0.4rem;
    flex-shrink: 0;
}

.schematic-node__details {
    min-width: 0;
}

.schematic-node__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-block-end: 0.15rem;
}

.schematic-node strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.25;
}

.schematic-node p {
    margin: 0.2rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.schematic-connector {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-3);
}

.schematic-connector__line {
    width: 1px;
    height: 1.25rem;
    background: rgba(69, 196, 176, 0.35);
    margin-inline-start: 0.25rem;
}

.schematic-connector__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
}

/* Shared Specialist Section Architecture */
.software-section {
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
}

.software-qualification,
.software-workflow,
.software-connected,
.software-decision {
    background: var(--color-bg-deep);
}

.software-builds,
.software-capabilities,
.software-proof {
    background: var(--color-bg-page);
}

/* 2. Who This Is For: Editorial Staggered Layout */
.qualification-staggered {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .qualification-staggered {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-10);
    }
}

.qualification-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
}

.qualification-item__marker {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    padding-top: 0.15rem;
}

.qualification-item__content h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.qualification-item__content p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 3. What We Build: Grouped Editorial Cards */
.builds-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .builds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .builds-grid {
        gap: var(--space-8);
    }
}

.build-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.build-card:hover {
    border-color: rgba(69, 196, 176, 0.32);
    transform: translateY(-2px);
}

.build-card--featured {
    border-color: rgba(69, 196, 176, 0.22);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.03) 0%, #0d1219 100%);
}

.build-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-block-end: var(--space-3);
}

.build-card__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.build-card__copy {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.build-card__traits {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: var(--space-5) 0 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-2);
}

.build-card__traits li {
    position: relative;
    padding-inline-start: 1.25rem;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.build-card__traits li::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.45rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

/* 4. Workflow-First Approach: Sequenced Process Flow */
.workflow-sequence {
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--color-border);
}

.workflow-step {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
    .workflow-step {
        grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: baseline;
    }
}

.workflow-step__index {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.22);
    border-radius: var(--radius-sm);
}

.workflow-step__body h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.workflow-step__body p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 48rem;
}

/* 5. Typical Capabilities: Deliverables Matrix */
.capabilities-matrix {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .capabilities-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4) var(--space-6);
    }
}

.capability-item {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.capability-item:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.capability-item__bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    transform: translateY(-2px);
}

.capability-item__text strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    margin-block-end: 0.2rem;
    line-height: 1.3;
}

.capability-item__text span {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

/* 6. Connected Capability Layer */
.connected-layout {
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 64rem) {
    .connected-layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--space-14);
        align-items: start;
    }

    .connected-layout__header {
        position: sticky;
        top: 7rem;
    }
}

.connected-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .connected-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.connected-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.connected-card:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.connected-card__kicker {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-end: var(--space-2);
}

.connected-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.1rem;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.connected-card p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.connected-card .text-link {
    margin-block-start: auto;
    font-size: var(--text-xs);
}

/* 7. Real-World Proof */
.proof-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.proof-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.125rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.proof-card:hover {
    border-color: rgba(69, 196, 176, 0.35);
    transform: translateY(-2px);
}

.proof-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proof-card__type {
    color: var(--color-accent);
}

.proof-card__domain {
    color: var(--color-text-muted);
}

.proof-card__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.proof-card__summary {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.proof-card__detail {
    margin-block-start: auto;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-xs);
    line-height: 1.5;
}

.proof-card__detail strong {
    display: block;
    color: var(--color-text-primary);
    margin-block-end: 0.15rem;
}

.proof-card__detail span {
    color: var(--color-text-muted);
}

.proof-footer {
    margin-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: #0b0f15;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.proof-footer p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* 8. Decision Support: Balanced Evaluation */
.decision-comparison {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .decision-comparison {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.decision-column {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.decision-column--custom {
    border-color: rgba(69, 196, 176, 0.25);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.03) 0%, #0d1219 100%);
}

.decision-column__header {
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.decision-column__tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-block-end: var(--space-2);
}

.decision-column__tag--highlight {
    color: var(--color-accent);
}

.decision-column__header h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.decision-column__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.decision-column__list li {
    display: grid;
    gap: 0.25rem;
}

.decision-column__list strong {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    font-size: 0.9375rem;
    line-height: 1.35;
}

.decision-column__list span {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* 9. Closing Conversion CTA */
.software-cta {
    position: relative;
    padding-block-start: clamp(var(--space-12), 7vw, var(--space-20));
    padding-block-end: clamp(3rem, 5vw, 3.75rem);
    background: var(--color-bg-deep);
}

@media (min-width: 48rem) {
    .software-cta {
        padding-block-end: clamp(4.25rem, 6vw, 5rem);
    }
}

@media (min-width: 64rem) {
    .software-cta {
        padding-block-end: clamp(5.5rem, 7vw, 6.75rem);
    }
}

.software-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.software-cta__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin-inline: auto;
}

.software-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.software-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.software-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .software-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .software-cta__actions .button {
        width: auto;
    }
}

/* =========================================================
   SPECIALIST PAGE: AI & AUTOMATION (/solutions/ai-automation/)
   ========================================================= */

.automation-section {
    padding-block: clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
}

.automation-recognition,
.automation-decision,
.automation-process,
.automation-connected,
.automation-limits {
    background: var(--color-bg-deep);
}

.automation-builds,
.automation-whatsapp,
.automation-blocks,
.automation-bridge,
.automation-proof {
    background: var(--color-bg-page);
}

/* 1. Hero: Specialist AI & Automation */
.automation-hero {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 60% 40% at 75% 20%, rgba(69, 196, 176, 0.07), transparent),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(16, 20, 25, 0.8), transparent),
        var(--color-bg-page);
}

.automation-hero__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 64rem) {
    .automation-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(var(--space-8), 4vw, var(--space-16));
    }
}

.automation-hero__content {
    max-width: 44rem;
}

.automation-hero h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.automation-hero__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 38rem;
}

.automation-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

@media (min-width: 36rem) {
    .automation-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Pipeline schematic in Hero */
.pipeline-schematic {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pipeline-schematic__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.pipeline-schematic__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pipeline-schematic__status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pipeline-schematic__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

.pipeline-schematic__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pipeline-node {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.pipeline-node:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.pipeline-node__indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.pipeline-node--engine .pipeline-node__indicator {
    background: #69d09a;
}

.pipeline-node--outcome .pipeline-node__indicator {
    background: #e8b760;
}

.pipeline-node__details {
    min-width: 0;
}

.pipeline-node__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-block-end: 0.15rem;
}

.pipeline-node strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: 1.25;
}

.pipeline-node p {
    margin: 0.2rem 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.pipeline-connector {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-3);
}

.pipeline-connector__line {
    width: 1px;
    height: 1.25rem;
    background: rgba(69, 196, 176, 0.35);
    margin-inline-start: 0.25rem;
}

.pipeline-connector__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
}

/* 2. Process Reality / Friction Grid */
.friction-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .friction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .friction-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.friction-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.friction-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
    transform: translateY(-2px);
}

.friction-card__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}

.friction-card__index {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    letter-spacing: 0.05em;
}

.friction-card h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.friction-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 3. Capability Scope */
.automation-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .automation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .automation-grid {
        gap: var(--space-8);
    }
}

.automation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.automation-card:hover {
    border-color: rgba(69, 196, 176, 0.32);
    transform: translateY(-2px);
}

.automation-card--featured {
    border-color: rgba(69, 196, 176, 0.22);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.03) 0%, #0d1219 100%);
}

.automation-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-block-end: var(--space-3);
}

.automation-card__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.automation-card__copy {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.automation-card__traits {
    list-style: none;
    padding: var(--space-4) 0 0;
    margin: auto 0 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-2);
}

.automation-card__traits li {
    position: relative;
    padding-inline-start: 1.25rem;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.automation-card__traits li::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.45rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

/* 4. Decision Support: Automation vs AI Trio */
.decision-trio {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 64rem) {
    .decision-trio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.decision-panel {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.decision-panel--featured {
    border-color: rgba(69, 196, 176, 0.28);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.04) 0%, #0d1219 100%);
}

.decision-panel__badge {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-4);
}

.decision-panel__badge--rule {
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.22);
}

.decision-panel__badge--ai {
    color: #69d09a;
    background: rgba(105, 208, 154, 0.08);
    border: 1px solid rgba(105, 208, 154, 0.25);
}

.decision-panel__badge--human {
    color: #e8b760;
    background: rgba(232, 183, 96, 0.08);
    border: 1px solid rgba(232, 183, 96, 0.25);
}

.decision-panel h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.decision-panel__intro {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.decision-panel__list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: grid;
    gap: var(--space-3);
}

.decision-panel__list li {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.decision-panel__list strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: 0.2rem;
}

.decision-panel__list span {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

/* 5. WhatsApp Automation */
.whatsapp-layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .whatsapp-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(var(--space-8), 5vw, var(--space-16));
        align-items: start;
    }
}

.whatsapp-intro h2 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.whatsapp-lead {
    margin: 0 0 var(--space-6);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.whatsapp-compliance {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(69, 196, 176, 0.2);
    border-radius: var(--radius-md);
    margin-block-end: var(--space-6);
}

.whatsapp-compliance__icon {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.whatsapp-compliance__text strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    margin-block-end: 0.25rem;
}

.whatsapp-compliance__text p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.whatsapp-actions {
    display: flex;
}

.whatsapp-tiers {
    display: grid;
    gap: var(--space-4);
}

.tier-card {
    padding: clamp(var(--space-4), 2.5vw, var(--space-5));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.tier-card:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.tier-card--highlight {
    border-color: rgba(69, 196, 176, 0.25);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.04) 0%, #0d1219 100%);
}

.tier-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-2);
}

.tier-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tier-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.tier-card__desc {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.tier-card__list {
    list-style: none;
    padding: var(--space-3) 0 0;
    margin: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-1);
}

.tier-card__list li {
    position: relative;
    padding-inline-start: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.tier-card__list li::before {
    content: "•";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-accent);
}

/* 6. Process Sequence */
.process-sequence {
    display: grid;
    gap: 0;
    border-block-start: 1px solid var(--color-border);
}

.process-step {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
    .process-step {
        grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: baseline;
    }
}

.process-step__number {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.22);
    border-radius: var(--radius-sm);
}

.process-step__col-content h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.process-step__col-content p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 48rem;
}

/* 7. Deliverable Technical Blocks */
.blocks-grid {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 48rem) {
    .blocks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-5);
    }
}

@media (min-width: 64rem) {
    .blocks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.block-item {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.block-item:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.block-item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    transform: translateY(-2px);
}

.block-item__content strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    margin-block-end: 0.15rem;
    line-height: 1.3;
}

.block-item__content span {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* 8. Connected Systems Banner */
.connected-banner {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 64rem) {
    .connected-banner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-10);
        align-items: center;
    }
}

.connected-banner__copy h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.connected-banner__copy p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.ecosystem-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ecosystem-pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-primary);
    padding: 0.4rem 0.85rem;
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ecosystem-pill:hover {
    border-color: rgba(69, 196, 176, 0.4);
    color: var(--color-accent);
}

/* 9. AI Agents Bridge Card */
.bridge-card {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: linear-gradient(135deg, rgba(69, 196, 176, 0.04) 0%, #0d1219 100%);
    border: 1px solid rgba(69, 196, 176, 0.22);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 64rem) {
    .bridge-card {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: var(--space-10);
        align-items: center;
    }
}

.bridge-card__body h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.bridge-card__body p {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.bridge-card__meta {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.bridge-card__stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bridge-card__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bridge-card__stat strong {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

/* 10. Operational Proof */
.automation-proof .proof-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .automation-proof .proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 11. Pragmatic Limits */
.limits-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .limits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.limit-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color var(--transition-fast);
}

.limit-card:hover {
    border-color: rgba(232, 183, 96, 0.3);
}

.limit-card__number {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: #e8b760;
    margin-block-end: var(--space-2);
}

.limit-card h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.limit-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 12. Final CTA */
.automation-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.automation-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.automation-cta__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin-inline: auto;
}

.automation-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.automation-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.automation-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .automation-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .automation-cta__actions .button {
        width: auto;
    }
}

/* ==========================================================================
   AI AGENTS & CHATBOTS SPECIALIST PAGE STYLES
   ========================================================================== */

/* 1. Base Section & Hero */
.agent-section {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.agent-hero {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 60% 40% at 75% 20%, rgba(69, 196, 176, 0.08), transparent),
        radial-gradient(ellipse 50% 50% at 15% 85%, rgba(16, 20, 25, 0.8), transparent),
        var(--color-bg-page);
}

.agent-hero__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 64rem) {
    .agent-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(var(--space-8), 4vw, var(--space-16));
    }
}

.agent-hero__content {
    max-width: 44rem;
}

.agent-hero h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.agent-hero__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 38rem;
}

.agent-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

@media (min-width: 36rem) {
    .agent-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Hero Schematic */
.agent-schematic {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.agent-schematic__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.agent-schematic__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.agent-schematic__status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.agent-schematic__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

.agent-schematic__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.schematic-step {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4);
    background: #121820;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.schematic-step:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.schematic-step__indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
}

.schematic-step--query .schematic-step__indicator {
    background: #8b9bb4;
    box-shadow: 0 0 6px rgba(139, 155, 180, 0.5);
}

.schematic-step--engine .schematic-step__indicator {
    background: var(--color-accent);
    box-shadow: 0 0 8px rgba(69, 196, 176, 0.6);
}

.schematic-step--outcome .schematic-step__indicator {
    background: #69d09a;
    box-shadow: 0 0 8px rgba(105, 208, 154, 0.6);
}

.schematic-step__details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.schematic-step__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.schematic-step__details strong {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.schematic-step__details p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.schematic-gate {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-left: calc(var(--space-4) + 4px);
    margin-block: 0.15rem;
}

.schematic-gate__line {
    width: 2px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
}

.schematic-gate__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.06);
    border: 1px solid rgba(69, 196, 176, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.03em;
}

/* 2. Comparison Matrix */
.comparison-grid {
    display: grid;
    gap: var(--space-6);
    margin-block-end: var(--space-8);
}

@media (min-width: 54rem) {
    .comparison-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.comparison-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    background: #0d1219;
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

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

/* Tier 1: Subtle Cool Slate-Blue / Steel-Blue */
.comparison-card--tier1,
.comparison-card:nth-child(1) {
    background: linear-gradient(180deg, rgba(140, 175, 215, 0.05) 0%, #0d1219 100%);
    border: 1px solid rgba(140, 175, 215, 0.35);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(140, 175, 215, 0.04);
}

.comparison-card--tier1:hover,
.comparison-card:nth-child(1):hover {
    border-color: rgba(140, 175, 215, 0.55);
}

.comparison-card--tier1 .comparison-card__badge,
.comparison-card:nth-child(1) .comparison-card__badge {
    color: #9cbcdb;
    background: rgba(140, 175, 215, 0.12);
    border: 1px solid rgba(140, 175, 215, 0.3);
}

.comparison-card--tier1 .comparison-card__list li::before,
.comparison-card:nth-child(1) .comparison-card__list li::before {
    content: "–";
    color: rgba(156, 188, 219, 0.85);
}

/* Tier 2: Current Teal / Green (Kept exactly as is) */
.comparison-card--featured,
.comparison-card--tier2 {
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.05) 0%, #0d1219 100%);
    border: 1px solid rgba(69, 196, 176, 0.35);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(69, 196, 176, 0.05);
}

.comparison-card--featured:hover,
.comparison-card--tier2:hover {
    border-color: rgba(69, 196, 176, 0.55);
}

.comparison-card--featured .comparison-card__badge,
.comparison-card--tier2 .comparison-card__badge {
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.12);
    border: 1px solid rgba(69, 196, 176, 0.3);
}

.comparison-card--featured .comparison-card__list li::before,
.comparison-card--tier2 .comparison-card__list li::before {
    content: "–";
    color: rgba(69, 196, 176, 0.85);
}

/* Tier 3: Subtle Muted Amber / Gold */
.comparison-card--tier3,
.comparison-card:nth-child(3) {
    background: linear-gradient(180deg, rgba(232, 183, 96, 0.05) 0%, #0d1219 100%);
    border: 1px solid rgba(232, 183, 96, 0.35);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(232, 183, 96, 0.04);
}

.comparison-card--tier3:hover,
.comparison-card:nth-child(3):hover {
    border-color: rgba(232, 183, 96, 0.55);
}

.comparison-card--tier3 .comparison-card__badge,
.comparison-card:nth-child(3) .comparison-card__badge {
    color: #e8b760;
    background: rgba(232, 183, 96, 0.12);
    border: 1px solid rgba(232, 183, 96, 0.3);
}

.comparison-card--tier3 .comparison-card__list li::before,
.comparison-card:nth-child(3) .comparison-card__list li::before {
    content: "–";
    color: rgba(232, 183, 96, 0.85);
}

.comparison-card__badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-card h3 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.comparison-card__subtitle {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    color: #8b97a8;
    line-height: 1.4;
}

.comparison-card__desc {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.comparison-card__list-group {
    margin-block-end: var(--space-5);
}

.comparison-card__list-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.comparison-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.comparison-card__list li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 1.25rem;
}

.comparison-card__list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.4);
}

.comparison-card__limitation {
    margin-top: auto;
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.comparison-card__limitation strong {
    color: var(--color-text-primary);
}

.comparison-note {
    padding: var(--space-5) var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.comparison-note p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.comparison-note strong {
    color: var(--color-text-primary);
}

/* 3. Where Conversational AI Fits (Grouped Domains) */
.fit-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.fit-cluster {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 64rem) {
    .fit-cluster {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-10);
        align-items: flex-start;
    }
}

.fit-cluster__intro {
    max-width: 28rem;
}

.fit-cluster__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.fit-cluster__intro h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.fit-cluster__intro p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.fit-cluster__items {
    display: grid;
    gap: var(--space-4);
}

.fit-item {
    padding: var(--space-4) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.fit-item:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.fit-item h4 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.fit-item p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 4. Grounded Answers / RAG */
.grounding-layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 64rem) {
    .grounding-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--space-10);
    }
}

.grounding-narrative {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.grounding-card {
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

.grounding-card h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.grounding-card p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.grounding-card p:last-child {
    margin-bottom: 0;
}

.grounding-card--solution {
    background: linear-gradient(145deg, rgba(69, 196, 176, 0.04) 0%, #0d1219 100%);
    border-color: rgba(69, 196, 176, 0.25);
}

.grounding-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.grounding-points {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.grounding-points li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 1.25rem;
}

.grounding-points li::before {
    content: "•";
    position: absolute;
    left: 0.2rem;
    color: var(--color-accent);
}

.grounding-points strong {
    color: var(--color-text-primary);
}

/* RAG Visual Pipeline */
.rag-visual {
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.rag-visual__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: rgba(255, 255, 255, 0.02);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.rag-visual__title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rag-visual__state {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
}

.rag-visual__stages {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rag-stage {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: #121820;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.rag-stage__step {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    padding-top: 0.1rem;
    flex-shrink: 0;
}

.rag-stage__content strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
}

.rag-stage__content p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 5. Reliability & Human Handoff */
.reliability-grid {
    display: grid;
    gap: var(--space-5);
    margin-block-end: var(--space-8);
}

@media (min-width: 48rem) {
    .reliability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .reliability-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.reliability-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.reliability-card:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.reliability-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-accent);
}

.reliability-card h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.reliability-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.reliability-philosophy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
}

@media (min-width: 48rem) {
    .reliability-philosophy {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
    }
}

.reliability-philosophy__badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #e8b760;
    background: rgba(232, 183, 96, 0.1);
    border: 1px solid rgba(232, 183, 96, 0.25);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    width: max-content;
}

.reliability-philosophy p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 6. Bounded Actions & Access Control */
.actions-split {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .actions-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.action-panel,
.access-panel {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
    height: 100%;
}

.action-panel__header,
.access-panel__header {
    margin-bottom: var(--space-6);
}

.action-panel__tag,
.access-panel__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: var(--space-2);
}

.action-panel h3,
.access-panel h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.action-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.action-list li {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
}

.action-list strong {
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 0.15rem;
}

.access-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.access-item {
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
}

.access-item__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.access-item__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.access-item h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.access-item p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 7. Building the Knowledge Layer */
.knowledge-timeline {
    display: grid;
    gap: var(--space-4);
    position: relative;
}

@media (min-width: 48rem) {
    .knowledge-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 64rem) {
    .knowledge-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.timeline-step {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.timeline-step:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.timeline-step__marker {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(69, 196, 176, 0.1);
    border: 1px solid rgba(69, 196, 176, 0.25);
    border-radius: 50%;
}

.timeline-step__num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.timeline-step__content h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.timeline-step__content p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 8. Multilingual Capability */
.multilingual-banner {
    display: grid;
    gap: var(--space-8);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 64rem) {
    .multilingual-banner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: var(--space-10);
        align-items: center;
    }
}

.multilingual-lead {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.multilingual-details p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.multilingual-caveat {
    padding: var(--space-4) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid #e8b760;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.multilingual-caveat strong {
    color: #e8b760;
    display: block;
    margin-bottom: 0.2rem;
}

.multilingual-banner__badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lang-pill {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.lang-pill:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.lang-pill__code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.1);
    border: 1px solid rgba(69, 196, 176, 0.2);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
}

.lang-pill__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

/* 9. Connection to Automation (Bridge) */
.agent-bridge .bridge-card {
    display: grid;
    gap: var(--space-6);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: linear-gradient(135deg, rgba(69, 196, 176, 0.04) 0%, #0d1219 100%);
    border: 1px solid rgba(69, 196, 176, 0.22);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 64rem) {
    .agent-bridge .bridge-card {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: var(--space-10);
        align-items: center;
    }
}

.agent-bridge .bridge-card__body h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.agent-bridge .bridge-card__body p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.agent-bridge .bridge-card__action {
    margin-top: var(--space-5);
}

.bridge-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
}

.bridge-flow__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
    display: block;
}

.bridge-flow__box {
    padding: var(--space-3) var(--space-4);
    background: #121820;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.bridge-flow__box strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: 0.15rem;
}

.bridge-flow__box span {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.bridge-flow__box--active {
    border-color: rgba(69, 196, 176, 0.35);
    background: rgba(69, 196, 176, 0.05);
}

.bridge-flow__arrow {
    display: flex;
    justify-content: center;
    color: var(--color-accent);
}

/* 10. Operational Proof */
.agent-proof .proof-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 54rem) {
    .agent-proof .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.proof-card {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.proof-card--delivered {
    border-color: rgba(69, 196, 176, 0.3);
    background: linear-gradient(180deg, rgba(69, 196, 176, 0.03) 0%, #0d1219 100%);
}

.proof-card--pattern {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
}

.proof-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
    width: max-content;
}

.proof-badge--delivered {
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.1);
    border: 1px solid rgba(69, 196, 176, 0.25);
}

.proof-badge--pattern {
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.proof-card h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.proof-card__context {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.proof-card__body p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.proof-card__highlights {
    margin-top: auto;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.proof-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.proof-stat__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.proof-stat strong {
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}

/* 11. When Not to Use */
.agent-limits .limits-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 48rem) {
    .agent-limits .limits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .agent-limits .limits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.agent-limits .limit-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color var(--transition-fast);
}

.agent-limits .limit-card:hover {
    border-color: rgba(232, 183, 96, 0.3);
}

.agent-limits .limit-card__number {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: #e8b760;
    margin-block-end: var(--space-2);
}

.agent-limits .limit-card h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.agent-limits .limit-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 12. Final CTA */
.agent-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.agent-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.agent-cta__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin-inline: auto;
}

.agent-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.agent-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-body, 1rem), 1.5vw, var(--text-lead, 1.125rem));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.agent-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .agent-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .agent-cta__actions .button {
        width: auto;
    }
}

/* =========================================================
   DATA & ANALYTICS SPECIALIST PAGE STYLES
   ========================================================= */

.analytics-page {
    position: relative;
    background-color: var(--color-bg-page);
}

/* 1. Hero */
.analytics-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
    padding-block-end: clamp(var(--space-12), 8vw, var(--space-20));
    background: 
        radial-gradient(ellipse 60% 40% at 50% -10%, rgba(69, 196, 176, 0.08), transparent 70%),
        var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.analytics-hero__layout {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 64rem) {
    .analytics-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        gap: var(--space-12);
    }
}

.analytics-hero__content {
    max-width: 44rem;
}

.analytics-hero h1 {
    margin-block: var(--space-4) var(--space-6);
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.analytics-hero__lead {
    font-size: clamp(var(--text-body), 1.6vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-8);
}

.analytics-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .analytics-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Hero Pipeline Schematic */
.analytics-pipeline {
    position: relative;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.analytics-pipeline__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-5);
}

.analytics-pipeline__tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.analytics-pipeline__status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.analytics-pipeline__status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: 0 0 6px var(--color-accent);
}

.analytics-pipeline__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pipeline-node {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.pipeline-node:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.pipeline-node__indicator {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-top: 5px;
    flex-shrink: 0;
}

.pipeline-node--source .pipeline-node__indicator {
    background: #8fa0b5;
}

.pipeline-node--governance .pipeline-node__indicator {
    background: var(--color-warning);
}

.pipeline-node--view .pipeline-node__indicator {
    background: var(--color-accent);
}

.pipeline-node__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pipeline-node__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.pipeline-node__details strong {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.pipeline-node__details p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.pipeline-connector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-left: calc(var(--space-4) + 4px);
    margin-block: 2px;
}

.pipeline-connector__line {
    width: 2px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.pipeline-connector__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* Common Section Container */
.analytics-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
}

/* 2. Philosophy */
.philosophy-layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .philosophy-layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.philosophy-lead-box {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.philosophy-lead-box h3 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

.philosophy-lead-box p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.philosophy-lead-box p:last-child {
    margin-bottom: 0;
}

.philosophy-contrast-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: rgba(232, 183, 96, 0.12);
    color: var(--color-warning);
    border: 1px solid rgba(232, 183, 96, 0.25);
}

.philosophy-questions-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 40rem) {
    .philosophy-questions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.question-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast);
}

.question-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.question-card__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-accent);
    letter-spacing: 0.06em;
}

.question-card h4 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.question-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 3. What We Build */
.capabilities-asymmetric {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .capabilities-asymmetric {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .capabilities-asymmetric {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.capability-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.capability-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.capability-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.capability-card__code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.capability-card__scope {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.capability-card h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.capability-card p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.capability-card__deliverables {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.capability-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 2px 7px;
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

/* 4. Process */
.process-stepper {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .process-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .process-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.process-step-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.process-step-card__num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.process-step-card h3 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.process-step-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 5. Reporting vs Dashboard vs Analysis */
.distinction-grid {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (min-width: 64rem) {
    .distinction-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.distinction-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.distinction-card__header {
    margin-bottom: var(--space-4);
}

.distinction-card__badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
    display: block;
}

.distinction-card h3 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.distinction-card__best {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}

.distinction-card__list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.distinction-card__list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    position: relative;
    padding-left: 1rem;
}

.distinction-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

.distinction-card__limitation {
    margin-top: auto;
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.distinction-card__limitation strong {
    color: var(--color-text-primary);
}

.distinction-callout {
    padding: var(--space-5) var(--space-6);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
}

.distinction-callout p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.distinction-callout strong {
    color: var(--color-text-primary);
}

/* 6. Metric Layer */
.metric-layer-layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .metric-layer-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.metric-layer-narrative h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.metric-layer-narrative p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.metric-examples-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .metric-examples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.metric-example-item {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.metric-example-item h3,
.metric-example-item h4 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.metric-example-item p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 7. Data Sources & Integration */
.sources-compact-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .sources-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .sources-compact-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.source-category-card {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.source-category-card h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.source-category-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 8. Portfolio Analysis Examples */
.portfolio-header-banner {
    padding: var(--space-4) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(232, 183, 96, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.portfolio-header-banner__badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    color: var(--color-warning);
    background: rgba(232, 183, 96, 0.12);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.portfolio-header-banner p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.portfolio-showcase-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.portfolio-project-card {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.portfolio-project-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-6);
}

.portfolio-project-card__title-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.portfolio-project-card__index {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.portfolio-project-card h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.portfolio-project-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.portfolio-project-card__layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .portfolio-project-card__layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--space-10);
        align-items: start;
    }
}

.portfolio-project-card__narrative h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.portfolio-project-card__narrative p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.portfolio-dimension-list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.portfolio-dimension-list li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Analytical Visual Proof Cards */
.analytical-proof-view {
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.analytical-proof-view__hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-4);
}

.analytical-proof-view__hud span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.analytical-matrix {
    display: grid;
    gap: var(--space-3);
}

.matrix-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

.matrix-row__top {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.matrix-row__top strong {
    color: var(--color-text-primary);
}

.matrix-row__top span {
    color: var(--color-accent);
    font-family: var(--font-mono);
}

.matrix-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.matrix-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
}

.matrix-row p {
    margin: 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Decomposition Tree Visual */
.decomp-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.decomp-node {
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decomp-node--sub {
    margin-left: var(--space-4);
    border-left-color: rgba(69, 196, 176, 0.4);
}

.decomp-node__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.decomp-node__meta strong {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
}

.decomp-node__meta span {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.decomp-node__val {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
}

/* 9. Analytics to Operations Bridge */
.bridge-grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .bridge-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bridge-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bridge-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bridge-card h3 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.bridge-card p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.bridge-card a {
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bridge-card a:hover {
    text-decoration: underline;
}

/* 10. When Not to Use */
.boundaries-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 40rem) {
    .boundaries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .boundaries-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.boundary-card {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.boundary-card__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #e8b760;
    font-weight: var(--weight-bold);
}

.boundary-card h3 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.boundary-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 11. Technical Capabilities */
.tech-capabilities-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
    .tech-capabilities-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .tech-capabilities-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tech-capability-pill {
    padding: var(--space-3) var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tech-capability-pill strong {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

.tech-capability-pill span {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

/* 12. Data Quality & Trust */
.quality-box {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 64rem) {
    .quality-box {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-10);
    }
}

.quality-box__intro h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.quality-box__intro p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.quality-checklist {
    display: grid;
    gap: var(--space-3);
}

.quality-check-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.quality-check-item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-top: 6px;
    flex-shrink: 0;
}

.quality-check-item p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.quality-check-item strong {
    color: var(--color-text-primary);
}

/* 13. Closing CTA */
.analytics-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.analytics-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.analytics-cta__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin-inline: auto;
}

.analytics-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.analytics-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-body), 1.5vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.analytics-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .analytics-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .analytics-cta__actions .button {
        width: auto;
    }
}

/* ==========================================================================
   GIS & LOCATION INTELLIGENCE SPECIALIST PAGE STYLES
   ========================================================================== */

/* 1. Base Section & Hero */
.gis-section {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
}

.gis-hero {
    position: relative;
    padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-12), 8vw, var(--space-24));
    border-block-end: 1px solid var(--color-border);
    background:
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(69, 196, 176, 0.08), transparent),
        radial-gradient(ellipse 50% 50% at 15% 85%, rgba(16, 20, 25, 0.8), transparent),
        var(--color-bg-page);
}

.gis-hero__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 64rem) {
    .gis-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: clamp(var(--space-8), 4vw, var(--space-16));
    }
}

.gis-hero__content {
    max-width: 44rem;
}

.gis-hero h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.gis-hero__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 38rem;
}

.gis-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

@media (min-width: 36rem) {
    .gis-hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .gis-hero__actions .button {
        width: auto;
    }
}

/* 2. Hero Visual: Spatial Decision Card */
.gis-decision-card {
    background: #0b0f15;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gis-decision-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-end: var(--space-4);
    margin-block-end: var(--space-4);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.gis-decision-card__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.gis-decision-card__badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.gis-decision-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gis-flow-step {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    background: #0e131b;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
}

.gis-flow-step--outcome {
    background: rgba(69, 196, 176, 0.04);
    border-color: rgba(69, 196, 176, 0.25);
}

.gis-flow-step__indicator {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.1);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.gis-flow-step__details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gis-flow-step__label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.gis-flow-step__details strong {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

.gis-flow-step__details p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.gis-flow-connector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline-start: 1.8rem;
    padding-block: 0.1rem;
}

.gis-flow-connector__line {
    width: 1px;
    height: 0.9rem;
    background: rgba(69, 196, 176, 0.3);
}

.gis-flow-connector__metric {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--color-accent);
    letter-spacing: 0.03em;
}

/* 3. Section 2: Location Changes the Question */
.gis-questions__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-questions__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .gis-questions__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gis-question-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.gis-question-card:hover {
    border-color: rgba(69, 196, 176, 0.3);
    transform: translateY(-2px);
}

.gis-question-card__num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.gis-question-card h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.gis-question-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 4. Section 3: What We Build */
.gis-build__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-build__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .gis-build__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gis-capability-card--featured {
        grid-column: span 2;
    }

    .gis-capability-card:last-child {
        grid-column: 1 / -1;
    }

    .gis-capability-card:last-child p {
        max-width: 52rem;
    }

    .gis-capability-card:last-child .gis-feature-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.gis-capability-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.gis-capability-card--featured {
    background:
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(69, 196, 176, 0.06), transparent),
        #0d1219;
    border-color: rgba(69, 196, 176, 0.2);
}

.gis-capability-card:hover {
    border-color: rgba(69, 196, 176, 0.35);
}

.gis-capability-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gis-capability-card__tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.gis-capability-card h3 {
    margin: 0;
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.gis-capability-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.05);
    padding-block-start: var(--space-3);
}

.gis-feature-list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    position: relative;
    padding-inline-start: 1.1rem;
    line-height: 1.45;
}

.gis-feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 0.9rem;
    line-height: 1;
}

/* 5. Section 4: Proximity is Not Just a Straight Line */
.gis-proximity__layout {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    margin-block-start: var(--space-8);
}

@media (min-width: 64rem) {
    .gis-proximity__layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(var(--space-8), 5vw, var(--space-16));
    }
}

.gis-contrast-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e8b760;
    background: rgba(232, 183, 96, 0.1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-3);
}

.gis-proximity__text h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.gis-proximity__text p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-barrier-grid {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
    .gis-barrier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gis-barrier-item {
    padding: var(--space-3) var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.gis-barrier-item strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-block-end: 0.2rem;
}

.gis-barrier-item p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.gis-proximity-demo {
    background: #0b0f15;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    padding: clamp(var(--space-5), 4vw, var(--space-6));
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gis-proximity-demo__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
    margin-block-end: var(--space-5);
}

.gis-proximity-demo__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.gis-proximity-demo__badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.gis-comparison-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 32rem) {
    .gis-comparison-row {
        flex-direction: row;
        align-items: center;
    }
}

.gis-comparison-node {
    flex: 1;
    padding: var(--space-4);
    background: #0e131b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.gis-comparison-node--highlight {
    background: rgba(69, 196, 176, 0.04);
    border-color: rgba(69, 196, 176, 0.3);
}

.gis-comparison-node__tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin-block-end: 0.2rem;
}

.gis-comparison-node h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.gis-metric-callout {
    margin-block-end: var(--space-2);
}

.gis-metric-callout__val {
    display: block;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gis-comparison-node--highlight .gis-metric-callout__val {
    color: var(--color-accent);
}

.gis-metric-callout__sub {
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

.gis-metric-callout__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.gis-comparison-divider {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-1);
}

.gis-proximity-demo__footer {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.gis-proximity-demo__footer p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.gis-proximity-demo__footer strong {
    color: var(--color-text-primary);
}

/* 6. Section 5: From Location to Decision (Timeline) */
.gis-process-timeline {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 64rem) {
    .gis-process-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gis-process-step {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition-fast);
}

.gis-process-step:hover {
    border-color: rgba(69, 196, 176, 0.3);
}

.gis-process-step__number {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.gis-process-step h3 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.gis-process-step p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 7. Section 6: Location Advantage Proof Showcase */
.gis-proof-showcase {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    margin-block-start: var(--space-8);
}

@media (min-width: 64rem) {
    .gis-proof-showcase {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(var(--space-8), 5vw, var(--space-16));
    }
}

.gis-proof-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-block-end: var(--space-3);
}

.gis-proof-showcase__content h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.gis-proof-showcase__content p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-proof-features {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-6);
}

.gis-proof-feature {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.gis-proof-feature__icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(105, 208, 154, 0.12);
    color: var(--color-success);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.gis-proof-feature strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-block-end: 0.15rem;
}

.gis-proof-feature p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.gis-proof-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

@media (min-width: 32rem) {
    .gis-proof-cta {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
    }
}

.gis-proof-url-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Mock Map Window */
.gis-mock-window {
    background: #0b0f15;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gis-mock-window__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    background: #080b0f;
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}

.gis-mock-window__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.gis-mock-window__address {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

.gis-mock-window__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gis-mock-map {
    position: relative;
    height: 13rem;
    background: #070a0e;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.gis-mock-map__grid {
    position: absolute;
    inset: 0;
    background-size: 2rem 2rem;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

.gis-mock-map__road--primary {
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(12deg);
}

.gis-mock-map__road--secondary {
    position: absolute;
    top: 15%;
    left: 45%;
    width: 3px;
    height: 70%;
    background: rgba(255, 255, 255, 0.08);
}

.gis-mock-map__barrier {
    position: absolute;
    top: 52%;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: rgba(42, 75, 124, 0.15);
    border-top: 1px dashed rgba(69, 140, 215, 0.3);
    border-bottom: 1px dashed rgba(69, 140, 215, 0.3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
}

.gis-mock-map__barrier span {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: rgba(140, 185, 240, 0.7);
    text-transform: uppercase;
}

.gis-mock-map__route {
    position: absolute;
    top: 32%;
    left: 25%;
    width: 50%;
    height: 38%;
    border-left: 2px dashed var(--color-accent);
    border-bottom: 2px dashed var(--color-accent);
    opacity: 0.8;
}

.gis-mock-map__pin {
    position: absolute;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    z-index: 2;
}

.gis-mock-map__pin--origin {
    top: 25%;
    left: 20%;
    background: var(--color-accent);
    color: #05070a;
    font-weight: var(--weight-bold);
}

.gis-mock-map__pin--dest1 {
    top: 68%;
    left: 68%;
    background: #141c26;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-primary);
}

.gis-mock-map__pin--dest2 {
    top: 18%;
    left: 65%;
    background: #141c26;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-primary);
}

.gis-mock-panel {
    background: #0e131b;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.gis-mock-panel__header {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-block-end: var(--space-2);
}

.gis-mock-panel__header span {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
}

.gis-mock-panel__stats {
    display: flex;
    justify-content: space-between;
}

.gis-mock-stat {
    display: flex;
    flex-direction: column;
}

.gis-mock-stat__val {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.gis-mock-stat__lbl {
    font-size: 0.62rem;
    color: var(--color-text-muted);
}

/* 8. Section 7: Business Data + Geography */
.gis-business__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-business__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

@media (min-width: 64rem) {
    .gis-business__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gis-business-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gis-business-card__icon {
    color: var(--color-accent);
    font-size: 1rem;
    line-height: 1;
}

.gis-business-card h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.gis-business-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* 9. Section 8: Location Intelligence Use Cases */
.gis-use-cases__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-use-cases__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.gis-use-case-group {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.gis-use-case-group__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
    padding-block-end: var(--space-3);
}

.gis-use-case-group__num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.1);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.gis-use-case-group h3 {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.gis-use-case-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gis-use-case-list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-use-case-list strong {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
}

/* 10. Section 9: Connected Systems */
.gis-connected__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-connected__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.gis-connected-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gis-connected-card__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.gis-connected-card h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.gis-connected-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    flex-grow: 1;
}

.gis-connected-card a {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    margin-top: var(--space-2);
}

/* 11. Section 10: Remote Sensing & Earth Observation */
.gis-remote-sensing__box {
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .gis-remote-sensing__box {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        gap: var(--space-10);
    }
}

.gis-remote-sensing__content h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.gis-remote-sensing__lead {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-3);
}

.gis-remote-sensing__content p {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-remote-sensing__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.gis-tech-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    background: rgba(69, 196, 176, 0.08);
    border: 1px solid rgba(69, 196, 176, 0.2);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
}

.gis-boundary-notice {
    padding: var(--space-5);
    background: #090c12;
    border: 1px solid rgba(232, 183, 96, 0.25);
    border-radius: var(--radius-md);
}

.gis-boundary-notice__tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #e8b760;
    display: block;
    margin-block-end: var(--space-2);
}

.gis-boundary-notice h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.gis-boundary-notice p {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.gis-boundary-notice p:last-child {
    margin: 0;
}

/* 12. Section 11: Data Quality & Spatial Accuracy */
.gis-accuracy__grid {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-accuracy__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 64rem) {
    .gis-accuracy__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gis-accuracy-card {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gis-accuracy-card__alert {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: var(--weight-bold);
    color: #e8b760;
    background: rgba(232, 183, 96, 0.1);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.gis-accuracy-card h3 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.gis-accuracy-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 13. Section 12: When a Map is Not the Answer */
.gis-boundaries__box {
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.gis-boundaries__header h2 {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.gis-boundaries__items {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .gis-boundaries__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.gis-boundary-point {
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.gis-boundary-point strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-block-end: 0.2rem;
}

.gis-boundary-point p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 14. Section 13: Technical Capabilities */
.gis-tech__grid {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-8);
}

@media (min-width: 48rem) {
    .gis-tech__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.gis-tech-group {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gis-tech-group h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    border-block-end: 1px solid rgba(255, 255, 255, 0.06);
    padding-block-end: var(--space-2);
}

.gis-tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gis-tech-list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.gis-tech-list strong {
    color: var(--color-text-primary);
}

/* 15. Section 14: Final CTA */
.gis-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.gis-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.gis-cta__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin-inline: auto;
}

.gis-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.gis-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-body), 1.5vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.gis-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .gis-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .gis-cta__actions .button {
        width: auto;
    }
}

/* ==========================================================================
   MOBILE APP DEVELOPMENT SPECIALIST PAGE
   ========================================================================== */

/* 1. Hero */
.mobile-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
    padding-block-end: clamp(var(--space-12), 8vw, var(--space-20));
    background: 
        radial-gradient(ellipse 65% 45% at 50% -10%, rgba(69, 196, 176, 0.09), transparent 70%),
        var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.mobile-hero__layout {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 64rem) {
    .mobile-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        gap: var(--space-12);
    }
}

.mobile-hero__content {
    max-width: 44rem;
}

.mobile-hero h1 {
    margin-block: var(--space-4) var(--space-6);
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.mobile-hero__lead {
    font-size: clamp(var(--text-body), 1.6vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-8);
}

.mobile-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .mobile-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Hero Schematic & Devices */
.mobile-flow-schematic {
    position: relative;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mobile-flow-schematic__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-5);
}

.mobile-flow-schematic__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-flow-schematic__badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-hero-devices {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (min-width: 30rem) {
    .mobile-hero-devices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

/* Phone Mockup Frame (Double Bezel) */
.phone-mockup {
    background: #151d28;
    border: 2px solid #233042;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    position: relative;
}

.phone-mockup__notch {
    width: 36px;
    height: 4px;
    background: #090d14;
    border-radius: 2px;
    margin: 2px auto 6px;
}

/* Light/Neutral Screen Interior for High Contrast */
.phone-mockup__screen {
    background: #f8fafc;
    border-radius: 16px;
    padding: 12px 10px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.75rem;
    min-height: 240px;
}

.app-ui-header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 6px;
}

.app-ui-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-ui-title {
    font-size: 0.78rem;
    color: #0f172a;
    font-weight: 700;
}

.app-ui-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.app-ui-card--selected {
    border-color: #0d9488;
    background: #f0fdfa;
}

.app-ui-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-ui-card__name {
    font-weight: 600;
    font-size: 0.72rem;
    color: #0f172a;
}

.app-ui-card__badge {
    font-size: 0.58rem;
    font-weight: 600;
    color: #0d9488;
    background: #ccfbf1;
    padding: 1px 5px;
    border-radius: 4px;
}

.app-ui-card__price {
    font-size: 0.62rem;
    font-weight: 600;
    color: #64748b;
}

.app-ui-card__sub {
    font-size: 0.62rem;
    color: #64748b;
    line-height: 1.35;
}

.app-ui-btn {
    margin-top: auto;
    background: #0f172a;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.68rem;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
}

.app-ui-status-box {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-ui-status-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    color: #0f766e;
    text-transform: uppercase;
}

.app-ui-status-title {
    font-size: 0.75rem;
    color: #0f172a;
    font-weight: 700;
}

.app-ui-status-meta {
    font-size: 0.62rem;
    color: #475569;
}

.app-ui-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.app-ui-timeline-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    color: #64748b;
}

.app-ui-timeline-item--done {
    color: #0f766e;
    font-weight: 600;
}

.app-ui-timeline-item--active {
    color: #0f172a;
    font-weight: 600;
}

.app-ui-timeline-item .timeline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.app-ui-timeline-item--done .timeline-dot {
    background: #0d9488;
}

.app-ui-timeline-item--active .timeline-dot {
    background: #e8b760;
}

.mobile-flow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.flow-step-pill {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.flow-arrow {
    color: var(--color-accent);
    font-size: 0.72rem;
}

/* Common Section Wrapper */
.mobile-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
}

/* 2. User Journey Section */
.mobile-journey__grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .mobile-journey__grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.mobile-journey__editorial {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mobile-journey__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: rgba(69, 196, 176, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(69, 196, 176, 0.25);
}

.mobile-journey__editorial h3 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

.mobile-journey__editorial p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.mobile-journey__takeaway {
    padding: var(--space-4);
    background: #090c12;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin-top: var(--space-4);
}

.mobile-journey__takeaway strong {
    color: var(--color-accent);
}

.mobile-journey__steps-card {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}

.steps-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
}

.steps-card-kicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: var(--space-1);
}

.steps-card-header h4 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.journey-stage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}

.journey-stage-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.journey-stage-item:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.stage-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    padding-top: 2px;
}

.stage-body strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.stage-body p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 3. What We Build */
.mobile-build__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .mobile-build__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .mobile-build__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mobile-capability-card--wide {
        grid-column: span 4;
    }

    .mobile-capability-card--narrow {
        grid-column: span 2;
    }

    .mobile-capability-card--half {
        grid-column: span 3;
    }

    .mobile-capability-card--wide p,
    .mobile-capability-card--wide .mobile-feature-list {
        max-width: 46rem;
    }
}

.mobile-capability-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.mobile-capability-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.mobile-capability-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mobile-capability-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mobile-capability-card h3 {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.mobile-capability-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.mobile-feature-list {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-feature-list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    position: relative;
    padding-left: var(--space-4);
}

.mobile-feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: 1rem;
    line-height: 1;
}

/* 4. Complete Workflow Lifecycle */
.mobile-lifecycle__flow {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (min-width: 48rem) {
    .mobile-lifecycle__flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .mobile-lifecycle__flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.lifecycle-step-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lifecycle-step-card__num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.lifecycle-step-card__title {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.lifecycle-step-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.lifecycle-summary-banner {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: #090c12;
    border: 1px solid rgba(69, 196, 176, 0.2);
    border-radius: var(--radius-md);
}

.lifecycle-summary-banner__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(69, 196, 176, 0.15);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.lifecycle-summary-banner__text {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.lifecycle-summary-banner__text strong {
    color: var(--color-text-primary);
}

/* 5. Interaction & Input Design */
.mobile-interaction__layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .mobile-interaction__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.interaction-card {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
}

.interaction-card__badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: var(--space-2);
}

.interaction-card h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.interaction-card p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.interaction-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-5);
}

.interaction-point strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.interaction-point p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 6. Illustrative Product Flows (Showcase) */
.showcase-disclaimer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-10);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.showcase-disclaimer-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    color: var(--color-warning);
    background: rgba(232, 183, 96, 0.12);
    border: 1px solid rgba(232, 183, 96, 0.25);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-flow-block {
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.showcase-flow-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.showcase-flow-header {
    margin-bottom: var(--space-6);
}

.showcase-flow-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.showcase-flow-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    padding: 2px 8px;
    background: rgba(69, 196, 176, 0.1);
    border: 1px solid rgba(69, 196, 176, 0.2);
    border-radius: var(--radius-sm);
}

.showcase-flow-title h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.showcase-flow-desc {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.showcase-devices-row {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .showcase-devices-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Standalone Phone Frame (Double Bezel hardware look) */
.phone-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.phone-frame__bezel {
    background: #111823;
    border: 2px solid #233144;
    border-radius: 28px;
    padding: 10px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
}

.phone-frame__speaker {
    width: 40px;
    height: 4px;
    background: #080c13;
    border-radius: 2px;
    margin: 2px auto 8px;
}

.phone-frame__display {
    background: #f8fafc;
    border-radius: 18px;
    padding: 14px 12px;
    color: #0f172a;
    min-height: 290px;
    display: flex;
    flex-direction: column;
}

.phone-frame__caption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 4px;
}

/* Inside Phone App Screens */
.app-screen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    font-size: 0.72rem;
}

.app-screen__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 6px;
}

.app-screen__crumb {
    font-weight: 600;
    color: #64748b;
    font-size: 0.65rem;
}

.app-screen__pill {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    background: #e2e8f0;
    color: #334155;
    padding: 1px 5px;
    border-radius: 4px;
}

.app-screen__pill--teal {
    background: #ccfbf1;
    color: #0f766e;
}

.app-screen__heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
}

.app-screen__item {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-screen__item--active {
    border-color: #0d9488;
    background: #f0fdfa;
}

.app-screen__item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-screen__item-top strong {
    font-size: 0.72rem;
    color: #0f172a;
}

.app-screen__status-tag {
    font-size: 0.58rem;
    font-weight: 600;
    color: #0d9488;
    background: #ccfbf1;
    padding: 1px 5px;
    border-radius: 4px;
}

.app-screen__item-p {
    margin: 0;
    font-size: 0.62rem;
    color: #64748b;
    line-height: 1.35;
}

.app-screen__input-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.app-screen__label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #475569;
}

.app-screen__fake-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 8px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #0f172a;
}

.app-screen__cta {
    margin-top: auto;
    background: #0f172a;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.68rem;
    text-align: center;
    padding: 7px;
    border-radius: 6px;
    cursor: default;
}

.app-screen__cta--confirm {
    background: #0d9488;
}

.app-screen__cta--ghost {
    background: transparent;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.app-screen__summary-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
}

.summary-line span {
    color: #64748b;
}

.summary-line strong {
    color: #0f172a;
}

.app-screen__notice {
    font-size: 0.62rem;
    color: #475569;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 6px;
    line-height: 1.4;
}

.app-screen__notice span {
    font-weight: 600;
    color: #0f172a;
}

.app-screen__badge-status {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 6px;
    padding: 6px 8px;
}

.status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d9488;
}

.app-screen__timeline-box {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-entry {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.entry-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-entry--done .entry-circle {
    background: #ccfbf1;
    color: #0f766e;
    font-weight: bold;
}

.timeline-entry--active .entry-circle {
    background: #fef3c7;
    color: #d97706;
    font-weight: bold;
}

.entry-meta strong {
    display: block;
    font-size: 0.68rem;
    color: #0f172a;
}

.entry-meta span {
    font-size: 0.6rem;
    color: #64748b;
}

.app-screen__job-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-screen__job-card--active {
    border-color: #0d9488;
    background: #f0fdfa;
}

.job-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.job-badge {
    background: #e2e8f0;
    color: #475569;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.job-badge--urgent {
    background: #fee2e2;
    color: #b91c1c;
}

.job-time {
    color: #64748b;
}

.job-addr {
    font-size: 0.62rem;
    color: #64748b;
}

.app-screen__check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.65rem;
    color: #334155;
}

.app-screen__check-row--checked {
    background: #f0fdfa;
    border-color: #99f6e4;
    color: #0f766e;
    font-weight: 600;
}

.check-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

.app-screen__check-row--checked .check-box {
    background: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
}

.app-screen__photo-btn {
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-size: 0.65rem;
    color: #475569;
    font-weight: 600;
}

.app-screen__verified-box {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.verified-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0d9488;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.app-screen__verified-box strong {
    font-size: 0.78rem;
    color: #0f172a;
}

.app-screen__verified-box p {
    margin: 0;
    font-size: 0.62rem;
    color: #0f766e;
}

.verified-time {
    font-size: 0.58rem;
    color: #64748b;
    margin-top: 4px;
}

.app-screen__next-job-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.65rem;
}

.next-label {
    display: block;
    font-size: 0.58rem;
    color: #64748b;
    text-transform: uppercase;
}

.app-screen__slot-item {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-screen__slot-item--active {
    border-color: #0d9488;
    background: #f0fdfa;
}

.slot-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slot-badge {
    font-size: 0.58rem;
    font-weight: 600;
    color: #0d9488;
    background: #ccfbf1;
    padding: 1px 5px;
    border-radius: 4px;
}

.slot-sub {
    font-size: 0.62rem;
    color: #64748b;
}

.app-screen__date-strip {
    display: flex;
    gap: 4px;
}

.date-chip {
    flex: 1;
    text-align: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 2px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #475569;
}

.date-chip--active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.app-screen__slots-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.time-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: #334155;
}

.time-btn--selected {
    background: #f0fdfa;
    border-color: #0d9488;
    color: #0f766e;
}

.app-screen__booking-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.booking-card-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
}

.booking-tag {
    color: #0d9488;
    font-weight: 600;
}

.booking-date {
    color: #64748b;
}

.booking-meta {
    font-size: 0.62rem;
    color: #475569;
}

.app-screen__actions-row {
    display: flex;
    gap: 6px;
}

.mini-btn {
    flex: 1;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.62rem;
    font-weight: 600;
}

.mini-btn--cancel {
    background: #fee2e2;
    color: #991b1b;
}

/* 7. App + Backend Section */
.mobile-backend__layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .mobile-backend__layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.backend-narrative {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}

.backend-narrative h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.backend-narrative p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.backend-components-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 40rem) {
    .backend-components-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.backend-node {
    padding: var(--space-4) var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.backend-node strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.backend-node p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 8. Pragmatic Boundaries */
.mobile-boundaries__grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .mobile-boundaries__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .mobile-boundaries__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.boundary-box {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.boundary-box__num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    color: var(--color-warning);
    letter-spacing: 0.05em;
}

.boundary-box h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
}

.boundary-box p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* 9. Mobile Architecture & Device Capabilities */
.mobile-arch__layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .mobile-arch__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.arch-panel {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}

.arch-panel__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: var(--space-2);
}

.arch-panel h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.arch-panel p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.arch-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-5);
}

.arch-item strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.arch-item p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 10. Connected Systems */
.mobile-bridge__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .mobile-bridge__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 11. Security & Data Handling */
.mobile-security__grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .mobile-security__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .mobile-security__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.security-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    position: relative;
}

.security-card__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-bottom: var(--space-3);
}

.security-card h3,
.security-card h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.security-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* 12. Technical Capabilities */
.mobile-tech__grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .mobile-tech__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .mobile-tech__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tech-item {
    padding: var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color var(--transition-fast);
}

.tech-item:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.tech-item strong {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.tech-item span {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 13. Final CTA */
.mobile-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.mobile-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.mobile-cta__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin-inline: auto;
}

.mobile-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.mobile-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-body), 1.5vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.mobile-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .mobile-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .mobile-cta__actions .button {
        width: auto;
    }
}

/* ==========================================================================
   CYBERSECURITY & INFRASTRUCTURE SPECIALIST PAGE
   ========================================================================== */

/* 1. Hero Section */
.cyber-hero {
    position: relative;
    padding-block-start: clamp(var(--space-8), 6vw, var(--space-16));
    padding-block-end: clamp(var(--space-12), 8vw, var(--space-20));
    background: 
        radial-gradient(ellipse 65% 45% at 50% -10%, rgba(69, 196, 176, 0.08), transparent 70%),
        var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.cyber-hero__layout {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 64rem) {
    .cyber-hero__layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
        gap: var(--space-12);
    }
}

.cyber-hero__content {
    max-width: 44rem;
}

.cyber-hero h1 {
    margin-block: var(--space-4) var(--space-6);
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.cyber-hero__lead {
    font-size: clamp(var(--text-body), 1.6vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-block-end: var(--space-8);
}

.cyber-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .cyber-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

/* Hero Infrastructure Path Visual */
.cyber-infra-card {
    position: relative;
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cyber-infra-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-5);
}

.cyber-infra-card__tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cyber-infra-card__status {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cyber-flow-path {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flow-node {
    padding: var(--space-3) var(--space-4);
    background: #090d14;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    position: relative;
}

.flow-node__badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.flow-node--external .flow-node__badge { color: #94a3b8; }
.flow-node--firewall .flow-node__badge { color: #e8b760; }
.flow-node--access .flow-node__badge { color: var(--color-accent); }
.flow-node--internal .flow-node__badge { color: #34d399; }

.flow-node__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.flow-node__meta {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.flow-connector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--space-4);
    padding-block: 2px;
}

.flow-connector__line {
    width: 2px;
    height: 14px;
    background: rgba(69, 196, 176, 0.35);
    border-radius: 1px;
}

.flow-connector__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--color-text-muted);
}

.cyber-infra-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.infra-metric-pill {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

/* Common Section Wrapper */
.cyber-section {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
}

/* 2. Exposure First Section */
.cyber-exposure__grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .cyber-exposure__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.cyber-exposure__editorial {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cyber-editorial__kicker {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: rgba(69, 196, 176, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(69, 196, 176, 0.25);
}

.cyber-exposure__editorial h3 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

.cyber-exposure__editorial p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.cyber-editorial__quote {
    padding: var(--space-4);
    background: #090c12;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin-top: var(--space-4);
}

.cyber-editorial__quote strong {
    color: var(--color-accent);
}

.cyber-exposure__matrix {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .cyber-exposure__matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.exposure-comparison-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.exposure-comparison-card--hardened {
    border-color: rgba(69, 196, 176, 0.25);
    background: #0b1118;
}

.exposure-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.exposure-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.exposure-card__dot--warn { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }
.exposure-card__dot--good { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }

.exposure-card__header h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.exposure-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.exposure-card__list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
    position: relative;
    padding-left: var(--space-4);
}

.exposure-comparison-card--default .exposure-card__list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #f87171;
    font-size: 0.68rem;
    top: 1px;
}

.exposure-comparison-card--hardened .exposure-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #34d399;
    font-size: 0.72rem;
    top: 1px;
}

/* 3. What We Help With */
.cyber-services__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .cyber-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .cyber-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

.cyber-service-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.cyber-service-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.cyber-service-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cyber-service-card__tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cyber-service-card h3 {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
}

.cyber-service-card p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.cyber-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: grid;
    gap: var(--space-2);
}

.cyber-feature-list li {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
    position: relative;
    padding-left: var(--space-4);
}

.cyber-feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* 4. Hardening a Fresh Server */
.cyber-principle-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: #0b1118;
    border: 1px solid rgba(69, 196, 176, 0.25);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 48rem) {
    .cyber-principle-banner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
        padding: var(--space-5) var(--space-6);
    }
}

.principle-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: var(--weight-bold);
    color: #0f172a;
    background: var(--color-accent);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    width: fit-content;
}

.principle-content strong {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.principle-content p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.cyber-steps-flow {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .cyber-steps-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .cyber-steps-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cyber-step-card {
    padding: var(--space-5);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
    transition: border-color var(--transition-fast);
}

.cyber-step-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.cyber-step-card--critical {
    border-color: rgba(232, 183, 96, 0.35);
    background: #111419;
}

.cyber-step-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: var(--weight-bold);
    color: var(--color-accent);
}

.cyber-step-card--critical .cyber-step-num {
    color: #e8b760;
}

.cyber-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.cyber-step-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.cyber-hardening-footer {
    margin-top: var(--space-8);
}

.hardening-note {
    padding: var(--space-4) var(--space-5);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.hardening-note strong {
    color: var(--color-text-primary);
}

/* 5. Firewalls, Fail2ban & Service Exposure */
.cyber-distinctions__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .cyber-distinctions__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.distinction-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
}

.distinction-card--primary {
    border-color: rgba(69, 196, 176, 0.35);
    background: #0b1118;
}

.distinction-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.distinction-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.distinction-card h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.distinction-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.distinction-card__action {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.distinction-card__action strong {
    color: var(--color-text-primary);
}

/* 6. Secure Application Hosting */
.cyber-hosting__layout {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 64rem) {
    .cyber-hosting__layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.cyber-hosting__intro {
    max-width: 38rem;
}

.cyber-hosting__intro h2 {
    margin-block: var(--space-2) var(--space-4);
    font-size: clamp(1.85rem, 3.2vw, 2.45rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.cyber-hosting__intro p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.cyber-hosting__link-box {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cyber-hosting__link-box span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cyber-hosting__cards {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .cyber-hosting__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hosting-check-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.hosting-check-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.hosting-check-card__icon {
    color: var(--color-accent);
    font-size: 1.2rem;
    line-height: 1;
}

.hosting-check-card__body strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.hosting-check-card__body p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 7. Practical VPS Hardening: Technical Writing */
.cyber-article__panel {
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: #0b1018;
    border: 1px solid rgba(69, 196, 176, 0.25);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cyber-article__content {
    max-width: 48rem;
}

.cyber-article__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: rgba(69, 196, 176, 0.12);
    color: var(--color-accent);
    border: 1px solid rgba(69, 196, 176, 0.25);
}

.cyber-article h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
}

.cyber-article__lead {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

.cyber-article__summary {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-block: var(--space-4);
    border-block: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 48rem) {
    .cyber-article__summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.article-point strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.article-point span {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.cyber-article__action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 36rem) {
    .cyber-article__action {
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
    }
}

.article-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px;
    background: var(--color-accent);
    color: #0f172a;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: opacity var(--transition-fast);
    width: fit-content;
}

.article-button:hover {
    opacity: 0.9;
}

.article-button__icon {
    font-size: 0.9rem;
}

.article-disclaimer {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* 8. Connected Systems */
.cyber-bridges__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 48rem) {
    .cyber-bridges__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bridge-card {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--transition-fast);
}

.bridge-card:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.bridge-card__kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bridge-card h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.bridge-card p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.bridge-card a {
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--weight-semibold);
}

.bridge-card a:hover {
    text-decoration: underline;
}

/* 9. When Hardening Is Not Enough */
.cyber-boundaries__panel {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
}

.cyber-boundaries__grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (min-width: 48rem) {
    .cyber-boundaries__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .cyber-boundaries__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.boundary-item {
    padding: var(--space-4);
    background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.boundary-item__badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.boundary-item h3,
.boundary-item h4 {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.boundary-item p {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.cyber-boundaries__takeaway {
    padding: var(--space-4) var(--space-5);
    background: #0b1118;
    border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.cyber-boundaries__takeaway strong {
    color: var(--color-text-primary);
}

/* 10. Technical Capabilities & Security Baseline */
.cyber-checkpoints {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

@media (min-width: 36rem) {
    .cyber-checkpoints {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .cyber-checkpoints {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .cyber-checkpoints {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.checkpoint-item {
    padding: var(--space-3) var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkpoint-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.checkpoint-title {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
}

.checkpoint-desc {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.cyber-capabilities-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 36rem) {
    .cyber-capabilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .cyber-capabilities-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cap-pill--wide {
        grid-column: span 2;
    }

    .cap-pill--wide span {
        max-width: 32rem;
    }
}

.cap-pill {
    padding: var(--space-4);
    background: #0d1219;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color var(--transition-fast);
}

.cap-pill:hover {
    border-color: rgba(69, 196, 176, 0.25);
}

.cap-pill strong {
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.cap-pill span {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* 11. Final CTA */
.cyber-cta {
    padding-block: clamp(var(--space-12), 7vw, var(--space-20));
    background: var(--color-bg-page);
}

.cyber-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-8), 6vw, var(--space-16)) clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 85% 15%, rgba(69, 196, 176, 0.09), transparent 28rem),
        #0b0f17;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.cyber-cta__content {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin-inline: auto;
}

.cyber-cta h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.cyber-cta__lead {
    margin: 0 0 var(--space-8);
    font-size: clamp(var(--text-body), 1.5vw, var(--text-lead));
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.cyber-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    align-items: stretch;
}

@media (min-width: 36rem) {
    .cyber-cta__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .cyber-cta__actions .button {
        width: auto;
    }
}