/* ============================================================
   WHY GORIDE — benefit cards
   ============================================================ */
.benefits {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.benefit {
  background: rgba(20,24,38,0.5);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: var(--radius);
  transition: border-color .3s ease, transform .3s ease;
  position: relative;
  overflow: hidden;
}
.benefit:hover { border-color: var(--accent); transform: translateY(-3px); }
.benefit::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.benefit:hover::before { opacity: 1; }
.benefit__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.benefit__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255,138,30,0.1);
  border: 1px solid rgba(255,138,30,0.2);
  border-radius: 8px;
  color: var(--accent);
  margin-bottom: 16px;
}
.benefit h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.2; }
.benefit p { font-size: 14px; }

.benefit:nth-child(1) { grid-column: span 5; }
.benefit:nth-child(2) { grid-column: span 4; }
.benefit:nth-child(3) { grid-column: span 3; }
.benefit:nth-child(4) { grid-column: span 6; }
.benefit:nth-child(5) { grid-column: span 6; }

@media (max-width: 980px) {
  .benefits { grid-template-columns: repeat(6, 1fr); }
  .benefit:nth-child(n) { grid-column: span 3; }
  .benefit:nth-child(5) { grid-column: span 6; }
}
@media (max-width: 600px) {
  .benefits { grid-template-columns: 1fr; }
  .benefit:nth-child(n) { grid-column: span 1; }
}