Apply KPI background art to Infrastructure middle row cards

Pulls in the new gold-framed hex-pattern background assets for Resource
Distribution, Infrastructure Map, and Top Resources by Utilization,
replacing the plain card styling with the baked-in border/labels.
Also stages network-kpi-bg.png in public/ for the future Network page.

src/pages/Infrastructure.tsx

@@ -80,6 +80,22 @@ const sectionTitle: React.CSSProperties = {
   marginBottom: '16px',
 }
 
+function framedCard(bgUrl: string): React.CSSProperties {
+  return {
+    backgroundImage: `url(${bgUrl})`,
+    backgroundSize: '100% 100%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    borderRadius: '12px',
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '20px 20px 64px 20px',
+  }
+}
+
 function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
   return (
     <div className="flex flex-1 items-center gap-4">
@@ -182,18 +198,15 @@ export default function Infrastructure() {
       <div className="min-h-0 flex-1">
         <div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
           {/* Resource Distribution */}
-          <div style={cardBase} className="hover:!border-gold/15">
+          <div style={framedCard('/resource-distrabution-bg.png')}>
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Resource Distribution</h3>
               <Donut data={distributionData} centerLabel="128" />
             </div>
           </div>
 
           {/* Infrastructure Map */}
-          <div style={cardBase} className="hover:!border-gold/15">
+          <div style={framedCard('/infra-map-kpi.png')}>
-            <div style={{ position: 'absolute', inset: 0, opacity: 0.03, backgroundImage: 'linear-gradient(rgba(200,164,52,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(200,164,52,0.3) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Infrastructure Map</h3>
               <div className="relative flex-1" style={{ minHeight: '140px' }}>
                 <Globe2 size={120} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
                 {regions.map((r) => (
@@ -206,9 +219,8 @@ export default function Infrastructure() {
           </div>
 
           {/* Top Resources by Utilization */}
-          <div style={cardBase} className="hover:!border-gold/15">
+          <div style={framedCard('/resource-utilization.png')}>
             <div className="relative z-10 flex flex-1 flex-col">
-              <h3 style={sectionTitle}>Top Resources by Utilization</h3>
               <div className="flex flex-1 flex-col justify-around gap-4">
                 {topResources.map((res) => {
                   const color = res.percentage >= 90 ? '#E74C3C' : res.percentage >= 70 ? '#E67E22' : '#C8A434'