feat(website): new hero (copy + astronaut ground) and nav collapse fix

website/src/_data/i18n/en.js

@@ -53,8 +53,8 @@ export default {
   },
 
   hero: {
-    h1Html: "Where people and agents work together",
-    sub: "Shared agents that learn from your whole team. What one person teaches, everyone keeps.",
+    h1Html: "One app to run all your team's AI agents",
+    sub: "Houston gives your team one place to run AI agents, on any model, connected to the tools you already use, so every agent and everything it learns belongs to the company instead of one person's account.",
     ctaDownload: "Download the app",
     ctaSeeHow: "See how it works",
     windowAlt:

website/src/_data/i18n/es.js

@@ -55,8 +55,8 @@ export default {
   },
 
   hero: {
-    h1Html: "Donde las personas y los agentes trabajan juntos",
-    sub: "Agentes compartidos que aprenden de todo tu equipo. Lo que una persona enseña, lo conservan todos.",
+    h1Html: "Una app para todos los agentes de IA de tu equipo",
+    sub: "Houston le da a tu equipo un solo lugar para usar agentes de IA, con cualquier modelo y conectados a las herramientas que ya usan, para que cada agente y todo lo que aprende sea de la empresa y no de la cuenta de una persona.",
     ctaDownload: "Descargar la app",
     ctaSeeHow: "Ver cómo funciona",
     windowAlt:

website/src/_data/i18n/pt.js

@@ -54,8 +54,8 @@ export default {
   },
 
   hero: {
-    h1Html: "Onde pessoas e agentes trabalham juntos",
-    sub: "Agentes compartilhados que aprendem com o time inteiro. O que uma pessoa ensina, todo mundo guarda.",
+    h1Html: "Um app para todos os agentes de IA do seu time",
+    sub: "O Houston dá ao seu time um único lugar para usar agentes de IA, com qualquer modelo e conectados às ferramentas que vocês já usam, para que cada agente e tudo o que ele aprende pertença à empresa e não à conta de uma pessoa.",
     ctaDownload: "Baixar o app",
     ctaSeeHow: "Ver como funciona",
     windowAlt:

website/src/_includes/landing/hero.njk

@@ -7,6 +7,7 @@
      bloom, centered statement, then the REAL app window inside the same dark
      field — its bottom dissolving into the ground before the white page. #}
   <div class="hero-photo" aria-hidden="true">
+    <div class="hero-astro"></div>
     <div class="hero-glowfield"></div>
   </div>
 

website/src/assets/css/landing-hero.css

@@ -20,6 +20,63 @@
   z-index: 0;
   pointer-events: none;
 }
+/* The astronaut ground. The photo is pinned so the astronaut rides the LEFT
+   edge and the earth horizon the lower right; the centered statement floats
+   over open space, never over the figure. Legibility guards: a radial veil
+   deepens the center column behind the text, a left-to-right wash keeps the
+   middle dark, and the whole field dissolves into the hero ground before the
+   app window. */
+.hero-astro {
+  position: absolute;
+  top: 0;
+  /* The layer hangs 12vw past the LEFT edge of the page, so the astronaut's
+     face slides out of the text column while the photo still covers every
+     visible pixel: no seam on the right, no uncovered strip anywhere. */
+  left: -12vw;
+  right: 0;
+  height: min(100svh, 900px);
+  background: url("/assets/img/hero-astronaut.jpg") no-repeat;
+  background-size: cover;
+  background-position: left top 30%;
+  opacity: 0.9;
+}
+.hero-astro::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      ellipse 52% 58% at 52% 26%,
+      rgba(8, 10, 14, 0.5),
+      rgba(8, 10, 14, 0.16) 62%,
+      transparent 78%
+    ),
+    /* Side dissolves: the photo breathes out into the ground color before
+       either screen edge, so no window width shows a hard border. */
+    linear-gradient(
+      90deg,
+      rgba(13, 13, 13, 0.55) 0%,
+      transparent 18%,
+      transparent 78%,
+      rgba(13, 13, 13, 0.65) 96%,
+      #0d0d0d 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(13, 13, 13, 0.16) 0%,
+      rgba(13, 13, 13, 0.24) 42%,
+      rgba(13, 13, 13, 0.88) 74%,
+      #0d0d0d 92%
+    );
+}
+/* On narrow screens no left slice is safe, so show the photo's right side,
+   the window and the earth, and let the figure leave the frame entirely. */
+@media (max-width: 820px) {
+  .hero-astro {
+    background-position: 62% 30%;
+    opacity: 0.75;
+  }
+}
 /* Monochrome light: a single soft white bloom bleeding from the top. */
 .hero-glowfield {
   position: absolute;
@@ -62,7 +119,7 @@
   font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica,
     Arial, sans-serif;
   font-weight: 600;
-  font-size: clamp(38px, 5.5vw, 76px);
+  font-size: clamp(34px, 4.7vw, 64px);
   line-height: 1.06;
   letter-spacing: -0.035em;
   color: #fff;
@@ -74,7 +131,7 @@
     Arial, sans-serif;
   margin-top: clamp(16px, 1.8vw, 22px);
   font-weight: 400;
-  font-size: clamp(16.5px, 1.55vw, 20px);
+  font-size: clamp(15.5px, 1.4vw, 18px);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.6);
   max-width: 52ch;

website/src/assets/css/landing.css

@@ -487,6 +487,33 @@ img {
 .lnav-drop a:last-child {
   border-bottom: none;
 }
+/* ── Nav collapse (the missing breakpoints) ────────────────────────────────
+   The burger and the dropdown sheet always existed in markup and JS, but no
+   media query ever hid the centered links or showed the burger, so on
+   narrow screens the links overlapped the wordmark. Below 1020px the links
+   move into the sheet; below 560px the GitHub icon and the language menu
+   follow them (both have rows in the sheet), leaving brand + Download +
+   burger. */
+@media (max-width: 1020px) {
+  .lnav-links {
+    display: none;
+  }
+  .lnav-burger {
+    display: flex;
+  }
+}
+@media (max-width: 560px) {
+  .lnav {
+    padding: 12px 16px;
+  }
+  .lnav-icon,
+  .lnav-lang {
+    display: none;
+  }
+  .lnav-right {
+    gap: 10px;
+  }
+}
 
 /* ── Footer (the deepest ground, a step below the page) ──────────────────── */
 .lfoot {