Fix mobile menu and hero layout

Author: samanthamsong

styles.css

@@ -684,12 +684,17 @@ footer p {
         right: 0;
         background: var(--accent-color);
         flex-direction: column;
-        padding: 1rem 2rem;
+        padding: 1.5rem 2rem;
         gap: 1rem;
         box-shadow: var(--shadow);
         display: none;
     }
 
+    .nav-links a {
+        color: var(--bg-color);
+        font-size: 1.2rem;
+    }
+
     .nav-links.active {
         display: flex;
     }
@@ -698,30 +703,38 @@ footer p {
     .hero {
         min-height: auto;
         max-height: none;
-        padding: 6rem 1.5rem 3rem;
+        padding: 8rem 1.5rem 4rem;
     }
 
     .hero-content h1 {
-        font-size: 2.5rem;
+        font-size: 2.8rem;
         line-height: 1;
+        margin-bottom: 0.5rem;
     }
 
     .hero-content .subtitle {
-        font-size: 1.1rem;
-        margin-bottom: 1.5rem;
+        font-size: 1.2rem;
+        margin-bottom: 2rem;
     }
 
     .hero-buttons {
-        flex-direction: column;
-        gap: 1.5rem;
+        flex-direction: row;
+        gap: 2rem;
+        justify-content: center;
+    }
+
+    .icon-btn {
+        padding: 0.5rem;
     }
 
     .icon-btn .icon {
-        font-size: 3rem;
+        font-size: 2.5rem;
     }
 
     .icon-btn .label {
-        font-size: 1rem;
+        font-size: 0.85rem;
+        max-width: 80px;
+        text-align: center;
     }
 
     /* About Mobile */
@@ -730,7 +743,7 @@ footer p {
     }
 
     .section-title {
-        font-size: 2.2rem;
+        font-size: 2.5rem;
     }
 
     .about-content {