update how it works card update

src/components/sections/IndustryWorldMap.tsx

@@ -60,10 +60,32 @@ function pointInPoly(x: number, y: number, poly: number[][]) {
   return inside;
 }
 
-export default function IndustryWorldMap() {
+/** Parse a #rrggbb hex into an [r,g,b] triple. Falls back to the section red. */
+function hexToRgb(hex: string): [number, number, number] {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return [239, 68, 68];
+  const int = parseInt(m[1], 16);
+  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
+}
+
+/**
+ * @param accent  Network accent colour (#rrggbb) for the hub nodes, pulse
+ *   rings, travelling packets and dashed routes. The dotted continent
+ *   silhouette stays neutral grey. Defaults to the section red so the Women
+ *   Empowerment usage is unchanged; the MileTruth workflows pass their own
+ *   accent (WF1 teal/cyan · WF2 crimson/red).
+ */
+export default function IndustryWorldMap({
+  accent = "#ef4444",
+}: {
+  accent?: string;
+}) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
+    const [ar, ag, ab] = hexToRgb(accent);
+    const rgba = (a: number) => `rgba(${ar},${ag},${ab},${a})`;
+    const solid = `rgb(${ar},${ag},${ab})`;
     const canvas = canvasRef.current;
     const parent = canvas?.parentElement;
     if (!canvas || !parent) return;
@@ -135,7 +157,7 @@ export default function IndustryWorldMap() {
       ctx.save();
       ctx.setLineDash([4, 7]);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = "rgba(239,68,68,0.13)";
+      ctx.strokeStyle = rgba(0.13);
       for (const [a, b] of ROUTES) {
         const c = ctrl(cs[a], cs[b]);
         ctx.beginPath();
@@ -156,8 +178,8 @@ export default function IndustryWorldMap() {
         const tt = Math.max(0, t - 0.04);
         const pt = bezier(cs[a], c, cs[b], tt);
         const grad = ctx.createLinearGradient(pt.x, pt.y, p.x, p.y);
-        grad.addColorStop(0, "rgba(239,68,68,0)");
-        grad.addColorStop(1, "rgba(239,68,68,0.5)");
+        grad.addColorStop(0, rgba(0));
+        grad.addColorStop(1, rgba(0.5));
         ctx.strokeStyle = grad;
         ctx.lineWidth = 2;
         ctx.beginPath();
@@ -165,9 +187,9 @@ export default function IndustryWorldMap() {
         ctx.lineTo(p.x, p.y);
         ctx.stroke();
 
-        ctx.shadowColor = "#ef4444";
+        ctx.shadowColor = solid;
         ctx.shadowBlur = 12;
-        ctx.fillStyle = "#ef4444";
+        ctx.fillStyle = solid;
         ctx.beginPath();
         ctx.arc(p.x, p.y, 2.6, 0, Math.PI * 2);
         ctx.fill();
@@ -183,13 +205,13 @@ export default function IndustryWorldMap() {
           const radius = 3 + phase * 24;
           const alpha = (1 - phase) * 0.45;
           ctx.beginPath();
-          ctx.strokeStyle = `rgba(239,68,68,${alpha})`;
+          ctx.strokeStyle = rgba(alpha);
           ctx.lineWidth = 1.5;
           ctx.arc(c.x, c.y, radius, 0, Math.PI * 2);
           ctx.stroke();
         }
-        ctx.fillStyle = "#ef4444";
-        ctx.shadowColor = "#ef4444";
+        ctx.fillStyle = solid;
+        ctx.shadowColor = solid;
         ctx.shadowBlur = 8;
         ctx.beginPath();
         ctx.arc(c.x, c.y, 2.6, 0, Math.PI * 2);
@@ -221,7 +243,7 @@ export default function IndustryWorldMap() {
       cancelAnimationFrame(raf);
       ro.disconnect();
     };
-  }, []);
+  }, [accent]);
 
   return <canvas ref={canvasRef} className="ind__map" aria-hidden="true" />;
 }