.mis {
  background: var(--nd);
  color: #fff;
  overflow: hidden;
}

.mis .st {
  color: #fff;
}

.mis-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* ── Card ── */

.mc {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1.7rem 1.4rem;
  transition: all .35s var(--e);
  position: relative;
  overflow: hidden;
}

.mc::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--e);
}

.mc:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-4px);
}

.mc:hover::after {
  transform: scaleX(1);
}

.mc-n {
  font-size: 2rem;
  font-weight: 800;
  color: var(--or);
  opacity: .2;
  line-height: 1;
  margin-bottom: .4rem;
}

.mc h3 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--og);
  margin-bottom: .35rem;
}

.mc p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.75;
}

/* ── Mobile ── */

@media (max-width: 900px) {
  .mis-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}