*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
color:#fff;
background:#111;
}
.bg{
position:fixed;inset:0;
background:url(background.webp) center/cover no-repeat;
filter:blur(2px) brightness(.45);
transform:scale(1.05);
}
.overlay{
position:fixed;inset:0;
background:rgba(10,10,12,.45);
}
header,.grid{position:relative;z-index:2}
header{text-align:center;padding:55px 20px}
.logo{width:110px;border-radius:20px}
h1{font-size:52px;margin:15px 0 8px}
header p{color:#ddd}

.grid{
max-width:1050px;
margin:auto;
padding:0 20px 50px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;
}

.card{
background:rgba(20,20,24,.82);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:24px;
text-decoration:none;
color:white;
transition:.2s;
}
.card:hover{
transform:translateY(-5px);
border-color:#4aa3ff;
}
.hero{grid-column:span 2}
.card h2{margin-bottom:12px}
.card p{line-height:1.6;color:#ddd}
button{
margin-top:15px;
padding:10px 18px;
border:none;
border-radius:12px;
background:#3b96ff;
color:white;
cursor:pointer;
}
@media(max-width:700px){
.hero{grid-column:span 1}
h1{font-size:40px}
}