Fix layout alignment and overflow issues

frontend/src/App.css

@@ -44,6 +44,13 @@ body {
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+html {
+  overflow-x: hidden;
+  width: 100%;
 }
 
 * { box-sizing: border-box; }
@@ -74,7 +81,7 @@ h1, h2, h3, h4, p { margin: 0; }
 /* LANDING PAGE                                                              */
 /* ========================================================================= */
 
-.landing-container { background: #FFFFFF; display: flex; flex-direction: column; }
+.landing-container { background: #FFFFFF; display: flex; flex-direction: column; width: 100%; min-height: 100vh; position: relative; }
 
 /* Nav */
 .nav-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 6%; position: absolute; width: 100%; top: 0; z-index: 100; }
@@ -91,7 +98,7 @@ h1, h2, h3, h4, p { margin: 0; }
 /* Hero */
 .hero-section { padding: 160px 6% 120px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 32px; position: relative; overflow: hidden; }
 .hero-badge { display: inline-block; padding: 6px 16px; background: var(--accent-light); color: var(--accent); border-radius: var(--radius-full); font-weight: 600; font-size: 0.85rem; border: 1px solid rgba(15,118,110,0.1); }
-.hero-title { font-size: 4.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; max-width: 900px; color: var(--text-primary); z-index: 10; }
+.hero-title { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; max-width: 900px; color: var(--text-primary); z-index: 10; padding: 0 20px; }
 .hero-description { font-size: 1.25rem; line-height: 1.6; color: var(--text-secondary); max-width: 650px; z-index: 10; }
 
 .hero-buttons { display: flex; gap: 16px; z-index: 10; }