diff --git a/Frontend/index.html b/Frontend/index.html
index 01f3eb9..00da621 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2,24 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
     <title>Climate Shield | Home</title>
-
     <link rel="stylesheet" href="style.css" />
-
     <link rel="preconnect" href="https://fonts.googleapis.com" />
-
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
     <link rel="icon" type="image/png" href="favicon.png" />
-
     <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
-
     <script src="theme.js"></script>
   </head>
 
@@ -27,51 +19,63 @@
     <div class="background-overlay"></div>
 
     <div class="page-shell">
+      <!-- ====== NAVBAR WITH HAMBURGER ====== -->
       <nav class="navbar">
         <div class="brand-marks">
-        <a class="brand" href="#home">
-          <span class="brand-mark">🌍</span>
-          <span>
-            <strong>Climate Shield</strong>
-            <small>Climate intelligence, instantly</small>
-          </span>
-        </a>
+          <a class="brand" href="#home">
+            <span class="brand-mark">🌍</span>
+            <span>
+              <strong>Climate Shield</strong>
+              <small>Climate intelligence, instantly</small>
+            </span>
+          </a>
         </div>
-        <div class="nav-links">
+
+        <!-- Desktop Navigation Links -->
+        <div class="nav-links" id="navLinks">
           <a href="#features">Features</a>
           <a href="Analysis/analysis.html">Analyze</a>
           <a href="#contact">Contact</a>
-          <a
-            href="https://github.com/thetechguardians/Climate-Shield"
-            target="_blank"
-            >GitHub</a
-          >
+          <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">GitHub</a>
+        </div>
+
+        <!-- Right Side: Theme Toggle + CTA + Hamburger -->
+        <div class="nav-actions">
+          <button id="theme-toggle" class="theme-toggle" aria-label="Toggle light/dark mode">
+            <span id="theme-icon">☀️</span>
+          </button>
+          <a class="nav-cta" href="Analysis/analysis.html">Start Analysis</a>
+          <!-- Hamburger Menu Button -->
+          <button class="hamburger" id="hamburgerBtn" aria-label="Toggle menu" aria-expanded="false">
+            <span></span>
+            <span></span>
+            <span></span>
+          </button>
         </div>
-          <div id="theme-button">
-        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle light/dark mode"><span id="theme-icon">☀️</span></button> </div>
-        <div id="analysis-button">
-        <a class="nav-cta" href="Analysis/analysis.html">Start Analysis</a> </div>
       </nav>
-        
+
+      <!-- Mobile Navigation Overlay -->
+      <div class="mobile-nav-overlay" id="mobileNavOverlay">
+        <a href="#features">Features</a>
+        <a href="Analysis/analysis.html">Analyze</a>
+        <a href="#contact">Contact</a>
+        <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank">GitHub</a>
+      </div>
+
+      <!-- ====== MAIN CONTENT ====== -->
       <main id="home" class="container">
         <section class="hero">
           <div class="hero-copy">
             <span class="eyebrow">Real-time weather risk monitoring</span>
-
             <h1>Predict climate threats before they interrupt your day.</h1>
-
             <p>
               Climate Shield combines live weather signals with fast risk
               scoring to highlight flood and heatwave exposure in seconds.
             </p>
-
             <div class="hero-actions">
-              <a class="primary-action" href="Analysis/analysis.html"
-                >Analyze a location</a
-              >
+              <a class="primary-action" href="Analysis/analysis.html">Analyze a location</a>
               <a class="secondary-action" href="#features">View insights</a>
             </div>
-
             <div class="hero-stats">
               <div>
                 <strong>24/7</strong>
@@ -105,28 +109,18 @@ <h1>Predict climate threats before they interrupt your day.</h1>
                     </g>
                   </svg>
                 </div>
-                <div class="cs-hero-widget-temp">
-                  
-                  <div class="cs-hero-widget-temp-meta">
-                    
-                  </div>
-                </div>
               </div>
 
               <div class="cs-hero-widget-card cs-hero-widget-card--mid">
                 <div class="cs-hero-widget-widget-title">Flood Risk Gauge</div>
                 <div class="cs-hero-widget-gauge" aria-hidden="true">
                   <div class="cs-hero-widget-gauge-track"></div>
-                  <div class="cs-hero-widget-gauge-fill" style="--fill:12%"></div>
-                </div>
-                <div class="cs-hero-widget-gauge-copy">
-                  
+                  <div class="cs-hero-widget-gauge-fill" style="--fill: 12%"></div>
                 </div>
               </div>
 
               <div class="cs-hero-widget-card cs-hero-widget-card--bottom">
                 <div class="cs-hero-widget-widget-title">REGIONAL EXPOSURE ALERT</div>
-                
                 <div class="cs-hero-widget-alert-icon" aria-hidden="true">
                   <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                     <polygon points="24 4 44 40 4 40" fill="rgba(249, 115, 22, 0.18)" stroke="#f59e0b" stroke-width="2" />
@@ -220,12 +214,11 @@ <h3>Actionable alerts</h3>
             </article>
           </div>
         </section>
+
         <section class="capabilities-section">
           <div class="section-heading">
             <span>Platform Capabilities</span>
-            <h2>
-              Powerful climate intelligence for proactive decision-making.
-            </h2>
+            <h2>Powerful climate intelligence for proactive decision-making.</h2>
           </div>
 
           <div class="capability-grid">
@@ -277,134 +270,82 @@ <h3>Environmental Intelligence</h3>
         </section>
       </main>
 
-      <footer id="contact" style="
-        display: block !important;
-        background: #1a2232 !important;
-        padding: 0 !important;
-        margin-top: 30px;
-        border-radius: 22px;
-        border: 1px solid rgba(255,255,255,0.07);
-      ">
-
-        <!-- main footer content -->
-        <div style="padding: 44px 48px 36px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; align-items: start;">
-
-          <!-- col 1: brand -->
-          <div>
-            <div style="display:flex; align-items:center; gap:10px; margin-bottom:16px;">
-              <span style="font-size:28px; line-height:1;">🌍</span>
+      <!-- ====== FOOTER ====== -->
+      <footer id="contact">
+        <div class="footer-grid">
+          <!-- Brand Column -->
+          <div class="footer-brand">
+            <div class="footer-brand-header">
+              <span class="footer-brand-icon">🌍</span>
               <div>
-                <div style="font-size:1.2rem; font-weight:800; color:#ffffff; letter-spacing:-0.01em; line-height:1;">Climate Shield</div>
-                <div style="font-size:0.72rem; color:#64748b; letter-spacing:0.04em; margin-top:2px; text-transform:uppercase;">Climate Intelligence</div>
+                <div class="footer-brand-name">Climate Shield</div>
+                <div class="footer-brand-tagline">Climate Intelligence</div>
               </div>
             </div>
-            <p style="font-size:0.8rem; color:#94a3b8; line-height:1.7; margin-bottom:20px; max-width:200px;">
+            <p class="footer-description">
               Real-time weather risk monitoring for flood and heatwave awareness.
             </p>
-            <!-- phone-style contact -->
-            <div style="font-size:0.95rem; font-weight:700; color:#38bdf8; margin-bottom:14px; letter-spacing:0.01em;">
+            <div class="footer-mission">
               Protecting communities with fast, simple climate risk visibility.
             </div>
-            <!-- social icons row -->
-            <div style="display:flex; gap:7px;">
-              <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#38bdf8;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0ea5e9'" onmouseout="this.style.background='#38bdf8'">
+            <div class="footer-social">
+              <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener" class="social-link github">
                 <svg width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.2-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.7 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.2.9 2.3v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
               </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#0f766e;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#0d9488'" onmouseout="this.style.background='#0f766e'">
+              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener" class="social-link issues">
                 <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
               </a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="width:30px;height:30px;border-radius:4px;background:#334155;display:flex;align-items:center;justify-content:center;text-decoration:none;"
-                 onmouseover="this.style.background='#475569'" onmouseout="this.style.background='#334155'">
+              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener" class="social-link discussions">
                 <svg width="14" height="14" fill="none" stroke="white" stroke-width="2.2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
               </a>
             </div>
           </div>
 
-          <!-- col 2: navigate -->
+          <!-- Navigate Column -->
           <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Navigate</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-              <a href="#home"                  style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;transition:color 0.2s;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Home</a>
-              <a href="#features"              style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Features</a>
-              <a href="Analysis/analysis.html" style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Analysis</a>
-              <a href="#chatbot-panel"         style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Climate Bot</a>
+            <p class="footer-col-title">Navigate</p>
+            <div class="footer-col-links">
+              <a href="#home">Home</a>
+              <a href="#features">Features</a>
+              <a href="Analysis/analysis.html">Analysis</a>
+              <a href="#chatbot-panel">Climate Bot</a>
             </div>
           </div>
 
-          <!-- col 3: resources -->
+          <!-- Resources Column -->
           <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Resources</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-
-              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Report an Issue</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Discussions</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributing</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/README.md" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Documentation</a>
+            <p class="footer-col-title">Resources</p>
+            <div class="footer-col-links">
+              <a href="https://github.com/thetechguardians/Climate-Shield/issues" target="_blank" rel="noopener">Report an Issue</a>
+              <a href="https://github.com/thetechguardians/Climate-Shield/discussions" target="_blank" rel="noopener">Discussions</a>
+              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing</a>
+              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/README.md" target="_blank" rel="noopener">Documentation</a>
             </div>
           </div>
 
-          
-
-          <!-- col 4: Community -->
+          <!-- Community Column -->
           <div>
-            <p style="font-size:0.78rem;font-weight:700;color:#ffffff;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #38bdf8;display:inline-block;">Community</p>
-            <div style="display:flex;flex-direction:column;gap:9px;">
-             
-              <a href="https://github.com/thetechguardians/Climate-Shield/graphs/contributors" style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>Contributors</a>
-                            <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>GitHub Repository</a>
-              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/LICENSE" target="_blank" rel="noopener"
-                 style="font-size:0.8rem;color:#94a3b8;text-decoration:none;display:flex;align-items:center;gap:7px;" onmouseover="this.style.color='#38bdf8'" onmouseout="this.style.color='#94a3b8'"><span style="width:5px;height:1.5px;background:#38bdf8;display:inline-block;flex-shrink:0;"></span>MIT License</a>
+            <p class="footer-col-title">Community</p>
+            <div class="footer-col-links">
+              <a href="https://github.com/thetechguardians/Climate-Shield/graphs/contributors" target="_blank" rel="noopener">Contributors</a>
+              <a href="https://github.com/thetechguardians/Climate-Shield" target="_blank" rel="noopener">GitHub Repository</a>
+              <a href="https://github.com/thetechguardians/Climate-Shield/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a>
             </div>
           </div>
+        </div>
 
-        </div><!-- /main grid -->
-
-        <!-- copyright bar — darker strip like IQMS -->
-        <div style="background:#111827; border-top:1px solid rgba(255,255,255,0.06); padding:14px 48px; display:flex; align-items:center; justify-content:center; border-radius:0 0 22px 22px;">
-          <p style="font-size:0.75rem; color:#475569; margin:0; text-align:center;">
-            &copy; 2025 <strong style="color:#64748b; font-weight:600;">Climate Shield</strong>
+        <!-- Copyright Bar -->
+        <div class="footer-copyright">
+          <p>
+            &copy; 2025 <strong>Climate Shield</strong>
             &nbsp;&middot;&nbsp; MIT License
             &nbsp;&middot;&nbsp; SSoC 2026
             &nbsp;&middot;&nbsp; Made with &#9829; by The Tech Guardians
           </p>
         </div>
-
-        <!-- responsive styles -->
-        <style>
-          @media (max-width: 1024px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr 1fr !important;
-            }
-          }
-          @media (max-width: 700px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr 1fr !important;
-              padding: 32px 24px 28px !important;
-            }
-            #contact > div:last-of-type {
-              padding-left: 24px !important;
-              padding-right: 24px !important;
-            }
-          }
-          @media (max-width: 480px) {
-            #contact > div:first-of-type {
-              grid-template-columns: 1fr !important;
-            }
-          }
-        </style>
-
       </footer>
 
+      <!-- ====== CHATBOT ====== -->
       <button
         id="chatbot-toggle"
         class="chatbot-toggle"
@@ -425,9 +366,7 @@ <h3>Environmental Intelligence</h3>
         <div class="chatbot-header">
           <div>
             <strong>ClimateBot Assistant</strong>
-            <small
-              >Ask about floods, heatwaves, cyclones, and climate change.</small
-            >
+            <small>Ask about floods, heatwaves, cyclones, and climate change.</small>
           </div>
           <button
             id="chatbot-close"
@@ -458,9 +397,10 @@ <h3>Environmental Intelligence</h3>
         <div id="chatbot-status" class="chatbot-status hidden"></div>
       </section>
     </div>
+
     <button id="scrollTopBtn" class="scroll-top-btn" title="Back to Top">↑</button>
 
     <script src="script.js"></script>
     <script src="chatbot.js"></script>
-</body>
-</html>
+  </body>
+</html>
\ No newline at end of file
diff --git a/Frontend/script.js b/Frontend/script.js
index 1c044ca..0d79705 100644
--- a/Frontend/script.js
+++ b/Frontend/script.js
@@ -263,3 +263,61 @@ if (scrollTopBtn) {
     });
   });
 }
+
+
+// ===== HAMBURGER MENU TOGGLE =====
+const hamburger = document.getElementById('hamburgerBtn');
+const mobileOverlay = document.getElementById('mobileNavOverlay');
+
+if (hamburger && mobileOverlay) {
+  hamburger.addEventListener('click', function(e) {
+    e.stopPropagation();
+    const isOpen = mobileOverlay.classList.toggle('open');
+    hamburger.classList.toggle('active');
+    hamburger.setAttribute('aria-expanded', isOpen);
+    console.log('Hamburger clicked - isOpen:', isOpen); // Debug log
+  });
+
+  // Close overlay when any link is clicked
+  mobileOverlay.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', function() {
+      mobileOverlay.classList.remove('open');
+      hamburger.classList.remove('active');
+      hamburger.setAttribute('aria-expanded', 'false');
+    });
+  });
+
+  // Close overlay when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!mobileOverlay.contains(e.target) && !hamburger.contains(e.target)) {
+      mobileOverlay.classList.remove('open');
+      hamburger.classList.remove('active');
+      hamburger.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  // Close overlay when window resizes above mobile breakpoint
+  window.addEventListener('resize', function() {
+    if (window.innerWidth > 820) {
+      mobileOverlay.classList.remove('open');
+      hamburger.classList.remove('active');
+      hamburger.setAttribute('aria-expanded', 'false');
+    }
+  });
+}
+
+// ===== SCROLL TO TOP BUTTON =====
+const scrollBtn = document.getElementById('scrollTopBtn');
+if (scrollBtn) {
+  window.addEventListener('scroll', function() {
+    if (window.scrollY > 400) {
+      scrollBtn.classList.add('show');
+    } else {
+      scrollBtn.classList.remove('show');
+    }
+  });
+
+  scrollBtn.addEventListener('click', function() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+}
\ No newline at end of file
diff --git a/Frontend/style.css b/Frontend/style.css
index ddf221e..8f4e14b 100644
--- a/Frontend/style.css
+++ b/Frontend/style.css
@@ -1,3 +1,4 @@
+/* ===== RESET & BASE ===== */
 * {
   margin: 0;
   padding: 0;
@@ -6,18 +7,18 @@
 }
 
 :root {
-  --bg-primary:    #0f1117;
-  --bg-secondary:  #161b27;
-  --bg-card:       #1a1f2e;
-  --text-primary:  #ffffff;
-  --text-muted:    #8892a4;
-  --text-heading:  #e2e8f0;
-  --border-color:  rgba(255, 255, 255, 0.1);
+  --bg-primary: #0f1117;
+  --bg-secondary: #161b27;
+  --bg-card: #1a1f2e;
+  --text-primary: #ffffff;
+  --text-muted: #8892a4;
+  --text-heading: #e2e8f0;
+  --border-color: rgba(255, 255, 255, 0.1);
   --border-strong: rgba(255, 255, 255, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.4);
-  --input-bg:      #1a1f2e;
-  --btn-bg:        rgba(255, 255, 255, 0.07);
-  --btn-hover:     rgba(255, 255, 255, 0.12);
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --input-bg: #1a1f2e;
+  --btn-bg: rgba(255, 255, 255, 0.07);
+  --btn-hover: rgba(255, 255, 255, 0.12);
   --bg-0: #020617;
   --bg-1: #0f172a;
   --bg-2: #1e293b;
@@ -35,45 +36,27 @@
 }
 
 [data-theme="light"] {
-  --bg-primary:    #f4f6fa;
-  --bg-secondary:  #eaecf2;
-  --bg-card:       #ffffff;
-  --text-primary:  #0f1117;
-  --text-muted:    #5a6475;
-  --text-heading:  #1a202c;
-  --border-color:  rgba(0, 0, 0, 0.1);
+  --bg-primary: #f4f6fa;
+  --bg-secondary: #eaecf2;
+  --bg-card: #ffffff;
+  --text-primary: #0f1117;
+  --text-muted: #5a6475;
+  --text-heading: #1a202c;
+  --border-color: rgba(0, 0, 0, 0.1);
   --border-strong: rgba(0, 0, 0, 0.2);
-  --shadow-color:  rgba(0, 0, 0, 0.1);
-  --input-bg:      #ffffff;
-  --btn-bg:        rgba(0, 0, 0, 0.04);
-  --btn-hover:     rgba(0, 0, 0, 0.08);
-  --bg-0:          #f8fafc;
-  --bg-1:          #edf2f7;
-  --bg-2:          #dbeafe;
-  --panel:         rgba(255, 255, 255, 0.85);
-  --panel-strong:  rgba(255, 255, 255, 0.95);
-  --text:          #0f172a;
-  --muted:         #334155;
-  --muted-2:       #64748b;
-  --shadow:        0 10px 30px rgba(0, 0, 0, 0.08);
-}
-
-.theme-toggle {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-  font-size: 1.2rem;
-  background: var(--panel);
-  color: var(--text);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.theme-toggle:hover {
-  transform: scale(1.05);
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --input-bg: #ffffff;
+  --btn-bg: rgba(0, 0, 0, 0.04);
+  --btn-hover: rgba(0, 0, 0, 0.08);
+  --bg-0: #f8fafc;
+  --bg-1: #edf2f7;
+  --bg-2: #dbeafe;
+  --panel: rgba(255, 255, 255, 0.85);
+  --panel-strong: rgba(255, 255, 255, 0.95);
+  --text: #0f172a;
+  --muted: #334155;
+  --muted-2: #64748b;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 
 html {
@@ -83,17 +66,8 @@ html {
 body {
   min-height: 100vh;
   color: var(--text);
-  background:
-    radial-gradient(
-      circle at top left,
-      rgba(56, 189, 248, 0.16),
-      transparent 26%
-    ),
-    radial-gradient(
-      circle at top right,
-      rgba(34, 197, 94, 0.1),
-      transparent 22%
-    ),
+  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 26%),
+    radial-gradient(circle at top right, rgba(34, 197, 94, 0.1), transparent 22%),
     linear-gradient(135deg, var(--bg-0), var(--bg-1), var(--bg-2));
   overflow-x: hidden;
 }
@@ -102,8 +76,7 @@ body::before {
   content: "";
   position: fixed;
   inset: 0;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
   background-size: 64px 64px;
   pointer-events: none;
@@ -113,17 +86,8 @@ body::before {
 .background-overlay {
   position: fixed;
   inset: 0;
-  background:
-    radial-gradient(
-      circle at 20% 20%,
-      rgba(56, 189, 248, 0.14),
-      transparent 32%
-    ),
-    radial-gradient(
-      circle at 80% 10%,
-      rgba(245, 158, 11, 0.1),
-      transparent 28%
-    ),
+  background: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.14), transparent 32%),
+    radial-gradient(circle at 80% 10%, rgba(245, 158, 11, 0.1), transparent 28%),
     radial-gradient(circle at 70% 80%, rgba(34, 197, 94, 0.08), transparent 26%);
   z-index: -1;
 }
@@ -136,24 +100,28 @@ body::before {
   padding: 24px 0 32px;
 }
 
+/* ===== NAVBAR ===== */
 .navbar {
   display: flex;
   align-items: center;
-  position:fixed;
-  z-index: 2;
   justify-content: space-between;
-  gap: 20px;
-  padding: 16px 22px;
-  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 16px;
+  flex-wrap: nowrap;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 22px;
   background: var(--panel-strong);
   backdrop-filter: blur(18px);
   box-shadow: var(--shadow);
-  margin-bottom: 28px;
-   width: calc(100% - 32px);
-  max-width: 1200px;         /* caps it on large screens */
-  margin: 0 auto; 
+  width: calc(100% - 32px);
+  max-width: 1200px;
+  margin: 0 auto;
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  transition: background 0.2s;
 }
 
 body.light-mode .navbar {
@@ -162,401 +130,409 @@ body.light-mode .navbar {
   border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
+.brand-marks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .brand {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 10px;
   text-decoration: none;
   color: var(--text);
-  min-width: 0;
 }
 
 .brand-mark {
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   display: grid;
   place-items: center;
-  border-radius: 16px;
-  background: linear-gradient(
-    135deg,
-    rgba(56, 189, 248, 0.24),
-    rgba(14, 165, 233, 0.1)
-  );
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(14, 165, 233, 0.1));
   border: 1px solid rgba(56, 189, 248, 0.28);
-  font-size: 1.35rem;
+  font-size: 1.2rem;
   flex: 0 0 auto;
 }
 
 .brand strong {
   display: block;
-  font-size: 1rem;
+  font-size: 0.95rem;
   line-height: 1.1;
+  letter-spacing: -0.01em;
 }
 
 .brand small {
   display: block;
   color: var(--muted-2);
-  font-size: 0.82rem;
-  margin-top: 2px;
+  font-size: 0.7rem;
+  margin-top: 1px;
 }
 
+/* Desktop Navigation - Visible on large screens */
 .nav-links {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
+  gap: 16px;
   flex-wrap: nowrap;
 }
 
-.nav-links a,
-.footer-links a {
+.nav-links a {
   color: var(--muted);
   text-decoration: none;
   font-weight: 500;
-  transition:
-    color 0.2s ease,
-    transform 0.2s ease;
+  font-size: 0.9rem;
+  transition: color 0.2s ease, transform 0.2s;
+  white-space: nowrap;
 }
 
-.nav-links a:hover,
-.footer-links a:hover,
-.contact-links a:hover {
+.nav-links a:hover {
   color: white;
   transform: translateY(-1px);
 }
 
-.nav-cta,
-.primary-action,
-.secondary-action {
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 999px;
-  padding: 12px 18px;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease,
-    background 0.2s ease;
-  white-space: nowrap;
+[data-theme="light"] .nav-links a:hover {
+  color: #0369a1;
 }
 
-.nav-cta,
-.primary-action {
-  color: white;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.28);
+/* Right Side Actions */
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
 
-.secondary-action {
+.theme-toggle {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  background: var(--panel);
   color: var(--text);
-  background: var(--btn-bg);
-  border: 1px solid var(--border-strong);
-}
-
-.nav-cta:hover,
-.primary-action:hover,
-.secondary-action:hover {
-  transform: translateY(-2px);
-}
-
-.container {
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  flex-shrink: 0;
 }
 
-.hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 24px;
-  align-items: start;
-  padding: 18px 0 34px;
-  max-width: 920px;
+.theme-toggle:hover {
+  transform: scale(1.05);
 }
 
-.hero-copy {
-  margin-top: 15vh;
-  padding: 24px 8px;
+.nav-cta {
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 8px 16px;
+  color: white;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.28);
+  transition: transform 0.2s, box-shadow 0.2s;
+  white-space: nowrap;
+  font-size: 0.8rem;
+  flex-shrink: 0;
 }
 
-.cs-hero-widget-shell {
-  position: relative;
-  min-height: 420px;
-  width: 100%;
-  max-width: 400px;
+.nav-cta:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 32px rgba(14, 165, 233, 0.4);
 }
 
-.cs-hero-widget-card {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 260px;
-  height: 260px;
-  padding: 24px;
-  border-radius: 24px;
-  background: rgba(15, 23, 42, 0.72);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  color: var(--text);
-  display: grid;
+/* ===== HAMBURGER MENU - HIDDEN ON DESKTOP ===== */
+.hamburger {
+  display: none; /* Hidden by default on desktop */
+  flex-direction: column;
+  gap: 5px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 6px 4px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  transition: background 0.2s;
+  min-width: 36px;
+  min-height: 36px;
   align-items: center;
-  justify-items: center;
-  text-align: center;
+  justify-content: center;
 }
 
-.cs-hero-widget-card--top {
-  top: 30px;
-  right: 16px;
-  z-index: 3;
-  width: 220px;
-  height: 220px;
-  background: rgba(14, 165, 233, 0.16);
+.hamburger:hover {
+  background: rgba(255, 255, 255, 0.08);
 }
 
-.cs-hero-widget-card--mid {
-  top: 130px;
-  left: 14px;
-  right: auto;
-  z-index: 2;
-  width: 220px;
-  height: 220px;
-  background: rgba(16, 185, 129, 0.16);
+.hamburger span {
+  display: block;
+  width: 24px;
+  height: 3px;
+  background: var(--text);
+  border-radius: 4px;
+  transition: all 0.25s ease;
+  transform-origin: center;
 }
 
-.cs-hero-widget-card--bottom {
-  top: 250px;
-  right: 16px;
-  left: auto;
-  z-index: 1;
-  width: 220px;
-  height: 220px;
-  background: rgba(249, 115, 22, 0.16);
+.hamburger.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
 }
 
-.cs-hero-widget-heading,
-.cs-hero-widget-widget-title {
-  font-size: 0.95rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #a5f3fc;
-  margin-bottom: 14px;
+.hamburger.active span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
 }
 
-.cs-hero-widget-temp {
-  display: grid;
-  gap: 18px;
+.hamburger.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(5px, -5px);
 }
 
-.cs-hero-widget-temp-value {
-  font-size: clamp(2.6rem, 4vw, 3.8rem);
-  font-weight: 700;
-  line-height: 0.95;
+/* Mobile Navigation Overlay - Hidden by default */
+.mobile-nav-overlay {
+  display: none;
+  position: fixed;
+  top: 76px;
+  left: 0;
+  width: 100%;
+  background: var(--panel-strong);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-color);
+  padding: 24px 28px 32px;
+  z-index: 998;
+  flex-direction: column;
+  gap: 16px;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
+  border-radius: 0 0 28px 28px;
+  transition: all 0.3s ease;
 }
 
-.cs-hero-widget-temp-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--muted);
-  font-size: 0.96rem;
+.mobile-nav-overlay.open {
+  display: flex !important;
+  animation: slideDown 0.3s ease forwards;
 }
 
-.cs-hero-widget-weather-icon {
-  width: 100%;
-  display: grid;
-  place-items: center;
-  margin-bottom: 12px;
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.cs-hero-widget-weather-icon svg {
-  width: 120px;
-  height: auto;
+.mobile-nav-overlay a {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1.1rem;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border-color);
+  transition: color 0.2s, padding-left 0.2s;
 }
 
-.cs-hero-widget-sun {
-  transform-origin: center;
-  animation: cs-sun-glow 5s ease-in-out infinite;
+.mobile-nav-overlay a:last-child {
+  border-bottom: none;
 }
 
-.cs-hero-widget-cloud {
-  transform-origin: center;
-  animation: cs-cloud-float 6s ease-in-out infinite;
+.mobile-nav-overlay a:hover {
+  color: var(--accent);
+  padding-left: 8px;
 }
 
-.cs-hero-widget-temp-meta svg {
-  width: 24px;
-  height: 24px;
-  color: #facc15;
+[data-theme="light"] .mobile-nav-overlay a:hover {
+  color: #0369a1;
 }
 
-.cs-hero-widget-gauge {
-  position: relative;
-  width: 100%;
-  height: 88px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.05);
-  overflow: hidden;
-}
+/* ===== RESPONSIVE BREAKPOINTS ===== */
+/* On mobile (below 820px): Hide desktop nav, show hamburger */
+@media (max-width: 820px) {
+  .nav-links {
+    display: none !important;
+  }
 
-.cs-hero-widget-gauge-track {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, rgba(34, 197, 94, 0.24), rgba(248, 113, 20, 0.16));
-}
+  .hamburger {
+    display: flex !important; /* Show hamburger on mobile */
+  }
 
-.cs-hero-widget-gauge-fill {
-  position: absolute;
-  inset: 0;
-  width: var(--fill);
-  background: linear-gradient(90deg, #22c55e, #f59e0b);
-  clip-path: inset(0 0 0 0 round 999px);
-  transition: width 0.4s ease;
-  animation: cs-gauge-slide 12s ease-in-out infinite alternate;
-}
+  .navbar {
+    padding: 8px 12px;
+    top: 10px;
+    width: calc(100% - 20px);
+    border-radius: 18px;
+  }
 
-.cs-hero-widget-gauge-copy {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 14px;
-  color: var(--muted);
-  font-size: 0.95rem;
-}
+  .brand strong {
+    font-size: 0.8rem;
+  }
 
-.cs-hero-widget-gauge-copy strong {
-  font-size: 1.1rem;
-  color: #ffffff;
-}
+  .brand small {
+    font-size: 0.6rem;
+  }
 
-.cs-hero-widget-alert-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 14px;
-  margin-bottom: 14px;
-  border-radius: 999px;
-  color: #f97316;
-  background: rgba(249, 115, 22, 0.12);
-  border: 1px solid rgba(249, 115, 22, 0.18);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
+  .brand-mark {
+    width: 32px;
+    height: 32px;
+    font-size: 0.9rem;
+  }
 
-.cs-hero-widget-card--bottom p {
-  margin: 0;
-  color: var(--muted);
-  line-height: 1.8;
-  font-size: 0.96rem;
-}
+  .nav-cta {
+    padding: 6px 12px;
+    font-size: 0.7rem;
+  }
 
-.cs-hero-widget-alert-icon {
-  display: grid;
-  place-items: center;
-  margin-top: 14px;
-  width: 70px;
-  height: 70px;
-  animation: cs-alert-pulse 1.8s ease-in-out infinite;
-}
+  .theme-toggle {
+    width: 32px;
+    height: 32px;
+    font-size: 0.9rem;
+  }
 
-.cs-hero-widget-alert-icon svg {
-  width: 100%;
-  height: auto;
+  .page-shell {
+    padding-top: 74px;
+  }
 }
 
-@keyframes cs-alert-pulse {
-  0%, 100% { transform: scale(1); opacity: 0.92; }
-  50% { transform: scale(1.08); opacity: 1; }
-}
+/* Extra small devices - hamburger stays visible */
+@media (max-width: 480px) {
+  .navbar {
+    padding: 6px 10px;
+    top: 8px;
+    border-radius: 14px;
+    gap: 6px;
+  }
 
-@keyframes cs-wave {
-  0%, 100% { opacity: 0.45; transform: scaleY(1); }
-  50% { opacity: 1; transform: scaleY(1.4); }
-}
+  .brand strong {
+    font-size: 0.7rem;
+  }
 
-@keyframes cs-sun-glow {
-  0%, 100% { transform: scale(1); opacity: 0.85; }
-  50% { transform: scale(1.08); opacity: 1; }
-}
+  .brand small {
+    font-size: 0.5rem;
+  }
 
-@keyframes cs-cloud-float {
-  0%, 100% { transform: translateX(0); }
-  50% { transform: translateX(6px); }
-}
+  .brand-mark {
+    width: 28px;
+    height: 28px;
+    font-size: 0.8rem;
+    border-radius: 10px;
+  }
 
-@keyframes cs-gauge-slide {
-  0% {
-    width: var(--fill);
+  .nav-cta {
+    padding: 4px 8px;
+    font-size: 0.6rem;
+    border-radius: 30px;
   }
-  100% {
-    width: 100%;
+
+  .theme-toggle {
+    width: 28px;
+    height: 28px;
+    font-size: 0.75rem;
   }
-}
 
-.hero-strip {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
-  padding: 10px 0 0;
-  align-items: start;
-  width: 100%;
-}
+  .hamburger {
+    padding: 4px 3px;
+    min-width: 30px;
+    min-height: 30px;
+    gap: 4px;
+  }
 
-.hero-step-card {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  gap: 16px;
-  padding: 22px;
-  border-radius: 22px;
-  background: var(--panel);
-  border: 1px solid var(--border-color);
-  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.16);
-  min-height: 190px;
-}
+  .hamburger span {
+    width: 18px;
+    height: 2.5px;
+  }
 
-@media (min-width: 980px) {
-  .hero {
-    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 460px);
+  .mobile-nav-overlay {
+    top: 58px;
+    padding: 16px 20px 24px;
   }
 
-  .cs-hero-widget {
-    padding: 0;
-    justify-self: end;
-    width: 100%;
+  .mobile-nav-overlay a {
+    font-size: 0.9rem;
+    padding: 8px 0;
   }
 
-  .cs-hero-widget-shell {
-    max-width: 460px;
+  .page-shell {
+    padding-top: 64px;
   }
 }
 
-@media (max-width: 980px) {
-  .cs-hero-widget-shell {
-    min-height: auto;
+/* 320px - smallest screens */
+@media (max-width: 360px) {
+  .navbar {
+    padding: 4px 8px;
+    gap: 4px;
+    border-radius: 12px;
   }
 
-  .cs-hero-widget-card,
-  .cs-hero-widget-card--top,
-  .cs-hero-widget-card--mid,
-  .cs-hero-widget-card--bottom {
-    position: relative;
-    left: auto;
-    right: auto;
-    top: auto;
-    transform: none;
-    width: 100%;
-    max-width: 320px;
-    height: auto;
-    margin: 0 auto 18px;
-    padding: 22px;
-    border-radius: 28px;
+  .brand strong {
+    font-size: 0.6rem;
+  }
+
+  .brand small {
+    display: none;
   }
 
-  .cs-hero-widget-card--mid,
-  .cs-hero-widget-card--bottom {
-    right: auto;
+  .brand-mark {
+    width: 24px;
+    height: 24px;
+    font-size: 0.7rem;
+    border-radius: 8px;
+  }
+
+  .nav-cta {
+    padding: 3px 6px;
+    font-size: 0.5rem;
+  }
+
+  .theme-toggle {
+    width: 24px;
+    height: 24px;
+    font-size: 0.65rem;
+  }
+
+  .hamburger {
+    padding: 3px 2px;
+    min-width: 26px;
+    min-height: 26px;
+    gap: 3px;
+  }
+
+  .hamburger span {
+    width: 16px;
+    height: 2px;
+  }
+
+  .mobile-nav-overlay {
+    top: 50px;
+    padding: 12px 16px 18px;
+  }
+
+  .page-shell {
+    padding-top: 56px;
   }
 }
 
+/* ===== REST OF THE STYLES ===== */
+.container {
+  width: 100%;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+  padding: 18px 0 34px;
+  max-width: 920px;
+}
+
+.hero-copy {
+  margin-top: 15vh;
+  padding: 24px 8px;
+}
+
 .hero-copy h1 {
   font-size: clamp(2.6rem, 5vw, 5rem);
   line-height: 0.98;
@@ -579,6 +555,33 @@ body.light-mode .navbar {
   margin-top: 26px;
 }
 
+.primary-action,
+.secondary-action {
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 12px 18px;
+  transition: transform 0.2s, box-shadow 0.2s;
+  white-space: nowrap;
+}
+
+.primary-action {
+  color: white;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.28);
+}
+
+.secondary-action {
+  color: var(--text);
+  background: var(--btn-bg);
+  border: 1px solid var(--border-strong);
+}
+
+.primary-action:hover,
+.secondary-action:hover {
+  transform: translateY(-2px);
+}
+
 .hero-stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -605,20 +608,150 @@ body.light-mode .navbar {
   font-size: 0.92rem;
 }
 
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #a5f3fc;
+  font-size: 0.82rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 18px;
+}
+
+[data-theme="light"] .eyebrow {
+  color: #0369a1;
+  background: rgba(3, 105, 161, 0.08);
+  border-color: rgba(3, 105, 161, 0.2);
+}
+
+/* Hero Widget */
+.cs-hero-widget-shell {
+  position: relative;
+  min-height: 420px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.cs-hero-widget-card {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 260px;
+  height: 260px;
+  padding: 24px;
+  border-radius: 24px;
+  background: rgba(15, 23, 42, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(12px);
+  color: var(--text);
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+}
+
+.cs-hero-widget-card--top {
+  top: 30px;
+  right: 16px;
+  z-index: 3;
+  width: 220px;
+  height: 220px;
+  background: rgba(14, 165, 233, 0.16);
+}
+
+.cs-hero-widget-card--mid {
+  top: 130px;
+  left: 14px;
+  right: auto;
+  z-index: 2;
+  width: 220px;
+  height: 220px;
+  background: rgba(16, 185, 129, 0.16);
+}
+
+.cs-hero-widget-card--bottom {
+  top: 250px;
+  right: 16px;
+  left: auto;
+  z-index: 1;
+  width: 220px;
+  height: 220px;
+  background: rgba(249, 115, 22, 0.16);
+}
+
+.cs-hero-widget-heading,
+.cs-hero-widget-widget-title {
+  font-size: 0.95rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #a5f3fc;
+  margin-bottom: 14px;
+}
+
+.cs-hero-widget-gauge {
+  position: relative;
+  width: 100%;
+  height: 88px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+}
+
+.cs-hero-widget-gauge-fill {
+  position: absolute;
+  inset: 0;
+  width: var(--fill, 12%);
+  background: linear-gradient(90deg, #22c55e, #f59e0b);
+  clip-path: inset(0 0 0 0 round 999px);
+  transition: width 0.4s ease;
+  animation: cs-gauge-slide 12s ease-in-out infinite alternate;
+}
+
+@keyframes cs-gauge-slide {
+  0% {
+    width: var(--fill, 12%);
+  }
+  100% {
+    width: 100%;
+  }
+}
+
+.cs-hero-widget-alert-icon {
+  display: grid;
+  place-items: center;
+  margin-top: 14px;
+  width: 70px;
+  height: 70px;
+  animation: cs-alert-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes cs-alert-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.92;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
+}
+
+/* Hero Strip */
 .hero-strip {
+  grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
   padding: 10px 0 0;
-  align-items: start;
   width: 100%;
 }
 
-.hero-strip-title {
-  grid-column: 1 / -1;
-  padding: 0;
-}
-
 .hero-step-card {
   display: grid;
   grid-template-rows: auto 1fr;
@@ -660,49 +793,80 @@ body.light-mode .navbar {
   color: var(--accent);
 }
 
-.hero-step-card:last-child {
-  align-self: start;
+/* Features & Capabilities */
+.section-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
 }
 
-.full-width-action {
-  justify-self: stretch;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+.section-heading span {
+  color: #7dd3fc;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.84rem;
 }
 
-.feature-section {
-  padding: 34px 0 18px;
+.section-heading h2 {
+  font-size: clamp(1.5rem, 3vw, 2.4rem);
+  max-width: 18ch;
+  line-height: 1.15;
 }
 
-.capabilities-section {
-  padding: 40px 0;
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
 }
 
-.capability-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 24px;
+.feature-card {
+  min-height: 190px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 18px;
+  padding: 22px;
+  transition: transform 0.2s, background 0.2s, border-color 0.2s;
 }
 
-.capability-card:nth-child(1) {
-  grid-column: 1 / 3;
+.feature-card:hover {
+  transform: translateY(-3px);
+  background: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.14);
 }
 
-.capability-card:nth-child(2) {
-  grid-column: 3 / 5;
+.feature-card h3 {
+  margin-bottom: 10px;
+  color: #e2e8f0;
+  font-size: 1rem;
 }
 
-.capability-card:nth-child(3) {
-  grid-column: 5 / 7;
+.feature-card p {
+  color: var(--muted);
+  line-height: 1.7;
 }
 
-.capability-card:nth-child(4) {
-  grid-column: 2 / 4;
+.feature-icon {
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+  border-radius: 16px;
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.18);
+  font-size: 1.35rem;
+  margin-bottom: 14px;
 }
 
-.capability-card:nth-child(5) {
-  grid-column: 4 / 6;
+.capabilities-section {
+  padding: 40px 0;
+}
+
+.capability-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 24px;
 }
 
 .capability-card {
@@ -729,136 +893,232 @@ body.light-mode .navbar {
   line-height: 1.7;
 }
 
-.section-heading {
+.capability-card:nth-child(1) {
+  grid-column: 1 / 3;
+}
+.capability-card:nth-child(2) {
+  grid-column: 3 / 5;
+}
+.capability-card:nth-child(3) {
+  grid-column: 5 / 7;
+}
+.capability-card:nth-child(4) {
+  grid-column: 2 / 4;
+}
+.capability-card:nth-child(5) {
+  grid-column: 4 / 6;
+}
+
+@media (max-width: 900px) {
+  .capability-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .capability-card:nth-child(1),
+  .capability-card:nth-child(2),
+  .capability-card:nth-child(3),
+  .capability-card:nth-child(4),
+  .capability-card:nth-child(5) {
+    grid-column: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .capability-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero-strip {
+    grid-template-columns: 1fr;
+  }
+  .hero-copy {
+    margin-top: 20vh;
+  }
+}
+
+/* Footer */
+#contact {
+  display: block !important;
+  background: #1a2232 !important;
+  padding: 0 !important;
+  margin-top: 30px;
+  border-radius: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.footer-grid {
+  padding: 44px 48px 36px;
+  display: grid;
+  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
+  gap: 32px;
+  align-items: start;
+}
+
+.footer-brand-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 10px;
+  margin-bottom: 16px;
+}
+
+.footer-brand-icon {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.footer-brand-name {
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+
+.footer-brand-tagline {
+  font-size: 0.72rem;
+  color: #64748b;
+  letter-spacing: 0.04em;
+  margin-top: 2px;
+  text-transform: uppercase;
+}
+
+.footer-description {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  line-height: 1.7;
   margin-bottom: 20px;
+  max-width: 200px;
 }
 
-.section-heading span {
-  color: #7dd3fc;
+.footer-mission {
+  font-size: 0.95rem;
   font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.84rem;
+  color: #38bdf8;
+  margin-bottom: 14px;
+  letter-spacing: 0.01em;
 }
 
-.section-heading h2 {
-  font-size: clamp(1.5rem, 3vw, 2.4rem);
-  max-width: 18ch;
-  line-height: 1.15;
+.footer-social {
+  display: flex;
+  gap: 7px;
 }
 
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
+.social-link {
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
 }
 
-.feature-card {
-  min-height: 190px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 18px;
-  padding: 22px;
-  transition:
-    transform 0.2s ease,
-    background 0.2s ease,
-    border-color 0.2s ease;
+.social-link.github {
+  background: #38bdf8;
+}
+.social-link.github:hover {
+  background: #0ea5e9;
 }
 
-.feature-card:hover {
-  transform: translateY(-3px);
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.14);
+.social-link.issues {
+  background: #0f766e;
+}
+.social-link.issues:hover {
+  background: #0d9488;
 }
 
-.feature-icon {
-  width: 52px;
-  height: 52px;
-  display: grid;
-  place-items: center;
-  border-radius: 16px;
-  background: rgba(56, 189, 248, 0.12);
-  border: 1px solid rgba(56, 189, 248, 0.18);
-  font-size: 1.35rem;
-  margin-bottom: 14px;
+.social-link.discussions {
+  background: #334155;
+}
+.social-link.discussions:hover {
+  background: #475569;
 }
 
-.feature-card h3 {
-  margin-bottom: 10px;
-  color: #e2e8f0;
-  font-size: 1rem;
+.footer-col-title {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #38bdf8;
+  display: inline-block;
 }
 
-.feature-card p {
-  color: var(--muted);
-  line-height: 1.7;
+.footer-col-links {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
 }
 
-.footer {
-  margin-top: 30px;
-  border-radius: 22px;
-  border: 1px solid var(--border-color);
-  background: var(--panel-strong);
-  color: var(--text);
-  backdrop-filter: blur(18px);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px 24px;
-  align-items: start;
-  box-shadow: var(--shadow);
+.footer-col-links a {
+  font-size: 0.8rem;
+  color: #94a3b8;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  transition: color 0.2s;
 }
 
-.footer strong {
-  display: block;
-  font-size: 1rem;
-  margin-bottom: 6px;
+.footer-col-links a::before {
+  content: "";
+  width: 5px;
+  height: 1.5px;
+  background: #38bdf8;
+  display: inline-block;
+  flex-shrink: 0;
 }
 
-.footer p,
-.footer-note {
-  color: var(--muted-2);
-  line-height: 1.6;
+.footer-col-links a:hover {
+  color: #38bdf8;
 }
 
-.footer-links {
+.footer-copyright {
+  background: #111827;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 14px 48px;
   display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  grid-column: 2;
-  grid-row: 1;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 22px 22px;
 }
 
-.contact-section {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  grid-column: 1;
-  grid-row: 2;
+.footer-copyright p {
+  font-size: 0.75rem;
+  color: #475569;
+  margin: 0;
+  text-align: center;
 }
 
-.contact-links {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.footer-copyright strong {
+  color: #64748b;
+  font-weight: 600;
 }
 
-.contact-links a {
-  color: #dbeafe;
-  text-decoration: none;
-  transition:
-    color 0.2s ease,
-    transform 0.2s ease;
+@media (max-width: 1024px) {
+  .footer-grid {
+    grid-template-columns: 1fr 1fr 1fr !important;
+  }
 }
 
-.footer-note {
-  grid-column: 1 / -1;
-  font-size: 0.92rem;
+@media (max-width: 700px) {
+  .footer-grid {
+    grid-template-columns: 1fr 1fr !important;
+    padding: 32px 24px 28px !important;
+  }
+  .footer-copyright {
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-grid {
+    grid-template-columns: 1fr !important;
+  }
 }
 
+/* Chatbot */
 .chatbot-toggle {
   position: fixed;
   right: 24px;
@@ -868,25 +1128,14 @@ body.light-mode .navbar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-weight: 700;
-  font-size: 1.35rem;
-  line-height: 1;
   background: linear-gradient(135deg, #06b6d4, #0284c7);
   box-shadow: 0 16px 28px rgba(2, 132, 199, 0.34);
   cursor: pointer;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.chatbot-toggle:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 18px 32px rgba(2, 132, 199, 0.42);
+  font-size: 1.35rem;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .chatbot-panel {
@@ -898,11 +1147,14 @@ body.light-mode .navbar {
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(2, 6, 23, 0.92);
   backdrop-filter: blur(16px);
-  box-shadow: 0 24px 46px var(--shadow-color);
   z-index: 39;
   padding: 14px;
 }
 
+.hidden {
+  display: none;
+}
+
 .chatbot-header {
   display: flex;
   justify-content: space-between;
@@ -920,13 +1172,11 @@ body.light-mode .navbar {
 }
 
 .chatbot-close {
-  width: auto;
-  padding: 4px 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border-strong);
   background: var(--btn-bg);
-  color: var(--text-primary);
-  font-size: 0.9rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  padding: 4px 10px;
+  color: var(--text);
   cursor: pointer;
 }
 
@@ -961,22 +1211,6 @@ body.light-mode .navbar {
   justify-self: end;
 }
 
-#chatbot-suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 10px;
-  padding: 4px 2px;
-}
-
-#chatbot-suggestions button {
-  width: auto;
-  border-radius: 999px;
-  padding: 6px 10px;
-  font-size: 0.74rem;
-  font-weight: 600;
-}
-
 .chatbot-form {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -994,10 +1228,13 @@ body.light-mode .navbar {
 }
 
 .chatbot-form button {
-  width: auto;
   border-radius: 12px;
   padding: 10px 14px;
   font-size: 0.9rem;
+  background: var(--accent);
+  color: white;
+  border: none;
+  cursor: pointer;
 }
 
 .chatbot-status {
@@ -1006,322 +1243,60 @@ body.light-mode .navbar {
   font-size: 0.84rem;
 }
 
-.feature-box {
-  margin: 20px;
-  padding: 15px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-}
-
-.hidden {
+/* Scroll to Top */
+#scrollTopBtn {
+  position: fixed;
+  right: 31px;
+  bottom: 96px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
   display: none;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 980px) {
-  .navbar,
-  .footer {
-    grid-template-columns: 1fr;
-    justify-items: start;
-  }
-.navbar{
-    display:flex;
-    position:fixed;
-    flex-direction: row;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-  .hero-actions {
-    display: flex;
-    justify-content: space-around;
-  }
-  .nav-links,
-  .footer-links {
-    justify-content: flex-start;
-  }
-
-  .footer-links,
-  .contact-section {
-    grid-column: 1;
-    grid-row: auto;
-  }
-
-  .hero {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-strip {
-    grid-template-columns: 1fr;
-  }
-
-  .hero-copy h1 {
-    max-width: 12ch;
-    margin-top: 20vh;
-  }
-}
-
-@media (max-width: 900px) {
-  .capability-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .capability-grid .capability-card:nth-child(4),
-  .capability-grid .capability-card:nth-child(5) {
-    grid-column: auto;
-    justify-self: stretch;
-    max-width: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .capability-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .capability-card:nth-child(1),
-  .capability-card:nth-child(2),
-  .capability-card:nth-child(3),
-  .capability-card:nth-child(4),
-  .capability-card:nth-child(5) {
-    grid-column: auto;
-  }
-  .page-shell {
-    width: min(100% - 20px, 1240px);
-    padding-top: 14px;
-  }
-
-  .navbar,
-  .footer {
-    padding: 18px;
-    border-radius: 20px;
-  }
-  .navbar{
-    display:flex;
-    position: fixed;
-    flex-direction: row;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-  .hero-actions {
-    display: flex;
-    justify-content: space-around;
-  }
-  .nav-links {
-    gap: 12px;
-  }
-
-  .hero-copy {
-    padding: 12px 0 0;
-    margin-top: 20vh;
-  }
-
-  .hero-copy h1 {
-    font-size: clamp(2.1rem, 10vw, 3rem);
-  }
-
-  .hero-stats {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-  }
-
-  .hero-strip {
-    padding: 14px;
-  }
-
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .footer-links {
-    gap: 12px;
-  }
-
-  .chatbot-toggle {
-    right: 12px;
-    bottom: 12px;
-    width: 46px;
-    height: 46px;
-    font-size: 1.2rem;
-  }
-
-  .chatbot-panel {
-    right: 10px;
-    bottom: 60px;
-    width: calc(100vw - 20px);
-  }
-
-  .capability-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Eyebrow badge */
-.eyebrow {
-  display: inline-flex;
   align-items: center;
-  padding: 8px 14px;
-  border-radius: 999px;
-  background: rgba(56, 189, 248, 0.12);
-  border: 1px solid rgba(56, 189, 248, 0.22);
-  color: #a5f3fc;
-  font-size: 0.82rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  margin-bottom: 18px;
-}
-
-/* ================================================
-   LIGHT THEME — fix all hardcoded dark-only colors
-   ================================================ */
-
-/* Eyebrow badge (pale cyan #a5f3fc → readable dark blue) */
-[data-theme="light"] .eyebrow {
-  color: #0369a1;
-  background: rgba(3, 105, 161, 0.08);
-  border-color: rgba(3, 105, 161, 0.2);
-}
-
-/* Step labels inside hero strip (pale blue #7dd3fc → dark blue) */
-[data-theme="light"] .hero-strip-item strong {
-  color: #0369a1;
+  justify-content: center;
+  font-size: 22px;
+  z-index: 9999;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  color: white;
+  border: none;
+  cursor: pointer;
 }
 
-/* Section eyebrow labels (pale blue #7dd3fc → dark blue) */
-[data-theme="light"] .section-heading span {
-  color: #0369a1;
+#scrollTopBtn.show {
+  display: flex;
 }
 
-/* Feature card headings (#e2e8f0 near-white → dark) */
+/* Light Theme Overrides */
 [data-theme="light"] .feature-card h3 {
   color: #1a202c;
 }
 
-@media (max-width: 480px) {
-  .button-group {
-    flex-direction: column;
-    width: 100%;
-  }
-.navbar{
-    
-  display:flex;
-    position: fixed;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-  .hero-copy{
-    margin-top: 30vh;
-  }
-  .hero-actions
-  {
-    display: flex;
-    justify-content:space-around;
-  }
-  .btn-primary,
-  .btn-secondary {
-    text-align: center;
-    justify-content: center;
-  }
-
-/* Capability cards — same white-alpha issue */
 [data-theme="light"] .capability-card {
   background: #ffffff;
   border-color: rgba(0, 0, 0, 0.09);
 }
+
 [data-theme="light"] .capability-card:hover {
   background: #f1f5f9;
 }
 
-/* Contact links (#dbeafe pale blue → readable dark blue) */
-[data-theme="light"] .contact-links a {
-  color: #0369a1;
-}
-[data-theme="light"] .contact-links a:hover {
-  color: #075985;
-}
-
-/* Chatbot panel — dark glassy bg → white */
 [data-theme="light"] .chatbot-panel {
   background: rgba(255, 255, 255, 0.97);
   border-color: rgba(0, 0, 0, 0.1);
 }
 
-/* Bot message bubble (#dbeafe pale blue → dark text) */
 [data-theme="light"] .bot-message {
   background: rgba(56, 189, 248, 0.1);
   border-color: rgba(56, 189, 248, 0.25);
   color: #0c4a6e;
 }
 
-/* User message bubble (#dcfce7 pale green → dark text) */
 [data-theme="light"] .user-message {
   background: rgba(34, 197, 94, 0.1);
   border-color: rgba(34, 197, 94, 0.25);
   color: #14532d;
 }
 
-/* Chatbot status text (#fcd34d yellow → dark amber) */
 [data-theme="light"] .chatbot-status {
   color: #92400e;
-}
-
-/* Feature box */
-[data-theme="light"] .feature-box {
-  background: rgba(0, 0, 0, 0.04);
-  color: var(--text);
-}
-
-/* Nav link hover — ensure white text doesn't appear on light bg */
-[data-theme="light"] .nav-links a:hover,
-[data-theme="light"] .footer-links a:hover {
-  color: #0369a1;
-}
-}
-
-/* Scroll to Top Button */
-#scrollTopBtn,
-.scroll-top-btn {
-  position: fixed;
-  right: 31px;
-  bottom: 96px;
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  z-index: 9999;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  color: white;
-  border: none;
-  cursor: pointer;
-  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
-  transition: opacity 0.3s, transform 0.2s;
-}
-
-#scrollTopBtn.show,
-.scroll-top-btn.show {
-  display: flex;
-}
-
-#scrollTopBtn:hover,
-.scroll-top-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.45);
 }
\ No newline at end of file
