feat(hero): add AI-generated 'From Code to Production' architecture banner to homepage

src/styles/global.css

@@ -537,6 +537,26 @@ pre code {
 .btn:hover { border-color: var(--brand); color: var(--brand); }
 .btn-primary { border-color: var(--brand); color: var(--brand); }
 .hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
+.hero-banner-card {
+  margin: 1.75rem 0 0.5rem;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.hero-banner-card:hover {
+  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+.hero-banner-img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  display: block;
+  object-fit: cover;
+}
 
 /* ---------- Featured 2x2 Cyber-Bento Grid ---------- */
 .featured-bento-grid {