Add 1 files

index.html

@@ -4,70 +4,168 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Microbiome Explorer | Award-Winning Holistic Search Engine</title>
+    <!-- Improved compatibility with older browsers -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- Preload critical resources -->
+    <link rel="preload" href="https://cdn.tailwindcss.com" as="script">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style">
+    <!-- Fallback fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Favicon for better compatibility -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧫</text></svg>">
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Improved font stack with system fonts as fallback */
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+        
+        /* Microbiome gradient with fallback */
         .microbiome-gradient {
-            background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
+            background-color: #005bea; /* Fallback */
+            background-image: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
         }
+        
+        /* Cell pattern with better browser support */
         .cell-pattern {
             background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
             background-size: 20px 20px;
+            background-repeat: repeat;
         }
+        
+        /* Glow effect with fallback */
         .glow-effect {
             box-shadow: 0 0 15px rgba(0, 198, 251, 0.5);
         }
+        
+        /* Animation with proper prefixes */
         .dna-animation {
+            -webkit-animation: dnaFloat 8s ease-in-out infinite;
             animation: dnaFloat 8s ease-in-out infinite;
         }
+        
+        @-webkit-keyframes dnaFloat {
+            0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
+            25% { -webkit-transform: translateY(-10px) rotate(2deg); transform: translateY(-10px) rotate(2deg); }
+            50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
+            75% { -webkit-transform: translateY(10px) rotate(-2deg); transform: translateY(10px) rotate(-2deg); }
+        }
+        
         @keyframes dnaFloat {
-            0%, 100% { transform: translateY(0) rotate(0deg); }
-            25% { transform: translateY(-10px) rotate(2deg); }
-            50% { transform: translateY(0) rotate(0deg); }
-            75% { transform: translateY(10px) rotate(-2deg); }
+            0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
+            25% { -webkit-transform: translateY(-10px) rotate(2deg); transform: translateY(-10px) rotate(2deg); }
+            50% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
+            75% { -webkit-transform: translateY(10px) rotate(-2deg); transform: translateY(10px) rotate(-2deg); }
         }
+        
+        /* Search focus with proper prefixes */
         .search-focus {
+            -webkit-transition: all 0.3s ease;
             transition: all 0.3s ease;
         }
+        
         .search-focus:focus {
+            -webkit-transform: scale(1.02);
             transform: scale(1.02);
             box-shadow: 0 5px 15px rgba(0, 91, 234, 0.2);
         }
+        
+        /* Microbe hover with better compatibility */
         .microbe-hover {
+            -webkit-transition: all 0.3s ease;
             transition: all 0.3s ease;
         }
+        
         .microbe-hover:hover {
+            -webkit-transform: scale(1.1) rotate(5deg);
             transform: scale(1.1) rotate(5deg);
         }
+        
+        /* Typewriter effect with better compatibility */
         .typewriter {
             overflow: hidden;
             border-right: .15em solid #00c6fb;
             white-space: nowrap;
+            -webkit-animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
             animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
         }
+        
+        @-webkit-keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
         @keyframes typing {
             from { width: 0 }
             to { width: 100% }
         }
+        
+        @-webkit-keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #00c6fb; }
+        }
+        
         @keyframes blink-caret {
             from, to { border-color: transparent }
             50% { border-color: #00c6fb; }
         }
+        
+        /* Improved button focus states for accessibility */
+        button:focus, a:focus {
+            outline: 2px solid #00c6fb;
+            outline-offset: 2px;
+        }
+        
+        /* Better mobile responsiveness */
+        @media (max-width: 768px) {
+            .hero-content {
+                padding-top: 2rem;
+                padding-bottom: 2rem;
+            }
+            
+            .search-container {
+                margin-top: -3rem;
+            }
+            
+            .feature-cards {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        /* Print styles */
+        @media print {
+            .no-print {
+                display: none !important;
+            }
+            
+            body {
+                background: white !important;
+                color: black !important;
+                font-size: 12pt;
+            }
+            
+            a::after {
+                content: " (" attr(href) ")";
+                font-size: 0.8em;
+                font-weight: normal;
+            }
+        }
     </style>
 </head>
-<body class="bg-gray-50 font-sans">
+<body class="bg-gray-50">
     <!-- Award Badge -->
-    <div class="absolute top-4 right-4 z-50">
+    <div class="absolute top-4 right-4 z-50 no-print">
         <div class="relative">
             <div class="bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full font-bold text-sm transform rotate-12 shadow-lg">
-                <i class="fas fa-trophy mr-1"></i> 2024 BioTech Innovation Award
+                <i class="fas fa-trophy mr-1" aria-hidden="true"></i> 2024 BioTech Innovation Award
             </div>
             <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-yellow-400"></div>
         </div>
     </div>
 
-    <!-- Hero Section -->
-    <header class="microbiome-gradient text-white pt-24 pb-32 relative overflow-hidden">
+    <!-- Hero Section with improved semantics -->
+    <header class="microbiome-gradient text-white pt-24 pb-32 relative overflow-hidden hero-content">
         <div class="cell-pattern absolute inset-0 opacity-10"></div>
         <div class="container mx-auto px-6 relative z-10">
             <div class="flex flex-col lg:flex-row items-center">
@@ -79,30 +177,30 @@
                         <div class="text-sm opacity-90">Patent Pending Technology</div>
                     </div>
                     <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
-                        Explore the <span class="typewriter inline-block">Human Microbiome</span>
+                        Explore the <span class="typewriter inline-block" aria-live="polite">Human Microbiome</span>
                     </h1>
                     <p class="text-xl opacity-90 mb-8 max-w-lg">
                         The world's first holistic search engine for microbiome research, connecting symptoms, treatments, and microbial relationships.
                     </p>
                     <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
-                        <button class="bg-white text-blue-700 px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105 flex items-center justify-center">
-                            <i class="fas fa-flask mr-2"></i> Start Research
+                        <button class="bg-white text-blue-700 px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all transform hover:scale-105 flex items-center justify-center focus:outline-none">
+                            <i class="fas fa-flask mr-2" aria-hidden="true"></i> Start Research
                         </button>
-                        <button class="border-2 border-white border-opacity-50 text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 flex items-center justify-center">
-                            <i class="fas fa-play-circle mr-2"></i> Watch Demo
+                        <button class="border-2 border-white border-opacity-50 text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 flex items-center justify-center focus:outline-none">
+                            <i class="fas fa-play-circle mr-2" aria-hidden="true"></i> Watch Demo
                         </button>
                     </div>
                 </div>
                 <div class="lg:w-1/2 flex justify-center">
                     <div class="relative">
-                        <img src="https://www.svgrepo.com/show/530537/dna.svg" alt="DNA Strand" class="w-64 h-64 dna-animation">
+                        <img src="https://www.svgrepo.com/show/530537/dna.svg" alt="DNA Strand" class="w-64 h-64 dna-animation" loading="lazy">
                         <div class="absolute -top-10 -left-10">
-                            <div class="bg-white bg-opacity-20 rounded-full w-32 h-32 flex items-center justify-center microbe-hover">
+                            <div class="bg-white bg-opacity-20 rounded-full w-32 h-32 flex items-center justify-center microbe-hover" aria-hidden="true">
                                 <i class="fas fa-bacterium text-4xl text-white"></i>
                             </div>
                         </div>
                         <div class="absolute -bottom-5 -right-5">
-                            <div class="bg-white bg-opacity-20 rounded-full w-24 h-24 flex items-center justify-center microbe-hover">
+                            <div class="bg-white bg-opacity-20 rounded-full w-24 h-24 flex items-center justify-center microbe-hover" aria-hidden="true">
                                 <i class="fas fa-virus text-3xl text-white"></i>
                             </div>
                         </div>
@@ -112,44 +210,45 @@
         </div>
     </header>
 
-    <!-- Search Interface -->
-    <section class="container mx-auto px-6 -mt-16 relative z-20 mb-24">
+    <!-- Search Interface with better accessibility -->
+    <section class="container mx-auto px-6 -mt-16 relative z-20 mb-24 search-container">
         <div class="bg-white rounded-xl shadow-2xl p-6">
             <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                 <div class="flex-1 relative">
+                    <label for="searchInput" class="sr-only">Search symptoms, microbes, or treatments</label>
                     <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-blue-500">
-                        <i class="fas fa-search"></i>
+                        <i class="fas fa-search" aria-hidden="true"></i>
                     </div>
-                    <input type="text" placeholder="Search symptoms, microbes, or treatments..." 
+                    <input type="text" id="searchInput" placeholder="Search symptoms, microbes, or treatments..." 
                            class="search-focus w-full pl-12 pr-4 py-4 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-400">
                 </div>
-                <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-4 rounded-lg font-semibold transition-all flex items-center justify-center">
-                    <i class="fas fa-dna mr-2"></i> Analyze
+                <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-4 rounded-lg font-semibold transition-all flex items-center justify-center focus:outline-none">
+                    <i class="fas fa-dna mr-2" aria-hidden="true"></i> Analyze
                 </button>
             </div>
             
             <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 text-center cursor-pointer hover:bg-blue-100 transition-colors">
-                    <div class="text-blue-600 mb-1"><i class="fas fa-heartbeat"></i></div>
+                <button class="bg-blue-50 border border-blue-100 rounded-lg p-3 text-center cursor-pointer hover:bg-blue-100 transition-colors focus:outline-none">
+                    <div class="text-blue-600 mb-1"><i class="fas fa-heartbeat" aria-hidden="true"></i></div>
                     <div class="text-sm font-medium text-blue-800">Gut Health</div>
-                </div>
-                <div class="bg-purple-50 border border-purple-100 rounded-lg p-3 text-center cursor-pointer hover:bg-purple-100 transition-colors">
-                    <div class="text-purple-600 mb-1"><i class="fas fa-brain"></i></div>
+                </button>
+                <button class="bg-purple-50 border border-purple-100 rounded-lg p-3 text-center cursor-pointer hover:bg-purple-100 transition-colors focus:outline-none">
+                    <div class="text-purple-600 mb-1"><i class="fas fa-brain" aria-hidden="true"></i></div>
                     <div class="text-sm font-medium text-purple-800">Mental Health</div>
-                </div>
-                <div class="bg-green-50 border border-green-100 rounded-lg p-3 text-center cursor-pointer hover:bg-green-100 transition-colors">
-                    <div class="text-green-600 mb-1"><i class="fas fa-weight"></i></div>
+                </button>
+                <button class="bg-green-50 border border-green-100 rounded-lg p-3 text-center cursor-pointer hover:bg-green-100 transition-colors focus:outline-none">
+                    <div class="text-green-600 mb-1"><i class="fas fa-weight" aria-hidden="true"></i></div>
                     <div class="text-sm font-medium text-green-800">Metabolism</div>
-                </div>
-                <div class="bg-amber-50 border border-amber-100 rounded-lg p-3 text-center cursor-pointer hover:bg-amber-100 transition-colors">
-                    <div class="text-amber-600 mb-1"><i class="fas fa-allergies"></i></div>
+                </button>
+                <button class="bg-amber-50 border border-amber-100 rounded-lg p-3 text-center cursor-pointer hover:bg-amber-100 transition-colors focus:outline-none">
+                    <div class="text-amber-600 mb-1"><i class="fas fa-allergies" aria-hidden="true"></i></div>
                     <div class="text-sm font-medium text-amber-800">Immunity</div>
-                </div>
+                </button>
             </div>
         </div>
     </section>
 
-    <!-- Unique Value Proposition -->
+    <!-- Unique Value Proposition with better semantics -->
     <section class="container mx-auto px-6 mb-24">
         <div class="text-center mb-16">
             <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Why Our Technology is Revolutionary</h2>
@@ -158,38 +257,38 @@
             </p>
         </div>
         
-        <div class="grid md:grid-cols-3 gap-8">
-            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
+        <div class="grid md:grid-cols-3 gap-8 feature-cards">
+            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-project-diagram text-blue-600 text-2xl"></i>
+                    <i class="fas fa-project-diagram text-blue-600 text-2xl" aria-hidden="true"></i>
                 </div>
                 <h3 class="text-xl font-bold text-center mb-3">Holistic Connections</h3>
                 <p class="text-gray-600 text-center">
                     Our AI maps complex relationships between 10,000+ microbial species and human health conditions.
                 </p>
-            </div>
-            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow glow-effect">
+            </article>
+            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow glow-effect">
                 <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-chart-network text-purple-600 text-2xl"></i>
+                    <i class="fas fa-chart-network text-purple-600 text-2xl" aria-hidden="true"></i>
                 </div>
                 <h3 class="text-xl font-bold text-center mb-3">Predictive Analytics</h3>
                 <p class="text-gray-600 text-center">
                     Anticipate health trends and microbiome changes before symptoms appear with our predictive models.
                 </p>
-            </div>
-            <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
+            </article>
+            <article class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
                 <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
-                    <i class="fas fa-user-md text-green-600 text-2xl"></i>
+                    <i class="fas fa-user-md text-green-600 text-2xl" aria-hidden="true"></i>
                 </div>
                 <h3 class="text-xl font-bold text-center mb-3">Clinical Applications</h3>
                 <p class="text-gray-600 text-center">
                     Directly applicable to patient care with personalized microbiome intervention recommendations.
                 </p>
-            </div>
+            </article>
         </div>
     </section>
 
-    <!-- Data Visualization -->
+    <!-- Data Visualization with better semantics -->
     <section class="bg-gray-100 py-16 mb-24">
         <div class="container mx-auto px-6">
             <div class="flex flex-col lg:flex-row items-center">
@@ -200,11 +299,11 @@
                         Each node represents a microbial species or health factor - click to discover relationships.
                     </p>
                     <div class="flex space-x-4">
-                        <button class="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-700 transition-colors">
-                            <i class="fas fa-play mr-1"></i> Tutorial
+                        <button class="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-700 transition-colors focus:outline-none">
+                            <i class="fas fa-play mr-1" aria-hidden="true"></i> Tutorial
                         </button>
-                        <button class="border border-blue-600 text-blue-600 px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-50 transition-colors">
-                            <i class="fas fa-download mr-1"></i> Sample Data
+                        <button class="border border-blue-600 text-blue-600 px-6 py-2 rounded-full text-sm font-semibold hover:bg-blue-50 transition-colors focus:outline-none">
+                            <i class="fas fa-download mr-1" aria-hidden="true"></i> Sample Data
                         </button>
                     </div>
                 </div>
@@ -212,14 +311,14 @@
                     <div class="bg-gray-200 rounded-lg overflow-hidden" style="height: 350px;">
                         <div class="flex items-center justify-center h-full">
                             <div class="text-center">
-                                <i class="fas fa-network-wired text-5xl text-gray-400 mb-4"></i>
+                                <i class="fas fa-network-wired text-5xl text-gray-400 mb-4" aria-hidden="true"></i>
                                 <p class="text-gray-600">Interactive microbiome network visualization</p>
                                 <div class="mt-4 flex justify-center space-x-2">
-                                    <div class="w-3 h-3 rounded-full bg-blue-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-purple-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
-                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                                    <div class="w-3 h-3 rounded-full bg-blue-500" aria-hidden="true"></div>
+                                    <div class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true"></div>
+                                    <div class="w-3 h-3 rounded-full bg-purple-500" aria-hidden="true"></div>
+                                    <div class="w-3 h-3 rounded-full bg-yellow-500" aria-hidden="true"></div>
+                                    <div class="w-3 h-3 rounded-full bg-red-500" aria-hidden="true"></div>
                                 </div>
                             </div>
                         </div>
@@ -229,7 +328,7 @@
         </div>
     </section>
 
-    <!-- Testimonials -->
+    <!-- Testimonials with better semantics -->
     <section class="container mx-auto px-6 mb-24">
         <div class="bg-white rounded-xl shadow-lg overflow-hidden">
             <div class="md:flex">
@@ -240,7 +339,7 @@
                     </p>
                     <div class="flex space-x-2">
                         <div class="bg-white bg-opacity-20 rounded-full w-10 h-10 flex items-center justify-center">
-                            <i class="fas fa-quote-left"></i>
+                            <i class="fas fa-quote-left" aria-hidden="true"></i>
                         </div>
                         <div>
                             <div class="font-bold">4.9/5</div>
@@ -250,10 +349,10 @@
                 </div>
                 <div class="md:w-2/3 p-8">
                     <div class="grid md:grid-cols-2 gap-8">
-                        <div>
+                        <blockquote>
                             <div class="flex items-center mb-4">
                                 <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
-                                    <i class="fas fa-user-md text-blue-600"></i>
+                                    <i class="fas fa-user-md text-blue-600" aria-hidden="true"></i>
                                 </div>
                                 <div>
                                     <div class="font-bold">Dr. Sarah Chen</div>
@@ -263,11 +362,11 @@
                             <p class="text-gray-600">
                                 "This platform has revolutionized how we approach microbiome research. The connections it reveals between microbial populations and chronic conditions are game-changing."
                             </p>
-                        </div>
-                        <div>
+                        </blockquote>
+                        <blockquote>
                             <div class="flex items-center mb-4">
                                 <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
-                                    <i class="fas fa-flask text-green-600"></i>
+                                    <i class="fas fa-flask text-green-600" aria-hidden="true"></i>
                                 </div>
                                 <div>
                                     <div class="font-bold">Prof. James Wilson</div>
@@ -277,14 +376,14 @@
                             <p class="text-gray-600">
                                 "The predictive analytics capabilities have helped us identify potential microbiome-based interventions months before traditional methods would."
                             </p>
-                        </div>
+                        </blockquote>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- CTA Section -->
+    <!-- CTA Section with better semantics -->
     <section class="microbiome-gradient text-white py-16 mb-12 rounded-3xl mx-6">
         <div class="container mx-auto px-6 text-center">
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Microbiome Research?</h2>
@@ -292,23 +391,23 @@
                 Join hundreds of researchers and clinicians using our award-winning platform to unlock new discoveries.
             </p>
             <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
-                <button class="bg-white text-blue-700 px-8 py-4 rounded-full font-bold hover:bg-opacity-90 transition-all transform hover:scale-105">
+                <button class="bg-white text-blue-700 px-8 py-4 rounded-full font-bold hover:bg-opacity-90 transition-all transform hover:scale-105 focus:outline-none">
                     Start Free Trial
                 </button>
-                <button class="border-2 border-white border-opacity-50 px-8 py-4 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105">
+                <button class="border-2 border-white border-opacity-50 px-8 py-4 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105 focus:outline-none">
                     Schedule Demo
                 </button>
             </div>
         </div>
     </section>
 
-    <!-- Footer -->
+    <!-- Footer with better semantics -->
     <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-6">
             <div class="grid md:grid-cols-4 gap-8 mb-8">
                 <div>
                     <h3 class="text-xl font-bold mb-4 flex items-center">
-                        <i class="fas fa-dna mr-2"></i> Microbiome Explorer
+                        <i class="fas fa-dna mr-2" aria-hidden="true"></i> Microbiome Explorer
                     </h3>
                     <p class="text-gray-400">
                         The world's most advanced holistic search engine for human microbiome research.
@@ -335,14 +434,14 @@
                 <div>
                     <h4 class="font-bold mb-4">Connect</h4>
                     <div class="flex space-x-4 mb-4">
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors">
-                            <i class="fab fa-twitter"></i>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors focus:outline-none" aria-label="Twitter">
+                            <i class="fab fa-twitter" aria-hidden="true"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
-                            <i class="fab fa-linkedin-in"></i>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors focus:outline-none" aria-label="LinkedIn">
+                            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
                         </a>
-                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors">
-                            <i class="fab fa-github"></i>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 transition-colors focus:outline-none" aria-label="GitHub">
+                            <i class="fab fa-github" aria-hidden="true"></i>
                         </a>
                     </div>
                     <p class="text-gray-400">[email protected]</p>
@@ -355,68 +454,91 @@
     </footer>
 
     <script>
-        // Typewriter effect
-        const phrases = [
-            "Human Microbiome",
-            "Gut-Brain Axis",
-            "Microbial Ecosystems",
-            "Health Connections"
-        ];
-        
-        let currentPhrase = 0;
-        let currentChar = 0;
-        let isDeleting = false;
-        let isEnd = false;
-        
-        function typeWriter() {
-            const typewriterElement = document.querySelector('.typewriter');
-            const currentText = phrases[currentPhrase];
+        // Improved JavaScript with feature detection
+        document.addEventListener('DOMContentLoaded', function() {
+            // Typewriter effect with fallback
+            if (typeof document.querySelector === 'function' && 
+                typeof window.requestAnimationFrame === 'function') {
+                
+                const phrases = [
+                    "Human Microbiome",
+                    "Gut-Brain Axis",
+                    "Microbial Ecosystems",
+                    "Health Connections"
+                ];
+                
+                let currentPhrase = 0;
+                let currentChar = 0;
+                let isDeleting = false;
+                let isEnd = false;
+                
+                function typeWriter() {
+                    const typewriterElement = document.querySelector('.typewriter');
+                    if (!typewriterElement) return;
+                    
+                    const currentText = phrases[currentPhrase];
+                    
+                    if (isDeleting) {
+                        typewriterElement.textContent = currentText.substring(0, currentChar - 1);
+                        currentChar--;
+                    } else {
+                        typewriterElement.textContent = currentText.substring(0, currentChar + 1);
+                        currentChar++;
+                    }
+                    
+                    if (!isDeleting && currentChar === currentText.length) {
+                        isEnd = true;
+                        isDeleting = true;
+                        setTimeout(typeWriter, 2000);
+                    } else if (isDeleting && currentChar === 0) {
+                        isDeleting = false;
+                        currentPhrase = (currentPhrase + 1) % phrases.length;
+                        setTimeout(typeWriter, 500);
+                    } else {
+                        const speed = isDeleting ? 100 : 150;
+                        setTimeout(typeWriter, speed);
+                    }
+                }
+                
+                // Start the typewriter effect
+                setTimeout(typeWriter, 1000);
+            }
             
-            if (isDeleting) {
-                typewriterElement.textContent = currentText.substring(0, currentChar - 1);
-                currentChar--;
-            } else {
-                typewriterElement.textContent = currentText.substring(0, currentChar + 1);
-                currentChar++;
+            // Improved hover animations with feature detection
+            if ('ontouchstart' in window === false) {
+                const microbes = document.querySelectorAll('.microbe-hover');
+                if (microbes.length) {
+                    microbes.forEach(microbe => {
+                        microbe.addEventListener('mouseenter', function() {
+                            this.style.transform = 'scale(1.1) rotate(5deg)';
+                        });
+                        microbe.addEventListener('mouseleave', function() {
+                            this.style.transform = 'scale(1) rotate(0deg)';
+                        });
+                    });
+                }
+                
+                // Search focus effect
+                const searchInput = document.querySelector('.search-focus');
+                if (searchInput) {
+                    searchInput.addEventListener('focus', function() {
+                        this.style.transform = 'scale(1.02)';
+                        this.style.boxShadow = '0 5px 15px rgba(0, 91, 234, 0.2)';
+                    });
+                    searchInput.addEventListener('blur', function() {
+                        this.style.transform = 'scale(1)';
+                        this.style.boxShadow = 'none';
+                    });
+                }
             }
             
-            if (!isDeleting && currentChar === currentText.length) {
-                isEnd = true;
-                isDeleting = true;
-                setTimeout(typeWriter, 2000);
-            } else if (isDeleting && currentChar === 0) {
-                isDeleting = false;
-                currentPhrase = (currentPhrase + 1) % phrases.length;
-                setTimeout(typeWriter, 500);
-            } else {
-                const speed = isDeleting ? 100 : 150;
-                setTimeout(typeWriter, speed);
+            // Load Font Awesome if not already loaded
+            if (typeof FontAwesome === 'undefined') {
+                const faScript = document.createElement('script');
+                faScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js';
+                faScript.async = true;
+                document.head.appendChild(faScript);
             }
-        }
-        
-        // Start the typewriter effect
-        setTimeout(typeWriter, 1000);
-        
-        // Microbe hover animations
-        const microbes = document.querySelectorAll('.microbe-hover');
-        microbes.forEach(microbe => {
-            microbe.addEventListener('mouseenter', function() {
-                this.style.transform = 'scale(1.1) rotate(5deg)';
-            });
-            microbe.addEventListener('mouseleave', function() {
-                this.style.transform = 'scale(1) rotate(0deg)';
-            });
-        });
-        
-        // Search focus effect
-        const searchInput = document.querySelector('.search-focus');
-        searchInput.addEventListener('focus', function() {
-            this.style.transform = 'scale(1.02)';
-            this.style.boxShadow = '0 5px 15px rgba(0, 91, 234, 0.2)';
-        });
-        searchInput.addEventListener('blur', function() {
-            this.style.transform = 'scale(1)';
-            this.style.boxShadow = 'none';
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Neomyst/microbiome-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>