diff --git a/backend/static/assets/hero.webp b/backend/static/assets/hero.webp
new file mode 100644
index 0000000..f85298b
Binary files /dev/null and b/backend/static/assets/hero.webp differ
diff --git a/backend/static/styles.css b/backend/static/styles.css
index 55f2946..aa9b741 100644
--- a/backend/static/styles.css
+++ b/backend/static/styles.css
@@ -1625,14 +1625,58 @@ body.has-route-modal {
 
 @media (min-width: 1200px) {
   .hero-banner {
-    max-width: 820px;
+    max-width: 1040px;
     margin-left: auto;
     margin-right: auto;
-    min-height: 62vh;
-    background-position: center 20%;
+    min-height: 68vh;
+    padding: 2.5rem;
+    align-items: flex-end;
+    background-image:
+      linear-gradient(90deg, rgba(18, 31, 24, 0.3) 0%, rgba(18, 31, 24, 0.16) 30%, rgba(18, 31, 24, 0.04) 58%, rgba(18, 31, 24, 0.02) 100%),
+      linear-gradient(to top, rgba(18, 31, 24, 0.16) 0%, rgba(18, 31, 24, 0.02) 38%),
+      var(--hero-image);
+    background-position: center 18%;
+    box-shadow: 0 24px 60px rgba(39, 66, 53, 0.2);
   }
 
   .hero-overlay {
-    max-width: 44ch;
+    max-width: 33rem;
+    margin: 0 0 1rem 1rem;
+    padding: 0;
+    text-align: left;
+    background: none;
+    backdrop-filter: none;
+    box-shadow: none;
+  }
+
+  .hero-overlay h1 {
+    font-size: clamp(3rem, 4vw, 4.2rem);
+    line-height: 1;
+    margin-bottom: 1.05rem;
+    max-width: 11ch;
+  }
+
+  .hero-overlay p {
+    font-size: 1.2rem;
+    line-height: 1.55;
+    max-width: 30ch;
+    color: rgba(255, 255, 255, 0.94);
+  }
+
+  .hero-kicker {
+    margin-bottom: 0.7rem;
+    color: rgba(255, 255, 255, 0.84);
+  }
+
+  .hero-cta {
+    margin-top: 1.2rem;
+    box-shadow: 0 10px 24px rgba(18, 31, 24, 0.24);
+  }
+
+  .hero-hint-below {
+    max-width: 62ch;
+    margin: 1.1rem auto 1.2rem;
+    font-size: 1.08rem;
+    line-height: 1.55;
   }
 }