diff --git a/public/architecture.html b/public/architecture.html
index ad79de5b..9c39ccfc 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -501,6 +501,10 @@
   </main>
 
   <!-- Footer -->
+  <!-- Internationalization -->
+  <script src="/js/i18n-simple.js?v=1760818106"></script>
+  <script src="/js/components/language-selector.js?v=1760818106"></script>
+
   <!-- Scroll Animations (Phase 3) -->
   <script src="/js/scroll-animations.js"></script>
 
diff --git a/public/css/tractatus-theme.css b/public/css/tractatus-theme.css
index 56f37d69..535f12bd 100644
--- a/public/css/tractatus-theme.css
+++ b/public/css/tractatus-theme.css
@@ -618,7 +618,7 @@ h3 { letter-spacing: -0.015em; }
 
 /* Gradient Backgrounds */
 .bg-gradient-tractatus {
-  background: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%);
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7e22ce 100%);
 }
 
 .bg-gradient-service-boundary {
diff --git a/public/index.html b/public/index.html
index 3eb50b9b..fa366fa7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,7 +51,7 @@
 
   <!-- Hero Section -->
   <header role="banner">
-  <section class="text-white" class="bg-gradient-tractatus">
+  <section class="text-white bg-gradient-tractatus">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
       <div class="text-center">
         <!-- Animated Brand Logo -->
@@ -98,7 +98,7 @@
   </section>
 
   <!-- Three Audience Paths -->
-  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 pt-32">
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto" data-i18n="paths.intro">
 We recognize this is one small step in addressing AI safety challenges. Explore the framework through the lens that resonates with your work.
     </p>
diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js
index b5fb9a8c..f59c54bf 100644
--- a/public/js/components/interactive-diagram.js
+++ b/public/js/components/interactive-diagram.js
@@ -117,7 +117,7 @@ class InteractiveDiagram {
     }
 
     const nodes = svg.querySelectorAll('.service-node');
-    console.log(\`[InteractiveDiagram] Found \${nodes.length} service nodes\`);
+    console.log(`[InteractiveDiagram] Found ${nodes.length} service nodes`);
 
     nodes.forEach(node => {
       const serviceId = node.getAttribute('data-service');
@@ -143,12 +143,12 @@ class InteractiveDiagram {
     const svg = document.getElementById('interactive-arch-diagram');
     if (!svg) return;
 
-    const connectionLine = svg.querySelector(\`#conn-\${serviceId}\`);
+    const connectionLine = svg.querySelector(`#conn-${serviceId}`);
     if (connectionLine) {
       connectionLine.classList.add('active');
     }
 
-    const node = svg.querySelector(\`#node-\${serviceId}\`);
+    const node = svg.querySelector(`#node-${serviceId}`);
     if (node) {
       node.classList.add('hover');
     }
@@ -160,12 +160,12 @@ class InteractiveDiagram {
 
     if (this.activeService === serviceId) return;
 
-    const connectionLine = svg.querySelector(\`#conn-\${serviceId}\`);
+    const connectionLine = svg.querySelector(`#conn-${serviceId}`);
     if (connectionLine) {
       connectionLine.classList.remove('active');
     }
 
-    const node = svg.querySelector(\`#node-\${serviceId}\`);
+    const node = svg.querySelector(`#node-${serviceId}`);
     if (node) {
       node.classList.remove('hover');
     }
@@ -185,12 +185,12 @@ class InteractiveDiagram {
       svg.querySelectorAll('.service-node').forEach(n => n.classList.remove('active'));
       svg.querySelectorAll('.connection-line').forEach(l => l.classList.remove('active'));
 
-      const node = svg.querySelector(\`#node-\${serviceId}\`);
+      const node = svg.querySelector(`#node-${serviceId}`);
       if (node) {
         node.classList.add('active');
       }
 
-      const connectionLine = svg.querySelector(\`#conn-\${serviceId}\`);
+      const connectionLine = svg.querySelector(`#conn-${serviceId}`);
       if (connectionLine) {
         connectionLine.classList.add('active');
       }
@@ -221,15 +221,15 @@ class InteractiveDiagram {
       panel.style.borderColor = service.color;
     }
 
-    const html = \`
+    const html = `
       <div class="flex items-start justify-between mb-4">
         <div class="flex items-center space-x-3">
-          <div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl service-icon-box" data-color="\${service.color}">
-            \${service.icon}
+          <div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl service-icon-box" data-color="${service.color}">
+            ${service.icon}
           </div>
           <div>
-            <h3 class="text-xl font-bold text-gray-900">\${service.name}</h3>
-            <span class="text-xs font-medium text-gray-600 uppercase">\${service.shortName}</span>
+            <h3 class="text-xl font-bold text-gray-900">${service.name}</h3>
+            <span class="text-xs font-medium text-gray-600 uppercase">${service.shortName}</span>
           </div>
         </div>
         <button id="close-panel-btn" class="text-gray-400 hover:text-gray-600 transition" aria-label="Close">
@@ -239,27 +239,27 @@ class InteractiveDiagram {
         </button>
       </div>
 
-      <p class="text-gray-700 mb-4 leading-relaxed">\${service.description}</p>
+      <p class="text-gray-700 mb-4 leading-relaxed">${service.description}</p>
 
       <div class="mb-4">
         <h4 class="text-sm font-semibold text-gray-900 mb-2 uppercase">Key Features</h4>
         <ul class="space-y-2" id="service-features-list">
-          \${service.details.map(detail => \`
+          ${service.details.map(detail => `
             <li class="flex items-start text-sm text-gray-700">
-              <svg class="w-4 h-4 mr-2 mt-0.5 flex-shrink-0 service-check-icon" data-color="\${service.color}" fill="currentColor" viewBox="0 0 20 20">
+              <svg class="w-4 h-4 mr-2 mt-0.5 flex-shrink-0 service-check-icon" data-color="${service.color}" fill="currentColor" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
               </svg>
-              <span>\${detail}</span>
+              <span>${detail}</span>
             </li>
-          \`).join('')}
+          `).join('')}
         </ul>
       </div>
 
-      <div class="text-xs rounded px-3 py-2 bg-opacity-20 service-promise-badge" data-color="\${service.color}">
-        <strong class="service-promise-text" data-color="\${service.color}">Early Promise:</strong>
-        <span class="text-gray-800">\${service.promise}</span>
+      <div class="text-xs rounded px-3 py-2 bg-opacity-20 service-promise-badge" data-color="${service.color}">
+        <strong class="service-promise-text" data-color="${service.color}">Early Promise:</strong>
+        <span class="text-gray-800">${service.promise}</span>
       </div>
-    \`;
+    `;
 
     panel.innerHTML = html;
 
@@ -267,7 +267,7 @@ class InteractiveDiagram {
     const iconBox = panel.querySelector('.service-icon-box');
     if (iconBox) {
       const color = iconBox.getAttribute('data-color');
-      iconBox.style.background = \`linear-gradient(135deg, \${color} 0%, \${color}dd 100%)\`;
+      iconBox.style.background = `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`;
     }
 
     // Style all check icons