.card {
  position: relative;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-md);
  padding: 1.45rem;
  background:
    radial-gradient(1100px 440px at 14% 0%, rgba(0, 151, 201, 0.18), transparent 62%),
    radial-gradient(940px 460px at 92% 18%, rgba(212, 175, 55, 0.11), transparent 65%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
  backdrop-filter: blur(7px);
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.56), transparent 42%),
    radial-gradient(closest-side, rgba(0, 151, 201, 0.14), transparent 62%);
  opacity: 0.58;
  pointer-events: none;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 60%, transparent 100%);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.34);
  opacity: 0.72;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px) rotateX(1deg);
  border-color: rgba(0, 151, 201, 0.34);
  box-shadow: 0 24px 68px rgba(3, 29, 44, 0.22);
}

.badge {
  display: inline-block;
  padding: 0.28rem 0.66rem;
  border-radius: 999px;
  background:
    radial-gradient(180px 80px at 20% 0%, rgba(0, 151, 201, 0.22), transparent 70%),
    rgba(255, 255, 255, 0.74);
  color: rgba(6, 41, 61, 0.86);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  border: 1px solid rgba(6, 41, 61, 0.18);
}