*{box-sizing:border-box;margin:0;padding:0}
body{
 font-family:Arial, sans-serif;
 background:#f4f6f9;
 color:#111;
}
.container{
 max-width:1100px;
 margin:auto;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:15px;
}
.header{
 background:#2563eb;
 color:#fff;
}
.header a{
 color:#fff;
 margin-left:15px;
 text-decoration:none;
}
.hero{
 text-align:center;
 padding:80px 20px;
 background:#eaf1ff;
}
.hero h1{font-size:2.4rem;margin-bottom:15px}
.hero p{font-size:1.1rem;margin-bottom:25px}
.btn{
 background:#2563eb;
 color:#fff;
 padding:12px 24px;
 border-radius:6px;
 text-decoration:none;
}
.tools{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:20px;
 max-width:1100px;
 margin:40px auto;
 padding:0 20px;
}
.tool{
 background:#fff;
 padding:30px;
 text-align:center;
 border-radius:8px;
 box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.footer{
 text-align:center;
 padding:20px;
 background:#111;
 color:#fff;
}