From 075f92d2a674c7d5438a06fc3ddbde48e90e2834 Mon Sep 17 00:00:00 2001
From: Fabrizio Salmi <fabrizio.salmi@gmail.com>
Date: Fri, 1 May 2026 09:39:20 +0200
Subject: [PATCH] Refine home page: traffic-grid hero, editorial feature rail,
 real platform marks

- Replace hero shield with HeroVisual: 11-track flowing SVG of request glyphs
  with ~7% Apple-red blocked highlights, slow CSS-only drift, edge fade,
  monospace meta header and pass/blocked footer (data-driven feel).
- Drop the six default feature cards. New HomeFeatureRail renders a 3x2
  hairline-bordered editorial grid: numbered eyebrow + bold title + body,
  zero icon chrome.
- Redraw platform icons as recognizable brand marks (Nginx hexagon-N, Apache
  feather, Traefik "Mr. Traefik" head, HAProxy load-balanced H). Showcase
  cards drop card chrome in favor of column dividers; hover adopts the
  platform's brand color via per-card --accent CSS var.
- Stats strip becomes a hairline-bordered four-column rail with tabular-num
  values, mono sub-labels, and a Google-data-display feel.
- Hero name no longer uses gradient text; pure neutral.
- Code-block bg corrected for light mode.
- Respects prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../theme/components/HeroVisual.vue           | 264 ++++++
 .../theme/components/HomeFeatureRail.vue      | 157 ++++
 .../theme/components/HomeShowcase.vue         |  97 +-
 .../theme/components/icons/IconApache.vue     |  16 +-
 .../theme/components/icons/IconHaproxy.vue    |  16 +-
 .../theme/components/icons/IconNginx.vue      |   9 +-
 .../theme/components/icons/IconTraefik.vue    |  11 +-
 docs/.vitepress/theme/index.ts                |   8 +-
 docs/.vitepress/theme/style.css               | 830 +++++++++---------
 docs/index.md                                 |  41 +-
 docs/public/hero-shield.svg                   |  21 -
 11 files changed, 933 insertions(+), 537 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/HeroVisual.vue
 create mode 100644 docs/.vitepress/theme/components/HomeFeatureRail.vue
 delete mode 100644 docs/public/hero-shield.svg

diff --git a/docs/.vitepress/theme/components/HeroVisual.vue b/docs/.vitepress/theme/components/HeroVisual.vue
new file mode 100644
index 0000000..44a399e
--- /dev/null
+++ b/docs/.vitepress/theme/components/HeroVisual.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+// Deterministic pseudo-random sequence so SSR and client agree.
+function lcg(seed: number) {
+    let n = seed
+    return () => {
+        n = (n * 1103515245 + 12345) % 2147483648
+        return n / 2147483648
+    }
+}
+
+type Seg = { x: number; w: number; blocked: boolean }
+
+function buildTrack(seed: number): Seg[] {
+    const r = lcg(seed)
+    const segs: Seg[] = []
+    let x = 0
+    const widths = [4, 6, 8, 10, 14, 18, 22]
+    const gaps = [4, 5, 6, 8, 10]
+    while (x < 480) {
+        const w = widths[Math.floor(r() * widths.length)]
+        const gap = gaps[Math.floor(r() * gaps.length)]
+        const blocked = r() < 0.07 // ~7%
+        segs.push({ x, w, blocked })
+        x += w + gap
+    }
+    return segs
+}
+
+const trackCount = 11
+const tracks = Array.from({ length: trackCount }, (_, i) => ({
+    y: 18 + i * 26,
+    delay: -(i * 2.7),
+    duration: 36 + (i % 3) * 6, // slight variance per track
+    segs: buildTrack(i + 7)
+}))
+</script>
+
+<template>
+    <div class="hero-visual" aria-hidden="true">
+        <div class="hero-visual-frame">
+            <div class="hero-visual-meta">
+                <span class="meta-label">// inbound · request inspection</span>
+                <span class="meta-live">
+                    <span class="live-dot" />
+                    live
+                </span>
+            </div>
+
+            <svg
+                class="hero-visual-svg"
+                viewBox="0 0 480 320"
+                preserveAspectRatio="xMidYMid slice"
+            >
+                <defs>
+                    <linearGradient id="edge-fade" x1="0" x2="1" y1="0" y2="0">
+                        <stop offset="0" stop-color="#fff" stop-opacity="0" />
+                        <stop offset="0.08" stop-color="#fff" stop-opacity="1" />
+                        <stop offset="0.92" stop-color="#fff" stop-opacity="1" />
+                        <stop offset="1" stop-color="#fff" stop-opacity="0" />
+                    </linearGradient>
+                    <mask id="edge-mask">
+                        <rect x="0" y="0" width="480" height="320" fill="url(#edge-fade)" />
+                    </mask>
+                </defs>
+
+                <g mask="url(#edge-mask)">
+                    <g
+                        v-for="(t, i) in tracks"
+                        :key="i"
+                        :transform="`translate(0, ${t.y})`"
+                    >
+                        <g
+                            class="drift"
+                            :style="{
+                                '--drift-delay': `${t.delay}s`,
+                                '--drift-duration': `${t.duration}s`
+                            }"
+                        >
+                            <!-- two copies side-by-side give a seamless loop -->
+                            <g v-for="copy in 2" :key="copy" :transform="`translate(${(copy - 1) * 480}, 0)`">
+                                <template v-for="(s, j) in t.segs" :key="j">
+                                    <rect
+                                        :x="s.x"
+                                        y="-2"
+                                        :width="s.w"
+                                        height="4"
+                                        rx="2"
+                                        :class="s.blocked ? 'seg-blocked' : 'seg-normal'"
+                                    />
+                                </template>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </svg>
+
+            <div class="hero-visual-foot">
+                <span class="foot-stat">
+                    <span class="stat-num">99.93<span class="stat-unit">%</span></span>
+                    <span class="stat-key">pass</span>
+                </span>
+                <span class="foot-sep" />
+                <span class="foot-stat foot-stat--blocked">
+                    <span class="stat-num">0.07<span class="stat-unit">%</span></span>
+                    <span class="stat-key">blocked</span>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.hero-visual {
+    position: relative;
+    width: 100%;
+    max-width: 540px;
+    margin-left: auto;
+}
+
+.hero-visual-frame {
+    position: relative;
+    border-radius: 18px;
+    border: 1px solid var(--vp-c-divider);
+    background:
+        linear-gradient(180deg, var(--vp-c-bg-elv), var(--vp-c-bg-alt));
+    padding: 18px 18px 14px;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.04) inset,
+        0 24px 60px -28px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+}
+
+.dark .hero-visual-frame {
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.04) inset,
+        0 24px 60px -20px rgba(0, 0, 0, 0.7);
+}
+
+.hero-visual-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+    font-family: var(--vp-font-family-mono);
+    font-size: 11px;
+    letter-spacing: 0.04em;
+    color: var(--vp-c-text-3);
+}
+
+.meta-label {
+    text-transform: lowercase;
+}
+
+.meta-live {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    color: var(--vp-c-text-2);
+}
+
+.live-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: #34c759; /* Apple system green */
+    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
+    animation: live-pulse 2.4s ease-out infinite;
+}
+
+@keyframes live-pulse {
+    0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
+    70%  { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
+}
+
+.hero-visual-svg {
+    width: 100%;
+    height: 280px;
+    display: block;
+}
+
+.seg-normal {
+    fill: var(--vp-c-text-3);
+    fill-opacity: 0.32;
+}
+.dark .seg-normal {
+    fill-opacity: 0.42;
+}
+
+.seg-blocked {
+    fill: #ff453a; /* Apple system red */
+    fill-opacity: 0.95;
+}
+
+.drift {
+    animation: drift var(--drift-duration, 36s) linear infinite;
+    animation-delay: var(--drift-delay, 0s);
+    will-change: transform;
+}
+
+@keyframes drift {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-480px); }
+}
+
+.hero-visual-foot {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-top: 12px;
+    margin-top: 4px;
+    border-top: 1px solid var(--vp-c-divider);
+    font-family: var(--vp-font-family-mono);
+    font-variant-numeric: tabular-nums;
+}
+
+.foot-stat {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 8px;
+}
+
+.stat-num {
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--vp-c-text-1);
+}
+
+.stat-unit {
+    font-size: 11px;
+    color: var(--vp-c-text-3);
+    margin-left: 1px;
+}
+
+.stat-key {
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--vp-c-text-3);
+}
+
+.foot-stat--blocked .stat-num {
+    color: #ff453a;
+}
+
+.foot-sep {
+    flex: 1;
+    height: 1px;
+    background: var(--vp-c-divider);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .drift {
+        animation: none;
+    }
+    .live-dot {
+        animation: none;
+    }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/HomeFeatureRail.vue b/docs/.vitepress/theme/components/HomeFeatureRail.vue
new file mode 100644
index 0000000..033e059
--- /dev/null
+++ b/docs/.vitepress/theme/components/HomeFeatureRail.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+const features = [
+    {
+        eyebrow: '01',
+        title: 'OWASP CRS coverage',
+        body: 'Rules for SQL injection, XSS, RCE, LFI, and RFI, derived from the same Core Rule Set behind ModSecurity.'
+    },
+    {
+        eyebrow: '02',
+        title: 'Native multi-server output',
+        body: 'One source, four idiomatic backends — Nginx maps, Apache SecRule, Traefik middleware, HAProxy ACL files.'
+    },
+    {
+        eyebrow: '03',
+        title: 'Bad-bot blocking',
+        body: 'Curated User-Agent lists from public sources — scrapers, AI crawlers, scanners, with allow-lists for legitimate engines.'
+    },
+    {
+        eyebrow: '04',
+        title: 'Daily automated rebuild',
+        body: 'A scheduled GitHub Actions workflow re-fetches the latest CRS release and republishes every archive — no maintenance.'
+    },
+    {
+        eyebrow: '05',
+        title: 'Pre-built archives',
+        body: 'Drop-in zips published on every run: nginx_waf.zip, apache_waf.zip, traefik_waf.zip, haproxy_waf.zip.'
+    },
+    {
+        eyebrow: '06',
+        title: 'Composable pipeline',
+        body: 'Each backend is a small Python converter on a single JSON intermediate. Adding a platform is a few hundred lines.'
+    }
+]
+</script>
+
+<template>
+    <section class="home-rail">
+        <header class="home-rail-head">
+            <span class="home-eyebrow">Capabilities</span>
+            <h2 class="home-title">Engineered for production</h2>
+            <p class="home-lede">
+                Six guarantees that turn a daily scrape of upstream rules into something your traffic can actually
+                live behind &mdash; quietly, predictably, and without operator toil.
+            </p>
+        </header>
+
+        <ul class="rail-grid">
+            <li v-for="f in features" :key="f.title" class="rail-item">
+                <span class="rail-eyebrow">{{ f.eyebrow }}</span>
+                <h3 class="rail-title">{{ f.title }}</h3>
+                <p class="rail-body">{{ f.body }}</p>
+            </li>
+        </ul>
+    </section>
+</template>
+
+<style scoped>
+.home-rail {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 24px 24px 80px;
+}
+
+.home-rail-head {
+    margin-bottom: 56px;
+    max-width: 720px;
+}
+
+.rail-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--vp-c-divider);
+}
+
+@media (max-width: 900px) {
+    .rail-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .rail-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.rail-item {
+    position: relative;
+    padding: 28px 24px 32px 0;
+    border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.rail-item:not(:nth-child(3n)) {
+    border-right: 1px solid var(--vp-c-divider);
+    padding-right: 24px;
+}
+.rail-item:not(:nth-child(3n)) {
+    padding-left: 24px;
+}
+.rail-item:nth-child(3n+1) {
+    padding-left: 0;
+}
+
+@media (max-width: 900px) {
+    .rail-item:not(:nth-child(3n)) {
+        border-right: none;
+    }
+    .rail-item:nth-child(odd) {
+        border-right: 1px solid var(--vp-c-divider);
+        padding-right: 24px;
+        padding-left: 0;
+    }
+    .rail-item:nth-child(even) {
+        padding-left: 24px;
+        padding-right: 0;
+    }
+}
+
+@media (max-width: 600px) {
+    .rail-item,
+    .rail-item:nth-child(odd),
+    .rail-item:nth-child(even) {
+        border-right: none !important;
+        padding: 24px 0 24px 0;
+    }
+}
+
+.rail-eyebrow {
+    display: inline-block;
+    font-family: var(--vp-font-family-mono);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    color: var(--vp-c-text-3);
+    margin-bottom: 14px;
+}
+
+.rail-title {
+    font-size: 1.05rem;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    color: var(--vp-c-text-1);
+    margin: 0 0 8px;
+    line-height: 1.3;
+}
+
+.rail-body {
+    font-size: 0.92rem;
+    line-height: 1.55;
+    color: var(--vp-c-text-2);
+    margin: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/HomeShowcase.vue b/docs/.vitepress/theme/components/HomeShowcase.vue
index fa0d8e4..24c3814 100644
--- a/docs/.vitepress/theme/components/HomeShowcase.vue
+++ b/docs/.vitepress/theme/components/HomeShowcase.vue
@@ -1,63 +1,62 @@
-<script setup>
+<script setup lang="ts">
+import { withBase } from 'vitepress'
 import IconNginx from './icons/IconNginx.vue'
 import IconApache from './icons/IconApache.vue'
 import IconTraefik from './icons/IconTraefik.vue'
 import IconHaproxy from './icons/IconHaproxy.vue'
 import IconArrow from './icons/IconArrow.vue'
-import { withBase } from 'vitepress'
 
 const platforms = [
-  { name: 'Nginx',   meta: 'map directives + if rules',     href: '/nginx',   icon: IconNginx   },
-  { name: 'Apache',  meta: 'ModSecurity SecRule directives', href: '/apache',  icon: IconApache  },
-  { name: 'Traefik', meta: 'Middleware TOML configuration',  href: '/traefik', icon: IconTraefik },
-  { name: 'HAProxy', meta: 'ACL pattern files',              href: '/haproxy', icon: IconHaproxy }
+    { name: 'Nginx',   meta: 'map directives + if rules',     href: '/nginx',   icon: IconNginx,   accent: '#009639' },
+    { name: 'Apache',  meta: 'ModSecurity SecRule directives', href: '/apache',  icon: IconApache,  accent: '#d22128' },
+    { name: 'Traefik', meta: 'Middleware TOML configuration',  href: '/traefik', icon: IconTraefik, accent: '#24a1c1' },
+    { name: 'HAProxy', meta: 'ACL pattern files',              href: '/haproxy', icon: IconHaproxy, accent: '#7cc242' }
+]
+
+const stats = [
+    { value: '600+',  label: 'OWASP CRS patterns', sub: 'Extracted from upstream daily' },
+    { value: 'Daily', label: 'Refresh cadence',     sub: 'Scheduled GitHub Actions' },
+    { value: '4',     label: 'Server backends',     sub: 'Native, idiomatic output' },
+    { value: 'MIT',   label: 'License',             sub: 'Open-source, no vendor lock' }
 ]
 </script>
 
 <template>
-  <section class="home-section">
-    <div class="home-eyebrow">Integrations</div>
-    <h2 class="home-title">Four web servers, one source of truth</h2>
-    <p class="home-lede">
-      The same OWASP CRS rule set is converted into the native syntax of each platform &mdash;
-      so you get equivalent protection whether you run Nginx, Apache, Traefik, or HAProxy.
-    </p>
+    <section class="home-section">
+        <header class="home-rail-head">
+            <span class="home-eyebrow">Integrations</span>
+            <h2 class="home-title">Four web servers, one source of truth</h2>
+            <p class="home-lede">
+                The same OWASP CRS rule set is converted into the native syntax of each platform &mdash;
+                so you get equivalent protection regardless of the proxy in front of your stack.
+            </p>
+        </header>
 
-    <div class="platform-grid">
-      <a
-        v-for="p in platforms"
-        :key="p.name"
-        :href="withBase(p.href)"
-        class="platform-card"
-      >
-        <span class="platform-icon">
-          <component :is="p.icon" />
-        </span>
-        <div class="platform-name">{{ p.name }}</div>
-        <div class="platform-meta">{{ p.meta }}</div>
-        <span class="platform-arrow"><IconArrow /></span>
-      </a>
-    </div>
-  </section>
+        <div class="platform-grid">
+            <a
+                v-for="p in platforms"
+                :key="p.name"
+                :href="withBase(p.href)"
+                class="platform-card"
+                :style="{ '--accent': p.accent }"
+            >
+                <span class="platform-icon">
+                    <component :is="p.icon" />
+                </span>
+                <div class="platform-name">{{ p.name }}</div>
+                <div class="platform-meta">{{ p.meta }}</div>
+                <span class="platform-arrow"><IconArrow /></span>
+            </a>
+        </div>
+    </section>
 
-  <section class="home-section">
-    <div class="stats-strip">
-      <div class="stat-item">
-        <div class="stat-value">600+</div>
-        <div class="stat-label">OWASP CRS patterns extracted</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">Daily</div>
-        <div class="stat-label">Automated rule refresh</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">4</div>
-        <div class="stat-label">Web server backends</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-value">MIT</div>
-        <div class="stat-label">Open-source license</div>
-      </div>
-    </div>
-  </section>
+    <section class="home-section home-section--stats">
+        <div class="stats-rail">
+            <div v-for="s in stats" :key="s.label" class="stat-cell">
+                <div class="stat-value">{{ s.value }}</div>
+                <div class="stat-key">{{ s.label }}</div>
+                <div class="stat-sub">{{ s.sub }}</div>
+            </div>
+        </div>
+    </section>
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconApache.vue b/docs/.vitepress/theme/components/icons/IconApache.vue
index 0deda2a..5bb20ae 100644
--- a/docs/.vitepress/theme/components/icons/IconApache.vue
+++ b/docs/.vitepress/theme/components/icons/IconApache.vue
@@ -1,8 +1,12 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M5.5 20c1-4 3-9 6.5-13.5 1.5 1.5 2.5 3.5 3 5.5" />
-    <path d="M9 14c2-3 5-5 9-5" />
-    <path d="M11 17c2-2 5-3 8-3" />
-    <path d="M5.5 20h2" />
-  </svg>
+    <!-- Apache-inspired feather: curved spine with tapered barbs -->
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M20 4c-9 1-15 8-16 17" />
+        <path d="M17.5 4.7c-3 .2-5.6 1.7-7.6 4.1" />
+        <path d="M14.5 6c-2.2.5-4.2 1.9-5.6 3.9" />
+        <path d="M11.6 8.2c-1.6.7-3.1 2-4.1 3.6" />
+        <path d="M9 11.2c-1.4.8-2.6 2-3.4 3.4" />
+        <path d="M6.5 14.6c-1 .9-1.8 2-2.4 3.3" />
+        <path d="M4 21h2.5" />
+    </svg>
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconHaproxy.vue b/docs/.vitepress/theme/components/icons/IconHaproxy.vue
index e6769ed..ffee542 100644
--- a/docs/.vitepress/theme/components/icons/IconHaproxy.vue
+++ b/docs/.vitepress/theme/components/icons/IconHaproxy.vue
@@ -1,9 +1,11 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <circle cx="5" cy="12" r="2" />
-    <circle cx="19" cy="6" r="2" />
-    <circle cx="19" cy="18" r="2" />
-    <path d="M7 11 17 7" />
-    <path d="M7 13l10 4" />
-  </svg>
+    <!-- HAProxy-inspired stylized H with load-balanced node accents -->
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M5 4v16" />
+        <path d="M19 4v16" />
+        <path d="M5 12h14" />
+        <circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none" />
+        <circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none" />
+        <path d="M5 6h2M17 6h2M5 18h2M17 18h2" stroke-opacity="0.55" />
+    </svg>
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconNginx.vue b/docs/.vitepress/theme/components/icons/IconNginx.vue
index 4f9c320..fcb1d54 100644
--- a/docs/.vitepress/theme/components/icons/IconNginx.vue
+++ b/docs/.vitepress/theme/components/icons/IconNginx.vue
@@ -1,6 +1,7 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M12 2.5 3.5 7v10L12 21.5 20.5 17V7L12 2.5Z" />
-    <path d="M9 16V8l6 8V8" />
-  </svg>
+    <!-- Nginx-inspired hexagon mark with angular N -->
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 2.5 4 7v10l8 4.5L20 17V7L12 2.5Z" />
+        <path d="M9.5 16.5V8.2l5 7.7V8.2" />
+    </svg>
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconTraefik.vue b/docs/.vitepress/theme/components/icons/IconTraefik.vue
index ab0e5fc..9ed3db6 100644
--- a/docs/.vitepress/theme/components/icons/IconTraefik.vue
+++ b/docs/.vitepress/theme/components/icons/IconTraefik.vue
@@ -1,5 +1,10 @@
 <template>
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-    <path d="M3 12h4l2-3 3 6 3-9 2 6h4" />
-  </svg>
+    <!-- Traefik-inspired "Mr. Traefik" mark: rounded body with horns and eyes -->
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M5 11.5v6.5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6.5" />
+        <path d="m5 11.5 2-7 2 4 1.5-3 1.5 3 1.5-3 1.5 3 2-4 2 7" />
+        <circle cx="9.5" cy="14.6" r="0.85" fill="currentColor" stroke="none" />
+        <circle cx="14.5" cy="14.6" r="0.85" fill="currentColor" stroke="none" />
+        <path d="M10.5 17.6h3" />
+    </svg>
 </template>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index ef1009f..8f96ca2 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,8 @@
-import { h } from 'vue'
+import { h, Fragment } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import HeroVisual from './components/HeroVisual.vue'
+import HomeFeatureRail from './components/HomeFeatureRail.vue'
 import HomeShowcase from './components/HomeShowcase.vue'
 import './style.css'
 
@@ -8,7 +10,9 @@ export default {
     extends: DefaultTheme,
     Layout: () => {
         return h(DefaultTheme.Layout, null, {
-            'home-features-after': () => h(HomeShowcase)
+            'home-hero-image': () => h(HeroVisual),
+            'home-features-after': () =>
+                h(Fragment, null, [h(HomeFeatureRail), h(HomeShowcase)])
         })
     }
 } satisfies Theme
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 3c8424e..1e4d8fc 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -1,621 +1,641 @@
 /* =============================================================
-   Patterns Docs — Apple-native theme
-   System fonts, refined typography, soft surfaces, glass nav.
+   Patterns Docs — refined home theme
+   v0/Vercel hairlines + Apple balance + Google data clarity.
    ============================================================= */
 
 :root {
-  /* Typography — system stack, identical to Apple's web properties */
-  --vp-font-family-base:
-    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
-    "Helvetica Neue", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
-  --vp-font-family-mono:
-    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
-    Menlo, Consolas, "Liberation Mono", monospace;
+    /* Typography — system stack identical to Apple's web properties */
+    --vp-font-family-base:
+        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
+        "Helvetica Neue", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
+    --vp-font-family-mono:
+        ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
+        Menlo, Consolas, "Liberation Mono", monospace;
 
-  /* Brand — Apple-system blue, refined */
-  --apple-blue: #0071e3;
-  --apple-blue-hover: #0077ed;
-  --apple-blue-active: #006edb;
-  --apple-cyan: #5ac8fa;
+    /* Brand */
+    --apple-blue: #0071e3;
+    --apple-blue-hover: #0077ed;
+    --apple-blue-active: #006edb;
+    --apple-red: #ff453a;
 
-  /* Light surfaces */
-  --vp-c-bg: #ffffff;
-  --vp-c-bg-alt: #fbfbfd;
-  --vp-c-bg-soft: #f5f5f7;
-  --vp-c-bg-elv: #ffffff;
+    /* Light surfaces */
+    --vp-c-bg: #ffffff;
+    --vp-c-bg-alt: #fbfbfd;
+    --vp-c-bg-soft: #f5f5f7;
+    --vp-c-bg-elv: #ffffff;
 
-  /* Borders — almost invisible, like Apple */
-  --vp-c-divider: rgba(0, 0, 0, 0.07);
-  --vp-c-border: rgba(0, 0, 0, 0.09);
-  --vp-c-gutter: rgba(0, 0, 0, 0.06);
+    /* Borders — almost invisible */
+    --vp-c-divider: rgba(0, 0, 0, 0.08);
+    --vp-c-border: rgba(0, 0, 0, 0.10);
+    --vp-c-gutter: rgba(0, 0, 0, 0.06);
 
-  /* Text — Apple uses near-black, high contrast */
-  --vp-c-text-1: #1d1d1f;
-  --vp-c-text-2: #515154;
-  --vp-c-text-3: #86868b;
+    /* Text */
+    --vp-c-text-1: #1d1d1f;
+    --vp-c-text-2: #515154;
+    --vp-c-text-3: #86868b;
 
-  /* Brand color slots used by VitePress */
-  --vp-c-brand-1: var(--apple-blue);
-  --vp-c-brand-2: var(--apple-blue-hover);
-  --vp-c-brand-3: var(--apple-blue-active);
-  --vp-c-brand-soft: rgba(0, 113, 227, 0.10);
+    /* Brand color slots */
+    --vp-c-brand-1: var(--apple-blue);
+    --vp-c-brand-2: var(--apple-blue-hover);
+    --vp-c-brand-3: var(--apple-blue-active);
+    --vp-c-brand-soft: rgba(0, 113, 227, 0.10);
 
-  /* Tip / warning / etc — calmer than defaults */
-  --vp-c-tip-1: #0071e3;
-  --vp-c-tip-soft: rgba(0, 113, 227, 0.08);
-  --vp-c-warning-1: #b25000;
-  --vp-c-warning-soft: rgba(255, 159, 10, 0.10);
-  --vp-c-danger-1: #c53030;
-  --vp-c-danger-soft: rgba(255, 59, 48, 0.08);
+    /* Tip / warning */
+    --vp-c-tip-1: #0071e3;
+    --vp-c-tip-soft: rgba(0, 113, 227, 0.08);
+    --vp-c-warning-1: #b25000;
+    --vp-c-warning-soft: rgba(255, 159, 10, 0.10);
+    --vp-c-danger-1: #c53030;
+    --vp-c-danger-soft: rgba(255, 59, 48, 0.08);
 
-  /* Layout rhythm */
-  --vp-layout-max-width: 1440px;
-  --vp-nav-height: 60px;
+    --vp-layout-max-width: 1440px;
+    --vp-nav-height: 60px;
 
-  /* Radii — Apple loves soft, generous corners */
-  --radius-xs: 6px;
-  --radius-sm: 10px;
-  --radius-md: 14px;
-  --radius-lg: 20px;
-  --radius-xl: 28px;
+    --radius-xs: 6px;
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --radius-xl: 24px;
 
-  /* Elevation — soft, low-spread shadows */
-  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05);
-  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
-  --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.16), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
+    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
+    --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.16), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
 
-  /* Buttons / brand surface */
-  --vp-button-brand-border: transparent;
-  --vp-button-brand-text: #fff;
-  --vp-button-brand-bg: var(--apple-blue);
-  --vp-button-brand-hover-border: transparent;
-  --vp-button-brand-hover-text: #fff;
-  --vp-button-brand-hover-bg: var(--apple-blue-hover);
-  --vp-button-brand-active-border: transparent;
-  --vp-button-brand-active-text: #fff;
-  --vp-button-brand-active-bg: var(--apple-blue-active);
+    /* Buttons */
+    --vp-button-brand-border: transparent;
+    --vp-button-brand-text: #fff;
+    --vp-button-brand-bg: var(--apple-blue);
+    --vp-button-brand-hover-border: transparent;
+    --vp-button-brand-hover-text: #fff;
+    --vp-button-brand-hover-bg: var(--apple-blue-hover);
+    --vp-button-brand-active-border: transparent;
+    --vp-button-brand-active-text: #fff;
+    --vp-button-brand-active-bg: var(--apple-blue-active);
 
-  --vp-button-alt-border: transparent;
-  --vp-button-alt-text: #1d1d1f;
-  --vp-button-alt-bg: rgba(0, 0, 0, 0.06);
-  --vp-button-alt-hover-bg: rgba(0, 0, 0, 0.09);
-  --vp-button-alt-active-bg: rgba(0, 0, 0, 0.12);
+    --vp-button-alt-border: transparent;
+    --vp-button-alt-text: #1d1d1f;
+    --vp-button-alt-bg: rgba(0, 0, 0, 0.06);
+    --vp-button-alt-hover-bg: rgba(0, 0, 0, 0.09);
+    --vp-button-alt-active-bg: rgba(0, 0, 0, 0.12);
 
-  /* Code blocks — soft surface in light, deep in dark */
-  --vp-code-block-bg: #f5f5f7;
-  --vp-code-block-color: #1d1d1f;
-  --vp-code-line-highlight-color: rgba(0, 0, 0, 0.05);
-  --vp-code-tab-bg: #f5f5f7;
-  --vp-code-tab-divider: var(--vp-c-divider);
+    /* Code blocks — soft surface in light, deep in dark */
+    --vp-code-block-bg: #f5f5f7;
+    --vp-code-block-color: #1d1d1f;
+    --vp-code-line-highlight-color: rgba(0, 0, 0, 0.05);
+    --vp-code-tab-bg: #f5f5f7;
+    --vp-code-tab-divider: var(--vp-c-divider);
 }
 
 .dark {
-  --vp-c-bg: #000000;
-  --vp-c-bg-alt: #0a0a0c;
-  --vp-c-bg-soft: #161618;
-  --vp-c-bg-elv: #1c1c1e;
+    --vp-c-bg: #000000;
+    --vp-c-bg-alt: #0a0a0c;
+    --vp-c-bg-soft: #161618;
+    --vp-c-bg-elv: #131316;
 
-  --vp-c-divider: rgba(255, 255, 255, 0.08);
-  --vp-c-border: rgba(255, 255, 255, 0.10);
-  --vp-c-gutter: rgba(255, 255, 255, 0.06);
+    --vp-c-divider: rgba(255, 255, 255, 0.08);
+    --vp-c-border: rgba(255, 255, 255, 0.12);
+    --vp-c-gutter: rgba(255, 255, 255, 0.06);
 
-  --vp-c-text-1: #f5f5f7;
-  --vp-c-text-2: #a1a1a6;
-  --vp-c-text-3: #6e6e73;
+    --vp-c-text-1: #f5f5f7;
+    --vp-c-text-2: #a1a1a6;
+    --vp-c-text-3: #6e6e73;
 
-  --apple-blue: #0a84ff;
-  --apple-blue-hover: #409cff;
-  --apple-blue-active: #0a84ff;
+    --apple-blue: #0a84ff;
+    --apple-blue-hover: #409cff;
+    --apple-blue-active: #0a84ff;
 
-  --vp-c-brand-1: var(--apple-blue);
-  --vp-c-brand-2: var(--apple-blue-hover);
-  --vp-c-brand-3: var(--apple-blue-active);
-  --vp-c-brand-soft: rgba(10, 132, 255, 0.16);
+    --vp-c-brand-1: var(--apple-blue);
+    --vp-c-brand-2: var(--apple-blue-hover);
+    --vp-c-brand-3: var(--apple-blue-active);
+    --vp-c-brand-soft: rgba(10, 132, 255, 0.18);
 
-  --vp-c-tip-1: #0a84ff;
-  --vp-c-tip-soft: rgba(10, 132, 255, 0.12);
-  --vp-c-warning-1: #ffb340;
-  --vp-c-warning-soft: rgba(255, 159, 10, 0.14);
-  --vp-c-danger-1: #ff6961;
-  --vp-c-danger-soft: rgba(255, 69, 58, 0.14);
+    --vp-c-tip-1: #0a84ff;
+    --vp-c-tip-soft: rgba(10, 132, 255, 0.12);
+    --vp-c-warning-1: #ffb340;
+    --vp-c-warning-soft: rgba(255, 159, 10, 0.14);
+    --vp-c-danger-1: #ff6961;
+    --vp-c-danger-soft: rgba(255, 69, 58, 0.14);
 
-  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
-  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
-  --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
+    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
+    --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
+    --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
 
-  --vp-button-alt-text: #f5f5f7;
-  --vp-button-alt-bg: rgba(255, 255, 255, 0.10);
-  --vp-button-alt-hover-bg: rgba(255, 255, 255, 0.14);
-  --vp-button-alt-active-bg: rgba(255, 255, 255, 0.18);
+    --vp-button-alt-text: #f5f5f7;
+    --vp-button-alt-bg: rgba(255, 255, 255, 0.10);
+    --vp-button-alt-hover-bg: rgba(255, 255, 255, 0.14);
+    --vp-button-alt-active-bg: rgba(255, 255, 255, 0.18);
 
-  --vp-code-block-bg: #161618;
-  --vp-code-block-color: #f5f5f7;
-  --vp-code-line-highlight-color: rgba(255, 255, 255, 0.06);
-  --vp-code-tab-bg: #161618;
-  --vp-code-tab-divider: var(--vp-c-divider);
+    --vp-code-block-bg: #161618;
+    --vp-code-block-color: #f5f5f7;
+    --vp-code-line-highlight-color: rgba(255, 255, 255, 0.06);
+    --vp-code-tab-bg: #161618;
+    --vp-code-tab-divider: var(--vp-c-divider);
 }
 
 /* ---------- Global typography ---------- */
 
 html {
-  font-feature-settings: "kern", "liga", "calt", "ss01";
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "kern", "liga", "calt", "ss01";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  font-family: var(--vp-font-family-base);
-  letter-spacing: -0.01em;
+    font-family: var(--vp-font-family-base);
+    letter-spacing: -0.01em;
 }
 
 .VPDoc h1 {
-  letter-spacing: -0.025em;
-  font-weight: 700;
-  font-size: 2.4rem;
-  line-height: 1.15;
+    letter-spacing: -0.025em;
+    font-weight: 700;
+    font-size: 2.4rem;
+    line-height: 1.15;
 }
 
 .VPDoc h2 {
-  letter-spacing: -0.02em;
-  font-weight: 650;
-  margin-top: 3rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--vp-c-divider);
+    letter-spacing: -0.02em;
+    font-weight: 650;
+    margin-top: 3rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--vp-c-divider);
 }
 
 .VPDoc h3 {
-  letter-spacing: -0.015em;
-  font-weight: 600;
-  margin-top: 2rem;
+    letter-spacing: -0.015em;
+    font-weight: 600;
+    margin-top: 2rem;
 }
 
 .VPDoc p,
 .VPDoc li {
-  font-size: 1rem;
-  line-height: 1.7;
-  color: var(--vp-c-text-1);
+    font-size: 1rem;
+    line-height: 1.7;
+    color: var(--vp-c-text-1);
 }
 
 .VPDoc a:not(.header-anchor) {
-  text-decoration: none;
-  font-weight: 500;
-  color: var(--vp-c-brand-1);
-  transition: color 0.15s ease;
+    text-decoration: none;
+    font-weight: 500;
+    color: var(--vp-c-brand-1);
+    transition: color 0.15s ease;
 }
 .VPDoc a:not(.header-anchor):hover {
-  color: var(--vp-c-brand-2);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
+    color: var(--vp-c-brand-2);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
 }
 
 /* ---------- Glass navigation ---------- */
 
 .VPNav {
-  background: transparent !important;
+    background: transparent !important;
 }
 
 .VPNavBar {
-  background: rgba(255, 255, 255, 0.72) !important;
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
-  border-bottom: 1px solid var(--vp-c-divider) !important;
+    background: rgba(255, 255, 255, 0.72) !important;
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+    border-bottom: 1px solid var(--vp-c-divider) !important;
 }
 .dark .VPNavBar {
-  background: rgba(0, 0, 0, 0.72) !important;
+    background: rgba(0, 0, 0, 0.72) !important;
 }
 .VPNavBar.has-sidebar .content-body {
-  background: transparent !important;
+    background: transparent !important;
 }
 .VPNavBar .divider {
-  display: none;
+    display: none;
 }
 .VPNavBarTitle .title {
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  border-bottom: none !important;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    border-bottom: none !important;
 }
 .VPNavBarMenuLink,
 .VPNavBarMenuGroup .text {
-  font-size: 14px !important;
-  font-weight: 450 !important;
-  color: var(--vp-c-text-1) !important;
-  opacity: 0.92;
+    font-size: 14px !important;
+    font-weight: 450 !important;
+    color: var(--vp-c-text-1) !important;
+    opacity: 0.9;
 }
 .VPNavBarMenuLink:hover,
 .VPNavBarMenuGroup:hover .text {
-  opacity: 1;
-  color: var(--vp-c-text-1) !important;
+    opacity: 1;
+    color: var(--vp-c-text-1) !important;
 }
 
 /* ---------- Sidebar ---------- */
 
 .VPSidebar {
-  background: var(--vp-c-bg-alt) !important;
-  border-right: 1px solid var(--vp-c-divider) !important;
+    background: var(--vp-c-bg-alt) !important;
+    border-right: 1px solid var(--vp-c-divider) !important;
 }
 .VPSidebarItem.level-0 > .item > .text {
-  font-weight: 600 !important;
-  letter-spacing: -0.005em;
-  color: var(--vp-c-text-1) !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.005em;
+    color: var(--vp-c-text-1) !important;
 }
 .VPSidebarItem .link .link-text {
-  font-weight: 450;
-  font-size: 14px;
+    font-weight: 450;
+    font-size: 14px;
 }
 .VPSidebarItem.is-active > .item .link-text {
-  font-weight: 600 !important;
-  color: var(--vp-c-brand-1) !important;
+    font-weight: 600 !important;
+    color: var(--vp-c-brand-1) !important;
 }
 
 /* ---------- Buttons ---------- */
 
 .VPButton {
-  border-radius: 980px !important;
-  padding: 0 22px !important;
-  height: 44px !important;
-  line-height: 44px !important;
-  font-weight: 500 !important;
-  font-size: 15px !important;
-  letter-spacing: -0.005em !important;
-  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease !important;
+    border-radius: 980px !important;
+    padding: 0 22px !important;
+    height: 44px !important;
+    line-height: 44px !important;
+    font-weight: 500 !important;
+    font-size: 15px !important;
+    letter-spacing: -0.005em !important;
+    transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease !important;
 }
 .VPButton.medium {
-  height: 40px !important;
-  line-height: 40px !important;
-  font-size: 14px !important;
-  padding: 0 18px !important;
+    height: 40px !important;
+    line-height: 40px !important;
+    font-size: 14px !important;
+    padding: 0 18px !important;
 }
 .VPButton.brand {
-  box-shadow: 0 1px 2px rgba(0, 113, 227, 0.18);
+    box-shadow: 0 1px 2px rgba(0, 113, 227, 0.18);
 }
 .VPButton.brand:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.30);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.25);
 }
 .VPButton.brand:active {
-  transform: translateY(0);
+    transform: translateY(0);
 }
 
 /* ---------- Hero ---------- */
 
 .VPHome .VPHero {
-  padding: 96px 24px 72px !important;
+    padding: 88px 24px 56px !important;
 }
 .VPHero .container {
-  max-width: 1120px !important;
+    max-width: 1200px !important;
+    gap: 48px !important;
+}
+.VPHero .main {
+    max-width: 580px;
 }
 .VPHero .name,
 .VPHero .text {
-  font-weight: 700 !important;
-  letter-spacing: -0.04em !important;
-  line-height: 1.05 !important;
-  font-size: clamp(2.6rem, 5.4vw, 4.4rem) !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.04em !important;
+    line-height: 1.04 !important;
+    font-size: clamp(2.4rem, 4.8vw, 3.8rem) !important;
 }
 .VPHero .name .clip {
-  background: linear-gradient(120deg, #0a84ff 0%, #5ac8fa 50%, #0071e3 100%) !important;
-  -webkit-background-clip: text !important;
-  background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
+    background: none !important;
+    -webkit-text-fill-color: var(--vp-c-text-1) !important;
+    color: var(--vp-c-text-1) !important;
 }
 .VPHero .tagline {
-  margin-top: 22px !important;
-  font-size: 1.25rem !important;
-  font-weight: 400 !important;
-  line-height: 1.5 !important;
-  color: var(--vp-c-text-2) !important;
-  letter-spacing: -0.005em !important;
-  max-width: 720px;
+    margin-top: 22px !important;
+    font-size: 1.18rem !important;
+    font-weight: 400 !important;
+    line-height: 1.5 !important;
+    color: var(--vp-c-text-2) !important;
+    letter-spacing: -0.005em !important;
+    max-width: 540px;
 }
 .VPHero .actions {
-  margin-top: 36px !important;
-  gap: 12px !important;
+    margin-top: 36px !important;
+    gap: 12px !important;
 }
 .VPHero .image-container {
-  transform: none !important;
+    transform: none !important;
+    margin: 0 !important;
+    width: auto !important;
+    height: auto !important;
 }
 .VPHero .image-bg {
-  display: none !important;
+    display: none !important;
 }
-.VPHero .image-src {
-  max-width: 100% !important;
-  filter: drop-shadow(0 30px 60px rgba(10, 132, 255, 0.18));
+.VPHero .image {
+    align-items: stretch !important;
+    justify-content: stretch !important;
+    margin: 0 !important;
+    flex-grow: 1;
 }
 
-/* ---------- Features grid (default VitePress homepage) ---------- */
-
-.VPFeatures {
-  padding: 8px 24px 80px !important;
-}
-.VPFeatures .container {
-  max-width: 1120px !important;
-}
-.VPFeature {
-  border: 1px solid var(--vp-c-divider) !important;
-  background: var(--vp-c-bg-elv) !important;
-  border-radius: var(--radius-lg) !important;
-  padding: 28px !important;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
-  height: 100% !important;
-  box-shadow: var(--shadow-1);
-}
-.VPFeature:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-2);
-  border-color: var(--vp-c-border) !important;
-}
-.VPFeature .icon {
-  width: 52px !important;
-  height: 52px !important;
-  margin-bottom: 20px !important;
-  background: var(--vp-c-brand-soft) !important;
-  border-radius: 14px !important;
-  font-size: 24px !important;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  color: var(--vp-c-brand-1);
-}
-.VPFeature .title {
-  font-size: 1.05rem !important;
-  font-weight: 600 !important;
-  letter-spacing: -0.01em !important;
-  margin-bottom: 8px !important;
-  color: var(--vp-c-text-1) !important;
-}
-.VPFeature .details {
-  font-size: 0.94rem !important;
-  line-height: 1.55 !important;
-  color: var(--vp-c-text-2) !important;
+/* ---------- Default VitePress feature grid: kill it ---------- */
+/* We render our own HomeFeatureRail; if the frontmatter still has a   */
+/* features array, hide the default grid so we don't double-render.    */
+.VPHomeFeatures {
+    display: none !important;
 }
 
 /* ---------- Custom blocks (tip / warning) ---------- */
 
 .custom-block {
-  border-radius: var(--radius-md) !important;
-  border: 1px solid var(--vp-c-divider) !important;
-  padding: 16px 18px !important;
+    border-radius: var(--radius-md) !important;
+    border: 1px solid var(--vp-c-divider) !important;
+    padding: 16px 18px !important;
 }
 .custom-block.tip {
-  border-color: var(--vp-c-brand-soft) !important;
-  background: var(--vp-c-tip-soft) !important;
+    border-color: var(--vp-c-brand-soft) !important;
+    background: var(--vp-c-tip-soft) !important;
 }
 .custom-block.warning {
-  background: var(--vp-c-warning-soft) !important;
-  border-color: rgba(255, 159, 10, 0.18) !important;
+    background: var(--vp-c-warning-soft) !important;
+    border-color: rgba(255, 159, 10, 0.18) !important;
 }
 .custom-block .custom-block-title {
-  font-weight: 600 !important;
-  letter-spacing: -0.005em !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.005em !important;
 }
 
 /* ---------- Code blocks ---------- */
 
 .vp-code-group .tabs {
-  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
+    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
 }
 div[class*="language-"] {
-  border-radius: var(--radius-md) !important;
-  box-shadow: var(--shadow-1);
+    border-radius: var(--radius-md) !important;
+    box-shadow: var(--shadow-1);
 }
 div[class*="language-"] code {
-  font-feature-settings: "calt" 1, "liga" 0 !important;
-  font-size: 13.5px !important;
-  letter-spacing: -0.005em;
+    font-feature-settings: "calt" 1, "liga" 0 !important;
+    font-size: 13.5px !important;
+    letter-spacing: -0.005em;
 }
 
-/* Inline code */
 :not(pre) > code {
-  background: var(--vp-c-bg-soft) !important;
-  border: 1px solid var(--vp-c-divider) !important;
-  border-radius: 6px !important;
-  padding: 2px 6px !important;
-  font-size: 0.88em !important;
-  color: var(--vp-c-text-1) !important;
+    background: var(--vp-c-bg-soft) !important;
+    border: 1px solid var(--vp-c-divider) !important;
+    border-radius: 6px !important;
+    padding: 2px 6px !important;
+    font-size: 0.88em !important;
+    color: var(--vp-c-text-1) !important;
 }
 
 /* ---------- Tables ---------- */
 
 .vp-doc table {
-  border-collapse: separate !important;
-  border-spacing: 0 !important;
-  border: 1px solid var(--vp-c-divider) !important;
-  border-radius: var(--radius-md) !important;
-  overflow: hidden !important;
-  display: table !important;
-  width: 100% !important;
-  margin: 24px 0 !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+    border: 1px solid var(--vp-c-divider) !important;
+    border-radius: var(--radius-md) !important;
+    overflow: hidden !important;
+    display: table !important;
+    width: 100% !important;
+    margin: 24px 0 !important;
 }
 .vp-doc th {
-  background: var(--vp-c-bg-soft) !important;
-  font-weight: 600 !important;
-  letter-spacing: -0.005em !important;
-  font-size: 0.9rem !important;
-  text-align: left !important;
+    background: var(--vp-c-bg-soft) !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.005em !important;
+    font-size: 0.9rem !important;
+    text-align: left !important;
 }
 .vp-doc th,
 .vp-doc td {
-  border: none !important;
-  border-bottom: 1px solid var(--vp-c-divider) !important;
-  padding: 12px 16px !important;
+    border: none !important;
+    border-bottom: 1px solid var(--vp-c-divider) !important;
+    padding: 12px 16px !important;
 }
 .vp-doc tr:last-child td {
-  border-bottom: none !important;
+    border-bottom: none !important;
 }
 .vp-doc tr {
-  background: transparent !important;
+    background: transparent !important;
 }
 
 /* ---------- Footer ---------- */
 
 .VPFooter {
-  border-top: 1px solid var(--vp-c-divider) !important;
-  padding: 28px 24px !important;
-  background: var(--vp-c-bg-alt) !important;
+    border-top: 1px solid var(--vp-c-divider) !important;
+    padding: 28px 24px !important;
+    background: var(--vp-c-bg-alt) !important;
 }
 .VPFooter .message,
 .VPFooter .copyright {
-  font-size: 13px !important;
-  color: var(--vp-c-text-3) !important;
+    font-size: 13px !important;
+    color: var(--vp-c-text-3) !important;
 }
 
 /* ---------- Search input ---------- */
 
 .DocSearch-Button {
-  border-radius: 980px !important;
-  background: var(--vp-c-bg-soft) !important;
-  border: 1px solid var(--vp-c-divider) !important;
-  box-shadow: none !important;
-  height: 36px !important;
+    border-radius: 980px !important;
+    background: var(--vp-c-bg-soft) !important;
+    border: 1px solid var(--vp-c-divider) !important;
+    box-shadow: none !important;
+    height: 36px !important;
 }
 
-/* ---------- Subtle ambient gradient on home ---------- */
-
-.VPHome::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 720px;
-  background:
-    radial-gradient(60% 60% at 50% 0%, rgba(10, 132, 255, 0.10) 0%, transparent 70%),
-    radial-gradient(40% 40% at 80% 10%, rgba(90, 200, 250, 0.08) 0%, transparent 70%);
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* ---------- Custom home sections (used by HomeShowcase.vue) ---------- */
+/* ---------- Custom home sections ---------- */
 
 .home-section {
-  max-width: 1120px;
-  margin: 0 auto;
-  padding: 0 24px 96px;
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 24px 24px 80px;
 }
-.home-section + .home-section {
-  padding-top: 0;
+.home-section--stats {
+    padding-top: 0;
+    padding-bottom: 96px;
 }
+
+.home-rail-head {
+    margin-bottom: 56px;
+    max-width: 720px;
+}
+
 .home-eyebrow {
-  font-size: 0.85rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--vp-c-brand-1);
-  margin-bottom: 12px;
+    display: inline-block;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--vp-c-brand-1);
+    margin-bottom: 12px;
 }
 .home-title {
-  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
-  font-weight: 650;
-  letter-spacing: -0.025em;
-  line-height: 1.15;
-  margin: 0 0 12px;
-  color: var(--vp-c-text-1);
+    font-size: clamp(1.6rem, 3.0vw, 2.2rem);
+    font-weight: 650;
+    letter-spacing: -0.025em;
+    line-height: 1.15;
+    margin: 0 0 14px;
+    color: var(--vp-c-text-1);
 }
 .home-lede {
-  font-size: 1.1rem;
-  line-height: 1.55;
-  color: var(--vp-c-text-2);
-  max-width: 720px;
-  margin: 0 0 40px;
+    font-size: 1.05rem;
+    line-height: 1.55;
+    color: var(--vp-c-text-2);
+    max-width: 720px;
+    margin: 0;
 }
 
+/* ---------- Platform showcase ---------- */
+
 .platform-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 16px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--vp-c-divider);
+    border-bottom: 1px solid var(--vp-c-divider);
 }
+
+@media (max-width: 900px) {
+    .platform-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 520px) {
+    .platform-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .platform-card {
-  position: relative;
-  display: block;
-  padding: 24px;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-elv);
-  text-decoration: none;
-  color: inherit;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    --accent: var(--vp-c-brand-1);
+    position: relative;
+    display: block;
+    padding: 28px 24px 32px;
+    border-right: 1px solid var(--vp-c-divider);
+    text-decoration: none !important;
+    color: inherit;
+    transition: background-color 0.18s ease;
+}
+.platform-card:last-child {
+    border-right: none;
 }
 .platform-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-2);
-  border-color: var(--vp-c-border);
-  text-decoration: none !important;
+    background: var(--vp-c-bg-alt);
 }
+
+@media (max-width: 900px) {
+    .platform-card:nth-child(2n) {
+        border-right: none;
+    }
+    .platform-card:nth-child(-n+2) {
+        border-bottom: 1px solid var(--vp-c-divider);
+    }
+}
+@media (max-width: 520px) {
+    .platform-card {
+        border-right: none;
+        border-bottom: 1px solid var(--vp-c-divider);
+    }
+    .platform-card:last-child {
+        border-bottom: none;
+    }
+}
+
 .platform-card .platform-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand-1);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin-bottom: 18px;
+    color: var(--vp-c-text-2);
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+.platform-card:hover .platform-icon {
+    color: var(--accent);
 }
 .platform-card .platform-icon svg {
-  width: 24px;
-  height: 24px;
+    width: 30px;
+    height: 30px;
 }
 .platform-card .platform-name {
-  font-size: 1.05rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  margin-bottom: 4px;
+    font-size: 1.05rem;
+    font-weight: 600;
+    letter-spacing: -0.012em;
+    color: var(--vp-c-text-1);
+    margin-bottom: 4px;
 }
 .platform-card .platform-meta {
-  font-size: 0.88rem;
-  color: var(--vp-c-text-3);
-  margin-bottom: 14px;
+    font-family: var(--vp-font-family-mono);
+    font-size: 12px;
+    letter-spacing: -0.005em;
+    color: var(--vp-c-text-3);
 }
 .platform-card .platform-arrow {
-  position: absolute;
-  top: 24px;
-  right: 24px;
-  color: var(--vp-c-text-3);
-  opacity: 0;
-  transform: translateX(-4px);
-  transition: opacity 0.2s ease, transform 0.2s ease;
+    position: absolute;
+    top: 28px;
+    right: 24px;
+    color: var(--vp-c-text-3);
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
 }
 .platform-card:hover .platform-arrow {
-  opacity: 1;
-  transform: translateX(0);
-  color: var(--vp-c-brand-1);
+    opacity: 1;
+    transform: translateX(0);
+    color: var(--accent);
 }
 .platform-card .platform-arrow svg {
-  width: 18px;
-  height: 18px;
+    width: 18px;
+    height: 18px;
 }
 
-/* ---------- Stat strip ---------- */
+/* ---------- Stats rail (Google data-driven) ---------- */
 
-.stats-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 24px;
-  padding: 28px 32px;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
+.stats-rail {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--vp-c-divider);
+    border-bottom: 1px solid var(--vp-c-divider);
 }
-.stat-item {
-  text-align: left;
+
+@media (max-width: 720px) {
+    .stats-rail {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
+
+.stat-cell {
+    padding: 28px 24px 32px;
+    border-right: 1px solid var(--vp-c-divider);
+}
+.stat-cell:last-child {
+    border-right: none;
+}
+@media (max-width: 720px) {
+    .stat-cell:nth-child(2n) { border-right: none; }
+    .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--vp-c-divider); }
+}
+
 .stat-value {
-  font-size: 2rem;
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  color: var(--vp-c-text-1);
-  line-height: 1.1;
+    font-size: 2.25rem;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    line-height: 1;
+    color: var(--vp-c-text-1);
+    font-variant-numeric: tabular-nums;
 }
-.stat-label {
-  font-size: 0.88rem;
-  color: var(--vp-c-text-3);
-  margin-top: 4px;
+.stat-key {
+    margin-top: 12px;
+    font-size: 0.92rem;
+    font-weight: 500;
+    color: var(--vp-c-text-1);
+    letter-spacing: -0.005em;
+}
+.stat-sub {
+    margin-top: 4px;
+    font-family: var(--vp-font-family-mono);
+    font-size: 11px;
+    color: var(--vp-c-text-3);
+    letter-spacing: 0.01em;
 }
 
-/* ---------- Reduce motion respect ---------- */
+/* ---------- Reduce motion ---------- */
 
 @media (prefers-reduced-motion: reduce) {
-  * {
-    transition-duration: 0s !important;
-    animation-duration: 0s !important;
-  }
+    * {
+        transition-duration: 0s !important;
+        animation-duration: 0s !important;
+    }
 }
diff --git a/docs/index.md b/docs/index.md
index d37b164..9192ef9 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,9 +5,6 @@ hero:
   name: Patterns
   text: Production-grade WAF rules, on autopilot.
   tagline: Automated OWASP Core Rule Set and bad-bot patterns, converted into native configurations for Nginx, Apache, Traefik, and HAProxy &mdash; refreshed every day.
-  image:
-    src: /hero-shield.svg
-    alt: Patterns
   actions:
     - theme: brand
       text: Get Started
@@ -15,53 +12,17 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/fabriziosalmi/patterns
-
-features:
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 4.5 5.8v6.1c0 4.7 3.3 9.1 7.5 10.4 4.2-1.3 7.5-5.7 7.5-10.4V5.8L12 3Z"/><path d="m8.5 12 2.5 2.5L15.5 9.5"/></svg>'
-    title: OWASP CRS Protection
-    details: Defends against SQL injection, XSS, RCE, LFI, and RFI by deriving rules from the OWASP Core Rule Set &mdash; the same engine that powers ModSecurity worldwide.
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="7.5" width="16" height="11" rx="3"/><path d="M12 4v3.5"/><circle cx="12" cy="3.5" r="0.9" fill="currentColor" stroke="none"/><circle cx="9" cy="13" r="1.1" fill="currentColor" stroke="none"/><circle cx="15" cy="13" r="1.1" fill="currentColor" stroke="none"/><path d="M2 13.5v2M22 13.5v2"/></svg>'
-    title: Bad Bot Blocking
-    details: Curated User-Agent lists from public sources block scrapers, AI crawlers, vulnerability scanners, and SEO spam &mdash; with configurable allow-lists for legitimate bots.
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="6" rx="1.5"/><rect x="3.5" y="14" width="17" height="6" rx="1.5"/><path d="M7 7h.01M7 17h.01"/><path d="M11 7h6M11 17h6"/></svg>'
-    title: Native Multi-Server Output
-    details: One source rule set, four idiomatic outputs &mdash; Nginx <code>map</code>+<code>if</code>, Apache <code>SecRule</code>, Traefik middleware TOML, and HAProxy ACL files.
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 12a8.5 8.5 0 0 1 14.5-6L20 8"/><path d="M20 3v5h-5"/><path d="M20.5 12a8.5 8.5 0 0 1-14.5 6L4 16"/><path d="M4 21v-5h5"/></svg>'
-    title: Daily Automated Updates
-    details: A GitHub Actions workflow re-fetches the latest CRS release, rebuilds every backend, and publishes a fresh release archive &mdash; without manual intervention.
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8 12 3 3 8v8l9 5 9-5V8Z"/><path d="m3.3 8 8.7 5 8.7-5"/><path d="M12 13v8"/><path d="m7.5 5.5 9 5"/></svg>'
-    title: Pre-Built Releases
-    details: Drop-in archives are published on every run. Skip the toolchain &mdash; download <code>nginx_waf.zip</code>, <code>apache_waf.zip</code>, <code>traefik_waf.zip</code>, or <code>haproxy_waf.zip</code>.
-  - icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4.5a2 2 0 1 0-4 0V6H6a1.5 1.5 0 0 0-1.5 1.5V11h1.5a2 2 0 1 1 0 4H4.5v3.5A1.5 1.5 0 0 0 6 20h3.5v-1.5a2 2 0 1 1 4 0V20H17a1.5 1.5 0 0 0 1.5-1.5V15H20a2 2 0 1 0 0-4h-1.5V7.5A1.5 1.5 0 0 0 17 6h-3V4.5Z"/></svg>'
-    title: Composable & Extensible
-    details: Each backend is a small Python converter that consumes a single JSON intermediate. Adding a new platform is a few hundred lines &mdash; not a fork.
 ---
 
 <div class="home-section">
 
 ## Quick start
 
-Pull the latest release archive and include it in your existing server configuration &mdash; no toolchain required.
-
 ```bash
-# Pick the archive that matches your stack
 curl -LO https://github.com/fabriziosalmi/patterns/releases/latest/download/nginx_waf.zip
 unzip nginx_waf.zip -d /etc/nginx/waf_patterns
 ```
 
-Or build from source to customize before deploying:
-
-```bash
-git clone https://github.com/fabriziosalmi/patterns.git
-cd patterns
-pip install -r requirements.txt
-python owasp2json.py            # Fetch the latest OWASP CRS
-python json2nginx.py            # Or json2apache.py / json2traefik.py / json2haproxy.py
-python badbots.py               # Generate bad-bot blocklists
-```
-
-::: tip Using Caddy?
-See the dedicated [caddy-waf](https://github.com/fabriziosalmi/caddy-waf) project for Caddy-specific WAF support.
-:::
+Or build from source &mdash; full toolchain instructions in [Getting Started](/getting-started).
 
 </div>
diff --git a/docs/public/hero-shield.svg b/docs/public/hero-shield.svg
deleted file mode 100644
index 4db1cd7..0000000
--- a/docs/public/hero-shield.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" fill="none">
-  <defs>
-    <linearGradient id="shieldGrad" x1="40" y1="20" x2="280" y2="300" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#5ac8fa"/>
-      <stop offset="0.5" stop-color="#0a84ff"/>
-      <stop offset="1" stop-color="#0040dd"/>
-    </linearGradient>
-    <linearGradient id="shieldGlow" x1="160" y1="40" x2="160" y2="280" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#fff" stop-opacity="0.18"/>
-      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
-    </linearGradient>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="0" dy="12" stdDeviation="18" flood-color="#0a84ff" flood-opacity="0.25"/>
-    </filter>
-  </defs>
-  <g filter="url(#shadow)">
-    <path d="M160 24 56 60v82c0 64.5 45 124 104 142 59-18 104-77.5 104-142V60L160 24Z" fill="url(#shieldGrad)"/>
-    <path d="M160 24 56 60v82c0 64.5 45 124 104 142 59-18 104-77.5 104-142V60L160 24Z" fill="url(#shieldGlow)"/>
-  </g>
-  <path d="M108 162 145 199 218 124" stroke="#fff" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>