*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Segoe UI,sans-serif;
background:#050505;
color:#fff;
overflow-x:hidden;
}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(0,180,255,.2),transparent 30%),
radial-gradient(circle at 80% 60%,rgba(255,0,80,.2),transparent 30%);
z-index:-1;
}
header{text-align:center;padding:60px 20px}
header h1{
font-size:56px;
color:#00c8ff;
text-shadow:0 0 15px #00c8ff,0 0 30px #00c8ff;
}
.cards{
max-width:1200px;
margin:auto;
padding:20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}
.card{
background:#111;
border:1px solid #00c8ff;
border-radius:15px;
overflow:hidden;
box-shadow:0 0 15px rgba(0,200,255,.3);
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(255,0,100,.8);
}
.card img{
width:100%;
height:220px;
object-fit:cover;
background:#222;
}
.content{padding:15px}
.content h2{color:#00c8ff;margin-bottom:10px}
.price{
color:#00ff88;
font-size:24px;
font-weight:bold;
margin:15px 0;
}
.content a{
display:block;
text-align:center;
padding:12px;
background:#ff0055;
color:white;
text-decoration:none;
border-radius:8px;
}
footer{
margin-top:40px;
padding:30px;
text-align:center;
border-top:1px solid #00c8ff;
}