Cyberpunk Glow Pricing Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="price-card-424"><div class="p-inner"><h3 class="p-title">Cyber Pass</h3><div class="p-amount">$49<span>/mo</span></div><ul class="p-features"><li>API Full Access</li><li>Custom Endpoints</li><li>Zero Latency</li></ul><button class="p-btn">UPGRADE NOW</button></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.price-card-424 { position: relative; width: 210px; border-radius: 14px; overflow: hidden; padding: 2px; font-family: system-ui; }
.price-card-424::before { content: ""; position: absolute; width: 150px; height: 350px; background: linear-gradient(#00f0ff, #ff0055); animation: spinGlow 4s linear infinite; }
.p-inner { position: relative; background: #09090b; padding: 20px 16px; border-radius: 12px; color: #fff; text-align: center; z-index: 1; box-sizing: border-box; }
.price-card-424 .p-title { margin: 0; font-size: 15px; color: #00f0ff; letter-spacing: 1px; }
.price-card-424 .p-amount { font-size: 28px; font-weight: 900; margin: 10px 0; color: #fff; }
.price-card-424 .p-amount span { font-size: 11px; color: #a1a1aa; }
.price-card-424 .p-features { list-style: none; padding: 0; margin: 0 0 16px 0; font-size: 10px; color: #d4d4d8; text-align: left; }
.price-card-424 .p-features li { margin-bottom: 6px; }
.price-card-424 .p-btn { width: 100%; padding: 8px 0; background: #ff0055; border: none; border-radius: 6px; color: #fff; font-weight: 800; font-size: 10px; cursor: pointer; box-shadow: 0 0 10px rgba(255,0,85,0.5); }
@keyframes spinGlow { 100% { transform: rotate(360deg); } }