fix(ui): fix hero section layout with flex column and proper sizing

Add explicit flex-column layout to .hero-content so child elements
stack vertically instead of flowing inline. Set proper width and
min-height on hero graphic container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/main.css

@@ -288,6 +288,13 @@ h1, h2, h3, h4, h5, h6 {
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
+    width: 100%;
+}
+
+.hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .hero-badge {
@@ -304,6 +311,7 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 1.1;
     color: #f1f5f9;
     margin: 0 0 24px;
+    width: 100%;
 }
 
 .hero-title-accent {
@@ -319,6 +327,7 @@ h1, h2, h3, h4, h5, h6 {
     color: #8892a8;
     margin: 0 0 36px;
     max-width: 520px;
+    width: 100%;
 }
 
 .hero-actions {
@@ -331,8 +340,8 @@ h1, h2, h3, h4, h5, h6 {
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 400px;
+    width: 100%;
-    margin: 0 auto;
+    min-height: 350px;
 }
 
 /* -- Social Proof -- */
@@ -682,8 +691,10 @@ h1, h2, h3, h4, h5, h6 {
     }
 
     .hero-graphic {
-        max-width: 300px;
+        max-width: 320px;
+        margin: 0 auto;
         order: -1;
+        min-height: auto;
     }
 
     .features-grid {