/* Fondos de tarjeta GPU por arquitectura (datos TechPowerUp → arch_label) */

.arch-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 108% 42%;
  background-size: 62% auto;
  opacity: 0.52;
  transition: transform 0.45s ease-out, opacity 0.5s ease;
}

.hw-card:hover .arch-art {
  opacity: 0.54;
}

.arch-label {
  align-self: flex-start;
  max-width: calc(100% - 8px);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── NVIDIA Blackwell ── */
.arch-blackwell {
  background: linear-gradient(135deg, #0a100e 0%, #0e1a14 38%, #121820 100%);
  border-color: rgba(118, 185, 0, 0.2);
}
.arch-blackwell .arch-label { color: #a8c868; border-color: rgba(118, 185, 0, 0.28); }
.arch-blackwell .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2376b900' stop-opacity='0.9'/%3E%3Cstop offset='100%25' stop-color='%2322c55e' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 8h16M8 0v16' stroke='%2376b900' stroke-opacity='0.25'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='160' fill='url(%23p)'/%3E%3Crect x='48' y='28' width='144' height='104' rx='14' fill='url(%23g)' stroke='%2376b900' stroke-width='2'/%3E%3Crect x='68' y='48' width='36' height='36' rx='4' fill='%23000' fill-opacity='0.25'/%3E%3Crect x='112' y='48' width='36' height='36' rx='4' fill='%23000' fill-opacity='0.25'/%3E%3Crect x='156' y='48' width='16' height='36' rx='3' fill='%23000' fill-opacity='0.25'/%3E%3Crect x='68' y='92' width='104' height='20' rx='4' fill='%23000' fill-opacity='0.2'/%3E%3Ctext x='120' y='112' text-anchor='middle' fill='%23dfffb0' font-family='Arial' font-size='14' font-weight='700'%3EBW%3C/text%3E%3C/svg%3E");
}

/* ── NVIDIA Ada Lovelace ── */
.arch-ada-lovelace {
  background: linear-gradient(135deg, #0a1016 0%, #121c28 45%, #161820 100%);
  border-color: rgba(118, 185, 0, 0.16);
}
.arch-ada-lovelace .arch-label { color: #94c8dc; border-color: rgba(96, 165, 250, 0.28); }
.arch-ada-lovelace .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2376b900'/%3E%3Cstop offset='100%25' stop-color='%2360a5fa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='52' y='32' width='136' height='96' rx='12' fill='none' stroke='url(%23g)' stroke-width='3'/%3E%3Cpath d='M72 52h96M72 72h72M72 92h88' stroke='%2376b900' stroke-opacity='0.45' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='168' cy='52' r='10' fill='%2360a5fa' fill-opacity='0.55'/%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23bae6fd' font-family='Arial' font-size='13' font-weight='700'%3EADA%3C/text%3E%3C/svg%3E");
}

/* ── NVIDIA Ampere ── */
.arch-ampere {
  background: linear-gradient(135deg, #0a100e 0%, #101a14 50%, #121820 100%);
  border-color: rgba(118, 185, 0, 0.15);
}
.arch-ampere .arch-label { color: #98b862; }
.arch-ampere .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='56' y='36' width='128' height='88' rx='10' fill='%2376b900' fill-opacity='0.12' stroke='%2376b900' stroke-width='2'/%3E%3Cg fill='%2376b900' fill-opacity='0.35'%3E%3Crect x='72' y='52' width='20' height='20' rx='2'/%3E%3Crect x='98' y='52' width='20' height='20' rx='2'/%3E%3Crect x='124' y='52' width='20' height='20' rx='2'/%3E%3Crect x='150' y='52' width='20' height='20' rx='2'/%3E%3Crect x='72' y='78' width='20' height='20' rx='2'/%3E%3Crect x='98' y='78' width='20' height='20' rx='2'/%3E%3Crect x='124' y='78' width='20' height='20' rx='2'/%3E%3Crect x='150' y='78' width='20' height='20' rx='2'/%3E%3C/g%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23bef264' font-family='Arial' font-size='13' font-weight='700'%3EAM%3C/text%3E%3C/svg%3E");
}

/* ── NVIDIA Turing / Pascal / Maxwell / Kepler ── */
.arch-turing {
  background: linear-gradient(135deg, #0a100e 0%, #161c16 100%);
  border-color: rgba(118, 185, 0, 0.13);
}
.arch-turing .arch-label { color: #a8b872; }
.arch-turing .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpolygon points='120,30 180,70 180,110 120,130 60,110 60,70' fill='none' stroke='%2376b900' stroke-width='2'/%3E%3Cpolygon points='120,48 160,72 160,98 120,112 80,98 80,72' fill='%2376b900' fill-opacity='0.15'/%3E%3Ctext x='120' y='105' text-anchor='middle' fill='%23d9f99d' font-family='Arial' font-size='12' font-weight='700'%3ETU%3C/text%3E%3C/svg%3E");
}
.arch-pascal { background: linear-gradient(135deg, #0a100e 0%, #161c16 100%); border-color: rgba(118,185,0,0.12); }
.arch-pascal .arch-label { color: #a8b872; }
.arch-pascal .arch-art { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='64' y='40' width='112' height='80' rx='8' fill='%2376b900' fill-opacity='0.1' stroke='%2376b900'/%3E%3Cpath d='M88 60h64M88 80h48M88 100h56' stroke='%2376b900' stroke-opacity='0.5' stroke-width='3'/%3E%3C/svg%3E"); }
.arch-maxwell,
.arch-kepler,
.arch-hopper,
.arch-nvidia-classic {
  background: linear-gradient(135deg, #0a100e 0%, #161a16 100%);
  border-color: rgba(118, 185, 0, 0.11);
}
.arch-maxwell .arch-art,
.arch-kepler .arch-art,
.arch-hopper .arch-art,
.arch-nvidia-classic .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='70' y='44' width='100' height='72' rx='6' fill='none' stroke='%2376b900' stroke-width='2' stroke-dasharray='8 4'/%3E%3Ccircle cx='120' cy='80' r='22' fill='%2376b900' fill-opacity='0.12'/%3E%3C/svg%3E");
}

/* ── AMD RDNA 4 ── */
.arch-rdna4 {
  background: linear-gradient(135deg, #140a0a 0%, #1e1414 40%, #141820 100%);
  border-color: rgba(237, 28, 36, 0.22);
}
.arch-rdna4 .arch-label { color: #d4a0a0; border-color: rgba(237, 28, 36, 0.3); }
.arch-rdna4 .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ed1c24'/%3E%3Cstop offset='100%25' stop-color='%23f97316'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 120 L80 40 L120 88 L160 36 L200 120 Z' fill='none' stroke='url(%23r)' stroke-width='3'/%3E%3Cpath d='M88 96 L120 64 L152 96' fill='url(%23r)' fill-opacity='0.25'/%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23fecaca' font-family='Arial' font-size='13' font-weight='700'%3ERDNA4%3C/text%3E%3C/svg%3E");
}

/* ── AMD RDNA 3 ── */
.arch-rdna3 {
  background: linear-gradient(135deg, #140a0a 0%, #1c1216 100%);
  border-color: rgba(237, 28, 36, 0.18);
}
.arch-rdna3 .arch-label { color: #d4a4a8; }
.arch-rdna3 .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpath d='M48 112 Q120 24 192 112' fill='none' stroke='%23ed1c24' stroke-width='3'/%3E%3Cpath d='M72 112 Q120 48 168 112' fill='%23ed1c24' fill-opacity='0.15'/%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23fecdd3' font-family='Arial' font-size='12' font-weight='700'%3ERDNA3%3C/text%3E%3C/svg%3E");
}

/* ── AMD RDNA 2 / RDNA / GCN ── */
.arch-rdna2 {
  background: linear-gradient(135deg, #140a0a 0%, #1a1416 100%);
  border-color: rgba(237, 28, 36, 0.15);
}
.arch-rdna2 .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='60' y='38' width='120' height='84' rx='10' fill='%23ed1c24' fill-opacity='0.08' stroke='%23ed1c24'/%3E%3Cpath d='M80 58 L120 90 L160 58' stroke='%23ed1c24' stroke-width='3' fill='none'/%3E%3Ctext x='120' y='112' text-anchor='middle' fill='%23fecaca' font-family='Arial' font-size='12' font-weight='700'%3ERDNA2%3C/text%3E%3C/svg%3E");
}
.arch-rdna,
.arch-gcn,
.arch-amd-classic {
  background: linear-gradient(135deg, #140a0a 0%, #1a1416 100%);
  border-color: rgba(237, 28, 36, 0.13);
}
.arch-rdna .arch-art,
.arch-gcn .arch-art,
.arch-amd-classic .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Ccircle cx='120' cy='80' r='42' fill='none' stroke='%23ed1c24' stroke-width='2'/%3E%3Ccircle cx='120' cy='80' r='24' fill='%23ed1c24' fill-opacity='0.15'/%3E%3C/svg%3E");
}

/* ── Intel Xe2 / Alchemist ── */
.arch-xe2 {
  background: linear-gradient(135deg, #0a1018 0%, #101c30 50%, #141820 100%);
  border-color: rgba(0, 113, 197, 0.22);
}
.arch-xe2 .arch-label { color: #88b0c8; border-color: rgba(56, 189, 248, 0.28); }
.arch-xe2 .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230071c5'/%3E%3Cstop offset='100%25' stop-color='%2338bdf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='58' y='34' width='124' height='92' rx='12' fill='none' stroke='url(%23b)' stroke-width='3'/%3E%3Cpath d='M88 54 L152 106 M152 54 L88 106' stroke='%2338bdf8' stroke-opacity='0.45' stroke-width='2'/%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23bae6fd' font-family='Arial' font-size='13' font-weight='700'%3EXE2%3C/text%3E%3C/svg%3E");
}
.arch-alchemist,
.arch-intel-classic {
  background: linear-gradient(135deg, #0a1018 0%, #101c28 100%);
  border-color: rgba(0, 113, 197, 0.18);
}
.arch-alchemist .arch-label,
.arch-intel-classic .arch-label { color: #8eaed0; }
.arch-alchemist .arch-art,
.arch-intel-classic .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cpolygon points='120,36 170,68 170,108 120,124 70,108 70,68' fill='%230071c5' fill-opacity='0.12' stroke='%230071c5' stroke-width='2'/%3E%3Ctext x='120' y='102' text-anchor='middle' fill='%23bfdbfe' font-family='Arial' font-size='11' font-weight='700'%3EARC%3C/text%3E%3C/svg%3E");
}

/* ── AMD CDNA (Instinct / pro) ── */
.arch-cdna4,
.arch-cdna3,
.arch-cdna {
  background: linear-gradient(135deg, #140a10 0%, #1e1418 45%, #141820 100%);
  border-color: rgba(192, 132, 252, 0.2);
}
.arch-cdna4 .arch-label,
.arch-cdna3 .arch-label,
.arch-cdna .arch-label { color: #c8a8d8; border-color: rgba(192, 132, 252, 0.28); }
.arch-cdna4 .arch-art,
.arch-cdna3 .arch-art,
.arch-cdna .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ed1c24'/%3E%3Cstop offset='100%25' stop-color='%23a855f7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='52' y='30' width='136' height='100' rx='12' fill='none' stroke='url(%23c)' stroke-width='3'/%3E%3Cpath d='M76 52h88v16H76zm0 28h64v16H76zm0 28h72v12H76z' fill='url(%23c)' fill-opacity='0.22'/%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23f5d0fe' font-family='Arial' font-size='12' font-weight='700'%3ECDNA%3C/text%3E%3C/svg%3E");
}

/* ── Blackwell Ultra (B300, etc.) ── */
.arch-blackwell-ultra {
  background: linear-gradient(135deg, #0a100e 0%, #101a14 35%, #161820 100%);
  border-color: rgba(118, 185, 0, 0.24);
}
.arch-blackwell-ultra .arch-label { color: #b8c888; border-color: rgba(190, 242, 100, 0.3); }
.arch-blackwell-ultra .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='44' y='24' width='152' height='112' rx='16' fill='%2376b900' fill-opacity='0.1' stroke='%23bef264' stroke-width='2'/%3E%3Cg fill='%23bef264' fill-opacity='0.35'%3E%3Crect x='64' y='44' width='28' height='28' rx='3'/%3E%3Crect x='98' y='44' width='28' height='28' rx='3'/%3E%3Crect x='132' y='44' width='28' height='28' rx='3'/%3E%3Crect x='166' y='44' width='14' height='28' rx='2'/%3E%3Crect x='64' y='78' width='116' height='36' rx='4'/%3E%3C/g%3E%3Ctext x='120' y='118' text-anchor='middle' fill='%23ecfccb' font-family='Arial' font-size='11' font-weight='700'%3EBW Ultra%3C/text%3E%3C/svg%3E");
}

/* ── Legacy / desconocida ── */
.arch-legacy {
  background: linear-gradient(135deg, #101014 0%, #1a1a22 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
.arch-legacy .arch-label { color: #a1a1aa; }
.arch-legacy .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='72' y='48' width='96' height='64' rx='6' fill='none' stroke='%23a1a1aa' stroke-opacity='0.35' stroke-dasharray='6 6'/%3E%3Cpath d='M96 72h48M96 88h32' stroke='%23a1a1aa' stroke-opacity='0.3' stroke-width='2'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* Texto legible sobre fondos oscuros */
.hw-card[class*="arch-"] .hw-name {
  color: #f4f4f5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.hw-card[class*="arch-"] .hw-meta,
.hw-card[class*="arch-"] .hw-score {
  color: rgba(228, 228, 231, 0.82);
}
.hw-card[class*="arch-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* ── Hover sutil (sin tilt 3D) ── */
.hw-card[class*="arch-"]::before {
  display: none;
}

.hw-card[class*="arch-"] {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.hw-card[class*="arch-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 85% 40%, rgba(255, 255, 255, 0.04), transparent 70%);
  transition: opacity 0.5s ease;
}

.hw-card[class*="arch-"]:hover::after {
  opacity: 0.2;
}

.hw-card[class*="arch-"] .arch-label,
.hw-card[class*="arch-"] .brand-chip,
.hw-card[class*="arch-"] .hw-name,
.hw-card[class*="arch-"] .hw-meta,
.hw-card[class*="arch-"] .hw-score {
  transition: color 0.35s ease, border-color 0.35s ease;
}

/* Hover: apenas un toque más de color en borde y etiqueta */
.arch-blackwell:hover { border-color: rgba(118, 185, 0, 0.24); }
.arch-blackwell:hover .arch-label { color: #aec878; border-color: rgba(118, 185, 0, 0.26); }

.arch-blackwell-ultra:hover { border-color: rgba(190, 242, 100, 0.26); }
.arch-blackwell-ultra:hover .arch-label { color: #b8c888; }

.arch-ada-lovelace:hover { border-color: rgba(96, 165, 250, 0.2); }
.arch-ada-lovelace:hover .arch-label { color: #98c0d4; }

.arch-ampere:hover,
.arch-turing:hover,
.arch-pascal:hover,
.arch-maxwell:hover,
.arch-kepler:hover,
.arch-hopper:hover,
.arch-nvidia-classic:hover { border-color: rgba(118, 185, 0, 0.18); }

.arch-rdna4:hover,
.arch-rdna3:hover,
.arch-rdna2:hover,
.arch-rdna:hover,
.arch-gcn:hover,
.arch-amd-classic:hover { border-color: rgba(237, 28, 36, 0.24); }
.arch-rdna4:hover .arch-label { color: #d8a4a4; }
.arch-rdna3:hover .arch-label { color: #d8a8ac; }

.arch-cdna4:hover,
.arch-cdna3:hover,
.arch-cdna:hover { border-color: rgba(192, 132, 252, 0.22); }
.arch-cdna4:hover .arch-label,
.arch-cdna3:hover .arch-label,
.arch-cdna:hover .arch-label { color: #c8b0d8; }

.arch-xe2:hover,
.arch-alchemist:hover,
.arch-intel-classic:hover { border-color: rgba(56, 189, 248, 0.22); }
.arch-xe2:hover .arch-label { color: #90b8d0; }
.arch-alchemist:hover .arch-label { color: #92b0d0; }

/* ── CPU AMD Zen ── */
.arch-zen5,
.arch-granite-ridge {
  background: linear-gradient(135deg, #160808 0%, #241012 42%, #141820 100%);
  border-color: rgba(237, 28, 36, 0.26);
}
.arch-zen5 .arch-label,
.arch-granite-ridge .arch-label { color: #dca0a0; border-color: rgba(237, 28, 36, 0.32); }
.arch-zen5 .arch-art,
.arch-granite-ridge .arch-art {
  opacity: 0.58;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='68' y='42' width='104' height='76' rx='10' fill='%23ed1c24' fill-opacity='0.1' stroke='%23ed1c24' stroke-width='2.5'/%3E%3Crect x='88' y='62' width='64' height='36' rx='5' fill='%23ed1c24' fill-opacity='0.22'/%3E%3Cg stroke='%23ed1c24' stroke-width='2' opacity='0.55'%3E%3Cpath d='M78 52V30M92 52V26M106 52V30M120 52V26M134 52V30M148 52V26M162 52V30'/%3E%3Cpath d='M78 108V130M92 108V134M106 108V130M120 108V134M134 108V130M148 108V134M162 108V130'/%3E%3C/g%3E%3Ctext x='120' y='88' text-anchor='middle' fill='%23fecaca' font-family='Arial' font-size='14' font-weight='700'%3EZen 5%3C/text%3E%3C/svg%3E");
}

.arch-zen4 {
  background: linear-gradient(135deg, #140909 0%, #1c1214 100%);
  border-color: rgba(237, 28, 36, 0.18);
}
.arch-zen4 .arch-label { color: #c89898; border-color: rgba(237, 28, 36, 0.24); }
.arch-zen4 .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='72' y='46' width='96' height='68' rx='9' fill='none' stroke='%23ed1c24' stroke-width='2'/%3E%3Crect x='90' y='64' width='60' height='32' rx='4' fill='%23ed1c24' fill-opacity='0.12'/%3E%3Ctext x='120' y='86' text-anchor='middle' fill='%23fecaca' font-family='Arial' font-size='13' font-weight='700'%3EZen 4%3C/text%3E%3C/svg%3E");
}

.arch-zen3,
.arch-zen2,
.arch-zen-plus,
.arch-zen {
  background: linear-gradient(135deg, #120808 0%, #1a1012 100%);
  border-color: rgba(237, 28, 36, 0.15);
}
.arch-zen3 .arch-label,
.arch-zen2 .arch-label,
.arch-zen-plus .arch-label,
.arch-zen .arch-label { color: #c09090; }
.arch-zen3 .arch-art,
.arch-zen2 .arch-art,
.arch-zen-plus .arch-art,
.arch-zen .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='76' y='50' width='88' height='60' rx='8' fill='%23ed1c24' fill-opacity='0.08' stroke='%23ed1c24'/%3E%3Ccircle cx='120' cy='80' r='18' fill='none' stroke='%23ed1c24' stroke-opacity='0.5'/%3E%3Ctext x='120' y='85' text-anchor='middle' fill='%23fecaca' font-family='Arial' font-size='12' font-weight='700'%3EZen%3C/text%3E%3C/svg%3E");
}

.arch-amd-cpu-classic {
  background: linear-gradient(135deg, #120808 0%, #161214 100%);
  border-color: rgba(237, 28, 36, 0.12);
}
.arch-amd-cpu-classic .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='80' y='52' width='80' height='56' rx='6' fill='none' stroke='%23ed1c24' stroke-opacity='0.6' stroke-dasharray='6 4'/%3E%3C/svg%3E");
}

/* ── CPU Intel ── */
.arch-arrow-lake {
  background: linear-gradient(135deg, #081018 0%, #102030 45%, #141820 100%);
  border-color: rgba(34, 211, 238, 0.28);
}
.arch-arrow-lake .arch-label { color: #92c8e8; border-color: rgba(34, 211, 238, 0.34); }
.arch-arrow-lake .arch-art {
  opacity: 0.58;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='68' y='42' width='104' height='76' rx='10' fill='%2322d3ee' fill-opacity='0.1' stroke='%2322d3ee' stroke-width='2.5'/%3E%3Crect x='88' y='62' width='64' height='36' rx='5' fill='%2322d3ee' fill-opacity='0.2'/%3E%3Cpath d='M120 62 L120 38 M104 48 L136 48' stroke='%2367e8f9' stroke-width='2.5'/%3E%3Ctext x='120' y='88' text-anchor='middle' fill='%23bae6fd' font-family='Arial' font-size='12' font-weight='700'%3EArrow Lake%3C/text%3E%3C/svg%3E");
}

.arch-raptor-lake {
  background: linear-gradient(135deg, #0a0e16 0%, #101c26 100%);
  border-color: rgba(0, 113, 197, 0.2);
}
.arch-raptor-lake .arch-label { color: #849ab8; border-color: rgba(0, 113, 197, 0.26); }
.arch-raptor-lake .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='72' y='46' width='96' height='68' rx='9' fill='none' stroke='%230071c5' stroke-width='2'/%3E%3Crect x='90' y='64' width='60' height='32' rx='4' fill='%230071c5' fill-opacity='0.12'/%3E%3Ctext x='120' y='86' text-anchor='middle' fill='%23bfdbfe' font-family='Arial' font-size='11' font-weight='700'%3ERaptor L.%3C/text%3E%3C/svg%3E");
}

.arch-alder-lake,
.arch-meteor-lake,
.arch-rocket-lake,
.arch-comet-lake {
  background: linear-gradient(135deg, #0a0e14 0%, #121820 100%);
  border-color: rgba(0, 113, 197, 0.16);
}
.arch-alder-lake .arch-label,
.arch-meteor-lake .arch-label,
.arch-rocket-lake .arch-label,
.arch-comet-lake .arch-label { color: #8098b8; }
.arch-alder-lake .arch-art,
.arch-meteor-lake .arch-art,
.arch-rocket-lake .arch-art,
.arch-comet-lake .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='76' y='50' width='88' height='60' rx='8' fill='%230071c5' fill-opacity='0.08' stroke='%230071c5'/%3E%3Ctext x='120' y='86' text-anchor='middle' fill='%23bfdbfe' font-family='Arial' font-size='12' font-weight='700'%3EIntel%3C/text%3E%3C/svg%3E");
}

.arch-intel-cpu-classic {
  background: linear-gradient(135deg, #0a0e14 0%, #141820 100%);
  border-color: rgba(0, 113, 197, 0.12);
}
.arch-intel-cpu-classic .arch-art {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'%3E%3Crect x='80' y='52' width='80' height='56' rx='6' fill='none' stroke='%230071c5' stroke-opacity='0.5' stroke-dasharray='6 4'/%3E%3C/svg%3E");
}

/* CPU hover */
.arch-zen5:hover { border-color: rgba(237, 28, 36, 0.28); }
.arch-zen5:hover .arch-label { color: #dca4a4; }
.arch-zen4:hover { border-color: rgba(237, 28, 36, 0.24); }
.arch-zen4:hover .arch-label { color: #d0a0a0; }
.arch-zen3:hover,
.arch-zen2:hover,
.arch-zen-plus:hover,
.arch-zen:hover,
.arch-amd-cpu-classic:hover { border-color: rgba(237, 28, 36, 0.2); }

.arch-arrow-lake:hover { border-color: rgba(34, 211, 238, 0.28); }
.arch-arrow-lake:hover .arch-label { color: #92b8d0; }
.arch-raptor-lake:hover { border-color: rgba(0, 113, 197, 0.26); }
.arch-raptor-lake:hover .arch-label { color: #8ea4c4; }
.arch-alder-lake:hover,
.arch-meteor-lake:hover,
.arch-rocket-lake:hover,
.arch-comet-lake:hover,
.arch-intel-cpu-classic:hover { border-color: rgba(0, 113, 197, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .hw-card[class*="arch-"] {
    transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
  }
  .hw-card[class*="arch-"]:hover .arch-label,
  .hw-card[class*="arch-"]:hover .brand-chip,
  .hw-card[class*="arch-"]:hover .hw-name,
  .hw-card[class*="arch-"]:hover .hw-meta,
  .hw-card[class*="arch-"]:hover .hw-score {
    transform: none;
  }
  .hw-card[class*="arch-"]:hover .arch-art {
    transform: none;
    opacity: 0.68;
  }
}