.card {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(139, 92, 246, 0.15),
    rgba(34, 197, 94, 0.1),
    rgba(139, 92, 246, 0.15)
  );
  opacity: 0;
  transition: opacity var(--dur-smooth) var(--ease-out-quart);
  z-index: -1;
  animation: rotate-slow 40s linear infinite;
}

.card:hover::before {
  opacity: 0.6;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-glass {
  background: var(--grad-glass);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-light {
  background: var(--paper);
  border: 1px solid var(--color-border);
}

.card-accent-connect {
  border-top: 3px solid var(--violet-700);
}

.card-accent-academy {
  border-top: 3px solid var(--violet-500);
}

.card-accent-access {
  border-top: 3px solid var(--green-700);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  background: rgba(139, 92, 246, 0.12);
  color: var(--violet-500);
}

.card-icon.green {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green-500);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: var(--space-3);
  letter-spacing: var(--ls-snug);
}

.card-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

.section-dark .card-desc,
.section-gradient-aurora .card-desc,
.section-gradient-deep .card-desc {
  color: var(--ink-300);
}

.card-footer {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--violet-500);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--color-text-muted);
}

.card-meta dt {
  display: inline;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: 0.6875rem;
}

.card-meta dd {
  display: inline;
  margin-right: var(--space-4);
  color: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: rgba(139, 92, 246, 0.1);
  color: var(--violet-500);
}

.tag-green {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green-600);
}

.tag-neutral {
  background: var(--ink-100);
  color: var(--ink-600);
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}