feat: add quiet professional share CTA to homepage

- Added share section with Copy Link, Email, LinkedIn buttons
- Translations: EN, DE, FR (Option 3: 'Help us reach the right people')
- CSP-compliant JavaScript (no inline handlers)
- Professional gray styling, no marketing circus
- Target: researchers, implementers, leaders needing AI governance solutions

public/index.html

@@ -375,40 +375,40 @@ Handles plural moral values without imposing hierarchy—facilitates human judgm
         </div>
       </div>
 
-      <!-- Single Featured Demo - 27027 Incident -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden max-w-3xl mx-auto mb-8">
-        <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
-          <div class="flex items-center justify-between">
-            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100" data-i18n="validation.case_27027.badge">
-Pattern Bias Incident
-            </span>
-            <span class="text-blue-100 text-sm" data-i18n="validation.case_27027.type">Interactive Demo</span>
-          </div>
-        </div>
-        <div class="p-8">
-          <h3 class="text-2xl font-bold text-gray-900 mb-3" data-i18n="validation.case_27027.title">The 27027 Incident</h3>
-          <p class="text-gray-700 mb-6" data-i18n="validation.case_27027.description">
-Real production incident where Claude Code defaulted to port 27017 (training pattern) despite explicit user instruction to use port 27027. CrossReferenceValidator detected the conflict and blocked execution—demonstrating how pattern recognition can override instructions under context pressure.
-          </p>
-          <div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-6">
-            <p class="text-sm text-amber-900" data-i18n-html="validation.case_27027.why_matters">
-<strong>Why this matters:</strong> This failure mode gets worse as models improve—stronger pattern recognition means stronger override tendency. Architectural constraints remain necessary regardless of capability level.
-            </p>
-          </div>
-          <a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold" data-i18n="validation.case_27027.cta">View Interactive Demo
-          </a>
-        </div>
-      </div>
+    </div>
+  </section>
 
-      <!-- Additional Resources Link -->
-      <div class="text-center">
-        <p class="text-gray-600 mb-4" data-i18n="validation.resources.text">
-Additional case studies and research findings documented in technical papers
+  <!-- Share CTA -->
+  <section class="bg-gray-100 py-12">
+    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-3" data-i18n="share_cta.heading">
+          Help us reach the right people.
+        </h2>
+        <p class="text-gray-700 mb-6" data-i18n="share_cta.description">
+          If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.
         </p>
-        <a href="/docs.html?category=case-studies" class="inline-block text-blue-600 hover:text-blue-700 font-medium" data-i18n="validation.resources.cta">Browse Case Studies →
-        </a>
+        <div class="flex flex-wrap gap-3">
+          <button
+            data-action="copy-link"
+            class="bg-gray-700 hover:bg-gray-800 text-white px-6 py-2.5 rounded-lg font-medium transition-colors"
+            data-i18n="share_cta.copy_link">
+            Copy Link
+          </button>
+          <button
+            data-action="email-share"
+            class="bg-gray-700 hover:bg-gray-800 text-white px-6 py-2.5 rounded-lg font-medium transition-colors"
+            data-i18n="share_cta.email">
+            Email
+          </button>
+          <button
+            data-action="linkedin-share"
+            class="bg-gray-700 hover:bg-gray-800 text-white px-6 py-2.5 rounded-lg font-medium transition-colors"
+            data-i18n="share_cta.linkedin">
+            LinkedIn
+          </button>
+        </div>
       </div>
-
     </div>
   </section>
 
@@ -418,6 +418,8 @@ Additional case studies and research findings documented in technical papers
   <!-- Version Management & PWA -->
   <script src="/js/version-manager.js?v=0.1.2.1761703567291"></script>
 
+  <!-- Share CTA functionality -->
+  <script src="/js/share-cta.js?v=0.1.2.1761703567291"></script>
 
   <!-- Internationalization -->
   <script src="/js/i18n-simple.js?v=0.1.2.1761703567291"></script>

public/js/share-cta.js

@@ -0,0 +1,76 @@
+/**
+ * Share CTA functionality
+ * Professional, quiet sharing mechanism
+ * CSP-compliant (no inline handlers)
+ */
+
+(function() {
+  'use strict';
+
+  // Wait for DOM to be ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initShare);
+  } else {
+    initShare();
+  }
+
+  function initShare() {
+    // Copy link to clipboard
+    const copyButtons = document.querySelectorAll('[data-action="copy-link"]');
+    copyButtons.forEach(button => {
+      button.addEventListener('click', async () => {
+        const url = window.location.href;
+
+        try {
+          await navigator.clipboard.writeText(url);
+
+          // Visual feedback
+          const originalText = button.textContent;
+          const originalClasses = button.className;
+
+          button.textContent = 'Link Copied';
+          button.className = 'bg-green-600 hover:bg-green-700 text-white px-6 py-2.5 rounded-lg font-medium transition-colors';
+
+          setTimeout(() => {
+            button.textContent = originalText;
+            button.className = originalClasses;
+          }, 2000);
+        } catch (err) {
+          console.error('Failed to copy link:', err);
+          // Fallback: show alert with URL
+          alert('Copy this link: ' + url);
+        }
+      });
+    });
+
+    // Email share
+    const emailButtons = document.querySelectorAll('[data-action="email-share"]');
+    emailButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const url = window.location.href;
+        const subject = encodeURIComponent('Thought you might find this useful');
+        const body = encodeURIComponent(
+          'I thought this might be relevant to your work:\n\n' +
+          'Tractatus - AI Safety Framework\n' +
+          url + '\n\n' +
+          'It addresses structural AI governance through architectural constraints.'
+        );
+
+        window.location.href = `mailto:?subject=${subject}&body=${body}`;
+      });
+    });
+
+    // LinkedIn share
+    const linkedinButtons = document.querySelectorAll('[data-action="linkedin-share"]');
+    linkedinButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const url = encodeURIComponent(window.location.href);
+        window.open(
+          `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+          '_blank',
+          'width=600,height=600'
+        );
+      });
+    });
+  }
+})();

public/locales/de/homepage.json

@@ -103,6 +103,13 @@
       "cta": "Fallstudien durchsuchen →"
     }
   },
+  "share_cta": {
+    "heading": "Helfen Sie uns, die richtigen Leute zu erreichen.",
+    "description": "Wenn Sie Forscher, Implementierer oder Führungskräfte kennen, die strukturelle KI-Governance-Lösungen benötigen, teilen Sie dies mit ihnen.",
+    "copy_link": "Link kopieren",
+    "email": "E-Mail",
+    "linkedin": "LinkedIn"
+  },
   "footer": {
     "about_heading": "Tractatus Framework",
     "about_text": "Architektonische Beschränkungen für KI-Sicherheit, die menschliche Entscheidungsfreiheit durch strukturelle, nicht aspirationale, Garantien wahren.",

public/locales/en/homepage.json

@@ -103,6 +103,13 @@
       "cta": "Browse Case Studies →"
     }
   },
+  "share_cta": {
+    "heading": "Help us reach the right people.",
+    "description": "If you know researchers, implementers, or leaders who need structural AI governance solutions, share this with them.",
+    "copy_link": "Copy Link",
+    "email": "Email",
+    "linkedin": "LinkedIn"
+  },
   "footer": {
     "about_heading": "Tractatus Framework",
     "about_text": "Architectural constraints for AI safety that preserve human agency through structural, not aspirational, enforcement.",

public/locales/fr/homepage.json

@@ -103,6 +103,13 @@
       "cta": "Parcourir les Études de Cas →"
     }
   },
+  "share_cta": {
+    "heading": "Aidez-nous à atteindre les bonnes personnes.",
+    "description": "Si vous connaissez des chercheurs, des implémenteurs ou des dirigeants qui ont besoin de solutions de gouvernance structurelle de l'IA, partagez ceci avec eux.",
+    "copy_link": "Copier le lien",
+    "email": "E-mail",
+    "linkedin": "LinkedIn"
+  },
   "footer": {
     "about_heading": "Tractatus Framework",
     "about_text": "Contraintes architecturales pour la sécurité de l'IA qui préservent l'autonomie humaine par des garanties structurelles, et non aspirationnelles.",