Grainy Card

<!-- Grainy Card — static noise texture + lime accent -->
<div class="nuda-grain-card">
  <span class="nuda-grain-card__tag">Texture</span>
  <h4 class="nuda-grain-card__title">Grainy Card</h4>
  <p class="nuda-grain-card__body">Static noise meets a soft lime glow.</p>
</div>

.nuda-grain-card {
  position: relative;
  width: 100%;
  max-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  padding: 18px;
  background: radial-gradient(120% 120% at 0% 0%,#1d1d24,#09090b);
  border: 1px solid rgba(228,255,84,.14);
  isolation: isolate;
  font-family: ui-sans-serif,system-ui,sans-serif;
}

.nuda-grain-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.nuda-grain-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(228,255,84,.35),transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  animation: _grainCardGlow 7s ease-in-out infinite alternate;
}

.nuda-grain-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #09090b;
  background: #e4ff54;
  padding: 3px 8px;
  border-radius: 6px;
}

.nuda-grain-card__title {
  position: relative;
  z-index: 1;
  margin: 12px 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: #fafafa;
}

.nuda-grain-card__body {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #c7c7cf;
}

@keyframes _grainCardGlow {
  0% {
    transform: translate(0,0) scale(1);
    opacity: .7;
  }
  100% {
    transform: translate(20px,12px) scale(1.15);
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-grain-card::before {
    animation: none;
  }
}