Constrain hero section to page width on large screens

Wrap hero grid content in .hero-inner (max-width: 1200px, margin: 0 auto)
so the content aligns with the rest of the page on wide viewports.
The background gradient/overlay stays full-width via the outer .hero element.

Author: KrisSimon

Website/src/index.html

@@ -48,6 +48,7 @@
 
     <header class="hero">
         <div class="hero-bg" data-parallax="0.3"></div>
+        <div class="hero-inner">
         <div class="hero-content">
             <div class="hero-badge">A New Programming Language</div>
             <h1 class="hero-title">
@@ -124,6 +125,7 @@ <h1 class="hero-title">
             </svg>
             <p class="diagram-caption">Write plugins in <em>any language</em>. Compile to a <strong>standalone binary</strong>.</p>
         </div>
+        </div><!-- /.hero-inner -->
     </header>
 
     <section class="streaming-section">

Website/src/style.css

@@ -324,13 +324,21 @@ body.menu-open {
 
 .hero {
     min-height: 100vh;
+    position: relative;
+    overflow: hidden;
+    padding: 140px var(--space-xl) 100px;
+}
+
+.hero-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-xl);
     align-items: center;
-    padding: 140px var(--space-xl) 100px;
     position: relative;
-    overflow: hidden;
+    z-index: 1;
 }
 
 /* Animated gradient background */
@@ -1527,9 +1535,12 @@ section {
     }
 
     .hero {
+        padding: 120px var(--space-lg) 80px;
+    }
+
+    .hero-inner {
         grid-template-columns: 1fr;
         gap: var(--space-xl);
-        padding: 120px var(--space-lg) 80px;
     }
 
     .hero-code {