From 31a33edc9df0ac2f296732577ff46bc8c3c2128c Mon Sep 17 00:00:00 2001
From: blessdyb <blessdyb@gmail.com>
Date: Thu, 1 Oct 2026 08:28:08 -0700
Subject: [PATCH] Refresh the home: dark palette, gradient headline, hero flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The home pages (English and all nine translations) now render in the dark
palette site.css already defines, with the "Understand your AI agents" line in
a purple-to-blue-to-orange gradient and an ambient flow-canvas behind the
headline. Presentation only — the layout, copy and every other page are
unchanged, and it's scoped to the index pages so site.css stays shared. The
flow honours reduced motion and pauses when the tab is hidden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/de/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/es/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/fr/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/index.html               | 67 +++++++++++++++++++++++++++++++++++
 docs/it/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/ja/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/ko/index.html            | 67 +++++++++++++++++++++++++++++++++++
 docs/pt-PT/index.html         | 67 +++++++++++++++++++++++++++++++++++
 docs/sitemap.xml              | 20 +++++------
 docs/zh-Hans/index.html       | 67 +++++++++++++++++++++++++++++++++++
 docs/zh-Hant/index.html       | 67 +++++++++++++++++++++++++++++++++++
 site/pages/de/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/es/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/fr/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/index.html         | 67 +++++++++++++++++++++++++++++++++++
 site/pages/it/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/ja/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/ko/index.html      | 67 +++++++++++++++++++++++++++++++++++
 site/pages/pt-PT/index.html   | 67 +++++++++++++++++++++++++++++++++++
 site/pages/zh-Hans/index.html | 67 +++++++++++++++++++++++++++++++++++
 site/pages/zh-Hant/index.html | 67 +++++++++++++++++++++++++++++++++++
 21 files changed, 1350 insertions(+), 10 deletions(-)

diff --git a/docs/de/index.html b/docs/de/index.html
index 9aca252..cef9b38 100644
--- a/docs/de/index.html
+++ b/docs/de/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Herunterladen</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">App-genaue Netzwerküberwachung · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>Wisse, was deinen Mac verlässt.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/es/index.html b/docs/es/index.html
index ac26d22..1fd80ce 100644
--- a/docs/es/index.html
+++ b/docs/es/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Descargar</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Inteligencia de red por app · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>Ten claro qué sale de tu Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/fr/index.html b/docs/fr/index.html
index 339245e..fc9526c 100644
--- a/docs/fr/index.html
+++ b/docs/fr/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Télécharger</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Surveillance réseau app par app · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>Sachez ce qui quitte votre Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/index.html b/docs/index.html
index 53dd98b..4af1066 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Download</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Application-aware network intelligence · macOS 15+</p>
@@ -593,6 +616,50 @@ <h2>Know what leaves your Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/it/index.html b/docs/it/index.html
index 81876b2..71167b3 100644
--- a/docs/it/index.html
+++ b/docs/it/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Scarica</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Analisi di rete app per app · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>Sappi che cosa esce dal tuo Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/ja/index.html b/docs/ja/index.html
index 39177ec..d029020 100644
--- a/docs/ja/index.html
+++ b/docs/ja/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">ダウンロード</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">アプリ単位のネットワーク監視 · macOS 15+</p>
@@ -584,6 +607,50 @@ <h2>Mac から何が出ていくのかを知る。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/ko/index.html b/docs/ko/index.html
index b62e2f1..6e1a7e3 100644
--- a/docs/ko/index.html
+++ b/docs/ko/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">다운로드</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">앱 단위 네트워크 인텔리전스 · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>내 Mac에서 무엇이 나가는지 아세요.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/pt-PT/index.html b/docs/pt-PT/index.html
index beb2c2b..21a6e16 100644
--- a/docs/pt-PT/index.html
+++ b/docs/pt-PT/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">Transferir</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Inteligência de rede por aplicação · macOS 15+</p>
@@ -585,6 +608,50 @@ <h2>Saiba o que sai do seu Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index dae7536..adafc65 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -2,53 +2,53 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url><loc>https://flowlight.xinbetween.com/about/</loc><lastmod>2026-09-25</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/</loc><lastmod>2026-09-30</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/releases/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/de/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/de/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/de/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/de/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/de/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/de/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/es/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/es/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/es/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/es/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/es/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/es/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/fr/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/fr/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/fr/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/fr/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/fr/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/fr/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/it/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/it/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/it/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/it/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/it/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/it/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/pt-PT/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/pt-PT/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/pt-PT/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/pt-PT/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/pt-PT/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/pt-PT/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ja/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ja/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/ja/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/ja/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ja/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ja/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hans/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hans/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/zh-Hans/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/zh-Hans/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hans/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hans/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hant/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hant/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/zh-Hant/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/zh-Hant/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hant/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/zh-Hant/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ko/about/</loc><lastmod>2026-09-26</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ko/docs/</loc><lastmod>2026-09-28</lastmod></url>
-  <url><loc>https://flowlight.xinbetween.com/ko/</loc><lastmod>2026-09-27</lastmod></url>
+  <url><loc>https://flowlight.xinbetween.com/ko/</loc><lastmod>2026-10-01</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ko/privacy/</loc><lastmod>2026-09-27</lastmod></url>
   <url><loc>https://flowlight.xinbetween.com/ko/threat-model/</loc><lastmod>2026-09-27</lastmod></url>
 </urlset>
diff --git a/docs/zh-Hans/index.html b/docs/zh-Hans/index.html
index 5cbeb77..502b25d 100644
--- a/docs/zh-Hans/index.html
+++ b/docs/zh-Hans/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">下载</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">应用级网络洞察 · macOS 15+</p>
@@ -582,6 +605,50 @@ <h2>知道什么离开了你的 Mac。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/docs/zh-Hant/index.html b/docs/zh-Hant/index.html
index 47574b3..d125bff 100644
--- a/docs/zh-Hant/index.html
+++ b/docs/zh-Hant/index.html
@@ -57,8 +57,31 @@
     <a class="btn btn-primary btn-sm" href="https://github.com/xinbetween/flowlight/releases/latest/download/Flowlight.dmg">下載</a>
   </div>
 </header>
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">App 層級網路監控 · macOS 15+</p>
@@ -583,6 +606,50 @@ <h2>知道有什麼離開了你的 Mac。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
 <footer class="site-footer">
   <div class="wrap">
     <div class="footer-grid">
diff --git a/site/pages/de/index.html b/site/pages/de/index.html
index 49de61c..c681e2d 100644
--- a/site/pages/de/index.html
+++ b/site/pages/de/index.html
@@ -3,8 +3,31 @@
 description: Flowlight ist Open-Source-Netzwerküberwachung für macOS – app-genau, mit dem tiefsten Blick auf KI-Agenten, ihre Tools und MCP-Server.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">App-genaue Netzwerküberwachung · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>Wisse, was deinen Mac verlässt.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/es/index.html b/site/pages/es/index.html
index da622d2..356864f 100644
--- a/site/pages/es/index.html
+++ b/site/pages/es/index.html
@@ -3,8 +3,31 @@
 description: Flowlight es inteligencia de red por app para macOS, de código abierto, con una visión más clara de los agentes de IA, sus herramientas y sus servidores MCP.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Inteligencia de red por app · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>Ten claro qué sale de tu Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/fr/index.html b/site/pages/fr/index.html
index 0527196..d34f173 100644
--- a/site/pages/fr/index.html
+++ b/site/pages/fr/index.html
@@ -3,8 +3,31 @@
 description: Flowlight est un logiciel libre de surveillance réseau app par app pour macOS, avec une vue précise des agents IA, de leurs outils et de leurs serveurs MCP.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Surveillance réseau app par app · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>Sachez ce qui quitte votre Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/index.html b/site/pages/index.html
index a19bd60..cbe1b05 100644
--- a/site/pages/index.html
+++ b/site/pages/index.html
@@ -4,8 +4,31 @@
 path: /
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Application-aware network intelligence · macOS 15+</p>
@@ -540,3 +563,47 @@ <h2>Know what leaves your Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/it/index.html b/site/pages/it/index.html
index 4ee0687..5f0fd6b 100644
--- a/site/pages/it/index.html
+++ b/site/pages/it/index.html
@@ -3,8 +3,31 @@
 description: Flowlight è l'analisi di rete app per app per macOS, open source, con uno sguardo più attento su agenti IA, strumenti e server MCP.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Analisi di rete app per app · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>Sappi che cosa esce dal tuo Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/ja/index.html b/site/pages/ja/index.html
index c575159..4b2724f 100644
--- a/site/pages/ja/index.html
+++ b/site/pages/ja/index.html
@@ -3,8 +3,31 @@
 description: Flowlight は macOS 向けのオープンソースなアプリ単位のネットワーク監視ツールです。AI エージェントやツール、MCP サーバの通信までくわしく見えます。
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">アプリ単位のネットワーク監視 · macOS 15+</p>
@@ -530,3 +553,47 @@ <h2>Mac から何が出ていくのかを知る。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/ko/index.html b/site/pages/ko/index.html
index 2d7076f..69cef7a 100644
--- a/site/pages/ko/index.html
+++ b/site/pages/ko/index.html
@@ -3,8 +3,31 @@
 description: Flowlight는 어떤 앱이 어디로 연결하는지 보여주는 macOS용 오픈 소스 네트워크 도구입니다. AI 에이전트와 그 도구, MCP 서버는 더 자세히 들여다봅니다.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">앱 단위 네트워크 인텔리전스 · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>내 Mac에서 무엇이 나가는지 아세요.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/pt-PT/index.html b/site/pages/pt-PT/index.html
index e010b62..f586704 100644
--- a/site/pages/pt-PT/index.html
+++ b/site/pages/pt-PT/index.html
@@ -3,8 +3,31 @@
 description: O Flowlight é monitorização de rede por app no macOS, de código aberto, com visibilidade mais profunda sobre agentes de IA, ferramentas e servidores MCP.
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">Inteligência de rede por aplicação · macOS 15+</p>
@@ -531,3 +554,47 @@ <h2>Saiba o que sai do seu Mac.</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/zh-Hans/index.html b/site/pages/zh-Hans/index.html
index 1542ca8..8f660be 100644
--- a/site/pages/zh-Hans/index.html
+++ b/site/pages/zh-Hans/index.html
@@ -3,8 +3,31 @@
 description: Flowlight 是面向 macOS 的开源应用级网络监控工具，能看清每个应用的连接去向，尤其看得清 AI 代理、它们的工具和 MCP 服务器。
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">应用级网络洞察 · macOS 15+</p>
@@ -528,3 +551,47 @@ <h2>知道什么离开了你的 Mac。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>
diff --git a/site/pages/zh-Hant/index.html b/site/pages/zh-Hant/index.html
index 5410179..4bd06cf 100644
--- a/site/pages/zh-Hant/index.html
+++ b/site/pages/zh-Hant/index.html
@@ -3,8 +3,31 @@
 description: Flowlight 是開放原始碼的 macOS App 層級網路監控工具，看得見每個 App 的連線，也看得清 AI 代理、工具與 MCP 伺服器。
 nav: home
 -->
+<style>
+  /* Home page only: force the dark palette (the same values site.css already uses for dark), the gradient
+     headline, and the ambient hero flow canvas. Layout is otherwise unchanged. */
+  :root {
+    --ground:#0d0f16; --surface:#151824; --surface-2:#1c2030; --ink:#eef0f6; --muted:#a3a9bb; --faint:#737a8f;
+    --line:#262b3b; --accent:#9085e9; --accent-ink:#0d0f16; --received:#4a93ea; --sent:#e5723f;
+    --critical:#ec6a62; --warning:#e0a13a; --log-bg:#090b11; --log-line:#1d2130;
+    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.35); color-scheme:dark;
+  }
+  .hero { position: relative; }
+  .hero > .wrap { position: relative; z-index: 1; }
+  .hero-flow {
+    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85;
+    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 74%, transparent);
+  }
+  h1 .flow {
+    background: linear-gradient(100deg, var(--accent) 2%, var(--received) 42%, var(--muted) 66%, var(--sent) 100%);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+  @media (prefers-reduced-motion: reduce) { .hero-flow { opacity: .5; } }
+</style>
 <main id="main">
   <section class="hero">
+    <canvas class="hero-flow" aria-hidden="true"></canvas>
     <div class="wrap">
       <div>
         <p class="eyebrow">App 層級網路監控 · macOS 15+</p>
@@ -529,3 +552,47 @@ <h2>知道有什麼離開了你的 Mac。</h2>
     }, 1900);
   })();
 </script>
+<script>
+  // Hero flow field — ambient streams of light behind the headline, coloured like real traffic (received blue,
+  // sent orange, the odd flagged red), brightening through the centre. Static frame under reduced motion.
+  (function () {
+    var cv = document.querySelector('.hero-flow'); if (!cv) return;
+    var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion:reduce)').matches;
+    var ctx = cv.getContext('2d'), W = 0, H = 0, DPR = Math.min(2, window.devicePixelRatio || 1), lanes = [], parts = [], raf;
+    var COL = { in: '#4a93ea', out: '#e5723f', alert: '#ec6a62' };
+    function resize() {
+      var r = cv.getBoundingClientRect(); W = r.width; H = r.height;
+      cv.width = Math.max(1, W * DPR); cv.height = Math.max(1, H * DPR); ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      lanes = []; var N = W < 620 ? 5 : 8;
+      for (var i = 0; i < N; i++) { var y = H * (0.1 + 0.8 * (i / (N - 1 || 1))); lanes.push({ y: y, amp: 16 + Math.random() * 44, ph: Math.random() * 6.28 }); }
+    }
+    function laneY(l, x) { return l.y + Math.sin(x * 0.004 + l.ph) * l.amp; }
+    function spawn() {
+      if (parts.length > 90) return; var l = lanes[(Math.random() * lanes.length) | 0]; if (!l) return;
+      var roll = Math.random(), col = roll < 0.07 ? COL.alert : roll < 0.5 ? COL.in : COL.out;
+      parts.push({ l: l, x: -20, v: (0.9 + Math.random() * 1.5) * (W / 900 + 0.5), col: col, r: 1 + Math.random() * 1.8, a: 0 });
+    }
+    var lastW = 0;
+    function frame(t) {
+      ctx.clearRect(0, 0, W, H);
+      var g = ctx.createRadialGradient(W * 0.5, H * 0.45, 0, W * 0.5, H * 0.45, Math.max(W, H) * 0.5);
+      g.addColorStop(0, 'rgba(144,133,233,0.10)'); g.addColorStop(1, 'rgba(144,133,233,0)'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+      ctx.lineWidth = 1;
+      for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.05)'; ctx.stroke(); }
+      for (var p = parts.length - 1; p >= 0; p--) {
+        var o = parts[p]; o.x += o.v; o.a = Math.min(1, o.a + 0.04); var yy = laneY(o.l, o.x); var glow = o.x > W * 0.4 && o.x < W * 0.6 ? 1.7 : 1;
+        ctx.globalAlpha = o.a * 0.9; ctx.beginPath(); ctx.arc(o.x, yy, o.r * glow, 0, 6.283); ctx.fillStyle = o.col; ctx.shadowColor = o.col; ctx.shadowBlur = 10 * glow; ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; if (o.x > W + 30) parts.splice(p, 1);
+      }
+      if (t - lastW > 90) { spawn(); if (Math.random() < 0.5) spawn(); lastW = t; }
+      raf = requestAnimationFrame(frame);
+    }
+    function start() {
+      resize();
+      if (reduce) { ctx.clearRect(0, 0, W, H); for (var i = 0; i < lanes.length; i++) { var l = lanes[i]; ctx.beginPath(); for (var x = 0; x <= W; x += 14) { var y = laneY(l, x); x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.strokeStyle = 'rgba(150,160,190,0.07)'; ctx.stroke(); } return; }
+      raf = requestAnimationFrame(frame);
+    }
+    var to; window.addEventListener('resize', function () { clearTimeout(to); to = setTimeout(function () { cancelAnimationFrame(raf); start(); }, 180); });
+    document.addEventListener('visibilitychange', function () { if (document.hidden) { cancelAnimationFrame(raf); } else if (!reduce) { raf = requestAnimationFrame(frame); } });
+    start();
+  })();
+</script>