add about page with features and competitor comparison.

Includes section nav, flow diagrams with lightbox, comparison table, brand theme tokens, and router hash scroll.

frontend/src/assets/css/main.css

@@ -1,7 +1,5 @@
 @import 'tailwindcss';
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
@@ -28,43 +26,23 @@
 
 :root {
     --radius: 0.5rem;
-    --background: oklch(0.99 0.002 260);
-    --foreground: oklch(0.2 0.02 260);
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.244 0.012 263);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.2 0.02 260);
-    --primary: oklch(0.42 0.08 260);
-    --primary-foreground: oklch(0.99 0.002 260);
-    --secondary: oklch(0.96 0.01 260);
-    --secondary-foreground: oklch(0.28 0.03 260);
-    --muted: oklch(0.96 0.008 260);
-    --muted-foreground: oklch(0.48 0.02 260);
-    --accent: oklch(0.94 0.02 260);
-    --accent-foreground: oklch(0.28 0.03 260);
+    --card-foreground: oklch(0.244 0.012 263);
+    --primary: oklch(0.497 0.227 263);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.94 0.025 263);
+    --secondary-foreground: oklch(0.28 0.04 263);
+    --muted: oklch(0.955 0.018 263);
+    --muted-foreground: oklch(0.46 0.04 263);
+    --accent: oklch(0.93 0.04 263);
+    --accent-foreground: oklch(0.28 0.04 263);
     --destructive: oklch(0.55 0.2 25);
     --success: oklch(0.45 0.14 155);
-    --border: oklch(0.9 0.01 260);
-    --input: oklch(0.9 0.01 260);
-    --ring: oklch(0.42 0.08 260);
-}
-
-.dark {
-    --background: oklch(0.16 0.02 260);
-    --foreground: oklch(0.96 0.01 260);
-    --card: oklch(0.2 0.02 260);
-    --card-foreground: oklch(0.96 0.01 260);
-    --primary: oklch(0.72 0.1 260);
-    --primary-foreground: oklch(0.18 0.02 260);
-    --secondary: oklch(0.24 0.02 260);
-    --secondary-foreground: oklch(0.96 0.01 260);
-    --muted: oklch(0.24 0.02 260);
-    --muted-foreground: oklch(0.68 0.02 260);
-    --accent: oklch(0.28 0.03 260);
-    --accent-foreground: oklch(0.96 0.01 260);
-    --destructive: oklch(0.62 0.2 25);
-    --success: oklch(0.68 0.14 155);
-    --border: oklch(0.32 0.02 260);
-    --input: oklch(0.32 0.02 260);
-    --ring: oklch(0.72 0.1 260);
+    --border: oklch(0.88 0.025 263);
+    --input: oklch(0.88 0.025 263);
+    --ring: oklch(0.497 0.227 263);
 }
 
 @layer base {
@@ -76,3 +54,67 @@
         @apply bg-background text-foreground antialiased;
     }
 }
+
+body:has(.lightbox:target) {
+    overflow: hidden;
+}
+
+.expandable-image__link {
+    color: inherit;
+    cursor: zoom-in;
+}
+
+.lightbox {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+}
+
+.lightbox:target {
+    display: flex;
+}
+
+.lightbox__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgb(0 0 0 / 0.92);
+}
+
+.lightbox__img {
+    position: relative;
+    z-index: 1;
+    max-width: min(95vw, 75rem);
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+}
+
+.lightbox__close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.75rem;
+    line-height: 1;
+    color: var(--foreground);
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    text-decoration: none;
+}
+
+.lightbox__close:hover {
+    border-color: var(--primary);
+}