.ul-cards {
  padding: 38px 30px;
  background: linear-gradient(180deg, #fff, var(--ul-bg));
}
.ul-cards-inner { max-width: 1200px; margin: 0 auto; }
.ul-cards-h2 {
  font-size: 23px;
  margin: 0 0 6px;
  color: #1a2233;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.ul-cards-sub { color: #5a6577; margin: 0 0 24px; font-size: 14.5px; }
.ul-cards-grid { display: grid; gap: 18px; }
.ul-cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ul-cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ul-cards .ul-card {
  padding: 24px 22px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}
.ul-cards .ul-card .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 16px;
  font-family: var(--sort-title-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ul-brand);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(6, 182, 212, 0.14));
  border: 1px solid rgba(37, 99, 235, 0.18);
  transition: transform 0.35s ease;
}
.ul-cards .ul-card:hover .ic { transform: translateY(-3px) scale(1.04); }
/* 入场错峰：随卡片数量自动递增，无需 reveal-del-N 类 */
.ul-cards-grid .ul-card:nth-child(1) { transition-delay: 0.05s; }
.ul-cards-grid .ul-card:nth-child(2) { transition-delay: 0.10s; }
.ul-cards-grid .ul-card:nth-child(3) { transition-delay: 0.15s; }
.ul-cards-grid .ul-card:nth-child(4) { transition-delay: 0.20s; }
.ul-cards-grid .ul-card:nth-child(5) { transition-delay: 0.25s; }
.ul-cards-grid .ul-card:nth-child(6) { transition-delay: 0.30s; }
.ul-cards-grid .ul-card:nth-child(7) { transition-delay: 0.35s; }
.ul-cards-grid .ul-card:nth-child(8) { transition-delay: 0.40s; }
.ul-cards .ul-card h4 { margin: 0 0 6px; font-size: 16px; color: #1a2233; font-weight: 700; }
.ul-cards .ul-card p { margin: 0; font-size: 13px; color: #5a6577; line-height: 1.55; }
@media (max-width: 820px) {
  .ul-cards { padding: 26px 18px; }
  .ul-cards-grid.cols-4, .ul-cards-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ul-cards-grid.cols-4, .ul-cards-grid.cols-3 { grid-template-columns: 1fr; }
}