diff --git a/index.html b/index.html
index aaa67f1..72a1b0c 100644
--- a/index.html
+++ b/index.html
@@ -7,31 +7,37 @@
     <link rel="stylesheet" href="styles.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
 </head>
 <body>
     <!-- Header -->
     <header class="header">
-        <nav class="nav">
-            <div class="nav-brand">
-                <i class="fas fa-robot"></i>
-                <span>ClubMate</span>
+    <div class="nav container">
+        <a href="#" class="nav-brand">
+            <i class="fas fa-robot"></i> ClubMate
+        </a>
+        <nav class="nav-menu">
+            <a href="#features" class="nav-link">Features</a>
+            <a href="#projects" class="nav-link">Projects</a>
+            <a href="#team" class="nav-link">Team</a>
+            <a href="#contact" class="nav-link">Contact</a>
+        </nav>
+        <div class="nav-actions">
+            <a href="/login" class="btn btn-outline">Login</a>
+            <a href="/signup" class="btn btn-primary">Sign Up</a>
+            <div class="profile-icon">
+                <i class="fas fa-user-circle"></i>
             </div>
-            <ul class="nav-menu">
-                <li><a href="#home" class="nav-link">Home</a></li>
-                <li><a href="#features" class="nav-link">Features</a></li>
-                <li><a href="#about" class="nav-link">About</a></li>
-                <li><a href="#contact" class="nav-link">Contact</a></li>
-            </ul>
-            <div class="nav-toggle">
-                <span></span>
-                <span></span>
-                <span></span>
+            <div class="nav-toggle" id="nav-toggle">
+                <span></span><span></span><span></span>
             </div>
-        </nav>
-    </header>
+        </div>
+    </div>
+</header>
+
 
     <!-- Hero Section -->
-    <section id="home" class="hero">
+    <section id="home" class="hero" data-aos="fade-up">
         <div class="container">
             <div class="hero-content">
                 <h1 class="hero-title">
@@ -55,17 +61,17 @@ <h1 class="hero-title">
                 </div>
             </div>
             <div class="hero-image">
-                <div class="hero-card">
+                <div class="hero-card" data-aos="zoom-in" data-aos-delay="100">
                     <i class="fas fa-calendar-alt"></i>
                     <h3>Event Management</h3>
                     <p>Schedule and organize club events seamlessly</p>
                 </div>
-                <div class="hero-card">
+                <div class="hero-card" data-aos="zoom-in" data-aos-delay="200">
                     <i class="fas fa-users"></i>
                     <h3>Team Coordination</h3>
                     <p>Manage members and track participation</p>
                 </div>
-                <div class="hero-card">
+                <div class="hero-card" data-aos="zoom-in" data-aos-delay="300">
                     <i class="fas fa-project-diagram"></i>
                     <h3>Project Tracking</h3>
                     <p>Monitor project progress and showcase work</p>
@@ -75,49 +81,49 @@ <h3>Project Tracking</h3>
     </section>
 
     <!-- Features Section -->
-    <section id="features" class="features">
+    <section id="features" class="features" data-aos="fade-up">
         <div class="container">
             <div class="section-header">
                 <h2>Powerful Features for Modern Clubs</h2>
                 <p>Everything you need to run a successful technical club</p>
             </div>
             <div class="features-grid">
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="100">
                     <div class="feature-icon">
                         <i class="fas fa-calendar-check"></i>
                     </div>
                     <h3>Event Calendar</h3>
                     <p>Schedule workshops, competitions, and meetings with integrated registration system</p>
                 </div>
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="200">
                     <div class="feature-icon">
                         <i class="fas fa-user-friends"></i>
                     </div>
                     <h3>Member Management</h3>
                     <p>Track member profiles, skills, and participation across all club activities</p>
                 </div>
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="300">
                     <div class="feature-icon">
                         <i class="fas fa-tasks"></i>
                     </div>
                     <h3>Project Showcase</h3>
                     <p>Display ongoing and completed projects with status tracking and documentation</p>
                 </div>
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="400">
                     <div class="feature-icon">
                         <i class="fas fa-bullhorn"></i>
                     </div>
                     <h3>Notice Board</h3>
                     <p>Share announcements, updates, and important information with all members</p>
                 </div>
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="500">
                     <div class="feature-icon">
                         <i class="fas fa-cloud-upload-alt"></i>
                     </div>
                     <h3>Resource Sharing</h3>
                     <p>Upload and share documents, tutorials, and learning materials easily</p>
                 </div>
-                <div class="feature-card">
+                <div class="feature-card" data-aos="zoom-in" data-aos-delay="600">
                     <div class="feature-icon">
                         <i class="fas fa-chart-line"></i>
                     </div>
@@ -128,15 +134,22 @@ <h3>Analytics Dashboard</h3>
         </div>
     </section>
 
+    <!-- Wave Divider -->
+    <div class="wave-divider">
+        <svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#f8f9fa" fill-opacity="1" d="M0,64L48,85.3C96,107,192,149,288,160C384,171,480,149,576,128C672,107,768,85,864,90.7C960,96,1056,128,1152,160C1248,192,1344,224,1392,240L1440,256L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
+        </svg>
+    </div>
+
     <!-- Tech Stack Section -->
-    <section class="tech-stack">
+    <section class="tech-stack" data-aos="fade-up">
         <div class="container">
             <div class="section-header">
                 <h2>Built with Modern Technologies</h2>
                 <p>Reliable, scalable, and developer-friendly stack</p>
             </div>
             <div class="tech-grid">
-                <div class="tech-category">
+                <div class="tech-category" data-aos="fade-up" data-aos-delay="100">
                     <h3>Frontend</h3>
                     <div class="tech-items">
                         <span class="tech-item">HTML/CSS</span>
@@ -144,7 +157,7 @@ <h3>Frontend</h3>
                         <span class="tech-item">React</span>
                     </div>
                 </div>
-                <div class="tech-category">
+                <div class="tech-category" data-aos="fade-up" data-aos-delay="200">
                     <h3>Backend</h3>
                     <div class="tech-items">
                         <span class="tech-item">Node.js</span>
@@ -152,14 +165,14 @@ <h3>Backend</h3>
                         <span class="tech-item">REST API</span>
                     </div>
                 </div>
-                <div class="tech-category">
+                <div class="tech-category" data-aos="fade-up" data-aos-delay="300">
                     <h3>Database</h3>
                     <div class="tech-items">
                         <span class="tech-item">MongoDB</span>
                         <span class="tech-item">Firebase</span>
                     </div>
                 </div>
-                <div class="tech-category">
+                <div class="tech-category" data-aos="fade-up" data-aos-delay="400">
                     <h3>Tools</h3>
                     <div class="tech-items">
                         <span class="tech-item">Git</span>
@@ -172,7 +185,7 @@ <h3>Tools</h3>
     </section>
 
     <!-- CTA Section -->
-    <section class="cta">
+    <section class="cta" data-aos="fade-up">
         <div class="container">
             <div class="cta-content">
                 <h2>Ready to Transform Your Club?</h2>
@@ -192,7 +205,7 @@ <h2>Ready to Transform Your Club?</h2>
     </section>
 
     <!-- Footer -->
-    <footer id="contact" class="footer">
+    <footer id="contact" class="footer" data-aos="fade-up">
         <div class="container">
             <div class="footer-content">
                 <div class="footer-section">
@@ -244,6 +257,14 @@ <h3>Contact</h3>
         </div>
     </footer>
 
+    <!-- Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+    <script>
+      AOS.init({
+        duration: 900,
+        once: true,
+      });
+    </script>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
index 840849a..66d56fb 100644
--- a/script.js
+++ b/script.js
@@ -37,15 +37,14 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 // Header background on scroll
 window.addEventListener('scroll', function() {
     const header = document.querySelector('.header');
-    if (window.scrollY > 100) {
-        header.style.background = 'rgba(255, 255, 255, 0.98)';
-        header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+    if (window.scrollY > 50) {
+        header.classList.add('scrolled');
     } else {
-        header.style.background = 'rgba(255, 255, 255, 0.95)';
-        header.style.boxShadow = 'none';
+        header.classList.remove('scrolled');
     }
 });
 
+
 // Animate elements on scroll
 const observerOptions = {
     threshold: 0.1,
@@ -63,14 +62,17 @@ const observer = new IntersectionObserver(function(entries) {
 
 // Observe all cards and sections for animation
 document.addEventListener('DOMContentLoaded', function() {
-    const animatedElements = document.querySelectorAll('.feature-card, .hero-card, .tech-category');
+    const animatedElements = document.querySelectorAll('.feature-card, .hero-card, .tech-category, .tech-item');
+
     
-    animatedElements.forEach(el => {
-        el.style.opacity = '0';
-        el.style.transform = 'translateY(30px)';
-        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
-        observer.observe(el);
-    });
+    animatedElements.forEach((el, index) => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(30px)';
+    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+    el.style.transitionDelay = `${index * 0.1}s`;  // Staggered delay
+    observer.observe(el);
+});
+
 });
 
 // Add loading animation
@@ -128,6 +130,49 @@ document.querySelectorAll('.btn').forEach(button => {
     });
 });
 
+document.addEventListener('DOMContentLoaded', function () {
+  const toggle = document.getElementById('nav-toggle');
+  const menu = document.querySelector('.nav-menu');
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  const darkIcon = darkModeToggle.querySelector('i');
+
+  // Navbar toggle
+  toggle.addEventListener('click', () => {
+    toggle.classList.toggle('active');
+    menu.classList.toggle('active');
+  });
+
+  // Dark Mode Toggle
+  darkModeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    // Icon Switch
+    if(document.body.classList.contains('dark-mode')) {
+      darkIcon.classList.remove('fa-moon');
+      darkIcon.classList.add('fa-sun');
+    } else {
+      darkIcon.classList.remove('fa-sun');
+      darkIcon.classList.add('fa-moon');
+    }
+  });
+});
+
+window.addEventListener('DOMContentLoaded', () => {
+ document.body.classList.add('loaded');
+});
+
+
+const navToggle = document.getElementById('nav-toggle');
+const navMenu = document.querySelector('.nav-menu');
+
+navToggle.addEventListener('click', () => {
+    navMenu.classList.toggle('nav-menu-active');
+});
+
+
+
+
+
+
 // Add CSS for ripple effect
 const style = document.createElement('style');
 style.textContent = `
diff --git a/styles.css b/styles.css
index 24fae66..b0e9c54 100644
--- a/styles.css
+++ b/styles.css
@@ -1,534 +1,592 @@
-/* Reset and Base Styles */
+/* Reset & Base Styles */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
-
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: #333;
-    overflow-x: hidden;
+  font-family: 'Inter', 'JetBrains Mono', 'Segoe UI', Arial, sans-serif;
+  color: #18181b;
+  line-height: 1.7;
+  overflow-x: hidden;
+  opacity: 0;
+  transition: opacity 0.5s;
+  /* Subtle background gradient with depth */
+  background:
+    repeating-linear-gradient(135deg, #ede9fe 0px, #c7d2fe 90px, transparent 120px),
+    linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
+}
+
+body.loaded {
+  opacity: 1;
 }
 
+/* Container */
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
+  max-width: 1160px;
+  margin: 0 auto;
+  padding: 0 1rem;
 }
 
-/* Header Styles */
+/* HEADER */
 .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.74);
+  backdrop-filter: blur(32px);
+  border-bottom: 1.7px solid rgba(99, 102, 241, 0.11);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.07);
+  z-index: 1000;
+  transition: background 0.3s, box-shadow 0.3s;
 }
 
 .nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 74px;
+  padding: 0 2rem;
 }
 
+/* Brand */
 .nav-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #2563eb;
+  font-size: 2rem;
+  font-weight: 800;
+  color: #7c3aed;
+  text-decoration: none;
+  letter-spacing: -1px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
 }
-
 .nav-brand i {
-    font-size: 1.8rem;
+  font-size: 2.3rem;
+  color: #4f46e5;
 }
 
-.nav-menu {
-    display: flex;
-    list-style: none;
-    gap: 2rem;
-}
-
-.nav-link {
-    text-decoration: none;
-    color: #333;
-    font-weight: 500;
-    transition: color 0.3s ease;
+/* Decorative pseudo for brand */
+.nav-brand::before {
+  content: "";
+  position: absolute;
+  left: -15px;
+  top: 13px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #c7d2fe60 53%, transparent 100%);
+  z-index: -1;
 }
 
-.nav-link:hover {
-    color: #2563eb;
+/* Navigation Links */
+.nav-menu {
+  display: flex;
+  gap: 2.3rem;
+  align-items: center;
 }
 
+.nav-link {
+  text-decoration: none;
+  color: #312e81;
+  font-weight: 600;
+  font-size: 1.1rem;
+  letter-spacing: -0.02em;
+  position: relative;
+  padding: 0.25rem 0.5rem 0.35rem;
+  border-radius: 8px;
+  transition: background 0.15s, color 0.2s;
+}
+.nav-link::after {
+  content: '';
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  bottom: 0.18rem;
+  height: 2px;
+  background: linear-gradient(90deg, #818cf8 30%, #7c3aed 80%);
+  border-radius: 1px;
+  width: 0%;
+  transition: width 0.3s cubic-bezier(.77, 0, .175, 1);
+  z-index: 1;
+}
+.nav-link:hover,
+.nav-link:focus {
+  color: #7c3aed;
+  background: rgba(99, 102, 241, 0.06);
+}
+.nav-link:hover::after,
+.nav-link:focus::after {
+  width: 70%;
+}
+
+/* Actions (Profile + Toggle) */
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+.profile-icon i {
+  font-size: 1.7rem;
+  color: #312e81;
+  cursor: pointer;
+  background: rgba(127, 123, 249, 0.08);
+  padding: 0.45rem;
+  border-radius: 50%;
+  transition: background 0.2s, transform 0.2s;
+}
+.profile-icon i:hover {
+  background: rgba(127, 123, 249, 0.16);
+  transform: scale(1.1);
+}
+
+/* Hamburger Toggle (Hidden by default) */
 .nav-toggle {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-    gap: 4px;
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  cursor: pointer;
 }
-
 .nav-toggle span {
-    width: 25px;
-    height: 3px;
-    background: #333;
-    border-radius: 3px;
-    transition: all 0.3s ease;
+  width: 25px;
+  height: 3px;
+  background-color: #312e81;
 }
 
-/* Hero Section */
-.hero {
-    padding: 120px 0 80px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    min-height: 100vh;
+/* Responsive: Show Toggle in Mobile */
+@media (max-width: 768px) {
+  .nav-menu {
+    display: none;
+  }
+  .nav-toggle {
     display: flex;
-    align-items: center;
+  }
 }
 
-.hero .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
+/* HERO */
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 170px 0 100px;
+  background: linear-gradient(135deg, #e0e7ff 70%, #c4b5fd 100%);
+  text-align: center;
 }
-
 .hero-title {
-    font-size: 3.5rem;
-    font-weight: 700;
-    line-height: 1.2;
-    margin-bottom: 1.5rem;
+  font-size: 3.1rem;
+  font-weight: 900;
+  color: #3730a3;
+  margin-bottom: 1.2rem;
+  letter-spacing: -1px;
+  text-shadow: 1px 4px 18px #e9d5ff21;
+  font-family: 'JetBrains Mono', 'Inter', 'Segoe UI', Arial, sans-serif;
 }
-
 .highlight {
-    background: linear-gradient(45deg, #ffd700, #ffed4e);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+  color: #7c3aed;
+  background: linear-gradient(90deg, #818cf8 10%, #7c3aed 90%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-
 .hero-description {
-    font-size: 1.25rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-    line-height: 1.7;
+  font-size: 1.23rem;
+  color: #6366f1e9;
+  margin-bottom: 2.2rem;
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
 }
-
 .hero-buttons {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  gap: 1.1rem;
+  flex-wrap: wrap;
 }
 
+/* BUTTONS */
 .btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.875rem 2rem;
-    border-radius: 50px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    border: 2px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.3s ease-in-out, filter 0.22s;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 1rem;
+  box-shadow: 0 1.5px 8px #7c3aed13;
 }
 
 .btn-primary {
-    background: #2563eb;
-    color: white;
+  background: linear-gradient(90deg, #00c6a3, #00b0f0);
+  color: white;
+  border: none;
+  box-shadow: 0 1.5px 8px #7c3aed13;
 }
-
 .btn-primary:hover {
-    background: #1d4ed8;
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
-}
-
-.btn-secondary {
-    background: transparent;
-    color: white;
-    border-color: rgba(255, 255, 255, 0.3);
-}
-
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.6);
+  background: linear-gradient(90deg, #00b0f0, #00c6a3);
+  filter: brightness(1.09);
+  transform: translateY(-8px) scale(1.04);
+  box-shadow:
+    0 0 12px rgba(124, 58, 237, 0.45),
+    0 0 24px rgba(124, 58, 237, 0.25),
+    0 0 36px rgba(124, 58, 237, 0.15);
 }
 
 .btn-outline {
-    background: transparent;
-    color: #2563eb;
-    border-color: #2563eb;
+  border: 2px solid #7c3aed;
+  color: #7c3aed;
+  background: rgba(124, 58, 237, 0.03);
 }
 
 .btn-outline:hover {
-    background: #2563eb;
-    color: white;
+  background: rgba(124, 58, 237, 0.10);
+  color: #fff;
+  border-color: #7c3aed;
+  filter: brightness(1.08);
+  transform: translateY(-8px) scale(1.04);
+  box-shadow: 0 0 18px rgba(124, 58, 237, 0.13);
 }
 
+/* HERO CARDS - Glassmorphism Enhanced */
 .hero-image {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 3.5rem;
+  flex-wrap: wrap;
 }
-
 .hero-card {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    padding: 2rem;
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transition: transform 0.3s ease;
+  background: rgba(255,255,255,0.36);
+  backdrop-filter: blur(23px) saturate(132%);
+  border: 1.5px solid rgba(99,102,241,0.11);
+  border-radius: 22px;
+  padding: 1.8rem 1.2rem;
+  width: 270px;
+  text-align: center;
+  transition: transform .27s, box-shadow .24s, background .25s, filter .22s;
+  box-shadow: 0 10px 32px rgba(124,58,237,0.10), 0 1.5px 5px rgba(0,0,0,0.02);
+  animation: floatCard 5s ease-in-out infinite;
 }
-
-.hero-card:hover {
-    transform: translateY(-5px);
+.hero-card i {
+  font-size: 2.4rem;
+  color: #7c3aed;
+  margin-bottom: 1.1rem;
+  filter: drop-shadow(0 2px 8px #a5b4fc55);
 }
 
-.hero-card i {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    color: #ffd700;
+/* Floating animation card (glass effect) */
+@keyframes floatCard {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-8px);}
+  100% { transform: translateY(0px);}
 }
 
-.hero-card h3 {
-    font-size: 1.25rem;
-    margin-bottom: 0.5rem;
+/* Universal hover-motion for cards + buttons */
+.hero-card:hover,
+.feature-card:hover,
+.tech-category:hover,
+.btn:hover {
+  filter: brightness(1.05) saturate(108%);
+  transform: translateY(-8px) scale(1.03);
+  box-shadow: 0 10px 30px 0 rgba(99,102,241, 0.18);
 }
 
-.hero-card p {
-    opacity: 0.8;
-    font-size: 0.95rem;
+/* Waves Separator */
+.section-wave {
+  height: 60px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1460 60"><path fill="%23c7d2fe" fill-opacity="1" d="M0,32 L730,60 L1460,32 L1460,0 L0,0 Z"></path></svg>') no-repeat center;
+  background-size: cover;
+  margin-bottom: -1px;
+  margin-top: -1px;
 }
 
-/* Features Section */
+.features,
+.tech-stack { position: relative; z-index: 1; }
+
+/* FEATURES SECTION */
 .features {
-    padding: 100px 0;
-    background: #f8fafc;
+  padding: 100px 0 92px;
+  background: #f5f3ff;
 }
-
 .section-header {
-    text-align: center;
-    margin-bottom: 4rem;
+  text-align: center;
+  margin-bottom: 3.3rem;
 }
-
 .section-header h2 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: #1e293b;
+  font-size: 2.2rem;
+  font-weight: 800;
+  color: #312e81;
+  position: relative;
+}
+
+/* Decorative pseudo underline for section titles */
+.section-header h2::after {
+  content: "";
+  display: block;
+  margin: 14px auto 0 auto;
+  width: 38px; height: 4px;
+  border-radius: 2px;
+  background: linear-gradient(90deg,#a5b4fc80 13%,#7c3aed 88%);
+  opacity: .69;
 }
-
 .section-header p {
-    font-size: 1.125rem;
-    color: #64748b;
-    max-width: 600px;
-    margin: 0 auto;
+  font-size: 1.15rem;
+  color: #6366f1;
 }
-
 .features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-    gap: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(310px,1fr));
+  gap: 2.7rem 2rem;
 }
-
 .feature-card {
-    background: white;
-    padding: 2.5rem;
-    border-radius: 20px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
-    border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.38);
+  backdrop-filter: blur(23px) saturate(132%);
+  border: 1.5px solid rgba(99,102,241,0.11);
+  border-radius: 19px;
+  padding: 2.3rem;
+  box-shadow: 0 10px 32px rgba(124,58,237,0.10), 0 1.5px 5px rgba(0,0,0,0.02);
+  min-height: 250px;
+  transition: transform .25s cubic-bezier(.47,.8,.62,1.52), box-shadow .25s, filter .22s;
 }
-
-.feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-}
-
 .feature-icon {
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    border-radius: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1.5rem;
+  width: 58px;
+  height: 58px;
+  background: linear-gradient(120deg,#a5b4fc 30%, #7c3aed 110%);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  box-shadow: 0 4px 18px #c4b5fd38;
 }
-
 .feature-icon i {
-    font-size: 1.5rem;
-    color: white;
-}
-
-.feature-card h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: #1e293b;
+  color: #fff;
+  font-size: 1.45rem;
 }
 
-.feature-card p {
-    color: #64748b;
-    line-height: 1.7;
-}
-
-/* Tech Stack Section */
+/* TECH STACK */
 .tech-stack {
-    padding: 100px 0;
-    background: white;
+  padding: 100px 0 95px;
+  background: linear-gradient(135deg, #ede9fe 0%, #a5b4fc 100%);
 }
-
 .tech-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 2.4rem;
 }
-
 .tech-category {
-    text-align: center;
-    padding: 2rem;
-    border-radius: 15px;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+  background: rgba(255,255,255,0.36);
+  backdrop-filter: blur(23px) saturate(132%);
+  border-radius: 17px;
+  padding: 2.1rem 1.2rem 1.2rem 1.2rem;
+  text-align: center;
+  box-shadow: 0 10px 32px rgba(124,58,237,0.10), 0 1.5px 5px rgba(0,0,0,0.02);
+  border: 1.5px solid rgba(99,102,241,0.11);
+  transition: transform .25s, box-shadow .23s, filter .19s;
+  animation: none;
 }
-
 .tech-category h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-    color: #1e293b;
+  font-size: 1.18rem;
+  font-weight: 700;
+  margin-bottom: 1.1rem;
+  color: #3730a3;
+  letter-spacing: 0;
 }
-
-.tech-items {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
 .tech-item {
-    background: white;
-    padding: 0.75rem 1rem;
-    border-radius: 10px;
-    color: #64748b;
-    font-weight: 500;
-    border: 1px solid #e2e8f0;
-    transition: all 0.3s ease;
+  background: white;
+  padding: 0.48rem 1.1rem;
+  border-radius: 10px;
+  margin-bottom: 0.6rem;
+  font-size: 1.02rem;
+  font-weight: 600;
+  color: #6366f1;
+  transition: background 0.22s, color 0.2s;
+  display: inline-block;
+  border: 1.3px solid #ede9fe;
+}
+.tech-item:hover, .tech-item:focus {
+  background: linear-gradient(90deg,#7c3aed 30%,#818cf8 100%);
+  color: #fff;
+  border-color: #a5b4fc;
+}
+.tech-category:hover {
+  animation: floatCard 3s ease-in-out infinite;
 }
 
-.tech-item:hover {
-    background: #2563eb;
-    color: white;
-    transform: translateY(-2px);
+.btn-secondary:hover {
+  box-shadow:
+    0 0 10px rgba(99, 102, 241, 0.35),
+    0 0 20px rgba(99, 102, 241, 0.20);
 }
 
-/* CTA Section */
+/* CTA SECTION */
 .cta {
-    padding: 100px 0;
-    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
-    color: white;
-    text-align: center;
-}
-
-.cta-content h2 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
+  padding: 110px 0 110px;
+  background: radial-gradient(circle at 60% 10%, #c7d2fe 40%, #f3e8ff 100%);
+  border-radius: 32px;
+  margin: 90px 0 70px 0;
+  text-align: center;
+  position: relative;
+  box-shadow: 0 15px 32px 0 rgba(124,58,237, 0.07);
+  overflow: hidden;
+}
+.cta:before {
+  content: '';
+  position: absolute;
+  top:0; left:0;
+  width:100%; height:100%;
+  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><ellipse fill="%237c3aed11" cx="60%" cy="0%" rx="46%" ry="45%"/></svg>');
+  z-index: 0;
+}
+.cta h2 {
+  font-size: 2.3rem;
+  font-weight: 800;
+  margin-bottom: 1.17rem;
+  position: relative;
+  z-index: 2;
+  color: #3730a3;
+}
+.cta p {
+  font-size: 1.16rem;
+  color: #6366f1;
+  margin-bottom: 2.1rem;
+  max-width: 650px;
+  margin-left:auto;
+  margin-right:auto;
+  z-index: 2;
+  position: relative;
 }
-
-.cta-content p {
-    font-size: 1.125rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 .cta-buttons {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
+  display: flex;
+  justify-content: center;
+  gap: 1.2rem;
+  flex-wrap: wrap;
+  z-index: 2;
+  position: relative;
 }
 
-/* Footer */
+/* FOOTER */
 .footer {
-    background: #0f172a;
-    color: white;
-    padding: 60px 0 20px;
+  background: linear-gradient(105deg,#312e81 40%,#4f46e5 100%);
+  color: #fff;
+  padding: 95px 0 40px;
+  border-top-left-radius: 28px;
+  border-top-right-radius: 28px;
+  box-shadow: 0 -8px 36px 0 #818cf818;
 }
-
 .footer-content {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-
-.footer-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: #2563eb;
-}
-
-.footer-brand i {
-    font-size: 1.8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 2.3rem 2rem;
+  margin-bottom: 2.5rem;
 }
-
-.footer-section p {
-    margin-bottom: 1.5rem;
-    opacity: 0.8;
-    line-height: 1.7;
-}
-
 .footer-section h3 {
-    font-size: 1.125rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: #f1f5f9;
+  font-size: 1.17rem;
+  font-weight: 700;
+  margin-bottom: 1.1rem;
+  letter-spacing: -.015em;
 }
-
 .footer-section ul {
-    list-style: none;
+  list-style: none;
 }
-
 .footer-section ul li {
-    margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
-
 .footer-section ul li a {
-    color: #94a3b8;
-    text-decoration: none;
-    transition: color 0.3s ease;
+  color: #c7d2fe;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
 }
-
-.footer-section ul li a:hover {
-    color: #2563eb;
+.footer-section ul li a:hover,
+.footer-section ul li a:focus {
+  color: #fff;
+  text-decoration: underline;
 }
-
 .social-links {
-    display: flex;
-    gap: 1rem;
+  display: flex;
+  gap: 1.2rem;
 }
-
 .social-links a {
-    width: 40px;
-    height: 40px;
-    background: #1e293b;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #94a3b8;
-    text-decoration: none;
-    transition: all 0.3s ease;
-}
-
-.social-links a:hover {
-    background: #2563eb;
-    color: white;
-    transform: translateY(-2px);
+  width: 42px;
+  height: 42px;
+  background: linear-gradient(135deg,#a5b4fc22 40%, #7c3aed19 100%);
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.3rem;
+  transition: background 0.20s, color 0.2s;
+}
+.social-links a:hover,
+.social-links a:focus {
+  background: linear-gradient(135deg,#7c3aed 30%, #a5b4fc 120%);
+  color: #fff;
 }
-
 .footer-bottom {
-    text-align: center;
-    padding-top: 2rem;
-    border-top: 1px solid #334155;
-    color: #94a3b8;
+  text-align: center;
+  border-top: 1.4px solid rgba(232,232,255,0.13);
+  padding-top: 2.1rem;
+  font-size: 1rem;
+  color: #e0e7ff;
+  opacity: .7;
+}
+
+/* RESPONSIVE DESIGN */
+@media (max-width: 1024px) {
+  .hero-title { font-size: 2.6rem; }
+  .features, .tech-stack, .cta, .footer { padding-left: 10px; padding-right: 10px; }
+}
+@media (max-width: 900px) {
+  .container { max-width: 97vw; }
+  .hero { padding: 110px 0 55px; }
+  .hero-title { font-size: 2.07rem; }
+  .features-grid, .tech-grid, .footer-content {
+    grid-template-columns: 1fr;
+  }
 }
-
-/* Responsive Design */
 @media (max-width: 768px) {
-    .nav-menu {
-        display: none;
-    }
-    
-    .nav-toggle {
-        display: flex;
-    }
-    
-    .hero .container {
-        grid-template-columns: 1fr;
-        text-align: center;
-        gap: 2rem;
-    }
-    
-    .hero-title {
-        font-size: 2.5rem;
-    }
-    
-    .hero-buttons {
-        justify-content: center;
-    }
-    
-    .features-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .tech-grid {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    }
-    
-    .section-header h2 {
-        font-size: 2rem;
-    }
-    
-    .cta-content h2 {
-        font-size: 2rem;
-    }
-    
-    .cta-buttons {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .btn {
-        justify-content: center;
-        min-width: 200px;
-    }
+  .nav-menu {
+    position: absolute;
+    top: 64px;
+    right: 0;
+    width: 100%;
+    background: rgba(255,255,255,0.9);
+    backdrop-filter: blur(15px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.2rem;
+    padding: 1rem 0;
+    transform: translateY(-100%);
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+  }
+  .nav-menu-active {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  .nav-toggle {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    gap: 4px;
+  }
+  .nav-toggle span {
+    width: 24px;
+    height: 3px;
+    background: #312e81;
+    border-radius: 3px;
+  }
 }
-
 @media (max-width: 480px) {
-    .nav {
-        padding: 1rem;
-    }
-    
-    .hero {
-        padding: 100px 0 60px;
-    }
-    
-    .hero-title {
-        font-size: 2rem;
-    }
-    
-    .hero-description {
-        font-size: 1rem;
-    }
-    
-    .feature-card {
-        padding: 1.5rem;
-    }
-    
-    .features,
-    .tech-stack,
-    .cta {
-        padding: 60px 0;
-    }
+  .container { max-width: 99vw; }
+  .hero-card, .feature-card, .tech-category { width: 98%; padding: 1.2rem; }
 }
