@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(circle at 20% 20%,#2b0b4a,#090909 80%);
  color:#eee;display:flex;flex-direction:column;min-height:100vh;
}

/* HEADER */
header{
  background:linear-gradient(90deg,rgba(54,0,89,.9),rgba(5,5,5,.9));
  padding:16px 40px;display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 4px 15px rgba(0,0,0,.5);
}
.logo{
  font-size:24px;font-weight:700;letter-spacing:1px;color:#fff;
  background:linear-gradient(90deg,#b46bff,#ff3fb3);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
nav ul{
  display:flex;list-style:none;align-items:center;gap:30px;
}
nav ul li{
  position:relative;cursor:pointer;font-weight:600;transition:color .3s;
}
nav ul li:hover{color:#ff80e6}
nav ul li ul{
  display:none;position:absolute;background:rgba(25,25,35,.95);padding:10px 0;
  top:30px;left:0;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.4);
}
nav ul li:hover ul{display:block}
nav ul li ul li{
  padding:8px 20px;white-space:nowrap;font-weight:400;
}
nav ul li ul li:hover{
  background:rgba(120,0,200,.3);color:#fff;
}

/* HERO */
.hero{
  text-align:center;padding:60px 20px;
  background:radial-gradient(circle at 70% 30%,rgba(180,0,255,.15),transparent 60%);
}
.hero h1{
  font-size:44px;font-weight:700;margin-bottom:20px;
  background:linear-gradient(90deg,#c77dff,#9d4edd);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{color:#aaa;max-width:700px;margin:0 auto 20px;line-height:1.6}
#search-input{
  background:#111;border:none;outline:none;color:#eee;padding:10px 18px;
  border-radius:25px;width:250px;margin-top:10px;
  box-shadow:0 0 10px rgba(255,0,255,.2);
}

/* GRID */
main{padding:40px 80px;flex:1}
.section-title{font-size:22px;font-weight:600;margin-bottom:25px;color:#fff}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:25px;
}
.card{
  background:rgba(25,25,35,.9);border-radius:14px;overflow:hidden;
  box-shadow:0 0 15px rgba(180,0,255,.15);
  transition:transform .25s,box-shadow .25s;
}
.card:hover{
  transform:scale(1.04);
  box-shadow:0 0 25px rgba(255,0,170,.25);
}
.card img{width:100%;height:280px;object-fit:cover}
.card-content{padding:14px}
.card h3{font-size:16px;margin-bottom:8px;color:#fff}
.card p{font-size:13px;color:#aaa;line-height:1.5}

/* META */
.meta{margin-top:10px;font-size:12px;line-height:1.6em;color:#aaa}
.meta span{
  display:inline-block;background:rgba(255,255,255,.08);
  padding:3px 8px;border-radius:8px;margin:2px 4px 0 0;font-size:11px;
}
.meta .tag{color:#ff7de0}
.meta .author{color:#a0a0ff}
.meta .year{color:#ffd480}

/* PAGINATION */
.pagination{
  text-align:center;margin-top:30px;
}
.pagination button{
  background:#111;border:1px solid #333;color:#ccc;
  padding:6px 12px;margin:0 4px;border-radius:6px;cursor:pointer;
}
.pagination button.active{
  background:linear-gradient(90deg,#9d4edd,#ff3fb3);
  color:#fff;border:none;
}

/* FOOTER */
footer{
  background:#0a0a0a;text-align:center;padding:20px;font-size:13px;color:#777;
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width:768px){
  header{flex-direction:column;gap:15px}
  main{padding:30px 20px}
  .hero h1{font-size:32px}
}