/* ===== PREVENT HORIZONTAL OVERFLOW ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img, video, canvas, svg {
  max-width: 100%;
}


:root {
            --color-white: rgba(255, 255, 255, 1);
            --color-black: rgba(0, 0, 0, 1);
            --color-cream-50: rgba(252, 252, 249, 1);
            --color-cream-100: rgba(255, 255, 253, 1);
            --color-gray-200: rgba(245, 245, 245, 1);
            --color-gray-300: rgba(167, 169, 169, 1);
            --color-gray-400: rgba(119, 124, 124, 1);
            --color-slate-500: rgba(98, 108, 113, 1);
            --color-brown-600: rgba(94, 82, 64, 1);
            --color-charcoal-700: rgba(31, 33, 33, 1);
            --color-charcoal-800: rgba(38, 40, 40, 1);
            --color-slate-900: rgba(19, 52, 59, 1);
            --color-teal-300: rgba(50, 184, 198, 1);
            --color-teal-400: rgba(45, 166, 178, 1);
            --color-teal-500: rgba(33, 128, 141, 1);
            --color-teal-600: rgba(29, 116, 128, 1);
            --color-teal-700: rgba(26, 104, 115, 1);
            --color-teal-800: rgba(41, 150, 161, 1);
            --color-red-400: rgba(255, 84, 89, 1);
            --color-red-500: rgba(192, 21, 47, 1);
            --color-orange-400: rgba(230, 129, 97, 1);
            --color-orange-500: rgba(168, 75, 47, 1);

            --color-brown-600-rgb: 94, 82, 64;
            --color-teal-500-rgb: 33, 128, 141;
            --color-slate-900-rgb: 19, 52, 59;
            --color-slate-500-rgb: 98, 108, 113;
            --color-red-500-rgb: 192, 21, 47;
            --color-red-400-rgb: 255, 84, 89;
            --color-orange-500-rgb: 168, 75, 47;
            --color-orange-400-rgb: 230, 129, 97;

            --color-bg-1: rgba(59, 130, 246, 0.08);
            --color-bg-2: rgba(245, 158, 11, 0.08);
            --color-bg-3: rgba(34, 197, 94, 0.08);
            --color-bg-4: rgba(239, 68, 68, 0.08);
            --color-bg-5: rgba(147, 51, 234, 0.08);
            --color-bg-6: rgba(249, 115, 22, 0.08);
            --color-bg-7: rgba(236, 72, 153, 0.08);
            --color-bg-8: rgba(6, 182, 212, 0.08);

            --color-background: var(--color-cream-50);
            --color-surface: var(--color-cream-100);
            --color-text: var(--color-slate-900);
            --color-text-secondary: var(--color-slate-500);
            --color-primary: var(--color-teal-500);
            --color-primary-hover: var(--color-teal-600);
            --color-primary-active: var(--color-teal-700);
            --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
            --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
            --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
            --color-border: rgba(var(--color-brown-600-rgb), 0.2);
            --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
            --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
            --color-error: var(--color-red-500);
            --color-success: var(--color-teal-500);
            --color-warning: var(--color-orange-500);
            --color-info: var(--color-slate-500);
            --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
            --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

            --focus-ring: 0 0 0 3px var(--color-focus-ring);
            --focus-outline: 2px solid var(--color-primary);
            --status-bg-opacity: 0.15;
            --status-border-opacity: 0.25;

            --color-success-rgb: 33, 128, 141;
            --color-error-rgb: 192, 21, 47;
            --color-warning-rgb: 168, 75, 47;
            --color-info-rgb: 98, 108, 113;

            --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            --font-size-xs: 11px;
            --font-size-sm: 12px;
            --font-size-base: 14px;
            --font-size-md: 14px;
            --font-size-lg: 16px;
            --font-size-xl: 18px;
            --font-size-2xl: 20px;
            --font-size-3xl: 24px;
            --font-size-4xl: 30px;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 550;
            --font-weight-bold: 600;
            --line-height-tight: 1.2;
            --line-height-normal: 1.5;
            --letter-spacing-tight: -0.01em;

            --space-0: 0;
            --space-1: 1px;
            --space-2: 2px;
            --space-4: 4px;
            --space-6: 6px;
            --space-8: 8px;
            --space-10: 10px;
            --space-12: 12px;
            --space-16: 16px;
            --space-20: 20px;
            --space-24: 24px;
            --space-32: 32px;

            --radius-md: 6px;
            --radius-base: 8px;
            --radius-md: 10px;
            --radius-lg: 12px;
            --radius-full: 9999px;

            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            --shadow-inset-md: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.03);

            --duration-fast: 150ms;
            --duration-normal: 250ms;
            --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

            --container-md: 640px;
            --container-md: 768px;
            --container-lg: 1024px;
            --container-xl: 1280px;
            
            /* Gradient Variables (Dark Mode) */
            --bg-primary: var(--color-charcoal-800);
            --bg-tertiary: var(--color-slate-900);
        }

        html {
            font-size: var(--font-size-base);
            font-family: var(--font-family-base);
            line-height: var(--line-height-normal);
            color: var(--color-text);
            background-color: var(--color-background);
            -webkit-font-mdoothing: antialiased;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

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

        h1, h2, h3, h4, h5, h6 {
            margin: 0;
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-tight);
            color: var(--color-text);
            letter-spacing: var(--letter-spacing-tight);
        }

        h1 { font-size: var(--font-size-4xl); }
        h2 { font-size: var(--font-size-3xl); }
        h3 { font-size: var(--font-size-2xl); }
        h4 { font-size: var(--font-size-xl); }
        h5 { font-size: var(--font-size-lg); }
        h6 { font-size: var(--font-size-md); }

        p {
            margin: 0 0 var(--space-16) 0;
        }

        a {
            color: var(--color-primary);
            text-decoration: none;
            transition: color var(--duration-fast) var(--ease-standard);
        }

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

        

           /* =========================================
   NEW HERO SECTION (Dark Theme)
   ========================================= */

#hero.dark-theme-hero {
    /* Local Variables for Dark Theme */
    --hero-bg: #0a0a0a;
    --hero-text: #e0e0e0;
    --hero-accent: #00ff9d; /* Matrix Green */
    --hero-border: rgba(255, 255, 255, 0.1);
    
    background-color: var(--hero-bg);
    color: var(--hero-text);
    position: relative;
    overflow: hidden;
    /* Ensure it breaks out of any parent container restrictions if needed */
    width: 100%; 
}

/* Container specifically for the hero to allow it to be wider */
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

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

/* Typography Overrides for Hero */
#hero .hero-h1 {
    font-family: "IBM Plex Sans", sans-serif; /* Fallback if main font fails */
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    font-weight: 500;
}

#hero .hero-lead {
    font-size: 1.25rem;
    color: #b0b0b0;
    font-weight: 300;
    max-width: 65ch;
}

#hero .hero-secondlead {
    font-size: 1.25rem;
    color: #b0b0b0;
    font-weight: 300;
    max-width: 65ch;
}

#hero .hero-eyebrow {
    font-family: var(--font-family-mono); /* Using your main variable */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--hero-accent);
    margin-bottom: 1rem;
    display: inline-block;
    border: 1px solid rgba(0, 255, 157, 0.2);
    padding: 4px 12px;
    border-radius: 100px;
}

/* Bullets */

.hero-bullets {

    margin: 32px 0;

    list-style: none;

    padding: 0;

}

@media(max-width: 768px) {
    .hero-bullets {
        margin: 32px 0 17px;
    }
}

.hero-bullets li {

    margin-bottom: 16px;

    padding-left: 24px;

    position: relative;

    color: var(--hero-text);

    text-align: left;

}



.hero-bullets li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 10px;

    width: 6px;

    height: 6px;

    background: var(--hero-accent);

    border-radius: 50%;

    box-shadow: 0 0 10px var(--hero-accent);

}



/* Buttons (Scoped to Hero to avoid conflict) */




/* Canvas Area */
.hero-canvas-container {
    width: 100%;
    height: 500px;
    position: relative;
    background: radial-gradient(circle at center, rgba(20,20,20,0.5) 0%, rgba(5,5,5,0) 70%);
}

canvas#sim-canvas {
    width: 100%;
    height: 100%;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-canvas-container { height: 300px; order: -1; }
    #hero .hero-h1 { font-size: 2.5rem; }
}
        section {
            padding: var(--space-32) var(--space-20);
        }

        .section-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-20);
        }

        .section-title {
            font-size: clamp(28px, 4vw, 40px);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--space-24);
            text-align: center;
            color: var(--color-surface);
        }

        .section-subtitle {
            font-size: var(--font-size-lg);
            color: var(--color-text-secondary);
            text-align: center;
            max-width: 800px;
            margin: 0 auto var(--space-32);
            line-height: var(--line-height-normal);
        }

        /* ============== CAPABILITIES SECTION ============== */
        .capabilities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: var(--space-20);
        }

        .capability-card {
            background: var(--color-surface);
            border: 1px solid var(--color-card-border);
            border-radius: var(--radius-lg);
            padding: var(--space-24);
            text-align: center;
            transition: all var(--duration-normal) var(--ease-standard);
            box-shadow: var(--shadow-md);
        }

        .capability-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .capability-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            margin-bottom: var(--space-12);
            color: var(--color-text);
        }

        .capability-desc {
            font-size: var(--font-size-md);
            color: var(--color-text-secondary);
            line-height: var(--line-height-normal);
            text-align: center;
            margin: 0;
        }

       /* --- HORIZONTAL ARCHITECTURE VISUAL --- */
:root {
    --accent-gov: #00e5ff;
    --bg-card-dark: rgba(20, 20, 20, 0.8);
    --border-subtle-white: rgba(255, 255, 255, 0.1);
}

.arch-visual-horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0; 
    margin: 60px 0;
}

.arch-node {
    flex: 1;
    max-width: 320px;
    padding: 30px;
    background: var(--bg-card-dark);
    border: 1px solid var(--border-subtle-white);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.arch-node.highlight {
    border-color: var(--accent-gov);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.15);
}

.arch-node-content {
    color: #ffffff;
    font-weight: 500;
    margin: 10px 0;
}

.arch-node-sub {
    font-size: 0.8rem;
    color: #888888;
}

.arch-node-sub.accent {
    color: var(--accent-gov);
}

.eyebrow-gov {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--accent-gov);
    border: 1px solid rgba(0, 229, 255, 0.2);
    padding: 4px 12px;
    border-radius: 100px;
    display: inline-block;
    margin: 0 auto 10px;
}

/* Horizontal Flow Arrows */
.arch-arrow-h {
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, var(--border-subtle-white), var(--accent-gov), var(--border-subtle-white));
    position: relative;
    align-self: center;
    z-index: 1;
}

.arch-arrow-h::after {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: 6px;
    height: 6px;
    background: var(--accent-gov);
    border-radius: 50%;
    animation: flowRight 2s infinite linear;
}

@keyframes flowRight {
    0% { left: 0; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Responsive: Stack vertically on mobile */
@media (max-width: 992px) {
    .arch-visual-horizontal {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .arch-arrow-h {
        width: 2px;
        height: 50px;
        background: linear-gradient(to bottom, var(--border-subtle-white), var(--accent-gov), var(--border-subtle-white));
    }
    
    .arch-arrow-h::after {
        left: -2px;
        top: 0;
        animation: flowDown 2s infinite linear;
    }
}

@keyframes flowDown {
    0% { top: 0; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

       /* --- SIMULATOR STYLES --- */

:root {
            --bg: #0a0a0a;
            --primary: #10b981;
            --danger: #ef4444;
            --warn: #f59e0b;
            --accent: #3b82f6;
        }


        .track {
            position: relative;
            height: 120px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
            overflow: hidden; /* Ensures packets stay visually inside */
        }

        .track:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }

        /* The Moving Packet */
        .packet {
            position: absolute;
            top: 50%;
            left: 0;
            width: 10px;
            height: 10px;
            background: var(--accent);
            border-radius: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 15px var(--accent);
            z-index: 10;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* Gate Styles */
        .gate {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255,255,255,0.1);
            left: 50%;
        }

        .gate-label {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9px;
            font-weight: bold;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #64748b;
        }

        .danger-gate { background: var(--danger); box-shadow: 0 0 20px var(--danger); width: 4px; z-index: 5; }
        .success-gate { background: var(--primary); box-shadow: 0 0 20px var(--primary); width: 4px; z-index: 5; }

        /* Alert Popups */
        .alert-toast {
            position: absolute;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 800;
            pointer-events: none;
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: translate(-50%, -100%);
            white-space: nowrap;
            z-index: 50;
        }

        @keyframes scan {
            0% { transform: scaleY(0); opacity: 0; }
            50% { transform: scaleY(1); opacity: 1; }
            100% { transform: scaleY(0); opacity: 0; }
        }

        .scanner {
            position: absolute;
            top: 0;
            left: 50%;
            width: 80px;
            height: 100%;
            transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
            border-left: 1px solid var(--primary);
            display: none;
        }

        .scanner.active { display: block; animation: scan 0.8s infinite; }

        .definition-card {
            transition: all 0.4s ease;
        }

        .definition-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255,255,255,0.2);
        }

        
        .section-problem-governance {

            py: 16 
            bg: #0a0a0a
        }



        /* ============== HOW GOVERNOR WORKS SECTION ============== */
        .section-how-governor {
            overflow-x: hidden;
        }

        /* Force titles to be white since the background is now dark */
        .section-how-governor .section-title,
        .section-how-governor .section-subtitle {
            color: var(--color-white);
        }

        .enforcement-steps {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: space-between;
            gap: var(--space-16);
            max-width: 1200px;
            margin: 0 auto var(--space-32);
        }

        .step {
            background: var(--color-surface);
            border: 1px solid var(--color-card-border);
            border-radius: var(--radius-lg);
            padding: var(--space-24);
            text-align: center;
            transition: all var(--duration-normal) var(--ease-standard);
            box-shadow: var(--shadow-md);
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .step:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        .step-number {
            width: 48px;
            height: 48px;
            margin: 0 auto var(--space-16);
            border-radius: var(--radius-full);
            background: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-weight-bold);
            font-size: var(--font-size-lg);
        }

        .step-content {
            flex: 1;
        }

        .step-content h3 {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-bold);
            color: var(--color-text);
            margin: 0 0 var(--space-8);
        }

        .step-content p {
            font-size: var(--font-size-md);
            color: var(--color-text-secondary);
            line-height: var(--line-height-normal);
            margin: 0;
        }

        .step-connector {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--color-primary);
            font-weight: var(--font-weight-bold);
        }

        /* --- LOG TERMINAL --- */
        .terminal {
            background: #0d0d0d;
            border: 1px solid #333;
            border-radius: 8px;
            font-family: var(--font-mono);
            font-size: 1.25rem;
            color: #ccc;
            overflow: hidden;
            box-shadow: 0 30px 60px rgba(0,0,0,0.5);
        }
        .terminal-header {
            background: #1a1a1a;
            padding: 12px 20px;
            border-bottom: 1px solid #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .terminal-body {
            padding: 30px;
            height: 500px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #333 transparent;
        }
        .log-entry { margin-bottom: 8px; opacity: 0; transform: translateY(5px); animation: logFadeIn 0.3s forwards; }
        @keyframes logFadeIn { to { opacity: 1; transform: translateY(0); } }
        .log-cyan { color: var(--accent-gov); }
        .log-yellow { color: var(--accent-warn); }
        .log-red { color: var(--accent-error); }
        .log-dim { color: #555; }


        /* ============== SCENARIO SECTION ============== */

        .scenario-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .scenario-step {
            background: var(--color-surface);
            border: 1px solid var(--color-card-border);
            border-radius: var(--radius-lg);
            padding: var(--space-24);
            margin-bottom: var(--space-16);
            transition: all var(--duration-normal) var(--ease-standard);
            box-shadow: var(--shadow-md);
        }

        .scenario-step:hover {
            box-shadow: var(--shadow-md);
        }

        .scenario-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--space-16);
            color: var(--color-text);
        }

        .scenario-code {
            background: var(--color-secondary);
            border-radius: var(--radius-base);
            padding: var(--space-16);
            font-family: var(--font-family-mono);
            font-size: var(--font-size-md);
            color: var(--color-text);
            overflow-x: auto;
            margin-top: var(--space-12);
        }

        .scenario-divider {
            text-align: center;
            font-size: 24px;
            color: var(--color-primary);
            margin: var(--space-16) 0;
        }

        .scenario-action {
            margin-top: var(--space-12);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            font-size: var(--font-size-md);
        }

        .scenario-takeaway {
            background: var(--color-surface);
            border-left: 4px solid var(--color-primary);
            border-radius: var(--radius-lg);
            padding: var(--space-24);
            margin-top: var(--space-32);
            box-shadow: var(--shadow-md);
        }

        .scenario-takeaway h3 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            margin: 0 0 var(--space-16);
            color: var(--color-text);
        }

        .takeaway-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .takeaway-list li {
            font-size: var(--font-size-md);
            color: var(--color-text-secondary);
            margin-bottom: var(--space-12);
            padding-left: var(--space-24);
            position: relative;
            line-height: var(--line-height-normal);
        }

        .takeaway-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--color-primary);
            font-weight: var(--font-weight-bold);
        }

        /* ============== TECHNICAL SECTION ============== */

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-20);
        }

        .tech-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 8px;
            transition: all 0.4s var(--ease-out);
        }

        .tech-card:hover {
            border-color: #ffffff; transform: translateY(-5px); 
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
            background-color: #0f0f0f;
        }

        .tech-title {
            font-size: 17px;
            font-weight: var(--font-weight-semibold);
            margin-bottom: var(--space-12);
            color: rgb(201 201 201);
            text-align: center;
        }

        .tech-desc {
            text-align: center;
            font-size: var(--font-size-md);
            color: var(--color-text-secondary);
            line-height: var(--line-height-normal);
            margin: 0;
        }

        /* ============== INTEGRATION SECTION ============== */

        .integration-diagram {
            max-width: 800px;
            margin: 0 auto;
        }

        /* ================== FIX HOVER FOR INTEGRATION BOXES ================== */

/* Base (normal state) - keep as-is */
.integration-box {
    background: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    text-align: center;
    margin-bottom: var(--space-16);
    transition: all var(--duration-normal) var(--ease-standard);
    box-shadow: var(--shadow-md);
}

.integration-box.governor-box {
    border: 2px solid var(--color-primary);
    background: rgba(var(--color-teal-500-rgb), 0.05);
}

/* Headings and paragraphs normal colors */
.integration-box h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-8);
    color: #ffffff;  /* white for contrast on darkish bg */
}

.integration-box p {
    font-size: var(--font-size-md);
    color: #afafaf;  /* light grey as before */
    margin: 0;
}

/* Hover state: whole box */
.integration-box:hover {
    background: white;
    border-color: var(--color-primary);  /* teal border stays visible */
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);  /* optional lift effect */
}

/* Text colors on hover */
.integration-box:hover h3 {
    color: #111111;  /* near-black / dark for heading */
}

.integration-box:hover p {
    color: #555555;  /* medium grey / light black for paragraphs */
}

/* Optional: Make the Governor box stand out more on hover */
.integration-box.governor-box:hover {
    background: white;
    border: 2px solid var(--color-primary);
    box-shadow: 0 10px 25px rgba(var(--color-teal-500-rgb), 0.18); /* subtle teal glow */
}

/* Remove the problematic h3:hover rule if it's still there (it's redundant now) */
.integration-box h3:hover {
    /* Delete or comment this out entirely */
    /* color: rgb(31 31 31 / 89%); etc. */
}

        .integration-arrow {
            text-align: center;
            font-size: 20px;
            color: var(--color-primary);
            margin: var(--space-12) 0;
        }

        /* ============== FAQ SECTION ============== */

                .faq-item:focus {
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        .faq-answer {
            max-height: 0;
            opacity: 0;
            transition: max-height 0.5s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s ease;
            overflow: hidden;
        }

        .faq-item.active .faq-answer {
            max-height: 500px; /* Increased for longer text */
            opacity: 1;
        }

        .faq-item.active .faq-question-text {
            color: #ffffff;
            transform: translateX(4px);
        }

        .faq-item.active .chevron {
            transform: rotate(180deg);
            color: #ffffff;
        }

        



        /* ============== RESPONSIVE MOBILE ============== */
        @media (max-width: 480px) {
            .governor-hero {
                padding: var(--space-24) var(--space-16);
            }

            .governor-hero .hero-headline {
                font-size: 24px;
                margin: var(--space-16) 0;
            }

            .governor-hero .hero-subheadline {
                font-size: var(--font-size-base);
            }

            .hero-features {
                grid-template-columns: 1fr;
                gap: var(--space-12);
                margin: var(--space-24) auto;
            }

            .hero-ctas {
                flex-direction: column;
                gap: var(--space-12);
                margin: var(--space-24) 0;
            }


            section {
                padding: var(--space-24) var(--space-16);
            }

            .section-title {
                font-size: 24px;
                margin-bottom: var(--space-16);
            }

            .section-subtitle {
                font-size: var(--font-size-base);
                margin-bottom: var(--space-24);
            }

            .capabilities-grid,
            .comparison-grid,
            .tech-grid,
            .related-grid {
                grid-template-columns: 1fr;
                gap: var(--space-16);
            }

            .capability-card,
            .comparison-card,
            .tech-card,
            .related-card {
                padding: var(--space-16);
            }

            .enforcement-steps {
                grid-template-columns: 1fr;
                gap: var(--space-16);
            }

            .step-connector {
                display: none;
            }

            .architecture-diagram {
                gap: var(--space-12);
            }

            .arch-layer {
                padding: var(--space-16);
            }

            .faq-grid {
                grid-template-columns: 1fr;
                gap: var(--space-16);
            }

            .final-ctas {
                flex-direction: column;
            }


            .latency-box {
                padding: var(--space-24);
            }

            .latency-value {
                font-size: 36px;
            }
        }

        @media (max-width: 768px) {
            .governor-hero {
                padding: var(--space-32) var(--space-20);
            }

            .governor-hero .hero-headline {
                font-size: 32px;
            }

            .hero-features {
            }

            .hero-ctas {
                flex-direction: column;
            }

            

            .capabilities-grid,
            .tech-grid {
                grid-template-columns: 1fr;
            }

            .enforcement-steps {
                flex-direction: column;
            }

            .step-connector {
                display: none;
            }

            .final-ctas {
                flex-direction: column;
            }

            

            section {
                padding: var(--space-32) var(--space-20);
            }
        }

/* ============================================================
   GOVERNOR — DARK THEME OVERRIDE + MOBILE FIX
   Add at bottom of governor.css — do not touch anything above
   ============================================================ */

/* ── Force full dark theme ────────────────────────────────── */
:root {
    --color-background: #0a0a0a;
    --color-surface: #0f0f0f;
    --color-text: #ffffff;
    --color-text-secondary: #888888;
    --color-border: #1a1a1a;
    --color-card-border: #1a1a1a;
    --color-card-border-inner: #262626;
    --color-secondary: rgba(255,255,255,0.04);
    --color-secondary-hover: rgba(255,255,255,0.07);
}

html, body {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}

/* All section backgrounds */
section {
    background-color: #0a0a0a !important;
}

/* Headings white */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

/* Subtext */
p {
    color: #888888;
}

/* Section titles/subtitles */
.section-title {
    color: #ffffff !important;
    text-align: center !important;
}
.section-subtitle {
    color: #888888 !important;
    text-align: center !important;
    margin: 0 0 40px 0 !important;
    max-width: 100% !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.capability-card,
.tech-card,
.step,
.scenario-step,
.integration-box,
.definition-card,
.related-card {
    background: #0f0f0f !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 6px !important;
}

.capability-card:hover,
.tech-card:hover,
.step:hover {
    background: #141414 !important;
    border-color: #2a2a2a !important;
    transform: translateY(-2px);
}

/* Fix integration box hover — was turning white */
.integration-box:hover {
    background: #141414 !important;
    border-color: #2a2a2a !important;
}
.integration-box:hover h3 { color: #ffffff !important; }
.integration-box:hover p  { color: #888888 !important; }

.integration-box.governor-box {
    border-color: rgba(33,128,141,0.5) !important;
    background: rgba(33,128,141,0.05) !important;
}

/* Step numbers */
.step-number {
    background: rgba(33,128,141,0.15) !important;
    color: rgba(33,128,141,1) !important;
}

/* Scenario takeaway */
.scenario-takeaway {
    background: #0f0f0f !important;
    border-left-color: rgba(33,128,141,1) !important;
}

/* Terminal */
.terminal {
    background: #050505 !important;
    border-color: #1a1a1a !important;
}
.terminal-header {
    background: #0f0f0f !important;
    border-bottom-color: #1a1a1a !important;
}

/* Scenario code blocks */
.scenario-code {
    background: #111111 !important;
    color: #cccccc !important;
    border: 1px solid #1a1a1a !important;
}

/* ── Mobile: 768px ────────────────────────────────────────── */
@media (max-width: 768px) {

    section {
        padding: 0px 20px 0px !important;
    }

    .section-container {
        padding: 40px 0px 0 0 !important;
    }

    .section-title {
        font-size: 34px !important;
        margin-bottom: 16px !important;
        text-align: left !important;
    }
    .section-subtitle {
        font-size: 15px !important;
        text-align: left !important;
        margin-bottom: 32px !important;
    }

    /* Hero */
    #hero.dark-theme-hero {
        padding: 0 20px 72px !important;
    }
    .hero-container {
        padding: 0 !important;
    }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    #hero .hero-h1 {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }
    #hero .hero-lead,
    #hero .hero-secondlead {
        font-size: 16px !important;
    }
    .hero-canvas-container {
        height: 240px !important;
        order: -1 !important;
    }
    .hero-bullets li {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    .hero-ctas {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .hero-ctas a,
    .hero-ctas button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Architecture visual */
    .arch-visual-horizontal {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .arch-node {
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 20px !important;
    }
    .arch-arrow-h {
        width: 2px !important;
        height: 40px !important;
        background: linear-gradient(to bottom, rgba(255,255,255,0.1), var(--accent-gov), rgba(255,255,255,0.1)) !important;
    }

    /* Capabilities / tech grids */
    .capabilities-grid,
    .tech-grid,
    .comparison-grid,
    .related-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .capability-card,
    .tech-card {
        padding: 24px 20px !important;
        text-align: left !important;
    }
    .capability-title,
    .tech-title {
        text-align: left !important;
        font-size: 16px !important;
    }
    .capability-desc,
    .tech-desc {
        text-align: left !important;
        font-size: 14px !important;
    }

    /* Enforcement steps */
    .enforcement-steps {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .step-connector { display: none !important; }
    .step {
        padding: 24px 20px !important;
        text-align: left !important;
    }
    .step-number {
        margin: 0 0 12px 0 !important;
    }

    /* Scenario */
    .scenario-container { max-width: 100% !important; }
    .scenario-step { padding: 20px !important; }
    .scenario-code { font-size: 12px !important; padding: 14px !important; }

    /* Terminal */
    .terminal-body {
        height: 320px !important;
        padding: 20px !important;
    }

    /* Integration */
    .integration-diagram { max-width: 100% !important; }
    .integration-box { padding: 20px !important; text-align: left !important; }

    /* FAQ */
    .faq-grid { grid-template-columns: 1fr !important; }

    /* CTA */
    .final-ctas {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .final-ctas a,
    .final-ctas button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Latency box */
    .latency-box { padding: 24px 20px !important; }
    .latency-value { font-size: 40px !important; }

.hero-canvas-container {
display: block !important;
width: 100% !important;
height: 300px !important;
margin-top: 40px !important;
}

/* ── Problem Section: compact tracks + narrower container ── */
.section-problem-governance .track {
height: 80px !important;
}

.section-problem-governance .section-container {
max-width: 1440px !important;
}

/* ── Track label font size fix ── */
.section-problem-governance .space-y-3 > div:first-child {
padding-top: 5px;
font-size: 10px !important;
}

.section-problem-governance .space-y-3 > div:first-child span {
padding-top: 5px;
font-size: 10px !important;
}


/* ── Very small phones ────────────────────────────────────── */
@media (max-width: 380px) {
    section { padding: 48px 16px !important; }
    .homepagecontent section {
        padding: 0px 16px !important;
    }
    #hero.dark-theme-hero { padding: 0px 16px 60px !important; }
    #hero .hero-h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; }
    .section-title { font-size: clamp(32px, 5vw, 48px) !important; }
}

/* ── 380px small phones ─────────────────────────────────── */
@media (max-width: 380px) {

  html, body {
    overflow-x: hidden !important;
  }

  section {
    padding: 48px 16px !important;
  }

  #hero.dark-theme-hero {
    padding: 0px 16px 60px !important;
  }

  .hero-container {
    padding: 0 !important;
  }

  #hero .hero-h1 {
    font-size: 34px !important;
    margin-bottom: 16px !important;
  }

  #hero .hero-lead,
  #hero .hero-secondlead {
    font-size: 15px !important;
  }

  .hero-canvas-container {
    height: 220px !important;
  }

  .section-title {
    font-size: 26px !important;
  }

  .section-subtitle {
    font-size: 14px !important;
  }

  .capability-card,
  .tech-card,
  .step {
    padding: 20px 16px !important;
  }

  .capability-title,
  .tech-title {
    font-size: 15px !important;
  }

  .capability-desc,
  .tech-desc {
    font-size: 13px !important;
  }

  .scenario-step {
    padding: 16px !important;
  }

  .scenario-code {
    font-size: 11px !important;
    padding: 12px !important;
  }

  .terminal-body {
    height: 260px !important;
    padding: 16px !important;
  }

  .integration-box {
    padding: 16px !important;
  }

  .latency-value {
    font-size: 36px !important;
  }

  .final-ctas a,
  .final-ctas button {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  .arch-node {
    padding: 20px 16px !important;
  }

  .section-problem-governance .track {
    height: 80px !important;
  }

  .section-problem-governance .space-y-3 > div:first-child,
  .section-problem-governance .space-y-3 > div:first-child span {
    font-size: 10px !important;
  }
}


/* ── 330px extra small phones ───────────────────────────── */
@media (max-width: 330px) {

  html, body {
    overflow-x: hidden !important;
  }

  section {
    padding: 36px 12px !important;
  }

  #hero.dark-theme-hero {
    padding: 0px 12px 48px !important;
  }

  #hero .hero-h1 {
    font-size: 26px !important;
    margin-bottom: 12px !important;
  }

  #hero .hero-lead,
  #hero .hero-secondlead {
    font-size: 13px !important;
  }

  #hero .hero-eyebrow {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

  .hero-canvas-container {
    height: 180px !important;
  }

  .hero-bullets li {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .hero-ctas a,
  .hero-ctas button {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .section-title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .section-subtitle {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  .section-container {
    padding: 32px 0 0 0 !important;
  }

  .capability-card,
  .tech-card,
  .step {
    padding: 16px 12px !important;
  }

  .capability-title,
  .tech-title {
    font-size: 14px !important;
  }

  .capability-desc,
  .tech-desc,
  .step-content p {
    font-size: 12px !important;
  }

  .step-content h3 {
    font-size: 13px !important;
  }

  .step-number {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  .scenario-step {
    padding: 12px !important;
  }

  .scenario-code {
    font-size: 10px !important;
    padding: 10px !important;
  }

  .scenario-title {
    font-size: 14px !important;
  }

  .terminal-body {
    height: 220px !important;
    padding: 12px !important;
    font-size: 11px !important;
  }

  .terminal-header {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .integration-box {
    padding: 12px !important;
  }

  .integration-box h3 {
    font-size: 13px !important;
  }

  .integration-box p {
    font-size: 12px !important;
  }

  .arch-node {
    padding: 16px 12px !important;
  }

  .arch-node-content {
    font-size: 13px !important;
  }

  .arch-node-sub {
    font-size: 11px !important;
  }

  .latency-value {
    font-size: 28px !important;
  }

  .final-ctas a,
  .final-ctas button {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .section-problem-governance .track {
    height: 64px !important;
  }
}

/* ── Simple scroll fade-in ── */
.gov-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.gov-fade.gov-visible {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .gov-fade { opacity: 1; }
}