chore: adaptive for home page

Author: vero-code

css/home.css

@@ -262,7 +262,35 @@
 }
 
 @media (max-width: 768px) {
-    h1 { font-size: 2.5rem; }
+    h1 {
+        font-size: 2.5rem !important;
+        line-height: 1.2;
+        word-wrap: break-word;
+        hyphens: auto;
+    }
+    celestine-header::part(nav), nav { 
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 15px;
+        width: 100%;
+        margin-top: 10px;
+    }
+
+    .tech-stack {
+        width: 100% !important;
+        box-sizing: border-box;
+        padding: 20px 10px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        overflow-x: hidden;
+    }
+    
+    .container {
+        overflow-x: hidden;
+        width: 100%;
+        box-sizing: border-box;
+    }
     .btn-group { flex-direction: column; }
     .btn { width: 100%; justify-content: center; box-sizing: border-box; }
 }

css/main.css

@@ -146,3 +146,23 @@ p {
 .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.15);
 }
+
+@media (max-width: 768px) {
+    header {
+        flex-direction: column;
+        gap: 15px;
+        padding-bottom: 20px;
+        text-align: center;
+    }
+    nav {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        width: 100%;
+    }
+    nav a {
+        margin: 0;
+        font-size: 0.9rem;
+    }
+}

js/header.js

@@ -53,8 +53,8 @@ class CelestineHeader extends HTMLElement {
                 <a href="${rootPath}/index.html" class="cel-nav-link ${activePage === 'home' ? 'active' : ''}">Home</a>
                 <a href="${rootPath}/features.html" class="cel-nav-link ${activePage === 'features' ? 'active' : ''}">Features</a>
                 <a href="${rootPath}/pricing.html" class="cel-nav-link ${activePage === 'pricing' ? 'active' : ''}">Pricing</a>
-                <a href="${rootPath}/about.html" class="cel-nav-link ${activePage === 'about' ? 'active' : ''}">About Us</a>
-                <a href="${rootPath}/contact.html" class="cel-nav-link ${activePage === 'contact' ? 'active' : ''}">Contact Us</a>
+                <a href="${rootPath}/about.html" class="cel-nav-link ${activePage === 'about' ? 'active' : ''}">About</a>
+                <a href="${rootPath}/contact.html" class="cel-nav-link ${activePage === 'contact' ? 'active' : ''}">Contact</a>
                 
                 <a href="https://github.com/vero-code/celestine" target="_blank" class="cel-social-link github"><i class="fab fa-github"></i></a>
                 <a href="https://x.com/veron_code" target="_blank" class="cel-social-link twitter"><i class="fab fa-twitter"></i></a>