UI: enrich hero banner with retro console visuals

styles.css

@@ -122,6 +122,46 @@ body {
   background:
     linear-gradient(125deg, #f8fff7, #f4f8ff),
     var(--surface);
+  display: grid;
+  grid-template-columns: 1.35fr 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.hero-copy {
+  min-width: 0;
+}
+
+.hero-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
+.console-visual {
+  margin: 0;
+  border: 1px solid #d5dfeb;
+  background: linear-gradient(180deg, #ffffff, #f4f8ff);
+  border-radius: 12px;
+  padding: 0.45rem;
+  display: grid;
+  gap: 0.3rem;
+  place-items: center;
+  box-shadow: 0 6px 14px rgba(17, 36, 57, 0.08);
+}
+
+.console-visual img {
+  width: 100%;
+  max-width: 90px;
+  height: 54px;
+  object-fit: contain;
+}
+
+.console-visual figcaption {
+  font-size: 0.76rem;
+  color: #2a4663;
+  font-weight: 700;
+  text-align: center;
 }
 
 .eyebrow {
@@ -371,6 +411,15 @@ button {
 }
 
 @media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 0.8rem;
+  }
+
+  .hero-gallery {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .grid-form,
   .game-form {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -378,6 +427,10 @@ button {
 }
 
 @media (max-width: 640px) {
+  .hero-gallery {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .grid-form,
   .game-form {
     grid-template-columns: 1fr;