feat: replace hero mockup with real app screenshot

Updates the landing page hero section to show an actual screenshot
of the Dill application interface instead of a CSS placeholder mockup.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: TonsOfFun

app/assets/images/hero-app-screenshot.png

@@ -114,7 +114,14 @@
 
 .hero__mockup {
   inline-size: 100%;
-  max-inline-size: 32rem;
+  max-inline-size: 40rem;
+}
+
+.hero__screenshot {
+  inline-size: 100%;
+  block-size: auto;
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 }
 
 .mockup-window {

app/assets/stylesheets/marketing.css

@@ -16,25 +16,7 @@
   </div>
   <div class="hero__visual">
     <div class="hero__mockup">
-      <div class="mockup-window">
-        <div class="mockup-header">
-          <span class="mockup-dot"></span>
-          <span class="mockup-dot"></span>
-          <span class="mockup-dot"></span>
-        </div>
-        <div class="mockup-content">
-          <div class="mockup-sidebar">
-            <div class="mockup-item"></div>
-            <div class="mockup-item mockup-item--active"></div>
-            <div class="mockup-item"></div>
-          </div>
-          <div class="mockup-main">
-            <div class="mockup-title"></div>
-            <div class="mockup-text"></div>
-            <div class="mockup-text mockup-text--short"></div>
-          </div>
-        </div>
-      </div>
+      <%= image_tag "hero-app-screenshot.png", alt: "Dill - AI-Powered Due Diligence Reports Interface", class: "hero__screenshot" %>
     </div>
   </div>
 </section>