:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.25rem;
    --font-size-6xl: 4rem;
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --spacing-5xl: 8rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --container-max: 1200px;
    --container-narrow: 800px;
    --nav-height: 72px;
}

[data-theme="dark"] {
    --color-bg-primary: #0a1628;
    --color-bg-secondary: #0f1f3a;
    --color-bg-tertiary: #152544;
    --color-bg-card: rgba(15, 31, 58, 0.88);
    --color-bg-card-hover: rgba(21, 37, 68, 0.97);
    --color-bg-glass: rgba(10, 22, 40, 0.75);
    --color-text-primary: #ffffff;
    --color-text-secondary: #94a3b8;
    --color-text-tertiary: #64748b;
    --color-accent: #2563eb;
    --color-accent-hover: #3b82f6;
    --color-accent-subtle: rgba(37, 99, 235, 0.18);
    --color-accent-text: #60a5fa;
    --color-cyan: #22d3ee;
    --color-cyan-subtle: rgba(34, 211, 238, 0.12);
    --color-warning: #f43f5e;
    --color-warning-subtle: rgba(244, 63, 94, 0.12);
    --color-success: #10b981;
    --color-success-subtle: rgba(16, 185, 129, 0.12);
    --color-border: rgba(148, 163, 184, 0.12);
    --color-border-strong: rgba(148, 163, 184, 0.22);
    --color-nav: rgba(10, 22, 40, 0.92);
    --color-gradient-start: #0a1628;
    --color-gradient-end: #0f1f3a;
    --color-node: rgba(96, 165, 250, 0.5);
    --color-line: rgba(96, 165, 250, 0.25);
    --color-line-active: #60a5fa;
}

[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f1f5f9;
    --color-bg-tertiary: #e2e8f0;
    --color-bg-card: rgba(255, 255, 255, 0.95);
    --color-bg-card-hover: rgba(241, 245, 249, 0.98);
    --color-bg-glass: rgba(255, 255, 255, 0.8);
    --color-text-primary: #0a1628;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94a3b8;
    --color-accent: #1e3a5f;
    --color-accent-hover: #2a4a7f;
    --color-accent-subtle: rgba(30, 58, 95, 0.08);
    --color-accent-text: #1e3a5f;
    --color-warning: #dc2626;
    --color-warning-subtle: rgba(220, 38, 38, 0.08);
    --color-success: #16a34a;
    --color-success-subtle: rgba(22, 163, 74, 0.08);
    --color-border: rgba(15, 23, 42, 0.08);
    --color-border-strong: rgba(15, 23, 42, 0.12);
    --color-nav: rgba(255, 255, 255, 0.92);
    --color-gradient-start: #ffffff;
    --color-gradient-end: #f1f5f9;
    --color-node: rgba(30, 58, 95, 0.3);
    --color-line: rgba(30, 58, 95, 0.15);
    --color-line-active: rgba(30, 58, 95, 0.5);
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    background: var(--color-accent);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    z-index: 10000;
    font-weight: var(--font-weight-semibold);
}
.skip-link:focus { top: var(--spacing-md); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-xl); }
.container--narrow { max-width: var(--container-narrow); }

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--color-nav);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: background var(--transition-base);
}
.nav__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}
.nav__logo-icon { color: var(--color-accent-text); display: flex; }
.nav__links { display: flex; list-style: none; gap: var(--spacing-xs); }
.nav__link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}
.nav__link:hover, .nav__link--active { color: var(--color-text-primary); background: var(--color-accent-subtle); }
.nav__cta { flex-shrink: 0; }
.ainna-nav-controls--inline { display: inline-flex; align-items: center; flex-shrink: 0; }
.ainna-nav-controls--inline .ainna-theme-switch { margin: 0; }
.ainna-nav-controls--inline .ainna-wc-link { display: none !important; }
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1001;
}
.nav__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-primary);
    z-index: 999;
    overflow-y: auto;
}
.nav__mobile[aria-hidden="false"] { display: block; }
.nav__mobile-inner { padding: var(--spacing-2xl) var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-xl); }
.nav__mobile-links { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.nav__mobile-link {
    display: block;
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.nav__mobile-link:hover, .nav__mobile-link--active { background: var(--color-accent-subtle); }
.nav__mobile-cta { margin-top: var(--spacing-lg); }
body.menu-open { overflow: hidden; }

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--secondary { background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-accent-subtle); border-color: var(--color-accent); }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--font-size-xs); }
.btn--lg { padding: 1rem 2rem; font-size: var(--font-size-base); }
.btn--block { width: 100%; }

/* SECTIONS */
.section { padding: var(--spacing-5xl) 0; position: relative; }
.section--alt { background: var(--color-bg-secondary); }
.section__header { text-align: center; margin-bottom: var(--spacing-4xl); max-width: 720px; margin-left: auto; margin-right: auto; }
.section__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent-text);
    margin-bottom: var(--spacing-md);
}
.section__title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--spacing-lg); }
.section__subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* HERO */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-height) + var(--spacing-4xl));
    padding-bottom: var(--spacing-4xl);
    position: relative;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, var(--color-accent-subtle) 0%, transparent 60%);
    pointer-events: none;
}
.hero__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4xl);
    align-items: center;
    position: relative;
    z-index: 1;
}
.hero__content { max-width: 600px; }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-text);
    margin-bottom: var(--spacing-xl);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hero__title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); margin-bottom: var(--spacing-xl); }
.hero__title span { color: var(--color-accent-text); }
.hero__desc { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--spacing-2xl); }
.hero__actions { display: flex; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-xl); }
.hero__trust { font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-style: italic; }
.hero__visual { position: relative; min-height: 480px; }

/* NeuralOps Corporate hero */
.n4c-hero {
    min-height: min(920px, 100svh);
    padding: calc(var(--nav-height) + clamp(40px, 6vh, 72px)) 0 clamp(56px, 8vh, 88px);
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
}
.n4c-hero__backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.n4c-hero__backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg-primary) 0%, transparent 45%, var(--color-bg-primary) 100%); }
.n4c-hero__grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(99, 102, 241, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, .14) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 76%, transparent); }
.n4c-hero__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(100px); opacity: .2; }
.n4c-hero__glow--one { top: -180px; left: -160px; background: #4f46e5; }
.n4c-hero__glow--two { right: -190px; bottom: -210px; background: #06b6d4; }
.n4c-hero__container { grid-template-columns: minmax(0, .94fr) minmax(520px, 1.06fr); gap: clamp(48px, 6vw, 88px); width: 100%; }
.n4c-hero__content { max-width: 640px; min-width: 0; }
.n4c-hero__eyebrow { margin-bottom: 24px; background: rgba(99, 102, 241, .08); border-color: rgba(129, 140, 248, .28); }
.n4c-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 5px rgba(34, 211, 238, .1), 0 0 18px #22d3ee; }
.n4c-hero__title { max-width: 660px; font-size: clamp(3.1rem, 5.2vw, 5.25rem); letter-spacing: -.055em; line-height: .98; margin-bottom: 24px; }
.n4c-hero__title span { background: linear-gradient(110deg, #818cf8 5%, #22d3ee 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.n4c-hero__desc { max-width: 590px; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.75; margin-bottom: 30px; }
.n4c-hero__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 590px; margin-bottom: 30px; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-border); }
.n4c-proof-item { padding: 14px 16px; background: color-mix(in srgb, var(--color-bg-primary) 94%, transparent); }
.n4c-proof-item strong, .n4c-proof-item span { display: block; }
.n4c-proof-item strong { margin-bottom: 3px; font-size: .85rem; color: var(--color-text-primary); }
.n4c-proof-item span { font-size: .68rem; line-height: 1.4; color: var(--color-text-tertiary); }
.n4c-hero__actions { margin-bottom: 20px; }
.n4c-hero__actions .btn { min-height: 54px; border-radius: 10px; }
.n4c-btn-primary { box-shadow: 0 12px 34px rgba(79, 70, 229, .28); }
.n4c-btn-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--transition-fast); }
.n4c-btn-primary:hover svg { transform: translateX(3px); }
.n4c-btn-secondary { background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent); backdrop-filter: blur(12px); }
.n4c-hero__trust { display: flex; align-items: center; gap: 8px; font-style: normal; }
.n4c-hero__trust svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #22d3ee; stroke-width: 1.7; }
.n4c-hero__visual {
    min-height: 600px;
    display: flex;
    align-items: center;
    min-width: 0;
}

@media (min-width: 1025px) {
    .n4c-hero__visual {
        transform: translateY(-12px);
    }
}
.n4c-console { position: relative; width: 100%; padding: 22px; border: 1px solid rgba(129, 140, 248, .25); border-radius: 22px; background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(4, 8, 20, .97)); box-shadow: 0 32px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .05); overflow: hidden; }
.n4c-console::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #818cf8, #22d3ee, transparent); }
.n4c-console__topbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.n4c-console__kicker, .n4c-request small, .n4c-router__core span, .n4c-console__footer span { display: block; color: #64748b; font-size: .61rem; font-weight: 700; letter-spacing: .14em; }
.n4c-console__topbar h2 { margin-top: 5px; font-size: 1.05rem; color: #f8fafc; }
.n4c-console__status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(34, 211, 238, .2); border-radius: 7px; color: #67e8f9; background: rgba(34, 211, 238, .06); font-size: .57rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.n4c-console__status i { width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }
.n4c-request { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 20px 0; padding: 14px; border: 1px solid rgba(148, 163, 184, .12); border-radius: 12px; background: rgba(15, 23, 42, .62); }
.n4c-request__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #a5b4fc; background: rgba(99, 102, 241, .12); }
.n4c-request__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.n4c-request strong, .n4c-request small { display: block; }
.n4c-request strong { margin-top: 3px; color: #e2e8f0; font-size: .8rem; }
.n4c-request__volume { color: #94a3b8; font: 600 .68rem/1 var(--font-primary); white-space: nowrap; }
.n4c-router { position: relative; display: grid; place-items: center; min-height: 116px; }
.n4c-router__core { position: relative; z-index: 2; width: min(280px, 82%); padding: 16px; text-align: center; border: 1px solid rgba(34, 211, 238, .35); border-radius: 13px; background: linear-gradient(135deg, rgba(34, 211, 238, .1), rgba(99, 102, 241, .13)); box-shadow: 0 0 36px rgba(34, 211, 238, .08); }
.n4c-router__core strong, .n4c-router__core small { display: block; }
.n4c-router__core strong { margin: 5px 0; color: #f8fafc; font-size: .9rem; letter-spacing: .05em; }
.n4c-router__core small { color: #94a3b8; font-size: .62rem; }
.n4c-router__line { position: absolute; inset: 50% 4% auto; height: 1px; background: linear-gradient(90deg, transparent, #4f46e5 16%, #22d3ee 50%, #4f46e5 84%, transparent); opacity: .6; }
.n4c-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.n4c-layer { min-width: 0; padding: 12px 10px; border: 1px solid rgba(148, 163, 184, .11); border-radius: 10px; background: rgba(15, 23, 42, .55); }
.n4c-layer span, .n4c-layer strong, .n4c-layer small { display: block; }
.n4c-layer span { color: #475569; font-size: .56rem; }
.n4c-layer strong { margin: 9px 0 5px; color: #cbd5e1; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n4c-layer small { color: #64748b; font-size: .57rem; }
.n4c-layer--active { border-color: rgba(34, 211, 238, .42); background: rgba(34, 211, 238, .08); }
.n4c-layer--active span, .n4c-layer--active small { color: #67e8f9; }
.n4c-layer--active strong { color: #f8fafc; }
.n4c-console__footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, .12); }
.n4c-console__footer div { padding-left: 10px; border-left: 2px solid rgba(99, 102, 241, .45); }
.n4c-console__footer strong { display: block; margin-top: 5px; color: #e2e8f0; font-size: .75rem; }
.n4c-float-card { position: absolute; z-index: 3; border: 1px solid rgba(148, 163, 184, .18); background: rgba(9, 15, 30, .88); backdrop-filter: blur(14px); box-shadow: 0 16px 38px rgba(0, 0, 0, .3); }
.n4c-float-card--audit { left: -24px; bottom: 46px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; }
.n4c-float-card--audit svg { width: 21px; height: 21px; fill: none; stroke: #67e8f9; stroke-width: 1.6; }
.n4c-float-card--audit span, .n4c-float-card--audit strong { display: block; }
.n4c-float-card--audit span { color: #64748b; font-size: .62rem; }
.n4c-float-card--audit strong { margin-bottom: 2px; color: #e2e8f0; font-size: .7rem; }
.n4c-float-card--saving { right: -22px; top: 76px; padding: 12px 16px; border-radius: 11px; }
.n4c-float-card--saving span, .n4c-float-card--saving strong { display: block; }
.n4c-float-card--saving span { color: #64748b; font-size: .55rem; font-weight: 700; letter-spacing: .1em; }
.n4c-float-card--saving strong { margin-top: 4px; color: #67e8f9; font-size: 1.15rem; }

/* ARCHITECTURE DIAGRAM */
.arch-diagram {
    position: relative;
    width: 100%;
    min-height: 520px;
    background: #000000 !important;
    border: 4px solid #ffffff !important;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: var(--spacing-xl);
    box-shadow: 0 18px 55px rgba(0,0,0,0.95);
}

/* === TAK CONTRAST FIX — FINAL ULTRA HIGH CONTRAST === */
.arch-diagram {
    background: #000000 !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.95) !important;
}

.arch-diagram__title {
    text-align: center !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    margin-bottom: 14px !important;
    text-shadow: 0 3px 14px rgba(0,0,0,1) !important;
}

.arch-diagram__flow { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: var(--spacing-xs); 
    position: relative;
}

/* === TOP NODES: INPUT REQUEST / SMART ROUTING / OUTPUT === */
.arch-node {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    padding: 14px 22px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: 3px solid #ffffff !important;
    min-width: 222px !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    letter-spacing: 0.015em !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.95) !important;
    background: #1f2937 !important;
}
.arch-node--visible,
.arch-node.active {
    opacity: 1 !important;
}

.arch-node--input {
    background: #334155 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
.arch-node--routing {
    background: #1e40af !important;
    border-color: #bae6fd !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px #bae6fd !important;
}
.arch-node--output {
    background: #14532d !important;
    border-color: #86efac !important;
    color: #ffffff !important;
}
.arch-node--input { 
    border-color: #ffffff; 
    color: #ffffff !important; 
    background: #374151;
}
.arch-node--routing { 
    border-color: #bae6fd; 
    color: #ffffff !important; 
    background: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.85);
}
.arch-node--output { 
    border-color: #86efac; 
    color: #ffffff !important; 
    background: #14532d;
}

.arch-node--layers { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 6px; 
    min-width: 360px; 
    padding: var(--spacing-sm); 
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-md);
}

/* ================================================
   TAK CONTRAST FIX — FINAL (Ultra High Contrast)
   Applied to "Enterprise AI Architecture — Live Neural Routing"
   ================================================ */

/* Diagram container */
.arch-diagram {
    background: #000000 !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 18px 55px rgba(0,0,0,0.95) !important;
}

/* Title */
.arch-diagram__title {
    color: #ffffff !important;
    font-size: 1.38rem !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 12px #000 !important;
    letter-spacing: 0.015em !important;
}

/* === 3 MAIN NODES (white text + strong borders) === */
.arch-node {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.85) !important;
    padding: 13px 18px !important;
    opacity: 1 !important;
}
.arch-node--input  { background: #334155 !important; border-color: #ffffff !important; }
.arch-node--routing { background: #1e40af !important; border-color: #bae6fd !important; box-shadow: 0 0 0 4px #bae6fd !important; }
.arch-node--output { background: #14532d !important; border-color: #86efac !important; }

/* === 6 LAYERS: INACTIVE = bright white text on dark === */
.arch-layer {
    background: #0f172a !important;
    color: #ffffff !important;           /* pure white */
    border: 2px solid #e5e7eb !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    padding: 9px 12px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* Active = vivid saturated color + pure white text */
.arch-layer.active {
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px #ffffff, 0 8px 20px rgba(0,0,0,0.7) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}
.arch-layer--rules.active    { background: #059669 !important; }
.arch-layer--parser.active   { background: #0e7490 !important; }
.arch-layer--local.active    { background: #1e40af !important; }
.arch-layer--agent.active    { background: #5b21b6 !important; }
.arch-layer--flagship.active { background: #9f1239 !important; }
.arch-layer--human.active    { background: #92400e !important; }

/* Bottom labels */
.arch-label {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 11px !important;
}
.arch-label.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-weight: 900 !important;
}

/* ============================================
   TAK CONTRAST FIX — ULTRA (FINAL OVERRIDE)
   This makes "Enterprise AI Architecture — Live Neural Routing"
   highly readable with strong contrast.
   ============================================ */
.arch-diagram {
    background: #000000 !important;
    border: 4px solid #ffffff !important;
}

.arch-diagram__title {
    color: #ffffff !important;
    font-size: 1.32rem !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 14px #000 !important;
    letter-spacing: 0.02em !important;
}

/* === 3 MAIN NODES (very strong) === */
.arch-node {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9) !important;
    opacity: 1 !important;
    padding: 13px 20px !important;
}
.arch-node--input  { background: #334155 !important; border-color: #ffffff !important; }
.arch-node--routing { background: #1e40af !important; border-color: #bae6fd !important; box-shadow: 0 0 0 4px #bae6fd !important; }
.arch-node--output { background: #14532d !important; border-color: #86efac !important; }

/* === 6 LAYERS - INACTIVE: pure white text on dark === */
.arch-layer {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85) !important;
    padding: 9px 13px !important;
}

/* === 6 LAYERS - ACTIVE: vivid color + pure white text === */
.arch-layer.active {
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px #ffffff, 0 8px 22px rgba(0,0,0,0.8) !important;
    font-weight: 900 !important;
}
.arch-layer--rules.active     { background: #059669 !important; }
.arch-layer--parser.active    { background: #0e7490 !important; }
.arch-layer--local.active     { background: #1e40af !important; }
.arch-layer--agent.active     { background: #5b21b6 !important; }
.arch-layer--flagship.active  { background: #9f1239 !important; }
.arch-layer--human.active     { background: #92400e !important; }

/* === BOTTOM LABELS === */
.arch-label {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
}
.arch-label.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-weight: 900 !important;
}

/* Animated signal lines */
.arch-flow-line {
    width: 2px;
    height: 16px;
    background: linear-gradient(to bottom, var(--color-line), var(--color-line-active));
    position: relative;
    overflow: hidden;
}
.arch-flow-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--color-cyan), transparent);
    animation: flowPulse 1.3s linear infinite;
}
.arch-flow-line--active { height: 20px; }

@keyframes flowPulse {
    0% { top: -100%; }
    100% { top: 220%; }
}

.arch-arrow {
    width: 2px;
    height: 16px;
    background: var(--color-line);
    position: relative;
}
.arch-arrow::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-line-active);
}
.arch-arrow.signal {
    background: var(--color-line-active);
    box-shadow: 0 0 10px var(--color-cyan);
}
.arch-arrow.signal::after {
    border-top-color: var(--color-cyan);
}

.arch-labels { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--spacing-sm); }
.arch-label { 
    font-size: 10px; 
    padding: 4px 10px; 
    border-radius: 999px; 
    background: #1e293b; 
    color: #e0f2fe; 
    border: 1px solid #475569;
    font-weight: 600;
    transition: all .2s ease;
    letter-spacing: 0.02em;
}
.arch-label.active {
    background: #0ea5e9;
    color: #0a1628;
    border-color: #38bdf8;
    font-weight: 700;
}

/* CARDS */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition-base);
}
.card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
}
.card__icon--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.card__icon--success { background: var(--color-success-subtle); color: var(--color-success); }
.card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); }
.card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* GRID LAYOUTS */
.grid { display: grid; gap: var(--spacing-xl); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* PROBLEM CARDS */
.problem-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}
.problem-card__num { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-warning); opacity: 0.3; line-height: 1; margin-bottom: var(--spacing-sm); }
.problem-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); }
.problem-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* HALLUCINATION VISUAL */
.hallucination-visual { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-2xl); text-align: center; }
.hallucination-visual__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xl); color: var(--color-warning); }
.hallucination-visual__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
.hallucination-item { padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-tertiary); font-size: var(--font-size-sm); color: var(--color-text-secondary); position: relative; overflow: hidden; }
.hallucination-item--conflict { border-color: var(--color-warning); }
.hallucination-item--conflict::before { content: '⚠'; position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); font-size: var(--font-size-xs); }

/* METHOD LAYERS — Enhanced */
.method-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.method-layer {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(0.23,1,0.32,1), border-color .2s ease, box-shadow .25s ease;
}
.method-layer::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    height: 3px; 
    background: linear-gradient(to right, var(--color-accent), var(--color-cyan)); 
    transform: scaleX(0.6);
    transform-origin: left;
    transition: transform .4s ease;
}
.method-layer:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.method-layer:hover::before { transform: scaleX(1); }

.method-layer__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-accent-subtle);
    color: var(--color-accent-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    transition: all .2s ease;
}
.method-layer:hover .method-layer__num {
    background: var(--color-accent);
    color: #fff;
}
.method-layer__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); }
.method-layer__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.method-central { text-align: center; padding: var(--spacing-3xl) 0; }
.method-central__text { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-accent-text); }

/* ROUTING SIMULATOR — Enhanced */
.simulator { 
    background: var(--color-bg-card); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-xl); 
    padding: var(--spacing-2xl); 
    overflow: hidden; 
    position: relative;
}
.simulator__tasks { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-bottom: var(--spacing-2xl); }
.simulator__task {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.simulator__task:hover { border-color: var(--color-accent); }
.simulator__task--active { 
    border-color: var(--color-accent); 
    color: #fff; 
    background: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.simulator__result { 
    padding: var(--spacing-xl); 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--color-border); 
    background: var(--color-bg-secondary); 
    min-height: 128px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    transition: all var(--transition-base);
    position: relative;
}
.simulator__result::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(96,165,250,0.06), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
.simulator__result.route-active::before { opacity: 1; }

.simulator__route { 
    font-size: var(--font-size-2xl); 
    font-weight: var(--font-weight-bold); 
    margin-bottom: var(--spacing-sm);
    transition: all .2s ease;
}
.simulator__route--rules { color: var(--color-success); }
.simulator__route--parser { color: var(--color-cyan); }
.simulator__route--local { color: var(--color-accent-text); }
.simulator__route--flagship { color: var(--color-warning); }
.simulator__route--human { color: #f59e0b; }

.simulator__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.simulator__factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-xl); }
.simulator__factor { padding: var(--spacing-sm); text-align: center; border-radius: var(--radius-md); background: var(--color-bg-tertiary); border: 1px solid var(--color-border); }
.simulator__factor-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

.simulator__controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}
.simulator__auto {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    color: var(--color-accent-text);
    cursor: pointer;
}
.simulator__auto.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* DETACHED SYSTEMS */
.systems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.system-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); transition: all var(--transition-base); }
.system-card--error { border-color: var(--color-warning); animation: systemPulse 2s ease-in-out infinite; }
@keyframes systemPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 20px 4px rgba(239, 68, 68, 0.15); }
}
.system-card__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); }
.system-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.system-card--error .system-card__dot { background: var(--color-warning); }
.system-card__features { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.system-card__feature { font-size: var(--font-size-xs); color: var(--color-text-tertiary); padding-left: var(--spacing-md); position: relative; }
.system-card__feature::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-tertiary); }

/* SEGMENTATION */
.segmentation-flow { display: flex; flex-direction: column; gap: var(--spacing-sm); max-width: 600px; margin: 0 auto; }
.segment-step { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-tertiary); opacity: 0.4; transition: all 0.5s ease; }
.segment-step--active { opacity: 1; border-color: var(--color-accent); background: var(--color-accent-subtle); }
.segment-step__num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); background: var(--color-bg-secondary); color: var(--color-text-tertiary); flex-shrink: 0; }
.segment-step--active .segment-step__num { background: var(--color-accent); color: #fff; }
.segment-step__text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.segment-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-3xl); }

/* COMPARISON TABLE */
.comparison { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; }
.comparison__table { width: 100%; border-collapse: collapse; }
.comparison__table th, .comparison__table td { padding: var(--spacing-md) var(--spacing-lg); text-align: left; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.comparison__table th { background: var(--color-bg-tertiary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.comparison__table th:first-child { width: 20%; }
.comparison__table th:nth-child(2) { color: var(--color-accent-text); }
.comparison__table th:nth-child(3) { color: var(--color-warning); }
.comparison__table td:nth-child(2) { color: var(--color-success); }
.comparison__table td:nth-child(3) { color: var(--color-text-secondary); }
.comparison__highlights { display: flex; flex-wrap: wrap; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-2xl); }
.comparison__highlight { 
    padding: 6px 16px; 
    border-radius: 999px; 
    background: var(--color-accent-subtle); 
    border: 1px solid var(--color-border); 
    font-size: var(--font-size-sm); 
    font-weight: 700; 
    color: var(--color-accent-text);
    transition: all .2s ease;
}
.comparison__highlight:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

/* ENTERPRISE SCENARIO */
.scenario { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); }
.scenario__side { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-2xl); position: relative; }
.scenario__side--flagship { border-top: 3px solid var(--color-warning); }
.scenario__side--neural { border-top: 3px solid var(--color-accent); }
.scenario__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-lg); }
.scenario__side--flagship .scenario__label { color: var(--color-warning); }
.scenario__side--neural .scenario__label { color: var(--color-accent-text); }
.scenario__steps { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.scenario__step { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); font-size: var(--font-size-sm); border: 1px solid var(--color-border); background: var(--color-bg-tertiary); display: flex; align-items: center; gap: var(--spacing-sm); }
.scenario__step--neg { border-color: var(--color-warning); color: var(--color-text-secondary); }
.scenario__step--pos { border-color: var(--color-accent); color: var(--color-text-secondary); }
.scenario__step-icon { font-size: var(--font-size-lg); flex-shrink: 0; }
.scenario-conclusion { text-align: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-top: var(--spacing-3xl); }

/* USE CASE CARDS — Enhanced */
.usecase-card { 
    background: var(--color-bg-card); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-lg); 
    padding: var(--spacing-xl); 
    transition: transform .25s cubic-bezier(0.23,1,0.32,1), border-color .2s ease, box-shadow .25s ease;
}
.usecase-card:hover { 
    border-color: var(--color-accent); 
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.usecase-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); }
.usecase-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); }
.usecase-card__item { font-size: var(--font-size-sm); color: var(--color-text-secondary); padding-left: var(--spacing-md); position: relative; }
.usecase-card__item::before { content: '→'; position: absolute; left: 0; color: var(--color-accent-text); font-size: var(--font-size-xs); }
.usecase-card__layers { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

.usecase-layer-tag { 
    padding: 2px 10px; 
    border-radius: 999px; 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.06em;
    transition: transform .15s ease, box-shadow .15s ease;
}
.usecase-card:hover .usecase-layer-tag { transform: translateY(-1px); }

.usecase-layer-tag--rules { background: var(--color-success-subtle); color: var(--color-success); }
.usecase-layer-tag--parser { background: var(--color-cyan-subtle); color: var(--color-cyan); }
.usecase-layer-tag--local { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.usecase-layer-tag--flagship { background: var(--color-warning-subtle); color: var(--color-warning); }
.usecase-layer-tag--human { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* GOVERNANCE */
.governance-flow { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; padding: var(--spacing-2xl) 0; }
.governance-step { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-card); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: center; min-width: 120px; }
.governance-arrow { color: var(--color-accent-text); font-size: var(--font-size-xl); }
.governance-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-2xl); }
.governance-pillar { padding: var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-card); text-align: center; }
.governance-pillar__icon { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-sm); }
.governance-pillar__text { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* SUSTAINABILITY */
.sustainability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.sustainability-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; }
.sustainability-card__icon { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-md); }
.sustainability-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); }
.sustainability-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* CTA SECTION */
.cta-section { background: var(--color-accent-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-4xl); text-align: center; position: relative; overflow: hidden; }
.cta-section__title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-lg); }
.cta-section__text { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--spacing-2xl); max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-section__actions { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; }

/* CONTACT FORM */
.contact-form { max-width: 640px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-xs); color: var(--color-text-secondary); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group--honeypot { position: absolute; left: -9999px; opacity: 0; }
.form-consent { display: flex; align-items: flex-start; gap: var(--spacing-sm); margin: var(--spacing-lg) 0; }
.form-consent input[type="checkbox"] { margin-top: 3px; accent-color: var(--color-accent); }
.form-consent label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); line-height: var(--line-height-normal); }
.form-error { font-size: var(--font-size-xs); color: var(--color-warning); margin-top: var(--spacing-xs); }
.form-success { padding: var(--spacing-xl); border-radius: var(--radius-lg); background: var(--color-success-subtle); border: 1px solid var(--color-success); text-align: center; }
.form-success__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-success); margin-bottom: var(--spacing-sm); }

/* REVEAL ANIMATION CLASSES */
.footer { padding: var(--spacing-4xl) 0 var(--spacing-2xl); border-top: 1px solid var(--color-border); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--spacing-2xl); margin-bottom: var(--spacing-3xl); }
.footer__logo { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; color: var(--color-text-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); }
.footer__desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.footer__heading { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-lg); color: var(--color-text-primary); }
.footer__links ul { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.footer__links a { text-decoration: none; color: var(--color-text-secondary); font-size: var(--font-size-sm); transition: color var(--transition-fast); }
.footer__links a:hover { color: var(--color-accent-text); }
.footer__email { text-decoration: none; color: var(--color-accent-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* BENEFIT CARDS */
.benefit-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); display: flex; align-items: flex-start; gap: var(--spacing-lg); }
.benefit-card__num { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-accent-text); opacity: 0.3; line-height: 1; flex-shrink: 0; }
.benefit-card__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); }
.benefit-card__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* DARK SECTION (WHEN FLAGSHIP MATTERS) */
.dark-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-3xl); position: relative; overflow: hidden; }
.dark-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, var(--color-accent-subtle) 0%, transparent 60%); pointer-events: none; }
.dark-section__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); }
.dark-item { padding: var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-accent-subtle); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-align: center; }

/* REVEAL ANIMATION CLASSES */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal--visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ================================================
   TAK CONTRAST FIX — ULTIMATE (FINAL)
   Pure black + pure white text + strong borders for maximum readability
   ================================================ */
#heroDiagram,
#heroDiagram.arch-diagram,
.arch-diagram {
    background: #000000 !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.95) !important;
}

/* Title */
#heroDiagram .arch-diagram__title,
.arch-diagram__title {
    color: #ffffff !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 14px #000000 !important;
    letter-spacing: 0.02em !important;
}

/* === 3 BIG NODES === */
#heroDiagram .arch-node,
.arch-diagram .arch-node {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    font-size: 15.5px !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    padding: 13px 18px !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9) !important;
}
#heroDiagram .arch-node--input,
.arch-diagram .arch-node--input {
    background: #334155 !important;
    border-color: #ffffff !important;
}
#heroDiagram .arch-node--routing,
.arch-diagram .arch-node--routing {
    background: #1e40af !important;
    border-color: #bae6fd !important;
    box-shadow: 0 0 0 4px #bae6fd !important;
}
#heroDiagram .arch-node--output,
.arch-diagram .arch-node--output {
    background: #14532d !important;
    border-color: #86efac !important;
}

/* === 6 PROCESSING LAYERS (INACTIVE = pure white text) === */
#heroDiagram .arch-layer,
.arch-diagram .arch-layer {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 9px 12px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* ACTIVE LAYERS: vivid bg + pure white text */
#heroDiagram .arch-layer.active,
.arch-diagram .arch-layer.active {
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 3px #ffffff, 0 8px 22px rgba(0,0,0,0.8) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}
#heroDiagram .arch-layer--rules.active,
.arch-diagram .arch-layer--rules.active     { background: #059669 !important; }
#heroDiagram .arch-layer--parser.active,
.arch-diagram .arch-layer--parser.active    { background: #0e7490 !important; }
#heroDiagram .arch-layer--local.active,
.arch-diagram .arch-layer--local.active     { background: #1e40af !important; }
#heroDiagram .arch-layer--agent.active,
.arch-diagram .arch-layer--agent.active     { background: #5b21b6 !important; }
#heroDiagram .arch-layer--flagship.active,
.arch-diagram .arch-layer--flagship.active  { background: #9f1239 !important; }
#heroDiagram .arch-layer--human.active,
.arch-diagram .arch-layer--human.active     { background: #92400e !important; }

/* === BOTTOM LABELS === */
#heroDiagram .arch-label,
.arch-diagram .arch-label {
    background: #1f2937 !important;
    color: #ffffff !important;
    border: 2px solid #d1d5db !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
}
#heroDiagram .arch-label.active,
.arch-diagram .arch-label.active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 0 0 2px #ffffff;
}


/* ============================================
   TAK CONTRAST — FINAL CLEAN MAX (2026-07-27)
   Black background + pure white text + thick borders
   ============================================ */
#heroDiagram.arch-diagram,
.arch-diagram#heroDiagram {
    background:#000000 !important;
    border:4px solid #ffffff !important;
}
#heroDiagram .arch-diagram__title {
    color:#ffffff !important;
    font-size:1.5rem !important;
    font-weight:900 !important;
    text-shadow:0 3px 14px #000 !important;
}
/* Nodes */
#heroDiagram .arch-node {
    background:#1f2937 !important;
    color:#ffffff !important;
    border:3px solid #ffffff !important;
    font-size:15.5px !important;
    font-weight:900 !important;
    opacity:1 !important;
    padding:13px 19px !important;
    text-shadow:0 2px 5px rgba(0,0,0,.85) !important;
}
#heroDiagram .arch-node--input { background:#334155 !important; }
#heroDiagram .arch-node--routing { background:#1e40af !important; box-shadow:0 0 0 4px #bae6fd !important; }
#heroDiagram .arch-node--output { background:#14532d !important; }
/* Layers inactive = bright white */
#heroDiagram .arch-layer {
    background:#0f172a !important;
    color:#ffffff !important;
    border:2px solid #e5e7eb !important;
    font-size:13px !important;
    font-weight:800 !important;
    padding:9px 13px !important;
}
/* Layers active */
#heroDiagram .arch-layer.active {
    color:#ffffff !important;
    border-color:#ffffff !important;
    box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.75) !important;
    font-weight:900 !important;
}
#heroDiagram .arch-layer--rules.active { background:#059669 !important; }
#heroDiagram .arch-layer--parser.active { background:#0e7490 !important; }
#heroDiagram .arch-layer--local.active { background:#1e40af !important; }
#heroDiagram .arch-layer--agent.active { background:#5b21b6 !important; }
#heroDiagram .arch-layer--flagship.active { background:#9f1239 !important; }
#heroDiagram .arch-layer--human.active { background:#92400e !important; }
/* Labels */
#heroDiagram .arch-label {
    background:#1f2937 !important;
    color:#ffffff !important;
    border:2px solid #d1d5db !important;
    font-weight:700 !important;
}
#heroDiagram .arch-label.active {
    background:#ffffff !important;
    color:#000000 !important;
    font-weight:900 !important;
}

/* TAK CONTRAST — LAST WORD (ultra specific for the hero diagram) */
#heroDiagram { background:#000 !important; border-color:#fff !important; }
#heroDiagram .arch-diagram__title { color:#fff !important; font-size:1.55rem !important; font-weight:900 !important; text-shadow:0 3px 16px #000 !important; }
#heroDiagram .arch-node { color:#fff !important; background:#1f2937 !important; border-color:#fff !important; font-weight:900 !important; font-size:15.5px !important; }
#heroDiagram .arch-node--input { background:#334155 !important; }
#heroDiagram .arch-node--routing { background:#1e3a8a !important; }
#heroDiagram .arch-node--output { background:#14532d !important; }
#heroDiagram .arch-layer { color:#fff !important; background:#0f172a !important; border-color:#e2e8f0 !important; font-weight:800 !important; }
#heroDiagram .arch-layer.active { color:#fff !important; border-color:#fff !important; box-shadow:0 0 0 3px #fff !important; }
#heroDiagram .arch-layer--rules.active { background:#059669 !important; }
#heroDiagram .arch-layer--parser.active { background:#0e7490 !important; }
#heroDiagram .arch-layer--local.active { background:#1e40af !important; }
#heroDiagram .arch-layer--agent.active { background:#5b21b6 !important; }
#heroDiagram .arch-layer--flagship.active { background:#9f1239 !important; }
#heroDiagram .arch-layer--human.active { background:#92400e !important; }
#heroDiagram .arch-label { color:#fff !important; background:#1f2937 !important; border-color:#cbd5e1 !important; }
#heroDiagram .arch-label.active { background:#fff !important; color:#000 !important; font-weight:900 !important; }

/* =========================================
   TAK CONTRAST — ABSOLUTE FINAL (2026-07-27)
   Pure black + PURE #ffffff text + thick borders
   This block is last and uses high specificity
   ========================================= */
#heroDiagram.arch-diagram,
#heroDiagram { 
    background:#000000 !important; 
    border:4px solid #ffffff !important; 
}
#heroDiagram .arch-diagram__title { 
    color:#ffffff !important; 
    font-size:1.6rem !important; 
    font-weight:900 !important; 
    text-shadow:0 3px 16px #000 !important; 
}
#heroDiagram .arch-node { 
    color:#ffffff !important; 
    background:#1f2937 !important; 
    border:3.5px solid #ffffff !important; 
    font-size:16px !important; 
    font-weight:900 !important; 
    opacity:1 !important; 
    padding:14px 20px !important; 
    text-shadow:0 2px 6px rgba(0,0,0,.9) !important;
}
#heroDiagram .arch-node--input { background:#374151 !important; }
#heroDiagram .arch-node--routing { background:#1e3a8a !important; box-shadow:0 0 0 4px #bae6fd !important; }
#heroDiagram .arch-node--output { background:#14532d !important; }

/* Layers: inactive = pure white text */
#heroDiagram .arch-layer { 
    color:#ffffff !important; 
    background:#0f172a !important; 
    border:2px solid #e5e7eb !important; 
    font-size:13.5px !important; 
    font-weight:800 !important; 
    padding:9px 13px !important;
}
/* Layers active */
#heroDiagram .arch-layer.active { 
    color:#ffffff !important; 
    border-color:#ffffff !important; 
    box-shadow:0 0 0 3px #fff,0 8px 22px rgba(0,0,0,.8) !important; 
    font-weight:900 !important;
}
#heroDiagram .arch-layer--rules.active { background:#059669 !important; }
#heroDiagram .arch-layer--parser.active { background:#0e7490 !important; }
#heroDiagram .arch-layer--local.active { background:#1e40af !important; }
#heroDiagram .arch-layer--agent.active { background:#5b21b6 !important; }
#heroDiagram .arch-layer--flagship.active { background:#9f1239 !important; }
#heroDiagram .arch-layer--human.active { background:#92400e !important; }

/* Labels */
#heroDiagram .arch-label { 
    color:#ffffff !important; 
    background:#1f2937 !important; 
    border:2px solid #d1d5db !important; 
    font-weight:700 !important; 
    font-size:12px !important;
}
#heroDiagram .arch-label.active { 
    background:#ffffff !important; 
    color:#000000 !important; 
    font-weight:900 !important;
}