diff --git a/css/style.css b/css/style.css
index 377a59f..79aef75 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,16 +15,19 @@ body {
   color: #1e293b;
   line-height: 1.6;
   background-color: #f8fafc;
+  transition: all 0.5s ease;
 }
 
 /* ====================== HEADER & NAVIGATION ====================== */
 
 header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 
+              0 0 40px rgba(102, 126, 234, 0.2);
   position: sticky;
   top: 0;
   z-index: 100;
+  transition: all 0.5s ease;
 }
 
 .navbar {
@@ -152,6 +155,7 @@ header {
 .nav-menu a:hover {
   color: white;
   background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
 }
 
 .nav-menu a:hover::after {
@@ -161,6 +165,7 @@ header {
 .nav-menu a.active {
   color: #fbbf24;
   background: rgba(251, 191, 36, 0.2);
+  box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
 }
 
 .nav-menu a.active::after {
@@ -328,12 +333,14 @@ main {
   gap: 0.5rem;
   justify-content: center;
   align-items: center;
+  color: white;
 }
 
 .hero-title .word {
   display: inline-block;
   animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
   animation-delay: calc(var(--index) * 0.1s);
+  color: white;
 }
 
 @keyframes slideInUp {
@@ -349,7 +356,7 @@ main {
 
 .hero-subtitle {
   font-size: 1.5rem;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba(255, 255, 255, 1);
   max-width: 600px;
   margin: 0 auto 2rem;
   animation: fadeInUp 0.8s ease 0.4s both;
@@ -401,6 +408,28 @@ main {
   background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
   border-radius: 12px;
   border-left: 4px solid #2563eb;
+  border: 2px solid rgba(37, 99, 235, 0.2);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.page-header:hover {
+  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+.page-header:hover::before {
+  opacity: 1;
 }
 
 .page-header h1 {
@@ -422,6 +451,13 @@ main {
   padding: 2rem;
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(37, 99, 235, 0.1);
+}
+
+.content-section:hover {
+  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
 }
 
 .content-section h2 {
@@ -457,12 +493,13 @@ main {
 a {
   color: #2563eb;
   text-decoration: none;
-  transition: color 0.3s ease;
+  transition: color 0.3s ease, text-shadow 0.3s ease;
 }
 
 a:hover {
   color: #1e40af;
   text-decoration: underline;
+  text-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
 }
 
 /* ====================== FEATURE GRID ====================== */
@@ -481,11 +518,30 @@ a:hover {
   border-left: 4px solid #2563eb;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(37, 99, 235, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .feature-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
+  transform: translateY(-8px);
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2), 
+              0 0 30px rgba(37, 99, 235, 0.15);
+  border-color: rgba(37, 99, 235, 0.5);
+}
+
+.feature-card:hover::before {
+  opacity: 1;
 }
 
 .feature-card h3 {
@@ -525,7 +581,7 @@ a:hover {
 
 .kinetic-card {
   position: relative;
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
   padding: 2rem;
   border-radius: 12px;
   border: 2px solid transparent;
@@ -534,6 +590,8 @@ a:hover {
   overflow: hidden;
   animation: slideInCard 0.8s ease both;
   animation-delay: calc(var(--index) * 0.15s);
+  backdrop-filter: blur(10px);
+  background-clip: padding-box;
 }
 
 @keyframes slideInCard {
@@ -549,20 +607,30 @@ a:hover {
 
 .kinetic-card:hover {
   transform: translateY(-12px) scale(1.02);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 
+              0 0 40px rgba(var(--color-r), var(--color-g), var(--color-b), 0.2);
   border-color: var(--accent-color);
 }
 
 .kinetic-card:nth-child(1) {
   --accent-color: #00d4ff;
+  --color-r: 0;
+  --color-g: 212;
+  --color-b: 255;
 }
 
 .kinetic-card:nth-child(2) {
   --accent-color: #ff006e;
+  --color-r: 255;
+  --color-g: 0;
+  --color-b: 110;
 }
 
 .kinetic-card:nth-child(3) {
   --accent-color: #ffc300;
+  --color-r: 255;
+  --color-g: 195;
+  --color-b: 0;
 }
 
 .card-icon {
@@ -651,6 +719,27 @@ a:hover {
   transition: all 0.3s ease;
   display: inline-block;
   text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+  pointer-events: none;
+}
+
+.btn:active::after {
+  width: 300px;
+  height: 300px;
 }
 
 .btn-primary {
@@ -661,7 +750,8 @@ a:hover {
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5), 
+              0 0 30px rgba(37, 99, 235, 0.3);
 }
 
 .btn-secondary {
@@ -672,6 +762,7 @@ a:hover {
 
 .btn-secondary:hover {
   background: #f0f9ff;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
 }
 
 .cta-section {
@@ -681,6 +772,10 @@ a:hover {
   padding: 3rem;
   border-radius: 12px;
   margin: 3rem 0;
+  box-shadow: 0 10px 40px rgba(37, 99, 235, 0.2),
+              0 0 40px rgba(37, 99, 235, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.5s ease;
 }
 
 .cta-section h2 {
@@ -698,7 +793,10 @@ a:hover {
   border-radius: 16px;
   padding: 4rem 2rem;
   margin: 4rem 0;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
+              0 0 60px rgba(102, 126, 234, 0.2);
+  border: 2px solid rgba(102, 126, 234, 0.3);
+  transition: all 0.5s ease;
 }
 
 .cta-background {
@@ -798,9 +896,29 @@ a:hover {
   z-index: -1;
 }
 
+.kinetic-btn::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+  pointer-events: none;
+}
+
+.kinetic-btn:active::after {
+  width: 300px;
+  height: 300px;
+}
+
 .kinetic-btn:hover {
   transform: translateY(-4px) scale(1.05);
-  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2), 
+              0 0 40px rgba(0, 212, 255, 0.2);
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.5);
 }
@@ -833,11 +951,30 @@ a:hover {
   border-radius: 10px;
   border: 2px solid #e2e8f0;
   transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.tech-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .tech-card:hover {
   border-color: #2563eb;
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2),
+              0 0 30px rgba(37, 99, 235, 0.1);
+  transform: translateY(-4px);
+}
+
+.tech-card:hover::before {
+  opacity: 1;
 }
 
 .tech-card h3 {
@@ -877,12 +1014,30 @@ a:hover {
   text-align: center;
   border: 2px solid #e2e8f0;
   transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.team-member::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .team-member:hover {
-  transform: translateY(-5px);
+  transform: translateY(-8px);
   border-color: #2563eb;
-  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2),
+              0 0 30px rgba(37, 99, 235, 0.1);
+}
+
+.team-member:hover::before {
+  opacity: 1;
 }
 
 .member-avatar {
@@ -1502,6 +1657,33 @@ footer {
   }
 }
 
+@keyframes glow {
+  0%, 100% { 
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3), 
+                0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+  50% { 
+    box-shadow: 0 0 40px rgba(102, 126, 234, 0.6), 
+                0 10px 40px rgba(0, 0, 0, 0.15);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+@keyframes slideInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
 .content-section {
   animation: fadeIn 0.5s ease-out;
 }
@@ -1550,10 +1732,12 @@ footer {
 body.dark {
   background-color: #1e293b;
   color: #e2e8f0;
+  transition: all 0.5s ease;
 }
 
 body.dark header {
   background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  transition: all 0.5s ease;
 }
 
 body.dark .nav-menu a {
@@ -1856,10 +2040,13 @@ body.dark .scroll-arrow {
 body.dark .kinetic-card {
   background: linear-gradient(135deg, #1a2332 0%, #1e2d3a 100%);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  border-color: rgba(102, 126, 234, 0.2);
 }
 
 body.dark .kinetic-card:hover {
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 
+              0 0 40px rgba(var(--color-r), var(--color-g), var(--color-b), 0.3);
+  border-color: var(--accent-color);
 }
 
 body.dark .kinetic-card h3 {
@@ -1903,11 +2090,30 @@ body.dark .kinetic-btn:hover {
   padding: 2rem;
   border-radius: 10px;
   transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 255, 0.85) 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.exercise-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), transparent);
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .exercise-card:hover {
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 12px 28px rgba(102, 126, 234, 0.2),
+              0 0 30px rgba(102, 126, 234, 0.1);
   border-color: #667eea;
+  transform: translateY(-4px);
+}
+
+.exercise-card:hover::before {
+  opacity: 1;
 }
 
 .exercise-card h2 {
diff --git a/js/script.js b/js/script.js
index 97ec1c3..edf87dd 100644
--- a/js/script.js
+++ b/js/script.js
@@ -221,7 +221,7 @@ if (phoneInput) {
   });
 }
 
-// ====================== INTERSECTION OBSERVER FOR ANIMATIONS ======================
+// ====================== INTERSECTION OBSERVER FOR SMOOTH SCROLL REVEAL ======================
 
 const observerOptions = {
   threshold: 0.1,
@@ -229,21 +229,31 @@ const observerOptions = {
 };
 
 const observer = new IntersectionObserver((entries) => {
-  entries.forEach(entry => {
+  entries.forEach((entry, index) => {
     if (entry.isIntersecting) {
-      entry.target.style.opacity = '1';
-      entry.target.style.transform = 'translateY(0)';
+      setTimeout(() => {
+        entry.target.style.opacity = '1';
+        entry.target.style.transform = 'translateY(0) scale(1)';
+        entry.target.classList.add('revealed');
+      }, index * 50);
     }
   });
 }, observerOptions);
 
-document.querySelectorAll('.content-section').forEach(section => {
+// Observe content sections with staggered animation
+document.querySelectorAll('.content-section, .feature-card, .kinetic-card, .team-member, .tech-card, .exercise-card').forEach((section, index) => {
   section.style.opacity = '0';
-  section.style.transform = 'translateY(20px)';
-  section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+  section.style.transform = 'translateY(20px) scale(0.98)';
+  section.style.transition = 'opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
   observer.observe(section);
 });
 
+// Reveal buttons with glow animation
+document.querySelectorAll('.btn, .kinetic-btn').forEach(btn => {
+  btn.style.transition = 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
+  observer.observe(btn);
+});
+
 // ====================== UTILITY: CONSOLE MESSAGE ======================
 
 console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;');