From 22813dbb0b827be552a206ecd3dcda8e9278ff82 Mon Sep 17 00:00:00 2001
From: blessdyb <blessdyb@gmail.com>
Date: Thu, 1 Oct 2026 08:52:22 -0700
Subject: [PATCH] Replace the hero flow canvas with a CSS-only glow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The canvas ran a requestAnimationFrame loop drawing up to 90 particles, each
with ctx.shadowBlur (a per-particle blur) and a fresh radial gradient every
frame — enough to make the home page janky. Drop the canvas and its script
entirely; the ambient glow is now a single .hero::before layer that animates
transform only, so it stays on the compositor and costs effectively nothing.
Runtime cost is back to the original (just the log's setInterval). The dark
palette and the gradient headline are pure CSS and are kept. Applied to all
ten home pages; reduced motion disables the drift.

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

diff --git a/docs/de/index.html b/docs/de/index.html
index cef9b38..5e00da5 100644
--- a/docs/de/index.html
+++ b/docs/de/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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 1fd80ce..8a1f0f2 100644
--- a/docs/es/index.html
+++ b/docs/es/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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 fc9526c..14acc02 100644
--- a/docs/fr/index.html
+++ b/docs/fr/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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 4af1066..59c6bd8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -616,50 +624,6 @@ <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 71167b3..1c76145 100644
--- a/docs/it/index.html
+++ b/docs/it/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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 d029020..75d3d1f 100644
--- a/docs/ja/index.html
+++ b/docs/ja/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -607,50 +615,6 @@ <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 6e1a7e3..6935dc3 100644
--- a/docs/ko/index.html
+++ b/docs/ko/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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 21a6e16..59c084c 100644
--- a/docs/pt-PT/index.html
+++ b/docs/pt-PT/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -608,50 +616,6 @@ <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/zh-Hans/index.html b/docs/zh-Hans/index.html
index 502b25d..c495604 100644
--- a/docs/zh-Hans/index.html
+++ b/docs/zh-Hans/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -605,50 +613,6 @@ <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 d125bff..e3ecf53 100644
--- a/docs/zh-Hant/index.html
+++ b/docs/zh-Hant/index.html
@@ -59,29 +59,37 @@
 </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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -606,50 +614,6 @@ <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 c681e2d..00b7511 100644
--- a/site/pages/de/index.html
+++ b/site/pages/de/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 356864f..ac8b196 100644
--- a/site/pages/es/index.html
+++ b/site/pages/es/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 d34f173..1f83fa4 100644
--- a/site/pages/fr/index.html
+++ b/site/pages/fr/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 cbe1b05..fa6e44e 100644
--- a/site/pages/index.html
+++ b/site/pages/index.html
@@ -6,29 +6,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -563,47 +571,3 @@ <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 5f0fd6b..9398396 100644
--- a/site/pages/it/index.html
+++ b/site/pages/it/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 4b2724f..0e6c045 100644
--- a/site/pages/ja/index.html
+++ b/site/pages/ja/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -553,47 +561,3 @@ <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 69cef7a..1a43135 100644
--- a/site/pages/ko/index.html
+++ b/site/pages/ko/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 f586704..9711544 100644
--- a/site/pages/pt-PT/index.html
+++ b/site/pages/pt-PT/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -554,47 +562,3 @@ <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 8f660be..a7fca8f 100644
--- a/site/pages/zh-Hans/index.html
+++ b/site/pages/zh-Hans/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -551,47 +559,3 @@ <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 4bd06cf..dd62648 100644
--- a/site/pages/zh-Hant/index.html
+++ b/site/pages/zh-Hant/index.html
@@ -5,29 +5,37 @@
 -->
 <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. */
+     headline, and a lightweight ambient glow. The glow animates transform only, so it runs on the compositor
+     and costs effectively nothing — no canvas, no requestAnimationFrame. 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 { position: relative; overflow: hidden; }
   .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);
+  .hero::before {
+    content: ""; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
+    background:
+      radial-gradient(42vw 44vh at 22% 26%, rgba(144,133,233,.20), transparent 62%),
+      radial-gradient(40vw 40vh at 80% 16%, rgba(74,147,234,.14), transparent 64%),
+      radial-gradient(36vw 36vh at 62% 84%, rgba(229,114,63,.09), transparent 64%);
+    animation: hero-drift 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes hero-drift {
+    from { transform: translate3d(-2%, -1%, 0) scale(1); }
+    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
   }
   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; } }
+  @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
 </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>
@@ -552,47 +560,3 @@ <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>