Cyberpunk Holographic Product Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="cyber-card"><div class="cyber-glow"></div><div class="cyber-badge">LIMITED EDITION</div><div class="cyber-img-box"><div class="cyber-mesh"></div></div><div class="cyber-content"><h3>Aero-Pod Max V2</h3><p class="cyber-desc">Active noise cancellation with quantum audio Drivers.</p><div class="cyber-price-row"><span class="price">$349.00</span><span class="old-price">$420.00</span></div><button class="cyber-btn"><span class="btn-text">ADD TO CART</span><span class="btn-glow"></span></button></div></div>

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

.cyber-card { position: relative; width: 240px; background: #0b0f19; border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,0.08); font-family: system-ui, sans-serif; overflow: hidden; margin: auto; box-sizing: border-box; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.cyber-card:hover { transform: translateY(-6px); }
.cyber-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0 300deg, #6366f1 340deg, #a855f7 360deg); opacity: 0; transition: opacity 0.5s; animation: spinGlow 6s linear infinite; pointer-events: none; z-index: 0; }
.cyber-card:hover .cyber-glow { opacity: 0.15; }
@keyframes spinGlow { 100% { transform: rotate(360deg); } }
.cyber-badge { display: inline-block; background: linear-gradient(90deg, #6366f1, #a855f7); color: #fff; font-size: 7px; font-weight: 900; padding: 3px 8px; border-radius: 20px; letter-spacing: 1px; margin-bottom: 12px; position: relative; z-index: 1; }
.cyber-img-box { width: 100%; height: 110px; background: #131b2e; border-radius: 12px; position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; }
.cyber-mesh { width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #d946ef); border-radius: 50%; filter: blur(20px); animation: floatMesh 4s ease-in-out infinite alternate; }
@keyframes floatMesh { 0% { transform: scale(0.8) translate(-10px, -10px); } 100% { transform: scale(1.2) translate(10px, 10px); } }
.cyber-content { position: relative; z-index: 1; margin-top: 12px; }
.cyber-content h3 { color: #f8fafc; font-size: 13px; font-weight: 800; margin: 0 0 4px; }
.cyber-desc { color: #94a3b8; font-size: 8px; line-height: 1.3; margin: 0 0 10px; }
.cyber-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.price { color: #38bdf8; font-size: 14px; font-weight: 900; }
.old-price { color: #64748b; font-size: 9px; text-decoration: line-through; }
.cyber-btn { position: relative; width: 100%; background: #1e293b; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px; cursor: pointer; overflow: hidden; transition: 0.3s; }
.btn-text { position: relative; z-index: 2; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.5px; }
.cyber-btn:hover { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 20px rgba(99,102,241,0.5); }