/* 
   🎨 style.css: Belkar Engineering Operations (BEO)
   Theme: Engineering Dark / Sovereign Command Center
*/



:root {
    /* 1. Structural Tokens (Engineering Dark) */
    --color-foundation: #1A1A1B;     /* Deep Charcoal (Canvas) */
    --color-background: #1A1A1B;     /* Matching Foundation */
    --color-primary: #e5e7e9;        /* Surgical White/Gray */
    --color-secondary: #bac7df;      /* Technical Slate */
    --color-accent: #E67E22;         /* Kinetic Orange */
    --color-accent-glow: #D35400;    /* Copper-Burn Orange */
    --color-architectural: #2E3B4E;  /* Architectural Slate */
    --color-text-main: #e1e3e5;
    --color-text-dim: #c7c6ca;
    --color-text-pure: #FFFFFF;
    
    /* 2. Semantic Mapping */
    --bg-main: var(--color-background);
    --bg-surface: var(--color-foundation);
    --bg-container: var(--color-foundation);
    --text-main: var(--color-text-main);
    --text-heading: var(--color-text-pure);
    --text-dim: var(--color-text-dim);
    --accent: var(--color-accent);
    
    /* 3. Typography (Brief Specified) */
    --font-heading: 'IBM Plex Serif', serif;
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-data: 'Space Grotesk', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;  
    
    /* 4. Structural Constants */
    --border-radius: 0px;
    --border-architectural: 1px solid var(--color-architectural);
    --border-accent: 1px solid var(--color-accent);
    
    /* 5. Metrics */
    --gap-base: 1.5rem;
    --section-padding: 6rem 0;
    --container-max: 1400px;
    --container-padding: 0 clamp(1.5rem, 5vw, 4rem);
}

/* 6. Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-main);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 7. Typography System */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-heading);
    line-height: 1.1;
    margin-bottom: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; font-weight: 600; }

p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: var(--gap-base);
    max-width: 65ch;
}

.text-lg { font-size: 18px; font-weight: 500; line-height: 1.6; }

.label-caps {
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 7.1 Utility Helpers */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-5 { margin-top: 5rem; }
.mb-5 { margin-bottom: 5rem; }
.text-bright { color: var(--color-text-pure) !important; opacity: 1 !important; visibility: visible !important; }

.data-mono {
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* 7. Layout Components */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--container-padding);
    width: 100%;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    background: rgba(26, 26, 27, 0.95); /* Updated to Deep Charcoal */
    backdrop-filter: blur(12px);
    border-bottom: var(--border-architectural);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-mono {
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo-text {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 4px;
    color: var(--text-heading);
    text-transform: uppercase;
}

/* Logo image styles */
.logo-img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.logo-img:hover {
    opacity: 0.85;
}

.footer-logo-img {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 1rem;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center;
}

nav a {
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
    white-space: nowrap;
}

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

/* 8. Hero Section (Sovereign Command Center Overhaul) */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 12rem 0 6rem 0;
    display: flex;
    align-items: center;
    background-color: var(--color-foundation);
    overflow: hidden;
}

.interactive-grid-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    perspective: 1000px;
}

.blueprint-logo-lockup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 150px;
    height: 150px;
}

.grid-cell {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-architectural);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    background: rgba(46, 59, 78, 0.05);
}

.grid-cell.active-spark {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 30px var(--color-accent-glow);
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 850px;
}

.hero-command-line {
    display: block;
    margin-bottom: 2rem;
}

.be-command {
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-pure);
    display: inline-block;
    margin-right: 2rem;
    margin-bottom: 0.5rem;
}

.hero-command-line .be-command {
    font-size: 2rem;
    letter-spacing: 2px;
}

.be-command .be-highlight {
    color: var(--color-accent);
}

.tagline-mission {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero-main-title {
    font-family: var(--font-heading);
    font-size: 5.5rem; /* Slightly larger for impact */
    line-height: 1;
    margin-bottom: 2rem;
    color: var(--color-text-pure);
    letter-spacing: -0.04em;
}

.hero-sub-offer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.sub-offer-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-text-dim);
}

.offer-prefix {
    min-width: 140px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.hero-bottom-line {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-pure);
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    text-shadow: 0 0 20px rgba(230, 126, 34, 0.2);
}

/* Responsive adjustments for new hero structure */
@media (max-width: 768px) {
    .hero-main-title {
        font-size: 3.5rem;
    }
    .sub-offer-item {
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }
    .offer-prefix {
        min-width: auto;
    }
    .hero-bottom-line {
        font-size: 1.4rem;
    }
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-dim);
    margin-bottom: 3rem;
    max-width: 60ch;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.tagline-mission {
    display: inline-block;
    color: var(--color-text-pure);
    font-family: var(--font-body); /* Using body font for better "glow" and weight */
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none; /* Keep natural casing for readability */
    margin-top: 0.5rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
    filter: brightness(1.2);
}

/* Standard H1 inside hero if no class is used */
.hero h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1.05;
    margin-bottom: 2rem;
    color: var(--color-text-pure);
}

.hero-subtext {
    font-family: var(--font-body);
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--color-text-dim);
    margin-bottom: 3.5rem;
    max-width: 55ch;
    text-align: left;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 3rem;
}

/* 9. Buttons & Actions */
.btn {
    display: inline-block;
    padding: 1.25rem 3rem;
    background: #e67e22;
    color: var(--color-text-pure);
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 0px; /* Hard corners strictly */
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn.primary {
    background: #e67e22 !important;
    color: var(--color-text-pure) !important;
}

.btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.secondary-text-link {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(229, 231, 233, 0.3);
    transition: all 0.3s ease;
}

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

/* 10. Engineering Utilities */
.accent-text { color: var(--accent); }
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }
.center { margin-left: auto; margin-right: auto; }
.max-600 { max-width: 600px; }
.section { padding: var(--section-padding); }
.border-top { border-top: var(--border-architectural); }

/* Architectural Notch */
.notch-tr {
    position: relative;
}
.notch-tr::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(225deg, var(--bg-main) 50%, transparent 50%);
    border-left: var(--border-architectural);
    border-bottom: var(--border-architectural);
    z-index: 2;
}

/* Drafting Texture */
.hatch-bg {
    background-image: var(--hatch-pattern);
}

/* Industrial Header Utility */
.industrial-header {
    background: var(--color-architectural);
    padding: 2px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-architectural);
}

.industrial-header .serial {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-primary);
    opacity: 0.8;
}

/* 11. Section Specifics */
.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

@media (max-width: 968px) {
    .grid-two { grid-template-columns: 1fr; gap: 3rem; }
}

.pillar-list {
    list-style: none;
    margin-top: 2.5rem;
}

.pillar-list li {
    padding: 1.25rem 0;
    border-bottom: var(--border-thin);
    position: relative;
}

.pillar-list li::before {
    content: '+';
    color: var(--color-structure);
    margin-right: 1.25rem;
    font-family: var(--font-mono);
}

.blueprint-graphic {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--bg-main);
    background-image: 
        linear-gradient(rgba(229, 231, 233, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 231, 233, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    border: var(--border-architectural);
    position: relative;
    overflow: hidden;
}

.blueprint-graphic::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-left: 1px solid var(--color-structure);
    border-top: 1px solid var(--color-structure);
    opacity: 0.2;
}

/* 12. Problem Section: Corporate AiQ Stress Test */
.stress-test-heading {
    text-align: center;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stress-test-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-foundation);
    border: 1px solid var(--color-architectural);
    position: relative;
    overflow: hidden;
}

/* Progress bar anchored at top */
.stress-progress-bar {
    width: 100%;
    height: 1px;
    background: var(--bg-surface);
    position: absolute;
    top: 0;
    left: 0;
}

.stress-progress-fill {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 0.3s ease;
}

.stress-view {
    padding: 6rem 4rem;
    display: none;
}

.stress-view.active {
    display: block;
    animation: fadeIn 0.4s ease forwards;
}

.question-header {
    margin-bottom: 2rem;
}

.question-text {
    font-size: 2.4rem;
    line-height: 1.4;
    margin-bottom: 4rem;
}

/* Scale row */
.stress-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.scale-label {
    font-size: 1.2rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    flex: 1;
}

.scale-options {
    display: flex;
    gap: 1rem;
    flex: 2;
    justify-content: center;
}

.scale-btn {
    background: transparent;
    border: 1px solid var(--color-architectural);
    color: var(--text-primary);
    width: 4.8rem;
    height: 4.8rem;
    font-family: var(--font-mono);
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
}

.scale-btn:hover {
    background: var(--color-structure);
    border-color: var(--text-dim);
}

.massive-score {
    font-size: 12rem;
    font-family: var(--font-mono);
    line-height: 1;
    margin: 2rem 0;
    letter-spacing: -2px;
}

.dugri-insight {
    font-size: 1.6rem;
    color: var(--text-dim);
    max-width: 500px;
    margin: 0 auto 4rem auto;
}

.cta-capture {
    border-top: 1px dashed var(--color-architectural);
    padding-top: 4rem;
}

#stress-capture-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 2rem auto 0 auto !important;
}

#stress-capture-form .btn {
    width: 100% !important;
    max-width: 100% !important;
}

.industrial-input {
    width: 100% !important;
    padding: 1.5rem !important;
    background-color: #2E3B4E !important;
    border: 1px solid var(--color-architectural) !important;
    color: #ffffff !important;
    font-family: var(--font-mono) !important;
    font-size: 1.2rem !important;
    border-radius: 0 !important;
    text-align: center !important;
}

.industrial-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.industrial-input:focus {
    outline: none !important;
    border-color: var(--color-accent) !important;
}

.flicker-calc {
    animation: textFlicker 0.1s linear infinite;
}

@keyframes textFlicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

@media (max-width: 768px) {
    .stress-view { padding: 4rem 2rem; }
    .question-text { font-size: 1.8rem; }
    .stress-scale { flex-direction: column; gap: 1rem; }
    .scale-label { display: none; }
    .massive-score { font-size: 8rem; }
}

/* 13. Methodology: The BEO Protocol */
.protocol-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.protocol-card {
    padding: 2rem;
    border: var(--border-architectural);
    transition: all 0.3s ease;
    background: var(--bg-surface);
}

.protocol-card:hover {
    border-color: var(--accent);
    background: rgba(211, 84, 0, 0.05);
}

.protocol-num {
    font-family: var(--font-mono);
    color: var(--color-canvas);
    opacity: 0.5;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 1rem;
}

.protocol-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

@media (max-width: 968px) {
    .protocol-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .protocol-grid { grid-template-columns: 1fr; }
}


.verdict-label {
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-size: 1rem;
}

/* 15. The Success Ladder (Pillars) */
/* BE Command Brutalist Typography */
.be-command {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--color-text-pure);
    background-color: #1A1A1B;
    padding: 0.15em 0.3em;
    display: inline-block;
    letter-spacing: 2px;
}

.be-command .be-highlight {
    color: var(--color-accent);
}

.be-command-inline {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* 14. Section 3: The Success Ladder (Architectural Grid) */
#ladder {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
}

/* Faint Blueprint Grid Overlay */
#ladder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--color-architectural) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-architectural) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.success-ladder-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 2;
    margin-top: 4rem;
}

/* The "Operational Path" Connector Line */
.success-ladder-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-architectural);
    opacity: 0.3;
    z-index: -1;
}

.ladder-pillar {
    background: var(--bg-surface);
    border: 1px solid var(--color-architectural);
    padding: 4rem 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
    transform: translateY(30px);
}

/* Staggered Reveal Animation */
.section.is-visible .ladder-pillar {
    opacity: 1;
    transform: translateY(0);
}

.section.is-visible .ladder-pillar:nth-child(1) { transition-delay: 0.1s; }
.section.is-visible .ladder-pillar:nth-child(2) { transition-delay: 0.25s; }
.section.is-visible .ladder-pillar:nth-child(3) { transition-delay: 0.4s; }
.section.is-visible .ladder-pillar:nth-child(4) { transition-delay: 0.55s; }

.ladder-pillar:hover {
    border-color: var(--color-accent);
    background: rgba(230, 126, 34, 0.03);
    z-index: 3;
}

.pillar-command {
    font-family: var(--font-heading); /* IBM Plex Serif */
    font-weight: 700;
    font-size: 2rem;
    color: var(--color-text-pure);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.2; /* Increased to prevent serif clipping */
}

.pillar-phase {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 2rem;
    display: block;
}

.pillar-headline {
    font-family: var(--font-body); /* Space Grotesk */
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--color-text-pure);
    margin-bottom: 1rem;
}

.pillar-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--color-text-dim);
    margin-bottom: 2rem;
    line-height: 1.6;
    flex-grow: 1;
}

.pillar-outcome-box {
    border-top: 1px solid var(--color-architectural);
    padding-top: 1.5rem;
}

.pillar-outcome-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.pillar-outcome-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-pure);
    font-weight: 500;
}

@media (max-width: 1024px) {
    .success-ladder-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .success-ladder-grid::after { display: none; }
    .ladder-pillar { min-height: auto; }
}

@media (max-width: 640px) {
    .success-ladder-grid {
        grid-template-columns: 1fr;
    }
}


/* Pillar I - Forensic Section */
.forensic-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid var(--color-architectural);
    background: var(--color-architectural);
    margin: 3rem 0;
}

.forensic-cell {
    background: #1A1A1B;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
}

.forensic-index {
    font-family: var(--font-mono);
    color: var(--color-text-pure);
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.forensic-head {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text-pure);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.forensic-divider {
    width: 2rem;
    height: 1px;
    background: var(--color-architectural);
    margin: 1.5rem 0;
}

.leader-line-container {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.leader-line {
    width: 1px;
    height: 40px;
    background: var(--color-accent);
    transform: rotate(45deg);
    transform-origin: bottom center;
    margin-bottom: 5px;
}

.leader-label {
    font-size: 0.7rem;
    color: var(--color-accent);
    letter-spacing: 2px;
}

.forensic-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--color-architectural);
    border: 1px solid var(--color-architectural);
}

.timeline-step {
    background: #1A1A1B;
    padding: 2rem 1.5rem;
}

.step-day {
    display: inline-block;
    border: 1px solid var(--color-accent);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.step-title {
    font-family: var(--font-heading);
    color: var(--color-text-pure);
    font-size: 1.1rem;
}

.kinetic-btn {
    background-color: #E67E22;
    color: #FFFFFF;
    border: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1rem 2rem;
    transition: all 0.2s ease;
    display: inline-block;
    text-decoration: none;
}

.kinetic-btn:hover {
    background-color: #d67118;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
}

@media (max-width: 968px) {
    .forensic-matrix { grid-template-columns: repeat(2, 1fr); }
    .forensic-timeline { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .forensic-matrix { grid-template-columns: 1fr; }
}

/* Pillar II - Forge Section */
.forge-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 3rem 0;
    overflow: hidden;
    border: 1px solid var(--color-architectural); /* Outer border */
}

.forge-cell {
    background: #1A1A1B;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
    border-right: 1px solid var(--color-architectural);
}

.forge-cell:last-child {
    border-right: none;
}

.forge-command {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.forge-head {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text-pure);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.forge-divider {
    width: 2rem;
    height: 1px;
    background: var(--color-architectural);
    margin: 1.5rem 0;
}

.technical-readout {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(46, 59, 78, 0.2);
    border: 1px solid var(--color-architectural);
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    width: 250px;
    backdrop-filter: blur(5px);
    z-index: 10;
}

@media (max-width: 1200px) {
    .technical-readout {
        position: relative;
        top: 0;
        right: 0;
        margin: 0 auto 3rem auto;
    }
}

.readout-header {
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-accent);
    font-weight: 700;
}

.readout-row {
    margin-bottom: 0.3rem;
}

.btn-outline-kinetic {
    background-color: transparent;
    color: var(--color-text-pure);
    border: 1px solid var(--color-architectural);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-outline-kinetic:hover {
    background-color: #E67E22;
    border-color: #E67E22;
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
}

.workbench-schematic {
    display: block;
    margin: 0 auto 3rem auto;
    width: 100%;
    max-width: 600px;
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

.schematic-main {
    border: 1px solid var(--color-accent);
    padding: 2rem;
    margin: 0 auto;
    width: 250px;
}

.schematic-leader {
    position: absolute;
    display: flex;
}

.schematic-leader.leader-left {
    top: -5px;
    left: 10%;
    flex-direction: column;
    align-items: flex-end;
}

.schematic-leader.leader-right {
    top: -5px;
    right: 10%;
    flex-direction: column;
    align-items: flex-start;
}

.schematic-leader.leader-bottom {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
}

.angled-line {
    width: 1px;
    height: 40px;
    background: var(--color-architectural);
    transform-origin: bottom center;
    margin-top: 5px;
}

.angled-left {
    transform: rotate(-45deg);
    margin-right: -20px;
}

.angled-right {
    transform: rotate(45deg);
    margin-left: -20px;
}

.straight-line {
    width: 1px;
    height: 30px;
    background: var(--color-architectural);
}

@media (max-width: 968px) {
    .forge-matrix { grid-template-columns: 1fr; }
    .technical-readout { position: relative; margin: 0 auto 2rem auto; right: 0; width: auto; max-width: 300px; }
}

/* ===================================================
   Pillar III - BE HARDENED
   =================================================== */

/* Background watermark */
.hardened-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: clamp(6rem, 15vw, 14rem);
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(46, 59, 78, 0.12);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    text-transform: uppercase;
}

/* Guarantee bar */
.dugri-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--color-architectural);
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    position: relative;
    z-index: 2;
}

.dugri-sep {
    color: var(--color-architectural);
    font-size: 1.2rem;
}

/* Hybrid Bridge Diagram */
.hybrid-bridge-diagram {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 3rem 0;
    position: relative;
    z-index: 2;
}

.bridge-layer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
}

.bridge-local {
    border: 2px solid var(--color-text-pure);
    background: rgba(255,255,255,0.02);
}

.bridge-cloud {
    border: 2px dashed var(--color-architectural);
    background: transparent;
}

.bridge-layer-label {
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.7;
    align-self: flex-start;
}

.bridge-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    flex: 1;
    justify-content: center;
}

.bridge-core-icon {
    opacity: 0.85;
}

.bridge-firewall-label {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    opacity: 0.8;
    text-align: center;
}

/* The connector between local and cloud */
.bridge-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 120px;
}

.bridge-wire {
    width: 100%;
    height: 1px;
    border-top: 2px dashed var(--color-architectural);
    opacity: 0.6;
}

.bridge-connector-label {
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--color-architectural);
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-architectural);
    opacity: 0.7;
}

/* Sovereign Stack Matrix - same tokens as forge but 3-col */
.sovereign-stack-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 3rem 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.sovereign-cell {
    background: #1A1A1B;
    padding: 3rem 2rem;
    position: relative;
    box-sizing: border-box;
    border-right: 1px solid var(--color-architectural);
    border-bottom: 1px solid var(--color-architectural);
    border-top: 1px solid var(--color-architectural);
}

.sovereign-cell:first-child {
    border-left: 1px solid var(--color-architectural);
}

.sovereign-index {
    font-family: var(--font-mono);
    color: var(--color-text-pure);
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.sovereign-head {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-pure);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.sovereign-command {
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* CapEx vs OpEx comparison box */
.capex-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border: 1px solid var(--color-architectural);
}

.capex-col {
    flex: 1;
    padding: 2.5rem 2rem;
}

.capex-legacy {
    border-right: 1px solid var(--color-architectural);
    background: rgba(255,255,255,0.01);
}

.capex-sovereign {
    background: rgba(230, 126, 34, 0.04);
}

.capex-badge {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-architectural);
    color: var(--color-text-muted);
}

.capex-item {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.capex-icon {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.capex-vs {
    padding: 0 2rem;
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: var(--color-architectural);
    flex-shrink: 0;
}

/* Solid Kinetic Orange CTA */
.btn-kinetic-solid {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border: 2px solid var(--color-accent);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1.1rem 2.5rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.btn-kinetic-solid:hover {
    background-color: transparent;
    color: var(--color-accent);
    box-shadow: 0 4px 20px rgba(230, 126, 34, 0.4);
}

@media (max-width: 968px) {
    .hybrid-bridge-diagram { flex-direction: column; }
    .bridge-connector { flex-direction: row; min-width: auto; padding: 0.5rem 0; }
    .bridge-wire { flex: 1; }
    .sovereign-stack-matrix { grid-template-columns: 1fr; }
    .capex-comparison { flex-direction: column; }
    .capex-legacy { border-right: none; border-bottom: 1px solid var(--color-architectural); }
    .capex-vs { padding: 1rem 0; }
}

/* Circuit Diagram — "Circuitry of Work" */
.circuit-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 0;
    margin: 3rem 0;
    position: relative;
    z-index: 2;
    padding: 2rem 0;
}

/* Nodes */
.circuit-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--color-architectural);
    background: rgba(46, 59, 78, 0.12);
    position: relative;
}

.circuit-node--left  { grid-column: 1; grid-row: 1; }
.circuit-node--right { grid-column: 5; grid-row: 1; }
.circuit-node--bottom {
    grid-column: 3; grid-row: 3;
    margin-top: 0;
}

.circuit-node-icon {
    color: var(--color-text-pure);
    opacity: 0.75;
}

.circuit-node-label {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* Center BEO OS node */
.circuit-center {
    grid-column: 3; grid-row: 1;
}

.circuit-center-border {
    border: 2px solid var(--color-text-pure);
    padding: 2rem 2.5rem;
    position: relative;
    text-align: center;
    background: rgba(255,255,255,0.02);
}

.circuit-center-corner {
    position: absolute;
    width: 14px;
    height: 14px;
}
.circuit-center-corner--tl { top: -2px; left: -2px; border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.circuit-center-corner--tr { top: -2px; right: -2px; border-top: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.circuit-center-corner--bl { bottom: -2px; left: -2px; border-bottom: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); }
.circuit-center-corner--br { bottom: -2px; right: -2px; border-bottom: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }

.circuit-center-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.circuit-center-nodes {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.circuit-mini-node {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-architectural);
    padding: 0.2rem 0.5rem;
}

/* Horizontal wires */
.circuit-wire--h {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}
.circuit-wire--h.circuit-wire--h:not(.circuit-wire--right) { grid-column: 2; }
.circuit-wire--right { grid-column: 4; }

.circuit-wire-line {
    flex: 1;
    height: 1px;
    background: var(--color-architectural);
}

.circuit-wire-arrow {
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--color-architectural);
    flex-shrink: 0;
}

.circuit-wire-arrow--left {
    border-left: none;
    border-right: 7px solid var(--color-architectural);
}

/* Vertical wire */
.circuit-wire--v {
    grid-column: 3; grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0;
}

.circuit-wire-line--v {
    width: 1px;
    height: 2.5rem;
    background: var(--color-architectural);
    flex: none;
}

.circuit-wire-arrow--down {
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--color-architectural);
}

/* OS Comparison Table */
.os-comparison {
    display: flex;
    align-items: stretch;
    max-width: 900px;
    margin: 4rem auto;
    position: relative;
    z-index: 2;
    border: 1px solid var(--color-architectural);
    background: var(--bg-surface);
    overflow: hidden; /* Contain column backgrounds */
}

.os-col {
    flex: 1;
    padding: 3rem 2.5rem;
}

.os-legacy {
    background: rgba(255,255,255,0.01);
}

.os-engineered {
    background: rgba(230, 126, 34, 0.04);
}

.os-col-header {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-architectural);
    font-weight: 700;
}

.os-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-dim);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.os-x { color: #c0392b; font-size: 1.2rem; flex-shrink: 0; }
.os-check { font-size: 1.2rem; flex-shrink: 0; }

.os-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    gap: 0.5rem;
    background: rgba(46,59,78,0.2);
    border-left: 1px solid var(--color-architectural);
    border-right: 1px solid var(--color-architectural);
}

.os-divider-line {
    flex: 1;
    width: 1px;
    background: var(--color-architectural);
    opacity: 0.3;
}

.os-divider-badge {
    font-size: 1.2rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 968px) {
    .os-comparison { 
        flex-direction: column !important; 
        max-width: 100% !important;
        border-bottom: none !important;
    }
    .os-col {
        width: 100% !important;
        flex: none !important;
        border-bottom: 1px solid var(--color-architectural) !important;
    }
    .os-legacy { 
        border-right: none !important; 
    }
    .os-divider { 
        flex-direction: row !important; 
        padding: 1.5rem 2rem !important; 
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid var(--color-architectural) !important;
    }
    .os-divider-line { 
        flex: 1 !important; 
        width: auto !important; 
        height: 1px !important; 
    }
    .os-engineered {
        border-bottom: 1px solid var(--color-architectural) !important;
    }
}

/* 15. The Engine Room */

.schematic-container {
    position: relative;
    margin: 4rem 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.engine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.engine-card {
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(229, 231, 233, 0.1);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.engine-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: var(--color-structure);
}

.engine-num {
    display: block;
    font-size: 0.75rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.engine-card h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 968px) {
    .engine-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .engine-grid { grid-template-columns: 1fr; }
}

/* 16. Technical Schematic */
.schematic-box {
    width: 100%;
    min-height: 500px;
    background: var(--bg-surface);
    border: var(--border-thin);
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.schematic-overlay {
    position: absolute;
    top: 2rem;
    right: 2rem;
    text-align: right;
    pointer-events: none;
}

.terminal-header {
    background: #1c1c1d;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: var(--border-architectural);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: var(--color-structure);
    border: 1px solid rgba(255,255,255,0.1);
}

.terminal-body {
    padding: 2.5rem;
    height: 450px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.6;
    background: var(--bg-surface);
}

.terminal-line {
    margin-bottom: 0.75rem;
    word-break: break-all;
}

.type-system { color: var(--text-dim); }
.type-question { color: var(--text-main); border-left: 2px solid var(--color-structure); padding-left: 1rem; margin: 1.5rem 0 1rem; }
.type-user { color: var(--text-dim); }
.type-success { color: #27ae60; font-weight: bold; }
.type-error { color: var(--accent); font-weight: bold; } /* This is now a high-priority HITL alert */

.terminal-input-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
    position: relative;
}

.terminal-prompt { color: var(--color-structure); font-weight: bold; }
.terminal-cursor {
    width: 8px;
    height: 18px;
    background: var(--color-structure);
    display: inline-block;
    animation: blink 1s step-end infinite;
}

#terminal-hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    color: transparent;
    background: transparent;
    border: none;
    outline: none;
    z-index: 10;
    cursor: text;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* 15. Footer */
footer {
    text-align: center;
    padding: 6rem 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.text-small { font-size: 0.75rem; }

/* --- RTL & Language Support --- */
[dir="rtl"] {
    text-align: right;
}



[dir="rtl"] .pillar-list li::before {
    margin-right: 0;
    margin-left: 1rem;
}

[dir="rtl"] .grid-two {
    direction: rtl;
}

@media (min-width: 769px) {
    [dir="rtl"] header nav ul {
        flex-direction: row; /* Natural RTL flow: Audit (right) -> Lang (left) */
    }
}

[dir="rtl"] .terminal-dot {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .terminal-header {
    flex-direction: row-reverse;
}

/* --- Language Toggle Button --- */
.lang-btn {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
}

[dir="rtl"] .lang-btn {
    margin-left: 0;
    margin-right: 1rem;
}

.lang-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.lang-label {
    letter-spacing: 1px;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 16. Responsive Navigation - Hamburger Menu */
/* 17. Drafting Marks (Blueprint Style) */
.blueprint-box {
    position: relative;
    border: var(--border-thin);
}

.blueprint-mark {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-structure);
    opacity: 0.5;
    pointer-events: none;
}

.mark-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.mark-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.mark-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.mark-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger .bar {
    width: 100%;
    height: 1px;
    background-color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

@media (max-width: 768px) {
    .container { padding: 0 1.5rem; }
    h1 { font-size: 2.5rem; }
    .grid-two { grid-template-columns: 1fr; }
    
    .hamburger { display: flex; }

    header nav ul {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: var(--color-foundation);
        flex-direction: column !important; /* Force vertical on mobile */
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        border-left: var(--border-thin);
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    header nav ul.active {
        right: 0;
    }

    [dir="rtl"] header nav ul {
        right: auto;
        left: -100%;
        border-left: none;
        border-right: var(--border-thin);
    }

    [dir="rtl"] header nav ul.active {
        left: 0;
    }

    header nav ul li a {
        font-size: 1.25rem;
    }

    .hero { padding: 8rem 0 4rem; }
}

/* 17. Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}




/* 15. RTL Specific Adjustments (Hebrew Alignment) */
[dir="rtl"] .hero-actions {
    gap: 1.5rem;
}

/* Fix Hero Button overlapping if gap fails in older contexts */
[dir="rtl"] .hero-actions .btn + .btn,
[dir="rtl"] .hero-actions .btn + a.btn {
    margin-right: 1.5rem;
    margin-left: 0;
}

[dir="rtl"] .hard-truth-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

[dir="rtl"] .section-content {
    text-align: right;
}

[dir="rtl"] .contrast-box::before {
    left: auto;
    right: 0;
}

/* ===================================================
   Pillar IV - BE THE GUARD
   =================================================== */

.guard-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin: 4rem 0;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Health Monitor Gauge */
.health-monitor {
    background: rgba(46, 59, 78, 0.1);
    border: 1px solid var(--color-architectural);
    padding: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.gauge-container {
    position: relative;
    width: 200px;
    height: 100px; /* Semi-circle */
    overflow: hidden;
}

.gauge-svg {
    width: 200px;
    height: 200px;
    transform: rotate(-180deg);
}

.gauge-bg {
    fill: none;
    stroke: var(--color-architectural);
    stroke-width: 12;
}

.gauge-fill {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 12;
    stroke-dasharray: 314.15; /* PI * R */
    stroke-dashoffset: 31.41; /* 90% fill approx */
    transition: stroke-dashoffset 2s ease-out;
}

.gauge-value {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-text-pure);
}

.status-labels {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(46, 59, 78, 0.3);
    padding-bottom: 0.5rem;
}

.status-label { color: var(--color-text-muted); }
.status-value { color: var(--color-accent); font-weight: 700; }

/* PDF Report Mockup */
.report-mockup {
    position: relative;
    perspective: 1000px;
}

.report-page {
    background: #FFFFFF;
    width: 280px;
    height: 380px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    color: #1A1A1B;
    box-shadow: 20px 20px 0px var(--color-architectural);
    transform: rotateY(-10deg) rotateX(10deg);
    position: relative;
    border: 1px solid #ddd;
    text-align: left; /* Always LTR for the visual mockup */
}

[dir="rtl"] .report-page {
    text-align: left;
}

.report-header-ui {
    border-bottom: 2px solid #1A1A1B;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.6rem;
    letter-spacing: 2px;
}

.report-content-ui {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-bar { height: 4px; background: #eee; width: 100%; }
.report-bar--short { width: 60%; }
.report-bar--accent { background: #E67E22; height: 12px; margin: 0.5rem 0; width: 100%; }

.report-stat {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    margin-top: 1.5rem;
    line-height: 1.8;
}

.report-stamp {
    position: absolute;
    bottom: 2.5rem;
    right: 2rem;
    border: 2px solid #E67E22;
    color: #E67E22;
    padding: 0.4rem 0.8rem;
    font-weight: 900;
    font-size: 0.65rem;
    transform: rotate(-15deg);
    font-family: var(--font-heading);
    text-transform: uppercase;
}

/* Guard Grid */
.guard-protocol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--color-architectural);
    margin-top: 4rem;
}

.guard-cell {
    padding: 3.5rem 2.5rem;
    border-right: 1px solid var(--color-architectural);
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.guard-cell:last-child { border-right: none; }
.guard-cell:hover { background: rgba(230, 126, 34, 0.04); }

.guard-cell-head {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    display: block;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Guard CTA */
.guard-cta-box {
    margin-top: 6rem;
    text-align: center;
    border-top: 1px solid var(--color-architectural);
    padding-top: 4rem;
}

.btn-caio {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: 1.2rem 3.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-caio:hover {
    background: var(--color-accent);
    color: #FFFFFF;
    box-shadow: 0 0 40px rgba(230, 126, 34, 0.4);
    transform: translateY(-2px);
}

@media (max-width: 968px) {
    .guard-dashboard { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
    .guard-protocol-grid { grid-template-columns: 1fr; }
    .guard-cell { border-right: none; border-bottom: 1px solid var(--color-architectural); }
    .report-mockup { margin-top: 2rem; }
    .report-page { transform: none; width: 100%; max-width: 300px; margin: 0 auto; box-shadow: 10px 10px 0px var(--color-architectural); }
}

/* ===================================================
   Section 7 - THE PRINCIPAL ARCHITECT (BE RIGOROUS)
   =================================================== */

.architect-section {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    align-items: stretch;
    background-color: var(--color-foundation);
    position: relative;
    overflow: hidden;
}

.architect-portrait-col {
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.architect-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2);
    display: block;
}

.architect-content-col {
    padding: 6rem 4rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.engineering-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 900;
    color: rgba(46, 59, 78, 0.12); /* Slightly more visible */
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    border: 10px solid rgba(46, 59, 78, 0.12);
    padding: 1rem 3rem;
    letter-spacing: 10px;
    z-index: 1;
}

.pedigree-box {
    border: 1px solid var(--color-architectural);
    padding: 2.5rem;
    margin: 3rem 0;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.pedigree-label {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--color-foundation);
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--color-accent);
    text-transform: uppercase;
}

.pedigree-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pedigree-item {
    font-family: var(--font-data);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

.pedigree-item strong {
    color: var(--color-text-pure);
    display: block;
    font-family: var(--font-heading);
    margin-bottom: 0.25rem;
}

.philosophy-quote {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-style: italic;
    color: var(--color-text-pure);
    line-height: 1.4;
    margin-top: 2rem;
    position: relative;
    padding-left: 2rem;
}

.philosophy-quote::before {
    content: "“";
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 4rem;
    color: var(--color-accent);
    opacity: 0.3;
}

/* RTL Adjustments for Section 7 */
[dir="rtl"] .architect-section {
    grid-template-columns: 1.2fr 1fr;
}

[dir="rtl"] .architect-portrait-col {
    order: 2;
}

[dir="rtl"] .architect-content-col {
    order: 1;
    text-align: right;
}

[dir="rtl"] .philosophy-quote {
    padding-left: 0;
    padding-right: 2rem;
}

[dir="rtl"] .philosophy-quote::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .pedigree-label {
    left: auto;
    right: 20px;
}

@media (max-width: 968px) {
    .architect-section {
        grid-template-columns: 1fr;
    }
    .architect-portrait-col {
        min-height: 400px;
        order: 1 !important;
    }
    .architect-content-col {
        padding: 4rem 2rem;
        order: 2 !important;
    }
    .engineering-stamp {
        font-size: 4rem;
    }
    .philosophy-quote {
        font-size: 1.4rem;
    }
}



/* 20. Section 9: The Closing Command */
.closing-section {
    background-color: var(--color-background);
    padding: var(--section-padding);
}

.closing-frame {
    border: 2px solid var(--color-accent);
    padding: 4rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.slot-tracker {
    display: inline-block;
    background: rgba(230, 126, 34, 0.1);
    color: var(--color-accent);
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    border: 1px solid var(--color-accent);
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.closing-content h2 {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.closing-subheadline {
    font-size: 1.25rem;
    color: var(--text-heading);
    margin-bottom: 2rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.dugri-call {
    font-family: var(--font-mono);
    color: var(--color-accent);
    margin-bottom: 3rem;
    border-top: 1px solid rgba(230, 126, 34, 0.3);
    border-bottom: 1px solid rgba(230, 126, 34, 0.3);
    padding: 1.5rem 2rem;
    text-align: left;
    font-style: italic;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Brutalist Form */
.closing-form {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--text-dim);
}

.form-field input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-architectural);
    color: var(--color-text-pure);
    padding: 1rem 0;
    font-family: var(--font-body);
    font-size: 1.1rem;
    transition: border-color 0.3s ease;
}

.form-field input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.closing-cta-box {
    margin-top: 3rem;
    text-align: center;
}

.btn-decisive {
    background-color: var(--color-accent);
    color: var(--color-text-pure);
    border: none;
    padding: 1.25rem 2.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
}

.btn-decisive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.cta-subtext {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    opacity: 0.7;
}

/* 21. Site Footer */
.site-footer {
    background-color: var(--color-architectural);
    padding: 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

.footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-logo-svg {
    width: 32px;
    height: 32px;
    fill: var(--color-accent);
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 968px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .closing-frame {
        padding: 2rem;
    }
    
    .closing-content h2 {
        font-size: 2.5rem;
    }
}

/* Section 2: The Truth / Gap Analysis Styles */
.gap-analysis-wrapper {
    position: relative;
    border: 1px solid var(--color-architectural);
    background: rgba(26, 26, 27, 0.3);
    padding: 2rem;
}

.gap-diagram-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

#gap-diagram {
    width: 100%;
    height: auto;
}

#gap-diagram .block rect {
    transition: all 0.5s ease;
}

#gap-diagram .block:hover rect {
    stroke: var(--accent);
    stroke-width: 2;
}

.truth-dugri-box {
    max-width: 800px;
    margin: 2rem auto 0;
}

/* Adaptation Grid */
.adaptation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--color-architectural);
    margin-top: 4rem;
}

.prong-box {
    padding: 3rem 2rem;
    border-right: 1px solid var(--color-architectural);
    transition: background 0.3s ease;
}

.prong-box:last-child {
    border-right: none;
}

.prong-box:hover {
    background: rgba(46, 59, 78, 0.1);
}

.prong-num {
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.prong-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.prong-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Ownership Toggle Switch */
.ownership-toggle-container {
    padding: 3rem;
    border: 1px dashed var(--color-architectural);
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.toggle-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-architectural);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: var(--text-dim);
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--accent);
}

input:checked + .slider:before {
    transform: translateX(30px);
    background-color: var(--color-foundation);
}

.slider.round {
    border-radius: 0px; /* Keeping it brutalist */
}

.slider.round:before {
    border-radius: 0px;
}

.toggle-details {
    height: 24px;
}

@media (max-width: 968px) {
    .adaptation-grid {
        grid-template-columns: 1fr;
    }
    .prong-box {
        border-right: none;
        border-bottom: 1px solid var(--color-architectural);
    }
    .prong-box:last-child {
        border-bottom: none;
    }
}

/* --- HEBREW BRAND OVERRIDES (Ultimate Specificity) --- */
body[data-lang="he"] {
    font-family: 'IBM Plex Sans Hebrew', sans-serif !important;
}

/* Command Hooks & Primary Headers */
body[data-lang="he"] h1,
body[data-lang="he"] h2,
body[data-lang="he"] h3,
body[data-lang="he"] h4,
body[data-lang="he"] .be-command,
body[data-lang="he"] .be-highlight,
body[data-lang="he"] .be-command-inline,
body[data-lang="he"] .hero-main-title {
    font-family: 'IBM Plex Sans Hebrew', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Explanations & Body */
body[data-lang="he"] p,
body[data-lang="he"] li,
body[data-lang="he"] .text-lg,
body[data-lang="he"] .bio-text,
body[data-lang="he"] .philosophy-quote,
body[data-lang="he"] .hero-cta-subtext {
    font-family: 'IBM Plex Sans Hebrew', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* Section Taglines (Assistant 700) */
body[data-lang="he"] .label-caps,
body[data-lang="he"] .pedigree-label,
body[data-lang="he"] .hero-tagline,
body[data-lang="he"] .hero-tagline span,
body[data-lang="he"] [data-t*="tagline"] {
    font-family: 'Assistant', sans-serif !important;
    font-weight: 700 !important;
}

/* Technical / Mono (Mono 500) */
body[data-lang="he"] .text-mono,
body[data-lang="he"] .data-mono,
body[data-lang="he"] .terminal-body,
body[data-lang="he"] .terminal-prompt,
body[data-lang="he"] .terminal-header span,
body[data-lang="he"] .terminal-input-line span {
    font-family: 'IBM Plex Mono', monospace !important;
    font-weight: 500 !important;
}

/* Fix for AIQ Terminal Text specifically */
body[data-lang="he"] .terminal-body div.terminal-line:not(.type-system):not(.type-success):not(.type-error) {
    font-family: 'IBM Plex Sans Hebrew', sans-serif !important;
    font-weight: 400 !important;
}