*{margin:0;padding:0;font-family:Arial,sans-serif}
.container{width:90%;margin:auto}
.header{background:linear-gradient(45deg,#4e54c8,#8f94fb);padding:15px 0;color:#fff;position:sticky;top:0}
.nav{display:flex;justify-content:space-between;align-items:center}
nav a{color:#fff;margin-left:20px;text-decoration:none}
.hero{text-align:center;padding:80px 20px;background:#f5f7ff}
.hero h1{font-size:40px;margin-bottom:10px}
.hero input{margin-top:20px;padding:15px;width:60%;border-radius:30px;border:1px solid #ddd}
.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin:60px auto}
.card{padding:30px;border-radius:15px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s}
.card:hover{transform:translateY(-10px)}
.popular{background:#f5f7ff;padding:60px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:30px}
.tool{padding:20px;background:#fff;border-radius:10px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,.1);cursor:pointer}
footer{text-align:center;padding:20px;background:#4e54c8;color:#fff}