.card {
  position: relative;
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-md);
  padding: 1.65rem;
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(0, 139, 191, 0.14), transparent 60%),
    radial-gradient(900px 360px at 92% 10%, rgba(212, 175, 55, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
  backdrop-filter: blur(10px);
  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.55), transparent 40%),
    radial-gradient(closest-side, rgba(0, 139, 191, 0.12), transparent 62%);
  opacity: 0.55;
  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.22);
  opacity: 0.55;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px) rotateX(1deg);
  border-color: rgba(0, 139, 191, 0.22);
  box-shadow: 0 18px 56px rgba(0, 46, 63, 0.16);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 139, 191, 0.14);
  color: var(--color-gopsco-deep);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}