Upd UI

assets/app.js

@@ -1,54 +1,272 @@
-// Theme toggle
+// Enhanced theme toggle with smooth transitions
 const toggle = document.getElementById('themeToggle');
 const root = document.documentElement;
-const saved = localStorage.getItem('theme');
-if (saved === 'light') document.documentElement.classList.remove('dark');
-else document.documentElement.classList.add('dark');
+const saved = localStorage.getItem('theme') || 'dark';
+
+// Apply saved theme
+if (saved === 'light') {
+  document.documentElement.classList.remove('dark');
+} else {
+  document.documentElement.classList.add('dark');
+}
+
+// Update theme toggle icon
+const updateThemeIcon = () => {
+  const icon = toggle?.querySelector('i');
+  if (icon) {
+    icon.setAttribute('data-lucide', document.documentElement.classList.contains('dark') ? 'sun-medium' : 'moon');
+    if (window.lucide) {
+      lucide.createIcons();
+    }
+  }
+};
+
+// Initialize theme icon
+updateThemeIcon();
 
 toggle?.addEventListener('click', () => {
   const isDark = document.documentElement.classList.toggle('dark');
   localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  updateThemeIcon();
+  
+  // Add smooth transition effect
+  document.body.style.transition = 'background-color 0.3s ease, color 0.3s ease';
+  setTimeout(() => {
+    document.body.style.transition = '';
+  }, 300);
 });
 
-// Tabs logic
+// Enhanced tabs logic with smooth transitions and ARIA support
 document.querySelectorAll('.tab').forEach(btn => {
   btn.addEventListener('click', () => {
-    document.querySelectorAll('.tab').forEach(b => b.classList.remove('active'));
+    // Remove active class and ARIA attributes from all tabs
+    document.querySelectorAll('.tab').forEach(b => {
+      b.classList.remove('active');
+      b.setAttribute('aria-selected', 'false');
+    });
+    
+    // Add active class and ARIA attributes to clicked tab
     btn.classList.add('active');
+    btn.setAttribute('aria-selected', 'true');
+    
+    // Get target diagram
     const target = btn.getAttribute('data-target');
-    document.querySelectorAll('.diagram').forEach(d => d.classList.remove('visible'));
-    document.querySelector(target)?.classList.add('visible');
+    const targetDiagram = document.querySelector(target);
+    
+    if (targetDiagram) {
+      // Hide all diagrams with fade out and update ARIA
+      document.querySelectorAll('.diagram').forEach(d => {
+        d.style.opacity = '0';
+        d.style.transform = 'translateY(20px)';
+        d.setAttribute('aria-hidden', 'true');
+        setTimeout(() => {
+          d.classList.remove('visible');
+        }, 150);
+      });
+      
+      // Show target diagram with fade in and update ARIA
+      setTimeout(() => {
+        targetDiagram.classList.add('visible');
+        targetDiagram.style.opacity = '1';
+        targetDiagram.style.transform = 'translateY(0)';
+        targetDiagram.setAttribute('aria-hidden', 'false');
+      }, 150);
+    }
   });
 });
 
-// Metric counters
+// Initialize first tab as active
+document.addEventListener('DOMContentLoaded', () => {
+  const firstTab = document.querySelector('.tab.active');
+  const firstDiagram = document.querySelector('.diagram.visible');
+  if (firstTab && firstDiagram) {
+    firstDiagram.style.opacity = '1';
+    firstDiagram.style.transform = 'translateY(0)';
+  }
+});
+
+// Enhanced metric counters with better performance
 const counters = document.querySelectorAll('.metric-value');
 const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
-const animateCount = (el, to, duration=1200) => {
+const easeOutQuart = t => 1 - Math.pow(1 - t, 4);
+
+const animateCount = (el, to, duration = 1200) => {
   const start = performance.now();
   const from = 0;
+  const isLargeNumber = to > 1000;
+  const easing = isLargeNumber ? easeOutQuart : easeOutCubic;
+  
   const step = (now) => {
     const p = Math.min(1, (now - start) / duration);
-    const v = Math.floor(from + (to - from) * easeOutCubic(p));
-    el.textContent = v.toLocaleString();
-    if (p < 1) requestAnimationFrame(step);
+    const v = Math.floor(from + (to - from) * easing(p));
+    
+    // Format number with appropriate separators
+    if (to >= 1000000) {
+      el.textContent = (v / 1000000).toFixed(1) + 'M';
+    } else if (to >= 1000) {
+      el.textContent = (v / 1000).toFixed(1) + 'K';
+    } else {
+      el.textContent = v.toLocaleString();
+    }
+    
+    if (p < 1) {
+      requestAnimationFrame(step);
+    } else {
+      // Ensure final value is exact
+      if (to >= 1000000) {
+        el.textContent = (to / 1000000).toFixed(1) + 'M';
+      } else if (to >= 1000) {
+        el.textContent = (to / 1000).toFixed(1) + 'K';
+      } else {
+        el.textContent = to.toLocaleString();
+      }
+    }
   };
   requestAnimationFrame(step);
 };
+
+// Enhanced intersection observer with better performance
 const observer = new IntersectionObserver(entries => {
   entries.forEach(e => {
     if (e.isIntersecting) {
       const el = e.target;
-      animateCount(el, parseInt(el.dataset.count, 10) || 0);
+      const count = parseInt(el.dataset.count, 10) || 0;
+      
+      // Add loading state
+      el.classList.add('loading');
+      
+      // Animate with slight delay for better visual effect
+      setTimeout(() => {
+        animateCount(el, count);
+        el.classList.remove('loading');
+      }, 200);
+      
       observer.unobserve(el);
     }
   });
-}, { threshold: 0.4 });
+}, { 
+  threshold: 0.3,
+  rootMargin: '0px 0px -50px 0px'
+});
+
+// Observe counters
 counters.forEach(c => observer.observe(c));
 
-// VanillaTilt init
-if (window.VanillaTilt) {
-  document.querySelectorAll('[data-tilt]').forEach(el => {
-    VanillaTilt.init(el, { max: 6, speed: 400, glare: true, 'max-glare': 0.1 });
+// Enhanced VanillaTilt initialization with error handling
+const initTilt = () => {
+  if (window.VanillaTilt) {
+    try {
+      document.querySelectorAll('[data-tilt]').forEach(el => {
+        VanillaTilt.init(el, { 
+          max: 6, 
+          speed: 400, 
+          glare: true, 
+          'max-glare': 0.1,
+          scale: 1.02,
+          gyroscope: false
+        });
+      });
+    } catch (error) {
+      console.warn('VanillaTilt initialization failed:', error);
+    }
+  }
+};
+
+// Initialize tilt effects
+initTilt();
+
+// Smooth scrolling for navigation links
+document.querySelectorAll('a[href^="#"]').forEach(link => {
+  link.addEventListener('click', (e) => {
+    e.preventDefault();
+    const targetId = link.getAttribute('href');
+    const targetElement = document.querySelector(targetId);
+    
+    if (targetElement) {
+      const headerHeight = document.querySelector('header')?.offsetHeight || 0;
+      const targetPosition = targetElement.offsetTop - headerHeight - 20;
+      
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+      });
+    }
+  });
+});
+
+// Enhanced error handling for external resources
+const handleResourceError = (resource, fallback) => {
+  resource.addEventListener('error', () => {
+    console.warn(`Failed to load resource, using fallback`);
+    if (fallback) {
+      resource.src = fallback;
+    }
   });
-}
+};
+
+// Handle external script loading errors
+window.addEventListener('error', (e) => {
+  if (e.target.tagName === 'SCRIPT' && e.target.src) {
+    console.warn(`Script failed to load: ${e.target.src}`);
+  }
+});
+
+// Performance monitoring
+const logPerformance = () => {
+  if ('performance' in window) {
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        const perfData = performance.getEntriesByType('navigation')[0];
+        console.log(`Page load time: ${perfData.loadEventEnd - perfData.loadEventStart}ms`);
+      }, 0);
+    });
+  }
+};
+
+// Initialize performance monitoring
+logPerformance();
+
+// Add keyboard navigation support
+document.addEventListener('keydown', (e) => {
+  // Tab navigation for architecture tabs
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+    const activeTab = document.querySelector('.tab.active');
+    if (activeTab) {
+      const tabs = Array.from(document.querySelectorAll('.tab'));
+      const currentIndex = tabs.indexOf(activeTab);
+      let nextIndex;
+      
+      if (e.key === 'ArrowLeft') {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+      } else {
+        nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+      }
+      
+      tabs[nextIndex].click();
+      tabs[nextIndex].focus();
+    }
+  }
+});
+
+// Add loading states for dynamic content
+const addLoadingState = (element, duration = 1000) => {
+  element.classList.add('loading');
+  setTimeout(() => {
+    element.classList.remove('loading');
+  }, duration);
+};
+
+// Initialize all interactive elements
+document.addEventListener('DOMContentLoaded', () => {
+  // Add loading states to cards that might load content dynamically
+  document.querySelectorAll('.card').forEach(card => {
+    card.addEventListener('mouseenter', () => {
+      addLoadingState(card, 500);
+    });
+  });
+  
+  // Initialize tooltips for chips
+  document.querySelectorAll('.chip').forEach(chip => {
+    chip.setAttribute('title', chip.textContent);
+  });
+});

assets/styles.css

@@ -1,7 +1,18 @@
 /* Custom styles and utilities beyond Tailwind */
-:root { --ring: 0 0% 100%; }
-.link { color: rgb(165 180 252); }
-.link:hover { text-decoration: underline; }
+:root { 
+  --ring: 0 0% 100%;
+  --shadow-glow: 0 0 20px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.2);
+}
+
+/* Base link styles */
+.link { 
+  color: rgb(165 180 252); 
+  transition: all 0.2s ease;
+}
+.link:hover { 
+  text-decoration: underline; 
+  color: rgb(129 140 248);
+}
 .btn-primary {
   @apply inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-semibold shadow-glow transition;
 }
@@ -47,9 +58,474 @@ pre.mermaid { @apply rounded-2xl bg-slate-900/70 border border-white/10 p-4 over
 .metric-label { @apply text-slate-400 mt-1; }
 .list { @apply list-disc pl-5 space-y-1 text-slate-300; }
 .avatar { @apply rounded-2xl bg-slate-800 border border-white/10 p-6 text-center font-semibold; }
-.shadow-glow { box-shadow: 0 10px 40px rgba(99,102,241,0.2); }
-.animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }
+/* Enhanced shadow and animation utilities */
+.shadow-glow { 
+  box-shadow: var(--shadow-glow);
+  transition: box-shadow 0.3s ease;
+}
+.shadow-glow:hover {
+  box-shadow: 0 0 30px rgba(99,102,241,0.4), 0 0 60px rgba(99,102,241,0.3);
+}
+
+.animate-pulse-slow { 
+  animation: pulse-slow 8s ease-in-out infinite; 
+}
+
 @keyframes pulse-slow {
   0%, 100% { transform: scale(1); opacity: .7; }
   50% { transform: scale(1.05); opacity: 1; }
 }
+
+/* Additional animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.6s ease-out;
+}
+
+/* Enhanced button states */
+.btn-primary:active {
+  transform: translateY(1px);
+  box-shadow: 0 5px 15px rgba(99,102,241,0.3);
+}
+
+.btn-secondary:active {
+  transform: translateY(1px);
+}
+
+.btn-ghost:active {
+  transform: translateY(1px);
+}
+
+/* Enhanced card interactions */
+.card {
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+}
+
+.card.glass:hover {
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(20px);
+}
+
+/* Enhanced feature cards */
+.feature {
+  transition: all 0.3s ease;
+}
+
+.feature:hover {
+  transform: translateY(-4px);
+  background: rgba(15, 23, 42, 0.8);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.feature-icon {
+  transition: all 0.3s ease;
+}
+
+.feature:hover .feature-icon {
+  color: rgb(99, 102, 241);
+  transform: scale(1.1);
+}
+
+/* Enhanced chip interactions */
+.chip {
+  transition: all 0.2s ease;
+}
+
+.chip:hover {
+  background: rgba(99, 102, 241, 0.1);
+  border-color: rgba(99, 102, 241, 0.3);
+  color: rgb(129, 140, 248);
+  transform: translateY(-1px);
+}
+
+/* Enhanced tab interactions */
+.tab {
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.tab::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.tab:hover::before {
+  left: 100%;
+}
+
+.tab:hover {
+  transform: translateY(-1px);
+}
+
+.tab.active {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.1));
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
+}
+
+/* Enhanced diagram styling */
+pre.mermaid {
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+pre.mermaid:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+/* Enhanced metric cards */
+.metric {
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.metric::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgb(99, 102, 241), transparent);
+  transform: translateX(-100%);
+  transition: transform 0.6s ease;
+}
+
+.metric:hover::before {
+  transform: translateX(100%);
+}
+
+.metric:hover {
+  transform: translateY(-2px);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.metric-value {
+  transition: all 0.3s ease;
+}
+
+.metric:hover .metric-value {
+  color: rgb(129, 140, 248);
+  transform: scale(1.05);
+}
+
+/* Enhanced avatar styling */
+.avatar {
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, transparent, rgba(99, 102, 241, 0.1), transparent);
+  transform: translateX(-100%) translateY(-100%);
+  transition: transform 0.6s ease;
+}
+
+.avatar:hover::before {
+  transform: translateX(100%) translateY(100%);
+}
+
+.avatar:hover {
+  transform: translateY(-2px);
+  border-color: rgba(99, 102, 241, 0.3);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+/* Enhanced responsive improvements */
+@media (max-width: 1024px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  .section {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+  
+  .section-header h2 {
+    font-size: 2.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .section-header h2 {
+    font-size: 2rem;
+    line-height: 1.2;
+  }
+  
+  .section-header p {
+    font-size: 0.9rem;
+  }
+  
+  .card-body {
+    padding: 1rem;
+  }
+  
+  .feature {
+    padding: 1rem;
+  }
+  
+  .metric-value {
+    font-size: 2rem;
+  }
+  
+  .tabs {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .tab {
+    text-align: center;
+    padding: 0.75rem 1rem;
+  }
+  
+  /* Hero section mobile improvements */
+  .hero h1 {
+    font-size: 2.5rem;
+    line-height: 1.1;
+  }
+  
+  .hero p {
+    font-size: 1rem;
+  }
+  
+  /* Button improvements for mobile */
+  .btn-primary,
+  .btn-secondary,
+  .btn-ghost {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+  }
+  
+  /* Chip improvements for mobile */
+  .chip {
+    padding: 0.5rem 1rem;
+    font-size: 0.8rem;
+  }
+  
+  /* Diagram improvements for mobile */
+  pre.mermaid {
+    font-size: 0.8rem;
+    padding: 1rem;
+    overflow-x: auto;
+  }
+  
+  /* Metric cards mobile layout */
+  .metric {
+    padding: 1rem;
+  }
+  
+  .metric-value {
+    font-size: 1.75rem;
+  }
+  
+  /* Avatar improvements for mobile */
+  .avatar {
+    padding: 1rem;
+    font-size: 0.9rem;
+  }
+  
+  /* Navigation improvements */
+  nav {
+    display: none;
+  }
+  
+  /* Header mobile layout */
+  header .flex {
+    gap: 1rem;
+  }
+  
+  /* Feature grid mobile */
+  .grid.md\\:grid-cols-3 {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .grid.md\\:grid-cols-2 {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .grid.lg\\:grid-cols-2 {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .grid.lg\\:grid-cols-3 {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .grid.md\\:grid-cols-5 {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  
+  .section {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+  
+  .section-header h2 {
+    font-size: 1.75rem;
+  }
+  
+  .hero h1 {
+    font-size: 2rem;
+  }
+  
+  .hero p {
+    font-size: 0.9rem;
+  }
+  
+  .btn-primary,
+  .btn-secondary,
+  .btn-ghost {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.85rem;
+  }
+  
+  .chip {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+  }
+  
+  .metric-value {
+    font-size: 1.5rem;
+  }
+  
+  .avatar {
+    padding: 0.75rem;
+    font-size: 0.8rem;
+  }
+  
+  .grid.md\\:grid-cols-5 {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+  
+  /* Stack hero content vertically on very small screens */
+  .hero .grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  
+  .hero .grid > div:first-child {
+    order: 2;
+  }
+  
+  .hero .grid > div:last-child {
+    order: 1;
+  }
+}
+
+/* Print styles */
+@media print {
+  .btn-primary,
+  .btn-secondary,
+  .btn-ghost,
+  .btn-icon {
+    background: none !important;
+    color: black !important;
+    border: 1px solid black !important;
+  }
+  
+  .card,
+  .feature {
+    border: 1px solid #ccc !important;
+    background: white !important;
+  }
+  
+  .shadow-glow {
+    box-shadow: none !important;
+  }
+  
+  .animate-pulse-slow {
+    animation: none !important;
+  }
+}
+
+/* Focus states for accessibility */
+.btn-primary:focus,
+.btn-secondary:focus,
+.btn-ghost:focus,
+.tab:focus,
+.chip:focus {
+  outline: 2px solid rgb(99, 102, 241);
+  outline-offset: 2px;
+}
+
+/* Loading states */
+.loading {
+  position: relative;
+  overflow: hidden;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}

index.html

@@ -47,67 +47,67 @@
   </div>
 
   <!-- Navbar -->
-  <header class="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-white/10">
+  <header class="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-white/10" role="banner">
     <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
       <div class="flex items-center gap-3">
-        <img src="assets/logo.svg" class="w-9 h-9" alt="MedAI logo" />
+        <img src="assets/logo.svg" class="w-9 h-9" alt="MedAI logo" width="36" height="36" />
         <span class="font-extrabold tracking-tight text-xl">MedAI</span>
-        <span class="text-slate-400 hidden sm:inline">• COS30018</span>
+        <span class="text-slate-400 hidden sm:inline" aria-label="Course code">• COS30018</span>
       </div>
-      <nav class="hidden md:flex items-center gap-6 text-sm">
-        <a href="#overview" class="link">Overview</a>
-        <a href="#capabilities" class="link">Capabilities</a>
-        <a href="#architecture" class="link">Architecture</a>
-        <a href="#training" class="link">Training</a>
-        <a href="#evaluation" class="link">Evaluation</a>
-        <a href="#team" class="link">Team</a>
+      <nav class="hidden md:flex items-center gap-6 text-sm" role="navigation" aria-label="Main navigation">
+        <a href="#overview" class="link" aria-label="Go to Overview section">Overview</a>
+        <a href="#capabilities" class="link" aria-label="Go to Capabilities section">Capabilities</a>
+        <a href="#architecture" class="link" aria-label="Go to Architecture section">Architecture</a>
+        <a href="#training" class="link" aria-label="Go to Training section">Training</a>
+        <a href="#evaluation" class="link" aria-label="Go to Evaluation section">Evaluation</a>
+        <a href="#team" class="link" aria-label="Go to Team section">Team</a>
       </nav>
       <div class="flex items-center gap-3">
-        <a href="https://huggingface.co/spaces/MedAI-COS30018/MedicalDiagnosisSystem" target="_blank" class="btn-primary">Live App</a>
-        <button id="themeToggle" aria-label="Toggle theme" class="btn-icon">
-          <i data-lucide="sun-medium" class="icon"></i>
+        <a href="https://huggingface.co/spaces/MedAI-COS30018/MedicalDiagnosisSystem" target="_blank" rel="noopener noreferrer" class="btn-primary" aria-label="Open live application in new tab">Live App</a>
+        <button id="themeToggle" aria-label="Toggle between light and dark theme" class="btn-icon" type="button">
+          <i data-lucide="sun-medium" class="icon" aria-hidden="true"></i>
         </button>
       </div>
     </div>
   </header>
 
   <!-- Hero -->
-  <section class="relative">
+  <section class="relative" role="banner" aria-labelledby="hero-title">
     <div class="max-w-7xl mx-auto px-4 py-16 lg:py-24">
       <div class="grid lg:grid-cols-2 gap-12 items-center">
         <div data-aos="fade-right" data-aos-duration="700">
-          <h1 class="text-4xl lg:text-6xl font-extrabold leading-tight">
+          <h1 id="hero-title" class="text-4xl lg:text-6xl font-extrabold leading-tight">
             Multi‑Agent <span class="text-indigo-400">Clinical Reasoning</span> System
           </h1>
           <p class="mt-5 text-slate-300 text-lg max-w-2xl">
             Safety‑first medical assistant coordinating Diagnostics, Pharmacology, and Triage agents via an MCP orchestrator,
             grounded by Agentic RAG over EMR/EHR and PubMed, and rigorously evaluated on MedMCQA and PubMedQA.
           </p>
-          <div class="mt-8 flex flex-wrap gap-3">
-            <a class="btn-secondary" href="https://huggingface.co/spaces/MedAI-COS30018/MedAI_Processing" target="_blank">Data Processing</a>
-            <a class="btn-ghost" href="#architecture">See Architecture</a>
+          <div class="mt-8 flex flex-wrap gap-3" role="group" aria-label="Action buttons">
+            <a class="btn-secondary" href="https://huggingface.co/spaces/MedAI-COS30018/MedAI_Processing" target="_blank" rel="noopener noreferrer" aria-label="Open data processing application">Data Processing</a>
+            <a class="btn-ghost" href="#architecture" aria-label="Scroll to architecture section">See Architecture</a>
           </div>
-          <div class="mt-6 flex items-center gap-6 text-sm text-slate-400">
+          <div class="mt-6 flex items-center gap-6 text-sm text-slate-400" role="contentinfo">
             <span>Unit: COS30018 (Intelligent Systems)</span>
-            <span>•</span>
+            <span aria-hidden="true">•</span>
             <span>School: Swinburne University of Technology</span>
           </div>
         </div>
         <div class="relative" data-aos="fade-left" data-aos-duration="700">
-          <div class="card glass shadow-glow">
+          <div class="card glass shadow-glow" role="complementary" aria-labelledby="glance-title">
             <div class="p-6">
-              <h3 class="font-semibold text-slate-200 mb-3">At a Glance</h3>
-              <ul class="space-y-2 text-slate-300">
+              <h3 id="glance-title" class="font-semibold text-slate-200 mb-3">At a Glance</h3>
+              <ul class="space-y-2 text-slate-300" role="list">
                 <li>• 500k+ curated & synthetic cases</li>
                 <li>• LoRA/QLoRA, Knowledge Distillation, GRPO</li>
                 <li>• Agentic RAG (Node & Graph) with citations</li>
                 <li>• Safety rails, HIL, uncertainty flags</li>
                 <li>• HPC‑reproducible training</li>
               </ul>
-              <div class="mt-6 flex gap-3">
-                <a class="chip" href="https://huggingface.co/MedAI-COS30018" target="_blank">HF Org</a>
-                <a class="chip" href="https://huggingface.co/collections/MedAI-COS30018/finetuning-68bbe0b045db4ed5aac5e9a2" target="_blank">Finetune Datasets</a>
-                <a class="chip" href="https://huggingface.co/collections/MedAI-COS30018/rag-68bbe244bfa8ce6132fd5242" target="_blank">RAG Datasets</a>
+              <div class="mt-6 flex gap-3" role="group" aria-label="External resources">
+                <a class="chip" href="https://huggingface.co/MedAI-COS30018" target="_blank" rel="noopener noreferrer" aria-label="Visit Hugging Face organization">HF Org</a>
+                <a class="chip" href="https://huggingface.co/collections/MedAI-COS30018/finetuning-68bbe0b045db4ed5aac5e9a2" target="_blank" rel="noopener noreferrer" aria-label="View fine-tuning datasets">Finetune Datasets</a>
+                <a class="chip" href="https://huggingface.co/collections/MedAI-COS30018/rag-68bbe244bfa8ce6132fd5242" target="_blank" rel="noopener noreferrer" aria-label="View RAG datasets">RAG Datasets</a>
               </div>
             </div>
             <div class="border-t border-white/10 p-4 text-xs text-slate-400">
@@ -195,79 +195,79 @@
   </section>
 
   <!-- Architecture -->
-  <section id="architecture" class="section">
+  <section id="architecture" class="section" aria-labelledby="architecture-title">
     <div class="container">
       <div class="section-header" data-aos="fade-up">
-        <h2>Architecture</h2>
+        <h2 id="architecture-title">Architecture</h2>
         <p>Click tabs to switch between layers.</p>
       </div>
       <div class="tabs mb-6" role="tablist" aria-label="Architecture layers">
-        <button class="tab active" data-target="#arch-l1">L1 System</button>
-        <button class="tab" data-target="#arch-l2">L2 RAG Internals</button>
-        <button class="tab" data-target="#arch-l3">L3 Single Turn</button>
+        <button class="tab active" data-target="#arch-l1" role="tab" aria-selected="true" aria-controls="arch-l1" id="tab-l1">L1 System</button>
+        <button class="tab" data-target="#arch-l2" role="tab" aria-selected="false" aria-controls="arch-l2" id="tab-l2">L2 RAG Internals</button>
+        <button class="tab" data-target="#arch-l3" role="tab" aria-selected="false" aria-controls="arch-l3" id="tab-l3">L3 Single Turn</button>
       </div>
 
-      <div id="arch-l1" class="diagram visible">
-<pre class="mermaid">
-flowchart LR
-  U([Clinician UI / EMR]) -->|symptoms, meds, files| MCP[MCP Orchestrator<br/>FastAPI routing, planning, safety, tracing]
-  MCP --> DX[Diagnostics Agent]
-  MCP --> RX[Pharmacology Agent]
-  MCP --> TR[Triage Agent]
-  subgraph RAG[Agentic RAG]
-    QR[Query Router] --> RET[Retriever]
-    RET --> SR[Safety Rails]
-  end
-  DX --> RAG
-  RX --> RAG
-  TR --> RAG
-  SR --> KB[(Med KB / PubMed)]
-  SR --> EMR[(EMR/EHR summaries)]
-  DX --> FUSE[Evidence Fusion + Self-Consistency]
-  RX --> FUSE
-  TR --> FUSE
-  FUSE --> OUT{{Final Report<br/>summary, plan, citations, cautions}}
-  OUT --> QA[Evaluation & QA<br/>MedMCQA, PubMedQA, similarity audits]
-</pre>
+      <div id="arch-l1" class="diagram visible" role="tabpanel" aria-labelledby="tab-l1" aria-hidden="false">
+        <pre class="mermaid" aria-label="L1 System Architecture Diagram">
+        flowchart LR
+          U([Clinician UI / EMR]) -->|symptoms, meds, files| MCP[MCP Orchestrator<br/>FastAPI routing, planning, safety, tracing]
+          MCP --> DX[Diagnostics Agent]
+          MCP --> RX[Pharmacology Agent]
+          MCP --> TR[Triage Agent]
+          subgraph RAG[Agentic RAG]
+            QR[Query Router] --> RET[Retriever]
+            RET --> SR[Safety Rails]
+          end
+          DX --> RAG
+          RX --> RAG
+          TR --> RAG
+          SR --> KB[(Med KB / PubMed)]
+          SR --> EMR[(EMR/EHR summaries)]
+          DX --> FUSE[Evidence Fusion + Self-Consistency]
+          RX --> FUSE
+          TR --> FUSE
+          FUSE --> OUT{{Final Report<br/>summary, plan, citations, cautions}}
+          OUT --> QA[Evaluation & QA<br/>MedMCQA, PubMedQA, similarity audits]
+        </pre>
       </div>
 
-      <div id="arch-l2" class="diagram">
-<pre class="mermaid">
-flowchart LR
-  subgraph AGENTIC_RAG[Agentic RAG]
-    IN[Inputs<br/>symptoms, vitals, meds, files, LTM] --> QR[Query Router]
-    QR --> RW[Rewriter / Disambiguator]
-    RW --> RET[Retriever (vector + keyword)]
-    RET -->|top-k| EVID[Evidence Bundle]
-    RET -->|filter τ| SR[Safety Rails]
-    SR --> EVID
-    EVID -->|write traces| LTM[(VectorDB / LTM)]
-    LTM --> RET
-    EVID --> KB[(Med KB: PubMed / Guidelines)]
-    EVID --> EMR[(EMR Summaries)]
-  end
-</pre>
+      <div id="arch-l2" class="diagram" role="tabpanel" aria-labelledby="tab-l2" aria-hidden="true">
+        <pre class="mermaid" aria-label="L2 RAG Internals Architecture Diagram">
+        flowchart LR
+          subgraph AGENTIC_RAG["Agentic RAG"]
+            IN["Inputs<br/>symptoms, vitals, meds, files, LTM"] --> QR["Query Router"]
+            QR --> RW["Rewriter / Disambiguator"]
+            RW --> RET["Retriever (vector + keyword)"]
+            RET -->|"top-k"| EVID["Evidence Bundle"]
+            RET -->|"filter τ"| SR["Safety Rails"]
+            SR --> EVID
+            EVID -->|"write traces"| LTM[("VectorDB / LTM")]
+            LTM --> RET
+            EVID --> KB[("Med KB: PubMed / Guidelines")]
+            EVID --> EMR[("EMR Summaries")]
+          end
+        </pre>
       </div>
 
-      <div id="arch-l3" class="diagram">
-<pre class="mermaid">
-sequenceDiagram
-  participant C as Clinician
-  participant MCP as Orchestrator (MCP)
-  participant RAG as RAG (Router→Retriever→Safety)
-  participant AG as Agents (Dx/Rx/Triage)
-  participant DB as VectorDB/LTM
-  participant OUT as Evidence Fusion
-  C->>MCP: case description
-  MCP->>RAG: retrieve evidence
-  RAG->>DB: similarity search
-  DB-->>RAG: top-k docs
-  RAG-->>MCP: evidence bundle + citations
-  MCP->>AG: delegated tasks
-  AG-->>OUT: candidate answers + rationales
-  OUT-->>C: final report + citations + cautions
-  OUT->>DB: write traces/embeddings
-</pre>
+      <div id="arch-l3" class="diagram" role="tabpanel" aria-labelledby="tab-l3" aria-hidden="true">
+        <pre class="mermaid" aria-label="L3 Single Turn Sequence Diagram">
+        sequenceDiagram
+          participant C as Clinician
+          participant MCP as Orchestrator (MCP)
+          participant RAG as RAG (Router→Retriever→Safety)
+          participant AG as Agents (Dx/Rx/Triage)
+          participant DB as VectorDB/LTM
+          participant OUT as Evidence Fusion
+          C->>MCP: case description
+          MCP->>RAG: retrieve evidence
+          RAG->>DB: similarity search
+          DB-->>RAG: top-k docs
+          RAG-->>MCP: evidence bundle + citations
+          MCP->>AG: delegated tasks
+          AG-->>OUT: candidate answers + rationales
+          OUT-->>C: final report + citations + cautions
+          OUT->>DB: write traces/embeddings
+        </pre>
       </div>
     </div>
   </section>