.hardware-briefing {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 42, 109, .11), transparent 28%),
    linear-gradient(120deg, rgba(5, 217, 232, .08), transparent 48%),
    #080b14;
  border-color: rgba(5, 217, 232, .42);
}

.hardware-briefing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(5, 217, 232, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 217, 232, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.hardware-briefing > * { position: relative; z-index: 1; }
.hardware-heading { align-items: flex-start; }
.hardware-heading h2 { max-width: 760px; margin: 6px 0 8px; }
.hardware-copy { max-width: 760px; margin: 0; color: var(--muted, #91a4b1); line-height: 1.65; }
.hardware-status { display: inline-flex; min-height: 34px; align-items: center; padding: 7px 10px; color: #00ff66; border: 1px solid rgba(0, 255, 102, .5); font: 700 .67rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }

.hardware-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 14px; margin-top: 20px; }
.hardware-architecture { display: grid; gap: 9px; }
.hardware-card { padding: 14px; background: rgba(2, 4, 12, .76); border: 1px solid rgba(255, 255, 255, .12); border-left: 3px solid var(--cyan); }
.hardware-card:nth-child(2) { border-left-color: var(--pink); }
.hardware-card:nth-child(3) { border-left-color: #00ff66; }
.hardware-card h3 { margin: 0 0 6px; color: #f4fbff; font: 800 .75rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.hardware-card p { margin: 0; color: #91a4b1; font-size: .8rem; line-height: 1.5; }
.hardware-card code { color: var(--cyan); font: .76rem ui-monospace, SFMono-Regular, Consolas, monospace; }

.hardware-cockpit { min-width: 0; padding: 12px; background: rgba(1, 3, 9, .9); border: 1px solid rgba(5, 217, 232, .3); }
.hardware-cockpit-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.hardware-cockpit-head strong { color: #dffcff; font: 800 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.hardware-cockpit-head span { color: #00ff66; font: 700 .62rem ui-monospace, SFMono-Regular, Consolas, monospace; }
#hardware-canvas { display: block; width: 100%; height: 168px; background: #010308; border: 1px solid rgba(5, 217, 232, .2); }
.hardware-readouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 9px; }
.hardware-readout { padding: 8px; background: rgba(5, 217, 232, .05); border: 1px solid rgba(5, 217, 232, .14); }
.hardware-readout span { display: block; color: #718794; font: .58rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .07em; }
.hardware-readout strong { display: block; margin-top: 3px; color: var(--cyan); font: 800 .8rem ui-monospace, SFMono-Regular, Consolas, monospace; }

.hardware-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hardware-tab { min-height: 40px; padding: 8px 11px; color: #a9c4cb; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .16); font: 700 .64rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; cursor: pointer; }
.hardware-tab:hover, .hardware-tab:focus-visible, .hardware-tab[aria-selected="true"] { color: #031118; background: var(--cyan); border-color: var(--cyan); outline: 2px solid var(--cyan); outline-offset: 2px; }
.hardware-tab[aria-selected="true"] { box-shadow: 0 0 16px rgba(5, 217, 232, .25); }
.hardware-tab-panel { margin-top: 10px; padding: 12px 14px; color: #a8bac1; background: rgba(2, 4, 12, .7); border: 1px solid rgba(255, 255, 255, .11); font-size: .8rem; line-height: 1.6; }
.hardware-tab-panel strong { color: #f4fbff; }
.hardware-tab-panel code { color: var(--pink); font: .78rem ui-monospace, SFMono-Regular, Consolas, monospace; }

.hardware-benchmark-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid rgba(5, 217, 232, .2); }
.hardware-benchmarks { width: 100%; min-width: 620px; border-collapse: collapse; background: rgba(1, 3, 9, .72); font-size: .73rem; }
.hardware-benchmarks caption { padding: 10px 12px; color: var(--cyan); text-align: left; font: 800 .66rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
.hardware-benchmarks th, .hardware-benchmarks td { padding: 9px 11px; text-align: left; border-top: 1px solid rgba(255, 255, 255, .08); }
.hardware-benchmarks th { color: #7e99a2; font: 700 .62rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.hardware-benchmarks td { color: #b7c9ce; }
.hardware-benchmarks td:last-child { color: #00ff66; font-weight: 700; }
.hardware-note { margin: 10px 0 0; color: #6f858d; font-size: .7rem; }

@media (max-width: 760px) {
  .hardware-layout { grid-template-columns: 1fr; }
  .hardware-status { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #hardware-canvas { opacity: .9; }
}