body{

font-family: 'Inter', sans-serif;
margin:0;
background:#fafafa;
color:#111;

}


.nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
border-bottom:1px solid #eee;
background:white;

}


.logo{

font-weight:600;
font-size:18px;

}


.nav-links a{

margin-left:20px;
text-decoration:none;
color:#444;

}


.hero{

text-align:center;
padding:90px 20px;

background:linear-gradient(
180deg,
#ffffff,
#f6f8ff
);

}


.hero h1{

font-size:44px;
margin-bottom:10px;

}


.hero p{

color:#666;

}


.search-wrapper{

margin-top:30px;

}


.search-wrapper input{

width:520px;
max-width:90%;

padding:16px;

border-radius:12px;

border:1px solid #e5e5e5;

font-size:16px;

box-shadow:0 6px 20px rgba(0,0,0,0.05);

}



.categories{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

padding:80px;

}


.card{

background:white;

padding:30px;

border-radius:16px;

border:1px solid #f0f0f0;

transition:all .25s ease;

}


.card:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,0.08);

}


.card h3{

margin-top:0;

}


.card p{

color:#666;

}


.card a{

text-decoration:none;

font-weight:500;

color:#4f46e5;

}



.popular{

padding:80px;

background:white;

}


.popular h2{

margin-bottom:30px;

}


.articles{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:20px;

}


.article{

background:#f7f8ff;

padding:20px;

border-radius:12px;

text-decoration:none;

color:#333;

transition:.2s;

}


.article:hover{

background:#eef0ff;

}



.support{

text-align:center;

padding:100px 20px;

}


.support-btn{

display:inline-block;

background:#4f46e5;

color:white;

padding:14px 30px;

border-radius:10px;

text-decoration:none;

margin-top:20px;

}


footer{

text-align:center;

padding:30px;

color:#888;

}