/*
==================================================
  DEEP TECH THEME (v6.2 - SYNTAX FIXED)
  Palette: Deep Void (#050505), Obsidian (#111)
  Structure: 100% Preserved from Live Site
==================================================
*/


/* 1. Import Fonts (Kypspr Type System v1.1) 
   - Manrope: Interface & Narrative
   - Inter: Hero Headline Only (Strategic Exception)
   - IBM Plex Mono: Data & Fidelity
   - IBM Plex Serif: Founder's Manifesto
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&family=Inter:wght@800&family=Manrope:wght@300;400;600;800&display=swap');

/* 2. Define Variables */
:root {
    /* Colors (Preserved) */
    --bg-void: #050505;
    --bg-obsidian: #111111;
    --bg-panel: #1a1a1a;
    --text-primary: #f0f0f0;
    --text-muted: #a0a0a0;
    --accent-core: #3b82f6;
    --accent-success: #10b981;
    --border-wireframe: #333333;

    /* Typography (Updated v1.0) */
    --font-main: 'Manrope', sans-serif;
    /* Clarity / Interface */
    --font-mono: 'IBM Plex Mono', monospace;
    /* Fidelity / Engine */
}

/* Basic Reset & Setup */
body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    /* CHANGED */
    line-height: 1.6;
    background-color: var(--bg-void);
    /* CHANGED */
    color: var(--text-primary);
    /* CHANGED */
    -webkit-font-smoothing: antialiased;
}

/* ADDED: Blueprint Grid Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(var(--border-wireframe) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-wireframe) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
}


/* Kypspr Type System v1.0 - Global Rules 
*/

/* HEADLINES: Manrope ExtraBold (800) + Tight Tracking */
h1,
h2,
h3,
.hero-title,
.section-title,
.page-title {
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: -0.02em;
    /* The "Sharp" Factor */
}

/* BODY COPY: Manrope Regular (400) + Open Line Height */
body,
p {
    font-weight: 400;
    line-height: 1.6;
    /* Relentless Clarity */
}

/* KICKERS / EYEBROWS: Mono Medium (500) + Wide Tracking */
.section-subtitle,
.solution-subtitle,
.product-subtitle,
.path-subtitle {
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Technical Readability */
    font-size: 0.85rem;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This is a helper to make the footer "stick" to the bottom */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    /* This makes the content area push the footer down */
    padding: 2rem 0;
    /* Add some space to the top/bottom */
}

/* --- Header & Nav --- */
.main-header {
    background: rgba(5, 5, 5, 0.9);
    border-bottom: 1px solid var(--border-wireframe);
    padding: 1rem 0;
    backdrop-filter: blur(10px);
    /* FIX: Lift Header above content */
    position: relative;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    /* Ensures vertical alignment */
    align-items: center;
    text-decoration: none;
}

/* NEW: The Header Logo Image sizing */
.logo-image {
    height: 28px;
    /* Fixed height constraints the width automatically */
    width: auto;
    /* Maintains aspect ratio */
    display: block;
    transition: opacity 0.2s ease;
}

.logo-image:hover {
    opacity: 0.8;
    /* Subtle interaction */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    /* Added for vertical alignment */
}

.main-nav li {
    margin-left: 1.5rem;
    position: relative;
    /* For the dropdown */
}

.main-nav a {
    text-decoration: none;
    color: var(--text-muted);
    /* CHANGED */
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

/* --- Footer --- */
.main-footer {
    background: var(--bg-obsidian);
    /* CHANGED */
    color: var(--text-muted);
    /* CHANGED */
    padding: 2rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* ADDED */
}

.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
    padding-top: 1rem;
    font-size: 0.8rem;
}


/*
==================================================
  Section: Hero
==================================================
*/

.hero {
    background-color: var(--bg-void);

    /* UPDATED: New WebP Image + Darker Overlay for Contrast */
    background-image:
        /* Increased center opacity from 0.2 to 0.6 to ensure text readability */
        radial-gradient(circle at center, rgba(5, 5, 5, 0.6) 0%, rgba(5, 5, 5, 0.95) 100%),
        url('../assets/images/bg-tm-kypspr-90.webp');

    /* UPDATED POSITION: The new image is symmetrical, so center center works best. */
    background-position: center center;
    background-repeat: no-repeat;

    /* UPDATED SCALE: 'cover' ensures the high-res image fills the entire hero area
       responsively, regardless of screen size. */
    background-size: cover;

    /* Layout & Spacing */
    color: #ffffff;
    padding: 8rem 0 6rem 0;
    /* Increased top padding slightly for visual balance */
    text-align: center;
    border-bottom: 1px solid var(--border-wireframe);

    /* Optional: Parallax effect (keeps image fixed while scrolling) */
    /* background-attachment: fixed; */
}

.hero .container {
    max-width: 900px;
}

.hero-title {
    font-family: 'Inter', sans-serif;
    /* EXCEPTION: Keep Hero as Inter */
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    /* Slightly tighter for Inter ExtraBold */
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    letter-spacing: -0.03em;
    /* Inter needs slightly tighter tracking at this size */
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin: 0 0 2.5rem 0;
}

.hero-subtitle strong {
    color: #fff;
    /* CHANGED */
    font-weight: 600;
}

/* === Button Styles === */

.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative; /* Ensure z-index works */
    z-index: 1; /* Keep low */
}

/* A general style for all buttons (Narrative/Interface Buttons) */
.button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    /* Manrope SemiBold */
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--font-main);
    /* UPDATED: Manrope for standard UI */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Note: The .button-briefing class further down already overrides this 
   with var(--font-mono), which is correct for the "System Control" aesthetic. 
   No changes needed there. */

/* Primary Button (Solid) */
.button-primary {
    background-color: #fff;
    /* CHANGED */
    color: #000;
    /* CHANGED */
    border: 1px solid #fff;
}

.button-primary:hover {
    background-color: transparent;
    color: #fff;
}

.button-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Fix for secondary buttons on a *light* background (Now Dark) */
.solution .button-secondary,
.final-cta .button-secondary {
    color: var(--text-muted);
    /* CHANGED */
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.solution .button-secondary:hover,
.final-cta .button-secondary:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #fff;
}

/* Outline Button Fix */
.button-outline {
    background-color: transparent;
    color: var(--text-muted);
    /* CHANGED */
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.button-outline:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #fff;
    transform: translateY(-2px);
}

.button-secondary:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

/*
==================================================
  Section: Stalemate
==================================================
*/
.stalemate {
    background-color: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.stalemate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.stalemate-card {
    background-color: var(--bg-obsidian);
    /* CHANGED */
    padding: 2.5rem;
    border-radius: 4px;
    /* Sharp */
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    box-shadow: none;
    /* Flat */
}

.stalemate-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.stalemate-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 1.5rem;
}

.stalemate-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.stalemate-card li {
    font-size: 1.1rem;
    color: var(--text-muted);
    /* CHANGED */
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.stalemate-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-core);
    /* CHANGED */
    font-weight: bold;
}

/*
==================================================
  Section: Solution
==================================================
*/
.solution {
    background-color: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-bottom: 1px solid var(--border-wireframe);
    /* ADDED */
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    /* CHANGED */
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    /* CHANGED */
    line-height: 1.7;
    font-family: var(--font-mono);
    /* ADDED */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.solution-card {
    background-color: var(--bg-obsidian);
    /* CHANGED */
    padding: 2.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    box-shadow: none;
}

.solution-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.solution-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-core);
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    /* ADDED */
    text-transform: uppercase;
}

.solution-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 1.5rem;
}

.solution-list-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
    /* ADDED */
}

.solution-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.solution-card li {
    font-size: 1rem;
    color: var(--text-muted);
    /* CHANGED */
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.25rem;
}

.solution-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-success);
    /* CHANGED */
    font-weight: bold;
    font-size: 1.2rem;
}


/*
==================================================
  Section: Trust Verification
==================================================
*/
.trust-verification {
    background-color: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.trust-verification .section-subtitle strong {
    color: #fff;
    /* CHANGED */
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.trust-card {
    border-top: 4px solid var(--accent-core);
    /* CHANGED */
    padding-top: 2rem;
    background: var(--bg-obsidian);
    /* ADDED */
    padding: 2rem;
    /* ADDED */
    border: 1px solid var(--border-wireframe);
    /* ADDED */
    border-top-width: 4px;
}

.trust-step-number {
    display: inline-block;
    background-color: var(--bg-panel);
    /* CHANGED */
    color: var(--accent-core);
    /* CHANGED */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.trust-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.trust-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0;
}

/*
==================================================
  Section: Final CTA
==================================================
*/
.final-cta {
    background-color: var(--bg-void);
    /* CHANGED */
    color: #ffffff;
    padding: 6rem 0;
    text-align: center;
    border-top: 1px solid var(--border-wireframe);
    /* ADDED */
}

.final-cta .container {
    max-width: 900px;
}

.final-cta-title {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

.final-cta-subtitle {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin: 0 0 2.5rem 0;
}

.final-cta-subtitle strong {
    color: #fff;
    /* CHANGED */
}


/*
==================================================
  Page: About Us
==================================================
*/

.page-header {
    background-color: var(--bg-void);
    /* CHANGED */
    color: #ffffff;
    padding: 4rem 0;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    font-weight: 800;
    /* CHANGED */
    margin: 0 0 1rem 0;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    /* CHANGED */
    margin: 0;
    font-family: var(--font-mono);
    /* ADDED */
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
}

.about-purpose {
    padding: 5rem 0;
    background: var(--bg-void);
    /* CHANGED */
    border-bottom: 1px solid var(--border-wireframe);
    /* ADDED */
}

.about-intro-text {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
}

.about-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.about-purpose p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 1.5rem;
}

.about-purpose p strong {
    color: #fff;
    /* CHANGED */
}

.about-principles {
    padding: 5rem 0;
    background-color: var(--bg-void);
    /* CHANGED */
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.principle-card {
    background: var(--bg-obsidian);
    /* CHANGED */
    padding: 2rem;
    border-radius: 4px;
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.principle-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.principle-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0;
}

.about-vision-cta {
    padding: 5rem 0;
    background: var(--bg-void);
    /* CHANGED */
}

.about-vision-cta p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
}


/*
==================================================
  Page: Solutions
==================================================
*/
.solutions-problem {
    background: var(--bg-void);
    /* CHANGED */
    padding: 4rem 0;
}

.stalemate-card-list {
    list-style: none;
    padding-left: 0;
    margin-top: 2rem;
}

.stalemate-card-list li {
    font-size: 1.1rem;
    color: var(--text-muted);
    /* CHANGED */
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.stalemate-card-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-core);
    /* CHANGED */
    font-weight: bold;
}

.solutions-pillars {
    background-color: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.solutions-ciso-blocker {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}


/*
==================================================
  Page: Product
==================================================
*/
.product-pillars {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.product-card {
    background-color: var(--bg-obsidian);
    /* CHANGED */
    padding: 2.5rem 2rem;
    border-radius: 4px;
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.product-pillar-number {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-core);
    /* CHANGED */
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.product-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.product-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    /* ADDED */
    text-transform: uppercase;
}

.product-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0;
}

.product-engage {
    background-color: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

/*
==================================================
  Page: Pricing
==================================================
*/
.pricing-intro {
    background: var(--bg-void);
    /* CHANGED */
    padding: 3rem 0;
}

.pricing-table-section {
    background: var(--bg-void);
    /* CHANGED */
    padding: 2rem 0 5rem 0;
}

.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 1rem;
}

.pricing-table th,
.pricing-table td {
    padding: 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
    line-height: 1.6;
    color: var(--text-muted);
    /* ADDED */
}

.pricing-table th {
    background-color: var(--bg-panel);
    /* CHANGED */
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    /* CHANGED */
    font-family: var(--font-mono);
    /* ADDED */
}

.pricing-table th:nth-child(2),
.pricing-table th:nth-child(3) {
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    /* CHANGED */
    background-color: var(--bg-obsidian);
    /* CHANGED */
    border-bottom: 3px solid var(--accent-core);
    /* CHANGED */
}

.pricing-table td:nth-child(1) {
    font-weight: 600;
    color: #fff;
    /* CHANGED */
}

.pricing-table td:nth-child(2),
.pricing-table td:nth-child(3) {
    color: var(--text-muted);
    /* CHANGED */
    vertical-align: top;
}

.pricing-table td.cell-check {
    color: #fff;
    /* CHANGED */
}

.pricing-table td ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0 0;
}

.pricing-table td ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.pricing-table td ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-success);
    /* CHANGED */
    font-weight: bold;
}

.pricing-methodology {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.pricing-methodology ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.pricing-methodology li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    /* CHANGED */
}

.pricing-methodology li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-core);
    /* CHANGED */
    font-weight: bold;
}

.pricing-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/*
==================================================
  Page: Careers
==================================================
*/
.careers-mission {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
}

.careers-philosophy {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.careers-hiring {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.role-list {
    margin-top: 2.5rem;
}

.role-item {
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
    padding: 2rem 0;
}

.role-item:first-child {
    padding-top: 0;
}

.role-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.role-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.role-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0;
}


/*
==================================================
  Page: Contact
==================================================
*/
.contact-intro {
    background: var(--bg-void);
    /* CHANGED */
    padding: 3rem 0;
}

.contact-paths {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.path-number {
    display: inline-block;
    background-color: var(--bg-panel);
    /* CHANGED */
    color: var(--accent-core);
    /* CHANGED */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.path-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.path-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    /* ADDED */
    text-transform: uppercase;
}

.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.solution-card p {
    flex-grow: 1;
}


/*
==================================================
  Page: Blog Listing (blog)
==================================================
*/
.posts-list-section {
    background: var(--bg-void);
    /* CHANGED */
    padding: 4rem 0;
}

.post-card {
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    border-radius: 4px;
    background: var(--bg-obsidian);
    /* CHANGED */
    box-shadow: none;
    /* CHANGED */
    overflow: hidden;
}

.post-card-header {
    padding: 2rem 2.5rem 0 2.5rem;
}

.post-card-tags {
    margin-bottom: 1rem;
}

.post-card-tags span {
    display: inline-block;
    background-color: var(--bg-panel);
    /* CHANGED */
    color: var(--accent-core);
    /* CHANGED */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-mono);
    /* ADDED */
}

.post-card-title {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin: 0;
}

.post-card-title a {
    text-decoration: none;
    color: inherit;
}

.post-card-title a:hover {
    color: var(--accent-core);
    /* CHANGED */
}

.post-card-excerpt {
    padding: 1.5rem 2.5rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    /* CHANGED */
}

.post-card-footer {
    background: var(--bg-obsidian);
    /* CHANGED */
    padding: 1.5rem 2.5rem;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}


/*
==================================================
  Page: Single Post (single-post)
==================================================
*/
.post-header {
    background: var(--bg-void);
    /* CHANGED */
    padding: 4rem 0;
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
    text-align: center;
}

.post-header-tags {
    margin-bottom: 1.5rem;
}

.post-header-tags a {
    display: inline-block;
    background-color: var(--bg-panel);
    /* CHANGED */
    color: var(--text-muted);
    /* CHANGED */
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    margin: 0 0.25rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.post-header-tags a:hover {
    background-color: var(--accent-core);
    /* CHANGED */
    color: #fff;
}

.post-title {
    font-size: 3rem;
    font-weight: 800;
    /* CHANGED */
    color: #fff;
    /* CHANGED */
    margin: 0 0 1rem 0;
}

.post-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    /* CHANGED */
    line-height: 1.7;
    margin: 0;
}

.post-content-section {
    background: var(--bg-void);
    /* CHANGED */
    padding: 4rem 0;
}

.post-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-primary);
    /* CHANGED */
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.post-content strong {
    color: #fff;
    /* CHANGED */
    font-weight: 600;
}

.post-content hr {
    border: none;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
    margin: 3rem 0;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.75rem;
}

.post-content .post-cta {
    text-align: center;
    background: var(--bg-obsidian);
    /* CHANGED */
    padding: 2.5rem;
    margin-top: 3rem;
    border-radius: 4px;
    border: 1px solid var(--border-wireframe);
    /* ADDED */
}


/*
==================================================
  Page: White Paper Listing (whitepapers)
==================================================
*/
/* Reusing post-card styles */

/*
==================================================
  Page: Single White Paper (single-whitepaper)
==================================================
*/
.whitepaper-content-section {
    background: var(--bg-void);
    /* CHANGED */
    padding: 4rem 0;
}

.whitepaper-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.whitepaper-content h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.whitepaper-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 1.5rem;
}

.whitepaper-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.whitepaper-content li {
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    /* CHANGED */
}

.whitepaper-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-success);
    /* CHANGED */
    font-weight: bold;
}

.whitepaper-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

/* --- Sidebar Form --- */
.whitepaper-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.whitepaper-form-box {
    background: var(--bg-obsidian);
    /* CHANGED */
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    border-radius: 4px;
    padding: 2rem;
}

.whitepaper-form-box h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.whitepaper-form-box p {
    font-size: 1rem;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 1.5rem;
}

/* FIX: Prevent Sidebar Button Overflow */
.whitepaper-form-box .button {
    width: 100%;
    /* Force full width */
    box-sizing: border-box;
    /* Include padding inside the width calculation */
    display: block;
    /* Ensure it behaves as a block element */
    text-align: center;
    /* Center the text */
    margin-top: 1rem;
    /* Add spacing from the text above */
}


.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    background-color: var(--bg-panel);
    /* ADDED */
    color: #fff;
    /* ADDED */
    border-radius: 2px;
    box-sizing: border-box;
}

/* Added select for forms */
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-wireframe);
    background-color: var(--bg-panel);
    color: #fff;
    border-radius: 2px;
    box-sizing: border-box;
}

/*
==================================================
  Footer Links (REVISED)
==================================================
*/
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.footer-logo {
    display: block;
    text-decoration: none;
}

.footer-logo-image {
    height: 36px;
    /* Slightly larger than header */
    width: auto;
    display: block;
    opacity: 0.6;
    /* Muted branding for footer */
    transition: opacity 0.2s ease;
}

.footer-logo-image:hover {
    opacity: 1.0;
    /* Lights up on hover */
}

.footer-nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 3rem;
}

.footer-links a {
    color: var(--text-muted);
    /* CHANGED */
    text-decoration: none;
    margin-left: 1.5rem;
    font-size: 0.9rem;
    font-family: var(--font-mono);
    /* ADDED */
}

.footer-links a:first-child {
    margin-left: 0;
}

.footer-links a:hover {
    color: #fff;
}

.footer-social a {
    color: var(--text-muted);
    /* CHANGED */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 1.5rem;
    transition: color 0.3s ease;
    font-family: var(--font-mono);
    /* ADDED */
}

.footer-social a:first-child {
    margin-left: 0;
}

.footer-social a:hover {
    color: var(--accent-core);
    /* CHANGED */
}

/*
==================================================
  Page: Form Pages (review, assessment)
==================================================
*/
.form-page-section {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
}

.form-header {
    text-align: center;
    border-bottom: 1px solid var(--border-wireframe);
    /* CHANGED */
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}

.form-header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.form-header p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 0;
}

.checkbox-group {
    background: var(--bg-obsidian);
    /* CHANGED */
    border: 1px solid var(--border-wireframe);
    /* CHANGED */
    border-radius: 6px;
    padding: 1.5rem;
}

.checkbox-group label {
    display: block;
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    color: var(--text-primary);
    /* CHANGED */
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.checkbox-group label:last-child {
    margin-bottom: 0;
}

.checkbox-group input {
    position: absolute;
    left: 0;
    top: 3px;
    height: 1.15rem;
    width: 1.15rem;
}

.form-submit-group {
    text-align: left;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.form-success-message {
    text-align: center;
    padding: 3rem;
    background: var(--bg-obsidian);
    /* CHANGED */
    border: 1px solid var(--accent-success);
    /* CHANGED */
    border-radius: 8px;
}

.form-success-message h2 {
    font-size: 2rem;
    color: #fff;
    /* CHANGED */
    margin-top: 0;
    margin-bottom: 1rem;
}

.form-success-message p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    /* CHANGED */
    margin-bottom: 2rem;
}

.form-error-message {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 0, 0, 0.1);
    /* CHANGED */
    border: 1px solid red;
    /* CHANGED */
    border-radius: 6px;
    margin-bottom: 2rem;
}

.form-error-message p {
    color: #ff4444;
    /* CHANGED */
    font-weight: 500;
    margin: 0;
}

/*
==================================================
  Text Emphasis Utilities (No Quotes)
==================================================
*/

.text-emphasis {
    color: #fff;
    /* CHANGED to white for dark mode */
    font-weight: 600;
    font-style: italic;
}

.hero .text-emphasis,
.final-cta .text-emphasis,
.page-header .text-emphasis {
    color: #fff;
    /* Ensuring visibility */
}

.text-brand {
    color: var(--accent-core);
    /* CHANGED */
    font-weight: 600;
}

.text-danger {
    color: #ef4444;
    /* CHANGED */
    font-weight: 700;
    text-transform: uppercase;
}


/* ==================================================
  v5.1 Updates: Icons, Status, Pipeline
==================================================
*/

/* --- Fine-Line Icon Containers --- */
.card-icon {
    margin-bottom: 1.5rem;
    display: inline-block;
    padding: 0;
    /* Removed padding for schematic look */
    background: transparent;
    /* No background bubble */
}

.card-icon svg {
    stroke: var(--accent-core);
    /* Tech Blue */
    stroke-width: 1.5px;
    /* Fine line */
    width: 48px;
    height: 48px;
}

/* --- Terminal Status Indicator --- */
.status-indicator-box {
    margin-top: 1.5rem;
    background-color: #1a0505;
    /* Very dark red bg */
    border: 1px solid #ef4444;
    /* Red border */
    padding: 1rem;
    border-radius: 2px;
    display: inline-block;
    font-family: var(--font-mono);
}

.status-text {
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* FIX: Remove the forced gap in the Homepage Solution section.
   This ensures "How we do it" sits naturally below the text.
*/
.solution .solution-card p {
    flex-grow: 0;
    margin-bottom: 2rem;
    /* Add a consistent fixed gap instead */
}


/* --- Section 4 Pipeline (Connecting Line) --- */
/* Only show on Desktop */
@media (min-width: 769px) {
    .trust-grid {
        position: relative;
        overflow: visible;
    }

    /* Create the dashed line coming out of Step 1 */
    .trust-card-step-1 {
        position: relative;
    }

    .trust-card-step-1::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -2.5rem;
        /* Span the gap */
        width: 2.5rem;
        /* Width of the gap */
        height: 2px;
        border-top: 2px dashed var(--border-wireframe);
        z-index: 1;
    }
}


/*
==================================================
  Navigation Dropdowns (Desktop Only)
==================================================
*/

.main-nav li {
    position: relative;
}

@media (min-width: 769px) {

    .main-nav .dropdown-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        background: var(--bg-obsidian);
        /* CHANGED */
        padding: 0.5rem 0;
        border-radius: 6px;
        border: 1px solid var(--border-wireframe);
        /* CHANGED */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        /* CHANGED */
        min-width: 220px;
        z-index: 100;
    }

    .main-nav li:hover .dropdown-menu {
        display: block;
    }

    .main-nav .dropdown-menu li {
        margin: 0;
        display: block;
    }

    .main-nav .dropdown-menu li a {
        display: block;
        padding: 0.75rem 1.5rem;
        color: var(--text-muted);
        /* CHANGED */
        font-size: 0.95rem;
    }

    .main-nav .dropdown-menu li a:hover {
        background-color: var(--bg-panel);
        /* CHANGED */
        color: var(--accent-core);
        /* CHANGED */
    }

}

/*
==================================================
  Page: Trust & Security
==================================================
*/
.trust-feature {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
}

.trust-pillars {
    background: var(--bg-void);
    /* CHANGED */
    padding: 5rem 0;
    border-top: 1px solid var(--border-wireframe);
    /* CHANGED */
}

.solution-card-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.solution-card-list li {
    font-size: 1rem;
    color: var(--text-muted);
    /* CHANGED */
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}

.solution-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-success);
    /* CHANGED */
    font-weight: bold;
    font-size: 1.2rem;
}

/*
==================================================
  Mobile Navigation Toggle (Hamburger)
==================================================
*/

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

.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 10001; /* FIX: Boosted */
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #fff;
    /* CHANGED for Dark Mode */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.mobile-nav-toggle.is-active .hamburger-inner {
    transform: rotate(45deg);
}

.mobile-nav-toggle.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
}

.mobile-nav-toggle.is-active .hamburger-inner::after {
    bottom: 0;
    opacity: 0;
}

/*
==================================================
  Mobile Nav Dropdown Toggle Button
==================================================
*/
.dropdown-toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 4.5rem;
    width: 4.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

.dropdown-toggle::before,
.dropdown-toggle::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #fff;
    /* CHANGED for Dark Mode */
    width: 16px;
    height: 3px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.dropdown-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.dropdown-toggle.is-active::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/*
==================================================
  Section: Founder's Trust Anchor (v2 - Split Layout)
==================================================
*/
.founder-note {
    background-color: var(--bg-panel);
    /* #1a1a1a */
    border-bottom: 1px solid var(--border-wireframe);
    padding: 6rem 0;
    /* Increased padding for better breathing room */
    position: relative;
}

/* Asymmetric Grid: 1/3 (Bio) + 2/3 (Manifesto) */
.founder-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5rem;
    /* Increased gap to separate the columns cleanly */
    align-items: center;
    /* Vertically center the manifesto */
}

/* --- Left Column: The Bio (Image + Name) --- */
.founder-image-col {
    text-align: center;
    /* Center everything in the left column */
}

/* UPDATED: Larger, Tactical Lens */
.founder-headshot {
    width: 280px;
    /* Increased from 220px */
    height: 280px;
    /* Increased from 220px */
    border-radius: 50%;

    object-fit: cover;
    object-position: top center;

    /* Deep Tech Filter Stack */
    filter: grayscale(100%) contrast(120%) brightness(90%);

    border: 2px solid var(--border-wireframe);
    background-color: var(--bg-obsidian);

    display: block;
    margin: 0 auto;
    transition: all 0.4s ease;
}

.founder-headshot:hover {
    filter: grayscale(0%) contrast(100%) brightness(100%);
    border-color: var(--accent-core);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
    transform: scale(1.02);
}

/* UPDATED: Signature Block (Now Centered on Left) */
.founder-signature {
    margin-top: 2rem;
    /* No border-left anymore, just clean spacing */
}

.founder-name {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    color: #fff;
    font-size: 1.2rem;
    /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.founder-title {
    display: block;
    font-family: var(--font-mono);
    color: var(--accent-core);
    /* Blue text for the title */
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Stack the Creds Pills nicely */
.founder-creds {
    display: inline-block;
    background: var(--bg-obsidian);
    border: 1px solid var(--border-wireframe);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    /* Fully rounded pills */
    margin-top: 0.5rem;
}

/* --- Right Column: The Manifesto --- */
.founder-content-col {
    /* Removed max-width restriction so it fills the column */
}

.founder-quote {
    font-family: 'IBM Plex Serif', serif;
    font-size: 2.5rem;
    /* Larger, more impact */
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2rem;
    font-style: italic;
}

.founder-text {
    font-size: 1.2rem;
    /* Slightly larger body text */
    color: var(--text-primary);
    margin-bottom: 2.5rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .founder-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .founder-headshot {
        width: 220px;
        /* Shrink back down slightly for mobile */
        height: 220px;
    }

    .founder-quote {
        font-size: 1.8rem;
    }
}


/* ==================================================
  Page: Founder's Manifesto (The Letter)
==================================================
*/

.manifesto-section {
    background-color: var(--bg-void);
    padding: 6rem 0;
    /* A subtle paper texture overlay effect */
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Header Area */
.manifesto-header {
    text-align: left;
    margin-bottom: 4rem;
    border-bottom: 1px solid var(--border-wireframe);
    padding-bottom: 2rem;
}

.manifesto-label {
    font-family: var(--font-mono);
    color: var(--accent-core);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 1rem;
}

.manifesto-title {
    font-family: 'IBM Plex Serif', serif;
    /* Editorial Authority */
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    font-style: italic;
}

/* The Letter Body */
.manifesto-body {
    /* Limit width for reading comfort (approx 70 chars per line) */
    max-width: 700px;
    margin: 0 auto;
}

.manifesto-body p {
    font-family: 'IBM Plex Serif', serif;
    /* The "Letter" Font */
    font-size: 1.25rem;
    line-height: 1.8;
    color: #e2e2e2;
    /* High readability off-white */
    margin-bottom: 2rem;
}

.manifesto-salutation {
    font-weight: 600;
    color: #fff !important;
    margin-bottom: 2.5rem !important;
}

.manifesto-divider {
    border: 0;
    border-top: 1px solid var(--border-wireframe);
    margin: 3rem 0;
    width: 100px;
    /* Small divider */
}

/* Principles Sub-sections */
.manifesto-principle {
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--accent-core);
}

.manifesto-principle h3 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.manifesto-principle p {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Signature Block */
.manifesto-signature {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-wireframe);
}

.founder-image-small img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--border-wireframe);
    object-fit: cover;
    object-position: top center;
    filter: grayscale(100%) contrast(120%);
}

.signature-text {
    display: flex;
    flex-direction: column;
}

.sig-name {
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    font-style: italic;
}

.sig-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-core);
    margin-top: 0.25rem;
}

.sig-creds {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Bottom CTA */
.manifesto-cta-container {
    text-align: center;
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px dashed var(--border-wireframe);
}

.cta-subtext {
    font-family: var(--font-mono);
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    margin-top: 1rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .manifesto-title {
        font-size: 2rem;
    }

    .manifesto-body p {
        font-size: 1.1rem;
    }

    .manifesto-signature {
        flex-direction: column;
        text-align: center;
    }
}




/*
==================================================
  Responsive Design: Mobile (Full Update)
==================================================
*/
@media (max-width: 768px) {

    .logo-image {
        height: 24px;
        /* Shrink slightly for mobile screens */
    }

    .mobile-nav-toggle {
        display: block;
    }

    .main-nav ul {
        display: none;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0; /* CHANGED: Was 100%. We now rely entirely on transform for movement */
        width: 100%;
        
        /* FIX: Dynamic Height & Scroll */
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        background: var(--bg-void);
        transition: transform 0.3s ease-in-out, visibility 0.3s;
        z-index: 9999;
        padding-top: 6rem;
        padding-bottom: 2rem;
        
        /* HARDWARE ACCELERATION FORCE (Mobile Fix) */
        /* Start state: Pushed 100% to the right (off-screen) */
        transform: translate3d(100%, 0, 0); 
        visibility: hidden; /* Added: Prevents accidental clicks/focus when closed */
    }

    .main-nav.nav-open {
        /* Active state: Brought back to center (0,0) */
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    .main-nav.nav-open ul {
        display: block;
        text-align: left;
    }

    .main-nav.nav-open li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid var(--border-wireframe);
        /* ADDED */
    }

    .main-nav.nav-open li a {
        display: block;
        padding: 1.25rem 1.5rem;
        font-size: 1.5rem;
        color: #fff;
        /* CHANGED */
    }

    .main-nav.nav-open .nav-button {
        border: none;
    }

    .main-nav.nav-open .nav-dropdown {
        position: relative;
        border-bottom: 1px solid var(--border-wireframe);
        /* CHANGED */
    }

    .main-nav.nav-open .nav-dropdown>a {
        padding-right: 4.5rem;
    }

    .main-nav.nav-open .dropdown-toggle {
        display: block;
    }

    .main-nav.nav-open .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        min-width: 0;
        padding-left: 0;
        background: var(--bg-panel);
        /* CHANGED */
        border-top: 1px solid var(--border-wireframe);
        /* CHANGED */
    }

    .main-nav.nav-open .dropdown-menu.submenu-open {
        display: block;
    }

    .main-nav.nav-open .dropdown-menu li {
        border-bottom: 1px solid var(--border-wireframe);
        /* CHANGED */
    }

    .main-nav.nav-open .dropdown-menu li:last-child {
        border-bottom: none;
    }

    .main-nav.nav-open .dropdown-menu li a {
        font-size: 1.1rem;
        color: var(--text-muted);
        /* CHANGED */
        padding: 0.75rem 1.5rem;
        padding-left: 2.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .stalemate-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: 4rem 0;

        /* CHANGED: 'cover' ensures the image fills the full height of the mobile 
           screen. '100% auto' would make the image too short vertically. */
        background-size: cover;
        
        /* Full width on mobile */
        background-position: center center;
    }

    .stalemate {
        padding: 3rem 0;
    }

    .stalemate-card {
        padding: 1.5rem;
    }

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

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

    .solution-grid {
        grid-template-columns: 1fr;
    }

    .solution {
        padding: 3rem 0;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-verification {
        padding: 3rem 0;
    }

    .trust-card {
        padding-top: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .trust-title {
        font-size: 1.5rem;
    }

    .final-cta {
        padding: 4rem 0;
    }

    .final-cta-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .about-purpose,
    .about-principles,
    .about-vision-cta {
        padding: 3rem 0;
    }

    .about-intro-text {
        font-size: 1.15rem;
    }

    .about-section-title {
        font-size: 1.75rem;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }

    .solutions-problem,
    .solutions-pillars,
    .solutions-ciso-blocker {
        padding: 3rem 0;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-pillars,
    .product-engage {
        padding: 3rem 0;
    }

    .careers-mission,
    .careers-philosophy,
    .careers-hiring {
        padding: 3rem 0;
    }

    .role-title {
        font-size: 1.25rem;
    }

    .contact-intro {
        padding: 3rem 0;
    }

    .contact-paths {
        padding: 3rem 0;
    }

    .path-title {
        font-size: 1.5rem;
    }

    .posts-list-section {
        padding: 3rem 0;
    }

    .post-card-header {
        padding: 1.5rem 1.5rem 0 1.5rem;
    }

    .post-card-excerpt {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .post-card-footer {
        padding: 1.5rem 1.5rem;
    }

    .post-card-title {
        font-size: 1.5rem;
    }

    .post-header {
        padding: 3rem 0;
    }

    .post-title {
        font-size: 2rem;
    }

    .post-subtitle {
        font-size: 1.1rem;
    }

    .post-content-section {
        padding: 3rem 0;
    }

    .post-content {
        font-size: 1.1rem;
    }

    .post-content h3 {
        font-size: 1.5rem;
    }

    .whitepaper-content-section {
        padding: 3rem 0;
    }

    .whitepaper-layout {
        grid-template-columns: 1fr;
    }

    .whitepaper-sidebar {
        position: static;
        top: 0;
        grid-row: 1;
        margin-bottom: 3rem;
    }

    .whitepaper-content h2 {
        font-size: 1.75rem;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .footer-nav-group {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-links a {
        margin: 0 0.75rem;
    }

    .footer-social a {
        margin: 0 0.75rem;
    }

}



/* ==================================================
  HERO TERMINAL ANIMATIONS (v5.0 - The Fortress)
==================================================
*/

/* --- Effect 1: Infrastructure Heartbeat --- */
.heartbeat {
    animation: sys-pulse 3s ease-in-out infinite;
}

@keyframes sys-pulse {

    0%,
    100% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.5;
    }

    /* Dimmed, not hidden */
}

/* --- Effect 2: Perimeter Sentinel (Traveling Dot) --- */
.sentinel-box {
    /* Ensure the dot stays relative to this box */
    position: relative;
    border: 1px solid #333;
    /* Base border */
}

.sentinel-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: var(--accent-success);
    /* Terminal Green */
    box-shadow: 0 0 4px var(--accent-success);
    /* Slight glow */
    top: -1px;
    left: -1px;
    /* 6s duration, Linear timing (no easing) per CISO brief */
    animation: perimeter-patrol 6s linear infinite;
}

/* Physics Calculation: 
   The box is roughly 2:1 aspect ratio.
   Top/Bottom = 33% of total distance.
   Sides = 17% of total distance.
*/
@keyframes perimeter-patrol {
    0% {
        top: -1px;
        left: -1px;
    }

    /* Start Top-Left */
    33% {
        top: -1px;
        left: calc(100% - 2px);
    }

    /* Move Right */
    50% {
        top: calc(100% - 2px);
        left: calc(100% - 2px);
    }

    /* Move Down */
    83% {
        top: calc(100% - 2px);
        left: -1px;
    }

    /* Move Left */
    100% {
        top: -1px;
        left: -1px;
    }

    /* Move Up (Reset) */
}

/* --- Effect 3: The Egress Block (Kill Switch) --- */
.egress-box {
    position: relative;
    overflow: hidden;
    /* Base border state */
    border: 1px solid #333;
    transition: border-color 0.1s, box-shadow 0.1s;
    /* The Box Reaction: Flash border when packet hits */
    animation: border-flash 5s infinite;
    animation-delay: 2.5s;
    /* Sync with packet impact */
}

/* The Particle Attempt */
.data-packet {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fff;
    /* Raw Data color */
    top: 50%;
    left: 50%;
    /* Spawn Center */
    transform: translateY(-50%);
    opacity: 0;
    /* The run logic */
    animation: packet-run 5s infinite;
    animation-delay: 2s;
}

/* The "BLOCKED" Text Pulse */
.blocked-text {
    transition: color 0.1s;
    animation: text-reject 5s infinite;
    animation-delay: 2.5s;
    /* Sync with impact */
}

/* --- Keyframes for Egress --- */

/* 1. The Packet Run */
@keyframes packet-run {
    0% {
        left: 50%;
        opacity: 0;
    }

    5% {
        left: 50%;
        opacity: 1;
    }

    /* Spawn */
    10% {
        left: 98%;
        opacity: 1;
    }

    /* Hit Wall (Rapid movement) */
    10.1% {
        left: 98%;
        opacity: 0;
    }

    /* Vanish instantly (Kill Switch) */
    100% {
        left: 98%;
        opacity: 0;
    }

    /* Stay gone */
}

/* 2. The Box Flash (Reaction) */
@keyframes border-flash {

    0%,
    9% {
        border-color: #333;
        box-shadow: none;
    }

    10% {
        border-color: var(--accent-success);
        box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.2);
    }

    /* Impact */
    15% {
        border-color: #333;
        box-shadow: none;
    }

    /* Fade out */
    100% {
        border-color: #333;
    }
}

/* 3. The Text Pulse */
@keyframes text-reject {

    0%,
    9% {
        color: #fff;
        text-shadow: none;
    }

    10% {
        color: var(--accent-success);
        text-shadow: 0 0 5px var(--accent-success);
    }

    /* Pulse Green */
    15% {
        color: #fff;
        text-shadow: none;
    }

    100% {
        color: #fff;
    }
}

/* ==================================================
  HERO CTA: "Request Briefing" (Rev 0.2 - Infrastructure Specs)
==================================================
*/

.button-briefing {
    background-color: var(--accent-core);
    /* Tech Blue */
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1.2rem 3rem;
    border: 1px solid var(--accent-core);
    border-radius: 2px;
    /* Sharp edges */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    z-index: 1; /* FIX: Explicit layer */
}

/* Hover State: Technical engagement */
.button-briefing:hover {
    background-color: #fff;
    color: var(--accent-core);
    /* Text turns Blue */
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
    transform: translateY(-1px);
}

/* Icon styling for the SVG */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG Transition Logic  */
.btn-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: #fff;
    /* Default: White */
    transition: stroke 0.2s ease;
}

/* Interaction: On button hover, the Icon lights up Cyan */
.button-briefing:hover .btn-icon svg {
    stroke: var(--accent-core);
}

/* ==================================================
  HERO CTA UPDATE: "System Status" Scarcity Pill (v2 - High Viz)
==================================================
*/

/* The Container (The Pill) */
.scarcity-label {
    /* Font & Color */
    font-family: var(--font-mono);
    color: #ffffff;
    /* Pure White */
    /* "Lit Up" Effect: A subtle white glow behind the text */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    font-weight: 600;
    font-size: 0.85rem;
    /* Bumped size slightly */
    text-transform: uppercase;
    letter-spacing: 0.05em;

    /* Shape & Structure */
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.6rem 1.5rem;
    /* Slightly taller/wider for presence */

    /* The "Glass Container" Look */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Higher opacity border */
    background-color: #000000;
    /* Pure Black to contrast against #050505 bg */
    border-radius: 100px;

    /* Lift it off the page */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    
    /* FIX: Force low stacking */
    position: relative;
    z-index: 1;
}

/* The Active LED (Unchanged, but ensures it pops against the black) */
.status-dot {
    color: #00ff41;
    /* Neon Green */
    font-size: 0.6rem;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
    animation: led-pulse 2s infinite;
}

@keyframes led-pulse {
    0% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
    }

    50% {
        opacity: 0.5;
        text-shadow: none;
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
    }
}

/* Subtle Text Link */
.text-link-subtle {
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.text-link-subtle:hover {
    color: #fff;
    border-bottom-color: #fff;
}


/* ==================================================
  PAGE: THE AUDIT GATEWAY (/audit)
  Aesthetic: "Velvet Rope" / Deep Tech / Classified
==================================================
*/

/* --- Section A: Hero --- */
.audit-hero {
    background-color: var(--bg-void);
    padding: 6rem 0 4rem 0;
    text-align: center;
    border-bottom: 1px solid var(--border-wireframe);
    position: relative;
}

.audit-kicker {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-core);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.audit-title {
    font-family: var(--font-main);
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.audit-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

/* Trust Signal Box */
.audit-trust-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    /* Low opacity blue */
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
}

.signal-icon {
    color: var(--accent-core);
    display: flex;
}

.signal-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #fff;
}

/* --- Section B: Pillars --- */
.audit-pillars {
    background-color: var(--bg-obsidian);
    padding: 5rem 0;
    border-bottom: 1px solid var(--border-wireframe);
}

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

.audit-card {
    padding: 2rem;
    background: var(--bg-void);
    border: 1px solid var(--border-wireframe);
    border-radius: 2px;
}

.audit-icon {
    margin-bottom: 1.5rem;
}

.audit-card-title {
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.audit-card-text {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- Section C: Form --- */
.audit-form-section {
    background-color: var(--bg-void);
    padding: 5rem 0;
}

.form-title {
    font-family: var(--font-main);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.kypspr-form {
    background: var(--bg-obsidian);
    padding: 2.5rem;
    border: 1px solid var(--border-wireframe);
    border-radius: 2px;
    margin-top: 2rem;
}

/* Form Layout Utils */
.form-row {
    display: flex;
    gap: 1.5rem;
}

.form-group.half {
    flex: 1;
}

/* Submit Button Styling */
.button-audit-submit {
    width: 100%;
    background-color: var(--accent-core);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 1rem;
    margin-top: 1.5rem;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 2px;
}

.button-audit-submit:hover {
    background-color: #fff;
    color: var(--accent-core);
}

/* --- Section D: Footer --- */
.audit-footer {
    background-color: var(--bg-void);
    padding: 2rem 0 4rem 0;
    text-align: center;
}

.reassurance-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.reassurance-text strong {
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .audit-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .audit-title {
        font-size: 2.5rem;
    }
}

/* ==================================================
   SEARCH OVERLAY & RESULTS (Command Line Interface)
   ================================================== */

/* 1. Trigger Button (Nav Icon) */
.search-trigger {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}
.search-trigger:hover {
    color: var(--accent-core);
}

/* 2. Full Screen Overlay Container */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.95); /* Deep Void */
    backdrop-filter: blur(15px); /* Glass effect */
    z-index: 20000; /* Highest layer (Above Mobile Menu) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 3. Close Button */
.search-close {
    position: absolute;
    top: 2rem;
    right: 3rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 3rem;
    font-weight: 300;
    cursor: pointer;
    transition: color 0.2s;
}
.search-close:hover {
    color: #fff;
    transform: scale(1.1);
}

/* 4. Search Input Area */
.search-container {
    width: 100%;
    max-width: 800px;
    padding: 2rem;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--border-wireframe);
    padding-bottom: 1rem;
    transition: border-color 0.3s ease;
}
.search-input-wrapper:focus-within {
    border-bottom-color: var(--accent-core);
}

.search-prompt {
    font-family: var(--font-mono);
    color: var(--accent-core);
    font-size: 1.5rem;
    margin-right: 1rem;
    font-weight: 600;
}

.search-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: var(--font-main);
    font-size: 2rem;
    font-weight: 700;
    width: 100%;
    outline: none;
}
.search-input::placeholder {
    color: #333;
    font-weight: 400;
}

/* 5. Live Search Results List */
.search-results-list {
    margin-top: 2rem;
    max-height: 60vh; /* Scrollable if list gets long */
    overflow-y: auto;
    padding-right: 1rem;
}

/* Custom Scrollbar for Results */
.search-results-list::-webkit-scrollbar {
    width: 6px;
}
.search-results-list::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 3px;
}

/* Individual Result Item */
.search-result-item {
    display: block;
    text-decoration: none;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-wireframe);
    transition: all 0.2s ease;
}
.search-result-item:hover {
    padding-left: 1rem;
    border-bottom-color: var(--accent-core);
    background: linear-gradient(90deg, rgba(59,130,246,0.05) 0%, transparent 100%);
}

.search-result-title {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.search-result-snippet {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.no-results {
    font-family: var(--font-mono);
    color: #ef4444; /* Red for errors */
    margin-top: 2rem;
    font-weight: 600;
}

.search-instructions-static {
    margin-top: 2rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.5;
}

/* 6. Mobile Responsiveness for Search */
@media (max-width: 768px) {
    .search-prompt { font-size: 1.2rem; }
    .search-input { font-size: 1.5rem; }
    .search-close { top: 1.5rem; right: 1.5rem; }
}


/* ==================================================
   PAGE: DESIGN PARTNER PROGRAM (Deep Tech)
   ================================================== */

/* --- DP Hero --- */
.dp-hero {
    position: relative;
    /* Use the uploaded conceptual refinery image */
    background-image: 
        linear-gradient(to bottom, rgba(5,5,5,0.3), rgba(5,5,5,1)), /* Fade to black at bottom */
        linear-gradient(to right, rgba(5,5,5,0.9), rgba(5,5,5,0.4)), /* Darken text area */
        url('../assets/images/kypspr-refinery-conceptual.webp');
    background-size: cover;
    background-position: center;
    padding: 10rem 0 8rem 0;
    color: #fff;
    border-bottom: 1px solid var(--border-wireframe);
}

.dp-kicker {
    display: block;
    font-family: var(--font-mono);
    color: var(--accent-success); /* Terminal Green */
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}

.dp-hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    max-width: 800px;
    margin-bottom: 1.5rem;
}

.dp-hero-subtitle {
    font-size: 1.25rem;
    color: #e0e0e0;
    max-width: 600px;
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* --- Section 1: Mandate --- */
.dp-mandate {
    background-color: var(--bg-void);
    padding: 6rem 0;
}

.mandate-box {
    border-left: 2px solid var(--accent-core);
    padding-left: 2rem;
}

.mandate-header {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #fff;
}

.mandate-text {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 750px;
}

.mono-highlight {
    font-family: var(--font-mono);
    color: var(--accent-core);
    font-size: 0.95em;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
}

/* --- Section 2: Benefits --- */
.dp-benefits {
    background-color: var(--bg-obsidian);
    padding: 6rem 0;
    border-top: 1px solid var(--border-wireframe);
    border-bottom: 1px solid var(--border-wireframe);
}

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

.dp-card {
    background: var(--bg-void);
    padding: 2.5rem;
    border: 1px solid var(--border-wireframe);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.dp-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-core);
}

.highlight-card {
    border: 1px solid var(--accent-success); /* Green border for the "Deal" card */
    background: rgba(16, 185, 129, 0.02);
}

.dp-icon {
    margin-bottom: 1.5rem;
}

.dp-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
}

.dp-card p {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

/* --- Section 3: Personas --- */
.dp-personas {
    background-color: var(--bg-void);
    padding: 6rem 0;
}

.dp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.persona-card {
    background: #111; /* Slightly lighter than void */
    padding: 3rem;
    border-radius: 2px;
    border: 1px solid var(--border-wireframe);
}

.persona-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
}

.persona-role {
    font-family: var(--font-mono);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.persona-icon-small {
    color: var(--accent-core);
}

.check-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.check-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-success);
}

.innovation-banner {
    background: linear-gradient(90deg, #111 0%, #0a0a0a 100%);
    border: 1px dashed var(--border-wireframe);
    padding: 2rem;
    text-align: center;
}

.mono-label {
    display: block;
    font-family: var(--font-mono);
    color: var(--accent-core);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* --- Section 4: Commitment --- */
.dp-commitment {
    background-color: var(--bg-obsidian);
    padding: 6rem 0;
    border-top: 1px solid var(--border-wireframe);
}

.commitment-box {
    max-width: 800px;
    margin: 0 auto;
}

.commitment-title {
    text-align: center;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.commitment-sub {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 4rem;
}

.commitment-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.step-item {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-wireframe);
}

.step-item:last-child {
    border-bottom: none;
}

.step-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--border-wireframe); /* Subtle number */
    font-weight: 700;
}

.step-content strong {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.step-content p {
    margin: 0;
    color: var(--text-muted);
}

/* --- Footer CTA & Badges --- */
.dp-final-cta {
    background-color: var(--bg-void);
    padding: 6rem 0;
    text-align: center;
    border-top: 1px solid var(--border-wireframe);
}

.trust-badges-mono {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.trust-badges-mono span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #555;
    border: 1px solid #333;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .dp-hero-title {
        font-size: 2.5rem;
    }
    
    .dp-grid-3, .dp-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .step-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mandate-box {
        border-left: none;
        padding-left: 0;
    }
}

/* ... existing code ... */

/* UPDATE: Scarcity Label as a Link */
a.scarcity-label {
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    /* Ensure it keeps the pill shape and colors defined in .scarcity-label */
}

a.scarcity-label:hover {
    border-color: var(--accent-success);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

/* ==================================================
   DATA DEBT CALCULATOR (Strategic Module)
   ================================================== */

.calc-section {
    background-color: #0f172a; /* Deep Slate (Darker than standard void) */
    padding: 6rem 0;
    border-bottom: 1px solid var(--border-wireframe);
}

.calc-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Text Left, Calc Right */
    gap: 4rem;
    align-items: center;
}

/* Header Text Side */
.calc-title {
    font-size: 2.5rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1rem;
}

.calc-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Interface Box */
.calc-interface {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 2px; /* Sharp corners */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* --- NEW: SEGMENTED CONTROL TOGGLE --- */
.calc-toggle-group {
    grid-column: 1 / -1; /* Span full width of input column */
    display: flex;
    gap: 1px;
    background-color: #1e293b; /* Border color */
    margin-bottom: 1.5rem;
    width: fit-content;
}

.calc-toggle-btn {
    background-color: #0f172a; /* Inactive Dark */
    color: #64748b; /* Inactive Text */
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calc-toggle-btn:hover {
    color: #fff;
}

.calc-toggle-btn.active {
    background-color: #334155; /* Active Slate */
    color: #fff;
    font-weight: 600;
}

/* Input Styling */
.input-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-core); /* Tech Blue */
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* IDLE STATE (Deep Slate, Sharp Edges) */
.input-group input, 
.input-group select {
    width: 100%;
    background-color: #0F172A; /* Deep Slate Background */
    border: 1px solid #4A5568; /* Subtle Slate Grey Border */
    color: #fff;
    font-family: var(--font-mono); /* Monospace Fidelity */
    font-size: 1.1rem;
    padding: 0.75rem;
    border-radius: 0px; /* Sharp edges for Industrial feel */
    outline: none;
    transition: all 0.2s ease;
    -webkit-appearance: none; /* Removes default styling on iOS */
    appearance: none;
}

/* FOCUS STATE (Teal Glow) */
.input-group input:focus,
.input-group select:focus {
    border-color: #00E5FF; /* Kypspr Teal - Precision Accent */
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2); /* Subtle glow */
}

/* Output Styling */
.calc-output {
    grid-column: 1 / -1; /* Span full width */
    background: #000;
    border: 1px solid #333;
    padding: 2rem;
    margin-top: 1rem;
    text-align: center;
}

.output-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.output-number-box {
    font-family: var(--font-mono);
    font-size: 3.5rem; /* Massive Impact */
    font-weight: 700;
    color: #ef4444; /* Signal Red / Warning Color */
    line-height: 1;
    margin-bottom: 0.5rem; /* Reduced for footnote */
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.2); /* Red Glow */
}

.currency-symbol {
    font-size: 0.6em;
    vertical-align: top;
    opacity: 0.8;
}

/* --- NEW: AUTHORITY FOOTNOTE --- */
.authority-footnote {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #64748b; /* Muted Slate */
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Breakdown Lines */
.calc-breakdown {
    display: flex;
    justify-content: space-between;
    border-top: 1px dashed #333;
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.breakdown-item {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.bd-value {
    color: #fff;
    margin-left: 0.5rem;
}

/* CTA Button Override */
.button-danger-outline {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 1px solid #ef4444; /* Red Border */
    color: #ef4444;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 1rem;
    transition: all 0.2s ease-in-out;
}

/* HOVER STATE (Solid Fill Urgency) */
.button-danger-outline:hover {
    background-color: #ef4444; /* Solid Red Fill */
    color: #FFFFFF; /* White Text */
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4); /* Red Glow */
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .calc-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .calc-interface {
        grid-template-columns: 1fr; /* Stack inputs vertically */
        padding: 1.5rem;
    }
    
    .output-number-box {
        font-size: 2.5rem;
    }
    
    .calc-breakdown {
        flex-direction: column;
        gap: 0.5rem;
        text-align: left;
    }
}


/* ==================================================
   v1.2 DESIGN UPDATES (Home Page Polish)
   ================================================== */

/* 1. Deep Tech Founder Filter (Duotone Effect) */
.founder-img-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-wireframe);
}

.founder-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Base B&W High Contrast */
    filter: grayscale(100%) contrast(1.2) brightness(0.9);
    transition: all 0.4s ease;
}

/* The Teal/Slate Overlay */
.founder-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(0, 229, 255, 0.2) 100%);
    mix-blend-mode: hard-light;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Hover: Reveal Full Color */
.founder-img-wrapper:hover img {
    filter: grayscale(0%) contrast(1) brightness(1);
    transform: scale(1.05);
}
.founder-img-wrapper:hover::after {
    opacity: 0;
}

/* 2. Federated Moat Schematic (CSS Diagram) */
.card-schematic {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.schematic-box {
    border: 1px solid var(--accent-core);
    padding: 0.5rem;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.05);
    text-align: center;
    width: 40%;
}

.schematic-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.6rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}

.schematic-icon {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
}

.schematic-arrow-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.arrow-top, .arrow-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.arrow-line {
    width: 100%;
    height: 1px;
    background: var(--accent-success); /* Green for Good */
    position: relative;
}

.arrow-line::after {
    content: "►";
    position: absolute;
    right: -4px;
    top: -5px;
    font-size: 8px;
    color: var(--accent-success);
}

.arrow-line.blocked {
    background: #ef4444; /* Red for Blocked */
}
.arrow-line.blocked::after {
    content: "×"; /* The Block */
    right: 50%;
    top: -9px;
    font-size: 14px;
    color: #ef4444;
}

.arrow-label {
    font-size: 0.6rem;
    color: var(--accent-success);
    margin-bottom: 2px;
}
.arrow-label.text-danger {
    color: #ef4444;
    margin-top: 2px;
    margin-bottom: 0;
}

/* 3. Text Utilities */
.text-secure {
    color: #00E5FF !important;
}