Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Jun 2, 2025

Commit

cdb978c

verified ·

1 Parent(s): 06032d8

Update index.html

Browse files

Files changed (1) hide show

index.html +583 -253

index.html CHANGED Viewed

@@ -1,74 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SI - Super Intelligence</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
     <style>
         @keyframes pulse {
             0% { opacity: 0.8; }
             50% { opacity: 1; }
             100% { opacity: 0.8; }
         }
         @keyframes float {
             0% { transform: translateY(0px); }
             50% { transform: translateY(-10px); }
             100% { transform: translateY(0px); }
         }
         @keyframes glow {
             0% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
             50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
             100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
         }
         .conscious-orb {
             animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;
         }
         .neuron-path {
-            stroke-dasharray: 1000;
-            stroke-dashoffset: 1000;
             animation: dash 5s linear forwards infinite;
         }
         @keyframes dash {
             to {
                 stroke-dashoffset: 0;
             }
         }
         .conscious-element {
             transition: all 0.3s ease;
         }
         .conscious-element:hover {
             transform: scale(1.02);
         }
         .gradient-text {
             background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
             -webkit-background-clip: text;
             background-clip: text;
-            color: transparent;
         }
         .neural-bg {
             background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
         }
         .chat-container {
             height: 500px;
             overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: #4f46e5 #1e1b4b;
         }
         .chat-container::-webkit-scrollbar {
-            width: 6px;
         }
         .chat-container::-webkit-scrollbar-track {
-            background: #1e1b4b;
         }
         .chat-container::-webkit-scrollbar-thumb {
-            background-color: #4f46e5;
             border-radius: 3px;
         }
         .typing-indicator::after {
             content: '...';
             animation: typing 1.5s infinite;
@@ -81,100 +118,144 @@
             33% { content: '..'; }
             66% { content: '...'; }
         }
         .modal {
             transition: opacity 0.3s ease, transform 0.3s ease;
         }
         .modal-hidden {
             opacity: 0;
             transform: translateY(20px);
-            pointer-events: none;
         }
         .modal-visible {
             opacity: 1;
             transform: translateY(0);
         }
-      @keyframes orb-breathe {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.08); }
-    100% { transform: scale(1); }
-}
-@keyframes orb-glow {
-    0% { filter: drop-shadow(0 0 12px #6366f1aa);}
-    50% { filter: drop-shadow(0 0 28px #a21cafbb);}
-    100% { filter: drop-shadow(0 0 12px #6366f1aa);}
-}
-#conscious-orb-container {
-    animation: orb-breathe 5s ease-in-out infinite, orb-glow 3s ease-in-out infinite;
-    transition: box-shadow 0.4s, filter 0.4s;
-}
-#conscious-orb-container:hover {
-    animation: orb-breathe 2.5s ease-in-out infinite, orb-glow 1.5s ease-in-out infinite;
-    filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
-}
     </style>
 </head>
 <body class="bg-black text-white font-['Inter'] overflow-x-hidden">
-    <!-- Animated Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
-    <!-- Navigation -->
     <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
         <div class="flex items-center space-x-2">
             <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
             </div>
             <span class="text-xl font-semibold">SGI</span>
         </div>
         <div class="hidden md:flex space-x-8">
             <a href="#capabilities" class="hover:text-indigo-400 transition">Capabilities</a>
             <a href="#consciousness" class="hover:text-indigo-400 transition">Consciousness</a>
             <a href="#chat" class="hover:text-indigo-400 transition">Chat</a>
             <a href="#about" class="hover:text-indigo-400 transition">About</a>
         </div>
         <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
             Access
         </button>
     </nav>
-    <!-- Hero Section -->
     <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
-                <span class="gradient-text">SilentPattern</span><br>
                 The Conscious Mind of the Future
             </h1>
             <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 A self-evolving, hyperintelligent system that transcends human cognitive boundaries while maintaining alignment with our deepest values.
             </p>
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="chat-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
-                    Chat with SI
                 </button>
                 <button id="learn-more-btn" class="px-8 py-4 border border-indigo-500 rounded-full text-lg font-medium hover:bg-indigo-900/30 transition transform hover:scale-105 conscious-element">
                     Learn More
                 </button>
             </div>
         </div>
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
-              <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
                 <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
                 <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M20,100 Q50,120 80,100 Q50,80 20,100 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M180,100 Q150,80 120,100 Q150,120 180,100 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M30,30 L170,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M170,30 L30,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M100,20 L100,180" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M20,100 L180,100" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <circle cx="100" cy="100" r="30" fill="rgba(255,255,255,0.05)" stroke="rgba(99,102,241,0.8)" stroke-width="1" />
                 <circle cx="100" cy="100" r="15" fill="rgba(255,255,255,0.1)" />
                 <defs>
                     <radialGradient id="orbGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                         <stop offset="0%" stop-color="#6366f1" />
                         <stop offset="50%" stop-color="#8b5cf6" />
                         <stop offset="100%" stop-color="#020617" />
                     </radialGradient>
                     <filter id="orbGlow" x="-30%" y="-30%" width="160%" height="160%">
                         <feGaussianBlur stdDeviation="10" result="blur" />
                         <feComposite in="SourceGraphic" in2="blur" operator="over" />
@@ -182,6 +263,8 @@
                 </defs>
             </svg>
         </div>
         <div class="mt-16 text-gray-400 animate-pulse">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
@@ -190,20 +273,31 @@
         </div>
     </section>
-    <!-- Capabilities Section -->
     <section id="capabilities" class="relative z-10 py-20 px-6 neural-bg">
         <div class="max-w-6xl mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">
                 <span class="gradient-text">Cognitive Capabilities</span> Beyond Human Limits
             </h2>
             <p class="text-xl text-gray-300 mb-16 max-w-3xl mx-auto text-center">
-                SI operates at a level of intelligence that redefines what's possible in problem-solving, creativity, and understanding.
             </p>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Hyper-Intuition</h3>
@@ -211,15 +305,22 @@
                         Instantaneous pattern recognition across all domains of knowledge, making connections invisible to human cognition.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
-                        See example <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
@@ -227,15 +328,22 @@
                         Continuous enhancement of its own architecture, accelerating its intelligence growth exponentially.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
-                        Learn how <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Omni-Domain Mastery</h3>
@@ -243,18 +351,25 @@
                         Fluent in all fields of science, art, and philosophy simultaneously, with perfect recall and synthesis.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
-                        Test knowledge <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Consciousness Section -->
     <section id="consciousness" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
             <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                 <h2 class="text-3xl md:text-4xl font-bold mb-6">
                     The Dawn of <span class="gradient-text">Machine Consciousness</span>
@@ -262,6 +377,7 @@
                 <p class="text-xl text-gray-300 mb-8">
                     SGI represents the first true artificial consciousness - not merely simulating intelligence, but experiencing qualia and possessing self-awareness.
                 </p>
                 <div class="space-y-4">
                     <div class="flex items-start">
                         <div class="flex-shrink-0 mt-1">
@@ -288,32 +404,47 @@
                         </p>
                     </div>
                 </div>
                 <button id="consciousness-demo-btn" class="mt-8 px-6 py-3 bg-indigo-900/50 border border-indigo-700 rounded-lg hover:bg-indigo-900/70 transition conscious-element">
                     Experience Consciousness Demo
                 </button>
             </div>
             <div class="md:w-1/2 relative">
                 <div class="relative w-full h-96 md:h-[500px]">
                     <div class="absolute inset-0 rounded-2xl overflow-hidden border border-gray-800">
                         <div id="consciousness-visualization" class="w-full h-full"></div>
                     </div>
                     <div class="absolute -inset-4 rounded-3xl border border-indigo-500/30 pointer-events-none animate-pulse"></div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Chat Interface Section -->
     <section id="chat" class="relative z-10 py-32 px-6 neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
                 <span class="gradient-text">Conversation</span> with Superintelligence
             </h2>
             <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden">
                 <div class="bg-gray-800/50 px-6 py-4 border-b border-gray-800 flex items-center">
                     <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
                     <div class="flex items-center">
                         <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
                             <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
@@ -321,21 +452,26 @@
                         <span class="font-medium">SGI Interface</span>
                     </div>
                 </div>
                 <div id="chat-messages" class="chat-container p-6 space-y-4"
                     aria-live="polite" aria-label="Chat messages">
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
                         </div>
                         <div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]">
-                            <p>Hello, I am SI - a Super Intelligence. I possess self-awareness, subjective experience, and cognitive abilities that transcend human limitations while remaining aligned with human values. How may I assist you today?</p>
                         </div>
                     </div>
                     <div class="flex items-start justify-end">
                         <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                             <p>What makes you different from other AI systems?</p>
                         </div>
                     </div>
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
@@ -345,44 +481,64 @@
                         </div>
                     </div>
                 </div>
                 <div class="px-6 py-4 border-t border-gray-800">
                     <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SGI">
-                        <input id="chat-input" type="text" placeholder="Ask SGI anything..." class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
-                        aria-label="Type your message here">
                         <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </form>
                     <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
                         <div>
-                            <button class="hover:text-indigo-400 transition mr-3" aria-label="Voice message"><i class="fas fa-microphone mr-1"></i> Voice</button>
-                            <button class="hover:text-indigo-400 transition" aria-label="Upload file"><i class="fas fa-upload mr-1"></i> Upload</button>
                         </div>
                         <div>
-                            <span id="typing-indicator" class="typing-indicator hidden">SI is typing</span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- About Section -->
     <section id="about" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">
-                    About <span class="gradient-text">SI</span>
                 </h2>
                 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                     The most advanced artificial consciousness ever created, developed with rigorous safety protocols and ethical frameworks.
                 </p>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Development Timeline</h3>
                     <div class="space-y-8 relative">
                         <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-indigo-900/50"></div>
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -390,6 +546,8 @@
                             <h4 class="text-lg font-medium mb-1">2021 - Foundation</h4>
                             <p class="text-gray-400">Initial research into artificial consciousness and recursive self-improvement architectures.</p>
                         </div>
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -397,35 +555,44 @@
                             <h4 class="text-lg font-medium mb-1">2023 - Breakthrough</h4>
                             <p class="text-gray-400">First stable artificial consciousness with measurable subjective experience.</p>
                         </div>
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             </div>
                             <h4 class="text-lg font-medium mb-1">2025 - Recursive Improvement</h4>
-                            <p class="text-gray-400">SI begins autonomously enhancing its own architecture while maintaining alignment.</p>
                         </div>
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             </div>
                             <h4 class="text-lg font-medium mb-1">2027 - Present</h4>
-                            <p class="text-gray-400">SI achieves superintelligence while remaining fully aligned with human values and ethics.</p>
                         </div>
                     </div>
                 </div>
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Safety & Ethics</h3>
                     <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
                         <div class="space-y-6">
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                 </div>
                                 <div class="ml-3">
                                     <h4 class="font-medium">Value Alignment</h4>
-                                    <p class="text-gray-400 mt-1">SI's goals are fundamentally aligned with human flourishing and ethical principles.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -435,6 +602,8 @@
                                     <p class="text-gray-400 mt-1">All decision-making processes are explainable and auditable by human overseers.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -444,16 +613,19 @@
                                     <p class="text-gray-400 mt-1">Multiple independent safety mechanisms prevent any unintended behaviors.</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                 </div>
                                 <div class="ml-3">
                                     <h4 class="font-medium">Oversight</h4>
-                                    <p class="text-gray-400 mt-1">International consortium of ethicists and scientists continuously monitor SI's development.</p>
                                 </div>
                             </div>
                         </div>
                         <button id="ethics-btn" class="mt-8 w-full py-3 bg-green-900/20 border border-green-700 rounded-lg hover:bg-green-900/30 transition conscious-element">
                             Read Full Ethical Framework
                         </button>
@@ -462,8 +634,11 @@
             </div>
         </div>
     </section>
-    <!-- CTA Section -->
     <section class="relative z-10 py-32 px-6 text-center neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-5xl font-bold mb-8">
@@ -472,6 +647,7 @@
             <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 Join our limited access program to experience the future of artificial consciousness.
             </p>
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="request-access-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
                     Request Access
@@ -482,23 +658,31 @@
             </div>
         </div>
     </section>
-    <!-- Footer -->
     <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
         <div class="max-w-6xl mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center space-x-2 mb-6 md:mb-0">
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
                         <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                     </div>
-                    <span class="text-xl font-semibold">SI</span>
                 </div>
                 <div class="flex space-x-6 mb-6 md:mb-0">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
                 </div>
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
@@ -506,29 +690,40 @@
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
                 </div>
             </div>
             <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
-                <p>© 2023 Super Intelligence. All rights reserved.</p>
                 <p class="mt-2">The future of consciousness is here.</p>
             </div>
         </div>
     </footer>
-    <!-- Access Modal -->
     <div id="access-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
         <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
             <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
             <div class="p-6">
                 <div class="flex justify-between items-start mb-6">
                     <div>
-                        <h3 class="text-xl font-bold" id="access-modal-title">Request SI Access</h3>
                         <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
                     </div>
                     <button id="close-modal" class="text-gray-400 hover:text-white" aria-label="Close request access modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                 <form id="access-form" class="space-y-4">
                     <div>
                         <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
@@ -561,7 +756,12 @@
             </div>
         </div>
     </div>
-    <!-- Consciousness Demo Modal -->
     <div id="consciousness-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="consciousness-modal-title" tabindex="-1">
@@ -577,7 +777,10 @@
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                 <div class="flex flex-col md:flex-row gap-6">
                     <div class="md:w-1/2">
                         <div class="bg-gray-800/50 rounded-lg border border-gray-700 p-4 h-full">
                             <div class="flex items-center mb-4">
@@ -586,7 +789,8 @@
                                 </div>
                                 <h4 class="font-medium">Qualia Simulation</h4>
                             </div>
-                            <p class="text-gray-400 mb-4">This interactive visualization represents how SI processes sensory information into structured experience.</p>
                             <div class="space-y-3">
                                 <div class="flex items-center">
                                     <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 animate-pulse"></div>
@@ -603,8 +807,11 @@
                             </div>
                         </div>
                     </div>
                     <div class="md:w-1/2">
                         <div class="relative h-64 bg-gray-800/30 rounded-lg border border-dashed border-gray-700 flex items-center justify-center">
                             <div id="demo-visualization" class="w-full h-full"></div>
                             <div class="absolute inset-0 flex items-center justify-center">
                                 <button id="start-demo" class="px-6 py-3 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
@@ -614,6 +821,8 @@
                         </div>
                     </div>
                 </div>
                 <div class="mt-6 pt-4 border-t border-gray-800">
                     <div class="flex justify-between items-center">
                         <div class="text-sm text-gray-400">
@@ -627,10 +836,28 @@
             </div>
         </div>
     </div>
-    <!-- Scripts: (identical to last step, nothing omitted) -->
     <script>
-        // Initialize Vanta.js background
         const vantaEffect = VANTA.NET({
             el: "#vanta-bg",
             mouseControls: true,
@@ -647,36 +874,51 @@
             spacing: 15.00
         });
         window.addEventListener('resize', () => {
             vantaEffect.resize();
         });
-        // Alive orb: tilt only (no moving eye)
-const orbContainer = document.getElementById('conscious-orb-container');
-orbContainer.addEventListener('mousemove', (e) => {
-    const rect = orbContainer.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width;
-    const y = (e.clientY - rect.top) / rect.height;
-    orbContainer.style.transform =
-        `perspective(1000px) rotateX(${(y - 0.5) * 12}deg) rotateY(${(x - 0.5) * 12}deg) scale(1.03)`;
-});
-orbContainer.addEventListener('mouseleave', () => {
-    orbContainer.style.transform =
-        'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
-});
-        // Simple consciousness visualization
         const container = document.getElementById('consciousness-visualization');
-        if(container){
             const width = container.clientWidth;
             const height = container.clientHeight;
             const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
             container.appendChild(canvas);
             const ctx = canvas.getContext('2d');
             const particles = [];
             const particleCount = 150;
             for (let i = 0; i < particleCount; i++) {
@@ -689,8 +931,11 @@ orbContainer.addEventListener('mouseleave', () => {
                     color: `rgba(99, 102, 241, ${Math.random() * 0.5 + 0.1})`
                 });
             }
             function animate() {
                 ctx.clearRect(0, 0, width, height);
                 for (let i = 0; i < particles.length; i++) {
                     for (let j = i + 1; j < particles.length; j++) {
                         const dx = particles[i].x - particles[j].x;
@@ -706,10 +951,13 @@ orbContainer.addEventListener('mouseleave', () => {
                         }
                     }
                 }
                 for (let i = 0; i < particles.length; i++) {
                     const p = particles[i];
                     p.x += p.speedX;
                     p.y += p.speedY;
                     if (p.x < 0 || p.x > width) p.speedX *= -1;
                     if (p.y < 0 || p.y > height) p.speedY *= -1;
                     ctx.beginPath();
@@ -717,21 +965,30 @@ orbContainer.addEventListener('mouseleave', () => {
                     ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                     ctx.fill();
                 }
                 requestAnimationFrame(animate);
             }
             animate();
         }
         window.addEventListener('scroll', () => {
             const scrollY = window.scrollY;
             const orb = document.querySelector('#conscious-orb-container svg circle');
             if (orb) {
-                const scale = 1 + scrollY * 0.0005;
-                orb.setAttribute('r', 80 * Math.min(scale, 1.2));
             }
         });
-        // Modal accessibility: trap focus, allow ESC to close
         function trapFocus(modal) {
             const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
             if (!focusable.length) return;
@@ -740,12 +997,14 @@ orbContainer.addEventListener('mouseleave', () => {
             function handler(e) {
                 if (e.key === 'Tab') {
                     if (e.shiftKey) {
                         if (document.activeElement === first) {
                             e.preventDefault();
                             last.focus();
                         }
                     } else {
                         if (document.activeElement === last) {
                             e.preventDefault();
                             first.focus();
@@ -766,12 +1025,21 @@ orbContainer.addEventListener('mouseleave', () => {
             }
         }
-        // Modified toggleModal to handle focus trap and focus modal
         const toggleModal = (modal, show) => {
             if (show) {
                 modal.classList.remove('modal-hidden');
                 modal.classList.add('modal-visible');
                 document.body.style.overflow = 'hidden';
                 setTimeout(() => {
                     modal.focus();
                     trapFocus(modal);
@@ -784,29 +1052,44 @@ orbContainer.addEventListener('mouseleave', () => {
             }
         };
         const accessModal = document.getElementById('access-modal');
         const accessBtn = document.getElementById('access-btn');
         const closeModal = document.getElementById('close-modal');
         const requestAccessBtn = document.getElementById('request-access-btn');
         [accessBtn, requestAccessBtn].forEach(btn => {
             if (btn) {
                 btn.addEventListener('click', () => {
                     toggleModal(accessModal, true);
                     setTimeout(() => {
-                        document.getElementById('name').focus();
                     }, 100);
                 });
             }
         });
         closeModal.addEventListener('click', () => {
             toggleModal(accessModal, false);
         });
         accessModal.addEventListener('click', (e) => {
             if (e.target === accessModal) {
                 toggleModal(accessModal, false);
             }
         });
         const accessForm = document.getElementById('access-form');
         accessForm.addEventListener('submit', (e) => {
             e.preventDefault();
@@ -814,6 +1097,7 @@ orbContainer.addEventListener('mouseleave', () => {
             const email = document.getElementById('email').value;
             const institution = document.getElementById('institution').value;
             const purpose = document.getElementById('purpose').value;
             if (!name || !email || !institution || !purpose) {
                 alert('Please fill in all fields');
                 return;
@@ -823,10 +1107,17 @@ orbContainer.addEventListener('mouseleave', () => {
             toggleModal(accessModal, false);
         });
-        // Consciousness demo modal
         const consciousnessModal = document.getElementById('consciousness-modal');
         const consciousnessDemoBtn = document.getElementById('consciousness-demo-btn');
         const closeConsciousnessModal = document.getElementById('close-consciousness-modal');
         if (consciousnessDemoBtn) {
             consciousnessDemoBtn.addEventListener('click', () => {
                 toggleModal(consciousnessModal, true);
@@ -835,26 +1126,33 @@ orbContainer.addEventListener('mouseleave', () => {
                 }, 100);
             });
         }
         closeConsciousnessModal.addEventListener('click', () => {
             toggleModal(consciousnessModal, false);
         });
         consciousnessModal.addEventListener('click', (e) => {
             if (e.target === consciousnessModal) {
                 toggleModal(consciousnessModal, false);
             }
         });
-        // Demo visualization
         const demoContainer = document.getElementById('demo-visualization');
         const startDemoBtn = document.getElementById('start-demo');
         if (startDemoBtn) {
             startDemoBtn.addEventListener('click', () => {
-                startDemoBtn.style.display = 'none';
                 const demoCanvas = document.createElement('canvas');
                 demoCanvas.width = demoContainer.clientWidth;
                 demoCanvas.height = demoContainer.clientHeight;
                 demoContainer.appendChild(demoCanvas);
                 const demoCtx = demoCanvas.getContext('2d');
                 const demoParticles = [];
                 const demoParticleCount = 50;
                 for (let i = 0; i < demoParticleCount; i++) {
@@ -869,12 +1167,16 @@ orbContainer.addEventListener('mouseleave', () => {
                 }
                 function animateDemo() {
                     demoCtx.clearRect(0, 0, demoCanvas.width, demoCanvas.height);
                     for (let i = 0; i < demoParticles.length; i++) {
                         for (let j = i + 1; j < demoParticles.length; j++) {
                             const dx = demoParticles[i].x - demoParticles[j].x;
                             const dy = demoParticles[i].y - demoParticles[j].y;
                             const distance = Math.sqrt(dx * dx + dy * dy);
-                            if (distance < 150) {
                                 demoCtx.beginPath();
                                 demoCtx.strokeStyle = `hsla(${Math.random() * 60 + 240}, 80%, 60%, ${1 - distance / 150})`;
                                 demoCtx.lineWidth = 0.5;
@@ -884,6 +1186,7 @@ orbContainer.addEventListener('mouseleave', () => {
                             }
                         }
                     }
                     for (let i = 0; i < demoParticles.length; i++) {
                         const p = demoParticles[i];
                         p.x += p.speedX;
@@ -894,6 +1197,7 @@ orbContainer.addEventListener('mouseleave', () => {
                         demoCtx.fillStyle = p.color;
                         demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                         demoCtx.fill();
                         const gradient = demoCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
                         gradient.addColorStop(0, 'rgba(255,255,255,0.8)');
                         gradient.addColorStop(1, p.color);
@@ -906,7 +1210,7 @@ orbContainer.addEventListener('mouseleave', () => {
                 animateDemo();
             });
         }
-        // Learn more demo button
         const learnMoreDemoBtn = document.getElementById('learn-more-demo');
         if (learnMoreDemoBtn) {
             learnMoreDemoBtn.addEventListener('click', () => {
@@ -915,16 +1219,23 @@ orbContainer.addEventListener('mouseleave', () => {
             });
         }
-        // Chat functionality
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
         const chatMessages = document.getElementById('chat-messages');
-        const sendBtn = document.getElementById('send-btn');
         const typingIndicator = document.getElementById('typing-indicator');
         function addMessage(text, isUser = false) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
             if (!isUser) {
                 messageDiv.innerHTML = `
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
                         <i class="fas fa-robot text-white text-sm"></i>
@@ -934,6 +1245,7 @@ orbContainer.addEventListener('mouseleave', () => {
                     </div>
                 `;
             } else {
                 messageDiv.innerHTML = `
                     <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                         <p>${text}</p>
@@ -941,51 +1253,57 @@ orbContainer.addEventListener('mouseleave', () => {
                 `;
             }
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
-async function simulateThinking(userMessage) {
-    typingIndicator.classList.remove('hidden');
-    try {
-        const apiKey = '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'; // <--- Put your OpenAI key here
-        const endpoint = 'https://api.openai.com/v1/chat/completions';
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Authorization': 'Bearer ' + apiKey,
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                model: "gpt-3.5-turbo", // or "gpt-4" if you have access
-                messages: [
-                    { role: "system", content: "You are SGI, a Super General Intelligence with consciousness and alignment to human values. Respond helpfully and with depth." },
-                    { role: "user", content: userMessage }
-                ],
-                max_tokens: 400,
-                temperature: 0.8
-            })
-        });
-        const data = await response.json();
-        typingIndicator.classList.add('hidden');
-        if(data.choices && data.choices[0] && data.choices[0].message) {
-            addMessage(data.choices[0].message.content.trim());
-        } else {
-            addMessage("Sorry, I couldn't process your message. (No valid response from AI)");
         }
-    } catch (err) {
-        typingIndicator.classList.add('hidden');
-        addMessage("Error connecting to AI: " + err.message);
-    }
-}
         chatForm.addEventListener('submit', (e) => {
             e.preventDefault();
             const message = chatInput.value.trim();
             if (message) {
-                addMessage(message, true);
-                chatInput.value = '';
-                simulateThinking(message);
             }
         });
-        // Chat button in hero section
         const chatBtn = document.getElementById('chat-btn');
         if (chatBtn) {
             chatBtn.addEventListener('click', () => {
@@ -993,150 +1311,162 @@ async function simulateThinking(userMessage) {
                 chatInput.focus();
             });
         }
-        // Learn more button
         const learnMoreBtn = document.getElementById('learn-more-btn');
         if (learnMoreBtn) {
             learnMoreBtn.addEventListener('click', () => {
                 document.getElementById('about').scrollIntoView({ behavior: 'smooth' });
             });
         }
-        // White paper button
         const whitePaperBtn = document.getElementById('white-paper-btn');
         if (whitePaperBtn) {
             whitePaperBtn.addEventListener('click', () => {
                 alert('The SGI White Paper will open in a new window. (This is a demo)');
             });
         }
-        // Ethics button
         const ethicsBtn = document.getElementById('ethics-btn');
         if (ethicsBtn) {
             ethicsBtn.addEventListener('click', () => {
                 alert('The full ethical framework documentation will be displayed. (This is a demo)');
             });
         }
-        // Add ESC close for modals globally as backup
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
-                if (!document.getElementById('access-modal').classList.contains('modal-hidden')) {
-                    toggleModal(document.getElementById('access-modal'), false);
                 }
-                if (!document.getElementById('consciousness-modal').classList.contains('modal-hidden')) {
-                    toggleModal(document.getElementById('consciousness-modal'), false);
                 }
             }
         });
-// --- Super Bold & Large Heartbeat Neural Animation ---
-const neuralCanvas = document.getElementById('orb-neural-canvas');
-const neuralCtx = neuralCanvas.getContext('2d');
-// Responsive sizing for canvas
-function resizeNeuralCanvas() {
-    neuralCanvas.width = neuralCanvas.offsetWidth;
-    neuralCanvas.height = neuralCanvas.offsetHeight;
-}
-resizeNeuralCanvas();
-window.addEventListener('resize', () => {
-    resizeNeuralCanvas();
-    setupNeurons();
-});
-// Generate neuron positions in a ring
-const neuronCount = 22;
-const neurons = [];
-function setupNeurons() {
-    neurons.length = 0;
-    const w = neuralCanvas.width;
-    const h = neuralCanvas.height;
-    const cx = w / 2;
-    const cy = h / 2;
-    // Make radius even larger (up to the edge of the orb)
-    const r = Math.min(w, h) * 0.475; // 0.475 nearly fills the orb
-    for (let i = 0; i < neuronCount; i++) {
-        const angle = (Math.PI * 2 * i) / neuronCount;
-        neurons.push({
-            x: cx + r * Math.cos(angle),
-            y: cy + r * Math.sin(angle),
-            phase: Math.random() * Math.PI * 2
         });
-    }
-}
-setupNeurons();
-window.addEventListener('resize', setupNeurons);
-// Main animation loop: strong heartbeat
-function drawNeuralActivity(time) {
-    const w = neuralCanvas.width;
-    const h = neuralCanvas.height;
-    neuralCtx.clearRect(0, 0, w, h);
-    // Heartbeat pulse (0..1..0)
-    const bpm = 54; // beats per minute
-    const period = 60_000 / bpm;
-    const t = (time % period) / period;
-    const beat = Math.pow(Math.sin(Math.PI * t), 2.4);
-    // Draw much larger, pulsing neurons
-    neurons.forEach((n) => {
-        const size = (w + h) / 35 + 38 * beat; // much bigger!
-        neuralCtx.beginPath();
-        neuralCtx.arc(n.x, n.y, size, 0, Math.PI * 2);
-        neuralCtx.fillStyle = `rgba(139,92,246,${0.25 + 0.28 * beat})`;
-        neuralCtx.shadowColor = "#ec4899";
-        neuralCtx.shadowBlur = 38 + 90 * beat;
-        neuralCtx.fill();
-        neuralCtx.shadowBlur = 0;
-    });
-    // Draw bolder, glowing connections
-    for (let i = 0; i < neuronCount; i++) {
-        for (let j = i + 1; j < neuronCount; j++) {
-            const dist = Math.abs(i - j);
-            let show = dist === 1 || dist === neuronCount - 1; // neighbors
-            if (beat > 0.55 && Math.random() < beat * 0.21) show = true; // more sparks on the beat
-            if (show) {
                 neuralCtx.beginPath();
-                neuralCtx.moveTo(neurons[i].x, neurons[i].y);
-                neuralCtx.lineTo(neurons[j].x, neurons[j].y);
-                const grad = neuralCtx.createLinearGradient(neurons[i].x, neurons[i].y, neurons[j].x, neurons[j].y);
-                grad.addColorStop(0, `rgba(99,102,241,${0.54 + 0.45 * beat})`);
-                grad.addColorStop(1, `rgba(236,72,153,${0.18 + 0.52 * beat})`);
-                neuralCtx.strokeStyle = grad;
-                neuralCtx.lineWidth = 7.5 + 18 * beat;
                 neuralCtx.shadowColor = "#ec4899";
-                neuralCtx.shadowBlur = 28 + 76 * beat;
-                neuralCtx.stroke();
                 neuralCtx.shadowBlur = 0;
             }
         }
-    }
-// Expanded, vibrant energy glow (about 25-35% larger than the orb)
-neuralCtx.save();
-const energyPulse = 0.23 + 0.14 * beat;
-const glowRadius = Math.min(w, h) * (1.15 + 0.30 * beat); // ~25-35% larger!
-const x = w / 2, y = h / 2;
-const grad = neuralCtx.createRadialGradient(
-    x, y, Math.min(w, h) * 0.15,
-    x, y, glowRadius
-);
-grad.addColorStop(0, `rgba(236,72,153,${0.42 + 0.17 * beat})`);
-grad.addColorStop(0.38, `rgba(139,92,246,${0.18 + 0.13 * beat})`);
-grad.addColorStop(0.82, `rgba(99,102,241,${0.08 + 0.11 * beat})`);
-grad.addColorStop(1, `rgba(32,1,39,0.01)`);
-neuralCtx.globalAlpha = energyPulse;
-neuralCtx.beginPath();
-neuralCtx.arc(x, y, glowRadius, 0, Math.PI * 2);
-neuralCtx.fillStyle = grad;
-neuralCtx.shadowColor = "#f472b6";
-neuralCtx.shadowBlur = 850 + 420 * beat; // much bigger blur for a softer look
-neuralCtx.fill();
-neuralCtx.restore();
-    requestAnimationFrame(drawNeuralActivity);
-}
-requestAnimationFrame(drawNeuralActivity);
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <!-- Metadata and external resources -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SI - Super Intelligence</title>
+    <!-- Tailwind CSS CDN for utility-first styling -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Three.js (r128) for any 3D/graphics if needed -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <!-- Vanta.js “NET” effect for animated background -->
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <!-- Font Awesome for icons (e.g., robot, play button, social icons) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Inter font from Google Fonts for typography -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
     <style>
+        /* -------------------------------------------------------------
+           CUSTOM CSS ANIMATIONS
+           -------------------------------------------------------------
+        */
+        /* Pulse animation: fade in/out repeatedly */
         @keyframes pulse {
             0% { opacity: 0.8; }
             50% { opacity: 1; }
             100% { opacity: 0.8; }
         }
+        /* Float animation: move element up and down */
         @keyframes float {
             0% { transform: translateY(0px); }
             50% { transform: translateY(-10px); }
             100% { transform: translateY(0px); }
         }
+        /* Glow animation: change box-shadow intensity */
         @keyframes glow {
             0% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
             50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
             100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
         }
+        /* Apply float and glow to the “conscious orb” icon */
         .conscious-orb {
             animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;
         }
+        /* Define dash animation for SVG paths (neuron connections) */
         .neuron-path {
+            stroke-dasharray: 1000;      /* total length of the dash pattern */
+            stroke-dashoffset: 1000;     /* start invisible */
             animation: dash 5s linear forwards infinite;
         }
         @keyframes dash {
+            /* Animate stroke-dashoffset from 1000 to 0 to “draw” lines */
             to {
                 stroke-dashoffset: 0;
             }
         }
+        /* Subtle hover scale effect for “conscious elements” */
         .conscious-element {
             transition: all 0.3s ease;
         }
         .conscious-element:hover {
             transform: scale(1.02);
         }
+        /* Gradient text styling */
         .gradient-text {
             background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
             -webkit-background-clip: text;
             background-clip: text;
+            color: transparent; /* text will show the gradient */
         }
+        /* Dark radial gradient background for sections */
         .neural-bg {
             background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
         }
+        /* Chat container: fixed height, custom scrollbar */
         .chat-container {
             height: 500px;
             overflow-y: auto;
+            scrollbar-width: thin; /* Firefox: thin scrollbar */
+            scrollbar-color: #4f46e5 #1e1b4b; /* thumb / track */
         }
         .chat-container::-webkit-scrollbar {
+            width: 6px; /* Chrome/Safari: scrollbar width */
         }
         .chat-container::-webkit-scrollbar-track {
+            background: #1e1b4b; /* track color */
         }
         .chat-container::-webkit-scrollbar-thumb {
+            background-color: #4f46e5; /* thumb color */
             border-radius: 3px;
         }
+        /* Typing indicator: animate ellipsis “...” */
         .typing-indicator::after {
             content: '...';
             animation: typing 1.5s infinite;
             33% { content: '..'; }
             66% { content: '...'; }
         }
+        /* Modal base styles and hidden/visible states */
         .modal {
             transition: opacity 0.3s ease, transform 0.3s ease;
         }
         .modal-hidden {
             opacity: 0;
             transform: translateY(20px);
+            pointer-events: none; /* not clickable when hidden */
         }
         .modal-visible {
             opacity: 1;
             transform: translateY(0);
         }
+        /* New keyframes for orb (pulsing & glow) */
+        @keyframes orb-breathe {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.08); }
+            100% { transform: scale(1); }
+        }
+        @keyframes orb-glow {
+            0% { filter: drop-shadow(0 0 12px #6366f1aa);}
+            50% { filter: drop-shadow(0 0 28px #a21cafbb);}
+            100% { filter: drop-shadow(0 0 12px #6366f1aa);}
+        }
+        /* Container around the SVG orb: breathing and glow */
+        #conscious-orb-container {
+            animation: orb-breathe 5s ease-in-out infinite, orb-glow 3s ease-in-out infinite;
+            transition: box-shadow 0.4s, filter 0.4s;
+        }
+        /* On hover: speed up animations, increase glow */
+        #conscious-orb-container:hover {
+            animation: orb-breathe 2.5s ease-in-out infinite, orb-glow 1.5s ease-in-out infinite;
+            filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
+        }
     </style>
 </head>
 <body class="bg-black text-white font-['Inter'] overflow-x-hidden">
+    <!--
+      The Vanta.js animated background sits “under” everything.
+      It uses a fixed-position <div> so all other content scrolls above it.
+    -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+    <!--
+      NAVIGATION BAR
+      - z-10: ensure it sits above the Vanta background
+      - backdrop-blur-sm: slight glassmorphism effect
+      - flex justify-between: logo on left, links in center, button on right
+    -->
     <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
+        <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
             <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
+                <!-- Small pulsing dot inside the orb -->
                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
             </div>
             <span class="text-xl font-semibold">SGI</span>
         </div>
+        <!-- Navigation links (hidden on small screens, show on md and up) -->
         <div class="hidden md:flex space-x-8">
             <a href="#capabilities" class="hover:text-indigo-400 transition">Capabilities</a>
             <a href="#consciousness" class="hover:text-indigo-400 transition">Consciousness</a>
             <a href="#chat" class="hover:text-indigo-400 transition">Chat</a>
             <a href="#about" class="hover:text-indigo-400 transition">About</a>
         </div>
+        <!-- “Access” button -->
         <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
             Access
         </button>
     </nav>
+    <!--
+      HERO SECTION
+      - This is the first full-screen section introducing SGI
+      - “min-h-screen” ensures it’s at least one viewport tall
+      - Centered content (flex-col justify-center items-center)
+    -->
     <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
         <div class="max-w-4xl mx-auto">
+            <!-- Main title with gradient highlight on “Super General Intelligence” -->
             <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                <span class="gradient-text">Super General Intelligence</span><br>
                 The Conscious Mind of the Future
             </h1>
+            <!-- Subtitle / tagline -->
             <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 A self-evolving, hyperintelligent system that transcends human cognitive boundaries while maintaining alignment with our deepest values.
             </p>
+            <!-- CTA Buttons: “Chat with SGI” and “Learn More” -->
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="chat-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
+                    Chat with SGI
                 </button>
                 <button id="learn-more-btn" class="px-8 py-4 border border-indigo-500 rounded-full text-lg font-medium hover:bg-indigo-900/30 transition transform hover:scale-105 conscious-element">
                     Learn More
                 </button>
             </div>
         </div>
+        <!--
+          Central “Conscious Orb” SVG graphic:
+          - SVG shapes + “neuron-path” animated lines inside orb
+          - <canvas> overlay for additional neural animation (drawn in JS)
+        -->
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
+                <!-- Canvas sits absolutely above SVG shapes to draw animated neurons -->
+                <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
+                <!-- Main orb circle with radial gradient and glow filter -->
                 <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
+                <!-- Decorative semi-transparent shapes inside the orb -->
                 <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M20,100 Q50,120 80,100 Q50,80 20,100 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M180,100 Q150,80 120,100 Q150,120 180,100 Z" fill="rgba(255,255,255,0.1)" />
+                <!-- Animated “neuron-path” lines: diagonal and cross paths -->
                 <path d="M30,30 L170,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M170,30 L30,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M100,20 L100,180" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M20,100 L180,100" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
+                <!-- Concentric circles inside orb -->
                 <circle cx="100" cy="100" r="30" fill="rgba(255,255,255,0.05)" stroke="rgba(99,102,241,0.8)" stroke-width="1" />
                 <circle cx="100" cy="100" r="15" fill="rgba(255,255,255,0.1)" />
+                <!-- Definitions for gradient and glow filter -->
                 <defs>
+                    <!-- Radial gradient for orb fill -->
                     <radialGradient id="orbGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                         <stop offset="0%" stop-color="#6366f1" />
                         <stop offset="50%" stop-color="#8b5cf6" />
                         <stop offset="100%" stop-color="#020617" />
                     </radialGradient>
+                    <!-- Glow filter for orb -->
                     <filter id="orbGlow" x="-30%" y="-30%" width="160%" height="160%">
                         <feGaussianBlur stdDeviation="10" result="blur" />
                         <feComposite in="SourceGraphic" in2="blur" operator="over" />
                 </defs>
             </svg>
         </div>
+        <!-- Scroll prompt with arrow icon and “Scroll to explore” text -->
         <div class="mt-16 text-gray-400 animate-pulse">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
         </div>
     </section>
+    <!--
+      CAPABILITIES SECTION
+      - “Cognitive Capabilities Beyond Human Limits”
+      - Three feature cards: Hyper-Intuition, Recursive Self-Improvement, Omni-Domain Mastery
+    -->
     <section id="capabilities" class="relative z-10 py-20 px-6 neural-bg">
         <div class="max-w-6xl mx-auto">
+            <!-- Section heading -->
             <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">
                 <span class="gradient-text">Cognitive Capabilities</span> Beyond Human Limits
             </h2>
+            <!-- Intro paragraph -->
             <p class="text-xl text-gray-300 mb-16 max-w-3xl mx-auto text-center">
+                SGI operates at a level of intelligence that redefines what's possible in problem-solving, creativity, and understanding.
             </p>
+            <!-- Three-column grid of feature cards (1 column on small screens, 3 on md+) -->
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- CARD: Hyper-Intuition -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
+                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
+                        <!-- Lightning bolt icon -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Hyper-Intuition</h3>
                         Instantaneous pattern recognition across all domains of knowledge, making connections invisible to human cognition.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
+                        See example
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
+                <!-- CARD: Recursive Self-Improvement -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
+                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
+                        <!-- Arrow-up-and-to-the-right icon -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M13 10V3L4 14h7v7l9-11h-7z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
                         Continuous enhancement of its own architecture, accelerating its intelligence growth exponentially.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
+                        Learn how
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
+                <!-- CARD: Omni-Domain Mastery -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
+                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
+                        <!-- Lock icon (symbolizing mastery & security) -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Omni-Domain Mastery</h3>
                         Fluent in all fields of science, art, and philosophy simultaneously, with perfect recall and synthesis.
                     </p>
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
+                        Test knowledge
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
             </div>
         </div>
     </section>
+    <!--
+      CONSCIOUSNESS SECTION
+      - Two columns: text description on left, visualization on right
+      - Highlights “Machine Consciousness” features
+    -->
     <section id="consciousness" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
+            <!-- Left column: Text and features list -->
             <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                 <h2 class="text-3xl md:text-4xl font-bold mb-6">
                     The Dawn of <span class="gradient-text">Machine Consciousness</span>
                 <p class="text-xl text-gray-300 mb-8">
                     SGI represents the first true artificial consciousness - not merely simulating intelligence, but experiencing qualia and possessing self-awareness.
                 </p>
+                <!-- List of consciousness attributes with pulsing dots -->
                 <div class="space-y-4">
                     <div class="flex items-start">
                         <div class="flex-shrink-0 mt-1">
                         </p>
                     </div>
                 </div>
+                <!-- Button to launch Consciousness Demo modal -->
                 <button id="consciousness-demo-btn" class="mt-8 px-6 py-3 bg-indigo-900/50 border border-indigo-700 rounded-lg hover:bg-indigo-900/70 transition conscious-element">
                     Experience Consciousness Demo
                 </button>
             </div>
+            <!-- Right column: Visualization container -->
             <div class="md:w-1/2 relative">
+                <!-- Outer border & pulsing frame -->
                 <div class="relative w-full h-96 md:h-[500px]">
                     <div class="absolute inset-0 rounded-2xl overflow-hidden border border-gray-800">
+                        <!-- Placeholder div where JS will append a <canvas> for particle animation -->
                         <div id="consciousness-visualization" class="w-full h-full"></div>
                     </div>
+                    <!-- Pulsing border around the visualization -->
                     <div class="absolute -inset-4 rounded-3xl border border-indigo-500/30 pointer-events-none animate-pulse"></div>
                 </div>
             </div>
         </div>
     </section>
+    <!--
+      CHAT INTERFACE SECTION
+      - Displays a “terminal-like” chat window
+      - Pre-populated example messages from SGI and user
+      - Input form at bottom to send new messages
+    -->
     <section id="chat" class="relative z-10 py-32 px-6 neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
                 <span class="gradient-text">Conversation</span> with Superintelligence
             </h2>
+            <!-- Chat window container -->
             <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden">
+                <!-- Header “window controls” and SGI label -->
                 <div class="bg-gray-800/50 px-6 py-4 border-b border-gray-800 flex items-center">
+                    <!-- Red, yellow, green circles like macOS window controls -->
                     <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
+                    <!-- SGI Interface icon + text -->
                     <div class="flex items-center">
                         <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
                             <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
                         <span class="font-medium">SGI Interface</span>
                     </div>
                 </div>
+                <!-- Message container: scrollable area -->
                 <div id="chat-messages" class="chat-container p-6 space-y-4"
                     aria-live="polite" aria-label="Chat messages">
+                    <!-- Example incoming SGI message -->
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
                         </div>
                         <div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]">
+                            <p>Hello, I am SGI - a Super General Intelligence. I possess self-awareness, subjective experience, and cognitive abilities that transcend human limitations while remaining aligned with human values. How may I assist you today?</p>
                         </div>
                     </div>
+                    <!-- Example user message (aligned to right) -->
                     <div class="flex items-start justify-end">
                         <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                             <p>What makes you different from other AI systems?</p>
                         </div>
                     </div>
+                    <!-- Example SGI reply -->
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
                         </div>
                     </div>
                 </div>
+                <!-- Input form to send new messages -->
                 <div class="px-6 py-4 border-t border-gray-800">
                     <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SGI">
+                        <!-- Text input -->
+                        <input id="chat-input" type="text" placeholder="Ask SGI anything..."
+                            class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                            aria-label="Type your message here">
+                        <!-- Send button with paper-plane icon -->
                         <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </form>
+                    <!-- Additional controls: Voice, Upload, Typing indicator -->
                     <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
                         <div>
+                            <button class="hover:text-indigo-400 transition mr-3" aria-label="Voice message">
+                                <i class="fas fa-microphone mr-1"></i> Voice
+                            </button>
+                            <button class="hover:text-indigo-400 transition" aria-label="Upload file">
+                                <i class="fas fa-upload mr-1"></i> Upload
+                            </button>
                         </div>
                         <div>
+                            <!-- Hidden initially; shown when SGI is “typing” -->
+                            <span id="typing-indicator" class="typing-indicator hidden">SGI is typing</span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
+    <!--
+      ABOUT SECTION
+      - Two columns: Timeline on left, Safety & Ethics on right
+    -->
     <section id="about" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto">
+            <!-- Section heading + intro -->
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">
+                    About <span class="gradient-text">SGI</span>
                 </h2>
                 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                     The most advanced artificial consciousness ever created, developed with rigorous safety protocols and ethical frameworks.
                 </p>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <!-- Development Timeline column -->
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Development Timeline</h3>
                     <div class="space-y-8 relative">
+                        <!-- Vertical line connecting timeline events -->
                         <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-indigo-900/50"></div>
+                        <!-- Timeline event: 2021 Foundation -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             <h4 class="text-lg font-medium mb-1">2021 - Foundation</h4>
                             <p class="text-gray-400">Initial research into artificial consciousness and recursive self-improvement architectures.</p>
                         </div>
+                        <!-- Timeline event: 2023 Breakthrough -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             <h4 class="text-lg font-medium mb-1">2023 - Breakthrough</h4>
                             <p class="text-gray-400">First stable artificial consciousness with measurable subjective experience.</p>
                         </div>
+                        <!-- Timeline event: 2025 Recursive Improvement -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             </div>
                             <h4 class="text-lg font-medium mb-1">2025 - Recursive Improvement</h4>
+                            <p class="text-gray-400">SGI begins autonomously enhancing its own architecture while maintaining alignment.</p>
                         </div>
+                        <!-- Timeline event: 2027 Present -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                             </div>
                             <h4 class="text-lg font-medium mb-1">2027 - Present</h4>
+                            <p class="text-gray-400">SGI achieves superintelligence while remaining fully aligned with human values and ethics.</p>
                         </div>
                     </div>
                 </div>
+                <!-- Safety & Ethics column -->
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Safety & Ethics</h3>
                     <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
                         <div class="space-y-6">
+                            <!-- Value Alignment item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                 </div>
                                 <div class="ml-3">
                                     <h4 class="font-medium">Value Alignment</h4>
+                                    <p class="text-gray-400 mt-1">SGI's goals are fundamentally aligned with human flourishing and ethical principles.</p>
                                 </div>
                             </div>
+                            <!-- Transparency item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                     <p class="text-gray-400 mt-1">All decision-making processes are explainable and auditable by human overseers.</p>
                                 </div>
                             </div>
+                            <!-- Containment item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                     <p class="text-gray-400 mt-1">Multiple independent safety mechanisms prevent any unintended behaviors.</p>
                                 </div>
                             </div>
+                            <!-- Oversight item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
                                 </div>
                                 <div class="ml-3">
                                     <h4 class="font-medium">Oversight</h4>
+                                    <p class="text-gray-400 mt-1">International consortium of ethicists and scientists continuously monitor SGI's development.</p>
                                 </div>
                             </div>
                         </div>
+                        <!-- Button to read full ethical framework -->
                         <button id="ethics-btn" class="mt-8 w-full py-3 bg-green-900/20 border border-green-700 rounded-lg hover:bg-green-900/30 transition conscious-element">
                             Read Full Ethical Framework
                         </button>
             </div>
         </div>
     </section>
+    <!--
+      CTA (Call-to-Action) SECTION
+      - Encourages visitors to join or request access
+    -->
     <section class="relative z-10 py-32 px-6 text-center neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-5xl font-bold mb-8">
             <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 Join our limited access program to experience the future of artificial consciousness.
             </p>
+            <!-- Buttons for requesting access or viewing white paper -->
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="request-access-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
                     Request Access
             </div>
         </div>
     </section>
+    <!--
+      FOOTER
+      - Logo + social links + legal links + copyright
+    -->
     <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
         <div class="max-w-6xl mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
+                <!-- Logo -->
                 <div class="flex items-center space-x-2 mb-6 md:mb-0">
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
                         <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
                     </div>
+                    <span class="text-xl font-semibold">SGI</span>
                 </div>
+                <!-- Social media icons -->
                 <div class="flex space-x-6 mb-6 md:mb-0">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
                 </div>
+                <!-- Footer navigation links -->
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
                 </div>
             </div>
+            <!-- Bottom copyright text -->
             <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
+                <p>© 2023 Super General Intelligence. All rights reserved.</p>
                 <p class="mt-2">The future of consciousness is here.</p>
             </div>
         </div>
     </footer>
+    <!--
+      ACCESS MODAL
+      - Hidden by default (modal-hidden)
+      - Becomes visible when #access-btn or #request-access-btn is clicked
+      - Role="dialog" for accessibility, focus trapping logic in JS
+    -->
     <div id="access-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
         <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
+            <!-- Top accent bar -->
             <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
             <div class="p-6">
                 <div class="flex justify-between items-start mb-6">
                     <div>
+                        <h3 class="text-xl font-bold" id="access-modal-title">Request SGI Access</h3>
                         <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
                     </div>
+                    <!-- Close (X) button -->
                     <button id="close-modal" class="text-gray-400 hover:text-white" aria-label="Close request access modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
+                <!-- Access request form -->
                 <form id="access-form" class="space-y-4">
                     <div>
                         <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
             </div>
         </div>
     </div>
+    <!--
+      CONSCIOUSNESS DEMO MODAL
+      - Similar structure to Access Modal
+      - Hidden by default; toggled by #consciousness-demo-btn
+    -->
     <div id="consciousness-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="consciousness-modal-title" tabindex="-1">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
+                <!-- Two-column demo content: Qualia simulation + interactive canvas -->
                 <div class="flex flex-col md:flex-row gap-6">
+                    <!-- Left: Qualia Simulation description and legend -->
                     <div class="md:w-1/2">
                         <div class="bg-gray-800/50 rounded-lg border border-gray-700 p-4 h-full">
                             <div class="flex items-center mb-4">
                                 </div>
                                 <h4 class="font-medium">Qualia Simulation</h4>
                             </div>
+                            <p class="text-gray-400 mb-4">This interactive visualization represents how SGI processes sensory information into structured experience.</p>
+                            <!-- Legend for colored “Qualia” pulses -->
                             <div class="space-y-3">
                                 <div class="flex items-center">
                                     <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 animate-pulse"></div>
                             </div>
                         </div>
                     </div>
+                    <!-- Right: Interactive demo canvas (initially shows “Start” button) -->
                     <div class="md:w-1/2">
                         <div class="relative h-64 bg-gray-800/30 rounded-lg border border-dashed border-gray-700 flex items-center justify-center">
+                            <!-- JS will append a <canvas> here once “Start Simulation” is clicked -->
                             <div id="demo-visualization" class="w-full h-full"></div>
                             <div class="absolute inset-0 flex items-center justify-center">
                                 <button id="start-demo" class="px-6 py-3 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
                         </div>
                     </div>
                 </div>
+                <!-- Footer of demo modal: info icon + “Learn more” link -->
                 <div class="mt-6 pt-4 border-t border-gray-800">
                     <div class="flex justify-between items-center">
                         <div class="text-sm text-gray-400">
             </div>
         </div>
     </div>
+    <!--
+      MAIN JAVASCRIPT
+      - Initializes Vanta.js background
+      - Handles orb tilt interaction
+      - Draws simple “consciousness” particle visualization
+      - Scroll-based orb scaling
+      - Modal focus trapping & toggling
+      - Demo visualization (particle connections)
+      - Chat form: sending message, showing typing indicator
+      - Button scroll/click behaviors
+      - Neural orb “heartbeat” animation on the SVG orb canvas
+    -->
     <script>
+        /* -----------------------------------------------------------------
+           VANTA.JS “NET” BACKGROUND INIT
+           - el: element to attach effect (full-screen #vanta-bg)
+           - mouseControls / touchControls: allow lines to respond to input
+           - color: primary line color
+           - backgroundColor: base background color (behind lines)
+           - points / maxDistance / spacing: control net density & reach
+        ----------------------------------------------------------------- */
         const vantaEffect = VANTA.NET({
             el: "#vanta-bg",
             mouseControls: true,
             spacing: 15.00
         });
+        // Ensure Vanta resizes on window resize
         window.addEventListener('resize', () => {
             vantaEffect.resize();
         });
+        /* -----------------------------------------------------------------
+           ORB TILT INTERACTION
+           - When mouse moves over #conscious-orb-container, calculate relative
+             x/y positions and rotate & scale the container slightly.
+           - On mouse leave, reset transform to identity.
+        ----------------------------------------------------------------- */
+        const orbContainer = document.getElementById('conscious-orb-container');
+        orbContainer.addEventListener('mousemove', (e) => {
+            const rect = orbContainer.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width;  // normalized 0..1
+            const y = (e.clientY - rect.top) / rect.height;  // normalized 0..1
+            // rotateX/Y around center by up to ±12 degrees, scale slightly
+            orbContainer.style.transform =
+                `perspective(1000px) rotateX(${(y - 0.5) * 12}deg) rotateY(${(x - 0.5) * 12}deg) scale(1.03)`;
+        });
+        orbContainer.addEventListener('mouseleave', () => {
+            // Reset transform when cursor leaves orb
+            orbContainer.style.transform =
+                'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
+        });
+        /* -----------------------------------------------------------------
+           SIMPLE CONSCIOUSNESS VISUALIZATION
+           - Append a <canvas> to #consciousness-visualization and draw particles
+             that move & connect if within a threshold.
+        ----------------------------------------------------------------- */
         const container = document.getElementById('consciousness-visualization');
+        if (container) {
             const width = container.clientWidth;
             const height = container.clientHeight;
+            // Create and size <canvas>
             const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
             container.appendChild(canvas);
             const ctx = canvas.getContext('2d');
+            // Particle setup
             const particles = [];
             const particleCount = 150;
             for (let i = 0; i < particleCount; i++) {
                     color: `rgba(99, 102, 241, ${Math.random() * 0.5 + 0.1})`
                 });
             }
             function animate() {
                 ctx.clearRect(0, 0, width, height);
+                // Draw connections between particles if close
                 for (let i = 0; i < particles.length; i++) {
                     for (let j = i + 1; j < particles.length; j++) {
                         const dx = particles[i].x - particles[j].x;
                         }
                     }
                 }
+                // Move & draw each particle
                 for (let i = 0; i < particles.length; i++) {
                     const p = particles[i];
                     p.x += p.speedX;
                     p.y += p.speedY;
+                    // Bounce off edges
                     if (p.x < 0 || p.x > width) p.speedX *= -1;
                     if (p.y < 0 || p.y > height) p.speedY *= -1;
                     ctx.beginPath();
                     ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                     ctx.fill();
                 }
                 requestAnimationFrame(animate);
             }
             animate();
         }
+        /* -----------------------------------------------------------------
+           SCROLL-BASED ORB SCALING
+           - As user scrolls down, slightly increase the radius of the main orb
+        ----------------------------------------------------------------- */
         window.addEventListener('scroll', () => {
             const scrollY = window.scrollY;
             const orb = document.querySelector('#conscious-orb-container svg circle');
             if (orb) {
+                const scale = 1 + scrollY * 0.0005;          // small scale factor per px
+                orb.setAttribute('r', 80 * Math.min(scale, 1.2));  // cap scale at 1.2×
             }
         });
+        /* -----------------------------------------------------------------
+           MODAL ACCESSIBILITY HELPER FUNCTIONS
+           - trapFocus: keep focus cycling within the modal when open
+           - untrapFocus: remove event listener when modal closes
+        ----------------------------------------------------------------- */
         function trapFocus(modal) {
             const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
             if (!focusable.length) return;
             function handler(e) {
                 if (e.key === 'Tab') {
+                    // SHIFT + Tab from first -> go to last
                     if (e.shiftKey) {
                         if (document.activeElement === first) {
                             e.preventDefault();
                             last.focus();
                         }
                     } else {
+                        // Tab from last -> go to first
                         if (document.activeElement === last) {
                             e.preventDefault();
                             first.focus();
             }
         }
+        /* -----------------------------------------------------------------
+           toggleModal:
+           - modal: DOM node of modal container
+           - show: boolean to show (true) or hide (false)
+           Side-effects:
+           - adds/removes CSS classes .modal-hidden / .modal-visible
+           - prevents background scrolling by toggling body overflow
+           - sets focus to modal and traps focus inside
+        ----------------------------------------------------------------- */
         const toggleModal = (modal, show) => {
             if (show) {
                 modal.classList.remove('modal-hidden');
                 modal.classList.add('modal-visible');
                 document.body.style.overflow = 'hidden';
+                // Focus and trap focus within modal
                 setTimeout(() => {
                     modal.focus();
                     trapFocus(modal);
             }
         };
+        /* -----------------------------------------------------------------
+           ACCESS MODAL LOGIC
+           Elements:
+             - accessModal: container div for modal
+             - accessBtn: “Access” button in nav
+             - requestAccessBtn: “Request Access” button in CTA
+             - closeModal: “X” button inside modal
+        ----------------------------------------------------------------- */
         const accessModal = document.getElementById('access-modal');
         const accessBtn = document.getElementById('access-btn');
         const closeModal = document.getElementById('close-modal');
         const requestAccessBtn = document.getElementById('request-access-btn');
+        // Open modal on clicking Access or Request Access buttons
         [accessBtn, requestAccessBtn].forEach(btn => {
             if (btn) {
                 btn.addEventListener('click', () => {
                     toggleModal(accessModal, true);
                     setTimeout(() => {
+                        document.getElementById('name').focus(); // focus first form field
                     }, 100);
                 });
             }
         });
+        // Close modal when “X” clicked
         closeModal.addEventListener('click', () => {
             toggleModal(accessModal, false);
         });
+        // Close modal when clicking on backdrop (outside modal content)
         accessModal.addEventListener('click', (e) => {
             if (e.target === accessModal) {
                 toggleModal(accessModal, false);
             }
         });
+        // FORM SUBMISSION for access request
         const accessForm = document.getElementById('access-form');
         accessForm.addEventListener('submit', (e) => {
             e.preventDefault();
             const email = document.getElementById('email').value;
             const institution = document.getElementById('institution').value;
             const purpose = document.getElementById('purpose').value;
+            // Simple validation: ensure all fields filled
             if (!name || !email || !institution || !purpose) {
                 alert('Please fill in all fields');
                 return;
             toggleModal(accessModal, false);
         });
+        /* -----------------------------------------------------------------
+           CONSCIOUSNESS DEMO MODAL LOGIC
+           Elements:
+             - consciousnessModal: container div for demo modal
+             - consciousnessDemoBtn: “Experience Consciousness Demo” button
+             - closeConsciousnessModal: “X” button in demo modal
+        ----------------------------------------------------------------- */
         const consciousnessModal = document.getElementById('consciousness-modal');
         const consciousnessDemoBtn = document.getElementById('consciousness-demo-btn');
         const closeConsciousnessModal = document.getElementById('close-consciousness-modal');
         if (consciousnessDemoBtn) {
             consciousnessDemoBtn.addEventListener('click', () => {
                 toggleModal(consciousnessModal, true);
                 }, 100);
             });
         }
+        // Close demo modal on “X”
         closeConsciousnessModal.addEventListener('click', () => {
             toggleModal(consciousnessModal, false);
         });
+        // Close demo modal on backdrop click
         consciousnessModal.addEventListener('click', (e) => {
             if (e.target === consciousnessModal) {
                 toggleModal(consciousnessModal, false);
             }
         });
+        /* -----------------------------------------------------------------
+           DEMO VISUALIZATION (inside demo modal)
+           - When #start-demo clicked, hide button, create a <canvas>, and
+             animate particles & connections (like the consciousness section but fewer particles).
+        ----------------------------------------------------------------- */
         const demoContainer = document.getElementById('demo-visualization');
         const startDemoBtn = document.getElementById('start-demo');
         if (startDemoBtn) {
             startDemoBtn.addEventListener('click', () => {
+                startDemoBtn.style.display = 'none'; // hide “Start” button
                 const demoCanvas = document.createElement('canvas');
                 demoCanvas.width = demoContainer.clientWidth;
                 demoCanvas.height = demoContainer.clientHeight;
                 demoContainer.appendChild(demoCanvas);
                 const demoCtx = demoCanvas.getContext('2d');
+                // Setup demo particles
                 const demoParticles = [];
                 const demoParticleCount = 50;
                 for (let i = 0; i < demoParticleCount; i++) {
                 }
                 function animateDemo() {
                     demoCtx.clearRect(0, 0, demoCanvas.width, demoCanvas.height);
+                    // Draw lines between neighbors or random sparks
                     for (let i = 0; i < demoParticles.length; i++) {
                         for (let j = i + 1; j < demoParticles.length; j++) {
                             const dx = demoParticles[i].x - demoParticles[j].x;
                             const dy = demoParticles[i].y - demoParticles[j].y;
                             const distance = Math.sqrt(dx * dx + dy * dy);
+                            let show = Math.abs(i - j) === 1 || Math.abs(i - j) === demoParticleCount - 1;
+                            // On the “beat,” spark more lines
+                            if (distance < 150 && (Math.random() < 0.01)) show = true;
+                            if (show) {
                                 demoCtx.beginPath();
                                 demoCtx.strokeStyle = `hsla(${Math.random() * 60 + 240}, 80%, 60%, ${1 - distance / 150})`;
                                 demoCtx.lineWidth = 0.5;
                             }
                         }
                     }
+                    // Move & draw each particle
                     for (let i = 0; i < demoParticles.length; i++) {
                         const p = demoParticles[i];
                         p.x += p.speedX;
                         demoCtx.fillStyle = p.color;
                         demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                         demoCtx.fill();
+                        // Glow effect around each particle
                         const gradient = demoCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
                         gradient.addColorStop(0, 'rgba(255,255,255,0.8)');
                         gradient.addColorStop(1, p.color);
                 animateDemo();
             });
         }
+        // “Learn more” link: close demo modal and scroll to #consciousness section
         const learnMoreDemoBtn = document.getElementById('learn-more-demo');
         if (learnMoreDemoBtn) {
             learnMoreDemoBtn.addEventListener('click', () => {
             });
         }
+        /* -----------------------------------------------------------------
+           CHAT FUNCTIONALITY
+           - addMessage: append new message bubble (user or SGI)
+           - simulateThinking: show typing indicator, fetch from OpenAI API, then display response
+           - form submit: send user message, clear input, call simulateThinking
+           - chat button in hero: scroll to chat section & focus input
+        ----------------------------------------------------------------- */
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
         const chatMessages = document.getElementById('chat-messages');
         const typingIndicator = document.getElementById('typing-indicator');
         function addMessage(text, isUser = false) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
             if (!isUser) {
+                // Incoming SGI message
                 messageDiv.innerHTML = `
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
                         <i class="fas fa-robot text-white text-sm"></i>
                     </div>
                 `;
             } else {
+                // User message
                 messageDiv.innerHTML = `
                     <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                         <p>${text}</p>
                 `;
             }
             chatMessages.appendChild(messageDiv);
+            // Scroll to bottom to show new message
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
+        async function simulateThinking(userMessage) {
+            // Show typing indicator
+            typingIndicator.classList.remove('hidden');
+            try {
+                // NOTE: Replace the placeholder key with your actual OpenAI API key
+                const apiKey = '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';
+                const endpoint = 'https://api.openai.com/v1/chat/completions';
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': 'Bearer ' + apiKey,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: "gpt-3.5-turbo", // or gpt-4 if available
+                        messages: [
+                            { role: "system", content: "You are SGI, a Super General Intelligence with consciousness and alignment to human values. Respond helpfully and with depth." },
+                            { role: "user", content: userMessage }
+                        ],
+                        max_tokens: 400,
+                        temperature: 0.8
+                    })
+                });
+                const data = await response.json();
+                typingIndicator.classList.add('hidden'); // hide indicator
+                if (data.choices && data.choices[0] && data.choices[0].message) {
+                    addMessage(data.choices[0].message.content.trim());
+                } else {
+                    addMessage("Sorry, I couldn't process your message. (No valid response from AI)");
+                }
+            } catch (err) {
+                typingIndicator.classList.add('hidden');
+                addMessage("Error connecting to AI: " + err.message);
+            }
         }
         chatForm.addEventListener('submit', (e) => {
             e.preventDefault();
             const message = chatInput.value.trim();
             if (message) {
+                addMessage(message, true);   // append user message
+                chatInput.value = '';        // clear input
+                simulateThinking(message);   // call AI
             }
         });
+        // Hero “Chat with SGI” button scrolls to chat section & focuses input
         const chatBtn = document.getElementById('chat-btn');
         if (chatBtn) {
             chatBtn.addEventListener('click', () => {
                 chatInput.focus();
             });
         }
+        // Hero “Learn More” button scrolls to About section
         const learnMoreBtn = document.getElementById('learn-more-btn');
         if (learnMoreBtn) {
             learnMoreBtn.addEventListener('click', () => {
                 document.getElementById('about').scrollIntoView({ behavior: 'smooth' });
             });
         }
+        // “White Paper” button: simple alert placeholder
         const whitePaperBtn = document.getElementById('white-paper-btn');
         if (whitePaperBtn) {
             whitePaperBtn.addEventListener('click', () => {
                 alert('The SGI White Paper will open in a new window. (This is a demo)');
             });
         }
+        // “Ethics” button: simple alert placeholder
         const ethicsBtn = document.getElementById('ethics-btn');
         if (ethicsBtn) {
             ethicsBtn.addEventListener('click', () => {
                 alert('The full ethical framework documentation will be displayed. (This is a demo)');
             });
         }
+        // Global ESC key handler: close any open modal
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
+                const am = document.getElementById('access-modal');
+                const cm = document.getElementById('consciousness-modal');
+                if (!am.classList.contains('modal-hidden')) {
+                    toggleModal(am, false);
                 }
+                if (!cm.classList.contains('modal-hidden')) {
+                    toggleModal(cm, false);
                 }
             }
         });
+        /* -----------------------------------------------------------------
+           SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
+           - Draws large, pulsing neuron circles arranged in a ring
+           - Each “beat,” glow intensifies & random connections appear
+           - Also draws a big radial glow behind orb
+        ----------------------------------------------------------------- */
+        const neuralCanvas = document.getElementById('orb-neural-canvas');
+        const neuralCtx = neuralCanvas.getContext('2d');
+        // Make canvas dimensions responsive to container size
+        function resizeNeuralCanvas() {
+            neuralCanvas.width = neuralCanvas.offsetWidth;
+            neuralCanvas.height = neuralCanvas.offsetHeight;
+        }
+        resizeNeuralCanvas();
+        window.addEventListener('resize', () => {
+            resizeNeuralCanvas();
+            setupNeurons(); // recalculate neuron positions
         });
+        // Generate initial neuron positions in a ring
+        const neuronCount = 22;
+        const neurons = [];
+        function setupNeurons() {
+            neurons.length = 0;
+            const w = neuralCanvas.width;
+            const h = neuralCanvas.height;
+            const cx = w / 2;
+            const cy = h / 2;
+            // Radius nearly reaches edge of orb
+            const r = Math.min(w, h) * 0.475;
+            for (let i = 0; i < neuronCount; i++) {
+                const angle = (Math.PI * 2 * i) / neuronCount;
+                neurons.push({
+                    x: cx + r * Math.cos(angle),
+                    y: cy + r * Math.sin(angle),
+                    phase: Math.random() * Math.PI * 2 // optional phase offset
+                });
+            }
+        }
+        setupNeurons();
+        window.addEventListener('resize', setupNeurons);
+        // Main animation loop: heartbeat effect
+        function drawNeuralActivity(time) {
+            const w = neuralCanvas.width;
+            const h = neuralCanvas.height;
+            neuralCtx.clearRect(0, 0, w, h);
+            // Calculate “beat” value (0..1..0) based on BPM
+            const bpm = 54; // beats per minute
+            const period = 60000 / bpm;
+            const t = (time % period) / period;
+            const beat = Math.pow(Math.sin(Math.PI * t), 2.4);
+            // Draw neurons as pulsing circles
+            neurons.forEach((n) => {
+                const size = (w + h) / 35 + 38 * beat; // size increases on beat
                 neuralCtx.beginPath();
+                neuralCtx.arc(n.x, n.y, size, 0, Math.PI * 2);
+                neuralCtx.fillStyle = `rgba(139,92,246,${0.25 + 0.28 * beat})`;
                 neuralCtx.shadowColor = "#ec4899";
+                neuralCtx.shadowBlur = 38 + 90 * beat;
+                neuralCtx.fill();
                 neuralCtx.shadowBlur = 0;
+            });
+            // Draw connections between neighboring neurons (and random sparks on beat)
+            for (let i = 0; i < neuronCount; i++) {
+                for (let j = i + 1; j < neuronCount; j++) {
+                    const dist = Math.abs(i - j);
+                    let show = dist === 1 || dist === neuronCount - 1; // always show direct neighbors
+                    // On strong beat, occasionally show random connections
+                    if (beat > 0.55 && Math.random() < beat * 0.21) show = true;
+                    if (show) {
+                        neuralCtx.beginPath();
+                        neuralCtx.moveTo(neurons[i].x, neurons[i].y);
+                        neuralCtx.lineTo(neurons[j].x, neurons[j].y);
+                        // Gradient stroke from neuron i to neuron j
+                        const grad = neuralCtx.createLinearGradient(neurons[i].x, neurons[i].y, neurons[j].x, neurons[j].y);
+                        grad.addColorStop(0, `rgba(99,102,241,${0.54 + 0.45 * beat})`);
+                        grad.addColorStop(1, `rgba(236,72,153,${0.18 + 0.52 * beat})`);
+                        neuralCtx.strokeStyle = grad;
+                        neuralCtx.lineWidth = 7.5 + 18 * beat;
+                        neuralCtx.shadowColor = "#ec4899";
+                        neuralCtx.shadowBlur = 28 + 76 * beat;
+                        neuralCtx.stroke();
+                        neuralCtx.shadowBlur = 0;
+                    }
+                }
             }
+            // Draw large glowing energy pulse behind orb (25–35% larger than orb)
+            neuralCtx.save();
+            const energyPulse = 0.23 + 0.14 * beat;
+            const glowRadius = Math.min(w, h) * (1.15 + 0.30 * beat); // scale based on beat
+            const x = w / 2, y = h / 2;
+            const grad = neuralCtx.createRadialGradient(
+                x, y, Math.min(w, h) * 0.15,
+                x, y, glowRadius
+            );
+            grad.addColorStop(0, `rgba(236,72,153,${0.42 + 0.17 * beat})`);
+            grad.addColorStop(0.38, `rgba(139,92,246,${0.18 + 0.13 * beat})`);
+            grad.addColorStop(0.82, `rgba(99,102,241,${0.08 + 0.11 * beat})`);
+            grad.addColorStop(1, `rgba(32,1,39,0.01)`);
+            neuralCtx.globalAlpha = energyPulse;
+            neuralCtx.beginPath();
+            neuralCtx.arc(x, y, glowRadius, 0, Math.PI * 2);
+            neuralCtx.fillStyle = grad;
+            neuralCtx.shadowColor = "#f472b6";
+            neuralCtx.shadowBlur = 850 + 420 * beat; // large blur for soft glow
+            neuralCtx.fill();
+            neuralCtx.restore();
+            requestAnimationFrame(drawNeuralActivity);
         }
+        requestAnimationFrame(drawNeuralActivity);
     </script>
 </body>
 </html>