.mach-page-section {
  background: #080808;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.mach-page-cat-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.mach-page-cat-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mach-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mach-page-card {
  background: #111;
  border: 1px solid rgba(235,125,0,0.1);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.25s;
}

.mach-page-card:hover { border-color: rgba(235,125,0,0.35); }
.mach-page-card:hover .mach-page-name { color: #eb7d00; transition: color 0.25s; }

.mach-page-card--wide {
  grid-column: span 2;
}

.mach-page-name {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 700;
  color: #ddd;
  line-height: 1.3;
  transition: color 0.25s;
}

.mach-page-spec {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  color: #555;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .mach-page-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .mach-page-section { padding: 60px 28px; }
  .mach-page-grid { grid-template-columns: repeat(2, 1fr); }
  .mach-page-card--wide { grid-column: span 2; }
}

@media (max-width: 500px) {
  .mach-page-grid { grid-template-columns: 1fr; }
  .mach-page-card--wide { grid-column: span 1; }
}