diff --git a/index.html b/index.html
index 6349659..f9484b7 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,24 @@
     />
     <!-- Main CSS -->
     <link rel="stylesheet" href="src/styles/styles.css" />
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="src/favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="src/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="src/favicon/favicon-16x16.png"
+    />
   </head>
 
   <body>
@@ -31,17 +49,19 @@
     <!-- Navigation -->
     <nav id="navigation">
       <div class="nav-container">
-        <div class="logo">Interstellar Development</div>
+        <div class="logo">
+          <a href="#welcome-screen">Interstellar Development</a>
+        </div>
 
         <button
           class="mobile-menu-btn"
-          id="mobile-menu-btn"
+          id="burger-menu"
           aria-label="Toggle navigation"
         >
           <i class="fas fa-bars"></i>
         </button>
 
-        <ul class="nav-links" id="nav-links">
+        <ul class="nav-links" id="main-nav">
           <li><a href="#projects">Projects</a></li>
           <li><a href="#team">Team</a></li>
           <li><a href="#about">About</a></li>
@@ -53,7 +73,7 @@
 
     <main>
       <!-- Hero Section -->
-      <section class="hero">
+      <section class="hero" id="welcome-screen">
         <div class="container">
           <div class="hero-content">
             <h1>
@@ -88,51 +108,36 @@
             </p>
           </div>
 
-          <div class="project-category">
-            <h3 class="category-title">Gaming Projects</h3>
-            <div class="projects-grid">
-              <div class="project-card">
-                <div class="project-icon">
-                  <i class="fas fa-crosshairs"></i>
-                </div>
-                <h3>Chromania</h3>
-                <p>
-                  A 2D jump-and-run game where players must restore color to the
-                  world. Developed with our assistance. <br />
-                  <span class="project-status development">In Development</span>
-                </p>
-              </div>
-
-              <div class="project-card">
-                <div class="project-icon">
-                  <i class="fas fa-crosshairs"></i>
-                </div>
-                <h3>The tale of the Free</h3>
-                <p>
-                  A 2.5D RPG where the protagonist journeys through the world,
-                  gaining friends and allies to overthrow a corrupt government
-                  branch. <br />
-                  <span class="project-status development">In Planning</span>
-                </p>
-              </div>
+          <!-- Portfolio Filter Controls -->
+          <div class="portfolio-controls">
+            <div class="filter-buttons">
+              <button class="filter-btn active" data-filter="all">All</button>
+              <button class="filter-btn" data-filter="gaming">Gaming</button>
+              <button class="filter-btn" data-filter="software">
+                Software
+              </button>
+              <button class="filter-btn" data-filter="web">Web</button>
+            </div>
+            <div class="search-box">
+              <input
+                type="text"
+                id="project-search"
+                placeholder="Search projects..."
+              />
+              <i class="fas fa-search"></i>
             </div>
           </div>
 
-          <div class="project-category">
-            <h3 class="category-title">Software Solutions</h3>
-            <div class="projects-grid">
-              <div class="project-card">
-                <div class="project-icon">
-                  <i class="fas fa-code"></i>
-                </div>
-                <h3>FOSS Alternatives</h3>
-                <p>
-                  We maintain a curated list of free software alternatives to
-                  proprietary applications, focusing on quality and user
-                  freedom.
-                </p>
-                <span class="project-status active">Ongoing</span>
-              </div>
+          <div class="portfolio-grid">
+            <!-- Gaming Projects -->
+            <div class="portfolio-grid">
+              <portfolio-card
+                icon="fas fa-rocket"
+                title="Projects Coming Soon"
+                desc="We're currently working on exciting new free and open source software projects. Stay tuned for updates as we develop high-quality solutions that respect user freedom."
+                tags="all"
+                collaboration="Internal Project"
+              ></portfolio-card>
             </div>
           </div>
         </div>
@@ -277,6 +282,30 @@
         </div>
       </section>
 
+      <!-- Stats Section -->
+      <section class="stats-section">
+        <div class="container">
+          <div class="stats-container">
+            <div class="stat-item">
+              <div class="stat-number" data-count="0">0</div>
+              <div class="stat-label">Projects</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number" data-count="2">0</div>
+              <div class="stat-label">Team Members</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number" data-count="3">0</div>
+              <div class="stat-label">Years Active</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number" data-count="100">0</div>
+              <div class="stat-label">% Free Software</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- Contact Section -->
       <section id="contact" class="section">
         <div class="container">
@@ -405,32 +434,7 @@
               <h4>Projects</h4>
               <ul>
                 <li>
-                  <a
-                    href="https://interstellardevelopment.org/code/interstellar_development"
-                    target="_blank"
-                    >Web Game Collection</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="https://interstellardevelopment.org/code/interstellar_development"
-                    target="_blank"
-                    >FreeFTF Game</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="https://interstellardevelopment.org/code/interstellar_development"
-                    target="_blank"
-                    >React Components</a
-                  >
-                </li>
-                <li>
-                  <a
-                    href="https://interstellardevelopment.org/code/interstellar_development"
-                    target="_blank"
-                    >FOSS Alternatives</a
-                  >
+                  <a href="" target="_blank">Coming soon</a>
                 </li>
               </ul>
             </div>
@@ -476,5 +480,15 @@
         </div>
       </footer>
     </main>
+
+    <!-- JavaScript Files -->
+    <script src="src/js/main.js"></script>
+    <script src="src/js/stars.js"></script>
+    <script src="src/js/navigation.js"></script>
+    <script src="src/js/form.js"></script>
+    <script src="src/js/portfolioCard.js"></script>
+    <script src="src/js/portfolioFilter.js"></script>
+    <script src="src/js/overview.js"></script>
+    <script src="src/js/sectionTracker.js"></script>
   </body>
 </html>
diff --git a/src/favicon/android-chrome-192x192.png b/src/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..e636383
Binary files /dev/null and b/src/favicon/android-chrome-192x192.png differ
diff --git a/src/favicon/android-chrome-512x512.png b/src/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..65f6ef4
Binary files /dev/null and b/src/favicon/android-chrome-512x512.png differ
diff --git a/src/favicon/apple-touch-icon.png b/src/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..42de221
Binary files /dev/null and b/src/favicon/apple-touch-icon.png differ
diff --git a/src/favicon/favicon-16x16.png b/src/favicon/favicon-16x16.png
new file mode 100644
index 0000000..e736fae
Binary files /dev/null and b/src/favicon/favicon-16x16.png differ
diff --git a/src/favicon/favicon-32x32.png b/src/favicon/favicon-32x32.png
new file mode 100644
index 0000000..74501cd
Binary files /dev/null and b/src/favicon/favicon-32x32.png differ
diff --git a/src/favicon/favicon.ico b/src/favicon/favicon.ico
new file mode 100644
index 0000000..4de4913
Binary files /dev/null and b/src/favicon/favicon.ico differ
diff --git a/src/scripts/form.js b/src/js/form.js
similarity index 100%
rename from src/scripts/form.js
rename to src/js/form.js
diff --git a/src/scripts/main.js b/src/js/main.js
similarity index 100%
rename from src/scripts/main.js
rename to src/js/main.js
diff --git a/src/js/navigation.js b/src/js/navigation.js
new file mode 100644
index 0000000..974476d
--- /dev/null
+++ b/src/js/navigation.js
@@ -0,0 +1,106 @@
+// Navigation JavaScript
+let lastScrollY = window.scrollY;
+let ticking = false;
+
+function updateNavigation() {
+  const navigation = document.getElementById("navigation");
+  const scrolled = window.scrollY > 50;
+
+  if (scrolled) {
+    navigation.classList.add("scrolled");
+
+    // Hide/show nav on scroll
+    if (window.scrollY > lastScrollY && window.scrollY > 100) {
+      navigation.classList.add("hidden");
+    } else {
+      navigation.classList.remove("hidden");
+    }
+  } else {
+    navigation.classList.remove("scrolled", "hidden");
+  }
+
+  lastScrollY = window.scrollY;
+  ticking = false;
+}
+
+function requestTick() {
+  if (!ticking) {
+    requestAnimationFrame(updateNavigation);
+    ticking = true;
+  }
+}
+
+// Mobile navigation functionality
+function setupMobileNavigation() {
+  const burgerMenu = document.getElementById("burger-menu");
+  const mainNav = document.getElementById("main-nav");
+  const body = document.body;
+
+  // Create overlay for mobile menu
+  const overlay = document.createElement("div");
+  overlay.className = "nav-overlay";
+  document.body.appendChild(overlay);
+
+  if (burgerMenu && mainNav) {
+    burgerMenu.addEventListener("click", function () {
+      const isActive = mainNav.classList.contains("active");
+
+      if (isActive) {
+        // Close menu
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+      } else {
+        // Open menu
+        mainNav.classList.add("active");
+        burgerMenu.classList.add("active");
+        overlay.classList.add("active");
+        body.classList.add("nav-open");
+      }
+    });
+
+    // Close menu when clicking on overlay
+    overlay.addEventListener("click", function () {
+      mainNav.classList.remove("active");
+      burgerMenu.classList.remove("active");
+      overlay.classList.remove("active");
+      body.classList.remove("nav-open");
+    });
+
+    // Close menu when clicking on a link
+    const navLinks = mainNav.querySelectorAll("a");
+    navLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+
+        // Update active state
+        navLinks.forEach((l) => l.classList.remove("active"));
+        this.classList.add("active");
+      });
+    });
+
+    // Set initial active state based on current hash
+    function setActiveNavLink() {
+      const currentHash = window.location.hash || "#home";
+      navLinks.forEach((link) => {
+        if (link.getAttribute("href") === currentHash) {
+          link.classList.add("active");
+        } else {
+          link.classList.remove("active");
+        }
+      });
+    }
+
+    // Update active state on hash change
+    window.addEventListener("hashchange", setActiveNavLink);
+    setActiveNavLink();
+  }
+}
+
+// Initialize navigation
+window.addEventListener("scroll", requestTick);
+window.addEventListener("load", updateNavigation);
diff --git a/src/js/overview.js b/src/js/overview.js
new file mode 100644
index 0000000..9dd7bf2
--- /dev/null
+++ b/src/js/overview.js
@@ -0,0 +1,57 @@
+// Counter animation for stats
+document.addEventListener("DOMContentLoaded", function () {
+  const counters = document.querySelectorAll(".stat-number");
+  let hasCounted = false;
+
+  function animateCounters() {
+    if (hasCounted) return;
+
+    counters.forEach((counter) => {
+      const target = parseInt(counter.getAttribute("data-count"));
+      const duration = 2000; // 2 seconds
+      const frameDuration = 1000 / 60; // 60 frames per second
+      const totalFrames = Math.round(duration / frameDuration);
+      let frame = 0;
+
+      const counterInterval = setInterval(() => {
+        frame++;
+        const progress = frame / totalFrames;
+        const currentCount = Math.round(target * progress);
+
+        counter.textContent = currentCount;
+
+        if (frame === totalFrames) {
+          clearInterval(counterInterval);
+        }
+      }, frameDuration);
+
+      counter.classList.add("animated");
+    });
+
+    hasCounted = true;
+  }
+
+  // Check if element is in viewport
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  // Check on scroll and on load
+  function checkCounters() {
+    const statsContainer = document.querySelector(".stats-container");
+    if (statsContainer && isInViewport(statsContainer)) {
+      animateCounters();
+      window.removeEventListener("scroll", checkCounters);
+    }
+  }
+
+  window.addEventListener("scroll", checkCounters);
+  checkCounters(); // Check on page load
+});
diff --git a/src/scripts/portfolioCard.js b/src/js/portfolioCard.js
similarity index 100%
rename from src/scripts/portfolioCard.js
rename to src/js/portfolioCard.js
diff --git a/src/scripts/portfolioFilter.js b/src/js/portfolioFilter.js
similarity index 100%
rename from src/scripts/portfolioFilter.js
rename to src/js/portfolioFilter.js
diff --git a/src/js/sectionTracker.js b/src/js/sectionTracker.js
new file mode 100644
index 0000000..e392724
--- /dev/null
+++ b/src/js/sectionTracker.js
@@ -0,0 +1,111 @@
+// Section tracking and navigation highlighting
+document.addEventListener("DOMContentLoaded", function () {
+  const sections = document.querySelectorAll("section[id]");
+  const navLinks = document.querySelectorAll(".nav-links a");
+
+  // Configuration
+  const offset = 100; // Offset for when section becomes "active" (accounts for fixed nav)
+  let isScrolling = false;
+
+  function getCurrentSection() {
+    let currentSection = "";
+    const scrollPosition = window.scrollY + offset;
+
+    // Find which section we're currently in
+    sections.forEach((section) => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const sectionId = section.getAttribute("id");
+
+      if (
+        scrollPosition >= sectionTop &&
+        scrollPosition < sectionTop + sectionHeight
+      ) {
+        currentSection = sectionId;
+      }
+    });
+
+    // Special case: if we're at the very top, activate the first section
+    if (window.scrollY < 100) {
+      currentSection = sections[0]?.getAttribute("id") || "";
+    }
+
+    return currentSection;
+  }
+
+  function updateActiveNavLink() {
+    const currentSection = getCurrentSection();
+
+    navLinks.forEach((link) => {
+      const href = link.getAttribute("href");
+
+      // Remove active class from all links
+      link.classList.remove("active");
+
+      // Add active class to matching link
+      if (href === `#${currentSection}`) {
+        link.classList.add("active");
+      }
+    });
+  }
+
+  // Throttle scroll events for better performance
+  function handleScroll() {
+    if (!isScrolling) {
+      window.requestAnimationFrame(() => {
+        updateActiveNavLink();
+        isScrolling = false;
+      });
+      isScrolling = true;
+    }
+  }
+
+  // Listen for scroll events
+  window.addEventListener("scroll", handleScroll);
+
+  // Update on page load
+  updateActiveNavLink();
+
+  // Also update when clicking nav links (for smooth scroll)
+  navLinks.forEach((link) => {
+    link.addEventListener("click", function (e) {
+      // Remove active from all
+      navLinks.forEach((l) => l.classList.remove("active"));
+      // Add active to clicked link
+      this.classList.add("active");
+
+      // Let the scroll handler update it properly after scroll completes
+      setTimeout(updateActiveNavLink, 100);
+    });
+  });
+
+  // Handle hash changes (browser back/forward)
+  window.addEventListener("hashchange", function () {
+    setTimeout(updateActiveNavLink, 100);
+  });
+
+  // Intersection Observer for more precise tracking (progressive enhancement)
+  if ("IntersectionObserver" in window) {
+    const observerOptions = {
+      rootMargin: "-20% 0px -70% 0px", // Trigger when section is roughly in the middle of viewport
+      threshold: 0,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("id");
+          navLinks.forEach((link) => {
+            link.classList.remove("active");
+            if (link.getAttribute("href") === `#${sectionId}`) {
+              link.classList.add("active");
+            }
+          });
+        }
+      });
+    }, observerOptions);
+
+    // Observe all sections
+    sections.forEach((section) => observer.observe(section));
+  }
+});
diff --git a/src/scripts/stars.js b/src/js/stars.js
similarity index 96%
rename from src/scripts/stars.js
rename to src/js/stars.js
index 421c0a3..d5c34d0 100644
--- a/src/scripts/stars.js
+++ b/src/js/stars.js
@@ -1,7 +1,7 @@
 // Create stellar background
 function createStars() {
   const stars = document.getElementById("stars");
-  const count = 150;
+  const count = 250;
   stars.innerHTML = ""; // Clear any existing stars
 
   for (let i = 0; i < count; i++) {
diff --git a/src/scripts/navigation.js b/src/scripts/navigation.js
deleted file mode 100644
index 664770a..0000000
--- a/src/scripts/navigation.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Navigation scroll effect
-function updateNavigation() {
-  const navigation = document.getElementById("navigation");
-  if (window.scrollY > 50) {
-    navigation.classList.add("scrolled");
-  } else {
-    navigation.classList.remove("scrolled");
-  }
-}
-
-// Mobile navigation functionality
-function setupMobileNavigation() {
-  const burgerMenu = document.getElementById("burger-menu");
-  const mainNav = document.getElementById("main-nav");
-
-  if (burgerMenu && mainNav) {
-    burgerMenu.addEventListener("click", function () {
-      mainNav.classList.toggle("active");
-      burgerMenu.classList.toggle("active");
-      document.body.classList.toggle("nav-open");
-    });
-
-    // Close menu when clicking on a link
-    const navLinks = mainNav.querySelectorAll("a");
-    navLinks.forEach((link) => {
-      link.addEventListener("click", function () {
-        mainNav.classList.remove("active");
-        burgerMenu.classList.remove("active");
-        document.body.classList.remove("nav-open");
-      });
-    });
-  }
-}
diff --git a/src/scripts/overview.js b/src/scripts/overview.js
deleted file mode 100644
index 94c214a..0000000
--- a/src/scripts/overview.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// Counter animation for stats
-document.addEventListener("DOMContentLoaded", function() {
-    const counters = document.querySelectorAll('.stat-number');
-    let hasCounted = false;
-
-    function animateCounters() {
-        if (hasCounted) return;
-
-        counters.forEach(counter => {
-            const target = parseInt(counter.getAttribute('data-count'));
-            const duration = 2000; // 2 seconds
-            const frameDuration = 1000 / 60; // 60 frames per second
-            const totalFrames = Math.round(duration / frameDuration);
-            let frame = 0;
-
-            const counterInterval = setInterval(() => {
-                frame++;
-                const progress = frame / totalFrames;
-                const currentCount = Math.round(target * progress);
-
-                counter.textContent = currentCount;
-
-                if (frame === totalFrames) {
-                    clearInterval(counterInterval);
-                }
-            }, frameDuration);
-
-            counter.classList.add('animated');
-        });
-
-        hasCounted = true;
-    }
-
-    // Check if element is in viewport
-    function isInViewport(element) {
-        const rect = element.getBoundingClientRect();
-        return (
-            rect.top >= 0 &&
-            rect.left >= 0 &&
-            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-        );
-    }
-
-    // Check on scroll and on load
-    function checkCounters() {
-        const statsContainer = document.querySelector('.stats-container');
-        if (statsContainer && isInViewport(statsContainer)) {
-            animateCounters();
-            window.removeEventListener('scroll', checkCounters);
-        }
-    }
-
-    window.addEventListener('scroll', checkCounters);
-    checkCounters(); // Check on page load
-});
\ No newline at end of file
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 72581fb..3229eb9 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -14,6 +14,13 @@
   --accent-primary: #00f5ff;
   --accent-secondary: #7c3aed;
   --accent-gradient: linear-gradient(135deg, #00f5ff, #7c3aed);
+  --accent-gradient-reverse: linear-gradient(135deg, #7c3aed, #00f5ff);
+
+  --purple: #8b5cf6;
+  --purple-light: #a78bfa;
+  --purple-dark: #7c3aed;
+  --purple-muted: #6d28d9;
+  --shadow-purple: rgba(139, 92, 246, 0.3);
 
   --border-subtle: #262626;
   --border-accent: #333333;
@@ -73,6 +80,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body.nav-open {
+  overflow: hidden;
+}
+
 /* Links */
 a {
   color: inherit;
@@ -97,29 +108,40 @@ img {
   outline-offset: 2px;
 }
 
-/* Background Effects */
+/* Enhanced Background Effects */
 .animated-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  z-index: -2;
   background: radial-gradient(
       circle at 20% 50%,
-      rgba(124, 58, 237, 0.08) 0%,
+      rgba(124, 58, 237, 0.15) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 80% 20%,
-      rgba(0, 245, 255, 0.06) 0%,
+      rgba(0, 245, 255, 0.12) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 40% 80%,
-      rgba(124, 58, 237, 0.04) 0%,
+      rgba(124, 58, 237, 0.1) 0%,
       transparent 50%
     );
+  animation: gradientShift 15s ease infinite;
+}
+
+@keyframes gradientShift {
+  0%,
+  100% {
+    background-position: 0% 50%, 100% 50%, 50% 100%;
+  }
+  50% {
+    background-position: 100% 50%, 0% 50%, 50% 0%;
+  }
 }
 
 .stars {
@@ -134,8 +156,6 @@ img {
 
 .star {
   position: absolute;
-  width: 1px;
-  height: 1px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 50%;
   animation: twinkle 3s infinite ease-in-out;
@@ -153,21 +173,28 @@ img {
   }
 }
 
-/* Navigation */
+/* Enhanced Navigation with Fixed Background Animations */
 nav {
   position: fixed;
   top: 0;
   width: 100%;
-  background: rgba(10, 10, 10, 0.8);
-  backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--border-subtle);
+  background: rgba(10, 10, 10, 0.95);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   z-index: var(--z-navigation);
-  transition: all 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform: translateY(0);
+}
+
+/* Hide nav on scroll down, show on scroll up */
+nav.hidden {
+  transform: translateY(-100%);
 }
 
 nav.scrolled {
-  background: rgba(10, 10, 10, 0.95);
-  box-shadow: var(--shadow-lg);
+  background: rgba(10, 10, 10, 0.98);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  border-bottom-color: rgba(124, 58, 237, 0.2);
 }
 
 .nav-container {
@@ -177,7 +204,7 @@ nav.scrolled {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 80px;
+  height: 70px;
 }
 
 .logo {
@@ -187,41 +214,99 @@ nav.scrolled {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  position: relative;
+  padding: var(--spacing-xs) 0;
+}
+
+.logo::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--accent-gradient);
+  transition: width 0.3s ease;
+}
+
+.logo:hover::after {
+  width: 100%;
 }
 
 .nav-links {
   display: flex;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
+  align-items: center;
 }
 
 .nav-links a {
   color: var(--text-secondary);
   font-weight: 500;
   font-size: 0.9rem;
-  transition: all 0.3s ease;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  padding: var(--spacing-xs) 0;
+  overflow: hidden;
 }
 
-.nav-links a:hover {
-  color: var(--accent-primary);
+/* Fixed background animation - only shows on hover */
+.nav-links a::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+  border-radius: var(--radius-md);
 }
 
+.nav-links a:hover::before {
+  opacity: 0.1;
+}
+
+/* Underline animation */
 .nav-links a::after {
   content: "";
   position: absolute;
-  bottom: -8px;
-  left: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
   width: 0;
   height: 2px;
   background: var(--accent-primary);
   transition: width 0.3s ease;
+  border-radius: 2px;
+}
+
+.nav-links a:hover {
+  color: var(--accent-primary);
+  transform: translateY(-1px);
 }
 
 .nav-links a:hover::after {
-  width: 100%;
+  width: 80%;
 }
 
+/* Active state */
+.nav-links a.active {
+  color: var(--accent-primary);
+  background: rgba(0, 245, 255, 0.1);
+}
+
+.nav-links a.active::after {
+  width: 80%;
+}
+
+.nav-links a.active::before {
+  opacity: 0.1;
+}
+
+/* Mobile menu button */
 .mobile-menu-btn {
   display: none;
   background: none;
@@ -229,13 +314,110 @@ nav.scrolled {
   color: var(--text-primary);
   font-size: 1.5rem;
   cursor: pointer;
-  padding: var(--spacing-xs);
-  border-radius: var(--radius-sm);
-  transition: background 0.3s ease;
+  padding: var(--spacing-sm);
+  border-radius: var(--radius-md);
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1001;
 }
 
 .mobile-menu-btn:hover {
-  background: var(--bg-card);
+  background: rgba(124, 58, 237, 0.1);
+  color: var(--accent-primary);
+}
+
+.mobile-menu-btn.active {
+  color: var(--accent-primary);
+}
+
+/* Mobile menu styles */
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: block;
+  }
+
+  .nav-links {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 280px;
+    height: 100vh;
+    background: rgba(10, 10, 10, 0.98);
+    backdrop-filter: blur(30px);
+    flex-direction: column;
+    padding: 80px var(--spacing-lg) var(--spacing-lg);
+    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
+  }
+
+  .nav-links.active {
+    right: 0;
+  }
+
+  .nav-links a {
+    width: 100%;
+    text-align: center;
+    padding: var(--spacing-md);
+    font-size: 1.1rem;
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .nav-links a::after {
+    display: none;
+  }
+
+  .nav-links a::before {
+    border-radius: var(--radius-lg);
+  }
+
+  /* Overlay for mobile menu */
+  .nav-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .nav-overlay.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+/* Enhanced scroll behavior */
+.nav-scroll-hide {
+  animation: navHide 0.4s ease forwards;
+}
+
+.nav-scroll-show {
+  animation: navShow 0.4s ease forwards;
+}
+
+@keyframes navHide {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes navShow {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 /* Container */
@@ -245,12 +427,42 @@ nav.scrolled {
   padding: 0 var(--spacing-lg);
 }
 
-/* Hero Section */
+/* Enhanced Hero Section */
 .hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding-top: 80px;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle at center,
+    rgba(124, 58, 237, 0.1) 0%,
+    transparent 70%
+  );
+  transform: translate(-50%, -50%);
+  animation: pulse 4s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1.1);
+  }
 }
 
 .hero-content {
@@ -258,6 +470,8 @@ nav.scrolled {
   margin: 0 auto;
   text-align: center;
   padding: var(--spacing-lg) 0;
+  position: relative;
+  z-index: 1;
 }
 
 .hero h1 {
@@ -266,6 +480,18 @@ nav.scrolled {
   margin-bottom: var(--spacing-md);
   line-height: 1.1;
   letter-spacing: -0.02em;
+  animation: slideUp 1s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .hero h1 .highlight {
@@ -273,6 +499,27 @@ nav.scrolled {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  position: relative;
+  display: inline-block;
+}
+
+.hero h1 .highlight::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--accent-gradient);
+  transform: scaleX(0);
+  transform-origin: left;
+  animation: expandLine 1s ease-out 0.5s forwards;
+}
+
+@keyframes expandLine {
+  to {
+    transform: scaleX(1);
+  }
 }
 
 .hero p {
@@ -283,6 +530,7 @@ nav.scrolled {
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6;
+  animation: slideUp 1s ease-out 0.2s both;
 }
 
 .hero-buttons {
@@ -290,9 +538,10 @@ nav.scrolled {
   gap: var(--spacing-sm);
   justify-content: center;
   flex-wrap: wrap;
+  animation: slideUp 1s ease-out 0.4s both;
 }
 
-/* Buttons */
+/* Enhanced Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -309,6 +558,26 @@ nav.scrolled {
   overflow: hidden;
 }
 
+.btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: left 0.5s ease;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
 .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -321,30 +590,67 @@ nav.scrolled {
 }
 
 .btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 25px rgba(0, 245, 255, 0.3);
+  transform: translateY(-3px);
+  box-shadow: 0 15px 30px rgba(0, 245, 255, 0.4);
 }
 
 .btn-secondary {
   background: transparent;
   color: var(--text-primary);
   border: 2px solid var(--border-accent);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-secondary::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  opacity: 0.1;
+  transition: left 0.3s ease;
+  z-index: -1;
 }
 
 .btn-secondary:hover:not(:disabled) {
   background: var(--bg-card);
   border-color: var(--accent-primary);
-  transform: translateY(-2px);
+  transform: translateY(-3px);
 }
 
-/* Sections */
+.btn-secondary:hover::after {
+  left: 0;
+}
+
+/* Enhanced Sections */
 .section {
-  padding: 6rem 0;
+  padding: 8rem 0;
+  position: relative;
+}
+
+.section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    rgba(124, 58, 237, 0.03) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
 }
 
 .section-header {
   text-align: center;
   margin-bottom: var(--spacing-2xl);
+  position: relative;
 }
 
 .section-title {
@@ -352,6 +658,20 @@ nav.scrolled {
   font-weight: 700;
   margin-bottom: var(--spacing-sm);
   letter-spacing: -0.02em;
+  position: relative;
+  display: inline-block;
+}
+
+.section-title::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: var(--accent-gradient);
+  border-radius: 2px;
 }
 
 .section-subtitle {
@@ -362,35 +682,126 @@ nav.scrolled {
   line-height: 1.6;
 }
 
-/* Projects */
-.project-category {
-  margin-bottom: var(--spacing-2xl);
+/* Enhanced Portfolio Controls */
+.portfolio-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-xl);
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
 }
 
-.category-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: var(--spacing-lg);
-  color: var(--text-primary);
+.filter-buttons {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
 }
 
-.projects-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  gap: var(--spacing-lg);
-}
-
-.project-card {
+.filter-btn {
+  padding: 0.75rem 1.5rem;
   background: var(--bg-card);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-lg);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }
 
-.project-card::before {
+.filter-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+.filter-btn:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+  transform: translateY(-2px);
+  border-color: var(--accent-primary);
+}
+
+.filter-btn.active {
+  background: var(--accent-gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  box-shadow: var(--shadow-glow);
+}
+
+.search-box {
+  position: relative;
+  max-width: 300px;
+  width: 100%;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 2.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.search-box input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1);
+  background: var(--bg-card-hover);
+}
+
+.search-box i {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  transition: color 0.3s ease;
+}
+
+.search-box input:focus + i {
+  color: var(--accent-primary);
+}
+
+/* Enhanced Portfolio Grid */
+.portfolio-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+portfolio-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  display: block;
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 0.6s ease forwards;
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+portfolio-card::before {
   content: "";
   position: absolute;
   top: 0;
@@ -398,65 +809,325 @@ nav.scrolled {
   width: 100%;
   height: 3px;
   background: var(--accent-gradient);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
 }
 
-.project-card:hover {
-  transform: translateY(-8px);
+portfolio-card:hover::before {
+  transform: scaleX(1);
+}
+
+portfolio-card:hover {
+  transform: translateY(-10px) scale(1.02);
   background: var(--bg-card-hover);
-  box-shadow: var(--shadow-xl);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 245, 255, 0.1);
   border-color: var(--border-accent);
 }
 
-.project-icon {
+.portfolio-img {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 60px;
-  height: 60px;
+  height: 120px;
   background: var(--accent-gradient);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--spacing-md);
-  font-size: 1.5rem;
-  color: var(--bg-primary);
+  font-size: 2.5rem;
+  color: #ffffff;
+  position: relative;
+  overflow: hidden;
 }
 
-.project-card h3 {
+.portfolio-img::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: left 0.5s ease;
+}
+
+portfolio-card:hover .portfolio-img::after {
+  left: 100%;
+}
+
+.portfolio-content {
+  padding: var(--spacing-lg);
+}
+
+.portfolio-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: var(--spacing-sm);
   color: var(--text-primary);
 }
 
-.project-card p {
+.portfolio-desc {
   color: var(--text-secondary);
   margin-bottom: var(--spacing-md);
   line-height: 1.6;
 }
 
-.project-status {
-  display: inline-block;
-  padding: var(--spacing-xs) var(--spacing-sm);
+.portfolio-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.tag {
+  padding: 0.25rem 0.75rem;
   background: rgba(0, 245, 255, 0.1);
   color: var(--accent-primary);
   border-radius: var(--radius-sm);
   font-size: 0.8rem;
   font-weight: 500;
   font-family: var(--font-mono);
+  transition: all 0.3s ease;
+}
+
+.tag:hover {
+  background: rgba(0, 245, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+/* Enhanced Portfolio Button */
+.portfolio-btn-container {
+  margin-top: auto;
+  padding: 0 1.5rem 1.5rem;
+}
+
+.portfolio-btn {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  padding: 1rem 1.8rem;
+  border-radius: 8px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  font-size: 0.9rem;
+  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  border: 2px solid transparent;
+  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
+  color: white;
+  box-shadow: 0 4px 15px var(--shadow-purple);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  text-decoration: none;
+  text-align: center;
 }
 
-.project-status.active {
-  background: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
+.portfolio-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--purple-dark), var(--purple-muted));
+  z-index: -1;
+  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transform: scaleX(0);
+  transform-origin: right;
 }
 
-.project-status.development {
-  background: rgba(249, 115, 22, 0.1);
-  color: #f97316;
+.portfolio-btn:hover::before {
+  transform: scaleX(1);
+  transform-origin: left;
 }
 
-/* Team */
+.portfolio-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
+  border-color: var(--purple-light);
+}
+
+.portfolio-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 15px var(--shadow-purple);
+}
+
+.portfolio-btn i {
+  font-size: 1rem;
+  transition: transform 0.3s ease;
+}
+
+.portfolio-btn:hover i {
+  transform: translateX(4px);
+}
+
+.portfolio-btn::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    to bottom right,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.1) 20%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: rotate(30deg) translateY(-150%);
+  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.portfolio-btn:hover::after {
+  transform: rotate(30deg) translateY(150%);
+}
+
+.portfolio-btn:focus {
+  outline: 2px solid var(--purple-light);
+  outline-offset: 2px;
+}
+
+/* Enhanced Collaboration Badge */
+.collaboration-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+  padding: 0.3rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  animation: pulse 2s infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.collaboration-badge::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  transition: left 0.5s ease;
+}
+
+.collaboration-badge:hover::before {
+  left: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+  }
+}
+
+/* Enhanced Stats Section */
+.stats-section {
+  background: var(--bg-secondary);
+  padding: var(--spacing-2xl) 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.stats-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(124, 58, 237, 0.05) 50%,
+    transparent 70%
+  );
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%,
+  100% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+}
+
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-lg);
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+.stat-item {
+  padding: var(--spacing-lg);
+  position: relative;
+}
+
+.stat-item::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  opacity: 0;
+  border-radius: var(--radius-lg);
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.stat-item:hover::before {
+  opacity: 0.05;
+}
+
+.stat-number {
+  font-size: 3rem;
+  font-weight: 800;
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: var(--spacing-sm);
+}
+
+.stat-label {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 1.1rem;
+}
+
+/* Enhanced Team Section */
 .team-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -470,11 +1141,30 @@ nav.scrolled {
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   text-align: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  overflow: hidden;
+}
+
+.team-member::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  opacity: 0.05;
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+.team-member:hover::before {
+  left: 0;
 }
 
 .team-member:hover {
-  transform: translateY(-8px);
+  transform: translateY(-8px) scale(1.02);
   background: var(--bg-card-hover);
   box-shadow: var(--shadow-xl);
   border-color: var(--border-accent);
@@ -489,9 +1179,14 @@ nav.scrolled {
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
-  color: var(--bg-primary);
+  color: #ffffff;
   margin: 0 auto var(--spacing-md);
   position: relative;
+  transition: all 0.3s ease;
+}
+
+.team-member:hover .member-avatar {
+  transform: scale(1.1) rotate(5deg);
 }
 
 .member-avatar::after {
@@ -527,7 +1222,7 @@ nav.scrolled {
   line-height: 1.6;
 }
 
-/* About Section */
+/* Enhanced About Section */
 .about-content {
   max-width: 800px;
   margin: 0 auto;
@@ -540,13 +1235,32 @@ nav.scrolled {
   margin-bottom: var(--spacing-lg);
   line-height: 1.7;
   text-align: left;
+  position: relative;
+  padding-left: var(--spacing-lg);
+}
+
+.about-content p::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background: var(--accent-gradient);
+  border-radius: 2px;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+}
+
+.about-content p:hover::before {
+  transform: scaleY(1);
 }
 
 .about-content p:last-child {
   margin-bottom: 0;
 }
 
-/* Vision Section */
+/* Enhanced Vision Section */
 .vision-content {
   max-width: 1000px;
   margin: 0 auto;
@@ -577,11 +1291,30 @@ nav.scrolled {
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
   text-align: center;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  position: relative;
+  overflow: hidden;
+}
+
+.principle-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  opacity: 0.05;
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+.principle-card:hover::before {
+  left: 0;
 }
 
 .principle-card:hover {
-  transform: translateY(-5px);
+  transform: translateY(-8px) scale(1.02);
   background: var(--bg-card-hover);
   box-shadow: var(--shadow-lg);
   border-color: var(--border-accent);
@@ -597,7 +1330,12 @@ nav.scrolled {
   border-radius: 50%;
   margin: 0 auto var(--spacing-md);
   font-size: 1.8rem;
-  color: var(--bg-primary);
+  color: #ffffff;
+  transition: all 0.3s ease;
+}
+
+.principle-card:hover .principle-icon {
+  transform: scale(1.1) rotate(10deg);
 }
 
 .principle-card h4 {
@@ -612,7 +1350,7 @@ nav.scrolled {
   line-height: 1.6;
 }
 
-/* Contact Section */
+/* Enhanced Contact Section */
 .contact-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -631,6 +1369,14 @@ nav.scrolled {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
+  transition: all 0.3s ease;
+  padding: var(--spacing-md);
+  border-radius: var(--radius-lg);
+}
+
+.contact-item:hover {
+  background: var(--bg-card);
+  transform: translateX(10px);
 }
 
 .contact-icon {
@@ -642,8 +1388,13 @@ nav.scrolled {
   background: var(--accent-gradient);
   border-radius: var(--radius-md);
   font-size: 1.2rem;
-  color: var(--bg-primary);
+  color: #ffffff;
   flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.contact-item:hover .contact-icon {
+  transform: scale(1.1) rotate(5deg);
 }
 
 .contact-details h4 {
@@ -656,22 +1407,45 @@ nav.scrolled {
 .contact-details a {
   color: var(--text-secondary);
   transition: color 0.3s ease;
+  position: relative;
+}
+
+.contact-details a::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: var(--accent-primary);
+  transition: width 0.3s ease;
 }
 
 .contact-details a:hover {
   color: var(--accent-primary);
 }
 
-/* Contact Form */
+.contact-details a:hover::after {
+  width: 100%;
+}
+
+/* Enhanced Contact Form */
 .contact-form {
   background: var(--bg-card);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
+  transition: all 0.3s ease;
+}
+
+.contact-form:hover {
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-glow);
 }
 
 .form-group {
   margin-bottom: var(--spacing-md);
+  position: relative;
 }
 
 .form-group label {
@@ -680,6 +1454,7 @@ nav.scrolled {
   font-weight: 500;
   color: var(--text-primary);
   font-size: 0.9rem;
+  transition: color 0.3s ease;
 }
 
 .form-group input,
@@ -702,6 +1477,7 @@ nav.scrolled {
   outline: none;
   border-color: var(--accent-primary);
   box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.1);
+  background: var(--bg-card-hover);
 }
 
 .form-group textarea {
@@ -720,11 +1496,22 @@ nav.scrolled {
   margin-top: var(--spacing-sm);
 }
 
-/* Footer */
+/* Enhanced Footer */
 .footer {
   background: var(--bg-secondary);
   border-top: 1px solid var(--border-subtle);
   padding: var(--spacing-2xl) 0 var(--spacing-lg);
+  position: relative;
+}
+
+.footer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--accent-gradient);
 }
 
 .footer-content {
@@ -764,12 +1551,30 @@ nav.scrolled {
   color: var(--text-secondary);
   font-size: 1.1rem;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.social-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--accent-gradient);
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+.social-link:hover::before {
+  left: 0;
 }
 
 .social-link:hover {
   background: var(--accent-gradient);
-  color: var(--bg-primary);
-  transform: translateY(-2px);
+  color: #ffffff;
+  transform: translateY(-3px) scale(1.1);
   border-color: transparent;
 }
 
@@ -778,6 +1583,17 @@ nav.scrolled {
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: var(--spacing-sm);
+  position: relative;
+}
+
+.footer-links h4::after {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 30px;
+  height: 2px;
+  background: var(--accent-primary);
 }
 
 .footer-links ul {
@@ -789,11 +1605,29 @@ nav.scrolled {
 .footer-links a {
   color: var(--text-secondary);
   font-size: 0.9rem;
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
+  padding: 0.25rem 0;
+  position: relative;
+}
+
+.footer-links a::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: var(--accent-primary);
+  transition: width 0.3s ease;
 }
 
 .footer-links a:hover {
   color: var(--accent-primary);
+  transform: translateX(5px);
+}
+
+.footer-links a:hover::before {
+  width: 100%;
 }
 
 .footer-bottom {
@@ -830,12 +1664,66 @@ nav.scrolled {
   border-radius: var(--radius-sm);
   font-size: 0.8rem;
   color: var(--text-muted);
+  transition: all 0.3s ease;
+}
+
+.badge:hover {
+  background: var(--accent-gradient);
+  color: var(--bg-primary);
+  border-color: transparent;
+  transform: translateY(-2px);
 }
 
 .badge i {
   color: var(--accent-primary);
 }
 
+.badge:hover i {
+  color: var(--bg-primary);
+}
+
+/* Enhanced No Results */
+.no-results {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: var(--spacing-2xl);
+  color: var(--text-muted);
+  position: relative;
+}
+
+.no-results i {
+  font-size: 3rem;
+  margin-bottom: var(--spacing-md);
+  opacity: 0.5;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+.no-results h3 {
+  font-size: 1.5rem;
+  margin-bottom: var(--spacing-sm);
+  color: var(--text-secondary);
+}
+
+.no-results p {
+  color: var(--text-muted);
+}
+
 /* Responsive Design */
 @media (max-width: 1024px) {
   .nav-container {
@@ -863,25 +1751,60 @@ nav.scrolled {
   }
 
   .nav-links {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    background: var(--bg-secondary);
-    border-top: 1px solid var(--border-subtle);
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 280px;
+    height: 100vh;
+    background: rgba(10, 10, 10, 0.98);
+    backdrop-filter: blur(30px);
     flex-direction: column;
-    padding: var(--spacing-lg);
+    padding: 80px var(--spacing-lg) var(--spacing-lg);
+    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
   }
 
   .nav-links.active {
-    display: flex;
+    right: 0;
+  }
+
+  .nav-links a {
+    width: 100%;
+    text-align: center;
+    padding: var(--spacing-md);
+    font-size: 1.1rem;
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--spacing-xs);
   }
 
   .nav-links a::after {
     display: none;
   }
 
+  .nav-links a::before {
+    border-radius: var(--radius-lg);
+  }
+
+  .nav-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .nav-overlay.active {
+    opacity: 1;
+    visibility: visible;
+  }
+
   .hero h1 {
     font-size: clamp(2rem, 8vw, 3rem);
   }
@@ -899,7 +1822,16 @@ nav.scrolled {
     padding: 4rem 0;
   }
 
-  .projects-grid {
+  .portfolio-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-buttons {
+    justify-content: center;
+  }
+
+  .portfolio-grid {
     grid-template-columns: 1fr;
   }
 
@@ -911,6 +1843,10 @@ nav.scrolled {
     grid-template-columns: 1fr;
   }
 
+  .stats-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .footer-content {
     grid-template-columns: 1fr;
     text-align: center;
@@ -930,6 +1866,11 @@ nav.scrolled {
     text-align: center;
     gap: var(--spacing-sm);
   }
+
+  .portfolio-btn {
+    padding: 0.9rem 1.5rem;
+    font-size: 0.85rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -959,6 +1900,10 @@ nav.scrolled {
   .contact-form {
     padding: var(--spacing-lg);
   }
+
+  .stats-container {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Animations and Interactions */
