:root{
--primary:#e30613;
--dark:#020617;
--light:#f8fafc;
--gray:#64748b;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:'Inter',sans-serif;
background:var(--light);
color:#111;
}
header{
position:sticky;
top:0;
background:white;
padding:20px 60px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
z-index:1000;
}
header img{height:45px}
nav a{
margin-left:25px;
text-decoration:none;
font-weight:600;
color:#111;
}
.hero{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
padding:120px 60px;
background:white;
}
.hero img{width:100%}
.hero h1{
font-size:60px;
}
.hero span{color:var(--primary)}
.section{
padding:100px 60px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}
.card{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:.3s;
}
.card:hover{transform:translateY(-10px)}
.card img{width:100%;margin-bottom:15px}
footer{
background:var(--dark);
color:white;
padding:60px;
text-align:center;
}
button{
background:var(--primary);
color:white;
border:none;
padding:15px 30px;
border-radius:8px;
font-weight:600;
cursor:pointer;
}