refactor styles for improved layout and spacing across sections

Author: jkyberneees

docs/index.html

@@ -239,10 +239,10 @@
 
       /* --- Hero --- */
       .hero {
-        padding: 120px 0 80px;
+        padding: 80px 0 48px;
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 80px;
+        gap: 48px;
         align-items: center;
         position: relative;
       }
@@ -321,8 +321,8 @@
 
       .hero-buttons {
         display: flex;
-        gap: 16px;
-        margin-top: 40px;
+        gap: 12px;
+        margin-top: 24px;
       }
 
       .btn-primary {
@@ -501,12 +501,12 @@
 
       /* --- Features Grid --- */
       .features-section {
-        padding: 120px 0;
+        padding: 80px 0;
       }
 
       .section-header {
         text-align: center;
-        margin-bottom: 80px;
+        margin-bottom: 48px;
       }
 
       .section-label {
@@ -543,8 +543,8 @@
       .feature-card {
         background: var(--panel);
         border: 1px solid var(--border);
-        padding: 32px;
-        border-radius: 16px;
+        padding: 20px;
+        border-radius: 14px;
         transition: all 0.3s;
         position: relative;
         overflow: hidden;
@@ -581,7 +581,7 @@
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
-        margin-bottom: 20px;
+        margin-bottom: 12px;
       }
 
       .feature-card h3 {
@@ -599,15 +599,15 @@
 
       /* --- Installation Steps --- */
       .install-section {
-        padding: 120px 0;
+        padding: 80px 0;
         background: linear-gradient(180deg, transparent, rgba(0, 217, 255, 0.02), transparent);
       }
 
       .steps {
         display: flex;
         flex-direction: column;
-        gap: 24px;
-        margin-top: 60px;
+        gap: 20px;
+        margin-top: 40px;
         max-width: 1000px;
         margin-left: auto;
         margin-right: auto;
@@ -617,8 +617,8 @@
         position: relative;
         background: var(--panel);
         border: 1px solid var(--border);
-        border-radius: 16px;
-        padding: 32px;
+        border-radius: 12px;
+        padding: 20px;
         transition: all 0.3s;
       }
 
@@ -707,15 +707,15 @@
 
       /* --- Architecture Diagram --- */
       .architecture-section {
-        padding: 120px 0;
+        padding: 80px 0;
       }
 
       .diagram-box {
         background: var(--panel);
         border: 1px solid var(--border);
-        border-radius: 24px;
-        padding: 60px;
-        margin: 60px 0;
+        border-radius: 20px;
+        padding: 40px;
+        margin: 40px 0;
         text-align: center;
         position: relative;
         overflow: hidden;
@@ -756,16 +756,16 @@
 
       /* --- Memory Section --- */
       .memory-section {
-        padding: 120px 0;
+        padding: 80px 0;
         background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.03), transparent);
       }
 
       .memory-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 80px;
+        gap: 48px;
         align-items: center;
-        margin-top: 60px;
+        margin-top: 40px;
       }
 
       .memory-content h2 {
@@ -807,8 +807,8 @@
       .code-preview {
         background: var(--bg-secondary);
         border: 1px solid var(--border);
-        border-radius: 16px;
-        padding: 32px;
+        border-radius: 12px;
+        padding: 20px;
         font-family: var(--font-mono);
         font-size: 0.85rem;
         line-height: 1.8;
@@ -837,16 +837,16 @@
 
       /* --- Footer --- */
       footer {
-        padding: 80px 0 40px;
+        padding: 40px 0 24px;
         border-top: 1px solid var(--border);
-        margin-top: 120px;
+        margin-top: 40px;
       }
 
       .footer-content {
         display: grid;
         grid-template-columns: 2fr 1fr 1fr;
-        gap: 60px;
-        margin-bottom: 60px;
+        gap: 40px;
+        margin-bottom: 40px;
       }
 
       .footer-brand h3 {
@@ -897,7 +897,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding-top: 40px;
+        padding-top: 24px;
         border-top: 1px solid var(--border);
         font-family: var(--font-mono);
         font-size: 0.8rem;
@@ -918,7 +918,7 @@
       @media (max-width: 1024px) {
         .hero {
           grid-template-columns: 1fr;
-          gap: 60px;
+          gap: 32px;
         }
 
         .hero-content h1 {
@@ -927,12 +927,12 @@
 
         .memory-grid {
           grid-template-columns: 1fr;
-          gap: 60px;
+          gap: 32px;
         }
 
         .footer-content {
           grid-template-columns: 1fr;
-          gap: 40px;
+          gap: 32px;
         }
       }
 
@@ -941,9 +941,51 @@
           padding: 0 24px;
         }
 
+        /* Stack hero sections and constrain total height so it fits the viewport */
+        .hero {
+          display: flex;
+          flex-direction: column;
+          padding: 20px 0 16px;
+          gap: 16px;
+          max-height: calc(100vh - 56px); /* account roughly for the sticky nav (28px top+bottom) */
+          min-height: 0; /* allow children to shrink */
+          overflow: hidden;
+        }
+
+        .hero-content {
+          z-index: 1;
+          flex: 0 0 auto;
+        }
+
         .hero-content h1 {
           font-size: 2.5rem;
           letter-spacing: -1px;
+          margin-bottom: 8px;
+        }
+
+        /* Make the image placeholder fill remaining space but allow it to shrink */
+        .hero-image-placeholder {
+          flex: 1 1 auto;
+          min-height: 0; /* critical to make inner scroll/overflow work inside flex */
+          max-height: none;
+          transform: none;
+          border-radius: 12px;
+          overflow: hidden;
+        }
+
+        /* Allow the internal CLI body to scroll if its content is too tall */
+        .hero-image-placeholder .cli-body {
+          height: 100%;
+          min-height: 0;
+          overflow: auto;
+          display: block;
+        }
+
+        .hero-image-placeholder img {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
         }
 
         .hero-content .subtitle {
@@ -996,6 +1038,13 @@
         }
       }
 
+      /* Extra small screens */
+      @media (max-width: 420px) {
+        .hero-image-placeholder {
+          max-height: 40vh;
+        }
+      }
+
       @keyframes blink {
         0%,
         100% {
@@ -1172,11 +1221,11 @@ <h3>Deterministic Output</h3>
         <div
           style="
             text-align: center;
-            margin-top: 80px;
-            padding: 60px 40px;
+            margin-top: 32px;
+            padding: 32px 24px;
             background: var(--panel);
-            border: 2px solid var(--border-bright);
-            border-radius: 24px;
+            border: 1px solid var(--border-bright);
+            border-radius: 16px;
             position: relative;
             overflow: hidden;
           "
@@ -1194,7 +1243,7 @@ <h3>Deterministic Output</h3>
           <h2
             style="
               font-size: 2.5rem;
-              margin: 0 0 24px 0;
+              margin: 0 0 12px 0;
               font-weight: 800;
               line-height: 1.2;
               background: linear-gradient(135deg, var(--text-primary), var(--accent));
@@ -1259,7 +1308,7 @@ <h3>Learning Team</h3>
       <section
         class="ecosystem-section"
         style="
-          padding: 80px 0;
+          padding: 40px 0 32px;
           background: linear-gradient(180deg, rgba(124, 58, 237, 0.03), transparent, rgba(0, 217, 255, 0.03));
         "
       >
@@ -1279,7 +1328,7 @@ <h2 class="section-title">Leverage the Entire Ecosystem</h2>
           </p>
         </div>
 
-        <div class="features-grid" style="margin-top: 60px">
+        <div class="features-grid" style="margin-top: 32px">
           <div class="feature-card">
             <div class="feature-icon">🔌</div>
             <h3>Drop-in Integration</h3>