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>