--- a
+++ b/web_structure.txt
@@ -0,0 +1,14915 @@
+Directory: .
+==================================================
+File: ./web/style.css.new
+--------------------------------------------------
+/* DNA Helix Animation */
+.dna-helix {
+    position: relative;
+    width: 200px;
+    height: 400px;
+    margin: 0 auto;
+    perspective: 1200px;
+    transform-style: preserve-3d;
+}
+
+.base-pair {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    animation: rotate 8s linear infinite;
+    transform-style: preserve-3d;
+}
+
+.base {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+}
+
+.left-base {
+    left: 35px;
+    background: #FF0066;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.right-base {
+    right: 35px;
+    background: #00B7FF;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.base-connector {
+    position: absolute;
+    left: 50%;
+    width: 90px;
+    height: 3px;
+    background: linear-gradient(90deg, 
+        rgba(255, 0, 102, 0.8), 
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(0, 183, 255, 0.8)
+    );
+    transform: translateX(-50%);
+    box-shadow: 0 0 8px rgba(0,0,0,0.15);
+}
+
+@keyframes rotate {
+    0% { transform: rotateY(0deg) translateZ(20px); }
+    100% { transform: rotateY(360deg) translateZ(20px); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+    50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }
+    100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+}
+
+--------------------------------------------------
+File: ./web/humans.txt
+--------------------------------------------------
+contact@dnanalyzer.orgDNAnalyzer is built by a large team of engineers, designers, researchers, robots, and others in many different sites across the globe. It is updated continuously, and built with more tools and technologies than we can shake a stick at. If you'd like to help us out, see www.github.com/VerisimilitudeX/DNAnalyzer. We're always looking for more talent, and we're always looking for more ideas. If you have any suggestions, please let us know! We're always looking for ways to improve the site. If you have any questions, please feel free to contact us at contact@dnanalyzer.live. We'd love to hear from you!
+--------------------------------------------------
+File: ./web/CITATION.cff
+--------------------------------------------------
+cff-version: 1.2.0
+authors:
+  - family-names: Acharya
+    given-names: Piyush
+    orcid: "https://orcid.org/0009-0000-4726-5928"
+
+date-released: 2022-10-10
+message: "If you use this software, please cite it as below."
+title: "DNAnalyzer: ML-Powered DNA Analysis Platform"
+version: "3.5.0-beta.0"
+url: "https://github.com/VerisimilitudeX/DNAnalyzer"
+doi: "10.5281/zenodo.14556577"
+
+--------------------------------------------------
+File: ./web/all_files.py
+--------------------------------------------------
+import os
+
+def save_directory_structure_and_files(root_dir, output_file):
+    with open(output_file, 'w', encoding='utf-8') as out:
+        for dirpath, dirnames, filenames in os.walk(root_dir):
+            # Write the directory name
+            rel_path = os.path.relpath(dirpath, root_dir)
+            out.write(f"Directory: {rel_path}\n")
+            out.write("=" * 50 + "\n")
+            
+            # Write file names and contents
+            for file in filenames:
+                file_path = os.path.join(dirpath, file)
+                out.write(f"File: {file_path}\n")  # Include full file path
+                out.write("-" * 50 + "\n")
+                try:
+                    with open(file_path, 'r', encoding='utf-8') as f:
+                        out.write(f.read())
+                except Exception as e:
+                    out.write(f"[Could not read file: {e}]\n")
+                out.write("\n" + "-" * 50 + "\n")
+            out.write("\n")
+
+if __name__ == "__main__":
+    root_directory = "./web"
+    output_text_file = "web_structure.txt"
+    save_directory_structure_and_files(root_directory, output_text_file)
+    print(f"Directory structure and files saved to {output_text_file}")
+
+--------------------------------------------------
+File: ./web/index.js
+--------------------------------------------------
+/**
+ * DNAnalyzer Main JavaScript
+ * Handles animations, interactivity and UI functionality
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    initNotificationBanner();
+    initNotificationScroll(); // Must run after banner init to get height
+    initDNAHelix();
+    initMobileMenu();
+    initNavbarScroll();
+    initStatsAnimation();
+    initSmoothScroll();
+    initScrollAnimations(); // Initialize general scroll animations
+
+    // Log initialization
+    console.log("DNAnalyzer UI Initialized");
+});
+
+// Shared state for notification banner
+let notificationClosed = false;
+let notificationHeight = 0; // Store banner height globally
+
+/**
+ * Initialize the notification banner dismiss functionality and store its height
+ */
+function initNotificationBanner() {
+    const banner = document.querySelector('.notification-banner');
+    if (!banner) return;
+
+    notificationHeight = banner.offsetHeight;
+    document.documentElement.style.setProperty('--notification-height', `${notificationHeight}px`);
+    console.log(`Notification banner height: ${notificationHeight}px`);
+
+    const closeBtn = banner.querySelector('.notification-close');
+    if (!closeBtn) return;
+
+    closeBtn.addEventListener('click', function() {
+        banner.classList.add('closed'); // Hide immediately for visual feedback
+        notificationHeight = 0; // Set height to 0
+        document.documentElement.style.setProperty('--notification-height', '0px');
+        notificationClosed = true;
+        adjustNavbarPosition(); // Adjust navbar immediately
+        console.log("Notification banner closed");
+    });
+}
+
+/**
+ * Adjusts the navbar's top position based on the notification banner's visibility.
+ */
+function adjustNavbarPosition() {
+    const navbar = document.getElementById('navbar');
+    if (!navbar) return;
+
+    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+    const banner = document.querySelector('.notification-banner');
+
+    // If banner is closed or hidden by scroll, navbar top is 0
+    if (notificationClosed || (banner && banner.classList.contains('hide-notification')) || currentScroll > notificationHeight) {
+         navbar.style.top = '0px';
+    }
+    // Otherwise, position navbar below the banner
+    else if (!notificationClosed && banner && !banner.classList.contains('hide-notification')) {
+         navbar.style.top = `${notificationHeight}px`;
+    }
+     // Default case if something goes wrong
+    else {
+        navbar.style.top = '0px';
+    }
+}
+
+
+/**
+ * Initialize notification banner scroll behavior (hide on scroll down, show on scroll up)
+ */
+function initNotificationScroll() {
+    const banner = document.querySelector('.notification-banner');
+    if (!banner) return;
+
+    let lastScrollTop = 0;
+    const scrollThreshold = 50; // Pixels to scroll before hiding/showing
+
+    window.addEventListener('scroll', function() {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+        // Ignore minor scroll fluctuations
+        if (Math.abs(scrollTop - lastScrollTop) <= 5) {
+            return;
+        }
+
+        if (scrollTop > lastScrollTop && scrollTop > scrollThreshold) {
+            // Scrolling Down
+            if (!banner.classList.contains('hide-notification') && !notificationClosed) {
+                banner.classList.add('hide-notification');
+                adjustNavbarPosition(); // Adjust navbar when banner hides
+                 console.log("Hiding notification on scroll down");
+            }
+        } else if (scrollTop < lastScrollTop || scrollTop <= scrollThreshold) {
+            // Scrolling Up or near top
+            if (banner.classList.contains('hide-notification') && !notificationClosed) {
+                 banner.classList.remove('hide-notification');
+                 adjustNavbarPosition(); // Adjust navbar when banner shows
+                 console.log("Showing notification on scroll up");
+            }
+        }
+
+        // Ensure correct navbar position even if banner wasn't hidden/shown
+         if (scrollTop <= scrollThreshold && !notificationClosed) {
+              banner.classList.remove('hide-notification');
+              adjustNavbarPosition();
+         } else if (scrollTop > scrollThreshold && !notificationClosed && banner.classList.contains('hide-notification')) {
+              adjustNavbarPosition(); // Keep navbar at top if banner is hidden
+         } else if (notificationClosed) {
+              adjustNavbarPosition(); // Keep navbar at top if banner is closed
+         }
+
+
+        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
+    }, { passive: true }); // Improve scroll performance
+}
+
+/**
+ * Initialize the DNA Helix animation on the homepage
+ */
+function initDNAHelix() {
+    const dnaHelixContainer = document.getElementById('dnaHelix');
+    if (!dnaHelixContainer) return;
+
+    dnaHelixContainer.innerHTML = ''; // Clear existing
+
+    const basePairsConfig = [
+        { pair: ['A', 'T'], leftColor: 'var(--magenta)', rightColor: 'var(--blue)' },
+        { pair: ['T', 'A'], leftColor: 'var(--blue)', rightColor: 'var(--magenta)' },
+        { pair: ['G', 'C'], leftColor: 'var(--orange)', rightColor: '#34c759' }, // Added green
+        { pair: ['C', 'G'], leftColor: '#34c759', rightColor: 'var(--orange)' }
+    ];
+
+    const numBasePairs = 25; // Total number of pairs
+    const verticalSpacing = 20; // Space between pairs
+    const helixRadius = 50; // How far out the bases extend (Z-axis)
+    const rotationIncrement = 20; // Degrees twist per base pair
+    const animationDuration = 10; // seconds for full rotation
+
+    for (let i = 0; i < numBasePairs; i++) {
+        const config = basePairsConfig[i % basePairsConfig.length]; // Cycle through colors/pairs
+        const [leftBaseChar, rightBaseChar] = config.pair;
+
+        const basePairElement = document.createElement('div');
+        basePairElement.className = 'base-pair';
+
+        // Vertical position
+        const yPos = (i - numBasePairs / 2) * verticalSpacing; // Center the helix vertically
+        basePairElement.style.transform = `translateY(${yPos}px)`; // Initial Y position
+
+        // Calculate initial rotation angle and offsets for the helix shape
+        const angle = (i * rotationIncrement) % 360;
+        const xOffset = Math.sin(angle * Math.PI / 180) * 15; // Sideways curve
+
+        // Store initial transform values in CSS variables for the animation
+        basePairElement.style.setProperty('--start-angle', `${angle}deg`);
+        basePairElement.style.setProperty('--x-offset', `${xOffset}px`);
+
+        // Apply animation
+        const delay = (i * 0.1) % animationDuration; // Staggered animation start
+        basePairElement.style.animation = `rotate ${animationDuration}s linear infinite ${-delay}s`;
+
+        // Create Left Base
+        const leftBase = document.createElement('div');
+        leftBase.className = 'base left-base';
+        leftBase.textContent = leftBaseChar;
+        leftBase.style.background = config.leftColor;
+        leftBase.style.animationDelay = `${(i * 0.15)}s`; // Stagger pulse
+
+        // Create Right Base
+        const rightBase = document.createElement('div');
+        rightBase.className = 'base right-base';
+        rightBase.textContent = rightBaseChar;
+        rightBase.style.background = config.rightColor;
+        rightBase.style.animationDelay = `${(i * 0.15 + 0.1)}s`; // Stagger pulse slightly more
+
+        // Create Connector
+        const connector = document.createElement('div');
+        connector.className = 'base-connector';
+        // Optional: Style connector dynamically if needed
+
+        // Append elements
+        basePairElement.appendChild(leftBase);
+        basePairElement.appendChild(rightBase);
+        basePairElement.appendChild(connector); // Connector should be behind bases visually if needed
+        dnaHelixContainer.appendChild(basePairElement);
+    }
+
+     // Adjust container height if needed (optional)
+     // dnaHelixContainer.style.height = `${numBasePairs * verticalSpacing + 100}px`;
+}
+
+
+/**
+ * Initialize the mobile menu toggle functionality
+ */
+function initMobileMenu() {
+    const mobileToggle = document.getElementById('mobileToggle');
+    const navLinks = document.getElementById('navLinks');
+
+    if (!mobileToggle || !navLinks) return;
+
+    mobileToggle.addEventListener('click', function() {
+        const isActive = navLinks.classList.toggle('active');
+        mobileToggle.setAttribute('aria-expanded', isActive);
+
+        const icon = mobileToggle.querySelector('i');
+        if (isActive) {
+            icon.classList.remove('fa-bars');
+            icon.classList.add('fa-times');
+        } else {
+            icon.classList.remove('fa-times');
+            icon.classList.add('fa-bars');
+        }
+    });
+
+    // Close menu when a link is clicked
+    navLinks.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+            if (navLinks.classList.contains('active')) {
+                navLinks.classList.remove('active');
+                mobileToggle.setAttribute('aria-expanded', 'false');
+                const icon = mobileToggle.querySelector('i');
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-bars');
+            }
+        });
+    });
+}
+
+/**
+ * Initialize the navbar scroll effect (adding 'scrolled' class)
+ */
+function initNavbarScroll() {
+    const navbar = document.getElementById('navbar');
+    if (!navbar) return;
+
+    const scrollThreshold = 30; // Pixels scrolled before adding class
+
+    window.addEventListener('scroll', function() {
+        if (window.pageYOffset > scrollThreshold) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    }, { passive: true });
+}
+
+/**
+ * Animate number counting from 0 to target with easing
+ */
+function animateNumber(element, targetString, suffix = '', duration = 2000) {
+    if (!element) return;
+
+    const target = parseFloat(targetString.replace(/[^0-9.]/g, '')); // Extract number
+    if (isNaN(target)) {
+        element.textContent = targetString + suffix; // Fallback for non-numeric targets
+        return;
+    }
+
+    let start = 0;
+    let startTime = null;
+
+    // Easing function (easeOutExpo)
+    function easeOutExpo(t) {
+        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+    }
+
+    function animationStep(timestamp) {
+        if (!startTime) startTime = timestamp;
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = easeOutExpo(progress);
+
+        let currentValue = Math.floor(easedProgress * target);
+
+        // Handle M+ and + suffixes correctly
+        let displaySuffix = suffix;
+         if (targetString.includes('M+')) {
+             currentValue = (easedProgress * target).toFixed(1); // Show decimal during animation
+             displaySuffix = 'M+';
+              if (progress === 1) currentValue = target; // Ensure final value is integer if needed
+         } else if (targetString.includes('+') && suffix === '') { // Check if suffix wasn't passed but '+' exists
+             displaySuffix = '+';
+         }
+
+         // Prevent displaying 0M+ or 0+ initially
+         if (elapsed < 50 && currentValue === 0 && displaySuffix) {
+             element.textContent = 0;
+         } else {
+             element.textContent = `${currentValue}${displaySuffix}`;
+         }
+
+
+        if (progress < 1) {
+            requestAnimationFrame(animationStep);
+        } else {
+            // Ensure final display is exactly the target string
+            element.textContent = targetString.replace(/([0-9.]+)/, target) + displaySuffix;
+
+        }
+    }
+
+    requestAnimationFrame(animationStep);
+}
+
+
+/**
+ * Initialize the stats counter animation with Intersection Observer
+ */
+function initStatsAnimation() {
+    const statsSection = document.querySelector('.stats-section');
+    if (!statsSection) return;
+
+    const statElements = [ // Use array for easier iteration
+        { elem: document.getElementById('statAccuracy'), target: '141', suffix: '' },
+        { elem: document.getElementById('statSequences'), target: '7M+', suffix: '' }, // Suffix handled in animateNumber
+        { elem: document.getElementById('statUsers'), target: '46+', suffix: '' }    // Suffix handled in animateNumber
+    ];
+
+    let animated = false;
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting && !animated) {
+                console.log("Stats section intersecting, animating numbers.");
+                statElements.forEach((stat, index) => {
+                    setTimeout(() => {
+                        if (stat.elem) {
+                            // Pass target string directly, animateNumber handles extraction
+                            animateNumber(stat.elem, stat.target, stat.suffix, 2000 + index * 100);
+                        }
+                    }, index * 200); // Stagger animation start
+                });
+
+                animated = true;
+                observer.unobserve(statsSection); // Stop observing once animated
+            }
+        });
+    }, { threshold: 0.3 }); // Trigger when 30% visible
+
+    observer.observe(statsSection);
+}
+
+/**
+ * Add smooth scrolling for anchor links within the page
+ */
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href');
+            // Ensure it's a valid internal link and not just "#"
+            if (targetId && targetId.length > 1 && targetId.startsWith('#')) {
+                try {
+                    const targetElement = document.querySelector(targetId);
+                    if (targetElement) {
+                        e.preventDefault();
+                        const navbarHeight = document.getElementById('navbar')?.offsetHeight || 70; // Get current navbar height or default
+                        const elementPosition = targetElement.getBoundingClientRect().top;
+                        const offsetPosition = elementPosition + window.pageYOffset - navbarHeight - 20; // Extra 20px padding
+
+                        window.scrollTo({
+                            top: offsetPosition,
+                            behavior: 'smooth'
+                        });
+                    }
+                } catch (error) {
+                     console.warn(`Smooth scroll target not found or invalid selector: ${targetId}`, error);
+                 }
+            }
+        });
+    });
+}
+
+/**
+ * Initialize Intersection Observer for general scroll-triggered animations
+ */
+function initScrollAnimations() {
+    const animatedElements = document.querySelectorAll('.scroll-animate, .scroll-animate-left, .scroll-animate-right, .scroll-animate-scale');
+
+    if (!animatedElements.length) return;
+
+    const observerOptions = {
+        threshold: 0.15, // Trigger when 15% of the element is visible
+        rootMargin: '0px 0px -50px 0px' // Trigger slightly before element fully enters viewport bottom
+    };
+
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+                observer.unobserve(entry.target); // Stop observing once animated
+            }
+        });
+    }, observerOptions);
+
+    animatedElements.forEach(el => {
+        observer.observe(el);
+    });
+
+    console.log(`Observing ${animatedElements.length} elements for scroll animations.`);
+}
+--------------------------------------------------
+File: ./web/style.css
+--------------------------------------------------
+/* DNAnalyzer - Main Stylesheet
+ * Global styles for all pages
+ */
+
+/* Notification Banner Styling */
+.notification-banner {
+  background: linear-gradient(135deg, var(--orange), #FFB347); /* Adjusted gradient slightly */
+  color: var(--dark-bg); /* Dark text for contrast */
+  padding: 0.75rem 2.5rem 0.75rem 1rem; /* More padding on right for close button */
+  text-align: center;
+  font-size: 0.95rem; /* Slightly smaller */
+  font-weight: 500; /* Normal weight */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000; /* High z-index */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.notification-banner.hide-notification {
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.notification-banner.closed {
+  display: none !important; /* Use !important carefully, needed here to override */
+}
+
+.notification-banner .notification-link {
+  color: var(--dark-bg); /* Dark text */
+  text-decoration: underline;
+  font-weight: 600; /* Bold link */
+  background-color: rgba(255, 255, 255, 0.3);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  margin: 0 0.4rem;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.notification-banner .notification-link:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+  color: #000; /* Black on hover */
+  text-decoration: none;
+}
+
+.notification-banner .notification-close {
+  background: none; /* Transparent background */
+  border: none;
+  color: var(--dark-bg); /* Dark color */
+  font-size: 1.5rem; /* Larger close icon */
+  line-height: 1;
+  position: absolute;
+  right: 0.75rem; /* Positioned closer */
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 30px; /* Larger hit area */
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  padding: 0;
+  opacity: 0.7;
+}
+
+.notification-banner .notification-close:hover {
+  background: rgba(0, 0, 0, 0.1);
+  opacity: 1;
+  transform: translateY(-50%) rotate(90deg);
+}
+
+/* --- Root Variables --- */
+:root {
+  /* Brand colors from logo */
+  --magenta: #ff0066;
+  --blue: #00a4ef;
+  --orange: #f48022;
+  --white: #ffffff;
+  --dark-bg: #001427; /* Deep Navy */
+
+  /* Additional UI colors */
+  --dark-blue: #051e3e; /* Slightly lighter navy */
+  --light-blue: #2596be; /* Accent blue */
+  --light-gray: #f0f2f5; /* Off-white for light backgrounds if needed */
+  --medium-gray: #a0a8b1; /* Text subtle */
+  --dark-gray: #1e2a3a; /* Darker element backgrounds */
+
+  /* Functional colors */
+  --success: #34c759;
+  --warning: #ffcc00; /* Brighter warning */
+  --error: #ff3b30;
+
+  /* Typography */
+  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+
+  /* Spacing */
+  --space-xs: 0.25rem;  /* 4px */
+  --space-sm: 0.5rem;   /* 8px */
+  --space-md: 1rem;     /* 16px */
+  --space-lg: 1.5rem;   /* 24px */
+  --space-xl: 2.5rem;   /* 40px */
+  --space-xxl: 4rem;    /* 64px */
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-round: 50%;
+
+  /* Shadows */
+  --shadow-sm: 0 2px 4px rgba(0, 20, 39, 0.15);
+  --shadow-md: 0 5px 15px rgba(0, 20, 39, 0.2);
+  --shadow-lg: 0 10px 30px rgba(0, 20, 39, 0.25);
+  --shadow-glow-blue: 0 0 15px rgba(0, 164, 239, 0.3);
+  --shadow-glow-magenta: 0 0 15px rgba(255, 0, 102, 0.3);
+
+  /* Transitions */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.4s ease; /* Slightly slower for smoother effect */
+  --transition-slow: 0.6s ease;
+
+  /* Z-index layers */
+  --z-background: -1;
+  --z-base: 1;
+  --z-content: 10;
+  --z-sticky: 100;
+  --z-navbar: 900; /* Below notification */
+  --z-notification: 1000;
+  --z-modal: 1100;
+  --z-tooltip: 1200;
+
+  /* Notification Height - JS will set this */
+  --notification-height: 0px;
+}
+
+/* Reset & Base Styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  scroll-padding-top: 100px; /* Adjust for fixed navbar height */
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--dark-bg);
+  color: var(--medium-gray); /* Default text slightly softer */
+  line-height: 1.7; /* Increased line-height */
+  overflow-x: hidden;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative; /* Needed for background elements */
+}
+
+/* Main content area */
+main {
+  flex-grow: 1; /* Ensure footer is pushed down */
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  line-height: 1.3;
+  font-weight: 700;
+  margin-bottom: var(--space-md);
+  color: var(--white); /* Headings are white */
+}
+
+h1 { font-size: clamp(2.5rem, 5vw + 1rem, 3.8rem); margin-bottom: var(--space-lg); letter-spacing: -0.03em; }
+h2 { font-size: clamp(2rem, 4vw + 0.8rem, 2.8rem); margin-bottom: var(--space-lg); }
+h3 { font-size: clamp(1.3rem, 3vw + 0.5rem, 1.75rem); }
+h4 { font-size: clamp(1.1rem, 2.5vw + 0.4rem, 1.375rem); }
+
+p {
+  margin-bottom: var(--space-lg); /* More space after paragraphs */
+  max-width: 70ch; /* Improve readability */
+}
+
+a {
+  color: var(--blue);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+a:hover { color: var(--light-blue); }
+
+img, svg {
+  max-width: 100%;
+  height: auto;
+  display: block; /* Remove bottom space */
+}
+
+button { font-family: inherit; cursor: pointer; }
+
+code, pre { font-family: var(--font-mono); background-color: var(--dark-gray); padding: 0.2em 0.4em; border-radius: var(--radius-sm); font-size: 0.9em;}
+pre { padding: var(--space-md); overflow-x: auto; }
+
+ul, ol { list-style-position: outside; padding-left: var(--space-lg); }
+li { margin-bottom: var(--space-sm); }
+
+/* Container */
+.container {
+  width: 100%;
+  max-width: 1240px; /* Slightly wider */
+  margin: 0 auto;
+  padding: 0 var(--space-lg);
+}
+
+/* Background effects */
+.bg-gradient {
+  position: fixed; /* Fixed position */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh; /* Full viewport height */
+  overflow: hidden;
+  z-index: var(--z-background);
+  pointer-events: none; /* Allow clicks through */
+}
+
+.bg-blob {
+  position: absolute;
+  border-radius: var(--radius-round);
+  filter: blur(80px); /* More blur */
+  opacity: 0.25; /* More subtle */
+  will-change: transform; /* Optimize animation */
+}
+
+.bg-blob-1 {
+  width: 50vw;
+  height: 50vw;
+  min-width: 400px;
+  min-height: 400px;
+  max-width: 700px;
+  max-height: 700px;
+  top: -15%;
+  right: -10%;
+  background: radial-gradient(circle, var(--magenta) 0%, transparent 70%);
+  animation: float 25s ease-in-out infinite alternate;
+}
+
+.bg-blob-2 {
+  width: 45vw;
+  height: 45vw;
+  min-width: 350px;
+  min-height: 350px;
+  max-width: 600px;
+  max-height: 600px;
+  bottom: -10%;
+  left: -10%;
+  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
+  animation: float 30s ease-in-out infinite alternate-reverse;
+}
+
+@keyframes float {
+  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
+  100% { transform: translate(50px, -30px) rotate(25deg) scale(1.1); }
+}
+
+
+/* Navbar */
+.navbar {
+  position: fixed;
+  top: var(--notification-height); /* Adjusted by JS */
+  left: 0;
+  right: 0;
+  background: rgba(0, 20, 39, 0.7); /* Semi-transparent */
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: var(--z-navbar);
+  padding: var(--space-sm) 0; /* Consistent padding */
+  transition: background-color var(--transition-normal), box-shadow var(--transition-normal), padding var(--transition-normal), top var(--transition-fast);
+  will-change: background-color, box-shadow, padding;
+}
+
+.navbar.scrolled {
+  background: rgba(5, 30, 62, 0.9); /* Darker blue on scroll */
+  box-shadow: var(--shadow-md);
+  /* padding: var(--space-xs) 0; Slightly reduced padding */
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  color: var(--white); /* Ensure logo text is white */
+  gap: var(--space-sm);
+}
+.logo img { height: 32px; transition: transform var(--transition-fast); }
+.logo:hover img { transform: rotate(-5deg) scale(1.05); }
+.logo-text { font-size: 1.3rem; font-weight: 700; }
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.nav-links li { margin: 0 var(--space-sm); } /* Reduced margin */
+.nav-links a {
+  color: var(--white);
+  font-weight: 500;
+  font-size: 0.95rem;
+  position: relative;
+  padding: var(--space-xs) var(--space-sm); /* Padding for larger hit area */
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition-fast), color var(--transition-fast);
+}
+.nav-links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -2px; /* Position slightly below */
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(90deg, var(--magenta), var(--blue));
+  transition: width var(--transition-normal);
+  border-radius: 1px;
+}
+.nav-links a:hover,
+.nav-links a.active {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--white);
+}
+.nav-links a.active::after { width: 60%; } /* Underline for active link */
+.nav-links a:hover::after { width: 80%; } /* Wider underline on hover */
+
+.nav-buttons { display: flex; align-items: center; }
+.mobile-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.75rem; padding: 0.5rem; }
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8rem 1.8rem; /* Slightly adjusted padding */
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all var(--transition-fast);
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden; /* For hover effects */
+  white-space: nowrap;
+}
+.btn-icon { margin-right: var(--space-sm); font-size: 1.1em; }
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--orange), var(--magenta)); /* Orange to Magenta gradient */
+  color: var(--white);
+  box-shadow: 0 4px 10px rgba(255, 0, 102, 0.2);
+}
+.btn-primary:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 6px 15px rgba(255, 0, 102, 0.3);
+  color: var(--white);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--white);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.4);
+  transform: translateY(-3px);
+  color: var(--white);
+}
+
+.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.875rem; }
+.btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; }
+
+/* Hero Section */
+.hero {
+  padding: calc(var(--space-xxl) * 2 + var(--notification-height)) 0 var(--space-xxl); /* More top padding, account for notification */
+  min-height: 70vh;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+.hero-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-xl);
+  align-items: center;
+}
+.hero-headings { position: relative; z-index: var(--z-content); }
+.hero h1 { line-height: 1.2; }
+.hero h1 span.gradient-text { /* Style specifically for hero gradient */
+  background: linear-gradient(120deg, var(--magenta), var(--blue), var(--orange));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% auto;
+  animation: hero-gradient-animation 5s linear infinite;
+}
+@keyframes hero-gradient-animation {
+  to { background-position: 200% center; }
+}
+.hero-subtitle {
+  font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.3rem);
+  margin-bottom: var(--space-xl);
+  color: var(--medium-gray);
+  max-width: 550px;
+}
+.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); }
+.hero-animation {
+  position: relative;
+  width: 100%;
+  min-height: 450px; /* Ensure space for animation */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1500px; /* Increased perspective */
+}
+
+/* DNA Helix Animation */
+.dna-helix {
+  position: absolute;
+  width: 250px; /* Wider */
+  height: 100%; /* Fill the container */
+  transform-style: preserve-3d;
+  /* Removed perspective from here, placed on parent (.hero-animation) */
+}
+
+.base-pair {
+  position: absolute;
+  width: 100%;
+  height: 20px; /* Base height */
+  transform-style: preserve-3d;
+  /* Animation applied in JS */
+}
+
+.base {
+  position: absolute;
+  width: 28px; /* Slightly larger */
+  height: 28px;
+  border-radius: var(--radius-round);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--dark-bg); /* Dark text on bases */
+  text-shadow: none;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.3);
+  /* Animation applied in JS */
+}
+
+.left-base {
+  left: 30px; /* Adjusted positioning */
+  background: linear-gradient(135deg, #ff4d88, var(--magenta)); /* Gradient base */
+  animation: pulse 2.5s ease-in-out infinite;
+  filter: brightness(1.1);
+}
+
+.right-base {
+  right: 30px; /* Adjusted positioning */
+  background: linear-gradient(135deg, #4dd0ff, var(--blue)); /* Gradient base */
+  animation: pulse 2.5s ease-in-out infinite 0.2s; /* Staggered animation */
+  filter: brightness(1.1);
+}
+
+.base-connector {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 130px; /* Connects bases */
+  height: 4px;
+  background: linear-gradient(90deg,
+      rgba(255, 0, 102, 0.6),
+      rgba(255, 255, 255, 0.4) 50%,
+      rgba(0, 164, 239, 0.6)
+  );
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
+}
+
+/* Keyframes for DNA animation */
+@keyframes rotate { /* Global rotation for each pair */
+  0% { transform: rotateY(var(--start-angle)) translateZ(50px) translateX(var(--x-offset)); }
+  100% { transform: rotateY(calc(var(--start-angle) + 360deg)) translateZ(50px) translateX(var(--x-offset)); }
+}
+
+@keyframes pulse { /* Base pulsing effect */
+  0%, 100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+  50% { transform: scale(1.1); opacity: 1; filter: brightness(1.3); }
+}
+
+/* Section styling */
+.section {
+  padding: var(--space-xxl) 0;
+  position: relative;
+  overflow: hidden; /* Contain elements for animation */
+}
+.section-title {
+  text-align: center;
+  margin-bottom: var(--space-xl); /* Reduced bottom margin */
+}
+.section-title h2 { margin-bottom: var(--space-sm); }
+.section-title p {
+  max-width: 700px;
+  margin: 0 auto var(--space-lg); /* Center paragraph */
+  font-size: 1.1rem;
+  color: var(--medium-gray);
+}
+.section-bg-dark { background-color: var(--dark-blue); }
+.section-bg-gradient {
+  background: linear-gradient(160deg, rgba(5, 30, 62, 0.9), rgba(0, 20, 39, 0.9) 70%);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Cards */
+.card {
+  background: rgba(255, 255, 255, 0.03); /* More subtle */
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  transition: all var(--transition-normal);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  height: 100%; /* Ensure cards in grid have same height */
+  display: flex;
+  flex-direction: column;
+}
+.card:hover {
+  transform: translateY(-8px) scale(1.02); /* More lift */
+  background: rgba(255, 255, 255, 0.06);
+  box-shadow: var(--shadow-lg);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.card-title { font-size: 1.4rem; margin-bottom: var(--space-sm); color: var(--white); }
+.card-icon {
+  width: 55px;
+  height: 55px;
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  color: var(--white);
+  margin-bottom: var(--space-md);
+  flex-shrink: 0; /* Prevent icon from shrinking */
+  box-shadow: var(--shadow-glow-blue);
+}
+.card p { flex-grow: 1; } /* Allow text to fill space */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-xl);
+  align-items: stretch; /* Make cards same height */
+}
+
+/* Feature List (Alternative Card Layout) */
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+.feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-normal);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.feature-card:hover {
+  transform: translateX(5px); /* Shift right on hover */
+  background: rgba(255, 255, 255, 0.07);
+  box-shadow: var(--shadow-md);
+  border-left: 3px solid; /* Add left border on hover */
+}
+.feature-card:hover.feature-icon-blue { border-left-color: var(--blue); }
+.feature-card:hover.feature-icon-magenta { border-left-color: var(--magenta); }
+.feature-card:hover.feature-icon-orange { border-left-color: var(--orange); }
+
+.feature-icon {
+  min-width: 50px; /* Slightly smaller */
+  height: 50px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+  flex-shrink: 0;
+}
+/* Distinct feature icon styles */
+.feature-icon-blue { background: rgba(0, 164, 239, 0.1); color: var(--blue); box-shadow: 0 0 10px rgba(0, 164, 239, 0.2); }
+.feature-icon-magenta { background: rgba(255, 0, 102, 0.1); color: var(--magenta); box-shadow: 0 0 10px rgba(255, 0, 102, 0.2); }
+.feature-icon-orange { background: rgba(244, 128, 34, 0.1); color: var(--orange); box-shadow: 0 0 10px rgba(244, 128, 34, 0.2); }
+
+.feature-content h3 { margin-bottom: var(--space-xs); font-size: 1.3rem; color: var(--white); }
+.feature-content p { margin-bottom: 0; font-size: 0.95rem; }
+
+/* Stats Section */
+.stats-section {
+  padding: var(--space-xl) 0;
+  text-align: center;
+  position: relative;
+  background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-blue) 100%); /* Subtle vertical gradient */
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-lg);
+  text-align: center;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+.stat-item { padding: var(--space-sm); }
+.stat-icon {
+  font-size: 2rem;
+  margin-bottom: var(--space-sm);
+  color: var(--blue); /* Use brand blue for icons */
+  opacity: 0.8;
+}
+.stat-number {
+  font-size: clamp(2.5rem, 6vw, 3.5rem); /* Responsive font size */
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: var(--space-xs);
+  background: linear-gradient(135deg, var(--magenta), var(--light-blue));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.stat-label { color: var(--medium-gray); font-size: 0.95rem; font-weight: 500; }
+
+/* Steps Section (How it Works) */
+.steps-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
+  max-width: 800px; /* Constrain width */
+  margin: var(--space-xl) auto 0; /* Add top margin */
+}
+.steps-container::before { /* Vertical connecting line */
+  content: '';
+  position: absolute;
+  left: 29px; /* Aligned with center of icons */
+  top: 30px; /* Start below first icon */
+  bottom: 30px; /* End above last icon */
+  width: 4px;
+  background: linear-gradient(to bottom,
+      rgba(0, 164, 239, 0.1),
+      rgba(0, 164, 239, 0.5),
+      rgba(0, 164, 239, 0.1)
+  );
+  border-radius: 2px;
+  z-index: var(--z-base);
+}
+
+.step-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start; /* Align items to top */
+  gap: var(--space-lg);
+  padding: var(--space-md);
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  z-index: var(--z-content); /* Above the line */
+  transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+.step-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.step-icon {
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, var(--blue), var(--light-blue));
+  border-radius: var(--radius-round);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  color: var(--white);
+  box-shadow: var(--shadow-glow-blue);
+  z-index: var(--z-content); /* Ensure icon is above line */
+}
+
+/* Alternate step icon colors */
+.step-item:nth-child(1) .step-icon { background: linear-gradient(135deg, var(--orange), #ffb347); box-shadow: 0 0 15px rgba(244, 128, 34, 0.3); }
+.step-item:nth-child(3) .step-icon { background: linear-gradient(135deg, var(--magenta), #ff4d88); box-shadow: var(--shadow-glow-magenta); }
+
+
+.step-content h3 { margin-bottom: var(--space-xs); font-size: 1.4rem; color: var(--white); }
+.step-content p { margin-bottom: 0; font-size: 1rem; }
+
+
+/* Footer */
+.footer {
+  background: var(--dark-blue);
+  padding: var(--space-xxl) 0 var(--space-lg);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: auto; /* Push footer to bottom */
+}
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
+  gap: var(--space-xl);
+  margin-bottom: var(--space-xl);
+}
+.footer-brand img { height: 36px; margin-bottom: var(--space-md); }
+.footer-brand p { margin-bottom: var(--space-lg); color: var(--medium-gray); font-size: 0.9rem; max-width: 300px;}
+.footer-social { display: flex; gap: var(--space-md); }
+.social-link {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-round);
+  background: rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+  font-size: 1.1rem;
+  transition: all var(--transition-fast);
+}
+.social-link:hover {
+  background: var(--blue); /* Use brand color on hover */
+  transform: translateY(-3px) scale(1.05);
+  color: var(--white);
+}
+.footer-nav h4 {
+  margin-bottom: var(--space-md);
+  color: var(--white);
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+.footer-nav ul { list-style: none; padding: 0; margin: 0; }
+.footer-nav li { margin-bottom: var(--space-sm); }
+.footer-nav a { color: var(--medium-gray); font-size: 0.95rem; transition: color var(--transition-fast); }
+.footer-nav a:hover { color: var(--white); text-decoration: underline; }
+
+.footer-bottom {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  font-size: 0.85rem;
+  color: var(--medium-gray);
+}
+.footer-copyright a { color: var(--medium-gray); text-decoration: underline; }
+.footer-copyright a:hover { color: var(--white); }
+.footer-links { display: flex; gap: var(--space-lg); }
+.footer-links a { color: var(--medium-gray); }
+.footer-links a:hover { color: var(--white); }
+
+/* Disclaimer Section Specific Styles */
+.disclaimer-section {
+  padding: var(--space-lg) 0; /* Reduced padding */
+  background: transparent !important; /* Ensure no background override */
+}
+.disclaimer-content {
+  max-width: 900px; /* Wider */
+  margin: 0 auto;
+  background-color: rgba(0, 10, 20, 0.4); /* Darker, subtle background */
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.disclaimer-title {
+  font-size: 0.9rem;
+  margin-bottom: var(--space-sm);
+  color: var(--medium-gray); /* Softer title color */
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+.disclaimer-text {
+  font-size: 0.75rem; /* Slightly larger */
+  opacity: 0.7; /* Slightly more visible */
+  line-height: 1.5;
+  color: var(--medium-gray);
+}
+.disclaimer-text p { margin-bottom: var(--space-sm); } /* Less space between paragraphs */
+.disclaimer-text strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
+
+/* Utilities */
+.text-center { text-align: center; }
+.mb-sm { margin-bottom: var(--space-sm); }
+.mb-md { margin-bottom: var(--space-md); }
+.mb-lg { margin-bottom: var(--space-lg); }
+.mb-xl { margin-bottom: var(--space-xl); }
+.mt-sm { margin-top: var(--space-sm); }
+.mt-md { margin-top: var(--space-md); }
+.mt-lg { margin-top: var(--space-lg); }
+.mt-xl { margin-top: var(--space-xl); }
+.gradient-text {
+  background: linear-gradient(135deg, var(--magenta), var(--blue));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Scroll-based Animations */
+.scroll-animate,
+.scroll-animate-left,
+.scroll-animate-right,
+.scroll-animate-scale {
+  opacity: 0;
+  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
+  will-change: opacity, transform; /* Performance hint */
+}
+
+.scroll-animate { transform: translateY(40px); }
+.scroll-animate-left { transform: translateX(-50px); }
+.scroll-animate-right { transform: translateX(50px); }
+.scroll-animate-scale { transform: scale(0.9); }
+
+.scroll-animate.animate-in,
+.scroll-animate-left.animate-in,
+.scroll-animate-right.animate-in,
+.scroll-animate-scale.animate-in {
+  opacity: 1;
+  transform: translate(0, 0) scale(1);
+}
+
+/* Delay classes */
+.scroll-animate-delay-1 { transition-delay: 0.15s; }
+.scroll-animate-delay-2 { transition-delay: 0.3s; }
+.scroll-animate-delay-3 { transition-delay: 0.45s; }
+
+
+/* Responsive styles */
+@media screen and (max-width: 1024px) {
+  .hero-content {
+      grid-template-columns: 1fr;
+      text-align: center;
+      gap: var(--space-lg);
+  }
+  .hero-headings { order: 1; } /* Text below animation on smaller screens */
+  .hero-animation { order: 0; min-height: 350px; margin-bottom: var(--space-lg); }
+  .hero-subtitle { margin-left: auto; margin-right: auto; }
+  .hero-buttons { justify-content: center; }
+  .dna-helix { width: 200px; /* Smaller helix */ }
+  .base-connector { width: 100px; }
+  .left-base { left: 25px; }
+  .right-base { right: 25px; }
+
+  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Adjust footer grid */
+  .steps-container::before { left: 29px; } /* Adjust step line position if needed */
+}
+
+@media screen and (max-width: 768px) {
+  html { scroll-padding-top: 80px; /* Adjust for potentially smaller navbar */ }
+  h1 { font-size: 2.8rem; }
+  h2 { font-size: 2.1rem; }
+
+  .navbar-container { position: relative; }
+  .mobile-toggle { display: block; }
+  .nav-links {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      background: var(--dark-blue); /* Solid background for mobile menu */
+      padding: var(--space-lg) 0;
+      max-height: 0; /* Start closed */
+      overflow: hidden;
+      opacity: 0;
+      visibility: hidden;
+      transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  .nav-links.active {
+      max-height: 500px; /* Open height */
+      opacity: 1;
+      visibility: visible;
+  }
+  .nav-links li { margin: var(--space-sm) 0; width: 100%; text-align: center; }
+  .nav-links a { display: block; padding: var(--space-md) 0; }
+  .nav-links a::after { display: none; } /* No underline in mobile */
+  .nav-buttons { display: none; } /* Hide GitHub button in mobile nav area, could move it inside */
+
+  .hero { padding-top: calc(var(--space-xl) * 2 + var(--notification-height)); } /* Adjust hero padding */
+  .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
+  .card-grid { grid-template-columns: 1fr; } /* Stack cards */
+  .feature-card { flex-direction: column; align-items: center; text-align: center; }
+  .feature-icon { margin-bottom: var(--space-md); }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* 2 columns for stats */
+  .steps-container { padding-left: 0; max-width: 100%;}
+  .steps-container::before { display: none; } /* Hide vertical line on mobile */
+  .step-item { flex-direction: column; align-items: center; text-align: center; }
+  .step-icon { margin-bottom: var(--space-md); }
+
+  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center;}
+  .footer-brand { align-items: center; }
+  .footer-social { justify-content: center; }
+  .footer-nav h4 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
+  .footer-bottom { flex-direction: column; text-align: center; }
+
+  .notification-banner {
+      padding: 0.6rem 2.5rem 0.6rem 1rem;
+      font-size: 0.85rem;
+      line-height: 1.4;
+  }
+  .notification-banner .notification-link { margin: 0.2rem; }
+}
+
+@media screen and (max-width: 480px) {
+  .container { padding: 0 var(--space-md); }
+  h1 { font-size: 2.2rem; }
+  h2 { font-size: 1.8rem; }
+  .stats-grid { grid-template-columns: 1fr; } /* Stack stats fully */
+  .hero-buttons .btn { width: 100%; } /* Full width buttons */
+  .footer-bottom { font-size: 0.8rem; }
+  .footer-links { gap: var(--space-md); } /* Less gap for footer links */
+  .notification-banner { font-size: 0.8rem; }
+  .notification-banner .notification-close { font-size: 1.3rem; right: 0.5rem; width: 26px; height: 26px;}
+}
+--------------------------------------------------
+File: ./web/.htaccess
+--------------------------------------------------
+RewriteEngine On
+
+# If the request doesn't directly map to an existing file or directory, append .html
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^([^/.]+)$ $1.html [L]
+--------------------------------------------------
+File: ./web/index.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DNAnalyzer - DNA Sequence Analysis with Machine Learning</title>
+    <meta name="description"
+        content="DNAnalyzer is a powerful, privacy-focused DNA analysis tool using advanced machine learning for accurate, on-device genomic analysis.">
+
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+
+    <link rel="shortcut icon" href="assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <div class="notification-banner">
+        <span>🚨 DNAnalyzer v2.0 is coming soon! Check out the</span>
+        <a href="https://github.com/VerisimilitudeX/DNAnalyzer/projects/1" class="notification-link" target="_blank" rel="noopener noreferrer">Roadmap</a>
+        <span>and join our</span>
+        <a href="https://discord.gg/xNpujz49gj" class="notification-link" target="_blank" rel="noopener noreferrer">Discord</a>
+        <span>for updates!</span>
+        <button class="notification-close" aria-label="Close notification">&times;</button>
+    </div>
+
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+        </div>
+
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="index.html" class="logo">
+                <img src="assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="index.html" class="active">Home</a></li>
+                <li><a href="features/features.html">Features</a></li>
+                <li><a href="analyzer/analyzer.html">Analyzer</a></li>
+                <li><a href="server/server.html">Server</a></li>
+                <li><a href="docs/docs.html">Docs</a></li>
+                <li><a href="about/about.html">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm scroll-animate" target="_blank" rel="noopener noreferrer">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <section class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-headings scroll-animate scroll-animate-left">
+                    <h1>Revolutionizing <span class="gradient-text">DNA analysis</span> with machine learning</h1>
+                    <p class="hero-subtitle">Powerful, privacy-focused DNA analysis using advanced ML algorithms
+                        designed for both researchers and individuals.</p>
+
+                    <div class="hero-buttons">
+                        <a href="analyzer/analyzer.html" class="btn btn-primary scroll-animate scroll-animate-delay-1">
+                            <i class="fas fa-dna btn-icon"></i> Try DNA Analysis
+                        </a>
+                        <a href="docs/docs.html" class="btn btn-secondary scroll-animate scroll-animate-delay-2">
+                            <i class="fas fa-book btn-icon"></i> Documentation
+                        </a>
+                    </div>
+                </div>
+
+                <div class="hero-animation scroll-animate scroll-animate-right">
+                     <div class="dna-helix" id="dnaHelix">
+                         </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="stats-section scroll-animate">
+        <div class="container">
+            <div class="stats-grid">
+                <div class="stat-item scroll-animate scroll-animate-scale scroll-animate-delay-1">
+                    <i class="fas fa-star stat-icon"></i>
+                    <div class="stat-number" id="statAccuracy">0</div> <div class="stat-label">GitHub Stars</div>
+                </div>
+                <div class="stat-item scroll-animate scroll-animate-scale scroll-animate-delay-2">
+                    <i class="fas fa-database stat-icon"></i>
+                    <div class="stat-number" id="statSequences">0M+</div> <div class="stat-label">DNA Sequences Analyzed</div>
+                </div>
+                <div class="stat-item scroll-animate scroll-animate-scale scroll-animate-delay-3">
+                    <i class="fas fa-users stat-icon"></i>
+                    <div class="stat-number" id="statUsers">0+</div> <div class="stat-label">Contributors</div>
+                </div>
+                <div class="stat-item scroll-animate scroll-animate-scale scroll-animate-delay-3">
+                    <i class="fab fa-discord stat-icon"></i>
+                    <div class="stat-number">86</div> <div class="stat-label">Discord Members</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="section-title scroll-animate">
+                <h2>Why Choose <span class="gradient-text">DNAnalyzer</span>?</h2>
+                <p>Our cutting-edge technology provides unparalleled accuracy and insights while keeping your data
+                    secure.</p>
+            </div>
+
+            <div class="card-grid">
+                <div class="card scroll-animate scroll-animate-delay-1">
+                    <div class="card-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3 class="card-title">Privacy-First Analysis</h3>
+                    <p>Your genetic data never leaves your device. All computation is performed locally using our
+                        advanced on-device ML models.</p>
+                </div>
+
+                <div class="card scroll-animate scroll-animate-delay-2">
+                    <div class="card-icon">
+                        <i class="fas fa-dna"></i>
+                    </div>
+                    <h3 class="card-title">Advanced DNA Analysis</h3>
+                    <p>Identify open reading frames, high coverage regions, protein sequences, and transcription factor
+                        binding sites with precision.</p>
+                </div>
+
+                <div class="card scroll-animate scroll-animate-delay-3">
+                    <div class="card-icon">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3 class="card-title">Machine Learning Powered</h3>
+                    <p>Our cutting-edge neural networks provide insights and pattern recognition beyond traditional
+                        analytics capabilities.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section section-bg-gradient">
+        <div class="container">
+            <div class="section-title scroll-animate">
+                <h2>How It Works</h2>
+                <p>A simple three-step process to analyze your DNA sequences</p>
+            </div>
+
+            <div class="steps-container">
+                <div class="step-item scroll-animate scroll-animate-left">
+                     <div class="step-icon"><i class="fas fa-upload"></i></div>
+                    <div class="step-content">
+                        <h3>1. Upload Your Sequence</h3>
+                        <p>Upload your DNA sequence file in FASTA or FASTQ format. Your data stays securely on your device.</p>
+                    </div>
+                </div>
+
+                <div class="step-item scroll-animate scroll-animate-right scroll-animate-delay-1">
+                     <div class="step-icon"><i class="fas fa-cogs"></i></div>
+                    <div class="step-content">
+                        <h3>2. Select Analysis Options</h3>
+                        <p>Choose from a variety of analysis modules, including ORF detection, GC content analysis, and
+                            promoter identification.</p>
+                    </div>
+                </div>
+
+                <div class="step-item scroll-animate scroll-animate-left scroll-animate-delay-2">
+                     <div class="step-icon"><i class="fas fa-chart-line"></i></div>
+                    <div class="step-content">
+                        <h3>3. Get Comprehensive Results</h3>
+                        <p>Receive detailed insights instantly with visualizations and downloadable reports for your research.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="section-title scroll-animate">
+                <h2>Powerful Analysis Features</h2>
+                <p>Comprehensive tools designed for researchers, students, and enthusiasts</p>
+            </div>
+
+            <div class="feature-list">
+                <div class="feature-card scroll-animate scroll-animate-right">
+                    <div class="feature-icon feature-icon-blue">
+                        <i class="fas fa-search-plus"></i> </div>
+                    <div class="feature-content">
+                        <h3>Open Reading Frame Identification</h3>
+                        <p>Scans DNA for start and stop codons to identify potential protein-coding sequences (ORFs). Recognizes canonical start/stop codons to pinpoint putative proteins within a genome.</p>
+                    </div>
+                </div>
+
+                <div class="feature-card scroll-animate scroll-animate-left scroll-animate-delay-1">
+                    <div class="feature-icon feature-icon-magenta">
+                        <i class="fas fa-thermometer-half"></i> </div>
+                    <div class="feature-content">
+                        <h3>GC-Content Analysis</h3> <p>Calculates and visualizes GC content across the sequence, highlighting GC-rich regions often associated with gene density and regulatory elements.</p>
+                    </div>
+                </div>
+
+                <div class="feature-card scroll-animate scroll-animate-right scroll-animate-delay-2">
+                    <div class="feature-icon feature-icon-orange">
+                        <i class="fas fa-map-marker-alt"></i> </div>
+                    <div class="feature-content">
+                        <h3>Core Promoter Element Identification</h3>
+                        <p>Scans for known core promoter motifs (e.g., TATA box, BRE, INR, DPE). Detecting these elements helps locate potential gene start sites and regulatory regions.</p>
+                    </div>
+                </div>
+             </div>
+        </div>
+    </section>
+
+    <section class="section section-bg-dark scroll-animate">
+        <div class="container text-center">
+            <h2>Ready to Start Analyzing?</h2>
+            <p class="mb-xl">Join thousands of researchers and scientists using DNAnalyzer for their genetic analysis
+                needs.</p>
+
+            <div class="hero-buttons" style="justify-content: center;">
+                <a href="analyzer/analyzer.html" class="btn btn-primary">
+                    <i class="fas fa-dna btn-icon"></i> Start Analyzing Now
+                </a>
+                <a href="docs/docs.html" class="btn btn-secondary">
+                    <i class="fas fa-book btn-icon"></i> Read Documentation
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <section class="section section-bg-dark disclaimer-section scroll-animate">
+        <div class="container">
+            <div class="disclaimer-content">
+                <h4 class="disclaimer-title">DNAnalyzer Disclaimer</h4>
+                <div class="disclaimer-text">
+                    <p><strong>Limitation of Liability:</strong> The DNAnalyzer tool is intended for research, educational, and informational purposes only. The machine learning-based DNA analysis provides computational predictions that should not be used for medical diagnosis, clinical interpretation, or treatment decisions. DNAnalyzer is not a substitute for professional medical advice, diagnosis, or treatment.</p>
+                    <p><strong>Analysis Limitations:</strong> DNAnalyzer's computational analysis is based on algorithmic predictions using machine learning models trained on public datasets. Results may vary in accuracy. The absence of identified features does not rule out their presence, and identification does not guarantee biological relevance.</p>
+                    <p><strong>Privacy Notice:</strong> While DNAnalyzer processes data locally, users should exercise caution with sensitive genetic information. We recommend against uploading identifiable human genomic data. DNAnalyzer is not responsible for privacy implications from user actions.</p>
+                    <p><strong>Research Use Only:</strong> Results should be experimentally validated before use in publications. Citations should acknowledge its computational nature and limitations.</p>
+                    <p><strong>No Warranty:</strong> DNAnalyzer is provided "as is" without warranty of any kind. The creators and contributors disclaim all warranties. In no event shall creators/contributors be liable for any claim, damages, or liability arising from the use of this software.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                     <a href="index.html" class="logo mb-md"> <img src="assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo" style="height: 36px;">
+                         </a>
+                    <p>DNAnalyzer: Powerful, privacy-focused DNA analysis with cutting-edge machine learning for on-device genomic insights.</p>
+
+                    <div class="footer-social">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="Discord">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="https://twitter.com/DNAnalyzer_" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="features/features.html">Features</a></li>
+                        <li><a href="analyzer/analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="server/server.html">Server</a></li>
+                        <li><a href="docs/docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="docs/getting-started.md">Getting Started</a></li>
+                        <li><a href="docs/citations.md">Citations</a></li>
+                        <li><a href="docs/research/genes.md">Gene Research</a></li>
+                        <li><a href="docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright © 2025 Piyush Acharya. DNAnalyzer is fiscally sponsored by <a href="https://theopensource.org/" target="_blank" rel="noopener">The Open Source Collective</a> 501(c)(3). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="LICENSE.md">License</a>
+                    <a href="SECURITY.md">Security</a>
+                    <a href="CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="index.js"></script>
+</body>
+</html>
+--------------------------------------------------
+File: ./web/style.css.bak
+--------------------------------------------------
+/* DNA Helix Animation */
+.dna-helix {
+    position: relative;
+    width: 200px;
+    height: 400px;
+    margin: 0 auto;
+    perspective: 1200px;
+    transform-style: preserve-3d;
+}
+
+.base-pair {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    animation: rotate 8s linear infinite;
+    transform-style: preserve-3d;
+}
+
+.base {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+}
+
+.left-base {
+    left: 35px;
+    background: #FF0066;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.right-base {
+    right: 35px;
+    background: #00B7FF;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.base-connector {
+    position: absolute;
+    left: 50%;
+    width: 90px;
+    height: 3px;
+    background: linear-gradient(90deg, 
+        rgba(255, 0, 102, 0.8), 
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(0, 183, 255, 0.8)
+    );
+    transform: translateX(-50%);
+    box-shadow: 0 0 8px rgba(0,0,0,0.15);
+}
+
+@keyframes rotate {
+    0% { transform: rotateY(0deg) translateZ(20px); }
+    100% { transform: rotateY(360deg) translateZ(20px); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+    50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }
+    100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+}
+/* DNAnalyzer - Main Stylesheet
+ * Global styles for all pages
+ */
+/* Notification Banner Styling */
+.notification-banner {
+    background: linear-gradient(135deg, #FF6F00, #FF9100);
+    color: var(--white);
+    padding: 0.75rem 1rem 0.75rem 0.75rem;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: var(--z-navbar);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    animation: notifPulse 3s infinite;
+    transition: transform 0.3s ease-in-out;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.notification-banner.hide-notification {
+    transform: translateY(-100%);
+}
+
+.notification-banner.closed {
+    display: none !important;
+}
+
+.notification-banner .notification-link {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 700;
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    margin: 0 0.5rem;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.notification-banner .notification-link:hover {
+    color: #FFD700;
+    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
+}
+
+.notification-banner .notification-close {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: var(--white);
+    font-size: 1.25rem;
+    line-height: 1;
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.notification-banner .notification-close::before {
+    content: "×";
+    display: block;
+    position: relative;
+    top: -1px;
+}
+
+.notification-banner .notification-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-50%) rotate(90deg);
+    color: #FFD700;
+    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
+}
+
+ :root {
+    /* Brand colors from logo */
+    --magenta: #ff0066;
+    --blue: #00a4ef;
+    --orange: #f48022;
+    --white: #ffffff;
+    --dark-bg: #001427;
+    
+    /* Additional UI colors */
+    --dark-blue: #051e3e;
+    --light-blue: #2596be;
+    --light-gray: #f5f5f7;
+    --medium-gray: #86868b;
+    --dark-gray: #333333;
+    
+    /* Functional colors */
+    --success: #34c759;
+    --warning: #ff9500;
+    --error: #ff3b30;
+    
+    /* Typography */
+    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'IBM Plex Mono', monospace;
+    
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-xxl: 3rem;
+    
+    /* Border radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 20px;
+    
+    /* Shadows */
+    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.2);
+    
+    /* Transitions */
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+    --transition-slow: 0.5s ease;
+    
+    /* Z-index layers */
+    --z-tooltip: 100;
+    --z-navbar: 200;
+    --z-modal: 300;
+  }
+  
+  /* Reset & Base Styles */
+  *, 
+  *::before, 
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+  html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    font-family: var(--font-body);
+    background-color: var(--dark-bg);
+    color: var(--white);
+    line-height: 1.6;
+    overflow-x: hidden;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    line-height: 1.2;
+    font-weight: 700;
+    margin-bottom: var(--space-md);
+  }
+  
+  h1 {
+    font-size: 3.5rem;
+    margin-bottom: var(--space-lg);
+  }
+  
+  h2 {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-lg);
+  }
+  
+  h3 {
+    font-size: 1.75rem;
+  }
+  
+  h4 {
+    font-size: 1.375rem;
+  }
+  
+  p {
+    margin-bottom: var(--space-md);
+    color: rgba(255, 255, 255, 0.85);
+  }
+  
+  a {
+    color: var(--blue);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+  }
+  
+  a:hover {
+    color: var(--light-blue);
+  }
+  
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  button {
+    font-family: var(--font-body);
+    cursor: pointer;
+  }
+  
+  code, pre {
+    font-family: var(--font-mono);
+  }
+  
+  ul, ol {
+    padding-left: var(--space-lg);
+    margin-bottom: var(--space-md);
+  }
+  
+  /* Container */
+  .container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--space-lg);
+  }
+  
+  .container-sm {
+    max-width: 800px;
+  }
+  
+  .container-lg {
+    max-width: 1400px;
+  }
+  
+  /* Navbar */
+  .navbar {
+    position: fixed;
+    top: var(--notification-height, 0);
+    left: 0;
+    right: 0;
+    background: var(--dark-bg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    z-index: var(--z-navbar);
+    padding: var(--space-md) 0;
+    transition: all var(--transition-normal), top 0.3s ease-in-out;
+  }
+
+  .navbar.scrolled {
+    background: var(--dark-blue);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    padding: var(--space-sm) 0;
+  }
+  
+  .navbar-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .logo {
+    display: flex;
+    align-items: center;
+  }
+  
+  .logo img {
+    height: 36px;
+    margin-right: var(--space-sm);
+  }
+  
+  .logo-text {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--white);
+  }
+  
+  .nav-links {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .nav-links li {
+    margin: 0 var(--space-md);
+  }
+  
+  .nav-links a {
+    color: var(--white);
+    font-weight: 500;
+    position: relative;
+    padding: var(--space-xs) 0;
+  }
+  
+  .nav-links a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(90deg, var(--magenta), var(--blue));
+    transition: width var(--transition-normal);
+  }
+  
+  .nav-links a:hover::after,
+  .nav-links a.active::after {
+    width: 100%;
+  }
+  
+  .nav-buttons {
+    display: flex;
+    align-items: center;
+  }
+  
+  .mobile-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: var(--white);
+    font-size: 1.5rem;
+  }
+  
+  /* Buttons */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    transition: all var(--transition-fast);
+    border: none;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .btn-primary {
+    background: linear-gradient(135deg, #FF7B00, #FFB347);
+    color: var(--white);
+  }
+  
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 164, 239, 0.4);
+    color: var(--white);
+  }
+  
+  .btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--white);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  .btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+    color: var(--white);
+  }
+  
+  .btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+  }
+  
+  .btn-lg {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+  }
+  
+  .btn-icon {
+    margin-right: var(--space-xs);
+  }
+  
+  .btn-github {
+    background: #24292e;
+    color: var(--white);
+  }
+  
+  .btn-github:hover {
+    background: #2c3440;
+    color: var(--white);
+  }
+  
+  .btn-discord {
+    background: #5865F2;
+    color: var(--white);
+  }
+  
+  .btn-discord:hover {
+    background: #4752c4;
+    color: var(--white);
+  }
+  
+  /* Hero section */
+  .hero {
+    padding: 160px 0 100px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xxl);
+    align-items: center;
+  }
+  
+  .hero-headings {
+    position: relative;
+    z-index: 2;
+  }
+  
+  .hero h1 {
+    margin-bottom: var(--space-md);
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+  }
+  
+  .hero h1 span {
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-xl);
+    color: rgba(255, 255, 255, 0.85);
+    max-width: 500px;
+  }
+  
+  .hero-buttons {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+  }
+  
+  .hero-animation {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* DNA Helix Animation */
+  .dna-helix {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    perspective: 1200px;
+  }
+  
+  .base-pair {
+    position: absolute;
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: rotate3D 12s linear infinite;
+  }
+  
+  @keyframes rotate3D {
+    0% { transform: rotateY(0deg); }
+    100% { transform: rotateY(360deg); }
+  }
+  
+  .base {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    position: absolute;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .left-base {
+    background: var(--magenta);
+    left: calc(50% - 120px);
+    animation: moveLeft 6s ease-in-out infinite;
+  }
+  
+  .right-base {
+    background: var(--blue);
+    right: calc(50% - 120px);
+    animation: moveRight 6s ease-in-out infinite;
+  }
+  
+  .base-connector {
+    width: 200px;
+    height: 3px;
+    background: linear-gradient(90deg, var(--magenta), var(--blue));
+    position: absolute;
+    animation: stretch 6s ease-in-out infinite;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  }
+  
+  @keyframes moveLeft {
+    0%, 100% { transform: translateX(-12px); }
+    50% { transform: translateX(12px); }
+  }
+  
+  @keyframes moveRight {
+    0%, 100% { transform: translateX(12px); }
+    50% { transform: translateX(-12px); }
+  }
+  
+  @keyframes stretch {
+    0%, 100% { width: 200px; }
+    50% { width: 220px; }
+  }
+  
+  /* Section styling */
+  .section {
+    padding: var(--space-xxl) 0;
+    position: relative;
+  }
+  
+  .section-title {
+    text-align: center;
+    margin-bottom: var(--space-xxl);
+  }
+  
+  .section-title h2 {
+    margin-bottom: var(--space-md);
+  }
+  
+  .section-title p {
+    max-width: 700px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+  }
+  
+  .section-bg-dark {
+    background-color: var(--dark-blue);
+  }
+  
+  .section-bg-gradient {
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+  }
+  
+  /* Cards */
+  .card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    transition: all var(--transition-normal);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-md);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+  
+  .card-title {
+    font-size: 1.3rem;
+    margin-bottom: var(--space-md);
+  }
+  
+  .card-icon {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--white);
+    margin-bottom: var(--space-md);
+  }
+  
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-xl);
+  }
+  
+  /* Feature cards */
+  .feature-card {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+    padding: var(--space-xl);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-normal);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: var(--space-xl);
+  }
+  
+  .feature-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-md);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+  
+  .feature-icon {
+    min-width: 60px;
+    height: 60px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+  
+  .feature-icon-blue {
+    background: rgba(0, 164, 239, 0.15);
+    color: var(--blue);
+    border: 1px solid rgba(0, 164, 239, 0.3);
+  }
+  
+  .feature-icon-magenta {
+    background: rgba(255, 0, 102, 0.15);
+    color: var(--magenta);
+    border: 1px solid rgba(255, 0, 102, 0.3);
+  }
+  
+  .feature-icon-orange {
+    background: rgba(244, 128, 34, 0.15);
+    color: var(--orange);
+    border: 1px solid rgba(244, 128, 34, 0.3);
+  }
+  
+  .feature-content h3 {
+    margin-bottom: var(--space-sm);
+  }
+  
+  /* Stats */
+  .stats-section {
+    padding: var(--space-xxl) 0;
+    text-align: center;
+    position: relative;
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+  
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-xl);
+    text-align: center;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  
+  .stat-item {
+    padding: var(--space-md);
+  }
+  
+  .stat-number {
+    font-size: 3rem;
+    font-weight: 700;
+    margin-bottom: var(--space-xs);
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .stat-label {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  
+  /* Steps */
+  .steps-container {
+    counter-reset: step;
+    position: relative;
+  }
+  
+  .step-item {
+    position: relative;
+    padding-left: 70px;
+    margin-bottom: var(--space-xl);
+  }
+  
+  .step-item::before {
+    counter-increment: step;
+    content: counter(step);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: var(--white);
+  }
+  
+  .step-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 25px;
+    top: 50px;
+    bottom: -40px;
+    width: 2px;
+    background: linear-gradient(to bottom, var(--blue), transparent);
+  }
+  
+  .step-content h3 {
+    margin-bottom: var(--space-sm);
+  }
+  
+  /* Footer */
+  .footer {
+    background: var(--dark-blue);
+    padding: var(--space-xxl) 0 var(--space-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: var(--space-xl);
+  }
+  
+  .footer-brand {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .footer-brand img {
+    height: 40px;
+    margin-bottom: var(--space-md);
+  }
+  
+  .footer-brand p {
+    margin-bottom: var(--space-lg);
+    color: rgba(255, 255, 255, 0.7);
+  }
+  
+  .footer-social {
+    display: flex;
+    gap: var(--space-md);
+  }
+  
+  .social-link {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    transition: all var(--transition-fast);
+  }
+  
+  .social-link:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+    color: var(--white);
+  }
+  
+  .footer-nav h4 {
+    margin-bottom: var(--space-lg);
+    color: var(--white);
+    font-size: 1.1rem;
+  }
+  
+  .footer-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  
+  .footer-nav li {
+    margin-bottom: var(--space-sm);
+  }
+  
+  .footer-nav a {
+    color: rgba(255, 255, 255, 0.7);
+    transition: color var(--transition-fast);
+  }
+  
+  .footer-nav a:hover {
+    color: var(--white);
+  }
+  
+  .footer-bottom {
+    margin-top: var(--space-xxl);
+    padding-top: var(--space-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+  }
+  
+  .footer-copyright {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.875rem;
+  }
+  
+  .footer-links {
+    display: flex;
+    gap: var(--space-lg);
+  }
+  
+  .footer-links a {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.875rem;
+  }
+  
+  .footer-links a:hover {
+    color: var(--white);
+  }
+  
+  /* Background effects */
+  .bg-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+  }
+  
+  .bg-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.5;
+  }
+  
+  .bg-blob-1 {
+    top: -200px;
+    right: -100px;
+    width: 600px;
+    height: 600px;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 0, 0, 0));
+    animation: float 20s ease-in-out infinite alternate;
+  }
+  
+  .bg-blob-2 {
+    bottom: -150px;
+    left: -100px;
+    width: 500px;
+    height: 500px;
+    background: linear-gradient(135deg, rgba(0, 164, 239, 0.2), rgba(0, 0, 0, 0));
+    animation: float 15s ease-in-out infinite alternate-reverse;
+  }
+  
+  @keyframes float {
+    0% { transform: translate(0, 0) rotate(0deg); }
+    100% { transform: translate(40px, 40px) rotate(15deg); }
+  }
+  
+  /* Utilities */
+  .text-center {
+    text-align: center;
+  }
+  
+  .mb-sm {
+    margin-bottom: var(--space-sm);
+  }
+  
+  .mb-md {
+    margin-bottom: var(--space-md);
+  }
+  
+  .mb-lg {
+    margin-bottom: var(--space-lg);
+  }
+  
+  .mb-xl {
+    margin-bottom: var(--space-xl);
+  }
+  
+  .mt-sm {
+    margin-top: var(--space-sm);
+  }
+  
+  .mt-md {
+    margin-top: var(--space-md);
+  }
+  
+  .mt-lg {
+    margin-top: var(--space-lg);
+  }
+  
+  .mt-xl {
+    margin-top: var(--space-xl);
+  }
+  
+  .gradient-text {
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  /* Responsive styles */
+  @media screen and (max-width: 1024px) {
+    h1 {
+      font-size: 3rem;
+    }
+    
+    h2 {
+      font-size: 2.25rem;
+    }
+    
+    .hero-content {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+    
+    .hero-subtitle {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    .hero-buttons {
+      justify-content: center;
+    }
+    
+    .hero-animation {
+      margin-top: var(--space-xl);
+    }
+    
+    .footer-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-xl) var(--space-xxl);
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    h1 {
+      font-size: 2.5rem;
+    }
+    
+    h2 {
+      font-size: 2rem;
+    }
+    
+    .navbar-container {
+      position: relative;
+    }
+    
+    .nav-links {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      background: var(--dark-bg);
+      padding: var(--space-lg);
+      transform: translateY(-100%);
+      opacity: 0;
+      visibility: hidden;
+      transition: all var(--transition-normal);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .nav-links.active {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    .nav-links li {
+      margin: var(--space-sm) 0;
+    }
+    
+    .mobile-toggle {
+      display: block;
+    }
+    
+    .hero-buttons {
+      flex-direction: column;
+      width: 100%;
+      max-width: 300px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    .feature-card {
+      flex-direction: column;
+    }
+    
+    .footer-grid {
+      grid-template-columns: 1fr;
+      gap: var(--space-xl);
+    }
+    
+    .footer-bottom {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+  
+  @media screen and (max-width: 480px) {
+    .container {
+      padding: 0 var(--space-md);
+    }
+    
+    h1 {
+      font-size: 2rem;
+    }
+    
+    h2 {
+      font-size: 1.75rem;
+    }
+    
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  @media screen and (max-width: 768px) {
+    .notification-banner {
+      padding: 0.5rem 2rem 0.5rem 0.5rem;
+      font-size: 0.9rem;
+    }
+    
+    .notification-banner span {
+      display: inline;
+    }
+    
+    .notification-banner .notification-link {
+      margin: 0 0.25rem;
+    }
+  }
+  
+  @media screen and (max-width: 480px) {
+    .notification-banner {
+      padding: 0.5rem 2rem 0.5rem 0.5rem;
+      font-size: 0.8rem;
+      line-height: 1.4;
+    }
+    
+    .notification-banner span {
+      display: inline;
+    }
+    
+    .notification-banner .notification-link {
+      margin: 0.25rem;
+      padding: 0.15rem 0.35rem;
+    }
+  }
+  
+  /* DNAnalyzer Disclaimer CSS Update */
+.disclaimer-section {
+  padding: 1rem 0;
+  background: transparent !important; /* Override any dark background */
+}
+
+.disclaimer-content {
+  max-width: 90%;
+  margin: 0 auto;
+  background-color: rgba(30, 30, 40, 0.4); /* Subtle dark background */
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.disclaimer-title {
+  font-size: 0.85rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.75;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.disclaimer-text {
+  font-size: 0.7rem;
+   opacity: 0.65;
+   line-height: 1.4;
+   color: rgba(255, 255, 255, 0.7);
+}
+
+/* Futuristic Notification Effects */
+@keyframes notifPulse {
+    0% { box-shadow: 0 0 5px #FF9100; }
+    50% { box-shadow: 0 0 20px #FF9100; }
+    100% { box-shadow: 0 0 5px #FF9100; }
+}
+
+/* JavaScript will add this class when scrolling down */
+.hide-notification {
+    transform: translateY(-100%);
+}
+
+/* Scroll-based animations */
+.scroll-animate {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate.animate-in {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.scroll-animate-delay-1 {
+  transition-delay: 0.2s;
+}
+
+.scroll-animate-delay-2 {
+  transition-delay: 0.4s;
+}
+
+.scroll-animate-delay-3 {
+  transition-delay: 0.6s;
+}
+
+.scroll-animate-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-right.animate-in {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-animate-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-left.animate-in {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.scroll-animate-scale {
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.scroll-animate-scale.animate-in {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Interactive particles */
+.particles-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.floating-particle {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  pointer-events: none;
+  transition: transform 0.3s ease;
+}
+--------------------------------------------------
+
+Directory: about
+==================================================
+File: ./web/about/about.js
+--------------------------------------------------
+/*
+ * DNAnalyzer About Page JavaScript
+ * Copyright © 2025 Piyush Acharya
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile navigation toggle
+    const mobileToggle = document.getElementById('mobileToggle');
+    const navLinks = document.getElementById('navLinks');
+
+    if (mobileToggle && navLinks) {
+        mobileToggle.addEventListener('click', function() {
+            navLinks.classList.toggle('active');
+            mobileToggle.querySelector('i').classList.toggle('fa-bars');
+            mobileToggle.querySelector('i').classList.toggle('fa-times');
+        });
+    }
+
+    // Navbar scroll behavior
+    const navbar = document.getElementById('navbar');
+    
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 100) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Timeline animation - Adding view animation
+    const timelineItems = document.querySelectorAll('.timeline-item');
+    
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+    
+    const timelineObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = entry.target.classList.contains('timeline-item:nth-child(odd)') 
+                    ? 'translateX(0)' 
+                    : 'translateX(0)';
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    timelineItems.forEach(item => {
+        item.style.opacity = '0';
+        item.style.transform = item.classList.contains('timeline-item:nth-child(odd)') 
+            ? 'translateX(-20px)' 
+            : 'translateX(20px)';
+        item.style.transition = 'all 0.7s ease-out';
+        timelineObserver.observe(item);
+    });
+
+    // Handle Vision Hexagon Hover/Click Interaction
+    const hexagons = document.querySelectorAll('.hexagon');
+    const visionDetails = document.querySelectorAll('.vision-detail');
+    
+    // Set first vision detail as active by default
+    if (visionDetails.length > 0) {
+        visionDetails[0].classList.add('active');
+    }
+    
+    hexagons.forEach((hexagon, index) => {
+        hexagon.addEventListener('mouseenter', () => {
+            // Remove active class from all vision details
+            visionDetails.forEach(detail => {
+                detail.classList.remove('active');
+            });
+            
+            // Add active class to corresponding vision detail
+            if (visionDetails[index]) {
+                visionDetails[index].classList.add('active');
+            }
+        });
+        
+        hexagon.addEventListener('click', () => {
+            // Remove active class from all vision details
+            visionDetails.forEach(detail => {
+                detail.classList.remove('active');
+            });
+            
+            // Add active class to corresponding vision detail
+            if (visionDetails[index]) {
+                visionDetails[index].classList.add('active');
+                
+                // If on mobile, scroll to the detail
+                if (window.innerWidth < 992) {
+                    visionDetails[index].scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                    });
+                }
+            }
+        });
+    });
+    
+    // Add some interactivity to stats
+    animateStats();
+});
+
+/**
+ * Animates the stat numbers with a counting effect
+ */
+function animateStats() {
+    const statNumbers = document.querySelectorAll('.stat-number[data-count]');
+    
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+    
+    const statsObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const targetNumber = parseInt(entry.target.getAttribute('data-count'), 10);
+                const duration = 2000; // Animation duration in milliseconds
+                const startTime = performance.now();
+                
+                function updateCounter(currentTime) {
+                    const elapsedTime = currentTime - startTime;
+                    const progress = Math.min(elapsedTime / duration, 1);
+                    const easeProgress = easeOutQuad(progress);
+                    const currentCount = Math.floor(easeProgress * targetNumber);
+                    
+                    entry.target.textContent = currentCount;
+                    
+                    if (progress < 1) {
+                        requestAnimationFrame(updateCounter);
+                    } else {
+                        entry.target.textContent = targetNumber;
+                    }
+                }
+                
+                requestAnimationFrame(updateCounter);
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    
+    statNumbers.forEach(statNumber => {
+        statsObserver.observe(statNumber);
+    });
+}
+
+/**
+ * Easing function for smoother animation
+ * @param {number} t - Progress value between 0 and 1
+ * @return {number} Eased value
+ */
+function easeOutQuad(t) {
+    return t * (2 - t);
+}
+
+// Add a subtle parallax effect to the background blobs
+window.addEventListener('mousemove', function(e) {
+    const blobs = document.querySelectorAll('.bg-blob');
+    
+    blobs.forEach(blob => {
+        const speed = blob.classList.contains('bg-blob-1') ? 0.03 : 0.02;
+        const x = (window.innerWidth / 2 - e.clientX) * speed;
+        const y = (window.innerHeight / 2 - e.clientY) * speed;
+        
+        blob.style.transform = `translate(${x}px, ${y}px)`;
+    });
+});
+--------------------------------------------------
+File: ./web/about/about.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - DNAnalyzer</title>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="about.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <!-- Background effects -->
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="../index.html" class="logo">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../features/features.html">Features</a></li>
+                <li><a href="../analyzer/analyzer.html">Analyzer</a></li>
+                <li><a href="../server/server.html">Server</a></li>
+                <li><a href="../docs/docs.html">Docs</a></li>
+                <li><a href="about.html" class="active">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main>
+        <section class="about-hero">
+            <div class="container">
+                <div class="about-hero-content">
+                    <h1>About <span class="gradient-text">DNAnalyzer</span></h1>
+                    <p>Revolutionizing DNA analysis through advanced machine learning and efficient computation</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section mission-section">
+            <div class="container">
+                <div class="section-content">
+                    <div class="section-header">
+                        <h2>Our Mission</h2>
+                        <div class="section-divider"></div>
+                    </div>
+                    <p class="mission-text">DNAnalyzer aims to democratize DNA analysis by providing powerful,
+                        accessible tools for researchers, clinicians, and scientists worldwide. We're committed to
+                        advancing genomic research through innovative technology and open collaboration.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section values-section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Our Core Values</h2>
+                    <div class="section-divider"></div>
+                </div>
+
+                <div class="values-grid">
+                    <div class="value-card">
+                        <div class="value-icon">
+                            <i class="fas fa-dna"></i>
+                        </div>
+                        <h3>Innovation</h3>
+                        <p>Leveraging cutting-edge technology and machine learning to provide accurate, comprehensive
+                            DNA analysis capabilities.</p>
+                    </div>
+
+                    <div class="value-card">
+                        <div class="value-icon">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <h3>Accessibility</h3>
+                        <p>Making advanced DNA analysis tools available to researchers and clinicians worldwide through
+                            an intuitive interface.</p>
+                    </div>
+
+                    <div class="value-card">
+                        <div class="value-icon">
+                            <i class="fas fa-shield-alt"></i>
+                        </div>
+                        <h3>Privacy</h3>
+                        <p>Ensuring user data remains secure and private with our on-device processing approach and
+                            transparent practices.</p>
+                    </div>
+
+                    <div class="value-card">
+                        <div class="value-icon">
+                            <i class="fas fa-flask"></i>
+                        </div>
+                        <h3>Scientific Rigor</h3>
+                        <p>Maintaining the highest standards of accuracy and reliability through extensive testing and
+                            validation.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section technology-section section-dark">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Our Technology</h2>
+                    <div class="section-divider"></div>
+                </div>
+
+                <div class="tech-showcase">
+                    <div class="tech-image">
+                        <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Technology" class="tech-logo">
+                    </div>
+
+                    <div class="tech-features">
+                        <div class="tech-feature">
+                            <div class="feature-icon">
+                                <i class="fas fa-microchip"></i>
+                            </div>
+                            <div class="feature-content">
+                                <h3>Advanced Analysis</h3>
+                                <p>Identifies proteins, amino acids, start and stop codons, high coverage regions, and
+                                    regulatory elements with high accuracy.</p>
+                            </div>
+                        </div>
+
+                        <div class="tech-feature">
+                            <div class="feature-icon">
+                                <i class="fas fa-brain"></i>
+                            </div>
+                            <div class="feature-content">
+                                <h3>Machine Learning</h3>
+                                <p>Utilizes advanced algorithms and ML models to process and analyze DNA sequences
+                                    efficiently.</p>
+                            </div>
+                        </div>
+
+                        <div class="tech-feature">
+                            <div class="feature-icon">
+                                <i class="fas fa-server"></i>
+                            </div>
+                            <div class="feature-content">
+                                <h3>Scalable Platform</h3>
+                                <p>Built on modern technology stack ensuring fast processing of large sequences and
+                                    reliable performance.</p>
+                            </div>
+                        </div>
+
+                        <div class="tech-feature">
+                            <div class="feature-icon">
+                                <i class="fas fa-user-shield"></i>
+                            </div>
+                            <div class="feature-content">
+                                <h3>Privacy-First Design</h3>
+                                <p>All processing happens on your device, ensuring your genetic data remains private and
+                                    secure.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section timeline-section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Our Journey</h2>
+                    <div class="section-divider"></div>
+                    <p class="section-subtitle">The evolution of DNAnalyzer from concept to cutting-edge DNA analysis
+                        platform</p>
+                </div>
+
+                <div class="vertical-timeline">
+                    <!-- First milestone -->
+                    <div class="timeline-milestone">
+                        <div class="milestone-year">2022</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>Project Inception</h3>
+                            <p>Piyush Acharya initiates DNAnalyzer as a response to privacy concerns and high costs in
+                                the field of personal genomics.</p>
+                        </div>
+                    </div>
+
+                    <!-- Second milestone -->
+                    <div class="timeline-milestone milestone-right">
+                        <div class="milestone-year">2023</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>Team Expansion</h3>
+                            <p>Collaborator @LimesKey joins, and the project attracts its first contributors from the
+                                computational biology community.</p>
+                        </div>
+                    </div>
+
+                    <!-- Third milestone -->
+                    <div class="timeline-milestone">
+                        <div class="milestone-year">2023</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>Nonprofit Foundation</h3>
+                            <p>DNAnalyzer becomes a fiscally sponsored 501(c)(3) nonprofit organization (EIN:
+                                81-2908499) to advance DNA analysis technology.</p>
+                        </div>
+                    </div>
+
+                    <!-- Fourth milestone -->
+                    <div class="timeline-milestone milestone-right">
+                        <div class="milestone-year">2024</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>ML Integration</h3>
+                            <p>Launch of machine learning components with the "DNAI" model, significantly enhancing
+                                analysis capabilities.</p>
+                        </div>
+                    </div>
+
+                    <!-- Fifth milestone -->
+                    <div class="timeline-milestone">
+                        <div class="milestone-year">2024</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>Web Platform</h3>
+                            <p>Release of the comprehensive web interface, making DNA analysis accessible to researchers
+                                worldwide.</p>
+                        </div>
+                    </div>
+
+                    <!-- Sixth milestone -->
+                    <div class="timeline-milestone milestone-right">
+                        <div class="milestone-year">2025</div>
+                        <div class="milestone-dot"></div>
+                        <div class="milestone-card">
+                            <h3>Open Source Growth</h3>
+                            <p>Community expands to 46+ contributors, including scientists from leading research
+                                institutions around the world.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section team-section section-dark">
+            <div class="container">
+                <div class="section-header">
+                    <h2>Meet Our Leadership</h2>
+                    <div class="section-divider"></div>
+                </div>
+
+                <div class="team-horizontal">
+                    <div class="team-card">
+                        <div class="team-avatar">
+                            <img src="../assets/icons/Icon_Dark_BG.svg" alt="Piyush Acharya">
+                        </div>
+                        <div class="team-info">
+                            <h3>Piyush Acharya</h3>
+                            <p class="team-role">Founder & Lead Developer</p>
+                            <p class="team-bio">Initiated DNAnalyzer to democratize genome analysis and make it
+                                accessible while ensuring privacy.</p>
+                            <div class="team-social">
+                                <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
+                                <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                                <a href="https://www.x.com/DNAnalyzer_" class="social-icon"><i
+                                        class="fab fa-twitter"></i></a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="team-card">
+                        <div class="team-avatar">
+                            <img src="../assets/icons/Icon_Dark_BG.svg" alt="LimesKey">
+                        </div>
+                        <div class="team-info">
+                            <h3>@LimesKey</h3>
+                            <p class="team-role">Co-Lead & ML Specialist</p>
+                            <p class="team-bio">Leads the machine learning initiatives and computational biology aspects
+                                of DNAnalyzer.</p>
+                            <div class="team-social">
+                                <a href="#" class="social-icon"><i class="fab fa-github"></i></a>
+                                <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
+                                <a href="https://www.x.com/DNAnalyzer_" class="social-icon"><i
+                                        class="fab fa-twitter"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="community-card">
+                    <div class="community-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3>Open Source Community</h3>
+                    <p class="community-count">46+ Contributors</p>
+                    <p class="community-description">Dedicated contributors from Microsoft Research, University of
+                        Macedonia, Northeastern University, and more.</p>
+                    <div class="community-links">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                            <i class="fab fa-github btn-icon"></i> GitHub
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="btn btn-secondary btn-sm">
+                            <i class="fab fa-discord btn-icon"></i> Discord
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section stats-section">
+            <div class="container">
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <i class="fas fa-star"></i>
+                        </div>
+                        <div class="stat-number" data-count="141">141</div>
+                        <div class="stat-label">GitHub Stars</div>
+                    </div>
+
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <i class="fas fa-code-branch"></i>
+                        </div>
+                        <div class="stat-number" data-count="46">46</div>
+                        <div class="stat-label">Contributors</div>
+                    </div>
+
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <i class="fas fa-dna"></i>
+                        </div>
+                        <div class="stat-number" data-count="5">5</div>
+                        <div class="stat-suffix">M+</div>
+                        <div class="stat-label">DNA Sequences Analyzed</div>
+                    </div>
+
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <i class="fas fa-globe"></i>
+                        </div>
+                        <div class="stat-label">Global Impact</div>
+                        <div class="stat-description">Users from 42 countries</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section future-vision-section">
+            <div class="container">
+                <div class="section-header">
+                    <h2>The Future of DNAnalyzer</h2>
+                    <div class="section-divider"></div>
+                </div>
+
+                <div class="future-grid-container">
+                    <div class="future-center">
+                        <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo" class="center-logo">
+                    </div>
+
+                    <div class="future-card top-left">
+                        <div class="future-card-inner">
+                            <div class="future-icon">
+                                <i class="fas fa-brain"></i>
+                            </div>
+                            <h3>Neural Networks</h3>
+                            <div class="future-detail">
+                                <p>Our next-generation neural networks will process genotyped data from consumer DNA
+                                    tests with unprecedented accuracy.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="future-card top-right">
+                        <div class="future-card-inner">
+                            <div class="future-icon">
+                                <i class="fas fa-project-diagram"></i>
+                            </div>
+                            <h3>DIAMOND Integration</h3>
+                            <div class="future-detail">
+                                <p>Integration with the DIAMOND sequence aligner will deliver up to 20,000x faster
+                                    sequence alignment compared to traditional methods.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="future-card bottom-left">
+                        <div class="future-card-inner">
+                            <div class="future-icon">
+                                <i class="fas fa-database"></i>
+                            </div>
+                            <h3>Genomic Database</h3>
+                            <div class="future-detail">
+                                <p>A high-performance SQL database architecture specially designed for genomic data
+                                    integration across thousands of species.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="future-card bottom-right">
+                        <div class="future-card-inner">
+                            <div class="future-icon">
+                                <i class="fas fa-layer-group"></i>
+                            </div>
+                            <h3>Advanced Analysis</h3>
+                            <div class="future-detail">
+                                <p>Upcoming modules for repeat element detection, CRISPR site identification, and
+                                    comprehensive protein domain searches.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section cta-section section-dark">
+            <div class="container">
+                <div class="cta-content">
+                    <h2>Join Our Community</h2>
+                    <p>Contribute to the future of DNA analysis technology and help us make genomic insights accessible
+                        to all.</p>
+                    <div class="cta-buttons">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-primary">
+                            <i class="fab fa-github btn-icon"></i> Join on GitHub
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="btn btn-secondary">
+                            <i class="fab fa-discord btn-icon"></i> Join Discord
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                    <p>DNAnalyzer is a powerful, privacy-focused DNA analysis tool using cutting-edge machine learning
+                        models for accurate, on-device genomic analysis.</p>
+
+                    <div class="footer-social">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="social-link">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="https://www.x.com/DNAnalyzer_" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="../features/features.html">Features</a></li>
+                        <li><a href="../analyzer/analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="../server/server.html">Server</a></li>
+                        <li><a href="../docs/docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="../docs/getting-started.md">Getting Started</a></li>
+                        <li><a href="../docs/citations.md">Citations</a></li>
+                        <li><a href="../docs/research/genes.md">Gene Research</a></li>
+                        <li><a href="../docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="../docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                    81-2908499). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="../LICENSE.md">License</a>
+                    <a href="../SECURITY.md">Security</a>
+                    <a href="../CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="about.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+File: ./web/about/about.css
+--------------------------------------------------
+/* About Page Styles */
+
+/* General section styling */
+.section {
+    padding: 5rem 0;
+}
+
+.section-dark {
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    position: relative;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.section-divider {
+    width: 80px;
+    height: 4px;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    margin: 1rem auto;
+    border-radius: 2px;
+}
+
+.section-subtitle {
+    max-width: 700px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.section-content {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+/* Hero section */
+.about-hero {
+    padding: 9rem 0 5rem;
+    text-align: center;
+    position: relative;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+}
+
+.about-hero-content h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.about-hero-content p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Mission section */
+.mission-section {
+    text-align: center;
+}
+
+.mission-text {
+    font-size: 1.3rem;
+    line-height: 1.8;
+    max-width: 900px;
+    margin: 0 auto;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Values section */
+.values-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.value-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.value-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.value-icon {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.15), rgba(0, 164, 239, 0.15));
+    border: 2px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.value-card:hover .value-icon {
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.3), rgba(0, 164, 239, 0.3));
+    transform: scale(1.1);
+}
+
+.value-icon i {
+    font-size: 1.8rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.value-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--white);
+}
+
+.value-card p {
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.6;
+}
+
+/* Technology section */
+.tech-showcase {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 4rem;
+    align-items: center;
+}
+
+.tech-image {
+    text-align: center;
+}
+
+.tech-logo {
+    max-width: 100%;
+    height: auto;
+    max-height: 300px;
+    animation: pulse 3s infinite alternate;
+}
+
+@keyframes pulse {
+    from {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    to {
+        transform: scale(1.05);
+        opacity: 1;
+    }
+}
+
+.tech-features {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+}
+
+.tech-feature {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.tech-feature:hover {
+    transform: translateX(10px);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.feature-icon {
+    flex-shrink: 0;
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 164, 239, 0.2));
+    transition: all 0.3s ease;
+}
+
+.tech-feature:hover .feature-icon {
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.3), rgba(0, 164, 239, 0.3));
+    transform: scale(1.1);
+}
+
+.feature-icon i {
+    font-size: 1.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.feature-content h3 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1.2rem;
+}
+
+.feature-content p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Timeline section - completely rewritten */
+.timeline-section {
+    position: relative;
+    padding: 5rem 0;
+}
+
+.vertical-timeline {
+    position: relative;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 2rem 0;
+}
+
+.vertical-timeline::before {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(to bottom, var(--magenta), var(--blue));
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+}
+
+.timeline-milestone {
+    display: flex;
+    position: relative;
+    margin-bottom: 3rem;
+}
+
+.milestone-year {
+    position: absolute;
+    left: calc(50% - 60px);
+    transform: translateX(-50%);
+    background: var(--dark-blue);
+    color: var(--blue);
+    font-weight: 600;
+    z-index: 2;
+    padding: 0.2rem 0;
+}
+
+.milestone-dot {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.milestone-card {
+    width: 40%;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-left: auto;
+    margin-right: 60px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.milestone-right .milestone-card {
+    margin-left: 60px;
+    margin-right: auto;
+}
+
+.milestone-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.milestone-card h3 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 1.3rem;
+}
+
+.milestone-card p {
+    margin-bottom: 0;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Connecting lines from timeline to cards */
+.milestone-card::before {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 2px;
+    background: linear-gradient(to right, var(--magenta), var(--blue));
+    top: 10px;
+    right: -20px;
+}
+
+.milestone-right .milestone-card::before {
+    left: -20px;
+    right: auto;
+}
+
+
+/* Team section */
+.team-horizontal {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+}
+
+.team-card {
+    display: flex;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    flex: 1;
+    min-width: 300px;
+    gap: 1.5rem;
+    align-items: center;
+}
+
+.team-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.team-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.1), rgba(0, 164, 239, 0.1));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.team-avatar img {
+    width: 60%;
+    height: auto;
+}
+
+.team-info {
+    flex-grow: 1;
+}
+
+.team-info h3 {
+    margin-top: 0;
+    margin-bottom: 0.3rem;
+    font-size: 1.4rem;
+}
+
+.team-role {
+    color: var(--blue);
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
+}
+
+.team-bio {
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 1rem;
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.team-social {
+    display: flex;
+    gap: 0.8rem;
+}
+
+.social-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--white);
+    transition: all 0.3s ease;
+}
+
+.social-icon:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-3px);
+}
+
+/* Community Card */
+.community-card {
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.1), rgba(0, 164, 239, 0.1));
+    border-radius: 16px;
+    padding: 2.5rem;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.community-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.community-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    margin: 0 auto 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.community-icon i {
+    font-size: 2rem;
+    color: white;
+}
+
+.community-card h3 {
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+}
+
+.community-count {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--blue);
+    margin-bottom: 1rem;
+}
+
+.community-description {
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+.community-links {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+/* Stats section */
+.stats-section {
+    padding: 4rem 0;
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.8), rgba(0, 20, 39, 0.8));
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 2rem;
+    text-align: center;
+}
+
+.stat-item {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 2rem 1rem;
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 164, 239, 0.2));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem;
+}
+
+.stat-icon i {
+    font-size: 1.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.2rem;
+    display: inline-block;
+}
+
+.stat-suffix {
+    font-size: 1.8rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.stat-label {
+    color: var(--white);
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+.stat-description {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.9rem;
+}
+
+/* Future Vision Section - completely rewritten */
+.future-vision-section {
+    padding: 6rem 0;
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.5), rgba(0, 20, 39, 0.5));
+    position: relative;
+    overflow: hidden;
+}
+
+.future-grid-container {
+    position: relative;
+    width: 100%;
+    max-width: 1100px;
+    height: 550px;
+    margin: 0 auto;
+}
+
+.future-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.3), rgba(0, 164, 239, 0.3));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    box-shadow: 0 0 30px rgba(0, 164, 239, 0.4);
+}
+
+.center-logo {
+    width: 60%;
+    height: auto;
+    animation: pulse-grow 3s infinite alternate;
+}
+
+@keyframes pulse-grow {
+    from {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    to {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+}
+
+/* Diagonal lines */
+.future-grid-container::before,
+.future-grid-container::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(0, 164, 239, 0.2));
+    height: 2px;
+    width: 70%;
+    transform-origin: center;
+    z-index: 1;
+}
+
+.future-grid-container::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.future-grid-container::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.future-card {
+    position: absolute;
+    width: 240px;
+    height: 150px;
+    z-index: 2;
+}
+
+.future-card-inner {
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.future-card-inner:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+}
+
+.future-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.8rem;
+}
+
+.future-icon i {
+    font-size: 1.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.future-card h3 {
+    font-size: 1rem;
+    margin: 0 0 0.5rem 0;
+    color: var(--white);
+}
+
+.future-detail {
+    display: none;
+    margin-top: 0.5rem;
+}
+
+.future-card-inner:hover .future-detail {
+    display: block;
+}
+
+.future-detail p {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0;
+    line-height: 1.4;
+}
+
+/* Card positioning exactly matching the image */
+.top-left {
+    top: 25%;
+    left: 0;
+    transform: translateY(-50%);
+}
+
+.top-right {
+    top: 25%;
+    right: 0;
+    transform: translateY(-50%);
+}
+
+.bottom-left {
+    bottom: 25%;
+    left: 0;
+    transform: translateY(50%);
+}
+
+.bottom-right {
+    bottom: 25%;
+    right: 0;
+    transform: translateY(50%);
+}
+
+/* Connecting lines */
+.hexagon-container::before,
+.hexagon-container::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    height: 1px;
+    background: linear-gradient(to right, rgba(255, 0, 102, 0.3), rgba(0, 164, 239, 0.3));
+    z-index: 1;
+}
+
+.hexagon-container::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.hexagon-container::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.vision-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.vision-detail {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.vision-detail.active {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    transform: translateY(-5px) translateX(10px);
+}
+
+.vision-detail h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    margin-top: 0;
+    margin-bottom: 0.8rem;
+    font-size: 1.3rem;
+}
+
+.vision-detail h3 i {
+    font-size: 1.2rem;
+    color: var(--blue);
+}
+
+.vision-detail p {
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* CTA Section */
+.cta-section {
+    text-align: center;
+    padding: 5rem 0;
+}
+
+.cta-content h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.cta-content p {
+    max-width: 600px;
+    margin: 0 auto 2rem;
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.cta-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+/* Media Queries */
+@media screen and (max-width: 1200px) {
+    .vision-container {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+    
+    .vision-canvas {
+        height: 400px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .tech-showcase {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+    
+    /* Timeline responsive styles */
+    .vertical-timeline::before {
+        left: 30px;
+    }
+    
+    .timeline-milestone {
+        margin-left: 30px;
+    }
+    
+    .milestone-dot {
+        left: 30px;
+
+@media screen and (max-width: 768px) {
+    .about-hero-content h1 {
+        font-size: 2.8rem;
+    }
+    
+    .section-header h2 {
+        font-size: 2rem;
+    }
+    
+    .mission-text {
+        font-size: 1.1rem;
+    }
+    
+    .hexagon {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .hex-content {
+        width: 130px;
+        height: 130px;
+    }
+    
+    .hex-icon {
+        width: 40px;
+        height: 40px;
+    }
+    
+    .hex-content h3 {
+        font-size: 0.85rem;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .about-hero-content h1 {
+        font-size: 2.3rem;
+    }
+    
+    .about-hero-content p {
+        font-size: 1rem;
+    }
+    
+    .section {
+        padding: 3rem 0;
+    }
+    
+    .timeline-content {
+        padding: 1rem;
+    }
+    
+    .timeline-item {
+        padding-left: 4rem;
+    }
+    
+    .timeline-item:nth-child(odd) {
+        padding-left: 4rem;
+    }
+    
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .vision-canvas {
+        height: 350px;
+    }
+    
+    .hexagon-center {
+        width: 100px;
+        height: 100px;
+    }
+    
+    .hexagon {
+        width: 120px;
+        height: 120px;
+    }
+    
+    .hex-content {
+        width: 100px;
+        height: 100px;
+    }
+}
+--------------------------------------------------
+
+Directory: analyzer
+==================================================
+File: ./web/analyzer/analyzer.css
+--------------------------------------------------
+/* Analyzer Page Specific Styles */
+
+/* Main layout */
+.analyzer-main {
+    padding-top: 100px;
+    min-height: calc(100vh - 100px);
+}
+
+.analyzer-header {
+    text-align: center;
+    margin-bottom: var(--space-xl);
+}
+
+.analyzer-header h1 {
+    margin-bottom: var(--space-md);
+}
+
+.analyzer-header p {
+    font-size: 1.1rem;
+    max-width: 600px;
+    margin: 0 auto;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Dashboard layout */
+.analyzer-dashboard {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: var(--space-xl);
+    margin-bottom: var(--space-xxl);
+}
+
+/* Sidebar */
+.dashboard-sidebar {
+    position: sticky;
+    top: 100px;
+    height: fit-content;
+}
+
+.sidebar-section {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    margin-bottom: var(--space-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.sidebar-section h3 {
+    font-size: 1.1rem;
+    margin-bottom: var(--space-md);
+    color: var(--white);
+}
+
+/* History list */
+.history-list {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-sm);
+}
+
+.history-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-lg);
+    color: rgba(255, 255, 255, 0.5);
+    text-align: center;
+}
+
+.history-empty i {
+    font-size: 1.5rem;
+    margin-bottom: var(--space-sm);
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-xs);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.history-item i {
+    color: var(--blue);
+    font-size: 1rem;
+}
+
+.history-details {
+    flex: 1;
+    overflow: hidden;
+}
+
+.history-name {
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--white);
+}
+
+.history-time {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Quick actions */
+.quick-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.sidebar-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    color: var(--white);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.sidebar-btn:hover {
+    background: rgba(255, 255, 255, 0.12);
+    transform: translateY(-2px);
+}
+
+.sidebar-btn i {
+    color: var(--blue);
+}
+
+/* API Status */
+.api-status-container {
+    margin-bottom: 0;
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+}
+
+.status-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--medium-gray);
+}
+
+.status-dot.pulse {
+    animation: pulse 1.5s infinite;
+}
+
+.status-dot.online {
+    background: var(--success);
+}
+
+.status-dot.offline {
+    background: var(--error);
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.9);
+        opacity: 0.7;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(0.9);
+        opacity: 0.7;
+    }
+}
+
+/* Dashboard content */
+.dashboard-content {
+    min-height: 500px;
+}
+
+/* Tabs */
+.analyzer-tabs {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.tab-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.tab-btn.active {
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.15), rgba(0, 164, 239, 0.15));
+    border-color: transparent;
+    border-bottom: 2px solid var(--blue);
+    color: var(--white);
+}
+
+.tab-btn i {
+    color: var(--blue);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* File upload */
+.analyzer-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xxl) var(--space-md);
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px dashed rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius-lg);
+    text-align: center;
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    margin-bottom: var(--space-xl);
+}
+
+.analyzer-upload:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--blue);
+    transform: translateY(-2px);
+}
+
+.analyzer-upload.drag-over {
+    background: rgba(0, 164, 239, 0.1);
+    border-color: var(--blue);
+}
+
+.analyzer-upload i {
+    font-size: 3rem;
+    color: var(--blue);
+    margin-bottom: var(--space-md);
+}
+
+.analyzer-upload h3 {
+    margin-bottom: var(--space-sm);
+    color: var(--white);
+}
+
+.analyzer-upload p {
+    margin-bottom: var(--space-lg);
+    color: rgba(255, 255, 255, 0.7);
+    max-width: 400px;
+}
+
+.upload-formats {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Batch upload */
+.batch-upload {
+    margin-bottom: var(--space-xl);
+}
+
+.batch-files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin: var(--space-lg) 0;
+}
+
+.batch-file {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+}
+
+.batch-status {
+    margin-left: auto;
+    font-size: 0.9rem;
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.batch-status.queued {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.batch-status.processing {
+    background: rgba(0, 164, 239, 0.2);
+    color: var(--blue);
+}
+
+.batch-status.completed {
+    background: rgba(40, 167, 69, 0.2);
+    color: var(--success);
+}
+
+.batch-status.error {
+    background: rgba(220, 53, 69, 0.2);
+    color: var(--error);
+}
+
+.batch-progress {
+    margin-top: var(--space-lg);
+}
+
+.progress-container {
+    width: 100%;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin-bottom: var(--space-sm);
+}
+
+.progress-bar {
+    height: 100%;
+    background: var(--blue);
+    transition: width 0.3s ease;
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Genetic testing forms */
+.genetic-testing-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.form-section {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.form-section h3 {
+    margin-bottom: var(--space-md);
+    font-size: 1.1rem;
+}
+
+.form-group {
+    margin-bottom: var(--space-md);
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: var(--space-xs);
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.form-control {
+    width: 100%;
+    padding: var(--space-sm) var(--space-md);
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    color: var(--white);
+    font-size: 0.9rem;
+    transition: all var(--transition-fast);
+}
+
+.form-control:focus {
+    border-color: var(--blue);
+    outline: none;
+}
+
+.form-select {
+    height: 42px;
+}
+
+.testing-options {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+}
+
+.test-option {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+}
+
+.test-option:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-2px);
+}
+
+.test-option.selected {
+    border-color: var(--blue);
+    background: rgba(0, 164, 239, 0.1);
+}
+
+.test-option-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-sm);
+}
+
+.test-option-header i {
+    color: var(--blue);
+}
+
+.test-option p {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* File preview */
+.file-preview {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    margin-bottom: var(--space-lg);
+    width: 100%;
+    max-width: 500px;
+}
+
+.file-icon {
+    font-size: 2rem;
+    color: var(--blue);
+    margin-right: var(--space-md);
+}
+
+.file-info {
+    flex: 1;
+}
+
+.file-name {
+    font-weight: 500;
+    color: var(--white);
+    margin-bottom: var(--space-xs);
+}
+
+.file-size {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.file-remove {
+    color: rgba(255, 255, 255, 0.5);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--space-xs);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.file-remove:hover {
+    color: var(--white);
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Analysis options */
+.analysis-options {
+    margin-bottom: var(--space-xl);
+}
+
+.analysis-options > h3 {
+    margin-bottom: var(--space-lg);
+    font-size: 1.2rem;
+}
+
+.options-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.option-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-lg);
+    padding: var(--space-lg);
+    transition: all var(--transition-normal);
+}
+
+.option-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.option-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-md);
+}
+
+.option-header i {
+    color: var(--blue);
+    font-size: 1.1rem;
+}
+
+.option-header h4 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: var(--white);
+}
+
+.option-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+
+/* Custom checkbox */
+.option-checkbox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    cursor: pointer;
+    padding: var(--space-xs) 0;
+    padding-left: 36px; /* Add left padding to make room for the checkmark */
+    user-select: none;
+    color: rgba(255, 255, 255, 0.8);
+    transition: all var(--transition-fast);
+}
+
+.option-checkbox:hover {
+    color: var(--white);
+}
+
+.option-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.checkmark {
+    position: absolute;
+    left: 0;
+    top: 50%; /* Center vertically */
+    transform: translateY(-50%); /* Center vertically */
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+}
+
+.option-checkbox:hover .checkmark {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.option-checkbox input:checked ~ .checkmark {
+    background: var(--blue);
+    border-color: var(--blue);
+}
+
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+.option-checkbox input:checked ~ .checkmark:after {
+    display: block;
+}
+
+.option-checkbox .checkmark:after {
+    left: 7px;
+    top: 3px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+/* Analyze button */
+.analyze-btn {
+    width: 100%;
+    padding: var(--space-lg);
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    border: none;
+    border-radius: var(--radius-md);
+    color: var(--white);
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+}
+
+.analyze-btn:hover {
+    background: linear-gradient(135deg, var(--blue), var(--magenta));
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.analyze-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+/* Results section */
+.analyzer-results {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    margin-bottom: var(--space-xxl);
+}
+
+.results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-lg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.results-header h2 {
+    margin: 0;
+    font-size: 1.3rem;
+}
+
+.results-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+}
+
+.results-file-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.9rem;
+}
+
+.results-content {
+    padding: var(--space-xl);
+}
+
+/* Results grid layout */
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.result-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    text-align: center;
+    transition: all var(--transition-normal);
+}
+
+.result-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+}
+
+.result-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--blue);
+    margin-bottom: var(--space-xs);
+}
+
+.result-label {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.result-card.wide {
+    grid-column: 1 / -1;
+}
+
+/* Charts and visualizations */
+.chart-container {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.base-composition {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--space-lg);
+}
+
+.base-bar {
+    flex: 1;
+    height: 32px;
+    display: flex;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.base-segment {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all var(--transition-normal);
+}
+
+.base-segment:hover {
+    filter: brightness(1.1);
+}
+
+.base-a { background-color: var(--magenta); }
+.base-t { background-color: var(--blue); }
+.base-g { background-color: var(--orange); }
+.base-c { background-color: #34c759; }
+
+.base-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.color-box {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+}
+
+/* Results table */
+.results-table-container {
+    margin-bottom: var(--space-xl);
+}
+
+.results-table-container h3 {
+    margin-bottom: var(--space-md);
+    font-size: 1.2rem;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.results-table th {
+    text-align: left;
+    padding: var(--space-md);
+    background: rgba(0, 0, 0, 0.3);
+    color: var(--blue);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.results-table td {
+    padding: var(--space-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.9rem;
+}
+
+.results-table tr:hover td {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.sequence-cell {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+}
+
+/* Sequence Visualization */
+.sequence-visualization {
+    margin-bottom: var(--space-xl);
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    overflow: hidden;
+}
+
+.sequence-visualization h3 {
+    margin-bottom: var(--space-md);
+}
+
+.sequence-view {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
+    gap: 2px;
+    margin-bottom: var(--space-md);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+}
+
+.base-block {
+    width: 100%;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 600;
+    border-radius: 2px;
+    transition: all var(--transition-fast);
+}
+
+.base-block:hover {
+    transform: scale(1.1);
+    z-index: 10;
+}
+
+.sequence-zoom {
+    margin-top: var(--space-md);
+    display: flex;
+    justify-content: center;
+    gap: var(--space-md);
+}
+
+.zoom-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: var(--white);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.zoom-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.zoom-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.sequence-position {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    margin-top: var(--space-sm);
+}
+
+/* Circular Visualization */
+.circular-genome {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: var(--space-lg) 0;
+    position: relative;
+}
+
+.circular-genome svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.genome-legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-md);
+    margin-top: var(--space-md);
+}
+
+/* Codon Distribution */
+.codon-distribution {
+    margin-bottom: var(--space-xl);
+}
+
+.codon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: var(--space-md);
+    margin-top: var(--space-md);
+}
+
+.codon-box {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-sm);
+    padding: var(--space-sm);
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.codon-box-name {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    color: var(--white);
+    margin-bottom: var(--space-xs);
+}
+
+.codon-count {
+    font-size: 0.85rem;
+    color: var(--blue);
+}
+
+.codon-amino {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* 3D Protein Structure */
+.protein-structure {
+    width: 100%;
+    height: 400px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-xl);
+    position: relative;
+    overflow: hidden;
+}
+
+.structure-controls {
+    position: absolute;
+    bottom: var(--space-md);
+    right: var(--space-md);
+    display: flex;
+    gap: var(--space-xs);
+}
+
+.structure-control-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.structure-control-btn:hover {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+/* Genetic Health Risk Display */
+.health-risk-section {
+    margin-bottom: var(--space-xl);
+}
+
+.risk-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-lg);
+}
+
+.risk-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-normal);
+}
+
+.risk-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.risk-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-md);
+}
+
+.risk-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--white);
+}
+
+.risk-badge {
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.risk-badge.low {
+    background: rgba(40, 167, 69, 0.2);
+    color: var(--success);
+}
+
+.risk-badge.moderate {
+    background: rgba(255, 193, 7, 0.2);
+    color: var(--warning);
+}
+
+.risk-badge.elevated {
+    background: rgba(255, 105, 0, 0.2);
+    color: var(--orange);
+}
+
+.risk-badge.high {
+    background: rgba(220, 53, 69, 0.2);
+    color: var(--error);
+}
+
+.risk-genes {
+    margin-top: var(--space-md);
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.risk-genes span {
+    display: inline-block;
+    font-family: var(--font-mono);
+    background: rgba(0, 0, 0, 0.3);
+    padding: 0 var(--space-xs);
+    border-radius: var(--radius-sm);
+    margin-right: var(--space-xs);
+}
+
+.risk-description {
+    margin-top: var(--space-md);
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.5;
+}
+
+/* Ancestry Composition */
+.ancestry-map {
+    width: 100%;
+    height: 400px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.ancestry-chart {
+    display: flex;
+    margin-top: var(--space-lg);
+    margin-bottom: var(--space-lg);
+}
+
+.ancestry-donut {
+    width: 200px;
+    height: 200px;
+    position: relative;
+}
+
+.ancestry-categories {
+    flex: 1;
+    margin-left: var(--space-xl);
+}
+
+.ancestry-category {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--space-sm);
+}
+
+.ancestry-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    margin-right: var(--space-sm);
+}
+
+.ancestry-label {
+    flex: 1;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.ancestry-percent {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--white);
+}
+
+/* Trait Analysis */
+.traits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--space-lg);
+    margin-top: var(--space-lg);
+}
+
+.trait-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.trait-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.trait-icon {
+    font-size: 1.5rem;
+    color: var(--blue);
+}
+
+.trait-name {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--white);
+}
+
+.trait-value {
+    margin-top: var(--space-sm);
+    font-size: 1rem;
+    color: var(--white);
+}
+
+.trait-probability {
+    display: flex;
+    align-items: center;
+    margin-top: var(--space-md);
+}
+
+.probability-bar {
+    flex: 1;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin-right: var(--space-sm);
+}
+
+.probability-fill {
+    height: 100%;
+    background: var(--blue);
+}
+
+.probability-value {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Batch results */
+.batch-results-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+}
+
+.batch-result-item {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-fast);
+}
+
+.batch-result-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.batch-result-icon {
+    font-size: 1.3rem;
+    color: var(--blue);
+    margin-right: var(--space-md);
+}
+
+.batch-result-details {
+    flex: 1;
+}
+
+.batch-result-name {
+    font-weight: 500;
+    color: var(--white);
+    margin-bottom: var(--space-xs);
+}
+
+.batch-result-stats {
+    display: flex;
+    gap: var(--space-lg);
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.batch-actions {
+    display: flex;
+    gap: var(--space-xs);
+}
+
+.batch-action-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.7);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.batch-action-btn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: var(--white);
+}
+
+/* Compare view */
+.compare-container {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.compare-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-lg);
+    padding-bottom: var(--space-md);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.compare-files {
+    display: flex;
+    gap: var(--space-md);
+}
+
+.compare-file {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.8);
+    padding: var(--space-xs) var(--space-sm);
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius-sm);
+}
+
+.compare-file.active {
+    background: rgba(0, 164, 239, 0.15);
+    color: var(--blue);
+}
+
+.compare-table {
+    width: 100%;
+}
+
+.compare-table th {
+    text-align: left;
+    padding: var(--space-md);
+    background: rgba(0, 0, 0, 0.3);
+    color: var(--blue);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.compare-table th:first-child {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.compare-table td {
+    padding: var(--space-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.9rem;
+}
+
+.compare-table tr:nth-child(odd) td {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+/* Nucleotide Distribution Hexplot */
+.nucleotide-hexplot {
+    display: flex;
+    justify-content: center;
+    margin: var(--space-lg) 0;
+}
+
+/* Histogram */
+.histogram-container {
+    margin: var(--space-lg) 0;
+}
+
+.histogram-bars {
+    display: flex;
+    align-items: flex-end;
+    height: 200px;
+    gap: 2px;
+}
+
+.histogram-bar {
+    flex: 1;
+    background: var(--blue);
+    min-width: 4px;
+    border-radius: 2px 2px 0 0;
+    transition: all var(--transition-fast);
+}
+
+.histogram-bar:hover {
+    background: var(--magenta);
+}
+
+.histogram-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--space-xs);
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Download options */
+.download-options {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+}
+
+.download-options h3 {
+    margin-bottom: var(--space-md);
+    font-size: 1.1rem;
+}
+
+.download-formats {
+    display: flex;
+    gap: var(--space-md);
+    flex-wrap: wrap;
+}
+
+.download-format {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    color: var(--white);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.download-format:hover {
+    background: rgba(255, 255, 255, 0.12);
+    transform: translateY(-2px);
+}
+
+/* Loading state */
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xxl);
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 3px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    border-top: 3px solid var(--blue);
+    animation: spin 1s linear infinite;
+    margin-bottom: var(--space-md);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Coming soon */
+.coming-soon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xxl);
+    text-align: center;
+}
+
+.coming-soon i {
+    font-size: 3rem;
+    color: var(--blue);
+    margin-bottom: var(--space-lg);
+    opacity: 0.8;
+}
+
+.coming-soon h3 {
+    margin-bottom: var(--space-md);
+    color: var(--white);
+}
+
+.coming-soon p {
+    max-width: 500px;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--z-modal);
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-normal);
+}
+
+.modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-content {
+    background: var(--dark-bg);
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 500px;
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    transform: translateY(20px);
+    transition: all var(--transition-normal);
+}
+
+.modal.active .modal-content {
+    transform: translateY(0);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-lg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-header h3 {
+    margin: 0;
+    font-size: 1.2rem;
+}
+
+.close-modal {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.close-modal:hover {
+    color: var(--white);
+}
+
+.modal-body {
+    padding: var(--space-lg);
+}
+
+/* Export options */
+.export-options {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-md);
+    margin-top: var(--space-lg);
+}
+
+.export-option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-lg);
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.export-option:hover {
+    background: rgba(255, 255, 255, 0.08);
+    transform: translateY(-3px);
+}
+
+.export-option i {
+    font-size: 2rem;
+    margin-bottom: var(--space-sm);
+    color: var(--blue);
+}
+
+/* Notification */
+.notification-container {
+    position: fixed;
+    bottom: var(--space-lg);
+    right: var(--space-lg);
+    z-index: var(--z-tooltip);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.notification {
+    display: flex;
+    align-items: center;
+    padding: var(--space-md) var(--space-lg);
+    background: rgba(0, 0, 0, 0.8);
+    border-left: 3px solid var(--blue);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    min-width: 280px;
+    max-width: 400px;
+    transform: translateX(100%);
+    opacity: 0;
+    animation: slide-in 0.3s forwards;
+}
+
+.notification.success {
+    border-left-color: var(--success);
+}
+
+.notification.success i {
+    color: var(--success);
+}
+
+.notification.error {
+    border-left-color: var(--error);
+}
+
+.notification.error i {
+    color: var(--error);
+}
+
+.notification.warning {
+    border-left-color: var(--warning);
+}
+
+.notification.warning i {
+    color: var(--warning);
+}
+
+.notification-icon {
+    font-size: 1.2rem;
+    margin-right: var(--space-md);
+}
+
+.notification-message {
+    flex: 1;
+    font-size: 0.9rem;
+}
+
+@keyframes slide-in {
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Responsive styles */
+@media screen and (max-width: 1024px) {
+    .analyzer-dashboard {
+        grid-template-columns: 1fr;
+    }
+    
+    .dashboard-sidebar {
+        position: static;
+        margin-bottom: var(--space-xl);
+    }
+    
+    .sidebar-section {
+        margin-bottom: var(--space-md);
+    }
+    
+    .export-options {
+        grid-template-columns: 1fr;
+    }
+    
+    .genetic-testing-form {
+        grid-template-columns: 1fr;
+    }
+    
+    .ancestry-chart {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .ancestry-categories {
+        margin-left: 0;
+        margin-top: var(--space-lg);
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .options-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .analyzer-tabs {
+        flex-direction: column;
+    }
+    
+    .testing-options {
+        grid-template-columns: 1fr;
+    }
+    
+    .risk-cards {
+        grid-template-columns: 1fr;
+    }
+    
+    .traits-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .results-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-md);
+    }
+    
+    .results-actions {
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-sm);
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .notification {
+        min-width: auto;
+        max-width: 90%;
+    }
+    
+    .batch-result-stats {
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+}
+--------------------------------------------------
+File: ./web/analyzer/analyzer.js
+--------------------------------------------------
+/**
+ * DNAnalyzer - Analyzer Page JavaScript
+ * Handles all DNA analysis functionality, file handling, and result visualization
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize UI components
+    initializeUI();
+    
+    // Check API status
+    checkAPIStatus();
+});
+
+/**
+ * Initialize all UI components and event listeners
+ */
+function initializeUI() {
+    // Initialize file upload functionality
+    initFileUpload();
+    
+    // Initialize tabs
+    initTabs();
+    
+    // Initialize modals
+    initModals();
+    
+    // Initialize analyze button
+    document.getElementById('analyzeBtn').addEventListener('click', handleAnalysis);
+    
+    // Initialize quick action buttons
+    document.getElementById('importSampleBtn').addEventListener('click', importSample);
+    document.getElementById('clearOptionsBtn').addEventListener('click', clearOptions);
+    document.getElementById('helpBtn').addEventListener('click', showHelpModal);
+}
+
+/**
+ * Initialize file upload area with drag and drop functionality
+ */
+function initFileUpload() {
+    const dropZone = document.getElementById('fileDropZone');
+    const fileInput = document.getElementById('fileInput');
+    
+    // Handle click on drop zone
+    dropZone.addEventListener('click', function() {
+        fileInput.click();
+    });
+    
+    // Handle file selection via input
+    fileInput.addEventListener('change', function(e) {
+        if (e.target.files.length > 0) {
+            handleFileSelection(e.target.files[0]);
+        }
+    });
+    
+    // Handle drag and drop events
+    dropZone.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    
+    dropZone.addEventListener('dragleave', function() {
+        dropZone.classList.remove('drag-over');
+    });
+    
+    dropZone.addEventListener('drop', function(e) {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        
+        if (e.dataTransfer.files.length > 0) {
+            handleFileSelection(e.dataTransfer.files[0]);
+        }
+    });
+}
+
+/**
+ * Handle the selected file and update UI
+ * @param {File} file - The selected file
+ */
+function handleFileSelection(file) {
+    // Check if file type is supported
+    const validExtensions = ['.fa', '.fasta', '.fastq', '.txt'];
+    const fileName = file.name.toLowerCase();
+    const isValid = validExtensions.some(ext => fileName.endsWith(ext));
+    
+    if (!isValid) {
+        showNotification('Unsupported file format. Please upload a FASTA, FASTQ, or TXT file.', 'error');
+        return;
+    }
+    
+    // Store file in global state for later use
+    window.selectedFile = file;
+    
+    // Update UI with file info
+    const dropZone = document.getElementById('fileDropZone');
+    dropZone.innerHTML = `
+        <div class="file-preview">
+            <i class="fas fa-file-alt file-icon"></i>
+            <div class="file-info">
+                <div class="file-name">${file.name}</div>
+                <div class="file-size">${formatFileSize(file.size)}</div>
+            </div>
+            <button class="file-remove" id="removeFileBtn">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    `;
+    
+    // Add event listener to remove button
+    document.getElementById('removeFileBtn').addEventListener('click', function(e) {
+        e.stopPropagation();
+        resetFileUpload();
+    });
+    
+    // Enable analyze button
+    document.getElementById('analyzeBtn').disabled = false;
+    
+    showNotification(`File "${file.name}" ready for analysis.`, 'success');
+}
+
+/**
+ * Reset the file upload area to its initial state
+ */
+function resetFileUpload() {
+    const dropZone = document.getElementById('fileDropZone');
+    const fileInput = document.getElementById('fileInput');
+    
+    // Clear the file input
+    fileInput.value = '';
+    
+    // Reset global state
+    window.selectedFile = null;
+    
+    // Reset UI
+    dropZone.innerHTML = `
+        <i class="fas fa-cloud-upload-alt"></i>
+        <h3>Upload DNA Sequence</h3>
+        <p>Drag and drop your sequence file here or click to browse</p>
+        <span class="upload-formats">Supported formats: .fa, .fasta, .fastq, .txt</span>
+    `;
+    
+    // Disable analyze button
+    document.getElementById('analyzeBtn').disabled = true;
+}
+
+/**
+ * Initialize tab functionality
+ */
+function initTabs() {
+    const tabButtons = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            
+            // Remove active class from all tabs
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+            
+            // Add active class to current tab
+            this.classList.add('active');
+            document.getElementById(tabId).classList.add('active');
+        });
+    });
+}
+
+/**
+ * Initialize modal functionality
+ */
+function initModals() {
+    // Export modal
+    const exportModal = document.getElementById('exportModal');
+    const closeExportModal = document.getElementById('closeExportModal');
+    
+    if (exportModal && closeExportModal) {
+        document.getElementById('exportBtn').addEventListener('click', function() {
+            exportModal.classList.add('active');
+        });
+        
+        closeExportModal.addEventListener('click', function() {
+            exportModal.classList.remove('active');
+        });
+        
+        // Close modal when clicking outside
+        exportModal.addEventListener('click', function(e) {
+            if (e.target === exportModal) {
+                exportModal.classList.remove('active');
+            }
+        });
+        
+        // Handle export format selection
+        document.querySelectorAll('.export-option').forEach(option => {
+            option.addEventListener('click', function() {
+                const format = this.getAttribute('data-format');
+                downloadResults(format);
+                exportModal.classList.remove('active');
+            });
+        });
+    }
+    
+    // Help modal
+    const helpModal = document.getElementById('helpModal');
+    const closeHelpModal = document.getElementById('closeHelpModal');
+    
+    if (helpModal && closeHelpModal) {
+        closeHelpModal.addEventListener('click', function() {
+            helpModal.classList.remove('active');
+        });
+        
+        // Close modal when clicking outside
+        helpModal.addEventListener('click', function(e) {
+            if (e.target === helpModal) {
+                helpModal.classList.remove('active');
+            }
+        });
+    }
+}
+
+/**
+ * Show the help modal
+ */
+function showHelpModal() {
+    const helpModal = document.getElementById('helpModal');
+    if (helpModal) {
+        helpModal.classList.add('active');
+    }
+}
+
+/**
+ * Import a sample DNA file for demonstration
+ */
+function importSample() {
+    // Create a mock file from a predefined DNA sequence
+    const sampleDNA = '>Sample DNA Sequence\nATGGCCTAGCTAGCTGATCGATCGATCGATCGATCGATCGATCGATCGATCGACTGATCTAGCATCGATCGATCGAATCGCTAGCTAGCATCGATCGATCGATCGATCGACTAGCTAGCTATCAGCTAGCTAGCTAGCTAGCTCGATCGATCGATCGATCGATCGACTAGCTAGCAGACTAGCTAGCATCATCGACTAGCTGATGATGGATTAGCATCGATCGATAGCTACGAT';
+    
+    const blob = new Blob([sampleDNA], { type: 'text/plain' });
+    const file = new File([blob], 'sample_dna.fa', { type: 'text/plain' });
+    
+    // Process the sample file
+    handleFileSelection(file);
+}
+
+/**
+ * Reset all analysis options to default
+ */
+function clearOptions() {
+    document.querySelectorAll('input[name="analysis-option"]').forEach(checkbox => {
+        // Set default checkboxes (first 5) to checked, others to unchecked
+        const isDefault = ['sequence-length', 'gc-content', 'base-composition', 'start-codons', 'stop-codons'].includes(checkbox.value);
+        checkbox.checked = isDefault;
+    });
+    
+    showNotification('Analysis options reset to default.', 'success');
+}
+
+/**
+ * Check API connectivity status
+ */
+function checkAPIStatus() {
+    const apiStatus = document.getElementById('apiStatus');
+    
+    if (!apiStatus) return;
+    
+    // Check if API client is available
+    if (typeof DNAnalyzerAPI === 'undefined') {
+        apiStatus.innerHTML = `
+            <div class="status-indicator">
+                <div class="status-dot offline"></div>
+                <span>API not available</span>
+            </div>
+        `;
+        return;
+    }
+    
+    // Try to connect to the API
+    DNAnalyzerAPI.checkStatus()
+        .then(status => {
+            console.log('API Status:', status);
+            apiStatus.innerHTML = `
+                <div class="status-indicator">
+                    <div class="status-dot online"></div>
+                    <span>API Connected v${status.version || '1.0'}</span>
+                </div>
+            `;
+        })
+        .catch(error => {
+            console.error('API Error:', error);
+            apiStatus.innerHTML = `
+                <div class="status-indicator">
+                    <div class="status-dot offline"></div>
+                    <span>API Offline - Using Fallback Mode</span>
+                </div>
+            `;
+        });
+}
+
+/**
+ * Handle the DNA analysis process
+ */
+function handleAnalysis() {
+    if (!window.selectedFile) {
+        showNotification('Please upload a DNA sequence file first.', 'error');
+        return;
+    }
+    
+    // Get selected analysis options
+    const options = getSelectedOptions();
+    
+    // Show loading state
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    analyzeBtn.disabled = true;
+    analyzeBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Analyzing...';
+    
+    // Show results section with loading state
+    const resultsSection = document.getElementById('resultsSection');
+    resultsSection.style.display = 'block';
+    
+    const resultsContent = document.getElementById('resultsContent');
+    resultsContent.innerHTML = `
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <p>Analyzing DNA sequence...</p>
+        </div>
+    `;
+    
+    // Update file info in results header
+    document.getElementById('resultsFileInfo').innerHTML = `
+        <i class="fas fa-file-alt"></i>
+        <span>${window.selectedFile.name}</span>
+    `;
+    
+    // Scroll to results
+    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    
+    // Try using API if available, otherwise use fallback
+    if (typeof DNAnalyzerAPI !== 'undefined') {
+        try {
+            performAPIAnalysis(window.selectedFile, options);
+        } catch (error) {
+            console.error('API Error:', error);
+            performFallbackAnalysis(window.selectedFile, options);
+        }
+    } else {
+        performFallbackAnalysis(window.selectedFile, options);
+    }
+}
+
+/**
+ * Perform analysis using the API
+ * @param {File} file - The file to analyze
+ * @param {Object} options - Analysis options
+ */
+function performAPIAnalysis(file, options) {
+    // First try to analyze via API
+    DNAnalyzerAPI.analyzeDNA(file, options)
+        .then(results => {
+            displayResults(results);
+            
+            // Add to history
+            addToHistory(file.name);
+            
+            // Reset button
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            analyzeBtn.disabled = false;
+            analyzeBtn.innerHTML = '<i class="fas fa-play"></i> Start Analysis';
+            
+            showNotification('Analysis completed successfully!', 'success');
+        })
+        .catch(error => {
+            console.error('API Analysis Error:', error);
+            // Fallback to local analysis
+            performFallbackAnalysis(file, options);
+        });
+}
+
+/**
+ * Perform analysis using local fallback method
+ * @param {File} file - The file to analyze
+ * @param {Object} options - Analysis options
+ */
+function performFallbackAnalysis(file, options) {
+    // Read the file content
+    const reader = new FileReader();
+    
+    reader.onload = function(e) {
+        const sequence = parseFastaSequence(e.target.result);
+        
+        // Perform basic sequence analysis
+        const results = analyzeSequence(sequence, options);
+        
+        // Display results
+        displayResults(results);
+        
+        // Add to history
+        addToHistory(file.name);
+        
+        // Reset button
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        analyzeBtn.disabled = false;
+        analyzeBtn.innerHTML = '<i class="fas fa-play"></i> Start Analysis';
+        
+        showNotification('Analysis completed using fallback mode.', 'success');
+    };
+    
+    reader.onerror = function() {
+        showNotification('Failed to read file. Please try again.', 'error');
+        
+        // Reset button
+        const analyzeBtn = document.getElementById('analyzeBtn');
+        analyzeBtn.disabled = false;
+        analyzeBtn.innerHTML = '<i class="fas fa-play"></i> Start Analysis';
+    };
+    
+    reader.readAsText(file);
+}
+
+/**
+ * Parse FASTA format sequence
+ * @param {string} fastaData - Raw FASTA file content
+ * @returns {string} - Cleaned DNA sequence
+ */
+function parseFastaSequence(fastaData) {
+    // Split by lines
+    const lines = fastaData.split(/\r?\n/);
+    
+    // Skip header lines (starting with '>') and join the rest
+    let sequence = '';
+    let foundHeader = false;
+    
+    for (let line of lines) {
+        line = line.trim();
+        
+        if (line.startsWith('>')) {
+            foundHeader = true;
+            continue;
+        }
+        
+        if (line.length > 0) {
+            sequence += line;
+        }
+    }
+    
+    // If no header was found, assume the entire content is the sequence
+    if (!foundHeader && sequence === '') {
+        sequence = fastaData.replace(/\s+/g, '');
+    }
+    
+    return sequence.toUpperCase();
+}
+
+/**
+ * Analyze DNA sequence
+ * @param {string} sequence - DNA sequence
+ * @param {Object} options - Analysis options
+ * @returns {Object} - Analysis results
+ */
+function analyzeSequence(sequence, options) {
+    const results = {
+        sequence: {
+            length: sequence.length,
+            sample: sequence.substring(0, 100) + (sequence.length > 100 ? '...' : '')
+        },
+        basePairs: analyzeBasePairs(sequence),
+        options: options
+    };
+    
+    // Codon analysis if selected
+    if (options.includes('start-codons') || options.includes('stop-codons')) {
+        results.codons = analyzeCodonFrequency(sequence);
+    }
+    
+    // Reading frames if selected
+    if (options.includes('reading-frames')) {
+        results.readingFrames = analyzeReadingFrames(sequence);
+    }
+    
+    // Protein prediction if selected
+    if (options.includes('protein-prediction')) {
+        results.proteins = findPotentialProteins(sequence);
+    }
+    
+    return results;
+}
+
+/**
+ * Analyze base pair composition
+ * @param {string} sequence - DNA sequence
+ * @returns {Object} - Base pair analysis results
+ */
+function analyzeBasePairs(sequence) {
+    const counts = {
+        A: 0,
+        T: 0,
+        G: 0,
+        C: 0,
+        other: 0
+    };
+    
+    // Count occurrences of each base
+    for (let i = 0; i < sequence.length; i++) {
+        const base = sequence[i];
+        if (counts.hasOwnProperty(base)) {
+            counts[base]++;
+        } else {
+            counts.other++;
+        }
+    }
+    
+    // Calculate percentages
+    const total = sequence.length;
+    const percentages = {};
+    
+    for (const base in counts) {
+        percentages[base] = parseFloat(((counts[base] / total) * 100).toFixed(1));
+    }
+    
+    // Calculate GC content
+    const gcContent = parseFloat(((counts.G + counts.C) / total * 100).toFixed(1));
+    
+    return {
+        counts,
+        percentages,
+        gcContent
+    };
+}
+
+/**
+ * Analyze codon frequency
+ * @param {string} sequence - DNA sequence
+ * @returns {Object} - Codon analysis results
+ */
+function analyzeCodonFrequency(sequence) {
+    const startCodon = 'ATG';
+    const stopCodons = ['TAA', 'TAG', 'TGA'];
+    
+    let startCount = 0;
+    let stopCount = 0;
+    
+    // Analyze each possible codon position
+    for (let i = 0; i < sequence.length - 2; i++) {
+        const codon = sequence.substring(i, i + 3);
+        
+        if (codon === startCodon) {
+            startCount++;
+        }
+        
+        if (stopCodons.includes(codon)) {
+            stopCount++;
+        }
+    }
+    
+    return {
+        startCodons: startCount,
+        stopCodons: stopCount
+    };
+}
+
+/**
+ * Analyze reading frames
+ * @param {string} sequence - DNA sequence
+ * @returns {Object} - Reading frames analysis
+ */
+function analyzeReadingFrames(sequence) {
+    const frames = [];
+    const startCodon = 'ATG';
+    const stopCodons = ['TAA', 'TAG', 'TGA'];
+    
+    // Analyze each of the three forward reading frames
+    for (let offset = 0; offset < 3; offset++) {
+        const frame = {
+            frame: offset + 1,
+            direction: 'forward',
+            genes: []
+        };
+        
+        let inGene = false;
+        let geneStart = 0;
+        
+        for (let i = offset; i < sequence.length - 2; i += 3) {
+            const codon = sequence.substring(i, i + 3);
+            
+            if (codon === startCodon && !inGene) {
+                inGene = true;
+                geneStart = i;
+            } else if (stopCodons.includes(codon) && inGene) {
+                inGene = false;
+                const gene = {
+                    start: geneStart,
+                    end: i + 2,
+                    length: i + 3 - geneStart
+                };
+                frame.genes.push(gene);
+            }
+        }
+        
+        frames.push(frame);
+    }
+    
+    // Get the reverse complement sequence
+    const reverseComplement = getReverseComplement(sequence);
+    
+    // Analyze each of the three reverse reading frames
+    for (let offset = 0; offset < 3; offset++) {
+        const frame = {
+            frame: offset + 4,
+            direction: 'reverse',
+            genes: []
+        };
+        
+        let inGene = false;
+        let geneStart = 0;
+        
+        for (let i = offset; i < reverseComplement.length - 2; i += 3) {
+            const codon = reverseComplement.substring(i, i + 3);
+            
+            if (codon === startCodon && !inGene) {
+                inGene = true;
+                geneStart = i;
+            } else if (stopCodons.includes(codon) && inGene) {
+                inGene = false;
+                const gene = {
+                    start: i + 2,
+                    end: geneStart,
+                    length: i + 3 - geneStart
+                };
+                frame.genes.push(gene);
+            }
+        }
+        
+        frames.push(frame);
+    }
+    
+    return {
+        frames: frames,
+        totalGenes: frames.reduce((total, frame) => total + frame.genes.length, 0)
+    };
+}
+
+/**
+ * Get reverse complement of DNA sequence
+ * @param {string} sequence - DNA sequence
+ * @returns {string} - Reverse complement
+ */
+function getReverseComplement(sequence) {
+    const complementMap = {
+        'A': 'T',
+        'T': 'A',
+        'G': 'C',
+        'C': 'G',
+        'N': 'N'
+    };
+    
+    let reverseComplement = '';
+    
+    for (let i = sequence.length - 1; i >= 0; i--) {
+        const base = sequence[i];
+        reverseComplement += complementMap[base] || base;
+    }
+    
+    return reverseComplement;
+}
+
+/**
+ * Find potential proteins in DNA sequence
+ * @param {string} sequence - DNA sequence
+ * @returns {Array} - List of potential proteins
+ */
+function findPotentialProteins(sequence) {
+    const startCodon = 'ATG';
+    const stopCodons = ['TAA', 'TAG', 'TGA'];
+    const proteins = [];
+    
+    // Genetic code for translation
+    const geneticCode = {
+        'TTT': 'F', 'TTC': 'F', 'TTA': 'L', 'TTG': 'L',
+        'CTT': 'L', 'CTC': 'L', 'CTA': 'L', 'CTG': 'L',
+        'ATT': 'I', 'ATC': 'I', 'ATA': 'I', 'ATG': 'M',
+        'GTT': 'V', 'GTC': 'V', 'GTA': 'V', 'GTG': 'V',
+        'TCT': 'S', 'TCC': 'S', 'TCA': 'S', 'TCG': 'S',
+        'CCT': 'P', 'CCC': 'P', 'CCA': 'P', 'CCG': 'P',
+        'ACT': 'T', 'ACC': 'T', 'ACA': 'T', 'ACG': 'T',
+        'GCT': 'A', 'GCC': 'A', 'GCA': 'A', 'GCG': 'A',
+        'TAT': 'Y', 'TAC': 'Y', 'TAA': '*', 'TAG': '*',
+        'CAT': 'H', 'CAC': 'H', 'CAA': 'Q', 'CAG': 'Q',
+        'AAT': 'N', 'AAC': 'N', 'AAA': 'K', 'AAG': 'K',
+        'GAT': 'D', 'GAC': 'D', 'GAA': 'E', 'GAG': 'E',
+        'TGT': 'C', 'TGC': 'C', 'TGA': '*', 'TGG': 'W',
+        'CGT': 'R', 'CGC': 'R', 'CGA': 'R', 'CGG': 'R',
+        'AGT': 'S', 'AGC': 'S', 'AGA': 'R', 'AGG': 'R',
+        'GGT': 'G', 'GGC': 'G', 'GGA': 'G', 'GGG': 'G'
+    };
+    
+    // Search for proteins in all three reading frames
+    for (let offset = 0; offset < 3; offset++) {
+        let i = offset;
+        
+        while (i < sequence.length - 2) {
+            const codon = sequence.substring(i, i + 3);
+            
+            // If we find a start codon, begin translating
+            if (codon === startCodon) {
+                let proteinStart = i;
+                let protein = 'M'; // Start with methionine
+                let j = i + 3;
+                
+                // Continue until stop codon or end of sequence
+                while (j < sequence.length - 2) {
+                    const nextCodon = sequence.substring(j, j + 3);
+                    
+                    // Check if it's a stop codon
+                    if (stopCodons.includes(nextCodon)) {
+                        // We found a complete protein
+                        if (protein.length >= 10) { // Only include proteins of significant length
+                            proteins.push({
+                                start: proteinStart,
+                                end: j + 2,
+                                length: protein.length,
+                                sequence: protein
+                            });
+                        }
+                        
+                        // Move past this protein
+                        i = j + 3;
+                        break;
+                    }
+                    
+                    // Add amino acid to protein
+                    const aa = geneticCode[nextCodon] || 'X'; // X for unknown
+                    protein += aa;
+                    
+                    j += 3;
+                }
+                
+                // If we reached the end without finding a stop codon
+                if (j >= sequence.length - 2) {
+                    i = j;
+                }
+            } else {
+                i += 3;
+            }
+        }
+    }
+    
+    // Sort by length (longest first)
+    proteins.sort((a, b) => b.length - a.length);
+    
+    // Limit to top 10
+    return proteins.slice(0, 10);
+}
+
+/**
+ * Display analysis results
+ * @param {Object} results - Analysis results
+ */
+function displayResults(results) {
+    const resultsContent = document.getElementById('resultsContent');
+    const options = results.options;
+    
+    // Basic results grid
+    let html = '<div class="results-grid">';
+    
+    // Sequence length
+    if (options.includes('sequence-length')) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.sequence.length.toLocaleString()}</div>
+                <div class="result-label">Sequence Length</div>
+            </div>
+        `;
+    }
+    
+    // GC content
+    if (options.includes('gc-content')) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.basePairs.gcContent}%</div>
+                <div class="result-label">GC Content</div>
+            </div>
+        `;
+    }
+    
+    // Start and stop codons
+    if (options.includes('start-codons') && results.codons) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.codons.startCodons}</div>
+                <div class="result-label">Start Codons</div>
+            </div>
+        `;
+    }
+    
+    if (options.includes('stop-codons') && results.codons) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.codons.stopCodons}</div>
+                <div class="result-label">Stop Codons</div>
+            </div>
+        `;
+    }
+    
+    // Reading frames
+    if (options.includes('reading-frames') && results.readingFrames) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.readingFrames.totalGenes}</div>
+                <div class="result-label">Potential Genes</div>
+            </div>
+        `;
+    }
+    
+    // Protein prediction
+    if (options.includes('protein-prediction') && results.proteins) {
+        html += `
+            <div class="result-card">
+                <div class="result-value">${results.proteins.length}</div>
+                <div class="result-label">Proteins Found</div>
+            </div>
+        `;
+        
+        // Add longest protein info if available
+        if (results.proteins.length > 0) {
+            html += `
+                <div class="result-card">
+                    <div class="result-value">${results.proteins[0].length}</div>
+                    <div class="result-label">Longest Protein (aa)</div>
+                </div>
+            `;
+        }
+    }
+    
+    html += '</div>'; // End of results grid
+    
+    // Base composition chart
+    if (options.includes('base-composition')) {
+        const basePercentages = results.basePairs.percentages;
+        
+        html += `
+            <div class="chart-container">
+                <h3>Base Composition</h3>
+                <div class="base-composition">
+                    <div class="base-bar">
+                        <div class="base-segment base-a" style="width: ${basePercentages.A}%">A</div>
+                        <div class="base-segment base-t" style="width: ${basePercentages.T}%">T</div>
+                        <div class="base-segment base-g" style="width: ${basePercentages.G}%">G</div>
+                        <div class="base-segment base-c" style="width: ${basePercentages.C}%">C</div>
+                        ${basePercentages.other > 0 ? `<div class="base-segment" style="width: ${basePercentages.other}%">N</div>` : ''}
+                    </div>
+                </div>
+                <div class="base-legend">
+                    <div class="legend-item">
+                        <div class="color-box base-a"></div>
+                        <span>Adenine (A): ${basePercentages.A}%</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="color-box base-t"></div>
+                        <span>Thymine (T): ${basePercentages.T}%</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="color-box base-g"></div>
+                        <span>Guanine (G): ${basePercentages.G}%</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="color-box base-c"></div>
+                        <span>Cytosine (C): ${basePercentages.C}%</span>
+                    </div>
+                    ${basePercentages.other > 0 ? `
+                        <div class="legend-item">
+                            <div class="color-box" style="background: #888;"></div>
+                            <span>Other (N): ${basePercentages.other}%</span>
+                        </div>
+                    ` : ''}
+                </div>
+            </div>
+        `;
+    }
+    
+    // Reading frames table
+    if (options.includes('reading-frames') && results.readingFrames && results.readingFrames.frames) {
+        html += `
+            <div class="results-table-container">
+                <h3>Reading Frames</h3>
+                <table class="results-table">
+                    <thead>
+                        <tr>
+                            <th>Frame</th>
+                            <th>Direction</th>
+                            <th>Genes Found</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+        `;
+        
+        results.readingFrames.frames.forEach(frame => {
+            html += `
+                <tr>
+                    <td>${frame.frame}</td>
+                    <td>${frame.direction}</td>
+                    <td>${frame.genes.length}</td>
+                </tr>
+            `;
+        });
+        
+        html += `
+                    </tbody>
+                </table>
+            </div>
+        `;
+    }
+    
+    // Proteins table
+    if (options.includes('protein-prediction') && results.proteins && results.proteins.length > 0) {
+        html += `
+            <div class="results-table-container">
+                <h3>Predicted Proteins</h3>
+                <table class="results-table">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Length</th>
+                            <th>Sequence (First 30 aa)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+        `;
+        
+        results.proteins.forEach((protein, index) => {
+            const proteinSeq = protein.sequence || protein;
+            const displaySeq = proteinSeq.substring(0, 30) + (proteinSeq.length > 30 ? '...' : '');
+            
+            html += `
+                <tr>
+                    <td>${index + 1}</td>
+                    <td>${protein.length || proteinSeq.length}</td>
+                    <td class="sequence-cell">${displaySeq}</td>
+                </tr>
+            `;
+        });
+        
+        html += `
+                    </tbody>
+                </table>
+            </div>
+        `;
+    }
+    
+    // Download options
+    html += `
+        <div class="download-options">
+            <h3>Download Results</h3>
+            <div class="download-formats">
+                <button class="download-format" data-format="json">
+                    <i class="fas fa-file-code"></i>
+                    JSON
+                </button>
+                <button class="download-format" data-format="csv">
+                    <i class="fas fa-file-csv"></i>
+                    CSV
+                </button>
+                <button class="download-format" data-format="txt">
+                    <i class="fas fa-file-alt"></i>
+                    Text
+                </button>
+            </div>
+        </div>
+    `;
+    
+    // Update the results content
+    resultsContent.innerHTML = html;
+    
+    // Add event listeners to download buttons
+    document.querySelectorAll('.download-format').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const format = this.getAttribute('data-format');
+            downloadResults(format, results);
+        });
+    });
+    
+    // Store results for later use
+    window.analysisResults = results;
+}
+
+/**
+ * Download analysis results
+ * @param {string} format - File format (json, csv, txt)
+ * @param {Object} results - Analysis results
+ */
+function downloadResults(format, results = window.analysisResults) {
+    if (!results) {
+        showNotification('No analysis results to download.', 'error');
+        return;
+    }
+    
+    let content = '';
+    let fileName = `dna_analysis_${new Date().toISOString().slice(0, 10)}`;
+    let mimeType = 'text/plain';
+    
+    if (format === 'json') {
+        content = JSON.stringify(results, null, 2);
+        fileName += '.json';
+        mimeType = 'application/json';
+    } else if (format === 'csv') {
+        // Basic info
+        content = 'Property,Value\n';
+        content += `Sequence Length,${results.sequence.length}\n`;
+        content += `GC Content,${results.basePairs.gcContent}%\n\n`;
+        
+        // Base pairs
+        content += 'Base,Count,Percentage\n';
+        for (const base in results.basePairs.counts) {
+            content += `${base},${results.basePairs.counts[base]},${results.basePairs.percentages[base]}%\n`;
+        }
+        content += '\n';
+        
+        // Add codon info if available
+        if (results.codons) {
+            content += 'Codon Type,Count\n';
+            content += `Start Codons,${results.codons.startCodons}\n`;
+            content += `Stop Codons,${results.codons.stopCodons}\n\n`;
+        }
+        
+        // Add reading frames if available
+        if (results.readingFrames && results.readingFrames.frames) {
+            content += 'Frame,Direction,Genes Found\n';
+            results.readingFrames.frames.forEach(frame => {
+                content += `${frame.frame},${frame.direction},${frame.genes.length}\n`;
+            });
+            content += '\n';
+        }
+        
+        // Add proteins if available
+        if (results.proteins && results.proteins.length > 0) {
+            content += 'Protein,Length,Sequence\n';
+            results.proteins.forEach((protein, index) => {
+                const proteinSeq = protein.sequence || protein;
+                content += `${index + 1},${protein.length || proteinSeq.length},"${proteinSeq}"\n`;
+            });
+        }
+        
+        fileName += '.csv';
+        mimeType = 'text/csv';
+    } else { // txt format
+        content = 'DNA Sequence Analysis Results\n';
+        content += '============================\n\n';
+        
+        // Basic info
+        content += `Sequence Length: ${results.sequence.length}\n`;
+        content += `GC Content: ${results.basePairs.gcContent}%\n\n`;
+        
+        // Base composition
+        content += 'Base Composition:\n';
+        for (const base in results.basePairs.counts) {
+            content += `${base}: ${results.basePairs.counts[base]} (${results.basePairs.percentages[base]}%)\n`;
+        }
+        content += '\n';
+        
+        // Add codon info if available
+        if (results.codons) {
+            content += 'Codon Analysis:\n';
+            content += `Start Codons (ATG): ${results.codons.startCodons}\n`;
+            content += `Stop Codons (TAA, TAG, TGA): ${results.codons.stopCodons}\n\n`;
+        }
+        
+        // Add reading frames if available
+        if (results.readingFrames && results.readingFrames.frames) {
+            content += 'Reading Frames:\n';
+            results.readingFrames.frames.forEach(frame => {
+                content += `Frame ${frame.frame} (${frame.direction}): ${frame.genes.length} genes found\n`;
+            });
+            content += '\n';
+        }
+        
+        // Add proteins if available
+        if (results.proteins && results.proteins.length > 0) {
+            content += 'Predicted Proteins:\n';
+            results.proteins.forEach((protein, index) => {
+                const proteinSeq = protein.sequence || protein;
+                content += `Protein ${index + 1} (${protein.length || proteinSeq.length} aa): ${proteinSeq}\n`;
+            });
+        }
+        
+        content += '\nAnalysis Date: ' + new Date().toLocaleString();
+        fileName += '.txt';
+    }
+    
+    // Create download link
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    
+    // Cleanup
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+    
+    showNotification(`Results saved as ${fileName}`, 'success');
+}
+
+/**
+ * Add an analysis to the history
+ * @param {string} fileName - Name of the analyzed file
+ */
+function addToHistory(fileName) {
+    const historyList = document.getElementById('historyList');
+    
+    // Remove empty state if present
+    const emptyState = historyList.querySelector('.history-empty');
+    if (emptyState) {
+        historyList.removeChild(emptyState);
+    }
+    
+    // Create new history item
+    const historyItem = document.createElement('div');
+    historyItem.className = 'history-item';
+    
+    const now = new Date();
+    const timeString = now.toLocaleTimeString();
+    
+    historyItem.innerHTML = `
+        <i class="fas fa-file-alt"></i>
+        <div class="history-details">
+            <div class="history-name">${fileName}</div>
+            <div class="history-time">${timeString}</div>
+        </div>
+    `;
+    
+    // Add to history (prepend)
+    historyList.insertBefore(historyItem, historyList.firstChild);
+    
+    // Limit to 5 items
+    const items = historyList.querySelectorAll('.history-item');
+    if (items.length > 5) {
+        historyList.removeChild(items[items.length - 1]);
+    }
+}
+
+/**
+ * Get selected analysis options
+ * @returns {Array} - List of selected option values
+ */
+function getSelectedOptions() {
+    const checkboxes = document.querySelectorAll('input[name="analysis-option"]:checked');
+    const options = [];
+    
+    checkboxes.forEach(checkbox => {
+        options.push(checkbox.value);
+    });
+    
+    return options;
+}
+
+/**
+ * Format file size in human-readable format
+ * @param {number} bytes - File size in bytes
+ * @returns {string} - Formatted file size
+ */
+function formatFileSize(bytes) {
+    if (bytes < 1024) {
+        return bytes + ' bytes';
+    } else if (bytes < 1024 * 1024) {
+        return (bytes / 1024).toFixed(1) + ' KB';
+    } else {
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+}
+
+/**
+ * Show a notification
+ * @param {string} message - Notification message
+ * @param {string} type - Notification type (success, error, warning, info)
+ * @param {number} duration - Duration in milliseconds
+ */
+function showNotification(message, type = 'info', duration = 5000) {
+    const container = document.getElementById('notificationContainer');
+    
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification ${type}`;
+    
+    // Set icon based on type
+    let icon = 'info-circle';
+    if (type === 'success') icon = 'check-circle';
+    if (type === 'error') icon = 'times-circle';
+    if (type === 'warning') icon = 'exclamation-triangle';
+    
+    notification.innerHTML = `
+        <i class="fas fa-${icon} notification-icon"></i>
+        <div class="notification-message">${message}</div>
+    `;
+    
+    // Add to container
+    container.appendChild(notification);
+    
+    // Remove after duration
+    setTimeout(() => {
+        notification.style.opacity = '0';
+        notification.style.transform = 'translateX(100%)';
+        
+        // Remove from DOM after animation
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 300);
+    }, duration);
+}
+
+--------------------------------------------------
+File: ./web/analyzer/genetic-testing.js
+--------------------------------------------------
+/**
+ * DNAnalyzer - Genetic Testing Module
+ * Handles genetic testing functionality including file handling, analysis, and visualization
+ */
+
+// Initialize genetic testing functionality when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    if (document.getElementById('genetic-testing')) {
+        initGeneticTesting();
+    }
+});
+
+/**
+ * Initialize genetic testing functionality
+ */
+function initGeneticTesting() {
+    // Initialize file upload for genetic data
+    initGeneticFileUpload();
+    
+    // Initialize test options selection
+    initTestOptions();
+    
+    // Initialize consent checkbox
+    initConsentCheckbox();
+    
+    // Initialize analyze button
+    const geneticAnalyzeBtn = document.getElementById('geneticAnalyzeBtn');
+    if (geneticAnalyzeBtn) {
+        geneticAnalyzeBtn.addEventListener('click', handleGeneticAnalysis);
+    }
+    
+    // Add sample data button
+    addSampleDataButton();
+}
+
+/**
+ * Initialize genetic file upload with drag and drop functionality
+ */
+function initGeneticFileUpload() {
+    const dropZone = document.getElementById('geneticFileDropZone');
+    const fileInput = document.getElementById('geneticFileInput');
+    
+    if (!dropZone || !fileInput) return;
+    
+    // Handle click on drop zone
+    dropZone.addEventListener('click', function() {
+        fileInput.click();
+    });
+    
+    // Handle file selection via input
+    fileInput.addEventListener('change', function(e) {
+        if (e.target.files.length > 0) {
+            handleGeneticFileSelection(e.target.files[0]);
+        }
+    });
+    
+    // Handle drag and drop events
+    dropZone.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    
+    dropZone.addEventListener('dragleave', function() {
+        dropZone.classList.remove('drag-over');
+    });
+    
+    dropZone.addEventListener('drop', function(e) {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        
+        if (e.dataTransfer.files.length > 0) {
+            handleGeneticFileSelection(e.dataTransfer.files[0]);
+        }
+    });
+}
+
+/**
+ * Handle the selected genetic data file
+ * @param {File} file - The selected file
+ */
+function handleGeneticFileSelection(file) {
+    const dropZone = document.getElementById('geneticFileDropZone');
+    const fileInput = document.getElementById('geneticFileInput');
+    const geneticAnalyzeBtn = document.getElementById('geneticAnalyzeBtn');
+    
+    if (!dropZone || !fileInput || !geneticAnalyzeBtn) return;
+    
+    // Check file type
+    const validExtensions = ['.txt', '.csv', '.vcf'];
+    const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+    
+    if (!validExtensions.includes(fileExt)) {
+        showNotification('Invalid file format. Please upload a .txt, .csv, or .vcf file.', 'error');
+        return;
+    }
+    
+    // Update UI to show selected file
+    dropZone.innerHTML = `
+        <div class="selected-file">
+            <i class="fas fa-dna"></i>
+            <div class="file-info">
+                <h4>${file.name}</h4>
+                <span>${formatFileSize(file.size)}</span>
+            </div>
+            <button class="file-remove" aria-label="Remove file">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    `;
+    
+    // Add remove button functionality
+    const removeBtn = dropZone.querySelector('.file-remove');
+    if (removeBtn) {
+        removeBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            resetGeneticFileUpload();
+        });
+    }
+    
+    // Store file in global variable for later use
+    window.selectedGeneticFile = file;
+    
+    // Enable analyze button if consent is checked
+    const consentCheckbox = document.getElementById('consentCheckbox');
+    if (consentCheckbox && consentCheckbox.checked) {
+        geneticAnalyzeBtn.disabled = false;
+    }
+    
+    // Show notification
+    showNotification('Genetic data file selected. Complete the form and select testing options.', 'success');
+}
+
+/**
+ * Reset the genetic file upload area to its initial state
+ */
+function resetGeneticFileUpload() {
+    const dropZone = document.getElementById('geneticFileDropZone');
+    const fileInput = document.getElementById('geneticFileInput');
+    const geneticAnalyzeBtn = document.getElementById('geneticAnalyzeBtn');
+    
+    if (!dropZone || !fileInput || !geneticAnalyzeBtn) return;
+    
+    // Reset input value
+    fileInput.value = '';
+    
+    // Reset drop zone content
+    dropZone.innerHTML = `
+        <i class="fas fa-cloud-upload-alt"></i>
+        <h3>Upload Genetic Data</h3>
+        <p>Drag and drop your genetic data file here or click to browse</p>
+        <span class="upload-formats">Supported formats: .txt, .csv, .vcf (23andMe, AncestryDNA, etc.)</span>
+    `;
+    
+    // Disable analyze button
+    geneticAnalyzeBtn.disabled = true;
+    
+    // Clear stored file
+    window.selectedGeneticFile = null;
+}
+
+/**
+ * Initialize test options selection
+ */
+function initTestOptions() {
+    const testOptions = document.querySelectorAll('.test-option');
+    
+    testOptions.forEach(option => {
+        option.addEventListener('click', function() {
+            this.classList.toggle('selected');
+        });
+    });
+}
+
+/**
+ * Initialize consent checkbox
+ */
+function initConsentCheckbox() {
+    const consentCheckbox = document.getElementById('consentCheckbox');
+    const geneticAnalyzeBtn = document.getElementById('geneticAnalyzeBtn');
+    
+    if (!consentCheckbox || !geneticAnalyzeBtn) return;
+    
+    consentCheckbox.addEventListener('change', function() {
+        // Enable analyze button only if both file is selected and consent is checked
+        geneticAnalyzeBtn.disabled = !(this.checked && window.selectedGeneticFile);
+    });
+}
+
+/**
+ * Add sample data button to the genetic testing tab
+ */
+function addSampleDataButton() {
+    const uploadFormats = document.querySelector('#geneticFileDropZone .upload-formats');
+    
+    if (!uploadFormats) return;
+    
+    const sampleBtn = document.createElement('button');
+    sampleBtn.className = 'btn btn-secondary btn-sm sample-data-btn';
+    sampleBtn.innerHTML = '<i class="fas fa-vial"></i> Load Sample Data';
+    sampleBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        loadSampleGeneticData();
+    });
+    
+    uploadFormats.insertAdjacentElement('afterend', sampleBtn);
+}
+
+/**
+ * Load sample genetic data for demonstration
+ */
+function loadSampleGeneticData() {
+    // Create a sample file
+    const sampleData = createSampleGeneticData();
+    const blob = new Blob([sampleData], { type: 'text/plain' });
+    const file = new File([blob], 'sample-genetic-data.txt', { type: 'text/plain' });
+    
+    // Process the sample file
+    handleGeneticFileSelection(file);
+    
+    // Pre-fill form with sample data
+    document.getElementById('gender').value = 'male';
+    document.getElementById('age').value = '35';
+    document.getElementById('ethnicity').value = 'european';
+    
+    // Select all test options
+    document.querySelectorAll('.test-option').forEach(option => {
+        option.classList.add('selected');
+    });
+    
+    // Check consent checkbox
+    const consentCheckbox = document.getElementById('consentCheckbox');
+    if (consentCheckbox) {
+        consentCheckbox.checked = true;
+        
+        // Trigger change event
+        const event = new Event('change');
+        consentCheckbox.dispatchEvent(event);
+    }
+    
+    // Show notification
+    showNotification('Sample genetic data loaded successfully!', 'success');
+}
+
+/**
+ * Create sample genetic data in 23andMe format
+ * @returns {string} - Sample genetic data
+ */
+function createSampleGeneticData() {
+    return `# This data is for demonstration purposes only
+# Sample genetic data in 23andMe format
+# This file contains a small subset of SNPs for educational purposes
+
+# rsid\tchromosome\tposition\tgenotype
+rs4477212\t1\t82154\tAA
+rs3094315\t1\t752566\tAG
+rs12562034\t1\t768448\tGG
+rs3934834\t1\t1005806\tCC
+rs3737728\t1\t1011278\tAG
+rs11260588\t1\t1021454\tGG
+rs2905036\t1\t1021915\tCC
+rs2973725\t1\t1025314\tAG
+rs2980300\t1\t1041900\tTT
+rs4475691\t1\t1051029\tCC
+rs11497407\t1\t1061166\tAA
+rs11260603\t1\t1070488\tGG
+rs2341354\t1\t1088657\tAG
+rs2341355\t1\t1088761\tTT
+rs1320571\t1\t1089876\tAG
+rs11260614\t1\t1093709\tAA
+rs2978398\t1\t1099810\tGG
+rs2820323\t1\t1105366\tAG
+rs2887286\t1\t1110240\tAA
+rs1815606\t1\t1110294\tCC
+rs2978381\t1\t1114147\tGG
+rs7526076\t1\t1117281\tAA
+rs2887286\t1\t1110240\tAA
+rs1815606\t1\t1110294\tCC`;
+}
+
+/**
+ * Handle genetic analysis process
+ */
+function handleGeneticAnalysis() {
+    // Get selected file
+    const file = window.selectedGeneticFile;
+    if (!file) {
+        showNotification('Please upload a genetic data file first.', 'warning');
+        return;
+    }
+    
+    // Get selected tests
+    const selectedTests = [];
+    document.querySelectorAll('.test-option.selected').forEach(option => {
+        selectedTests.push(option.dataset.test);
+    });
+    
+    if (selectedTests.length === 0) {
+        showNotification('Please select at least one test to perform.', 'warning');
+        return;
+    }
+    
+    // Get form data
+    const formData = {
+        gender: document.getElementById('gender').value,
+        age: document.getElementById('age').value,
+        ethnicity: document.getElementById('ethnicity').value
+    };
+    
+    // Start analysis
+    showNotification('Starting genetic analysis...', 'info');
+    
+    // Show loading state
+    const analyzeBtn = document.getElementById('geneticAnalyzeBtn');
+    if (analyzeBtn) {
+        analyzeBtn.disabled = true;
+        analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
+    }
+    
+    // Simulate processing delay
+    setTimeout(() => {
+        // Perform analysis
+        const results = performGeneticAnalysis(file, selectedTests, formData);
+        
+        // Display results
+        displayGeneticResults(results);
+        
+        // Reset button
+        if (analyzeBtn) {
+            analyzeBtn.disabled = false;
+            analyzeBtn.innerHTML = '<i class="fas fa-vial"></i> Run Genetic Tests';
+        }
+    }, 2000);
+}
+
+/**
+ * Perform genetic analysis on the provided file
+ * @param {File} file - Genetic data file
+ * @param {Array} selectedTests - Array of selected test types
+ * @param {Object} formData - Personal information form data
+ * @returns {Object} - Analysis results
+ */
+function performGeneticAnalysis(file, selectedTests, formData) {
+    // This is a simplified demonstration that returns pre-defined results
+    // In a real implementation, this would parse the file and analyze the data
+    
+    // Sample results for demonstration
+    return {
+        summary: {
+            totalSnps: 24,
+            analyzedSnps: 24,
+            coverage: "0.001%",
+            quality: "High"
+        },
+        health: {
+            risks: [
+                { condition: "Type 2 Diabetes", risk: "Slightly Elevated", snps: ["rs4477212", "rs3094315"], confidence: "Medium" },
+                { condition: "Coronary Heart Disease", risk: "Average", snps: ["rs12562034", "rs3934834"], confidence: "High" },
+                { condition: "Age-related Macular Degeneration", risk: "Lower", snps: ["rs3737728"], confidence: "Medium" },
+                { condition: "Alzheimer's Disease", risk: "Average", snps: ["rs11260588", "rs2905036"], confidence: "Low" }
+            ]
+        },
+        traits: {
+            physical: [
+                { trait: "Eye Color", prediction: "Brown", snps: ["rs2973725", "rs2980300"], confidence: "High" },
+                { trait: "Hair Type", prediction: "Straight", snps: ["rs4475691"], confidence: "Medium" },
+                { trait: "Earwax Type", prediction: "Wet", snps: ["rs11497407"], confidence: "High" },
+                { trait: "Lactose Intolerance", prediction: "Likely Tolerant", snps: ["rs11260603"], confidence: "Medium" }
+            ],
+            behavioral: [
+                { trait: "Caffeine Metabolism", prediction: "Fast Metabolizer", snps: ["rs2341354"], confidence: "Medium" },
+                { trait: "Alcohol Flush Reaction", prediction: "No Reaction", snps: ["rs2341355"], confidence: "High" }
+            ]
+        },
+        ancestry: {
+            composition: [
+                { population: "Northern European", percentage: 68 },
+                { population: "Southern European", percentage: 12 },
+                { population: "Eastern European", percentage: 8 },
+                { population: "Northwest Asian", percentage: 6 },
+                { population: "Other", percentage: 6 }
+            ],
+            haplogroups: {
+                maternal: "H1c",
+                paternal: "R1b1b2a1a"
+            }
+        },
+        carrier: {
+            conditions: [
+                { condition: "Cystic Fibrosis", status: "Not a Carrier", snps: ["rs1320571"], confidence: "High" },
+                { condition: "Sickle Cell Anemia", status: "Not a Carrier", snps: ["rs11260614"], confidence: "High" },
+                { condition: "Tay-Sachs Disease", status: "Not a Carrier", snps: ["rs2978398"], confidence: "Medium" },
+                { condition: "Phenylketonuria", status: "Not a Carrier", snps: ["rs2820323"], confidence: "High" }
+            ]
+        }
+    };
+}
+
+/**
+ * Display genetic analysis results
+ * @param {Object} results - Analysis results
+ */
+function displayGeneticResults(results) {
+    // Get results section and make it visible
+    const resultsSection = document.getElementById('resultsSection');
+    if (!resultsSection) return;
+    
+    resultsSection.style.display = 'block';
+    resultsSection.scrollIntoView({ behavior: 'smooth' });
+    
+    // Update summary section
+    const summaryElement = document.querySelector('.results-summary');
+    if (summaryElement) {
+        summaryElement.innerHTML = `
+            <h2>Genetic Analysis Results</h2>
+            <div class="summary-stats">
+                <div class="summary-stat">
+                    <span class="stat-value">${results.summary.totalSnps}</span>
+                    <span class="stat-label">SNPs Analyzed</span>
+                </div>
+                <div class="summary-stat">
+                    <span class="stat-value">${results.summary.coverage}</span>
+                    <span class="stat-label">Genome Coverage</span>
+                </div>
+                <div class="summary-stat">
+                    <span class="stat-value">${results.summary.quality}</span>
+                    <span class="stat-label">Data Quality</span>
+                </div>
+            </div>
+        `;
+    }
+    
+    // Update content section with tabs for each test type
+    const contentElement = document.querySelector('.results-content');
+    if (!contentElement) return;
+    
+    // Create tabs
+    let tabsHtml = '<div class="results-tabs">';
+    
+    if (results.health) {
+        tabsHtml += `<button class="tab-btn active" data-result-tab="health">
+            <i class="fas fa-heartbeat"></i> Health Risks
+        </button>`;
+    }
+    
+    if (results.traits) {
+        tabsHtml += `<button class="tab-btn" data-result-tab="traits">
+            <i class="fas fa-user"></i> Traits
+        </button>`;
+    }
+    
+    if (results.ancestry) {
+        tabsHtml += `<button class="tab-btn" data-result-tab="ancestry">
+            <i class="fas fa-globe"></i> Ancestry
+        </button>`;
+    }
+    
+    if (results.carrier) {
+        tabsHtml += `<button class="tab-btn" data-result-tab="carrier">
+            <i class="fas fa-baby"></i> Carrier Status
+        </button>`;
+    }
+    
+    tabsHtml += '</div>';
+    
+    // Create tab content
+    let contentHtml = tabsHtml + '<div class="results-tab-content">';
+    
+    // Health risks tab
+    if (results.health) {
+        contentHtml += `
+            <div class="result-tab-panel active" id="health-panel">
+                <h3>Health Risk Assessment</h3>
+                <p class="disclaimer">Note: These results are for educational purposes only and should not be used for medical decisions.</p>
+                
+                <div class="risk-cards">
+                    ${results.health.risks.map(risk => `
+                        <div class="risk-card risk-${risk.risk.toLowerCase().replace(/\s+/g, '-')}">
+                            <div class="risk-header">
+                                <h4>${risk.condition}</h4>
+                                <span class="risk-level">${risk.risk}</span>
+                            </div>
+                            <div class="risk-details">
+                                <div class="snp-list">
+                                    <strong>Relevant SNPs:</strong> ${risk.snps.join(', ')}
+                                </div>
+                                <div class="confidence">
+                                    <strong>Confidence:</strong> 
+                                    <span class="confidence-${risk.confidence.toLowerCase()}">${risk.confidence}</span>
+                                </div>
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+    
+    // Traits tab
+    if (results.traits) {
+        contentHtml += `
+            <div class="result-tab-panel" id="traits-panel">
+                <h3>Genetic Traits</h3>
+                
+                <div class="traits-section">
+                    <h4>Physical Traits</h4>
+                    <div class="trait-cards">
+                        ${results.traits.physical.map(trait => `
+                            <div class="trait-card">
+                                <div class="trait-header">
+                                    <h5>${trait.trait}</h5>
+                                </div>
+                                <div class="trait-prediction">
+                                    <strong>${trait.prediction}</strong>
+                                    <span class="confidence-${trait.confidence.toLowerCase()}">${trait.confidence} confidence</span>
+                                </div>
+                                <div class="trait-snps">
+                                    <small>SNPs: ${trait.snps.join(', ')}</small>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                
+                <div class="traits-section">
+                    <h4>Behavioral Traits</h4>
+                    <div class="trait-cards">
+                        ${results.traits.behavioral.map(trait => `
+                            <div class="trait-card">
+                                <div class="trait-header">
+                                    <h5>${trait.trait}</h5>
+                                </div>
+                                <div class="trait-prediction">
+                                    <strong>${trait.prediction}</strong>
+                                    <span class="confidence-${trait.confidence.toLowerCase()}">${trait.confidence} confidence</span>
+                                </div>
+                                <div class="trait-snps">
+                                    <small>SNPs: ${trait.snps.join(', ')}</small>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    // Ancestry tab
+    if (results.ancestry) {
+        contentHtml += `
+            <div class="result-tab-panel" id="ancestry-panel">
+                <h3>Ancestry Composition</h3>
+                
+                <div class="ancestry-composition">
+                    <div class="ancestry-chart">
+                        <canvas id="ancestryChart"></canvas>
+                    </div>
+                    <div class="ancestry-breakdown">
+                        ${results.ancestry.composition.map(pop => `
+                            <div class="ancestry-item">
+                                <div class="ancestry-name">${pop.population}</div>
+                                <div class="ancestry-bar">
+                                    <div class="ancestry-progress" style="width: ${pop.percentage}%"></div>
+                                </div>
+                                <div class="ancestry-percentage">${pop.percentage}%</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                
+                <div class="haplogroups-section">
+                    <h4>Haplogroups</h4>
+                    <div class="haplogroups-info">
+                        <div class="haplogroup-item">
+                            <strong>Maternal Haplogroup:</strong> ${results.ancestry.haplogroups.maternal}
+                        </div>
+                        <div class="haplogroup-item">
+                            <strong>Paternal Haplogroup:</strong> ${results.ancestry.haplogroups.paternal}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    // Carrier status tab
+    if (results.carrier) {
+        contentHtml += `
+            <div class="result-tab-panel" id="carrier-panel">
+                <h3>Carrier Status</h3>
+                <p class="disclaimer">Note: These results are for educational purposes only and should not be used for family planning decisions.</p>
+                
+                <div class="carrier-cards">
+                    ${results.carrier.conditions.map(condition => `
+                        <div class="carrier-card">
+                            <div class="carrier-header">
+                                <h4>${condition.condition}</h4>
+                                <span class="carrier-status status-${condition.status.toLowerCase().replace(/\s+/g, '-')}">${condition.status}</span>
+                            </div>
+                            <div class="carrier-details">
+                                <div class="snp-list">
+                                    <strong>Relevant SNPs:</strong> ${condition.snps.join(', ')}
+                                </div>
+                                <div class="confidence">
+                                    <strong>Confidence:</strong> 
+                                    <span class="confidence-${condition.confidence.toLowerCase()}">${condition.confidence}</span>
+                                </div>
+                            </div>
+                        </div>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+    
+    contentHtml += '</div>';
+    
+    // Update content
+    contentElement.innerHTML = contentHtml;
+    
+    // Initialize results tabs
+    initResultsTabs();
+    
+    // Initialize charts if ancestry results are present
+    if (results.ancestry) {
+        initAncestryChart(results.ancestry.composition);
+    }
+    
+    // Show notification
+    showNotification('Genetic analysis completed successfully!', 'success');
+}
+
+/**
+ * Initialize tabs in the results section
+ */
+function initResultsTabs() {
+    const tabButtons = document.querySelectorAll('.results-tabs .tab-btn');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Remove active class from all buttons and panels
+            document.querySelectorAll('.results-tabs .tab-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            document.querySelectorAll('.result-tab-panel').forEach(panel => {
+                panel.classList.remove('active');
+            });
+            
+            // Add active class to current button
+            this.classList.add('active');
+            
+            // Show corresponding panel
+            const tabName = this.dataset.resultTab;
+            const panel = document.getElementById(tabName + '-panel');
+            if (panel) {
+                panel.classList.add('active');
+            }
+        });
+    });
+}
+
+/**
+ * Initialize ancestry composition chart
+ * @param {Array} composition - Ancestry composition data
+ */
+function initAncestryChart(composition) {
+    const canvas = document.getElementById('ancestryChart');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    
+    // Extract data for chart
+    const labels = composition.map(item => item.population);
+    const data = composition.map(item => item.percentage);
+    const colors = [
+        '#4285F4', '#EA4335', '#FBBC05', '#34A853', '#FF6D01',
+        '#46BDC6', '#9C27B0', '#3F51B5', '#03A9F4', '#00BCD4'
+    ];
+    
+    // Create chart
+    new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: labels,
+            datasets: [{
+                data: data,
+                backgroundColor: colors.slice(0, composition.length),
+                borderColor: '#001427',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    backgroundColor: 'rgba(0, 20, 39, 0.8)',
+                    titleFont: {
+                        family: 'Inter, sans-serif',
+                        size: 14
+                    },
+                    bodyFont: {
+                        family: 'Inter, sans-serif',
+                        size: 13
+                    },
+                    callbacks: {
+                        label: function(context) {
+                            return context.label + ': ' + context.raw + '%';
+                        }
+                    }
+                }
+            },
+            cutout: '70%'
+        }
+    });
+}
+
+// Utility function for formatting file size
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Utility function for showing notifications
+function showNotification(message, type = 'info', duration = 5000) {
+    // Use the existing notification function from analyzer.js if available
+    if (window.showNotification) {
+        window.showNotification(message, type, duration);
+        return;
+    }
+    
+    // Fallback implementation
+    const container = document.getElementById('notificationContainer');
+    if (!container) return;
+    
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    
+    const icon = document.createElement('i');
+    switch (type) {
+        case 'success':
+            icon.className = 'fas fa-check-circle';
+            break;
+        case 'error':
+            icon.className = 'fas fa-exclamation-circle';
+            break;
+        case 'warning':
+            icon.className = 'fas fa-exclamation-triangle';
+            break;
+        default:
+            icon.className = 'fas fa-info-circle';
+    }
+    
+    const content = document.createElement('div');
+    content.className = 'notification-content';
+    content.textContent = message;
+    
+    notification.appendChild(icon);
+    notification.appendChild(content);
+    container.appendChild(notification);
+    
+    // Show animation
+    setTimeout(() => {
+        notification.classList.add('show');
+    }, 10);
+    
+    // Hide after duration
+    setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }, duration);
+}
+
+// Genetic Testing Implementation
+const geneticTestingModule = {
+    // Supported file formats
+    supportedFormats: ['.fastq', '.fasta', '.sam', '.bam', '.vcf'],
+    
+    // Sample DNA sequences for testing
+    sampleSequences: {
+        'sample1.fastq': 'ATCGATCGATCGATCG...',
+        'sample2.fasta': '>Sample2\nGATTACAGATTACA...',
+        'sample3.vcf': '##fileformat=VCFv4.2\n#CHROM\tPOS\tID...'
+    },
+
+    init() {
+        this.setupEventListeners();
+        this.initializeUI();
+    },
+
+    setupEventListeners() {
+        // File upload handling
+        const fileInput = document.getElementById('dnaFileInput');
+        fileInput.addEventListener('change', (e) => this.handleFileUpload(e));
+
+        // Sample file selection
+        const sampleSelect = document.getElementById('sampleFileSelect');
+        sampleSelect.addEventListener('change', (e) => this.loadSampleFile(e));
+
+        // Analysis button
+        const analyzeBtn = document.getElementById('analyzeButton');
+        analyzeBtn.addEventListener('click', () => this.startAnalysis());
+    },
+
+    initializeUI() {
+        // Initialize dropzone
+        const dropZone = document.getElementById('dropZone');
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            const files = e.dataTransfer.files;
+            this.handleFileUpload({ target: { files } });
+        });
+
+        // Add sample files to select
+        const sampleSelect = document.getElementById('sampleFileSelect');
+        Object.keys(this.sampleSequences).forEach(sample => {
+            const option = document.createElement('option');
+            option.value = sample;
+            option.textContent = sample;
+            sampleSelect.appendChild(option);
+        });
+    },
+
+    async handleFileUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        if (!this.validateFileFormat(file)) {
+            this.showError(`Unsupported file format. Please use: ${this.supportedFormats.join(', ')}`);
+            return;
+        }
+
+        try {
+            const sequence = await this.readFile(file);
+            this.updateUI('fileLoaded', { fileName: file.name, sequence });
+        } catch (error) {
+            this.showError('Error reading file: ' + error.message);
+        }
+    },
+
+    loadSampleFile(event) {
+        const sampleName = event.target.value;
+        const sequence = this.sampleSequences[sampleName];
+        if (sequence) {
+            this.updateUI('fileLoaded', { fileName: sampleName, sequence });
+        }
+    },
+
+    async startAnalysis() {
+        const sequence = this.getCurrentSequence();
+        if (!sequence) {
+            this.showError('Please upload a DNA sequence file or select a sample first.');
+            return;
+        }
+
+        this.updateUI('analysisStarted');
+        
+        try {
+            // Perform various analyses
+            const results = await Promise.all([
+                this.analyzeMutations(sequence),
+                this.predictTraits(sequence),
+                this.findAncestry(sequence),
+                this.assessHealthRisks(sequence)
+            ]);
+
+            this.updateUI('analysisComplete', { results });
+        } catch (error) {
+            this.showError('Analysis failed: ' + error.message);
+        }
+    },
+
+    // Analysis Methods
+    async analyzeMutations(sequence) {
+        // Implementation of mutation analysis
+        return {
+            type: 'mutations',
+            findings: [
+                { position: 1234, mutation: 'SNP', reference: 'A', variant: 'G' },
+                { position: 5678, mutation: 'Deletion', reference: 'CTG', variant: '-' }
+            ]
+        };
+    },
+
+    async predictTraits(sequence) {
+        // Implementation of trait prediction
+        return {
+            type: 'traits',
+            predictions: [
+                { trait: 'Eye Color', prediction: 'Brown', confidence: 0.89 },
+                { trait: 'Height', prediction: 'Above Average', confidence: 0.75 }
+            ]
+        };
+    },
+
+    async findAncestry(sequence) {
+        // Implementation of ancestry analysis
+        return {
+            type: 'ancestry',
+            composition: [
+                { region: 'European', percentage: 45 },
+                { region: 'East Asian', percentage: 30 },
+                { region: 'African', percentage: 25 }
+            ]
+        };
+    },
+
+    async assessHealthRisks(sequence) {
+        // Implementation of health risk assessment
+        return {
+            type: 'health',
+            risks: [
+                { condition: 'Type 2 Diabetes', risk: 'Low', score: 0.2 },
+                { condition: 'Heart Disease', risk: 'Moderate', score: 0.4 }
+            ]
+        };
+    },
+
+    // Utility Methods
+    validateFileFormat(file) {
+        return this.supportedFormats.some(format => 
+            file.name.toLowerCase().endsWith(format)
+        );
+    },
+
+    async readFile(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => resolve(e.target.result);
+            reader.onerror = (e) => reject(new Error('File reading failed'));
+            reader.readAsText(file);
+        });
+    },
+
+    getCurrentSequence() {
+        const sequenceDisplay = document.getElementById('sequenceDisplay');
+        return sequenceDisplay?.dataset.sequence;
+    },
+
+    showError(message) {
+        const errorDisplay = document.getElementById('errorDisplay');
+        errorDisplay.textContent = message;
+        errorDisplay.style.display = 'block';
+        setTimeout(() => {
+            errorDisplay.style.display = 'none';
+        }, 5000);
+    },
+
+    updateUI(state, data = {}) {
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const resultsContainer = document.getElementById('resultsContainer');
+        const sequenceDisplay = document.getElementById('sequenceDisplay');
+
+        switch (state) {
+            case 'fileLoaded':
+                sequenceDisplay.textContent = `File loaded: ${data.fileName}`;
+                sequenceDisplay.dataset.sequence = data.sequence;
+                break;
+
+            case 'analysisStarted':
+                loadingSpinner.style.display = 'block';
+                resultsContainer.innerHTML = '';
+                break;
+
+            case 'analysisComplete':
+                loadingSpinner.style.display = 'none';
+                this.displayResults(data.results);
+                break;
+        }
+    },
+
+    displayResults(results) {
+        const resultsContainer = document.getElementById('resultsContainer');
+        resultsContainer.innerHTML = '';
+
+        results.forEach(result => {
+            const section = document.createElement('div');
+            section.className = 'result-section';
+
+            switch (result.type) {
+                case 'mutations':
+                    section.innerHTML = this.createMutationsHTML(result);
+                    break;
+                case 'traits':
+                    section.innerHTML = this.createTraitsHTML(result);
+                    break;
+                case 'ancestry':
+                    section.innerHTML = this.createAncestryHTML(result);
+                    break;
+                case 'health':
+                    section.innerHTML = this.createHealthHTML(result);
+                    break;
+            }
+
+            resultsContainer.appendChild(section);
+        });
+    },
+
+    createMutationsHTML(result) {
+        return `
+            <h3>Genetic Mutations</h3>
+            <div class="mutations-list">
+                ${result.findings.map(mutation => `
+                    <div class="mutation-item">
+                        <span>Position: ${mutation.position}</span>
+                        <span>Type: ${mutation.mutation}</span>
+                        <span>Change: ${mutation.reference} → ${mutation.variant}</span>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    },
+
+    createTraitsHTML(result) {
+        return `
+            <h3>Predicted Traits</h3>
+            <div class="traits-list">
+                ${result.predictions.map(trait => `
+                    <div class="trait-item">
+                        <span>${trait.trait}</span>
+                        <span>${trait.prediction}</span>
+                        <div class="confidence-bar" style="width: ${trait.confidence * 100}%"></div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    },
+
+    createAncestryHTML(result) {
+        return `
+            <h3>Ancestry Composition</h3>
+            <div class="ancestry-chart">
+                ${result.composition.map(region => `
+                    <div class="ancestry-bar">
+                        <div class="ancestry-fill" style="width: ${region.percentage}%"></div>
+                        <span>${region.region}: ${region.percentage}%</span>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    },
+
+    createHealthHTML(result) {
+        return `
+            <h3>Health Risk Assessment</h3>
+            <div class="health-risks">
+                ${result.risks.map(risk => `
+                    <div class="risk-item ${risk.risk.toLowerCase()}">
+                        <span>${risk.condition}</span>
+                        <span class="risk-level">${risk.risk}</span>
+                        <div class="risk-bar" style="width: ${risk.score * 100}%"></div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+};
+
+// Initialize the module when the page loads
+document.addEventListener('DOMContentLoaded', () => geneticTestingModule.init());
+--------------------------------------------------
+File: ./web/analyzer/analyzer.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DNA Analyzer - DNAnalyzer</title>
+    <meta name="description"
+        content="Analyze DNA sequences with advanced ML-powered tools. Upload FASTA or FASTQ files and get comprehensive analysis.">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="analyzer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <!-- Background effects -->
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+    </div>
+
+    <div class="notification-banner">
+        <span>Exclusive WSSEF Preview: </span>
+        <span>&nbsp;Transformer Architecture in Epigenomics!</span>
+        <a href="https://epiclassify.dnanalyzer.org" target="_blank" class="notification-link">Explore Now</a>
+        <button class="notification-close" aria-label="Dismiss notification"></button>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="../index.html" class="logo">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../features/features.html">Features</a></li>
+                <li><a href="analyzer.html" class="active">Analyzer</a></li>
+                <li><a href="../server/server.html">Server</a></li>
+                <li><a href="../docs/docs.html">Docs</a></li>
+                <li><a href="../about/about.html">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="analyzer-main">
+        <div class="container">
+            <div class="analyzer-header">
+                <h1>DNA Sequence <span class="gradient-text">Analysis</span></h1>
+                <p>Analyze DNA sequences with advanced machine learning tools</p>
+            </div>
+
+            <div class="analyzer-dashboard">
+                <div class="dashboard-sidebar">
+                    <div class="sidebar-section">
+                        <h3>Analysis History</h3>
+                        <div class="history-list" id="historyList">
+                            <div class="history-empty">
+                                <i class="fas fa-history"></i>
+                                <p>No recent analyses</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="sidebar-section">
+                        <h3>Quick Actions</h3>
+                        <div class="quick-actions">
+                            <button id="importSampleBtn" class="sidebar-btn">
+                                <i class="fas fa-file-import"></i>
+                                Import Sample
+                            </button>
+                            <button id="clearOptionsBtn" class="sidebar-btn">
+                                <i class="fas fa-undo"></i>
+                                Reset Options
+                            </button>
+                            <button id="helpBtn" class="sidebar-btn">
+                                <i class="fas fa-question-circle"></i>
+                                Help Guide
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="sidebar-section api-status-container">
+                        <h3>API Status</h3>
+                        <div class="api-status" id="apiStatus">
+                            <div class="status-indicator">
+                                <div class="status-dot pulse"></div>
+                                <span>Checking connection...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-content">
+                    <div class="analyzer-tabs">
+                        <button class="tab-btn active" data-tab="dna-analysis">
+                            <i class="fas fa-dna"></i>
+                            DNA Analysis
+                        </button>
+                        <button class="tab-btn" data-tab="genetic-testing">
+                            <i class="fas fa-vial"></i>
+                            Genetic Testing
+                        </button>
+                        <button class="tab-btn" data-tab="batch-processing">
+                            <i class="fas fa-layer-group"></i>
+                            Batch Processing
+                        </button>
+                    </div>
+
+                    <div class="tab-content active" id="dna-analysis">
+                        <div class="analyzer-upload" id="fileDropZone">
+                            <i class="fas fa-cloud-upload-alt"></i>
+                            <h3>Upload DNA Sequence</h3>
+                            <p>Drag and drop your sequence file here or click to browse</p>
+                            <input type="file" id="fileInput" accept=".fa,.fasta,.fastq,.txt" hidden>
+                            <span class="upload-formats">Supported formats: .fa, .fasta, .fastq, .txt</span>
+                        </div>
+
+                        <div class="analysis-options">
+                            <h3>Analysis Options</h3>
+                            <div class="options-grid">
+                                <div class="option-card">
+                                    <div class="option-header">
+                                        <i class="fas fa-microscope"></i>
+                                        <h4>Basic Analysis</h4>
+                                    </div>
+                                    <div class="option-content">
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="sequence-length"
+                                                checked>
+                                            <span class="checkmark"></span>
+                                            Sequence Length
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="gc-content" checked>
+                                            <span class="checkmark"></span>
+                                            GC Content
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="base-composition"
+                                                checked>
+                                            <span class="checkmark"></span>
+                                            Base Composition
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div class="option-card">
+                                    <div class="option-header">
+                                        <i class="fas fa-dna"></i>
+                                        <h4>Codon Analysis</h4>
+                                    </div>
+                                    <div class="option-content">
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="start-codons" checked>
+                                            <span class="checkmark"></span>
+                                            Start Codons
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="stop-codons" checked>
+                                            <span class="checkmark"></span>
+                                            Stop Codons
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="reading-frames">
+                                            <span class="checkmark"></span>
+                                            Reading Frames
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div class="option-card">
+                                    <div class="option-header">
+                                        <i class="fas fa-chart-line"></i>
+                                        <h4>Advanced Features</h4>
+                                    </div>
+                                    <div class="option-content">
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="coverage">
+                                            <span class="checkmark"></span>
+                                            Coverage Analysis
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="protein-prediction">
+                                            <span class="checkmark"></span>
+                                            Protein Prediction
+                                        </label>
+                                        <label class="option-checkbox">
+                                            <input type="checkbox" name="analysis-option" value="promoter-detection">
+                                            <span class="checkmark"></span>
+                                            Promoter Detection
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <button class="btn btn-primary analyze-btn" id="analyzeBtn" disabled>
+                                <i class="fas fa-play"></i>
+                                Start Analysis
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="tab-content" id="genetic-testing">
+                        <div class="genetic-testing-container">
+                            <div id="dropZone" class="drop-zone">
+                                <i class="fas fa-dna"></i>
+                                <h3>Upload DNA File or Drop Here</h3>
+                                <p>Supported formats: .fastq, .fasta, .sam, .bam, .vcf</p>
+                                <input type="file" id="dnaFileInput" accept=".fastq,.fasta,.sam,.bam,.vcf" />
+
+                                <div class="sample-selector">
+                                    <p>Or try with a sample file:</p>
+                                    <select id="sampleFileSelect">
+                                        <option value="">Select a sample file...</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div id="sequenceDisplay" class="sequence-display"></div>
+
+                            <button id="analyzeButton" class="analyze-btn">
+                                <i class="fas fa-microscope"></i>
+                                Analyze DNA
+                            </button>
+
+                            <div id="loadingSpinner" class="loading-spinner" style="display: none;">
+                                <div class="spinner"></div>
+                                <p>Analyzing DNA sequence...</p>
+                            </div>
+
+                            <div id="errorDisplay" class="error-display"></div>
+
+                            <div id="resultsContainer" class="results-container"></div>
+                        </div>
+                    </div>
+
+                    <div class="tab-content" id="batch-processing">
+                        <div class="coming-soon">
+                            <i class="fas fa-layer-group"></i>
+                            <h3>Batch Processing Coming Soon</h3>
+                            <p>Process multiple DNA sequence files simultaneously for high-throughput analysis. Sign up
+                                for our newsletter to be notified when this feature launches.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Results Section (initially hidden) -->
+            <div class="analyzer-results" id="resultsSection" style="display: none;">
+                <div class="results-header">
+                    <h2>Analysis Results</h2>
+                    <div class="results-actions">
+                        <div class="results-file-info" id="resultsFileInfo">
+                            <i class="fas fa-file-alt"></i>
+                            <span>sample.fa</span>
+                        </div>
+                        <button class="btn btn-secondary" id="exportBtn">
+                            <i class="fas fa-download"></i>
+                            Export Results
+                        </button>
+                    </div>
+                </div>
+
+                <div class="results-content" id="resultsContent">
+                    <!-- Results will be inserted here by JavaScript -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Export Modal -->
+        <div class="modal" id="exportModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Export Results</h3>
+                    <button class="close-modal" id="closeExportModal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <p>Choose format to download your analysis results:</p>
+                    <div class="export-options">
+                        <button class="export-option" data-format="json">
+                            <i class="fas fa-file-code"></i>
+                            <span>JSON</span>
+                        </button>
+                        <button class="export-option" data-format="csv">
+                            <i class="fas fa-file-csv"></i>
+                            <span>CSV</span>
+                        </button>
+                        <button class="export-option" data-format="txt">
+                            <i class="fas fa-file-alt"></i>
+                            <span>Text</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Help Modal -->
+        <div class="modal" id="helpModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>DNA Analyzer Help</h3>
+                    <button class="close-modal" id="closeHelpModal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <h4>Getting Started</h4>
+                    <p>To analyze DNA sequences, follow these steps:</p>
+                    <ol>
+                        <li>Upload a DNA sequence file (.fa, .fasta, .fastq, .txt) by dragging it to the upload area or
+                            clicking to browse.</li>
+                        <li>Select the analysis options you want to run on your sequence.</li>
+                        <li>Click "Start Analysis" to process your sequence.</li>
+                        <li>View the results and download them if needed.</li>
+                    </ol>
+
+                    <h4>Analysis Options</h4>
+                    <p>DNAnalyzer offers several types of analysis:</p>
+                    <ul>
+                        <li><strong>Basic Analysis:</strong> Calculates sequence length, GC content percentage, and
+                            nucleotide composition.</li>
+                        <li><strong>Codon Analysis:</strong> Identifies start codons (ATG), stop codons (TAA, TAG, TGA),
+                            and reading frames.</li>
+                        <li><strong>Advanced Features:</strong> Performs coverage analysis, protein prediction, and
+                            promoter sequence detection.</li>
+                    </ul>
+
+                    <h4>Need More Help?</h4>
+                    <p>Check out our <a href="../docs/docs.html">Documentation</a> for detailed guides or join our <a
+                            href="https://discord.gg/xNpujz49gj">Discord community</a> for support.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Notification container -->
+    <div class="notification-container" id="notificationContainer"></div>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                    <p>DNAnalyzer is a powerful, privacy-focused DNA analysis tool using cutting-edge machine learning
+                        models for accurate, on-device genomic analysis.</p>
+
+                    <div class="social-links">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="social-link">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="https://twitter.com/DNAnalyzer_" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="https://www.x.com/DNAnalyzer_" class="social-link">
+                            <svg xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                                <path
+                                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="../features/features.html">Features</a></li>
+                        <li><a href="analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="../server/server.html">Server</a></li>
+                        <li><a href="../docs/docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="../docs/getting-started.md">Getting Started</a></li>
+                        <li><a href="../docs/citations.md">Citations</a></li>
+                        <li><a href="../docs/research/genes.md">Gene Research</a></li>
+                        <li><a href="../docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="../docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright &copy; Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                    81-2908499). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="../LICENSE.md">License</a>
+                    <a href="../SECURITY.md">Security</a>
+                    <a href="../CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="../assets/js/api-client.js"></script>
+    <script src="analyzer.js"></script>
+    <!-- Chart.js for visualizations -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
+    <!-- Genetic Testing Script -->
+    <script src="genetic-testing.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+
+Directory: assets
+==================================================
+File: ./web/assets/full.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/IBM Plex Mono Inter
+==================================================
+
+Directory: assets/IBM Plex Mono Inter/IBM_Plex_Mono
+==================================================
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Italic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Bold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Thin.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Light.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Regular.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-Medium.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/OFL.txt
+--------------------------------------------------
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/IBM Plex Mono Inter/Inter
+==================================================
+File: ./web/assets/IBM Plex Mono Inter/Inter/Inter-VariableFont_slnt,wght.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xeb in position 17: invalid continuation byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/README.txt
+--------------------------------------------------
+Inter Variable Font
+===================
+
+This download contains Inter as both a variable font and static fonts.
+
+Inter is a variable font with these axes:
+  slnt
+  wght
+
+This means all the styles are contained in a single file:
+  Inter/Inter-VariableFont_slnt,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  Inter/static/Inter-Thin.ttf
+  Inter/static/Inter-ExtraLight.ttf
+  Inter/static/Inter-Light.ttf
+  Inter/static/Inter-Regular.ttf
+  Inter/static/Inter-Medium.ttf
+  Inter/static/Inter-SemiBold.ttf
+  Inter/static/Inter-Bold.ttf
+  Inter/static/Inter-ExtraBold.ttf
+  Inter/static/Inter-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/OFL.txt
+--------------------------------------------------
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------
+
+Directory: assets/IBM Plex Mono Inter/Inter/static
+==================================================
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-ExtraBold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Light.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Medium.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-SemiBold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Bold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-ExtraLight.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Thin.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Regular.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono Inter/Inter/static/Inter-Black.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0xba in position 19: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/mockup
+==================================================
+File: ./web/assets/mockup/image.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/mockup/Slide_01.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/IBM Plex Mono
+==================================================
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-ThinItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-LightItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-SemiBoldItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Italic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Bold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Thin.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Light.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Regular.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-Medium.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-MediumItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/OFL.txt
+--------------------------------------------------
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-ExtraLightItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-BoldItalic.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9c in position 19: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-ExtraLight.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/IBM Plex Mono/IBMPlexMono-SemiBold.ttf
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x82 in position 17: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/icons
+==================================================
+File: ./web/assets/icons/Icon.svg
+--------------------------------------------------
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" rx="100" fill="white"/>
+<rect x="65" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+<rect x="176.725" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="288.448" y="75" width="46.5517" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="130.173" y="142.5" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="65" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#F48022"/>
+<rect x="241.896" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="65" y="277.5" width="46.5517" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="241.896" y="277.5" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+</svg>
+
+--------------------------------------------------
+File: ./web/assets/icons/Icon_Dark_BG_Base.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/icons/Icon_Base.svg
+--------------------------------------------------
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="white"/>
+<rect x="65" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+<rect x="176.725" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="288.448" y="75" width="46.5517" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="130.173" y="142.5" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="65" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#F48022"/>
+<rect x="241.896" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="65" y="277.5" width="46.5517" height="46.5517" rx="23.2759" fill="#0178D6"/>
+<rect x="241.896" y="277.5" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+</svg>
+
+--------------------------------------------------
+File: ./web/assets/icons/Icon_Dark_BG.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/icons/Square_Logo.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/icons/Slide_E.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/icons/Icon_Dark_BG.svg
+--------------------------------------------------
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" rx="100" fill="#001627"/>
+<rect x="65" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+<rect x="176.725" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="288.448" y="75" width="46.5517" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="130.173" y="142.5" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="65" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#F48022"/>
+<rect x="241.896" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="65" y="277.5" width="46.5517" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="241.896" y="277.5" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+</svg>
+
+--------------------------------------------------
+File: ./web/assets/icons/Icon_Dark_BG_Base.svg
+--------------------------------------------------
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="400" fill="#001627"/>
+<rect x="65" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+<rect x="176.725" y="75" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="288.448" y="75" width="46.5517" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="130.173" y="142.5" width="93.1035" height="46.5517" rx="23.2759" fill="#01A4EF"/>
+<rect x="65" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="#F48022"/>
+<rect x="241.896" y="210" width="93.1035" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="65" y="277.5" width="46.5517" height="46.5517" rx="23.2759" fill="white"/>
+<rect x="241.896" y="277.5" width="93.1035" height="46.5517" rx="23.2759" fill="#E3016D"/>
+</svg>
+
+--------------------------------------------------
+File: ./web/assets/icons/emblem-dark-bg.svg
+--------------------------------------------------
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="75" fill="none" viewBox="0 0 81 75"><rect width="27.809" height="13.904" fill="#E3016D" rx="6.952"/><rect width="27.809" height="13.904" x="33.371" fill="#01A4EF" rx="6.952"/><rect width="13.904" height="13.904" x="66.741" fill="#fff" rx="6.952"/><rect width="27.809" height="13.904" x="19.466" y="20.161" fill="#01A4EF" rx="6.952"/><rect width="27.809" height="13.904" y="40.323" fill="#F48022" rx="6.952"/><rect width="27.809" height="13.904" x="52.837" y="40.323" fill="#fff" rx="6.952"/><rect width="13.904" height="13.904" y="60.484" fill="#fff" rx="6.952"/><rect width="27.809" height="13.904" x="52.837" y="60.484" fill="#E3016D" rx="6.952"/></svg>
+--------------------------------------------------
+File: ./web/assets/icons/Gradient.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+File: ./web/assets/icons/emblem-light-bg.svg
+--------------------------------------------------
+<svg width="81" height="75" viewBox="0 0 81 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.611572" width="27.8088" height="13.9044" rx="6.9522" fill="#E3016D"/>
+<rect x="33.3706" y="0.611572" width="27.8088" height="13.9044" rx="6.9522" fill="#01A4EF"/>
+<rect x="66.7412" y="0.611572" width="13.9044" height="13.9044" rx="6.9522" fill="#0178D6"/>
+<rect x="19.4663" y="20.7729" width="27.8088" height="13.9044" rx="6.9522" fill="#01A4EF"/>
+<rect y="40.9343" width="27.8088" height="13.9044" rx="6.9522" fill="#F48022"/>
+<rect x="52.8369" y="40.9343" width="27.8088" height="13.9044" rx="6.9522" fill="#0178D6"/>
+<rect y="61.0957" width="13.9044" height="13.9044" rx="6.9522" fill="#0178D6"/>
+<rect x="52.8369" y="61.0957" width="27.8088" height="13.9044" rx="6.9522" fill="#E3016D"/>
+</svg>
+
+--------------------------------------------------
+File: ./web/assets/icons/Circular.png
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x89 in position 0: invalid start byte]
+
+--------------------------------------------------
+
+Directory: assets/js
+==================================================
+File: ./web/assets/js/api-client.js
+--------------------------------------------------
+/**
+ * DNAnalyzer API Client
+ * 
+ * This module provides functions to interact with the DNAnalyzer API endpoints.
+ * It enables the website to access the core DNAnalyzer features through a unified interface.
+ * 
+ * @version 1.0.0
+ */
+
+const DNAnalyzerAPI = {
+    // Base URL for API requests - configurable for different environments
+    baseUrl: 'http://localhost:8080/api/v1',
+
+    /**
+     * Set the base URL for the API
+     * @param {string} url - The base URL for the API
+     */
+    setBaseUrl(url) {
+        this.baseUrl = url;
+    },
+
+    /**
+     * Check if the API is online
+     * @returns {Promise<Object>} - API status information
+     */
+    async checkStatus() {
+        try {
+            const response = await fetch(`${this.baseUrl}/status`);
+            if (!response.ok) {
+                throw new Error('API status check failed');
+            }
+            return await response.json();
+        } catch (error) {
+            console.error('API status check error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Analyze a DNA file with various options
+     * @param {File} dnaFile - The DNA file to analyze
+     * @param {Object} options - Analysis options
+     * @returns {Promise<Object>} - Analysis results
+     */
+    async analyzeDNA(dnaFile, options = {}) {
+        try {
+            const formData = new FormData();
+            formData.append('dnaFile', dnaFile);
+            
+            // Add options to form data
+            if (options.amino) formData.append('amino', options.amino);
+            if (options.minCount) formData.append('minCount', options.minCount);
+            if (options.maxCount) formData.append('maxCount', options.maxCount);
+            if (options.reverse) formData.append('reverse', options.reverse);
+            if (options.rcomplement) formData.append('rcomplement', options.rcomplement);
+            if (options.codons) formData.append('codons', options.codons);
+            if (options.coverage) formData.append('coverage', options.coverage);
+            if (options.longest) formData.append('longest', options.longest);
+            if (options.format) formData.append('format', options.format);
+            
+            const response = await fetch(`${this.baseUrl}/analyze`, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'DNA analysis failed');
+            }
+            
+            // Handle different response formats
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                return await response.json();
+            } else {
+                return await response.text();
+            }
+        } catch (error) {
+            console.error('DNA analysis error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Analyze base pair composition of a DNA sequence
+     * @param {string} sequence - The DNA sequence
+     * @returns {Promise<Object>} - Base pair analysis results
+     */
+    async analyzeBasePairs(sequence) {
+        try {
+            const response = await fetch(`${this.baseUrl}/base-pairs`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ sequence })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Base pair analysis failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('Base pair analysis error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Find proteins in a DNA sequence
+     * @param {string} sequence - The DNA sequence
+     * @param {string} aminoAcid - The amino acid to start proteins with
+     * @returns {Promise<Object>} - Protein analysis results
+     */
+    async findProteins(sequence, aminoAcid = 'M') {
+        try {
+            const response = await fetch(`${this.baseUrl}/find-proteins`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    sequence,
+                    aminoAcid
+                })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Protein finding failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('Protein finding error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Analyze reading frames in a DNA sequence
+     * @param {string} sequence - The DNA sequence
+     * @param {number} minLength - Minimum length for potential genes
+     * @returns {Promise<Object>} - Reading frame analysis results
+     */
+    async analyzeReadingFrames(sequence, minLength = 300) {
+        try {
+            const response = await fetch(`${this.baseUrl}/reading-frames`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    sequence,
+                    minLength
+                })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Reading frame analysis failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('Reading frame analysis error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Analyze genetic testing data (23andMe, AncestryDNA, etc.)
+     * @param {File} geneticFile - The genetic data file
+     * @param {boolean} snpAnalysis - Whether to include detailed SNP analysis
+     * @returns {Promise<Object>} - Genetic analysis results
+     */
+    async analyzeGeneticData(geneticFile, snpAnalysis = false) {
+        try {
+            const formData = new FormData();
+            formData.append('geneticFile', geneticFile);
+            formData.append('snpAnalysis', snpAnalysis);
+            
+            const response = await fetch(`${this.baseUrl}/analyze-genetic`, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Genetic data analysis failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('Genetic data analysis error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Manipulate a DNA sequence (reverse, complement)
+     * @param {string} sequence - The DNA sequence
+     * @param {boolean} reverse - Whether to reverse the sequence
+     * @param {boolean} complement - Whether to get the complement
+     * @returns {Promise<Object>} - Manipulated sequence results
+     */
+    async manipulateDNA(sequence, reverse = false, complement = false) {
+        try {
+            const response = await fetch(`${this.baseUrl}/manipulate`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    sequence,
+                    reverse,
+                    complement
+                })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'DNA manipulation failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('DNA manipulation error:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Parse a DNA file (FASTA, FASTQ)
+     * @param {File} file - The file to parse
+     * @returns {Promise<Object>} - Parsed DNA sequence
+     */
+    async parseFile(file) {
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            const response = await fetch(`${this.baseUrl}/parse`, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'File parsing failed');
+            }
+            
+            return await response.json();
+        } catch (error) {
+            console.error('File parsing error:', error);
+            throw error;
+        }
+    }
+};
+
+// Export the API client for use in other modules
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = DNAnalyzerAPI;
+} else {
+    window.DNAnalyzerAPI = DNAnalyzerAPI;
+}
+--------------------------------------------------
+
+Directory: assets/videos
+==================================================
+File: ./web/assets/videos/dna_spiral.mp4
+--------------------------------------------------
+[Could not read file: 'utf-8' codec can't decode byte 0x9b in position 35: invalid start byte]
+
+--------------------------------------------------
+
+Directory: features
+==================================================
+File: ./web/features/features.css
+--------------------------------------------------
+/* Features Page Styles */
+
+/* Hero section */
+.features-hero {
+    padding: 140px 0 80px;
+    position: relative;
+    text-align: center;
+}
+
+.features-hero-content h1 {
+    font-size: 3.5rem;
+    margin-bottom: var(--space-md);
+}
+
+.features-hero-content p {
+    font-size: 1.2rem;
+    max-width: 700px;
+    margin: 0 auto;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Feature highlights */
+.feature-highlights {
+    padding-top: var(--space-xxl);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--space-xl);
+}
+
+.feature-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-normal);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-md);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.feature-card .feature-icon {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.15), rgba(0, 164, 239, 0.15));
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--blue);
+    margin-bottom: var(--space-md);
+}
+
+.feature-card h3 {
+    font-size: 1.3rem;
+    margin-bottom: var(--space-sm);
+    color: var(--white);
+}
+
+.feature-card p {
+    color: rgba(255, 255, 255, 0.7);
+    flex: 1;
+    margin-bottom: var(--space-md);
+}
+
+.feature-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    color: var(--blue);
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: all var(--transition-fast);
+}
+
+.feature-link i {
+    transition: all var(--transition-fast);
+}
+
+.feature-link:hover {
+    color: var(--light-blue);
+}
+
+.feature-link:hover i {
+    transform: translateX(var(--space-xs));
+}
+
+/* Detailed feature sections */
+.section-detailed {
+    padding: var(--space-xxl) 0;
+}
+
+.feature-section-odd {
+    background: linear-gradient(135deg, rgba(5, 30, 62, 0.7), rgba(0, 20, 39, 0.7));
+}
+
+.feature-detailed {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xxl);
+    align-items: center;
+}
+
+.feature-detailed.reverse {
+    grid-template-columns: 1fr 1fr;
+    direction: rtl;
+}
+
+.feature-detailed.reverse .feature-content {
+    direction: ltr;
+}
+
+.feature-image {
+    position: relative;
+}
+
+.feature-image-wrapper {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.1), rgba(0, 164, 239, 0.1));
+    padding: var(--space-sm);
+    height: 0;
+    padding-bottom: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.feature-image-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.05), rgba(0, 164, 239, 0.05));
+    z-index: 0;
+}
+
+.feature-image-wrapper img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    transition: all var(--transition-normal);
+}
+
+.feature-content h2 {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+    color: var(--white);
+}
+
+.feature-content > p {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: var(--space-lg);
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 var(--space-xl) 0;
+}
+
+.feature-list li {
+    display: flex;
+    margin-bottom: var(--space-lg);
+    gap: var(--space-md);
+}
+
+.feature-list li i {
+    color: var(--blue);
+    font-size: 1.2rem;
+    flex-shrink: 0;
+    margin-top: 0.2rem;
+}
+
+.feature-list li div h4 {
+    margin: 0 0 var(--space-xs) 0;
+    font-size: 1.1rem;
+    color: var(--white);
+}
+
+.feature-list li div p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Comparison table */
+.comparison-section {
+    background: var(--dark-blue);
+    padding: var(--space-xxl) 0;
+}
+
+.comparison-table-container {
+    overflow-x: auto;
+    margin-top: var(--space-xl);
+}
+
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--white);
+}
+
+.comparison-table th,
+.comparison-table td {
+    padding: var(--space-md) var(--space-lg);
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.comparison-table th {
+    background: rgba(0, 0, 0, 0.2);
+    font-weight: 600;
+    color: var(--blue);
+}
+
+.comparison-table tr:hover td {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.comparison-table td:nth-child(1) {
+    font-weight: 500;
+}
+
+.check-icon {
+    color: var(--success);
+    margin-right: var(--space-xs);
+}
+
+.x-icon {
+    color: var(--error);
+    margin-right: var(--space-xs);
+}
+
+.minus-icon {
+    color: var(--warning);
+    margin-right: var(--space-xs);
+}
+
+/* Testimonials */
+.testimonials-section {
+    padding: var(--space-xxl) 0;
+}
+
+.testimonials-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--space-xl);
+    margin-top: var(--space-xl);
+}
+
+.testimonial-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-normal);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.testimonial-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-md);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.testimonial-content {
+    flex: 1;
+}
+
+.testimonial-content p {
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 1.05rem;
+    line-height: 1.6;
+    position: relative;
+    padding: 0 var(--space-sm);
+}
+
+.testimonial-content p::before,
+.testimonial-content p::after {
+    content: '"';
+    color: var(--blue);
+    font-size: 1.5rem;
+    font-weight: 700;
+    position: absolute;
+}
+
+.testimonial-content p::before {
+    left: -var(--space-xs);
+    top: -var(--space-xs);
+}
+
+.testimonial-content p::after {
+    right: -var(--space-xs);
+    bottom: 0;
+}
+
+.testimonial-author {
+    display: flex;
+    align-items: center;
+    margin-top: var(--space-md);
+    padding-top: var(--space-md);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.author-info h4 {
+    margin: 0 0 var(--space-xs) 0;
+    font-size: 1rem;
+    color: var(--white);
+}
+
+.author-info p {
+    margin: 0;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* CTA Section */
+.cta-section {
+    background: linear-gradient(135deg, rgba(255, 0, 102, 0.1), rgba(0, 164, 239, 0.1));
+    padding: var(--space-xxl) 0;
+    text-align: center;
+}
+
+.cta-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+    color: var(--white);
+}
+
+.cta-section p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: var(--space-xl);
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cta-buttons {
+    display: flex;
+    gap: var(--space-md);
+    justify-content: center;
+}
+
+/* Animation for fade-in elements */
+[data-aos] {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+[data-aos].aos-animate {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+[data-aos-delay="100"] {
+    transition-delay: 0.1s;
+}
+
+[data-aos-delay="200"] {
+    transition-delay: 0.2s;
+}
+
+/* Responsive styles */
+@media (max-width: 1024px) {
+    .feature-detailed,
+    .feature-detailed.reverse {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+        direction: ltr;
+    }
+    
+    .feature-content h2 {
+        font-size: 2rem;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+        max-width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 768px) {
+    .features-hero-content h1 {
+        font-size: 2.5rem;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .testimonials-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .feature-image-wrapper {
+        padding-bottom: 60%;
+    }
+}
+
+@media (max-width: 480px) {
+    .features-hero-content h1 {
+        font-size: 2rem;
+    }
+    
+    .features-hero-content p {
+        font-size: 1rem;
+    }
+    
+    .feature-content h2 {
+        font-size: 1.75rem;
+    }
+    
+    .feature-list li {
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+    
+    .comparison-table th,
+    .comparison-table td {
+        padding: var(--space-sm);
+    }
+}
+--------------------------------------------------
+File: ./web/features/features.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Features - DNAnalyzer</title>
+    <meta name="description"
+        content="Explore DNAnalyzer's advanced features for DNA sequence analysis, including codon detection, high coverage analysis, and more.">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="features.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <!-- Background effects -->
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+    </div>
+
+    <div class="notification-banner">
+        <span>Exclusive WSSEF Preview: </span>
+        <span>&nbsp;Transformer Architecture in Epigenomics!</span>
+        <a href="https://epiclassify.dnanalyzer.org" target="_blank" class="notification-link">Explore Now</a>
+        <button class="notification-close" aria-label="Dismiss notification"></button>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="../index.html" class="logo">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="features.html" class="active">Features</a></li>
+                <li><a href="../analyzer/analyzer.html">Analyzer</a></li>
+                <li><a href="../server/server.html">Server</a></li>
+                <li><a href="../docs/docs.html">Docs</a></li>
+                <li><a href="../about/about.html">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main>
+        <section class="features-hero">
+            <div class="container">
+                <div class="features-hero-content">
+                    <h1>DNAnalyzer <span class="gradient-text">Features</span></h1>
+                    <p>Advanced DNA analysis capabilities powered by machine learning, designed for researchers,
+                        educators, and enthusiasts.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="section feature-highlights">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Key Capabilities</h2>
+                    <p>Our comprehensive suite of DNA analysis tools provides insights from basic sequence statistics to
+                        advanced protein prediction</p>
+                </div>
+
+                <div class="features-grid">
+                    <div class="feature-card" data-aos="fade-up">
+                        <div class="feature-icon">
+                            <i class="fas fa-microscope"></i>
+                        </div>
+                        <h3>Sequence Analysis</h3>
+                        <p>Get detailed statistics about your DNA sequence, including length, GC content, and nucleotide
+                            composition with intuitive visualizations.</p>
+                        <a href="#sequence-analysis" class="feature-link">Learn more <i
+                                class="fas fa-arrow-right"></i></a>
+                    </div>
+
+                    <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+                        <div class="feature-icon">
+                            <i class="fas fa-dna"></i>
+                        </div>
+                        <h3>Codon Detection</h3>
+                        <p>Identify start and stop codons across your sequence to locate potential protein-coding
+                            regions with high precision.</p>
+                        <a href="#codon-detection" class="feature-link">Learn more <i
+                                class="fas fa-arrow-right"></i></a>
+                    </div>
+
+                    <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
+                        <div class="feature-icon">
+                            <i class="fas fa-project-diagram"></i>
+                        </div>
+                        <h3>Reading Frames</h3>
+                        <p>Analyze all six reading frames to identify potential protein-coding regions and open reading
+                            frames (ORFs).</p>
+                        <a href="#reading-frames" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
+                    </div>
+
+                    <div class="feature-card" data-aos="fade-up">
+                        <div class="feature-icon">
+                            <i class="fas fa-chart-bar"></i>
+                        </div>
+                        <h3>Coverage Analysis</h3>
+                        <p>Identify high-coverage (GC-rich) regions, often associated with gene-dense areas and promoter
+                            regions.</p>
+                        <a href="#coverage-analysis" class="feature-link">Learn more <i
+                                class="fas fa-arrow-right"></i></a>
+                    </div>
+
+                    <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+                        <div class="feature-icon">
+                            <i class="fas fa-prescription"></i>
+                        </div>
+                        <h3>Protein Prediction</h3>
+                        <p>Predict potential proteins from your DNA sequence and analyze their amino acid composition.
+                        </p>
+                        <a href="#protein-prediction" class="feature-link">Learn more <i
+                                class="fas fa-arrow-right"></i></a>
+                    </div>
+
+                    <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
+                        <div class="feature-icon">
+                            <i class="fas fa-server"></i>
+                        </div>
+                        <h3>Local Server</h3>
+                        <p>Deploy DNAnalyzer as a local server for secure, high-throughput analysis of sensitive genomic
+                            data.</p>
+                        <a href="#local-server" class="feature-link">Learn more <i class="fas fa-arrow-right"></i></a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="sequence-analysis" class="section section-detailed feature-section-odd">
+            <div class="container">
+                <div class="feature-detailed">
+                    <div class="feature-image" data-aos="fade-right">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/sequence-analysis.png" alt="Sequence Analysis"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-left">
+                        <h2>Sequence Analysis</h2>
+                        <p>Our basic sequence analysis tools give you immediate insights into your DNA sequence
+                            properties.</p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Base Composition</h4>
+                                    <p>Interactive visualization of nucleotide distribution with precise percentages</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>GC Content Calculation</h4>
+                                    <p>Identify regions with high GC content, important for gene density and stability
+                                    </p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Sequence Length Analysis</h4>
+                                    <p>Get exact measurements of your DNA sequence with support for very large genomes
+                                    </p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../analyzer/analyzer.html" class="btn btn-primary">Try Sequence Analysis</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="codon-detection" class="section section-detailed feature-section-even">
+            <div class="container">
+                <div class="feature-detailed reverse">
+                    <div class="feature-image" data-aos="fade-left">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/codon-detection.png" alt="Codon Detection"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-right">
+                        <h2>Codon Detection</h2>
+                        <p>Identify critical codon patterns in your DNA sequence with our advanced detection algorithms.
+                        </p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Start Codon Identification</h4>
+                                    <p>Automatically detect ATG start codons that initiate protein translation</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Stop Codon Recognition</h4>
+                                    <p>Find all TAA, TAG, and TGA stop codons that terminate protein synthesis</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Codon Frequency Analysis</h4>
+                                    <p>Analyze codon usage patterns across your sequence to identify potential gene
+                                        regions</p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../analyzer/analyzer.html" class="btn btn-primary">Try Codon Detection</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="reading-frames" class="section section-detailed feature-section-odd">
+            <div class="container">
+                <div class="feature-detailed">
+                    <div class="feature-image" data-aos="fade-right">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/reading-frames.png" alt="Reading Frames"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-left">
+                        <h2>Reading Frames Analysis</h2>
+                        <p>Comprehensive analysis of all six reading frames to identify potential genes and coding
+                            regions.</p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Six-Frame Translation</h4>
+                                    <p>Analyze three forward and three reverse reading frames simultaneously</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Open Reading Frame (ORF) Detection</h4>
+                                    <p>Identify complete ORFs from start to stop codons across all frames</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Gene Prediction</h4>
+                                    <p>Find potential genes based on ORF length and composition characteristics</p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../analyzer/analyzer.html" class="btn btn-primary">Try Reading Frames Analysis</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="coverage-analysis" class="section section-detailed feature-section-even">
+            <div class="container">
+                <div class="feature-detailed reverse">
+                    <div class="feature-image" data-aos="fade-left">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/coverage-analysis.png" alt="Coverage Analysis"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-right">
+                        <h2>Coverage Analysis</h2>
+                        <p>Identify regions of interest with our powerful coverage analysis tools to spot regulatory
+                            elements and gene-dense areas.</p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>GC-Rich Region Detection</h4>
+                                    <p>Find CpG islands and GC-rich regions often associated with gene promoters</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Promoter Element Identification</h4>
+                                    <p>Detect TATA boxes, BRE, INR, and DPE motifs that indicate promoter regions</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Visualization Tools</h4>
+                                    <p>Graphical representation of coverage across your sequence for easy interpretation
+                                    </p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../analyzer/analyzer.html" class="btn btn-primary">Try Coverage Analysis</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="protein-prediction" class="section section-detailed feature-section-odd">
+            <div class="container">
+                <div class="feature-detailed">
+                    <div class="feature-image" data-aos="fade-right">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/protein-prediction.png" alt="Protein Prediction"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-left">
+                        <h2>Protein Prediction</h2>
+                        <p>Translate DNA sequences into proteins and analyze their properties with our advanced
+                            prediction tools.</p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>ORF Translation</h4>
+                                    <p>Convert open reading frames to amino acid sequences using the standard genetic
+                                        code</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Protein Length Filtering</h4>
+                                    <p>Focus on proteins of significant length to identify functional gene products</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Amino Acid Composition</h4>
+                                    <p>Analyze the distribution of amino acids within predicted proteins</p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../analyzer/analyzer.html" class="btn btn-primary">Try Protein Prediction</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="local-server" class="section section-detailed feature-section-even">
+            <div class="container">
+                <div class="feature-detailed reverse">
+                    <div class="feature-image" data-aos="fade-left">
+                        <div class="feature-image-wrapper">
+                            <img src="../assets/screenshots/local-server.png" alt="Local Server"
+                                onerror="this.src='../assets/icons/Icon_Dark_BG.svg'">
+                        </div>
+                    </div>
+                    <div class="feature-content" data-aos="fade-right">
+                        <h2>Local Server Deployment</h2>
+                        <p>Run DNAnalyzer as a local server for secure, high-throughput analysis of sensitive genomic
+                            data.</p>
+
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>Privacy-Focused Analysis</h4>
+                                    <p>Keep sensitive genetic data on your own infrastructure with no external data
+                                        transfer</p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>High-Performance Processing</h4>
+                                    <p>Optimized for multi-core systems to handle large datasets and batch processing
+                                    </p>
+                                </div>
+                            </li>
+                            <li>
+                                <i class="fas fa-check-circle"></i>
+                                <div>
+                                    <h4>API Integration</h4>
+                                    <p>RESTful API for seamless integration with your existing bioinformatics pipelines
+                                    </p>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <a href="../server/server.html" class="btn btn-primary">Learn About Server Setup</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section comparison-section">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Why Choose DNAnalyzer?</h2>
+                    <p>See how DNAnalyzer compares to traditional DNA analysis tools</p>
+                </div>
+
+                <div class="comparison-table-container" data-aos="fade-up">
+                    <table class="comparison-table">
+                        <thead>
+                            <tr>
+                                <th>Feature</th>
+                                <th>DNAnalyzer</th>
+                                <th>Traditional Tools</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>User Interface</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Modern web interface</td>
+                                <td><i class="fas fa-times-circle x-icon"></i> Often command-line only</td>
+                            </tr>
+                            <tr>
+                                <td>Privacy</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> On-device processing</td>
+                                <td><i class="fas fa-times-circle x-icon"></i> May require server upload</td>
+                            </tr>
+                            <tr>
+                                <td>Machine Learning</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Advanced ML algorithms</td>
+                                <td><i class="fas fa-times-circle x-icon"></i> Often rule-based only</td>
+                            </tr>
+                            <tr>
+                                <td>Setup Complexity</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Simple, instant setup</td>
+                                <td><i class="fas fa-times-circle x-icon"></i> Complex dependencies</td>
+                            </tr>
+                            <tr>
+                                <td>Visualization</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Interactive graphics</td>
+                                <td><i class="fas fa-times-circle x-icon"></i> Often text-only output</td>
+                            </tr>
+                            <tr>
+                                <td>Multiple File Support</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> FASTA, FASTQ, plain text</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Various formats</td>
+                            </tr>
+                            <tr>
+                                <td>Cost</td>
+                                <td><i class="fas fa-check-circle check-icon"></i> Free, open-source</td>
+                                <td><i class="fas fa-minus-circle minus-icon"></i> Often commercial</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <section class="section testimonials-section">
+            <div class="container">
+                <div class="section-title">
+                    <h2>What Our Users Say</h2>
+                    <p>Hear from researchers and educators who use DNAnalyzer</p>
+                </div>
+
+                <div class="testimonials-grid">
+                    <div class="testimonial-card" data-aos="fade-up">
+                        <div class="testimonial-content">
+                            <p>"DNAnalyzer has transformed how I teach genomics to undergraduates. The visual interface
+                                makes complex concepts accessible, and students can perform real analysis without a
+                                steep learning curve."</p>
+                        </div>
+                        <div class="testimonial-author">
+                            <div class="author-info">
+                                <h4>Dr. Sarah Chen</h4>
+                                <p>Associate Professor, Molecular Biology</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="testimonial-card" data-aos="fade-up" data-aos-delay="100">
+                        <div class="testimonial-content">
+                            <p>"As a researcher focusing on genetic disorders, I appreciate DNAnalyzer's privacy-first
+                                approach. The local server option allows me to analyze sensitive patient data without
+                                exposing it to third parties."</p>
+                        </div>
+                        <div class="testimonial-author">
+                            <div class="author-info">
+                                <h4>Dr. Michael Rodriguez</h4>
+                                <p>Genetic Researcher</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="testimonial-card" data-aos="fade-up" data-aos-delay="200">
+                        <div class="testimonial-content">
+                            <p>"The ability to quickly identify promoter regions and protein-coding sequences has
+                                accelerated my synthetic biology project significantly. DNAnalyzer is now a core part of
+                                our design verification process."</p>
+                        </div>
+                        <div class="testimonial-author">
+                            <div class="author-info">
+                                <h4>Emily Takahashi</h4>
+                                <p>Synthetic Biology Engineer</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section cta-section">
+            <div class="container text-center">
+                <h2>Ready to start analyzing DNA sequences?</h2>
+                <p>Experience the power of DNAnalyzer's features today</p>
+
+                <div class="cta-buttons">
+                    <a href="../analyzer/analyzer.html" class="btn btn-primary">
+                        <i class="fas fa-dna btn-icon"></i> Try DNAnalyzer Now
+                    </a>
+                    <a href="../docs/docs.html" class="btn btn-secondary">
+                        <i class="fas fa-book btn-icon"></i> Read Documentation
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                    <p>DNAnalyzer is a powerful, privacy-focused DNA analysis tool using cutting-edge machine learning
+                        models for accurate, on-device genomic analysis.</p>
+
+                    <div class="footer-social">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="social-link">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="https://www.twitter.com/DNAnalyzer_" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="features.html">Features</a></li>
+                        <li><a href="../analyzer/analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="../server/server.html">Server</a></li>
+                        <li><a href="../docs/docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="../docs/getting-started.md">Getting Started</a></li>
+                        <li><a href="../docs/citations.md">Citations</a></li>
+                        <li><a href="../docs/research/genes.md">Gene Research</a></li>
+                        <li><a href="../docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="../docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright &copy; Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                    81-2908499). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="../LICENSE.md">License</a>
+                    <a href="../SECURITY.md">Security</a>
+                    <a href="../CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="features.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+File: ./web/features/features.js
+--------------------------------------------------
+/**
+ * DNAnalyzer - Features Page JavaScript
+ * Handles animations, scroll events and interactivity
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize navbar
+    initializeNavbar();
+    
+    // Initialize animations
+    initializeAnimations();
+    
+    // Initialize smooth scrolling
+    initializeSmoothScroll();
+});
+
+/**
+ * Initialize navbar functionality
+ */
+function initializeNavbar() {
+    const navbar = document.getElementById('navbar');
+    const mobileToggle = document.getElementById('mobileToggle');
+    const navLinks = document.getElementById('navLinks');
+    
+    // Handle scroll event to change navbar style
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+    
+    // Handle mobile menu toggle
+    if (mobileToggle && navLinks) {
+        mobileToggle.addEventListener('click', function() {
+            navLinks.classList.toggle('active');
+            
+            // Change the icon based on the state
+            const icon = mobileToggle.querySelector('i');
+            if (navLinks.classList.contains('active')) {
+                icon.classList.remove('fa-bars');
+                icon.classList.add('fa-times');
+            } else {
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-bars');
+            }
+        });
+        
+        // Close mobile menu when clicking a link
+        const links = navLinks.querySelectorAll('a');
+        links.forEach(link => {
+            link.addEventListener('click', function() {
+                navLinks.classList.remove('active');
+                const icon = mobileToggle.querySelector('i');
+                icon.classList.remove('fa-times');
+                icon.classList.add('fa-bars');
+            });
+        });
+    }
+}
+
+/**
+ * Initialize animations for elements
+ */
+function initializeAnimations() {
+    // Get all elements with data-aos attribute
+    const animatedElements = document.querySelectorAll('[data-aos]');
+    
+    // Create Intersection Observer for animations
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('aos-animate');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.1,
+        rootMargin: '0px 0px -100px 0px'
+    });
+    
+    // Observe all animated elements
+    animatedElements.forEach(element => {
+        observer.observe(element);
+    });
+    
+    // Add parallax effect to feature images
+    const featureImages = document.querySelectorAll('.feature-image-wrapper');
+    
+    window.addEventListener('scroll', () => {
+        featureImages.forEach(image => {
+            const rect = image.getBoundingClientRect();
+            const isVisible = (
+                rect.top <= window.innerHeight &&
+                rect.bottom >= 0
+            );
+            
+            if (isVisible) {
+                const scrollPos = window.scrollY;
+                const imgOffset = rect.top + scrollPos;
+                const parallaxOffset = (scrollPos - imgOffset) * 0.1;
+                
+                // Apply parallax effect
+                image.querySelector('img').style.transform = `translateY(${parallaxOffset}px)`;
+            }
+        });
+    });
+}
+
+/**
+ * Initialize smooth scrolling for anchor links
+ */
+function initializeSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href');
+            
+            // Skip if it's just "#" or not an ID selector
+            if (targetId === '#' || !targetId.startsWith('#')) return;
+            
+            const targetElement = document.querySelector(targetId);
+            
+            if (targetElement) {
+                e.preventDefault();
+                
+                const navbarHeight = document.querySelector('.navbar').offsetHeight;
+                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight - 20;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+/**
+ * Add hover effects for feature cards
+ */
+document.querySelectorAll('.feature-card').forEach(card => {
+    card.addEventListener('mouseenter', function() {
+        const icon = this.querySelector('.feature-icon');
+        if (icon) {
+            icon.style.transform = 'scale(1.1)';
+        }
+    });
+    
+    card.addEventListener('mouseleave', function() {
+        const icon = this.querySelector('.feature-icon');
+        if (icon) {
+            icon.style.transform = 'scale(1)';
+        }
+    });
+});
+
+/**
+ * Add hover effects for comparison table rows
+ */
+document.querySelectorAll('.comparison-table tr').forEach(row => {
+    row.addEventListener('mouseenter', function() {
+        const cells = this.querySelectorAll('td');
+        cells.forEach(cell => {
+            cell.style.transition = 'background-color 0.3s ease';
+        });
+    });
+});
+
+/**
+ * Add animation for CTA buttons
+ */
+document.querySelectorAll('.cta-buttons .btn').forEach(button => {
+    button.addEventListener('mouseenter', function() {
+        this.style.transform = 'translateY(-5px)';
+    });
+    
+    button.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0)';
+    });
+});
+
+// Add scale effect for feature images on hover
+document.querySelectorAll('.feature-image').forEach(image => {
+    image.addEventListener('mouseenter', function() {
+        const img = this.querySelector('img');
+        if (img) {
+            img.style.transform = 'scale(1.03)';
+        }
+    });
+    
+    image.addEventListener('mouseleave', function() {
+        const img = this.querySelector('img');
+        if (img) {
+            img.style.transform = 'scale(1)';
+        }
+    });
+});
+--------------------------------------------------
+
+Directory: hiring
+==================================================
+File: ./web/hiring/hiring.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hiring - DNAnalyzer</title>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="hiring.css">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <div class="background-blur"></div>
+    <div class="gradient-sphere"></div>
+    <div class="gradient-sphere secondary"></div>
+
+    <header class="floating-header">
+        <nav class="floating-nav">
+            <a href="../index.html" class="nav-link">
+                <img src="../assets/icons/Icon_Base.svg" alt="DNAnalyzer Logo" class="nav-logo">
+            </a>
+            <a href="../about/about.html" class="nav-link">About</a>
+            <a href="../features/features.html" class="nav-link">Features</a>
+            <a href="../analyzer/analyzer.html" class="nav-link">Analyzer</a>
+            <a href="../server/server.html" class="nav-link">Server</a>
+            <a href="../docs/docs.html" class="nav-link">Docs</a>
+            <a href="hiring.html" class="nav-link active">Hiring</a>
+            <div class="right-links">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
+            </div>
+        </nav>
+    </header>
+
+    <main class="container">
+        <section class="hero">
+            <h1>Join Our Team</h1>
+            <p>We're looking for talented individuals to help us revolutionize DNA analysis.</p>
+        </section>
+
+        <section class="positions-section">
+            <h2>Open Positions</h2>
+            <div class="positions-grid">
+                <div class="position-card">
+                    <h3>Software Engineer</h3>
+                    <p>Develop and maintain our DNA analysis tools and infrastructure.</p>
+                    <a href="hiring-modal.html" class="primary-btn">Apply Now</a>
+                </div>
+                <div class="position-card">
+                    <h3>Data Scientist</h3>
+                    <p>Analyze genetic data and develop machine learning models for DNA analysis.</p>
+                    <a href="hiring-modal.html" class="primary-btn">Apply Now</a>
+                </div>
+                <div class="position-card">
+                    <h3>UI/UX Designer</h3>
+                    <p>Design intuitive and engaging user interfaces for our web and mobile applications.</p>
+                    <a href="hiring-modal.html" class="primary-btn">Apply Now</a>
+                </div>
+            </div>
+        </section>
+
+        <section class="benefits-section">
+            <h2>Why Work With Us?</h2>
+            <div class="benefits-grid">
+                <div class="benefit-card">
+                    <i class="fas fa-rocket benefit-icon"></i>
+                    <h3>Innovative Projects</h3>
+                    <p>Work on cutting-edge technology and make a real impact in the field of genomics.</p>
+                </div>
+                <div class="benefit-card">
+                    <i class="fas fa-users benefit-icon"></i>
+                    <h3>Collaborative Environment</h3>
+                    <p>Join a team of passionate professionals who are dedicated to advancing DNA analysis.</p>
+                </div>
+                <div class="benefit-card">
+                    <i class="fas fa-heart benefit-icon"></i>
+                    <h3>Comprehensive Benefits</h3>
+                    <p>Enjoy competitive salaries, health insurance, and other great perks.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer-content">
+        <div class="footer-grid">
+            <div class="footer-section">
+                <h3>Product</h3>
+                <ul>
+                    <li><a href="../features/features.html">Features</a></li>
+                    <li><a href="../analyzer/analyzer.html">DNA Analyzer</a></li>
+                    <li><a href="../server/server.html">Server</a></li>
+                    <li><a href="../docs/docs.html">Documentation</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Resources</h3>
+                <ul>
+                    <li><a href="../docs/getting-started.md">Getting Started</a></li>
+                    <li><a href="../docs/citations.md">Citations</a></li>
+                    <li><a href="../docs/research/genes.md">Gene Research</a></li>
+                    <li><a href="../docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Community</h3>
+                <ul>
+                    <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                    <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                    <li><a href="../docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                    <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Legal</h3>
+                <ul>
+                    <li><a href="../LICENSE.md">License</a></li>
+                    <li><a href="../SECURITY.md">Security</a></li>
+                    <li><a href="../CITATION.cff">Citation</a></li>
+                    <li><a href="../humans.txt">Credits</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                81-2908499). MIT License.</p>
+        </div>
+    </footer>
+
+    <script src="hiring.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+File: ./web/hiring/hiring.css
+--------------------------------------------------
+/* General Styles */
+body {
+    font-family: 'IBM Plex Mono', monospace;
+    background-color: #0a0c1b;
+    color: #ffffff;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+/* Container */
+.container {
+    max-width: 1200px;
+    margin: 6rem auto 2rem;
+    padding: 2rem;
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Positions Section */
+.positions-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.positions-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--gradient-end);
+}
+
+.positions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.position-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.position-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
+}
+
+.position-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.position-card p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+.primary-btn {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    border: none;
+    padding: 0.8rem 1.6rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    min-width: 160px;
+    text-decoration: none;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4);
+    filter: brightness(1.1);
+}
+
+/* Benefits Section */
+.benefits-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.benefits-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--gradient-end);
+}
+
+.benefits-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.benefit-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.benefit-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
+}
+
+.benefit-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.benefit-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.benefit-card p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    .container {
+        margin: 4rem 1rem 2rem;
+        padding: 1rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .hero p {
+        font-size: 1.1rem;
+    }
+
+    .positions-section,
+    .benefits-section {
+        padding: 1.5rem;
+    }
+
+    .positions-grid,
+    .benefits-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+--------------------------------------------------
+File: ./web/hiring/hiring-modal.css
+--------------------------------------------------
+/* Modal Container */
+.modal-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.modal-container.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Modal Content */
+.modal-content {
+    background: var(--surface-color);
+    padding: 2rem;
+    border-radius: 12px;
+    max-width: 600px;
+    width: 100%;
+    position: relative;
+    box-shadow: 0 8px 32px rgba(0, 122, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Close Button */
+.close-modal {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.close-modal:hover {
+    color: rgba(255, 255, 255, 1);
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.1rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--gradient-start);
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+}
+
+/* Submit Button */
+.primary-btn {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    border: none;
+    padding: 0.8rem 1.6rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    min-width: 160px;
+    text-decoration: none;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(0, 122, 255, 0.4);
+    filter: brightness(1.1);
+}
+
+--------------------------------------------------
+File: ./web/hiring/hiring-modal.js
+--------------------------------------------------
+document.addEventListener('DOMContentLoaded', function() {
+    const modalContainer = document.querySelector('.modal-container');
+    const closeModalButton = document.querySelector('.close-modal');
+    const applicationForm = document.getElementById('application-form');
+
+    // Function to open the modal
+    function openModal() {
+        modalContainer.classList.add('active');
+    }
+
+    // Function to close the modal
+    function closeModal() {
+        modalContainer.classList.remove('active');
+    }
+
+    // Event listener for close button
+    closeModalButton.addEventListener('click', closeModal);
+
+    // Event listener for form submission
+    applicationForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        // Handle form submission logic here
+        alert('Application submitted successfully!');
+        closeModal();
+    });
+
+    // Open the modal when the page loads
+    openModal();
+});
+
+--------------------------------------------------
+File: ./web/hiring/hiring.js
+--------------------------------------------------
+document.addEventListener('DOMContentLoaded', function() {
+    // Add smooth scrolling for any anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Add hover effects for position cards
+    document.querySelectorAll('.position-card').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.2)';
+            this.style.borderColor = 'var(--gradient-end)';
+        });
+
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = 'none';
+            this.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+        });
+    });
+
+    // Add hover effects for benefit cards
+    document.querySelectorAll('.benefit-card').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.2)';
+            this.style.borderColor = 'var(--gradient-end)';
+        });
+
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = 'none';
+            this.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+        });
+    });
+});
+
+--------------------------------------------------
+File: ./web/hiring/hiring-modal.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apply Now - DNAnalyzer</title>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="hiring-modal.css">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <div class="modal-container">
+        <div class="modal-content">
+            <button class="close-modal">&times;</button>
+            <h2>Apply for the Position</h2>
+            <form id="application-form">
+                <div class="form-group">
+                    <label for="name">Full Name</label>
+                    <input type="text" id="name" name="name" required>
+                </div>
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="position">Position</label>
+                    <select id="position" name="position" required>
+                        <option value="software-engineer">Software Engineer</option>
+                        <option value="data-scientist">Data Scientist</option>
+                        <option value="ui-ux-designer">UI/UX Designer</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="resume">Upload Resume</label>
+                    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
+                </div>
+                <div class="form-group">
+                    <label for="cover-letter">Cover Letter</label>
+                    <textarea id="cover-letter" name="cover-letter" rows="5" required></textarea>
+                </div>
+                <button type="submit" class="primary-btn">Submit Application</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="hiring-modal.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+
+Directory: server
+==================================================
+File: ./web/server/server.js
+--------------------------------------------------
+/*
+ * DNAnalyzer Server Page JavaScript
+ * Copyright © 2025 Piyush Acharya
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile navigation toggle
+    const mobileToggle = document.getElementById('mobileToggle');
+    const navLinks = document.getElementById('navLinks');
+
+    if (mobileToggle && navLinks) {
+        mobileToggle.addEventListener('click', function() {
+            navLinks.classList.toggle('active');
+            mobileToggle.querySelector('i').classList.toggle('fa-bars');
+            mobileToggle.querySelector('i').classList.toggle('fa-times');
+        });
+    }
+
+    // Navbar scroll behavior
+    const navbar = document.getElementById('navbar');
+    
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 100) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Server status check
+    const serverStatusElement = document.getElementById('server-status');
+    let statusCheckInterval;
+    let retryCount = 0;
+    const MAX_RETRIES = 3;
+    const SERVER_PORT = 8080;
+    
+    // Copy commands functionality
+    window.copyCloneCommand = function() {
+        copyToClipboard('git clone https://github.com/VerisimilitudeX/DNAnalyzer.git && cd DNAnalyzer', 0);
+    };
+    
+    window.copyChmodCommand = function() {
+        copyToClipboard('chmod +x ./gradlew', 1);
+    };
+    
+    window.copyBuildCommand = function() {
+        copyToClipboard('./gradlew clean bootJar', 2);
+    };
+    
+    window.copyRunCommand = function() {
+        copyToClipboard('java -jar build/libs/DNAnalyzer.jar', 3);
+    };
+    
+    function copyToClipboard(text, buttonIndex) {
+        navigator.clipboard.writeText(text).then(() => {
+            const buttons = document.querySelectorAll('.copy-button');
+            const button = buttons[buttonIndex];
+            button.textContent = 'Copied!';
+            button.classList.add('success');
+            setTimeout(() => {
+                button.textContent = 'Copy';
+                button.classList.remove('success');
+            }, 2000);
+        }).catch(() => {
+            const buttons = document.querySelectorAll('.copy-button');
+            const button = buttons[buttonIndex];
+            button.textContent = 'Failed';
+            button.classList.add('error');
+            setTimeout(() => {
+                button.textContent = 'Copy';
+                button.classList.remove('error');
+            }, 2000);
+        });
+    }
+
+    // Server status check with retry logic
+    async function checkServerStatus(isInitialCheck = false) {
+        try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+            // Try the API status endpoint first
+            const response = await fetch(`http://localhost:${SERVER_PORT}/api/v1/status`, {
+                method: 'GET',
+                signal: controller.signal,
+                headers: {
+                    'Accept': 'application/json',
+                }
+            });
+
+            clearTimeout(timeoutId);
+            retryCount = 0; // Reset retry count on success
+            
+            serverStatusElement.innerHTML = `
+                <div class="status-indicator online">
+                    <div class="status-dot"></div>
+                    <div class="status-details">
+                        <div class="status-main">Server Online</div>
+                        <div class="status-info">
+                            <span>Status: Running</span>
+                            <span>Last checked: ${new Date().toLocaleTimeString()}</span>
+                            <span>Ready to process DNA sequences</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            return true;
+        } catch (error) {
+            // Try root URL as fallback
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+                const response = await fetch(`http://localhost:${SERVER_PORT}/`, {
+                    method: 'GET',
+                    signal: controller.signal
+                });
+
+                clearTimeout(timeoutId);
+
+                if (response.ok || response.status === 404) {
+                    // Even a 404 means the server is running
+                    retryCount = 0;
+                    
+                    serverStatusElement.innerHTML = `
+                        <div class="status-indicator online">
+                            <div class="status-dot"></div>
+                            <div class="status-details">
+                                <div class="status-main">Server Online</div>
+                                <div class="status-info">
+                                    <span>Status: Running</span>
+                                    <span>Last checked: ${new Date().toLocaleTimeString()}</span>
+                                    <span>Ready to process DNA sequences</span>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    return true;
+                }
+                throw new Error('Server not responding correctly');
+            } catch (fallbackError) {
+                retryCount++;
+                const isMaxRetries = retryCount >= MAX_RETRIES;
+                
+                serverStatusElement.innerHTML = `
+                    <div class="status-indicator offline">
+                        <div class="status-dot"></div>
+                        <div class="status-details">
+                            <div class="status-main">Server Offline</div>
+                            <div class="status-info">
+                                <span>Last checked: ${new Date().toLocaleTimeString()}</span>
+                                ${isInitialCheck ? '<span>Follow the setup steps above to start the server</span>' : ''}
+                                ${!isInitialCheck && !isMaxRetries ? `<span>Retrying... (${retryCount}/${MAX_RETRIES})</span>` : ''}
+                                ${isMaxRetries ? '<span>Max retries reached. Check server setup instructions above.</span>' : ''}
+                            </div>
+                        </div>
+                    </div>
+                `;
+                if (isMaxRetries) {
+                    clearInterval(statusCheckInterval);
+                    showTroubleshooting();
+                }
+                return false;
+            }
+        }
+    }
+
+    function showTroubleshooting() {
+        const troubleshootingSection = document.getElementById('troubleshooting');
+        if (troubleshootingSection) {
+            troubleshootingSection.classList.add('active');
+            troubleshootingSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }
+
+    // Initialize status checking
+    async function initializeStatusCheck() {
+        const isOnline = await checkServerStatus(true);
+        
+        if (!isOnline) {
+            // If offline on first check, start checking more frequently initially
+            statusCheckInterval = setInterval(() => checkServerStatus(), 5000);
+            
+            // After 30 seconds, switch to normal interval if server is still offline
+            setTimeout(() => {
+                clearInterval(statusCheckInterval);
+                statusCheckInterval = setInterval(() => checkServerStatus(), 30000);
+            }, 30000);
+        } else {
+            // If online, check every 30 seconds
+            statusCheckInterval = setInterval(() => checkServerStatus(), 30000);
+        }
+    }
+
+    // Start status checking
+    initializeStatusCheck();
+
+    // Cleanup on page unload
+    window.addEventListener('unload', () => {
+        if (statusCheckInterval) {
+            clearInterval(statusCheckInterval);
+        }
+    });
+
+    // Add animated appearance for steps
+    const animateSteps = () => {
+        const stepCards = document.querySelectorAll('.step-card');
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = 1;
+                    entry.target.style.transform = 'translateY(0)';
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            threshold: 0.1
+        });
+
+        stepCards.forEach((card, index) => {
+            card.style.opacity = 0;
+            card.style.transform = 'translateY(20px)';
+            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+            card.style.transitionDelay = `${index * 0.1}s`;
+            observer.observe(card);
+        });
+    };
+
+    // Initialize animations
+    setTimeout(animateSteps, 500);
+});
+--------------------------------------------------
+File: ./web/server/server.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Server - DNAnalyzer</title>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="server.css">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <!-- Background effects -->
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="../index.html" class="logo">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../features/features.html">Features</a></li>
+                <li><a href="../analyzer/analyzer.html">Analyzer</a></li>
+                <li><a href="server.html" class="active">Server</a></li>
+                <li><a href="../docs/docs.html">Docs</a></li>
+                <li><a href="../about/about.html">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main>
+        <section class="hero">
+            <div class="container">
+                <div class="hero-content">
+                    <div class="hero-headings">
+                        <h1>DNAnalyzer <span>Server</span></h1>
+                        <p class="hero-subtitle">Set up and run your own DNAnalyzer server for local development and
+                            advanced genomic analysis</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Server Status</h2>
+                    <p>Check your local server installation status and requirements</p>
+                </div>
+
+                <div class="card-grid">
+                    <div class="card">
+                        <div class="card-icon">
+                            <i class="fas fa-server"></i>
+                        </div>
+                        <h3 class="card-title">Server Status</h3>
+                        <div id="server-status" class="status-value">Checking...</div>
+                        <p>Local Server</p>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-icon">
+                            <i class="fas fa-memory"></i>
+                        </div>
+                        <h3 class="card-title">System Requirements</h3>
+                        <div class="status-value">2GB+</div>
+                        <p>Minimum RAM</p>
+                    </div>
+
+                    <div class="card">
+                        <div class="card-icon">
+                            <i class="fas fa-code-branch"></i>
+                        </div>
+                        <h3 class="card-title">Version</h3>
+                        <div class="status-value">Java 17+</div>
+                        <p>Required Runtime</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section section-bg-gradient">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Quick Start Guide</h2>
+                    <p>Follow these steps to set up your local DNAnalyzer server</p>
+                </div>
+
+                <div class="steps-container">
+                    <div class="step-item">
+                        <div class="step-content">
+                            <h3>Clone the Repository</h3>
+                            <div class="code-block">
+                                <code>git clone https://github.com/VerisimilitudeX/DNAnalyzer.git && cd DNAnalyzer</code>
+                                <button class="copy-button" onclick="copyCloneCommand()">Copy</button>
+                            </div>
+                            <p>Clone the repository and navigate to the project directory</p>
+                        </div>
+                    </div>
+
+                    <div class="step-item">
+                        <div class="step-content">
+                            <h3>Setup Gradle</h3>
+                            <div class="code-block">
+                                <code>chmod +x ./gradlew</code>
+                                <button class="copy-button" onclick="copyChmodCommand()">Copy</button>
+                            </div>
+                            <p>Make the Gradle wrapper executable (Unix/macOS systems)</p>
+                        </div>
+                    </div>
+
+                    <div class="step-item">
+                        <div class="step-content">
+                            <h3>Build the Project</h3>
+                            <div class="code-block">
+                                <code>./gradlew clean bootJar</code>
+                                <button class="copy-button" onclick="copyBuildCommand()">Copy</button>
+                            </div>
+                            <p>Build the project (this may take a few minutes on first run)</p>
+                        </div>
+                    </div>
+
+                    <div class="step-item">
+                        <div class="step-content">
+                            <h3>Start the Server</h3>
+                            <div class="code-block">
+                                <code>java -jar build/libs/DNAnalyzer.jar</code>
+                                <button class="copy-button" onclick="copyRunCommand()">Copy</button>
+                            </div>
+                            <p>Start the local server on port 8080</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section" id="troubleshooting">
+            <div class="container">
+                <div class="section-title">
+                    <h2>Troubleshooting</h2>
+                    <p>Common issues and their solutions</p>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon feature-icon-magenta">
+                        <i class="fas fa-network-wired"></i>
+                    </div>
+                    <div class="feature-content">
+                        <h3>Port Already in Use</h3>
+                        <p>If port 8080 is already in use, you may see an error like "Address already in use". To fix
+                            this:</p>
+                        <ul>
+                            <li>Close any other applications using port 8080</li>
+                            <li>Or modify the port in application.yml to use a different port</li>
+                            <li>Alternatively, use the command line option to specify a different port</li>
+                        </ul>
+                        <div class="code-block">
+                            <code>java -jar build/libs/DNAnalyzer.jar --server.port=8090</code>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon feature-icon-blue">
+                        <i class="fab fa-java"></i>
+                    </div>
+                    <div class="feature-content">
+                        <h3>Java Version Issues</h3>
+                        <p>If you see "UnsupportedClassVersionError", make sure you have Java 17+ installed:</p>
+                        <div class="code-block">
+                            <code>java -version</code>
+                        </div>
+                        <p>Download and install Java 17 or later if your version is outdated.</p>
+                    </div>
+                </div>
+
+                <div class="feature-card">
+                    <div class="feature-icon feature-icon-orange">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <div class="feature-content">
+                        <h3>Build Failures</h3>
+                        <p>If you encounter build errors, try these solutions:</p>
+                        <ul>
+                            <li>Run './gradlew clean' first to clear any cached files</li>
+                            <li>Make sure your Java installation is properly configured</li>
+                            <li>Ensure you have write permissions in the project directory</li>
+                            <li>Update Gradle wrapper if needed with './gradlew wrapper --gradle-version=7.5'</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="section section-bg-dark">
+            <div class="container text-center">
+                <h2>Ready to Contribute?</h2>
+                <p class="mb-xl">Join our community and help improve DNAnalyzer's server capabilities.</p>
+
+                <div class="hero-buttons" style="justify-content: center;">
+                    <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-primary">
+                        <i class="fab fa-github btn-icon"></i> Fork on GitHub
+                    </a>
+                    <a href="https://discord.gg/xNpujz49gj" class="btn btn-secondary">
+                        <i class="fab fa-discord btn-icon"></i> Join Discord
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                    <p>DNAnalyzer is a powerful, privacy-focused DNA analysis tool using cutting-edge machine learning
+                        models for accurate, on-device genomic analysis.</p>
+
+                    <div class="footer-social">
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="social-link">
+                            <i class="fab fa-discord"></i>
+                        </a>
+                        <a href="https://twitter.com/DNAnalyzer_" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="../features/features.html">Features</a></li>
+                        <li><a href="../analyzer/analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="server.html">Server</a></li>
+                        <li><a href="../docs/docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="../docs/getting-started.md">Getting Started</a></li>
+                        <li><a href="../docs/citations.md">Citations</a></li>
+                        <li><a href="../docs/research/genes.md">Gene Research</a></li>
+                        <li><a href="../docs/samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="../docs/contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright &copy; Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                    81-2908499). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="../LICENSE.md">License</a>
+                    <a href="../SECURITY.md">Security</a>
+                    <a href="../CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="server.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+File: ./web/server/server.css
+--------------------------------------------------
+/* Server Page Custom Styles */
+
+/* Code blocks for server page */
+.code-block {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    margin: 1rem 0;
+    position: relative;
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    overflow-x: auto;
+    color: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.3rem 0.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.copy-button.success {
+    background: rgba(0, 200, 83, 0.2);
+    color: #00c853;
+}
+
+.copy-button.error {
+    background: rgba(244, 67, 54, 0.2);
+    color: #f44336;
+}
+
+/* Status Value styling */
+.status-value {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin: 0.5rem 0;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Status indicators */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.status-dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+}
+
+.online .status-dot {
+    background: #00c853;
+    box-shadow: 0 0 10px rgba(0, 200, 83, 0.5);
+}
+
+.offline .status-dot {
+    background: #f44336;
+    box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
+}
+
+.status-main {
+    font-weight: 600;
+    font-size: 1.2rem;
+}
+
+.online .status-main {
+    color: #00c853;
+}
+
+.offline .status-main {
+    color: #f44336;
+}
+
+.status-info {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 0.5rem;
+}
+
+/* Troubleshooting section */
+#troubleshooting {
+    opacity: 1;
+    transition: all 0.5s ease;
+}
+
+#troubleshooting.active {
+    animation: pulse 1s ease;
+}
+
+@keyframes pulse {
+    0% { opacity: 0.7; }
+    50% { opacity: 1; }
+    100% { opacity: 0.7; }
+}5rem;
+    margin-bottom: 1.5rem;
+}
+
+.server-hero-content p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Status Cards Section */
+.status-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.status-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.status-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.status-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.status-card h3 {
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+    color: var(--white);
+}
+
+.status-value {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.status-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+/* Status Indicators */
+.status-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.status-dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+}
+
+.online .status-dot {
+    background: #00c853;
+    box-shadow: 0 0 10px rgba(0, 200, 83, 0.5);
+}
+
+.offline .status-dot {
+    background: #f44336;
+    box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
+}
+
+.status-main {
+    font-weight: 600;
+    font-size: 1.2rem;
+}
+
+.online .status-main {
+    color: #00c853;
+}
+
+.offline .status-main {
+    color: #f44336;
+}
+
+.status-info {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 0.5rem;
+}
+
+/* Guide Section */
+.guide-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.guide-section h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.step-list {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.step-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.step-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.step-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    color: white;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.step-content {
+    flex-grow: 1;
+}
+
+.step-command {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 0.8rem;
+    padding: 0.8rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    overflow-x: auto;
+    position: relative;
+}
+
+.copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.3rem 0.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.copy-button.success {
+    background: rgba(0, 200, 83, 0.2);
+    color: #00c853;
+}
+
+.copy-button.error {
+    background: rgba(244, 67, 54, 0.2);
+    color: #f44336;
+}
+
+.step-description {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* Troubleshooting Section */
+.troubleshooting-section {
+    margin: 4rem 0;
+    opacity: 0.7;
+    transition: all 0.5s ease;
+}
+
+.troubleshooting-section.active {
+    opacity: 1;
+}
+
+.troubleshooting-section h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.issue-list {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.issue-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.issue-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.issue-card h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 1.3rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.issue-card h3 i {
+    color: var(--magenta);
+}
+
+.issue-card p {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+
+.issue-card ul {
+    margin: 0;
+    padding-left: 1.5rem;
+}
+
+.issue-card li {
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 0.5rem;
+}
+
+.issue-command {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin: 1rem 0;
+    padding: 0.8rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    overflow-x: auto;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 992px) {
+    .server-hero-content h1 {
+        font-size: 3rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        margin: 4rem 1rem 2rem;
+        padding: 1rem;
+    }
+
+    .server-hero-content h1 {
+        font-size: 2.5rem;
+    }
+
+    .server-hero-content p {
+        font-size: 1.1rem;
+    }
+
+    .status-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .step-command {
+        font-size: 0.85rem;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .server-hero-content h1 {
+        font-size: 2rem;
+    }
+
+    .status-card {
+        padding: 1.5rem;
+    }
+
+    .step-card {
+        flex-direction: column;
+    }
+
+    .step-number {
+        margin-bottom: 0.5rem;
+    }
+}
+--------------------------------------------------
+
+Directory: docs
+==================================================
+File: ./web/docs/docs.js
+--------------------------------------------------
+/**
+ * DNAnalyzer - Documentation Page JavaScript
+ * Handles navigation, search, and interactive elements
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize mobile navigation
+    initMobileNav();
+    
+    // Initialize smooth scrolling
+    initSmoothScroll();
+    
+    // Initialize tabs
+    initTabs();
+    
+    // Initialize code copy buttons
+    initCodeCopy();
+    
+    // Initialize FAQ accordions
+    initFaqAccordions();
+    
+    // Initialize active link tracking
+    initActiveLinkTracking();
+    
+    // Initialize search functionality
+    initSearch();
+});
+
+/**
+ * Initialize mobile navigation
+ */
+function initMobileNav() {
+    const sidebar = document.getElementById('docsSidebar');
+    const sidebarToggle = document.getElementById('sidebarToggle');
+    const closeSidebar = document.getElementById('closeSidebar');
+    
+    if (sidebar && sidebarToggle) {
+        // Toggle sidebar on mobile
+        sidebarToggle.addEventListener('click', function() {
+            sidebar.classList.add('active');
+        });
+        
+        // Close sidebar on mobile
+        if (closeSidebar) {
+            closeSidebar.addEventListener('click', function() {
+                sidebar.classList.remove('active');
+            });
+        }
+        
+        // Close sidebar when clicking on links (mobile)
+        const sidebarLinks = sidebar.querySelectorAll('a');
+        sidebarLinks.forEach(link => {
+            link.addEventListener('click', function() {
+                if (window.innerWidth <= 768) {
+                    sidebar.classList.remove('active');
+                }
+            });
+        });
+        
+        // Close sidebar when clicking outside (mobile)
+        document.addEventListener('click', function(event) {
+            if (window.innerWidth <= 768 && 
+                !sidebar.contains(event.target) && 
+                event.target !== sidebarToggle &&
+                !sidebarToggle.contains(event.target)) {
+                sidebar.classList.remove('active');
+            }
+        });
+    }
+}
+
+/**
+ * Initialize smooth scrolling for anchor links
+ */
+function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href');
+            
+            // Skip if it's just "#" or not an ID selector
+            if (targetId === '#' || !targetId.startsWith('#')) return;
+            
+            const targetElement = document.querySelector(targetId);
+            
+            if (targetElement) {
+                e.preventDefault();
+                
+                const navbarHeight = 70; // Height of the fixed navbar
+                const docsHeaderHeight = 50; // Height of the docs header (mobile)
+                const offset = window.innerWidth <= 768 ? navbarHeight + docsHeaderHeight : navbarHeight;
+                
+                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
+                
+                window.scrollTo({
+                    top: targetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+/**
+ * Initialize tabs functionality
+ */
+function initTabs() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const tabId = this.getAttribute('data-tab');
+            const tabContent = document.getElementById(tabId);
+            
+            // Remove active class from all buttons and contents
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // Add active class to current button and content
+            this.classList.add('active');
+            if (tabContent) {
+                tabContent.classList.add('active');
+            }
+        });
+    });
+}
+
+/**
+ * Initialize code copy functionality
+ */
+function initCodeCopy() {
+    const copyButtons = document.querySelectorAll('.copy-button');
+    
+    copyButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const codeBlock = this.closest('.code-block');
+            const code = codeBlock.querySelector('code').textContent;
+            
+            // Copy to clipboard
+            navigator.clipboard.writeText(code)
+                .then(() => {
+                    // Success feedback
+                    const originalText = this.textContent;
+                    this.textContent = 'Copied!';
+                    this.style.background = 'var(--success)';
+                    
+                    // Reset after 2 seconds
+                    setTimeout(() => {
+                        this.textContent = originalText;
+                        this.style.background = '';
+                    }, 2000);
+                })
+                .catch(err => {
+                    console.error('Could not copy text: ', err);
+                    
+                    // Fallback for older browsers
+                    const textarea = document.createElement('textarea');
+                    textarea.value = code;
+                    textarea.style.position = 'fixed';
+                    document.body.appendChild(textarea);
+                    textarea.focus();
+                    textarea.select();
+                    
+                    try {
+                        document.execCommand('copy');
+                        // Success feedback
+                        const originalText = this.textContent;
+                        this.textContent = 'Copied!';
+                        this.style.background = 'var(--success)';
+                        
+                        // Reset after 2 seconds
+                        setTimeout(() => {
+                            this.textContent = originalText;
+                            this.style.background = '';
+                        }, 2000);
+                    } catch (err) {
+                        console.error('Fallback copy failed: ', err);
+                        this.textContent = 'Failed!';
+                        this.style.background = 'var(--error)';
+                        
+                        setTimeout(() => {
+                            this.textContent = 'Copy';
+                            this.style.background = '';
+                        }, 2000);
+                    }
+                    
+                    document.body.removeChild(textarea);
+                });
+        });
+    });
+}
+
+/**
+ * Initialize FAQ accordions
+ */
+function initFaqAccordions() {
+    const faqItems = document.querySelectorAll('.faq-item');
+    
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+        
+        if (question) {
+            question.addEventListener('click', function() {
+                // Toggle active class on the FAQ item
+                item.classList.toggle('active');
+                
+                // If this item was activated, close others
+                if (item.classList.contains('active')) {
+                    faqItems.forEach(otherItem => {
+                        if (otherItem !== item) {
+                            otherItem.classList.remove('active');
+                        }
+                    });
+                }
+            });
+        }
+    });
+}
+
+/**
+ * Initialize active link tracking based on scroll position
+ */
+function initActiveLinkTracking() {
+    const sections = document.querySelectorAll('.doc-section');
+    const navLinks = document.querySelectorAll('.sidebar-nav a');
+    
+    if (sections.length === 0 || navLinks.length === 0) return;
+    
+    // Update active link on scroll
+    function updateActiveLink() {
+        let currentSection = '';
+        const navbarHeight = 70;
+        const docsHeaderHeight = 50;
+        const totalOffset = window.innerWidth <= 768 ? navbarHeight + docsHeaderHeight + 20 : navbarHeight + 20;
+        
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop - totalOffset;
+            const sectionHeight = section.offsetHeight;
+            const sectionId = section.getAttribute('id');
+            
+            if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
+                currentSection = '#' + sectionId;
+            }
+        });
+        
+        // Update active class on nav links
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === currentSection) {
+                link.classList.add('active');
+            }
+        });
+    }
+    
+    // Initial call to set active link on page load
+    updateActiveLink();
+    
+    // Update active link on scroll
+    window.addEventListener('scroll', updateActiveLink);
+}
+
+/**
+ * Initialize search functionality
+ */
+function initSearch() {
+    const searchInput = document.getElementById('docsSearch');
+    const sections = document.querySelectorAll('.doc-section');
+    
+    if (!searchInput || sections.length === 0) return;
+    
+    searchInput.addEventListener('input', function() {
+        const query = this.value.trim().toLowerCase();
+        
+        if (query.length < 2) {
+            // If query is too short, show all sections
+            sections.forEach(section => {
+                section.style.display = 'block';
+                
+                // Remove any highlights
+                removeHighlights(section);
+            });
+            return;
+        }
+        
+        // Search and filter sections
+        sections.forEach(section => {
+            const sectionText = section.textContent.toLowerCase();
+            const headings = Array.from(section.querySelectorAll('h1, h2, h3, h4')).map(h => h.textContent.toLowerCase());
+            
+            // Check if section contains the query in text or headings
+            const containsQuery = sectionText.includes(query) || headings.some(h => h.includes(query));
+            
+            if (containsQuery) {
+                section.style.display = 'block';
+                
+                // Highlight matches
+                removeHighlights(section);
+                highlightText(section, query);
+            } else {
+                section.style.display = 'none';
+            }
+        });
+        
+        // If search is cleared, reset highlights
+        if (query.length === 0) {
+            sections.forEach(section => {
+                removeHighlights(section);
+            });
+        }
+    });
+}
+
+/**
+ * Highlight matching text in an element
+ * @param {HTMLElement} element - The element to search in
+ * @param {string} query - The text to highlight
+ */
+function highlightText(element, query) {
+    // Only highlight text in paragraphs, list items, and code blocks
+    const textNodes = element.querySelectorAll('p, li, code');
+    
+    textNodes.forEach(node => {
+        const html = node.innerHTML;
+        // Create regex with word boundary for whole words, or without for partial matches
+        const regex = new RegExp(`(\\b${query}\\b|${query})`, 'gi');
+        const newHtml = html.replace(regex, '<mark>$1</mark>');
+        
+        if (newHtml !== html) {
+            node.innerHTML = newHtml;
+        }
+    });
+}
+
+/**
+ * Remove highlights from an element
+ * @param {HTMLElement} element - The element to remove highlights from
+ */
+function removeHighlights(element) {
+    const marks = element.querySelectorAll('mark');
+    
+    marks.forEach(mark => {
+        // Replace mark with its text content
+        const textNode = document.createTextNode(mark.textContent);
+        mark.parentNode.replaceChild(textNode, mark);
+    });
+}
+--------------------------------------------------
+File: ./web/docs/docs.css
+--------------------------------------------------
+/* Documentation Page Styles */
+
+/* Layout */
+.docs-layout {
+    display: flex;
+    min-height: calc(100vh - 70px);
+    margin-top: 70px;
+}
+
+/* Sidebar */
+.docs-sidebar {
+    width: 300px;
+    background: var(--dark-blue);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    position: fixed;
+    top: 70px;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+    z-index: 100;
+    transition: transform var(--transition-normal);
+}
+
+.sidebar-header {
+    padding: var(--space-lg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sidebar-header h2 {
+    margin: 0;
+    font-size: 1.3rem;
+    color: var(--white);
+}
+
+.mobile-close {
+    display: none;
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+}
+
+.mobile-close:hover {
+    color: var(--white);
+}
+
+.sidebar-search {
+    padding: var(--space-md) var(--space-lg);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.search-input-wrapper {
+    position: relative;
+}
+
+.search-input-wrapper i {
+    position: absolute;
+    left: var(--space-md);
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+}
+
+.search-input-wrapper input {
+    width: 100%;
+    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius-md);
+    color: var(--white);
+    font-size: 0.9rem;
+    transition: all var(--transition-fast);
+}
+
+.search-input-wrapper input:focus {
+    outline: none;
+    border-color: var(--blue);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.sidebar-nav {
+    padding: var(--space-md) 0;
+}
+
+.nav-section {
+    margin-bottom: var(--space-lg);
+    padding: 0 var(--space-lg);
+}
+
+.nav-section h3 {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0 0 var(--space-sm) 0;
+}
+
+.nav-section ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-section li {
+    margin-bottom: 2px;
+}
+
+.nav-section a {
+    display: block;
+    padding: var(--space-xs) 0;
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    font-size: 0.95rem;
+    transition: all var(--transition-fast);
+    border-radius: var(--radius-sm);
+}
+
+.nav-section a:hover {
+    color: var(--white);
+    transform: translateX(2px);
+}
+
+.nav-section a.active {
+    color: var(--blue);
+    font-weight: 500;
+}
+
+/* Content */
+.docs-content {
+    flex: 1;
+    margin-left: 300px;
+    position: relative;
+}
+
+.docs-container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--space-xl) var(--space-xxl) var(--space-xxl);
+}
+
+.docs-mobile-header {
+    display: none;
+    position: sticky;
+    top: 70px;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--dark-blue);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    z-index: 90;
+}
+
+.docs-mobile-header h2 {
+    margin: 0;
+    font-size: 1.3rem;
+    color: var(--white);
+}
+
+.sidebar-toggle {
+    display: none;
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+    margin-right: var(--space-md);
+}
+
+.sidebar-toggle:hover {
+    color: var(--white);
+}
+
+/* Doc Sections */
+.doc-section {
+    margin-bottom: var(--space-xxl);
+    scroll-margin-top: 100px;
+}
+
+.doc-section:last-child {
+    margin-bottom: 0;
+}
+
+.doc-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: var(--space-lg);
+    color: var(--white);
+}
+
+.doc-section h2 {
+    font-size: 1.8rem;
+    margin: var(--space-xl) 0 var(--space-md);
+    color: var(--white);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: var(--space-sm);
+}
+
+.doc-section h3 {
+    font-size: 1.3rem;
+    margin: var(--space-lg) 0 var(--space-sm);
+    color: var(--white);
+}
+
+.doc-section p {
+    margin-bottom: var(--space-md);
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+.doc-section p.lead {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.doc-section ul, 
+.doc-section ol {
+    margin-bottom: var(--space-md);
+    color: rgba(255, 255, 255, 0.8);
+    padding-left: var(--space-xl);
+}
+
+.doc-section li {
+    margin-bottom: var(--space-xs);
+}
+
+.doc-section a {
+    color: var(--blue);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+.doc-section a:hover {
+    text-decoration: underline;
+    color: var(--light-blue);
+}
+
+.doc-section code {
+    font-family: var(--font-mono);
+    background: rgba(0, 0, 0, 0.2);
+    padding: 2px 5px;
+    border-radius: var(--radius-sm);
+    font-size: 0.9em;
+    color: var(--white);
+}
+
+/* Info Boxes */
+.info-box {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    margin: var(--space-lg) 0;
+    border-left: 4px solid var(--blue);
+}
+
+.info-box h3 {
+    margin-top: 0;
+    font-size: 1.1rem;
+    color: var(--white);
+}
+
+.info-box p:last-child,
+.info-box ul:last-child {
+    margin-bottom: 0;
+}
+
+.info-box.warning {
+    border-left-color: var(--warning);
+}
+
+.info-box.warning h3 {
+    color: var(--warning);
+}
+
+.info-box.error {
+    border-left-color: var(--error);
+}
+
+.info-box.error h3 {
+    color: var(--error);
+}
+
+.info-box.tip {
+    border-left-color: var(--success);
+}
+
+.info-box.tip h3 {
+    color: var(--success);
+}
+
+/* Code Blocks */
+.code-block {
+    margin: var(--space-md) 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.3);
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.code-label {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.copy-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 10px;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.copy-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: var(--white);
+}
+
+.code-block pre {
+    margin: 0;
+    padding: var(--space-md);
+    overflow-x: auto;
+}
+
+.code-block code {
+    background: transparent;
+    padding: 0;
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.9);
+    display: block;
+}
+
+/* Tabs */
+.tabs {
+    margin: var(--space-md) 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.tab-header {
+    display: flex;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tab-button {
+    padding: var(--space-sm) var(--space-md);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.tab-button:hover {
+    color: var(--white);
+}
+
+.tab-button.active {
+    color: var(--blue);
+    border-bottom-color: var(--blue);
+    background: rgba(0, 164, 239, 0.1);
+}
+
+.tab-content {
+    display: none;
+    padding: var(--space-md);
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* Steps */
+.steps {
+    margin: var(--space-lg) 0;
+}
+
+.step {
+    display: flex;
+    margin-bottom: var(--space-lg);
+    gap: var(--space-md);
+}
+
+.step-number {
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    background: linear-gradient(135deg, var(--magenta), var(--blue));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--white);
+    margin-top: 5px;
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-content h3 {
+    margin-top: 0;
+    font-size: 1.2rem;
+    margin-bottom: var(--space-sm);
+}
+
+.step-content p {
+    margin-bottom: var(--space-sm);
+}
+
+.step-content p:last-child {
+    margin-bottom: 0;
+}
+
+/* API Endpoints */
+.api-endpoint {
+    margin-bottom: var(--space-lg);
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.endpoint-method {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    font-weight: 600;
+    color: var(--white);
+    border-radius: var(--radius-sm);
+    font-size: 0.9rem;
+    margin-right: var(--space-sm);
+}
+
+.endpoint-method.get {
+    background: var(--success);
+}
+
+.endpoint-method.post {
+    background: var(--blue);
+}
+
+.endpoint-method.put {
+    background: var(--warning);
+}
+
+.endpoint-method.delete {
+    background: var(--error);
+}
+
+.endpoint-path {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    margin-bottom: var(--space-sm);
+    color: var(--white);
+    padding: var(--space-md);
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+}
+
+.endpoint-description {
+    padding: var(--space-md);
+}
+
+.endpoint-description p {
+    margin-top: 0;
+}
+
+.endpoint-description h4 {
+    font-size: 1.1rem;
+    margin: var(--space-md) 0 var(--space-xs);
+    color: var(--white);
+}
+
+/* FAQ Section */
+.faq-item {
+    margin-bottom: var(--space-md);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.faq-question {
+    padding: var(--space-md);
+    background: rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.faq-question h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: var(--white);
+}
+
+.faq-question i {
+    color: rgba(255, 255, 255, 0.7);
+    transition: transform var(--transition-fast);
+}
+
+.faq-item.active .faq-question i {
+    transform: rotate(180deg);
+}
+
+.faq-answer {
+    padding: 0 var(--space-md);
+    max-height: 0;
+    overflow: hidden;
+    transition: all var(--transition-normal);
+}
+
+.faq-item.active .faq-answer {
+    padding: var(--space-md);
+    max-height: 1000px;
+}
+
+/* Community Resources */
+.community-resources {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--space-lg);
+    margin: var(--space-lg) 0;
+}
+
+.resource-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all var(--transition-normal);
+}
+
+.resource-card:hover {
+    transform: translateY(-5px);
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: var(--shadow-md);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.resource-card i {
+    font-size: 2rem;
+    margin-bottom: var(--space-md);
+    color: var(--blue);
+}
+
+.resource-card h3 {
+    margin-top: 0;
+    margin-bottom: var(--space-sm);
+    font-size: 1.2rem;
+}
+
+.resource-card p {
+    margin-bottom: var(--space-md);
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Responsive Design */
+@media screen and (max-width: 1024px) {
+    .docs-container {
+        padding: var(--space-xl) var(--space-lg);
+    }
+    
+    .community-resources {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-sidebar {
+        transform: translateX(-100%);
+        width: 280px;
+    }
+    
+    .docs-sidebar.active {
+        transform: translateX(0);
+    }
+    
+    .docs-content {
+        margin-left: 0;
+    }
+    
+    .docs-mobile-header {
+        display: flex;
+        align-items: center;
+    }
+    
+    .sidebar-toggle {
+        display: block;
+    }
+    
+    .mobile-close {
+        display: block;
+    }
+    
+    .api-endpoint {
+        overflow-x: auto;
+    }
+    
+    .step {
+        flex-direction: column;
+        gap: var(--space-sm);
+    }
+    
+    .step-number {
+        margin-bottom: var(--space-xs);
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .docs-container {
+        padding: var(--space-lg) var(--space-md);
+    }
+    
+    .doc-section h1 {
+        font-size: 2rem;
+    }
+    
+    .doc-section h2 {
+        font-size: 1.5rem;
+    }
+    
+    .doc-section h3 {
+        font-size: 1.2rem;
+    }
+    
+    .tab-header {
+        flex-wrap: wrap;
+    }
+    
+    .tab-button {
+        flex: 1;
+        min-width: 100px;
+        text-align: center;
+    }
+}
+--------------------------------------------------
+File: ./web/docs/docs.html
+--------------------------------------------------
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0LTP0WK7EM"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+
+        gtag('config', 'G-0LTP0WK7EM');
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Documentation - DNAnalyzer</title>
+    <meta name="description"
+        content="Comprehensive documentation for DNAnalyzer - Get started with our powerful DNA analysis tools and learn how to use all features.">
+
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="docs.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+        rel="stylesheet">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
+</head>
+
+<body>
+    <!-- Background effects -->
+    <div class="bg-gradient">
+        <div class="bg-blob bg-blob-1"></div>
+        <div class="bg-blob bg-blob-2"></div>
+    </div>
+
+    <div class="notification-banner">
+        <span>Exclusive WSSEF Preview: </span>
+        <span>&nbsp;Transformer Architecture in Epigenomics!</span>
+        <a href="https://epiclassify.dnanalyzer.org" target="_blank" class="notification-link">Explore Now</a>
+        <button class="notification-close" aria-label="Dismiss notification"></button>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+        <div class="container navbar-container">
+            <a href="../index.html" class="logo">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                <span class="logo-text">DNAnalyzer</span>
+            </a>
+
+            <button class="mobile-toggle" id="mobileToggle" aria-label="Toggle navigation">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <ul class="nav-links" id="navLinks">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../features/features.html">Features</a></li>
+                <li><a href="../analyzer/analyzer.html">Analyzer</a></li>
+                <li><a href="../server/server.html">Server</a></li>
+                <li><a href="docs.html" class="active">Docs</a></li>
+                <li><a href="../about/about.html">About</a></li>
+            </ul>
+
+            <div class="nav-buttons">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="btn btn-secondary btn-sm">
+                    <i class="fab fa-github btn-icon"></i> GitHub
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Documentation Layout -->
+    <div class="docs-layout">
+        <!-- Sidebar (Left) -->
+        <aside class="docs-sidebar" id="docsSidebar">
+            <div class="sidebar-header">
+                <h2>Documentation</h2>
+                <button class="mobile-close" id="closeSidebar">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+
+            <div class="sidebar-search">
+                <div class="search-input-wrapper">
+                    <i class="fas fa-search"></i>
+                    <input type="text" id="docsSearch" placeholder="Search documentation...">
+                </div>
+            </div>
+
+            <nav class="sidebar-nav">
+                <div class="nav-section">
+                    <h3>Getting Started</h3>
+                    <ul>
+                        <li><a href="#introduction" class="active">Introduction</a></li>
+                        <li><a href="#installation">Installation</a></li>
+                        <li><a href="#quick-start">Quick Start</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h3>Core Concepts</h3>
+                    <ul>
+                        <li><a href="#sequence-analysis">Sequence Analysis</a></li>
+                        <li><a href="#codon-detection">Codon Detection</a></li>
+                        <li><a href="#reading-frames">Reading Frames</a></li>
+                        <li><a href="#protein-prediction">Protein Prediction</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h3>Advanced Usage</h3>
+                    <ul>
+                        <li><a href="#server-setup">Server Setup</a></li>
+                        <li><a href="#api-reference">API Reference</a></li>
+                        <li><a href="#cli-usage">CLI Usage</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav-section">
+                    <h3>Resources</h3>
+                    <ul>
+                        <li><a href="#faq">FAQ</a></li>
+                        <li><a href="#troubleshooting">Troubleshooting</a></li>
+                        <li><a href="#community">Community</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </aside>
+
+        <!-- Content (Right) -->
+        <div class="docs-content">
+            <div class="docs-mobile-header">
+                <button class="sidebar-toggle" id="sidebarToggle">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <h2>Documentation</h2>
+            </div>
+
+            <div class="docs-container">
+                <!-- Introduction -->
+                <section id="introduction" class="doc-section">
+                    <h1>Introduction to DNAnalyzer</h1>
+                    <p class="lead">DNAnalyzer is a powerful, privacy-focused DNA analysis tool using advanced machine
+                        learning models for accurate, on-device genomic analysis.</p>
+
+                    <p>This documentation will guide you through the installation, setup, and usage of DNAnalyzer for
+                        various DNA analysis tasks. Whether you're a researcher, educator, or bioinformatics enthusiast,
+                        you'll find comprehensive information on all of DNAnalyzer's capabilities.</p>
+
+                    <div class="info-box">
+                        <h3>Key Features</h3>
+                        <ul>
+                            <li><strong>Privacy-First Analysis:</strong> All processing occurs on your device, ensuring
+                                your genetic data never leaves your system.</li>
+                            <li><strong>Machine Learning Powered:</strong> Advanced ML algorithms provide exceptional
+                                accuracy in sequence analysis.</li>
+                            <li><strong>Comprehensive Tools:</strong> From basic sequence statistics to advanced protein
+                                prediction and promoter detection.</li>
+                            <li><strong>Open Source:</strong> DNAnalyzer is completely open source under the MIT
+                                License.</li>
+                        </ul>
+                    </div>
+
+                    <h2>System Requirements</h2>
+                    <p>Before getting started, ensure your system meets the following requirements:</p>
+
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-label">System Requirements</span>
+                            <button class="copy-button">Copy</button>
+                        </div>
+                        <pre><code>- Operating System: Windows 10+, macOS 10.14+, or Linux (Ubuntu 18.04+)
+- Memory: 2GB RAM minimum (4GB+ recommended for large sequences)
+- Storage: 200MB for application, additional space for sequence files
+- Browser: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ (for web interface)
+- Java Runtime: Java 17+ (for server mode)</code></pre>
+                    </div>
+                </section>
+
+                <!-- Installation -->
+                <section id="installation" class="doc-section">
+                    <h1>Installation</h1>
+                    <p>DNAnalyzer can be installed and used in multiple ways depending on your needs and technical
+                        preferences.</p>
+
+                    <h2>Web Interface (No Installation)</h2>
+                    <p>The simplest way to use DNAnalyzer is through our web interface, which requires no installation:
+                    </p>
+                    <ol>
+                        <li>Visit <a href="../analyzer/analyzer.html">DNAnalyzer Web App</a></li>
+                        <li>Upload your DNA sequence files</li>
+                        <li>Select analysis options and get results</li>
+                    </ol>
+                    <p>The web interface runs entirely in your browser, ensuring your data never leaves your device.</p>
+
+                    <h2>Local Server Installation</h2>
+                    <p>For more advanced usage or batch processing, you can install DNAnalyzer as a local server:</p>
+
+                    <div class="tabs">
+                        <div class="tab-header">
+                            <button class="tab-button active" data-tab="windows">Windows</button>
+                            <button class="tab-button" data-tab="macos">macOS</button>
+                            <button class="tab-button" data-tab="linux">Linux</button>
+                        </div>
+
+                        <div class="tab-content active" id="windows">
+                            <ol>
+                                <li>Download the latest <a
+                                        href="https://github.com/VerisimilitudeX/DNAnalyzer/releases">DNAnalyzer
+                                        release</a> for Windows</li>
+                                <li>Extract the ZIP file to your preferred location</li>
+                                <li>Ensure Java 17 or newer is installed on your system</li>
+                                <li>Double-click on <code>dnanalyzer.bat</code> to start the server</li>
+                                <li>Access the interface at <code>http://localhost:8080</code> in your browser</li>
+                            </ol>
+                        </div>
+
+                        <div class="tab-content" id="macos">
+                            <ol>
+                                <li>Download the latest <a
+                                        href="https://github.com/VerisimilitudeX/DNAnalyzer/releases">DNAnalyzer
+                                        release</a> for macOS</li>
+                                <li>Extract the ZIP file to your preferred location</li>
+                                <li>Ensure Java 17 or newer is installed on your system</li>
+                                <li>Open Terminal and navigate to the extracted folder</li>
+                                <li>Run <code>chmod +x dnanalyzer.sh</code> to make the script executable</li>
+                                <li>Execute <code>./dnanalyzer.sh</code> to start the server</li>
+                                <li>Access the interface at <code>http://localhost:8080</code> in your browser</li>
+                            </ol>
+                        </div>
+
+                        <div class="tab-content" id="linux">
+                            <ol>
+                                <li>Download the latest <a
+                                        href="https://github.com/VerisimilitudeX/DNAnalyzer/releases">DNAnalyzer
+                                        release</a> for Linux</li>
+                                <li>Extract the archive to your preferred location</li>
+                                <li>Ensure Java 17 or newer is installed on your system</li>
+                                <li>Open Terminal and navigate to the extracted folder</li>
+                                <li>Run <code>chmod +x dnanalyzer.sh</code> to make the script executable</li>
+                                <li>Execute <code>./dnanalyzer.sh</code> to start the server</li>
+                                <li>Access the interface at <code>http://localhost:8080</code> in your browser</li>
+                            </ol>
+                        </div>
+                    </div>
+
+                    <h2>Building from Source</h2>
+                    <p>For developers or those who want the latest features, you can build DNAnalyzer from source:</p>
+
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-label">Building from Source</span>
+                            <button class="copy-button">Copy</button>
+                        </div>
+                        <pre><code># Clone the repository
+git clone https://github.com/VerisimilitudeX/DNAnalyzer.git
+cd DNAnalyzer
+
+# Make the Gradle wrapper executable
+chmod +x ./gradlew
+
+# Build the project
+./gradlew clean bootJar
+
+# Run the server
+java -jar build/libs/DNAnalyzer.jar</code></pre>
+                    </div>
+                </section>
+
+                <!-- Quick Start -->
+                <section id="quick-start" class="doc-section">
+                    <h1>Quick Start Guide</h1>
+                    <p>This guide will help you quickly get started with DNAnalyzer's basic features.</p>
+
+                    <h2>Analyzing Your First DNA Sequence</h2>
+                    <p>Follow these steps to perform your first DNA sequence analysis:</p>
+
+                    <div class="steps">
+                        <div class="step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h3>Upload a Sequence</h3>
+                                <p>Navigate to the <a href="../analyzer/analyzer.html">DNA Analyzer</a> page and upload
+                                    your FASTA or FASTQ file by dragging it to the upload area or clicking to browse.
+                                </p>
+                                <p><strong>Don't have a sequence file?</strong> Click "Import Sample" to use a
+                                    pre-loaded sample sequence.</p>
+                            </div>
+                        </div>
+
+                        <div class="step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h3>Select Analysis Options</h3>
+                                <p>Choose which analysis features you want to run:</p>
+                                <ul>
+                                    <li><strong>Basic Analysis:</strong> Sequence length, GC content, base composition
+                                    </li>
+                                    <li><strong>Codon Analysis:</strong> Start codons, stop codons, reading frames</li>
+                                    <li><strong>Advanced Features:</strong> Coverage analysis, protein prediction,
+                                        promoter detection</li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="step">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <h3>Run Analysis</h3>
+                                <p>Click the "Start Analysis" button to process your sequence. The analysis time depends
+                                    on the sequence length and selected options.</p>
+                            </div>
+                        </div>
+
+                        <div class="step">
+                            <div class="step-number">4</div>
+                            <div class="step-content">
+                                <h3>Review Results</h3>
+                                <p>Examine the analysis results, which include visualizations, statistics, and detailed
+                                    information about your sequence.</p>
+                                <p>You can export the results in JSON, CSV, or text format for further processing or
+                                    documentation.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="info-box tip">
+                        <h3>Pro Tip</h3>
+                        <p>For large sequences (>1MB), consider using the local server installation for better
+                            performance and additional analysis options.</p>
+                    </div>
+                </section>
+
+                <!-- Sequence Analysis -->
+                <section id="sequence-analysis" class="doc-section">
+                    <h1>Sequence Analysis</h1>
+                    <p>DNAnalyzer provides comprehensive tools to analyze the basic properties of DNA sequences.</p>
+
+                    <h2>Base Composition Analysis</h2>
+                    <p>One of the fundamental analyses is determining the nucleotide composition of your DNA sequence:
+                    </p>
+
+                    <ul>
+                        <li><strong>Nucleotide Counts:</strong> Total count of A, T, G, C, and any other bases (N) in
+                            the sequence</li>
+                        <li><strong>Percentage Distribution:</strong> Proportion of each nucleotide type</li>
+                        <li><strong>Visualization:</strong> Interactive bar chart showing the distribution</li>
+                    </ul>
+
+                    <h2>GC Content Analysis</h2>
+                    <p>GC content is the percentage of nitrogenous bases in a DNA molecule that are either guanine (G)
+                        or cytosine (C):</p>
+
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-label">GC Content Formula</span>
+                            <button class="copy-button">Copy</button>
+                        </div>
+                        <pre><code>GC Content (%) = (G + C) / (A + T + G + C) × 100</code></pre>
+                    </div>
+
+                    <p>GC content is important because:</p>
+                    <ul>
+                        <li>It affects DNA stability (higher GC content = more stable)</li>
+                        <li>GC-rich regions often indicate regulatory elements and gene-dense areas</li>
+                        <li>Different organisms have characteristic GC content ranges</li>
+                    </ul>
+
+                    <div class="info-box">
+                        <h3>Interpreting GC Content</h3>
+                        <ul>
+                            <li><strong>Low GC (< 40%):</strong> Common in AT-rich genomes like certain bacteria</li>
+                            <li><strong>Medium GC (40-60%):</strong> Typical of many eukaryotic genomes, including
+                                humans</li>
+                            <li><strong>High GC (> 60%):</strong> Often found in gene-rich regions and certain
+                                prokaryotes</li>
+                        </ul>
+                    </div>
+                </section>
+
+                <!-- More sections would continue here... -->
+
+                <!-- API Reference -->
+                <section id="api-reference" class="doc-section">
+                    <h1>API Reference</h1>
+                    <p>DNAnalyzer provides a RESTful API when running in server mode, allowing programmatic access to
+                        all analysis features.</p>
+
+                    <h2>API Endpoints</h2>
+                    <p>The following endpoints are available when the server is running:</p>
+
+                    <div class="api-endpoint">
+                        <div class="endpoint-method get">GET</div>
+                        <div class="endpoint-path">/api/v1/status</div>
+                        <div class="endpoint-description">
+                            <p>Check server status and version information</p>
+                            <h4>Response</h4>
+                            <div class="code-block">
+                                <pre><code>{
+  "status": "running",
+  "version": "1.0.0",
+  "uptime": "12h 34m 56s"
+}</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="api-endpoint">
+                        <div class="endpoint-method post">POST</div>
+                        <div class="endpoint-path">/api/v1/analyze</div>
+                        <div class="endpoint-description">
+                            <p>Analyze a DNA sequence file</p>
+                            <h4>Request</h4>
+                            <p>Form data with the following parameters:</p>
+                            <ul>
+                                <li><code>dnaFile</code> (required): The DNA sequence file to analyze</li>
+                                <li><code>options</code>: JSON string with analysis options</li>
+                            </ul>
+                            <h4>Response</h4>
+                            <div class="code-block">
+                                <pre><code>{
+  "sequence": {
+    "length": 1234,
+    "filename": "example.fa"
+  },
+  "basePairs": {
+    "counts": { "A": 300, "T": 310, "G": 320, "C": 304 },
+    "percentages": { "A": 24.3, "T": 25.1, "G": 25.9, "C": 24.7 },
+    "gcContent": 50.6
+  },
+  "analysis": {
+    // Additional analysis results based on options
+  }
+}</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="api-endpoint">
+                        <div class="endpoint-method post">POST</div>
+                        <div class="endpoint-path">/api/v1/base-pairs</div>
+                        <div class="endpoint-description">
+                            <p>Analyze base pair composition of a DNA sequence</p>
+                            <h4>Request</h4>
+                            <div class="code-block">
+                                <pre><code>{
+  "sequence": "ATGCATGCATGC"
+}</code></pre>
+                            </div>
+                            <h4>Response</h4>
+                            <div class="code-block">
+                                <pre><code>{
+  "counts": { "A": 3, "T": 3, "G": 3, "C": 3 },
+  "percentages": { "A": 25, "T": 25, "G": 25, "C": 25 },
+  "gcContent": 50
+}</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h2>Python Client Example</h2>
+                    <p>Here's a simple Python example to interact with the DNAnalyzer API:</p>
+
+                    <div class="code-block">
+                        <div class="code-header">
+                            <span class="code-label">Python</span>
+                            <button class="copy-button">Copy</button>
+                        </div>
+                        <pre><code>import requests
+
+# API base URL
+BASE_URL = "http://localhost:8080/api/v1"
+
+# Check server status
+response = requests.get(f"{BASE_URL}/status")
+print("Server status:", response.json())
+
+# Analyze a sequence
+with open("sequence.fa", "rb") as f:
+    files = {"dnaFile": f}
+    options = {
+        "sequence-length": True,
+        "gc-content": True,
+        "base-composition": True,
+        "start-codons": True,
+        "stop-codons": True
+    }
+    data = {"options": json.dumps(options)}
+    response = requests.post(f"{BASE_URL}/analyze", files=files, data=data)
+    
+    # Print results
+    result = response.json()
+    print(f"Sequence length: {result['sequence']['length']}")
+    print(f"GC content: {result['basePairs']['gcContent']}%")</code></pre>
+                    </div>
+                </section>
+
+                <!-- FAQ Section -->
+                <section id="faq" class="doc-section">
+                    <h1>Frequently Asked Questions</h1>
+
+                    <div class="faq-item">
+                        <div class="faq-question">
+                            <h3>Is my DNA data secure when using DNAnalyzer?</h3>
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="faq-answer">
+                            <p>Yes, DNAnalyzer is designed with privacy as a fundamental principle. All processing
+                                occurs locally on your device, and your DNA sequence data never leaves your system. In
+                                web mode, analysis runs directly in your browser, and in server mode, it runs only on
+                                your local machine. We don't collect, store, or transmit any of your sequence data.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-question">
+                            <h3>What file formats does DNAnalyzer support?</h3>
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="faq-answer">
+                            <p>DNAnalyzer supports the following file formats:</p>
+                            <ul>
+                                <li>FASTA (.fa, .fasta)</li>
+                                <li>FASTQ (.fastq)</li>
+                                <li>Plain text (.txt) containing DNA sequences</li>
+                            </ul>
+                            <p>The sequences should contain only A, T, G, C, and N (unknown) nucleotides. Other
+                                characters will be treated as unknown bases.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-question">
+                            <h3>How large of a sequence can DNAnalyzer handle?</h3>
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="faq-answer">
+                            <p>The size limitations depend on the mode of operation:</p>
+                            <ul>
+                                <li><strong>Web Interface:</strong> Up to around 5MB sequence files, depending on your
+                                    browser and device memory</li>
+                                <li><strong>Local Server:</strong> Can handle much larger sequences, typically up to
+                                    several hundred MB</li>
+                            </ul>
+                            <p>For very large genomes (e.g., human genome), we recommend using the local server
+                                installation with a machine that has at least 8GB of RAM.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-question">
+                            <h3>Can DNAnalyzer analyze my 23andMe or Ancestry DNA data?</h3>
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="faq-answer">
+                            <p>Not directly in the current version. DNAnalyzer is designed to work with full DNA
+                                sequences rather than SNP genotype data from consumer genetics services. However, we're
+                                developing a feature to support genotype data analysis in an upcoming version.</p>
+                            <p>If you have raw data from these services, you would need to convert it to a suitable
+                                format before using it with DNAnalyzer.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-question">
+                            <h3>Is DNAnalyzer open source?</h3>
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                        <div class="faq-answer">
+                            <p>Yes, DNAnalyzer is completely open source under the MIT License. You can view, modify,
+                                and contribute to the code on our <a
+                                    href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub repository</a>.</p>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Community Section -->
+                <section id="community" class="doc-section">
+                    <h1>Community & Support</h1>
+                    <p>DNAnalyzer has an active community of users and developers. Here's how you can get involved and
+                        find support.</p>
+
+                    <h2>Getting Help</h2>
+                    <p>If you need assistance with DNAnalyzer, there are several resources available:</p>
+
+                    <div class="community-resources">
+                        <div class="resource-card">
+                            <i class="fab fa-discord"></i>
+                            <h3>Discord Community</h3>
+                            <p>Join our Discord server for real-time assistance and discussions about DNAnalyzer.</p>
+                            <a href="https://discord.gg/xNpujz49gj" class="btn btn-secondary btn-sm">Join Discord</a>
+                        </div>
+
+                        <div class="resource-card">
+                            <i class="fab fa-github"></i>
+                            <h3>GitHub Issues</h3>
+                            <p>Report bugs or request features through our GitHub issue tracker.</p>
+                            <a href="https://github.com/VerisimilitudeX/DNAnalyzer/issues"
+                                class="btn btn-secondary btn-sm">GitHub Issues</a>
+                        </div>
+
+                        <div class="resource-card">
+                            <i class="fas fa-book"></i>
+                            <h3>Documentation</h3>
+                            <p>Browse comprehensive guides and tutorials in our documentation.</p>
+                            <a href="docs.html" class="btn btn-secondary btn-sm">View Docs</a>
+                        </div>
+                    </div>
+
+                    <h2>Contributing</h2>
+                    <p>DNAnalyzer is an open-source project, and we welcome contributions from the community. There are
+                        many ways to contribute:</p>
+
+                    <ul>
+                        <li><strong>Code Contributions:</strong> Help improve DNAnalyzer by fixing bugs or adding new
+                            features</li>
+                        <li><strong>Documentation:</strong> Improve our guides, tutorials, and API documentation</li>
+                        <li><strong>Testing:</strong> Test DNAnalyzer and report issues or suggest improvements</li>
+                        <li><strong>Translations:</strong> Help translate DNAnalyzer into different languages</li>
+                    </ul>
+
+                    <p>To get started with contributing, please read our <a
+                            href="https://github.com/VerisimilitudeX/DNAnalyzer/blob/main/CONTRIBUTING.md">contribution
+                            guidelines</a>.</p>
+
+                    <div class="info-box">
+                        <h3>Code of Conduct</h3>
+                        <p>We're committed to providing a welcoming and inclusive environment for all contributors.
+                            Please read and follow our <a
+                                href="https://github.com/VerisimilitudeX/DNAnalyzer/blob/main/CODE_OF_CONDUCT.md">Code
+                                of Conduct</a>.</p>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-brand">
+                    <img src="../assets/icons/Icon_Dark_BG.svg" alt="DNAnalyzer Logo">
+                    <p>DNAnalyzer is a powerful, privacy-focused DNA analysis tool using cutting-edge machine learning
+                        models for accurate, on-device genomic analysis.</p>
+
+                    <div class="footer-social">
+                        <a href="https://www.twitter.com/DNAnalyzer_" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="#" class="social-link">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="../features/features.html">Features</a></li>
+                        <li><a href="../analyzer/analyzer.html">DNA Analyzer</a></li>
+                        <li><a href="../server/server.html">Server</a></li>
+                        <li><a href="docs.html">Documentation</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="getting-started.md">Getting Started</a></li>
+                        <li><a href="citations.md">Citations</a></li>
+                        <li><a href="research/genes.md">Gene Research</a></li>
+                        <li><a href="samples/cli-arguments-examples.md">CLI Examples</a></li>
+                    </ul>
+                </div>
+
+                <div class="footer-nav">
+                    <h4>Community</h4>
+                    <ul>
+                        <li><a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a></li>
+                        <li><a href="https://discord.gg/xNpujz49gj">Discord</a></li>
+                        <li><a href="contributing/CONTRIBUTING.md">Contributing</a></li>
+                        <li><a href="../CODE_OF_CONDUCT.md">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="footer-bottom">
+                <div class="footer-copyright">
+                    Copyright &copy; Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN:
+                    81-2908499). MIT License.
+                </div>
+
+                <div class="footer-links">
+                    <a href="../LICENSE.md">License</a>
+                    <a href="../SECURITY.md">Security</a>
+                    <a href="../CITATION.cff">Citation</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="docs.js"></script>
+</body>
+
+</html>
+--------------------------------------------------
+