Dark Pro Pricing Card

<div class="pp"><div class="pp-badge">Most popular</div><h4>Pro</h4><div class="pp-price"><span>$</span>24<small>/mo</small></div><ul><li>✓ Unlimited projects</li><li>✓ Priority support</li><li>✓ Advanced analytics</li><li>✓ Custom domains</li></ul><button>Start free trial</button></div>

body{background:#0d1426}
.pp{position:relative;width:250px;padding:30px;border-radius:22px;background:linear-gradient(160deg,#1a2540,#121a2e);border:1px solid #2a3a5c;color:#fff;font-family:system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pp-badge{position:absolute;top:-12px;right:20px;background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;font:700 11px/1 system-ui,sans-serif;padding:6px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.pp h4{margin:0 0 6px;color:#9fb0d0;text-transform:uppercase;letter-spacing:.05em;font-size:13px}
.pp-price{font:800 48px/1 system-ui,sans-serif;margin-bottom:20px}
.pp-price span{font-size:24px;vertical-align:top}.pp-price small{font-size:16px;color:#8a93ad;font-weight:600}
.pp ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px}
.pp li{font-size:14px;color:#c8d3e8}
.pp button{width:100%;padding:13px;border:0;border-radius:12px;background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff;font-weight:700;cursor:pointer}