body{
background:
radial-gradient(circle at 20% 30%, rgba(0,200,255,.35), transparent 40%),
radial-gradient(circle at 80% 20%, rgba(60,255,120,.30), transparent 40%),
radial-gradient(circle at 30% 80%, rgba(255,150,40,.30), transparent 40%),
radial-gradient(circle at 85% 75%, rgba(160,90,255,.35), transparent 40%),
#000;
margin:0;
font-family:-apple-system;
color:#fff;
text-align:center;
}

.container{
max-width:520px;
margin:auto;
padding-top:40px;
}

h1,h2{
font-weight:600;
margin-bottom:30px;
}

.boton{
display:block;
width:85%;
margin:25px auto;
padding:22px 0;
border-radius:25px;
font-size:20px;
font-weight:bold;
text-decoration:none;
color:#fff;
background:linear-gradient(145deg,#1c1c1c,#111);
box-shadow:
0 20px 45px rgba(0,0,0,.8),
inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .12s ease, box-shadow .2s ease;
position:relative;
}

.boton::before{
content:"";
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
width:70%;
height:30px;
border-radius:50%;
filter:blur(18px);
opacity:.7;
background:radial-gradient(circle,rgba(0,200,255,.8) 0%,transparent 70%);
animation:pulse 3s ease-in-out infinite;
}

.boton:active{
transform:scale(.95);
}

@keyframes pulse{
0%{opacity:.5;transform:translateX(-50%) scale(.95);}
50%{opacity:1;transform:translateX(-50%) scale(1.05);}
100%{opacity:.5;transform:translateX(-50%) scale(.95);}
}

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:20px;
padding:20px;
}

.card{
text-decoration:none;
color:#fff;
}

.card img{
width:100%;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,.8);
transition:transform .2s ease;
}

.card img:active{
transform:scale(.95);
}

.card span{
display:block;
margin-top:10px;
font-size:14px;
}