Update.

static/css/splash.css

@@ -66,6 +66,37 @@ body {
     color: #1565c0;
 }
 
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    z-index: 1001;
+}
+
+.hamburger span {
+    width: 25px;
+    height: 3px;
+    background: #1976d2;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.hamburger.active span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -6px);
+}
+
 .hero-section {
     flex: 1;
     display: flex;
@@ -189,9 +220,49 @@ body {
 }
 
 @media (max-width: 768px) {
+    .nav-container {
+        padding: 0 1rem;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 0;
+        flex-direction: column;
+        background-color: white;
+        width: 70%;
+        max-width: 300px;
+        height: 100vh;
+        padding: 5rem 2rem 2rem;
+        gap: 1.5rem;
+        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+        transition: left 0.3s ease;
+        z-index: 1000;
+    }
+
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-menu li {
+        width: 100%;
+    }
+
+    .nav-menu a {
+        display: block;
+        padding: 0.75rem 0;
+        font-size: 1.125rem;
+    }
+
     .hero-section {
         flex-direction: column;
         text-align: center;
+        padding: 2rem 1rem;
+        gap: 2rem;
     }
 
     .hero-title {
@@ -202,17 +273,48 @@ body {
         font-size: 3rem;
     }
 
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+
     .hero-actions {
         justify-content: center;
         flex-wrap: wrap;
     }
 
-    .nav-menu {
-        gap: 1rem;
+    .footer {
+        padding: 1.5rem 1rem;
     }
 
     .footer-links {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 0.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .logo {
+        font-size: 1.25rem;
+    }
+
+    .logo-icon {
+        font-size: 1.5rem;
+    }
+
+    .hero-title {
+        font-size: 1.5rem;
+    }
+
+    .hero-price {
+        font-size: 2.5rem;
+    }
+
+    .btn {
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+    }
+
+    .nav-menu {
+        width: 80%;
     }
 }