From 80faa4fa86d874396f9a4c0805106ebea132591e Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <parnerkarsharang@gmail.com>
Date: Wed, 18 Feb 2026 22:01:28 +0100
Subject: [PATCH] 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 | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index f1c4e1a..bb48a7d 100644
--- a/assets/main.css
+++ b/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;
-    margin: 0 auto;
+    width: 100%;
+    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 {