/* ════════════════════════════════════════════════════════════════
   <x-numox.features> — Numbered horizontal rail with hover-invert cells
   ════════════════════════════════════════════════════════════════ */

.nx-features { background: var(--nx-bone); padding: 120px 0; }

.nx-features-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--nx-red);
}
.nx-features-tag::before { content: ''; width: 24px; height: 1.5px; background: var(--nx-red); }

.nx-features-h {
  font-size: clamp(36px, 4vw, 56px); font-weight: 900;
  line-height: 1.05; letter-spacing: -1.5px;
  color: var(--nx-dark); max-width: 560px;
}
.nx-features-h em { font-style: italic; color: var(--nx-red); font-weight: 900; }

.nx-features-sub  { font-size: 16px; font-weight: 300; color: var(--nx-muted); line-height: 1.7; max-width: 380px; }

.nx-features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--nx-dark);
  border-bottom: 1.5px solid var(--nx-dark);
}

.nx-feature-cell {
  padding: 48px 28px 36px;
  border-inline-end: 1.5px solid var(--nx-dark);
  display: flex; flex-direction: column; gap: 18px;
  transition: background .3s, color .3s;
}
.nx-feature-cell:last-child { border-inline-end: none; }
.nx-feature-cell:hover                  { background: var(--nx-dark); color: #fff; }
.nx-feature-cell:hover .nx-feature-num   { color: var(--nx-red); }
.nx-feature-cell:hover .nx-feature-icon  { background: var(--nx-red); }
.nx-feature-cell:hover .nx-feature-title { color: #fff; }
.nx-feature-cell:hover .nx-feature-desc  { color: rgba(255,255,255,.6); }

.nx-feature-num   { font-family: var(--font-num); font-size: 14px; font-weight: 900;
                    color: var(--nx-muted); letter-spacing: .05em; transition: color .3s; }
.nx-feature-icon  { width: 56px; height: 56px; border-radius: 14px; background: var(--nx-dark);
                    display: flex; align-items: center; justify-content: center;
                    transition: background .3s; }
.nx-feature-title { font-size: 18px; font-weight: 800; color: var(--nx-dark);
                    line-height: 1.3; transition: color .3s; }
.nx-feature-desc  { font-size: 14px; font-weight: 300; color: var(--nx-muted);
                    line-height: 1.7; transition: color .3s; }

@media (max-width: 1100px) {
  .nx-features-grid { grid-template-columns: repeat(2, 1fr); }
  .nx-feature-cell:nth-child(2) { border-inline-end: none; }
  .nx-feature-cell:nth-child(1),
  .nx-feature-cell:nth-child(2) { border-bottom: 1.5px solid var(--nx-dark); }
}
@media (max-width: 768px) {
  .nx-features      { padding: 72px 0; }
  .nx-features-grid { grid-template-columns: 1fr; }
  .nx-feature-cell  { border-inline-end: none !important; border-bottom: 1.5px solid var(--nx-dark); }
  .nx-feature-cell:last-child { border-bottom: none; }
}