*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:
radial-gradient(circle at top left,#00d4ff15,transparent 35%),
radial-gradient(circle at bottom right,#7c3aed15,transparent 35%),
#050816;
color:white;
}

.header{
padding:100px 20px;
text-align:center;
}

.header h1{
font-size:3rem;
margin-bottom:20px;
color:#fff;
text-shadow:0 0 20px rgba(0,212,255,.4);
}

.header p{
max-width:800px;
margin:auto;
color:#cbd5e1;
font-size:1.1rem;
}

.container{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
padding:60px 20px;
}

.card{
width:350px;
padding:35px;

background:rgba(255,255,255,.03);

border:1px solid rgba(0,212,255,.25);

border-radius:20px;

backdrop-filter:blur(10px);

transition:.3s;
}

.card:hover{
transform:translateY(-10px);

border-color:#00d4ff;

box-shadow:
0 0 25px rgba(0,212,255,.3),
0 0 60px rgba(124,58,237,.15);
}

.card h2{
color:#00d4ff;
margin-bottom:15px;
}

.price{
font-size:2.5rem;
font-weight:bold;
margin:20px 0;
}

ul{
list-style:none;
}

ul li{
padding:8px 0;
color:#d1d5db;
}

.btn{
display:inline-block;
margin-top:25px;
padding:14px 24px;

text-decoration:none;
color:white;

border-radius:12px;

background:linear-gradient(
135deg,
#00d4ff,
#3b82f6,
#7c3aed
);

transition:.3s;
}

.btn:hover{
transform:translateY(-3px);

box-shadow:
0 0 20px rgba(0,212,255,.4);
}

.recommended{
border:1px solid #00d4ff;

box-shadow:
0 0 30px rgba(0,212,255,.25);
}

.badge{
display:inline-block;
padding:8px 15px;
border-radius:30px;

background:#00d4ff;
color:#000;

font-size:12px;
font-weight:bold;

margin-bottom:15px;
}