/* ─── WHY ─── */
.why {
  background: #111214;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #2a2d32;
  border: 1px solid #2a2d32;
  margin-top: 60px;
}

.why-card {
  background: #111214;
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.why-card:hover {
  background: #1a1c1f;
}

.why-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--amber);
  transition: height 0.4s;
}

.why-card:hover::after {
  height: 100%;
}

.why-num {
  font-family: var(--font-display);
  font-size: 80px;
  color: rgba(232, 133, 26, 0.07);
  line-height: 1;
  margin-bottom: -20px;
  letter-spacing: 2px;
}

.why-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
}

.why-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  color: var(--white);
}

.why-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}