diff --git a/public/architecture.html b/public/architecture.html
index e88cf15d..780d78e4 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -97,10 +97,14 @@
 
         <!-- Hero Graphic: Architectural Blueprint -->
         <div class="mt-12 max-w-4xl mx-auto">
-          <img src="/images/social-preview.png"
-               alt="Tractatus Framework architectural diagram showing human agency at the center with interconnected governance services forming a structural network"
-               class="rounded-lg shadow-2xl border-2 border-blue-300/30"
-               loading="lazy">
+          <picture>
+            <source srcset="/images/social-preview.webp" type="image/webp">
+            <img src="/images/social-preview.png"
+                 alt="Tractatus Framework architectural diagram showing human agency at the center with interconnected governance services forming a structural network"
+                 class="rounded-lg shadow-2xl border-2 border-blue-300/30"
+                 width="1536" height="1024"
+                 loading="lazy">
+          </picture>
         </div>
       </div>
     </div>
@@ -495,7 +499,7 @@
   <!-- Interactive Exploration Section -->
   <section class="bg-gradient-to-br from-yellow-50 to-orange-50 py-16 border-y border-orange-200">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <div class="inline-block bg-orange-600 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="interactive_exploration.badge">
+      <div class="inline-block bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm" data-i18n="interactive_exploration.badge">
         INTERACTIVE EXPLORATION
       </div>
       <h2 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900" data-i18n="interactive_exploration.heading">
@@ -510,7 +514,7 @@
         <a href="https://huggingface.co/spaces/tractatus-framework/audit-log-viewer"
            target="_blank"
            rel="noopener noreferrer"
-           class="inline-block bg-orange-600 text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-orange-700 transition shadow-lg hover:shadow-xl"
+           class="inline-block bg-orange-700 text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-orange-800 transition shadow-lg hover:shadow-xl"
            data-i18n="interactive_exploration.hf_cta">
           Launch Interactive Explorer on Hugging Face
         </a>
diff --git a/public/images/social-preview.webp b/public/images/social-preview.webp
new file mode 100644
index 00000000..4f45b6cc
Binary files /dev/null and b/public/images/social-preview.webp differ