feat(threat-actors): hover tooltip on motivation badges

New MotivationBadge component with CSS tooltip showing:
- espionage: goal (intelligence theft), typical behavior, examples
- financial: goal (monetary), typical behavior, examples
- destruction: goal (disrupt/destroy infra), wiper/ICS attacks, examples
- hacktivism: goal (political/ideological), defacement/leaks, examples

Used in ThreatActorsPage (card list) and ThreatActorDetailPage (header).

frontend/src/pages/ThreatActorsPage.tsx

@@ -35,20 +35,7 @@ function coverageBg(pct: number) {
 }
 
 /** Motivation badge colour. */
-function motivationColor(m: string | null) {
-  switch (m?.toLowerCase()) {
-    case "espionage":
-      return "border-purple-500/30 bg-purple-900/50 text-purple-400";
-    case "financial":
-      return "border-yellow-500/30 bg-yellow-900/50 text-yellow-400";
-    case "destruction":
-      return "border-red-500/30 bg-red-900/50 text-red-400";
-    case "hacktivism":
-      return "border-cyan-500/30 bg-cyan-900/50 text-cyan-400";
-    default:
-      return "border-gray-600/30 bg-gray-800/50 text-gray-400";
-  }
-}
+import MotivationBadge from "../components/MotivationBadge";
 
 export default function ThreatActorsPage() {
   const navigate = useNavigate();
@@ -161,9 +148,7 @@ export default function ThreatActorsPage() {
                     </span>
                   )}
                   {actor.motivation && (
-                    <span className={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${motivationColor(actor.motivation)}`}>
-                      {actor.motivation}
-                    </span>
+                    <MotivationBadge motivation={actor.motivation} size="sm" />
                   )}
                 </div>