Redesign landing page with real feature screenshots (#125)

## Summary
- Redesign the landing page with a screenshot-driven layout replacing
placeholder icons
- Add real screenshots (light + dark mode) for all feature sections:
accounts, transactions, privacy, import, budgets (list, detail, edit),
and cashflow
- Update fonts to IBM Plex and refine section spacing, testimonials,
pricing, and FAQ

## Test plan
- [ ] Verify all feature screenshots load correctly in both light and
dark mode
- [ ] Check responsive layout across mobile, tablet, and desktop
- [ ] Confirm lazy loading works for images below the fold

resources/css/app.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@1,400;1,500;1,600;1,700&display=swap');
+
 @import 'tailwindcss';
 
 @import 'tw-animate-css';
@@ -9,7 +11,7 @@
 
 @theme {
     --font-sans:
-        'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
+        'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif,
         'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
         'Noto Color Emoji';
 
@@ -201,7 +203,8 @@
     }
 
     .font-heading {
-        font-family: 'Stack Sans Text', ui-sans-serif, system-ui, sans-serif;
+        font-family: 'IBM Plex Serif', ui-serif, Georgia, serif;
+        font-style: italic;
     }
 
     .animate-marquee {