/**
 * Premium Category Icons for Comparison Spec Tables
 * Ultra-detailed gradient SVGs with 3D depth, reflections, shadows, and rich visual detail
 * Professional hardware review site quality
 */

.cat-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CORE SPECS — Premium CPU chip with detailed pins, die, and IHS
   ═══════════════════════════════════════════════════════════════ */
.cat-cores {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='cs1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234338ca'/%3E%3Cstop offset='.5' stop-color='%234f46e5'/%3E%3Cstop offset='1' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='cs2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23818cf8'/%3E%3Cstop offset='.4' stop-color='%23a5b4fc'/%3E%3Cstop offset='1' stop-color='%23c7d2fe'/%3E%3C/linearGradient%3E%3ClinearGradient id='cs3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e0e7ff' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23818cf8' stop-opacity='.3'/%3E%3C/linearGradient%3E%3Cfilter id='cssh'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.5' flood-color='%231e1b4b' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='12' y='12' width='40' height='40' rx='4' fill='url(%23cs1)' stroke='%233730a3' stroke-width='1.2' filter='url(%23cssh)'/%3E%3Crect x='13' y='12' width='38' height='6' rx='3' fill='%23312e81' opacity='.4'/%3E%3Crect x='18' y='18' width='28' height='28' rx='3' fill='url(%23cs2)' stroke='%234338ca' stroke-width='.8'/%3E%3Crect x='22' y='22' width='20' height='20' rx='2' fill='url(%23cs3)' stroke='%236366f1' stroke-width='.5'/%3E%3Crect x='26' y='26' width='12' height='12' rx='1.5' fill='%23e0e7ff' opacity='.5'/%3E%3Crect x='29' y='29' width='6' height='6' rx='1' fill='%23fff' opacity='.3'/%3E%3Crect x='17' y='3' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='24' y='3' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='31' y='3' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='38' y='3' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='44' y='3' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='17' y='52' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='24' y='52' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='31' y='52' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='38' y='52' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='44' y='52' width='3' height='9' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='3' y='17' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='3' y='24' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='3' y='31' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='3' y='38' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='3' y='44' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='52' y='17' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='52' y='24' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='52' y='31' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='52' y='38' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3Crect x='52' y='44' width='9' height='3' rx='1.2' fill='%236366f1' stroke='%234338ca' stroke-width='.4'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   CACHE — Stacked memory layers with gradient depth and chip detail
   ═══════════════════════════════════════════════════════════════ */
.cat-cache {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ca1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306b6d4'/%3E%3Cstop offset='1' stop-color='%230e7490'/%3E%3C/linearGradient%3E%3ClinearGradient id='ca2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2322d3ee'/%3E%3Cstop offset='1' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3ClinearGradient id='ca3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2367e8f9'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3Cfilter id='cash'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%23164e63' flood-opacity='.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='6' y='38' width='52' height='16' rx='4' fill='url(%23ca1)' stroke='%230e7490' stroke-width='1' filter='url(%23cash)'/%3E%3Crect x='8' y='40' width='8' height='10' rx='1.5' fill='%230891b2' stroke='%2306b6d4' stroke-width='.5'/%3E%3Crect x='18' y='40' width='8' height='10' rx='1.5' fill='%230891b2' stroke='%2306b6d4' stroke-width='.5'/%3E%3Crect x='28' y='40' width='8' height='10' rx='1.5' fill='%230891b2' stroke='%2306b6d4' stroke-width='.5'/%3E%3Crect x='38' y='40' width='8' height='10' rx='1.5' fill='%230891b2' stroke='%2306b6d4' stroke-width='.5'/%3E%3Crect x='48' y='40' width='8' height='10' rx='1.5' fill='%230891b2' stroke='%2306b6d4' stroke-width='.5'/%3E%3Crect x='9' y='41' width='6' height='3' rx='.8' fill='%23fff' opacity='.15'/%3E%3Crect x='19' y='41' width='6' height='3' rx='.8' fill='%23fff' opacity='.15'/%3E%3Crect x='29' y='41' width='6' height='3' rx='.8' fill='%23fff' opacity='.15'/%3E%3Crect x='39' y='41' width='6' height='3' rx='.8' fill='%23fff' opacity='.15'/%3E%3Crect x='49' y='41' width='6' height='3' rx='.8' fill='%23fff' opacity='.15'/%3E%3Crect x='10' y='24' width='44' height='14' rx='4' fill='url(%23ca2)' stroke='%230891b2' stroke-width='.8'/%3E%3Crect x='13' y='27' width='7' height='8' rx='1.2' fill='%2306b6d4' stroke='%2322d3ee' stroke-width='.4'/%3E%3Crect x='22' y='27' width='7' height='8' rx='1.2' fill='%2306b6d4' stroke='%2322d3ee' stroke-width='.4'/%3E%3Crect x='31' y='27' width='7' height='8' rx='1.2' fill='%2306b6d4' stroke='%2322d3ee' stroke-width='.4'/%3E%3Crect x='40' y='27' width='7' height='8' rx='1.2' fill='%2306b6d4' stroke='%2322d3ee' stroke-width='.4'/%3E%3Crect x='14' y='28' width='5' height='2.5' rx='.5' fill='%23fff' opacity='.2'/%3E%3Crect x='23' y='28' width='5' height='2.5' rx='.5' fill='%23fff' opacity='.2'/%3E%3Crect x='32' y='28' width='5' height='2.5' rx='.5' fill='%23fff' opacity='.2'/%3E%3Crect x='41' y='28' width='5' height='2.5' rx='.5' fill='%23fff' opacity='.2'/%3E%3Crect x='16' y='10' width='32' height='14' rx='4' fill='url(%23ca3)' stroke='%2322d3ee' stroke-width='.8'/%3E%3Crect x='20' y='13' width='6' height='8' rx='1' fill='%2322d3ee' stroke='%2367e8f9' stroke-width='.4'/%3E%3Crect x='29' y='13' width='6' height='8' rx='1' fill='%2322d3ee' stroke='%2367e8f9' stroke-width='.4'/%3E%3Crect x='38' y='13' width='6' height='8' rx='1' fill='%2322d3ee' stroke='%2367e8f9' stroke-width='.4'/%3E%3Crect x='21' y='14' width='4' height='2' rx='.4' fill='%23fff' opacity='.3'/%3E%3Crect x='30' y='14' width='4' height='2' rx='.4' fill='%23fff' opacity='.3'/%3E%3Crect x='39' y='14' width='4' height='2' rx='.4' fill='%23fff' opacity='.3'/%3E%3Ctext x='32' y='9' text-anchor='middle' font-size='6' font-weight='bold' fill='%2367e8f9' opacity='.6' font-family='sans-serif'%3EL1%3C/text%3E%3Ctext x='32' y='23' text-anchor='middle' font-size='5' font-weight='bold' fill='%2322d3ee' opacity='.4' font-family='sans-serif'%3EL2%3C/text%3E%3Ctext x='32' y='37' text-anchor='middle' font-size='5' font-weight='bold' fill='%2306b6d4' opacity='.3' font-family='sans-serif'%3EL3%3C/text%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   POWER — Lightning bolt with electric glow, arc, and energy field
   ═══════════════════════════════════════════════════════════════ */
.cat-power {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='pw1' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.3' stop-color='%23fbbf24'/%3E%3Cstop offset='.7' stop-color='%23f59e0b'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3ClinearGradient id='pw2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fef3c7'/%3E%3Cstop offset='1' stop-color='%23fde68a'/%3E%3C/linearGradient%3E%3Cfilter id='pwg'%3E%3CfeGaussianBlur stdDeviation='3' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='pwg2'%3E%3CfeGaussianBlur stdDeviation='5' result='b'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='36 2 10 36 28 36 24 62 52 26 34 26' fill='%23fbbf24' opacity='.15' filter='url(%23pwg2)'/%3E%3Cpolygon points='36 2 10 36 28 36 24 62 52 26 34 26' fill='url(%23pw1)' stroke='%23b45309' stroke-width='1' stroke-linejoin='round' filter='url(%23pwg)'/%3E%3Cpolygon points='34 8 16 33 27 33 24 54 44 28 34 28' fill='url(%23pw2)' opacity='.6'/%3E%3Cpolygon points='33 14 22 30 28 30 26 44 38 28 33 28' fill='%23fffbeb' opacity='.4'/%3E%3Cline x1='8' y1='18' x2='14' y2='22' stroke='%23fbbf24' stroke-width='.8' opacity='.4' stroke-linecap='round'/%3E%3Cline x1='50' y1='38' x2='56' y2='42' stroke='%23fbbf24' stroke-width='.8' opacity='.4' stroke-linecap='round'/%3E%3Cline x1='6' y1='30' x2='10' y2='30' stroke='%23fbbf24' stroke-width='.6' opacity='.3' stroke-linecap='round'/%3E%3Cline x1='54' y1='24' x2='58' y2='24' stroke='%23fbbf24' stroke-width='.6' opacity='.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   ARCHITECTURE — Layered silicon blocks with interconnect traces
   ═══════════════════════════════════════════════════════════════ */
.cat-arch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ar1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='1' stop-color='%235b21b6'/%3E%3C/linearGradient%3E%3ClinearGradient id='ar2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3Cfilter id='arsh'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1.5' flood-color='%233b0764' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='4' y='4' width='24' height='24' rx='5' fill='url(%23ar1)' stroke='%234c1d95' stroke-width='.8' filter='url(%23arsh)'/%3E%3Crect x='36' y='4' width='24' height='24' rx='5' fill='url(%23ar1)' stroke='%234c1d95' stroke-width='.8' filter='url(%23arsh)'/%3E%3Crect x='4' y='36' width='24' height='24' rx='5' fill='url(%23ar1)' stroke='%234c1d95' stroke-width='.8' filter='url(%23arsh)'/%3E%3Crect x='36' y='36' width='24' height='24' rx='5' fill='url(%23ar1)' stroke='%234c1d95' stroke-width='.8' filter='url(%23arsh)'/%3E%3Crect x='7' y='7' width='18' height='18' rx='3' fill='url(%23ar2)' opacity='.5'/%3E%3Crect x='39' y='7' width='18' height='18' rx='3' fill='url(%23ar2)' opacity='.5'/%3E%3Crect x='7' y='39' width='18' height='18' rx='3' fill='url(%23ar2)' opacity='.5'/%3E%3Crect x='39' y='39' width='18' height='18' rx='3' fill='url(%23ar2)' opacity='.5'/%3E%3Crect x='10' y='10' width='12' height='12' rx='2' fill='%23e9d5ff' opacity='.25'/%3E%3Crect x='42' y='10' width='12' height='12' rx='2' fill='%23e9d5ff' opacity='.25'/%3E%3Crect x='10' y='42' width='12' height='12' rx='2' fill='%23e9d5ff' opacity='.25'/%3E%3Crect x='42' y='42' width='12' height='12' rx='2' fill='%23e9d5ff' opacity='.25'/%3E%3Cline x1='28' y1='14' x2='36' y2='14' stroke='%23c4b5fd' stroke-width='2.5' stroke-dasharray='3 2' stroke-linecap='round'/%3E%3Cline x1='28' y1='50' x2='36' y2='50' stroke='%23c4b5fd' stroke-width='2.5' stroke-dasharray='3 2' stroke-linecap='round'/%3E%3Cline x1='14' y1='28' x2='14' y2='36' stroke='%23c4b5fd' stroke-width='2.5' stroke-dasharray='3 2' stroke-linecap='round'/%3E%3Cline x1='50' y1='28' x2='50' y2='36' stroke='%23c4b5fd' stroke-width='2.5' stroke-dasharray='3 2' stroke-linecap='round'/%3E%3Cline x1='28' y1='16' x2='36' y2='48' stroke='%23a78bfa' stroke-width='1' stroke-dasharray='2 3' opacity='.3'/%3E%3Cline x1='28' y1='48' x2='36' y2='16' stroke='%23a78bfa' stroke-width='1' stroke-dasharray='2 3' opacity='.3'/%3E%3Ccircle cx='32' cy='32' r='3' fill='%23c4b5fd' opacity='.5'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   MEMORY — RAM DIMM stick with detailed chips, traces, and gold contacts
   ═══════════════════════════════════════════════════════════════ */
.cat-memory {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='mm1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2310b981'/%3E%3Cstop offset='.5' stop-color='%23059669'/%3E%3Cstop offset='1' stop-color='%23047857'/%3E%3C/linearGradient%3E%3ClinearGradient id='mm2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2334d399'/%3E%3Cstop offset='1' stop-color='%2310b981'/%3E%3C/linearGradient%3E%3ClinearGradient id='mmg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3Cfilter id='mmsh'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='1.5' flood-color='%23064e3b' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='10' width='60' height='36' rx='4' fill='url(%23mm1)' stroke='%23065f46' stroke-width='1' filter='url(%23mmsh)'/%3E%3Crect x='2' y='10' width='60' height='7' rx='4' fill='%23065f46' opacity='.35'/%3E%3Crect x='4' y='12' width='10' height='3' rx='1' fill='%2334d399' opacity='.3'/%3E%3Crect x='7' y='22' width='8' height='16' rx='1.5' fill='url(%23mm2)' stroke='%23059669' stroke-width='.6'/%3E%3Crect x='17' y='22' width='8' height='16' rx='1.5' fill='url(%23mm2)' stroke='%23059669' stroke-width='.6'/%3E%3Crect x='27' y='22' width='8' height='16' rx='1.5' fill='url(%23mm2)' stroke='%23059669' stroke-width='.6'/%3E%3Crect x='37' y='22' width='8' height='16' rx='1.5' fill='url(%23mm2)' stroke='%23059669' stroke-width='.6'/%3E%3Crect x='47' y='22' width='8' height='16' rx='1.5' fill='url(%23mm2)' stroke='%23059669' stroke-width='.6'/%3E%3Crect x='8' y='23' width='6' height='5' rx='.8' fill='%23fff' opacity='.12'/%3E%3Crect x='18' y='23' width='6' height='5' rx='.8' fill='%23fff' opacity='.12'/%3E%3Crect x='28' y='23' width='6' height='5' rx='.8' fill='%23fff' opacity='.12'/%3E%3Crect x='38' y='23' width='6' height='5' rx='.8' fill='%23fff' opacity='.12'/%3E%3Crect x='48' y='23' width='6' height='5' rx='.8' fill='%23fff' opacity='.12'/%3E%3Crect x='9' y='30' width='4' height='2' rx='.3' fill='%23a7f3d0' opacity='.3'/%3E%3Crect x='19' y='30' width='4' height='2' rx='.3' fill='%23a7f3d0' opacity='.3'/%3E%3Crect x='29' y='30' width='4' height='2' rx='.3' fill='%23a7f3d0' opacity='.3'/%3E%3Crect x='39' y='30' width='4' height='2' rx='.3' fill='%23a7f3d0' opacity='.3'/%3E%3Crect x='49' y='30' width='4' height='2' rx='.3' fill='%23a7f3d0' opacity='.3'/%3E%3Crect x='6' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='12' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='18' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='24' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='30' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='36' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='42' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='48' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='54' y='46' width='4' height='6' rx='.5' fill='url(%23mmg)'/%3E%3Crect x='24' y='46' width='16' height='1' rx='.3' fill='%23fff' opacity='.15'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   PLATFORM — Motherboard with socket, VRM, and PCB traces
   ═══════════════════════════════════════════════════════════════ */
.cat-platform {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='pl1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232563eb'/%3E%3Cstop offset='1' stop-color='%231d4ed8'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231e40af'/%3E%3Cstop offset='1' stop-color='%231e3a8a'/%3E%3C/linearGradient%3E%3ClinearGradient id='pl3' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2393c5fd'/%3E%3Cstop offset='1' stop-color='%2360a5fa'/%3E%3C/linearGradient%3E%3Cfilter id='plsh'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%231e3a8a' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='3' y='3' width='58' height='58' rx='5' fill='url(%23pl1)' stroke='%231d4ed8' stroke-width='1' filter='url(%23plsh)'/%3E%3Crect x='18' y='18' width='28' height='28' rx='4' fill='url(%23pl2)' stroke='%233b82f6' stroke-width='1.2'/%3E%3Crect x='22' y='22' width='20' height='20' rx='2.5' fill='url(%23pl3)' opacity='.4'/%3E%3Crect x='26' y='26' width='12' height='12' rx='1.5' fill='%23bfdbfe' opacity='.3'/%3E%3Crect x='6' y='6' width='8' height='5' rx='1.5' fill='%2360a5fa' opacity='.5' stroke='%233b82f6' stroke-width='.4'/%3E%3Crect x='50' y='6' width='8' height='5' rx='1.5' fill='%2360a5fa' opacity='.5' stroke='%233b82f6' stroke-width='.4'/%3E%3Crect x='6' y='53' width='8' height='5' rx='1.5' fill='%2360a5fa' opacity='.5' stroke='%233b82f6' stroke-width='.4'/%3E%3Crect x='50' y='53' width='8' height='5' rx='1.5' fill='%2360a5fa' opacity='.5' stroke='%233b82f6' stroke-width='.4'/%3E%3Crect x='6' y='14' width='5' height='8' rx='1' fill='%2393c5fd' opacity='.3'/%3E%3Crect x='6' y='26' width='5' height='8' rx='1' fill='%2393c5fd' opacity='.3'/%3E%3Crect x='53' y='14' width='5' height='8' rx='1' fill='%2393c5fd' opacity='.3'/%3E%3Crect x='53' y='26' width='5' height='8' rx='1' fill='%2393c5fd' opacity='.3'/%3E%3Cline x1='18' y1='8' x2='48' y2='8' stroke='%2393c5fd' stroke-width='.8' opacity='.3'/%3E%3Cline x1='18' y1='56' x2='48' y2='56' stroke='%2393c5fd' stroke-width='.8' opacity='.3'/%3E%3Cline x1='8' y1='38' x2='8' y2='50' stroke='%2393c5fd' stroke-width='.8' opacity='.3'/%3E%3Cline x1='56' y1='38' x2='56' y2='50' stroke='%2393c5fd' stroke-width='.8' opacity='.3'/%3E%3Ccircle cx='7' cy='7' r='1.5' fill='%23bfdbfe' opacity='.4'/%3E%3Ccircle cx='57' cy='7' r='1.5' fill='%23bfdbfe' opacity='.4'/%3E%3Ccircle cx='7' cy='57' r='1.5' fill='%23bfdbfe' opacity='.4'/%3E%3Ccircle cx='57' cy='57' r='1.5' fill='%23bfdbfe' opacity='.4'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   CLOCKS — Precision speedometer gauge with needle and tick marks
   ═══════════════════════════════════════════════════════════════ */
.cat-clocks {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ck1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ea580c'/%3E%3Cstop offset='.5' stop-color='%23f97316'/%3E%3Cstop offset='1' stop-color='%23fb923c'/%3E%3C/linearGradient%3E%3ClinearGradient id='ck2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fed7aa'/%3E%3Cstop offset='1' stop-color='%23fdba74'/%3E%3C/linearGradient%3E%3CradialGradient id='ck3' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23fff7ed'/%3E%3Cstop offset='1' stop-color='%23f97316'/%3E%3C/radialGradient%3E%3Cfilter id='cksh'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2' flood-color='%239a3412' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='28' fill='url(%23ck1)' stroke='%23c2410c' stroke-width='1.5' filter='url(%23cksh)'/%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='%23fff' stroke-width='.6' opacity='.2'/%3E%3Ccircle cx='32' cy='32' r='20' fill='none' stroke='%23fff' stroke-width='.4' opacity='.12'/%3E%3Cline x1='32' y1='8' x2='32' y2='12' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3Cline x1='52' y1='32' x2='56' y2='32' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3Cline x1='8' y1='32' x2='12' y2='32' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3Cline x1='32' y1='52' x2='32' y2='56' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/%3E%3Cline x1='46' y1='14' x2='48' y2='16' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.4'/%3E%3Cline x1='14' y1='46' x2='16' y2='48' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.4'/%3E%3Cline x1='46' y1='50' x2='48' y2='48' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.4'/%3E%3Cline x1='14' y1='18' x2='16' y2='16' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.4'/%3E%3Cline x1='32' y1='32' x2='32' y2='13' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.95'/%3E%3Cline x1='32' y1='32' x2='46' y2='38' stroke='url(%23ck2)' stroke-width='2' stroke-linecap='round' opacity='.8'/%3E%3Ccircle cx='32' cy='32' r='4.5' fill='url(%23ck3)'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%23fff' opacity='.6'/%3E%3Ctext x='32' y='48' text-anchor='middle' font-size='5.5' font-weight='bold' fill='%23fff' opacity='.35' font-family='sans-serif'%3EGHz%3C/text%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE — 3D bar chart with gradient bars and grid
   ═══════════════════════════════════════════════════════════════ */
.cat-perf {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='pf1' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23059669'/%3E%3Cstop offset='1' stop-color='%2334d399'/%3E%3C/linearGradient%3E%3ClinearGradient id='pf2' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%232563eb'/%3E%3Cstop offset='1' stop-color='%2393c5fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='pf3' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='1' stop-color='%23c4b5fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='pf4' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23dc2626'/%3E%3Cstop offset='1' stop-color='%23fca5a5'/%3E%3C/linearGradient%3E%3Cfilter id='pfsh'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.2'/%3E%3C/filter%3E%3C/defs%3E%3Cline x1='6' y1='55' x2='58' y2='55' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='6' y1='55' x2='6' y2='6' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='6' y1='20' x2='58' y2='20' stroke='%23e2e8f0' stroke-width='.4' stroke-dasharray='3 3'/%3E%3Cline x1='6' y1='35' x2='58' y2='35' stroke='%23e2e8f0' stroke-width='.4' stroke-dasharray='3 3'/%3E%3Crect x='10' y='28' width='10' height='27' rx='2.5' fill='url(%23pf1)' stroke='%23047857' stroke-width='.5' filter='url(%23pfsh)'/%3E%3Crect x='24' y='12' width='10' height='43' rx='2.5' fill='url(%23pf2)' stroke='%231d4ed8' stroke-width='.5' filter='url(%23pfsh)'/%3E%3Crect x='38' y='20' width='10' height='35' rx='2.5' fill='url(%23pf3)' stroke='%235b21b6' stroke-width='.5' filter='url(%23pfsh)'/%3E%3Crect x='52' y='34' width='6' height='21' rx='2' fill='url(%23pf4)' stroke='%23b91c1c' stroke-width='.5' filter='url(%23pfsh)'/%3E%3Crect x='11' y='29' width='8' height='5' rx='1' fill='%23fff' opacity='.15'/%3E%3Crect x='25' y='13' width='8' height='5' rx='1' fill='%23fff' opacity='.15'/%3E%3Crect x='39' y='21' width='8' height='5' rx='1' fill='%23fff' opacity='.15'/%3E%3Cpolygon points='4 4 8 8 4 8' fill='%2394a3b8'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   GRAPHICS — GPU card with dual fans, shroud, and backplate
   ═══════════════════════════════════════════════════════════════ */
.cat-graphics {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='gx1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23475569'/%3E%3Cstop offset='.5' stop-color='%2364748b'/%3E%3Cstop offset='1' stop-color='%23475569'/%3E%3C/linearGradient%3E%3ClinearGradient id='gx2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23334155'/%3E%3Cstop offset='1' stop-color='%231e293b'/%3E%3C/linearGradient%3E%3Cfilter id='gxsh'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%230f172a' flood-opacity='.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='12' width='60' height='38' rx='5' fill='url(%23gx1)' stroke='%23334155' stroke-width='1' filter='url(%23gxsh)'/%3E%3Crect x='2' y='12' width='60' height='5' rx='5' fill='%23334155' opacity='.5'/%3E%3Ccircle cx='20' cy='32' r='12' fill='url(%23gx2)' stroke='%2394a3b8' stroke-width='.8'/%3E%3Ccircle cx='44' cy='32' r='12' fill='url(%23gx2)' stroke='%2394a3b8' stroke-width='.8'/%3E%3Ccircle cx='20' cy='32' r='4' fill='%2364748b' stroke='%2394a3b8' stroke-width='.5'/%3E%3Ccircle cx='44' cy='32' r='4' fill='%2364748b' stroke='%2394a3b8' stroke-width='.5'/%3E%3Ccircle cx='20' cy='32' r='1.5' fill='%23cbd5e1'/%3E%3Ccircle cx='44' cy='32' r='1.5' fill='%23cbd5e1'/%3E%3Cpath d='M20 20 L22 27 L20 32 L18 27Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M20 44 L18 37 L20 32 L22 37Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M8 32 L15 29 L20 32 L15 35Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M32 32 L25 35 L20 32 L25 29Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M44 20 L46 27 L44 32 L42 27Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M44 44 L42 37 L44 32 L46 37Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M32 32 L39 29 L44 32 L39 35Z' fill='%2394a3b8' opacity='.45'/%3E%3Cpath d='M56 32 L49 35 L44 32 L49 29Z' fill='%2394a3b8' opacity='.45'/%3E%3Crect x='6' y='6' width='4' height='6' rx='1' fill='%2394a3b8' stroke='%2364748b' stroke-width='.4'/%3E%3Crect x='13' y='6' width='4' height='6' rx='1' fill='%2394a3b8' stroke='%2364748b' stroke-width='.4'/%3E%3Crect x='20' y='6' width='4' height='6' rx='1' fill='%2394a3b8' stroke='%2364748b' stroke-width='.4'/%3E%3Crect x='27' y='6' width='4' height='6' rx='1' fill='%2394a3b8' stroke='%2364748b' stroke-width='.4'/%3E%3Crect x='34' y='6' width='4' height='6' rx='1' fill='%23fbbf24' stroke='%23d97706' stroke-width='.4'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   AI/NPU — Neural network with layered nodes, connections, and glow
   ═══════════════════════════════════════════════════════════════ */
.cat-ai {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ai1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ec4899'/%3E%3Cstop offset='1' stop-color='%23a855f7'/%3E%3C/linearGradient%3E%3ClinearGradient id='ai2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f9a8d4'/%3E%3Cstop offset='1' stop-color='%23c084fc'/%3E%3C/linearGradient%3E%3Cfilter id='aig'%3E%3CfeGaussianBlur stdDeviation='1.5' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cline x1='10' y1='14' x2='32' y2='10' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='10' y1='32' x2='32' y2='10' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='10' y1='50' x2='32' y2='54' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='10' y1='32' x2='32' y2='32' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='10' y1='14' x2='32' y2='32' stroke='%23d946ef' stroke-width='1' opacity='.25'/%3E%3Cline x1='10' y1='50' x2='32' y2='32' stroke='%23d946ef' stroke-width='1' opacity='.25'/%3E%3Cline x1='32' y1='10' x2='54' y2='22' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='32' y1='32' x2='54' y2='22' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='32' y1='32' x2='54' y2='42' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='32' y1='54' x2='54' y2='42' stroke='%23d946ef' stroke-width='1.2' opacity='.35'/%3E%3Cline x1='10' y1='14' x2='32' y2='54' stroke='%23d946ef' stroke-width='.6' opacity='.15'/%3E%3Cline x1='10' y1='50' x2='32' y2='10' stroke='%23d946ef' stroke-width='.6' opacity='.15'/%3E%3Ccircle cx='10' cy='14' r='6' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='10' cy='32' r='6' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='10' cy='50' r='6' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='32' cy='10' r='7' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='32' cy='32' r='8' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='32' cy='54' r='7' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='54' cy='22' r='6' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='54' cy='42' r='6' fill='url(%23ai1)' filter='url(%23aig)'/%3E%3Ccircle cx='10' cy='14' r='2.5' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='10' cy='32' r='2.5' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='10' cy='50' r='2.5' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='32' cy='10' r='3' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='32' cy='32' r='3.5' fill='url(%23ai2)' opacity='.7'/%3E%3Ccircle cx='32' cy='54' r='3' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='54' cy='22' r='2.5' fill='url(%23ai2)' opacity='.6'/%3E%3Ccircle cx='54' cy='42' r='2.5' fill='url(%23ai2)' opacity='.6'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   AI/RT — Ray tracing star burst with prismatic glow
   ═══════════════════════════════════════════════════════════════ */
.cat-airt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='rt1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbbf24'/%3E%3Cstop offset='.4' stop-color='%23f97316'/%3E%3Cstop offset='1' stop-color='%23ef4444'/%3E%3C/linearGradient%3E%3ClinearGradient id='rt2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fef3c7'/%3E%3Cstop offset='1' stop-color='%23fde68a'/%3E%3C/linearGradient%3E%3Cfilter id='rtg'%3E%3CfeGaussianBlur stdDeviation='2.5' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='rtg2'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='32 2 38 22 58 22 42 35 48 56 32 43 16 56 22 35 6 22 26 22' fill='%23fbbf24' opacity='.12' filter='url(%23rtg2)'/%3E%3Cpolygon points='32 2 38 22 58 22 42 35 48 56 32 43 16 56 22 35 6 22 26 22' fill='url(%23rt1)' stroke='%23dc2626' stroke-width='.8' stroke-linejoin='round' filter='url(%23rtg)'/%3E%3Cpolygon points='32 10 36 24 50 24 38 33 42 48 32 39 22 48 26 33 14 24 28 24' fill='url(%23rt2)' opacity='.4'/%3E%3Cpolygon points='32 16 34 25 44 25 36 31 38 42 32 36 26 42 28 31 20 25 30 25' fill='%23fffbeb' opacity='.25'/%3E%3Ccircle cx='32' cy='30' r='4' fill='%23fff' opacity='.2'/%3E%3Cline x1='32' y1='2' x2='32' y2='8' stroke='%23fef3c7' stroke-width='.8' opacity='.4' stroke-linecap='round'/%3E%3Cline x1='58' y1='22' x2='52' y2='22' stroke='%23fef3c7' stroke-width='.8' opacity='.4' stroke-linecap='round'/%3E%3Cline x1='6' y1='22' x2='12' y2='22' stroke='%23fef3c7' stroke-width='.8' opacity='.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   INTERCONNECT — Network topology with glowing nodes and links
   ═══════════════════════════════════════════════════════════════ */
.cat-interconnect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ic1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2314b8a6'/%3E%3Cstop offset='1' stop-color='%230d9488'/%3E%3C/linearGradient%3E%3ClinearGradient id='ic2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235eead4'/%3E%3Cstop offset='1' stop-color='%232dd4bf'/%3E%3C/linearGradient%3E%3Cfilter id='icg'%3E%3CfeGaussianBlur stdDeviation='1.5' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cline x1='14' y1='14' x2='50' y2='14' stroke='%2314b8a6' stroke-width='2' opacity='.4'/%3E%3Cline x1='14' y1='14' x2='14' y2='50' stroke='%2314b8a6' stroke-width='2' opacity='.4'/%3E%3Cline x1='50' y1='14' x2='50' y2='50' stroke='%2314b8a6' stroke-width='2' opacity='.4'/%3E%3Cline x1='14' y1='50' x2='50' y2='50' stroke='%2314b8a6' stroke-width='2' opacity='.4'/%3E%3Cline x1='14' y1='14' x2='50' y2='50' stroke='%2314b8a6' stroke-width='1.2' opacity='.2'/%3E%3Cline x1='50' y1='14' x2='14' y2='50' stroke='%2314b8a6' stroke-width='1.2' opacity='.2'/%3E%3Cline x1='14' y1='14' x2='32' y2='32' stroke='%232dd4bf' stroke-width='1.5' opacity='.3'/%3E%3Cline x1='50' y1='14' x2='32' y2='32' stroke='%232dd4bf' stroke-width='1.5' opacity='.3'/%3E%3Cline x1='14' y1='50' x2='32' y2='32' stroke='%232dd4bf' stroke-width='1.5' opacity='.3'/%3E%3Cline x1='50' y1='50' x2='32' y2='32' stroke='%232dd4bf' stroke-width='1.5' opacity='.3'/%3E%3Ccircle cx='14' cy='14' r='7' fill='url(%23ic1)' stroke='%230f766e' stroke-width='.8' filter='url(%23icg)'/%3E%3Ccircle cx='50' cy='14' r='7' fill='url(%23ic1)' stroke='%230f766e' stroke-width='.8' filter='url(%23icg)'/%3E%3Ccircle cx='14' cy='50' r='7' fill='url(%23ic1)' stroke='%230f766e' stroke-width='.8' filter='url(%23icg)'/%3E%3Ccircle cx='50' cy='50' r='7' fill='url(%23ic1)' stroke='%230f766e' stroke-width='.8' filter='url(%23icg)'/%3E%3Ccircle cx='32' cy='32' r='8' fill='url(%23ic2)' stroke='%230d9488' stroke-width='1' filter='url(%23icg)'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='50' cy='14' r='3' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='14' cy='50' r='3' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23fff' opacity='.25'/%3E%3Ccircle cx='32' cy='32' r='3.5' fill='%23fff' opacity='.3'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   INTEL HYBRID — Dual-core P/E design with detailed chip layout
   ═══════════════════════════════════════════════════════════════ */
.cat-hybrid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='hy1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230071c5'/%3E%3Cstop offset='1' stop-color='%2300aeef'/%3E%3C/linearGradient%3E%3ClinearGradient id='hy2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2300aeef'/%3E%3Cstop offset='1' stop-color='%230071c5'/%3E%3C/linearGradient%3E%3Cfilter id='hysh'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='1.5' flood-color='%23003d6b' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='3' y='8' width='26' height='48' rx='5' fill='url(%23hy1)' stroke='%23005a9e' stroke-width='1' filter='url(%23hysh)'/%3E%3Crect x='35' y='8' width='26' height='48' rx='5' fill='url(%23hy1)' stroke='%23005a9e' stroke-width='1' filter='url(%23hysh)'/%3E%3Crect x='6' y='14' width='20' height='16' rx='3' fill='url(%23hy2)' opacity='.5' stroke='%2300aeef' stroke-width='.5'/%3E%3Crect x='38' y='14' width='20' height='16' rx='3' fill='url(%23hy2)' opacity='.5' stroke='%2300aeef' stroke-width='.5'/%3E%3Crect x='8' y='16' width='16' height='4' rx='1' fill='%2393c5fd' opacity='.25'/%3E%3Crect x='40' y='16' width='16' height='4' rx='1' fill='%2393c5fd' opacity='.25'/%3E%3Crect x='6' y='34' width='20' height='12' rx='2.5' fill='url(%23hy2)' opacity='.35' stroke='%2300aeef' stroke-width='.4'/%3E%3Crect x='38' y='34' width='20' height='12' rx='2.5' fill='url(%23hy2)' opacity='.35' stroke='%2300aeef' stroke-width='.4'/%3E%3Crect x='8' y='36' width='7' height='8' rx='1' fill='%2393c5fd' opacity='.2'/%3E%3Crect x='17' y='36' width='7' height='8' rx='1' fill='%2393c5fd' opacity='.2'/%3E%3Crect x='40' y='36' width='7' height='8' rx='1' fill='%2393c5fd' opacity='.2'/%3E%3Crect x='49' y='36' width='7' height='8' rx='1' fill='%2393c5fd' opacity='.2'/%3E%3Cline x1='29' y1='22' x2='35' y2='22' stroke='%2360a5fa' stroke-width='3' stroke-dasharray='2 1.5' stroke-linecap='round'/%3E%3Cline x1='29' y1='40' x2='35' y2='40' stroke='%2360a5fa' stroke-width='3' stroke-dasharray='2 1.5' stroke-linecap='round'/%3E%3Ctext x='16' y='28' text-anchor='middle' font-size='10' font-weight='bold' fill='%23fff' opacity='.6' font-family='sans-serif'%3EP%3C/text%3E%3Ctext x='48' y='28' text-anchor='middle' font-size='10' font-weight='bold' fill='%23fff' opacity='.6' font-family='sans-serif'%3EE%3C/text%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   AMD MULTI-DIE / MCM — Chiplet layout with CCD + IO die
   ═══════════════════════════════════════════════════════════════ */
.cat-multidie {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='md1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ef4444'/%3E%3Cstop offset='1' stop-color='%23dc2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='md2' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbbf24'/%3E%3Cstop offset='1' stop-color='%23f59e0b'/%3E%3C/linearGradient%3E%3Cfilter id='mdsh'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1.5' flood-color='%23000' flood-opacity='.3'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='3' y='3' width='58' height='58' rx='5' fill='%230f172a' stroke='%23374151' stroke-width='1' filter='url(%23mdsh)'/%3E%3Crect x='5' y='5' width='54' height='54' rx='4' fill='%231a1a2e' stroke='%23374151' stroke-width='.5'/%3E%3Crect x='7' y='7' width='22' height='22' rx='3.5' fill='url(%23md1)' stroke='%23991b1b' stroke-width='.8'/%3E%3Crect x='35' y='7' width='22' height='22' rx='3.5' fill='url(%23md1)' stroke='%23991b1b' stroke-width='.8'/%3E%3Crect x='7' y='35' width='22' height='22' rx='3.5' fill='url(%23md1)' stroke='%23991b1b' stroke-width='.8'/%3E%3Crect x='35' y='35' width='22' height='22' rx='3.5' fill='url(%23md2)' stroke='%23d97706' stroke-width='.8'/%3E%3Crect x='10' y='10' width='16' height='16' rx='2' fill='%23fca5a5' opacity='.2'/%3E%3Crect x='38' y='10' width='16' height='16' rx='2' fill='%23fca5a5' opacity='.2'/%3E%3Crect x='10' y='38' width='16' height='16' rx='2' fill='%23fca5a5' opacity='.2'/%3E%3Crect x='38' y='38' width='16' height='16' rx='2' fill='%23fef3c7' opacity='.2'/%3E%3Crect x='12' y='12' width='5' height='5' rx='1' fill='%23fff' opacity='.1'/%3E%3Crect x='19' y='12' width='5' height='5' rx='1' fill='%23fff' opacity='.1'/%3E%3Crect x='12' y='19' width='5' height='5' rx='1' fill='%23fff' opacity='.1'/%3E%3Crect x='19' y='19' width='5' height='5' rx='1' fill='%23fff' opacity='.1'/%3E%3Ctext x='14' y='16' text-anchor='middle' font-size='5' font-weight='bold' fill='%23fff' opacity='.4' font-family='sans-serif'%3ECCD%3C/text%3E%3Ctext x='46' y='16' text-anchor='middle' font-size='5' font-weight='bold' fill='%23fff' opacity='.4' font-family='sans-serif'%3ECCD%3C/text%3E%3Ctext x='18' y='50' text-anchor='middle' font-size='5' font-weight='bold' fill='%23fff' opacity='.4' font-family='sans-serif'%3ECCD%3C/text%3E%3Ctext x='46' y='50' text-anchor='middle' font-size='7' font-weight='bold' fill='%23fff' opacity='.5' font-family='sans-serif'%3EIO%3C/text%3E%3Cline x1='29' y1='18' x2='35' y2='18' stroke='%23f87171' stroke-width='1.5' stroke-dasharray='2 1' opacity='.4'/%3E%3Cline x1='18' y1='29' x2='18' y2='35' stroke='%23f87171' stroke-width='1.5' stroke-dasharray='2 1' opacity='.4'/%3E%3Cline x1='46' y1='29' x2='46' y2='35' stroke='%23f87171' stroke-width='1.5' stroke-dasharray='2 1' opacity='.4'/%3E%3Cline x1='29' y1='46' x2='35' y2='46' stroke='%23fbbf24' stroke-width='1.5' stroke-dasharray='2 1' opacity='.4'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   API SUPPORT — Terminal window with code and syntax highlighting
   ═══════════════════════════════════════════════════════════════ */
.cat-api {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ap1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231e293b'/%3E%3Cstop offset='1' stop-color='%230f172a'/%3E%3C/linearGradient%3E%3ClinearGradient id='ap2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23334155'/%3E%3Cstop offset='1' stop-color='%231e293b'/%3E%3C/linearGradient%3E%3Cfilter id='apsh'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%23000' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='3' y='6' width='58' height='52' rx='5' fill='url(%23ap1)' stroke='%23334155' stroke-width='1' filter='url(%23apsh)'/%3E%3Crect x='3' y='6' width='58' height='10' rx='5' fill='url(%23ap2)'/%3E%3Crect x='3' y='11' width='58' height='5' fill='%23334155'/%3E%3Ccircle cx='11' cy='11' r='2.5' fill='%23ef4444'/%3E%3Ccircle cx='19' cy='11' r='2.5' fill='%23fbbf24'/%3E%3Ccircle cx='27' cy='11' r='2.5' fill='%2322c55e'/%3E%3Cpath d='M10 32 L20 24 L10 18' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='24' y1='34' x2='44' y2='34' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='10' y1='42' x2='36' y2='42' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' opacity='.5'/%3E%3Cline x1='38' y1='42' x2='50' y2='42' stroke='%23f59e0b' stroke-width='1.5' stroke-linecap='round' opacity='.4'/%3E%3Cline x1='10' y1='48' x2='28' y2='48' stroke='%2364748b' stroke-width='1.2' stroke-linecap='round' opacity='.35'/%3E%3Cline x1='30' y1='48' x2='42' y2='48' stroke='%23ec4899' stroke-width='1.2' stroke-linecap='round' opacity='.3'/%3E%3Cline x1='10' y1='54' x2='20' y2='54' stroke='%2364748b' stroke-width='1' stroke-linecap='round' opacity='.2'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   PHYSICAL — 3D isometric box with dimension lines
   ═══════════════════════════════════════════════════════════════ */
.cat-physical {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ph1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%234f46e5'/%3E%3C/linearGradient%3E%3ClinearGradient id='ph2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23818cf8'/%3E%3Cstop offset='1' stop-color='%236366f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='ph3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%234338ca'/%3E%3Cstop offset='1' stop-color='%234f46e5'/%3E%3C/linearGradient%3E%3Cfilter id='phsh'%3E%3CfeDropShadow dx='2' dy='2' stdDeviation='2' flood-color='%231e1b4b' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='32 4 58 18 58 46 32 60 6 46 6 18' fill='url(%23ph1)' stroke='%233730a3' stroke-width='1' filter='url(%23phsh)'/%3E%3Cpolygon points='32 4 58 18 32 32 6 18' fill='url(%23ph2)'/%3E%3Cpolygon points='32 32 58 18 58 46 32 60' fill='url(%23ph3)' opacity='.8'/%3E%3Cline x1='32' y1='32' x2='32' y2='60' stroke='%23a5b4fc' stroke-width='.8' opacity='.4'/%3E%3Cline x1='32' y1='32' x2='58' y2='18' stroke='%23a5b4fc' stroke-width='.6' opacity='.3'/%3E%3Cline x1='32' y1='32' x2='6' y2='18' stroke='%23a5b4fc' stroke-width='.6' opacity='.3'/%3E%3Cpolygon points='32 4 44 10 32 16 20 10' fill='%23e0e7ff' opacity='.2'/%3E%3Cpolygon points='32 8 40 12 32 16 24 12' fill='%23fff' opacity='.1'/%3E%3Cline x1='6' y1='18' x2='6' y2='46' stroke='%23a5b4fc' stroke-width='.5' opacity='.3'/%3E%3Cline x1='58' y1='18' x2='58' y2='46' stroke='%23a5b4fc' stroke-width='.5' opacity='.3'/%3E%3Cline x1='6' y1='46' x2='32' y2='60' stroke='%23a5b4fc' stroke-width='.5' opacity='.3'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════
   OTHER — Premium document/specs sheet with detail lines
   ═══════════════════════════════════════════════════════════════ */
.cat-other {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='ot1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2394a3b8'/%3E%3Cstop offset='.5' stop-color='%2364748b'/%3E%3Cstop offset='1' stop-color='%23475569'/%3E%3C/linearGradient%3E%3ClinearGradient id='ot2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23475569'/%3E%3Cstop offset='1' stop-color='%23334155'/%3E%3C/linearGradient%3E%3Cfilter id='otsh'%3E%3CfeDropShadow dx='1' dy='2' stdDeviation='1.5' flood-color='%231e293b' flood-opacity='.4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='8' y='3' width='48' height='58' rx='5' fill='url(%23ot1)' stroke='%23475569' stroke-width='1' filter='url(%23otsh)'/%3E%3Crect x='8' y='3' width='48' height='12' rx='5' fill='url(%23ot2)'/%3E%3Crect x='8' y='10' width='48' height='5' fill='%23475569'/%3E%3Crect x='14' y='6' width='20' height='4' rx='1.5' fill='%23cbd5e1' opacity='.4'/%3E%3Ccircle cx='50' cy='8' r='2' fill='%2394a3b8' opacity='.3'/%3E%3Cline x1='14' y1='22' x2='50' y2='22' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.35'/%3E%3Cline x1='14' y1='30' x2='46' y2='30' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' opacity='.25'/%3E%3Cline x1='14' y1='38' x2='42' y2='38' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' opacity='.2'/%3E%3Cline x1='14' y1='46' x2='36' y2='46' stroke='%23fff' stroke-width='1.2' stroke-linecap='round' opacity='.15'/%3E%3Cline x1='14' y1='54' x2='28' y2='54' stroke='%23fff' stroke-width='1' stroke-linecap='round' opacity='.1'/%3E%3Crect x='14' y='20' width='4' height='4' rx='.8' fill='%2322c55e' opacity='.3'/%3E%3Crect x='14' y='28' width='4' height='4' rx='.8' fill='%233b82f6' opacity='.3'/%3E%3Crect x='14' y='36' width='4' height='4' rx='.8' fill='%23f59e0b' opacity='.3'/%3E%3C/svg%3E");
}