style: update UI with darker background, remove animations and adjust layout spacing

src/components/ContentDistribution.tsx

@@ -153,24 +153,31 @@ export default function ContentDistribution({ className, bg = '#ffffff' }: Props
           {/* central cloud */}
           <Cloud />
 
-          {/* rotating layer with badges */}
+          {/* rotating layer with badges and beams */}
           <motion.g
             initial={{ rotate: 0 }}
             animate={{ rotate: prefersReduced ? 0 : 360 }}
             transition={{ duration: 40, ease: 'linear', repeat: prefersReduced ? 0 : Infinity }}
           >
+            {/* Beams */}
+            {layout.map((n, i) => {
+              const rad = (n.a * Math.PI) / 180;
+              const x = n.r * Math.cos(rad);
+              const y = n.r * Math.sin(rad);
+              return <Beam key={`beam-${i}`} x2={x} y2={y} delay={i * 0.15} />;
+            })}
+
+            {/* Badges */}
             {layout.map((n, i) => {
               const rad = (n.a * Math.PI) / 180;
               const x = n.r * Math.cos(rad);
               const y = n.r * Math.sin(rad);
               return (
-                <g key={i} transform={`translate(${x}, ${y})`} filter="url(#shadow)">
+                <g key={`badge-${i}`} transform={`translate(${x}, ${y})`} filter="url(#shadow)">
                   <circle r={34} fill="#fff" stroke={GRAY_LT} strokeWidth={3} />
                   <g transform="scale(1)">
                     {n.icon}
                   </g>
-                  {/* beam from center to this node (animated) */}
-                  <Beam x2={-x} y2={-y} delay={i * 0.15} />
                 </g>
               );
             })}