*{box-sizing:border-box}

body{
margin:0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: radial-gradient(circle at top, #b11226, #000000);
color:white;
}

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

header h1{
margin:0;
font-size:2.4rem;
letter-spacing:1px;
}

header p{
opacity:.85;
margin-top:12px;
color:#fca5a5;
}

.grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap:26px;
padding:36px;
max-width:1200px;
margin:auto;
}

.card{
background: rgba(0,0,0,.55);
backdrop-filter: blur(12px);
border-radius:22px;
padding:22px;
box-shadow:
  0 25px 50px rgba(0,0,0,.7),
  inset 0 0 0 1px rgba(255,0,0,.25);
display:flex;
flex-direction:column;
justify-content:space-between;
transition:.3s;
}

.card:hover{
transform: translateY(-6px);
box-shadow:
  0 35px 70px rgba(0,0,0,.9),
  inset 0 0 0 1px rgba(255,0,0,.5);
}

.card h3{
margin:0 0 12px;
color:#fecaca;
}

.card p{
font-size:.9rem;
opacity:.85;
}

.card a{
margin-top:18px;
display:inline-block;
text-decoration:none;
color:white;
padding:12px 18px;
border-radius:14px;
background: linear-gradient(135deg,#dc2626,#7f1d1d);
text-align:center;
font-weight:600;
letter-spacing:.3px;
box-shadow: 0 10px 25px rgba(220,38,38,.45);
}

.card a:hover{
opacity:.9;
}