tractatus/docs/website-updates/homepage-alexander-section.html

<!-- NEW SECTION: Alexander Principles (insert after hero, before value proposition) -->

<!-- Built on Living Systems Principles -->
<section class="bg-gradient-to-br from-purple-50 via-blue-50 to-teal-50 py-16 border-y border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center mb-12 animate-on-scroll" data-animation="fade-in">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">
        Built on Living Systems Principles
      </h2>
      <p class="text-xl text-gray-700 max-w-3xl mx-auto">
        Governance that evolves with your organization—not compliance theatre, but <strong>architectural enforcement</strong> woven into deployment.
      </p>
    </div>

    <!-- The 5 Principles Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
      
      <!-- Principle 1: Deep Interlock -->
      <div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-purple-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="100">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-2xl mr-3">
            🔗
          </div>
          <h3 class="text-lg font-bold text-gray-900">Deep Interlock</h3>
        </div>
        <p class="text-gray-700 text-sm leading-relaxed">
          Six governance services <strong>coordinate</strong>, not operate in silos. When one detects an issue, others reinforce—creating resilient enforcement through mutual validation.
        </p>
      </div>

      <!-- Principle 2: Structure-Preserving -->
      <div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-2xl mr-3">
            🏛️
          </div>
          <h3 class="text-lg font-bold text-gray-900">Structure-Preserving</h3>
        </div>
        <p class="text-gray-700 text-sm leading-relaxed">
          Framework changes <strong>enhance without breaking</strong>. Audit logs remain interpretable, governance decisions stay valid—institutional memory preserved across evolution.
        </p>
      </div>

      <!-- Principle 3: Gradients Not Binary -->
      <div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-indigo-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="300">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-2xl mr-3">
            📊
          </div>
          <h3 class="text-lg font-bold text-gray-900">Gradients Not Binary</h3>
        </div>
        <p class="text-gray-700 text-sm leading-relaxed">
          Governance operates on <strong>intensity levels</strong> (NORMAL/ELEVATED/HIGH/CRITICAL), not yes/no switches. Nuanced response to risk—avoiding alert fatigue and mechanical enforcement.
        </p>
      </div>

      <!-- Principle 4: Living Process -->
      <div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-teal-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="400">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center text-2xl mr-3">
            🌱
          </div>
          <h3 class="text-lg font-bold text-gray-900">Living Process</h3>
        </div>
        <p class="text-gray-700 text-sm leading-relaxed">
          Framework <strong>evolves from real failures</strong>, not predetermined plans. Grows smarter through operational experience—adaptive resilience, not static rulebook.
        </p>
      </div>

      <!-- Principle 5: Not-Separateness -->
      <div class="bg-white rounded-xl p-6 shadow-md border-l-4 border-pink-500 hover:shadow-lg transition-all animate-on-scroll" data-animation="slide-up" data-stagger="500">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center text-2xl mr-3">
            ⚙️
          </div>
          <h3 class="text-lg font-bold text-gray-900">Not-Separateness</h3>
        </div>
        <p class="text-gray-700 text-sm leading-relaxed">
          Governance <strong>woven into deployment architecture</strong>, not bolted on. Cannot be bypassed—enforcement is structural, happening in critical execution path before actions execute.
        </p>
      </div>

      <!-- Learn More CTA Card -->
      <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 shadow-md hover:shadow-lg transition-all animate-on-scroll flex flex-col justify-between" data-animation="slide-up" data-stagger="600">
        <div>
          <h3 class="text-lg font-bold text-white mb-3">Architectural Principles</h3>
          <p class="text-gray-300 text-sm leading-relaxed mb-4">
            These principles guide every framework change—ensuring coherence, adaptability, and structural enforcement rather than compliance theatre.
          </p>
        </div>
        <div class="space-y-2">
          <a href="/architecture.html" class="block text-center bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-sm">
            See Technical Architecture →
          </a>
          <a href="/values.html" class="block text-center bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold hover:bg-gray-600 transition-colors text-sm">
            Values & Principles →
          </a>
        </div>
      </div>

    </div>

    <!-- Key Distinction Callout -->
    <div class="bg-white rounded-xl p-8 shadow-md border-t-4 border-blue-500 animate-on-scroll" data-animation="fade-in">
      <div class="flex flex-col md:flex-row items-start gap-6">
        <div class="flex-shrink-0">
          <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-3xl">
            ⚡
          </div>
        </div>
        <div class="flex-1">
          <h3 class="text-2xl font-bold text-gray-900 mb-3">
            Architectural Enforcement vs Compliance Theatre
          </h3>
          <p class="text-gray-700 leading-relaxed mb-4">
            <strong>Compliance theatre</strong>: Documented policies AI can bypass, post-execution monitoring, voluntary adherence.
          </p>
          <p class="text-gray-700 leading-relaxed">
            <strong>Architectural enforcement</strong> (Tractatus): Governance services intercept actions <em>before execution</em>—technically impossible to bypass. Services coordinate in real-time, blocking non-compliant operations at the architectural level.
          </p>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- END NEW SECTION -->