Complete rebuild: compact Stripe/Linear density, small images, tight spacing

Previous versions were bloated — huge images, massive padding, wasted
space. New approach: 3-col module grid, 6-col screenshot thumbnails,
side-by-side hero, everything above the fold. Nav back to white/light.
No more oversized cinematic nonsense.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/components.css

@@ -13,22 +13,19 @@
   top: 0;
   inset-inline: 0;
   z-index: var(--z-sticky);
-  background-color: transparent;
+  background-color: var(--bg-surface);
   border-bottom: 1px solid transparent;
-  padding-block: var(--space-sm);
+  padding-block: var(--space-xs);
   transition:
     border-color     var(--duration-slow) var(--ease-out),
     box-shadow       var(--duration-slow) var(--ease-out),
-    padding-block    var(--duration-slow) var(--ease-out),
     background-color var(--duration-slow) var(--ease-out);
 }
 
 /* Added by JS on scroll */
 .nav--scrolled {
-  background-color: var(--bg-dark-deeper);
-  border-bottom-color: rgba(255, 255, 255, 0.06);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  padding-block: var(--space-xs);
+  border-bottom-color: var(--border-subtle);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
 }
 
 .nav__inner {
@@ -70,7 +67,7 @@
 .nav__logo-text {
   font-size: var(--text-lg);
   font-weight: 800;
-  color: var(--ink-on-dark);
+  color: var(--color-primary);
   letter-spacing: var(--tracking-snug);
   line-height: 1;
 }
@@ -100,7 +97,7 @@
   padding: var(--space-xs) var(--space-sm);
   font-size: var(--text-sm);
   font-weight: 500;
-  color: var(--ink-on-dark-muted);
+  color: var(--ink-secondary);
   border-radius: var(--radius-sm);
   text-decoration: none;
   transition:
@@ -110,12 +107,12 @@
 }
 
 .nav__link:hover {
-  color: var(--ink-on-dark);
-  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--ink-primary);
+  background-color: var(--bg-muted);
 }
 
 .nav__link--active {
-  color: var(--ink-on-dark);
+  color: var(--ink-primary);
   font-weight: 600;
 }
 
@@ -178,9 +175,9 @@
   height: 2.5rem;
   align-items: center;
   justify-content: center;
-  color: var(--ink-on-dark);
+  color: var(--ink-primary);
   border-radius: var(--radius-sm);
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid var(--border-subtle);
   background-color: transparent;
   transition:
     background-color var(--duration-fast) var(--ease-out),
@@ -189,8 +186,8 @@
 }
 
 .nav__toggle:hover {
-  background-color: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--bg-muted);
+  border-color: var(--border-default);
 }
 
 .nav__toggle svg {