Quote with Gradient Border

<article class="nuda-grad-quote">
  <div class="nuda-grad-quote__inner">
    <p>&ldquo;It feels less like software and more like an extension of how we think.&rdquo;</p>
    <footer>
      <span class="nuda-grad-quote__avatar" aria-hidden="true">SO</span>
      <span>Sasha Okafor &middot; Product</span>
    </footer>
  </div>
</article>

/* Quote with Gradient Border
   Conic-ish gradient border with a soft animated glow halo. */

.nuda-grad-quote {
  position: relative;
  max-width: 400px;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e4ff54, #9d6dff 50%, #62b6ff);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-grad-quote::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #e4ff54, #9d6dff 50%, #62b6ff);
  filter: blur(14px);
  opacity: 0.35;
  z-index: -1;
  animation: nuda-gq-glow 6s ease-in-out infinite;
}

@keyframes nuda-gq-glow {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.50; }
}

.nuda-grad-quote__inner {
  padding: 1.5rem;
  background: #0c0c10;
  border-radius: 15px;
  color: #fafafa;
}

.nuda-grad-quote__inner p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
}

.nuda-grad-quote__inner footer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: #a0a0a8;
}

.nuda-grad-quote__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4ff54, #62b6ff);
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #0c0c10;
}

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