:root{
  --primary:#0ea5e9;
  --accent:#22c55e;
  --bg:#f8fafc;
  --dark:#0f172a;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui}
body{background:var(--bg);color:#333;line-height:1.7}

header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 7%;background:#fff;border-bottom:1px solid #eee;
}

.logo{font-size:24px;font-weight:700;color:var(--primary)}

nav a{
  margin-left:18px;text-decoration:none;color:#444;font-weight:500;
}
nav a:hover{color:var(--primary)}

.hero{
  padding:80px 7%;text-align:center;background:#e0f2fe;
}

.section{padding:60px 7%}
.section h2{text-align:center;margin-bottom:30px}

.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.card{
  background:#fff;padding:20px;border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.card img{
  width:100%;height:180px;object-fit:cover;border-radius:10px;
}

.ad-box{
  margin:40px auto;padding:25px;background:#eee;
  text-align:center;border-radius:10px;max-width:900px;
}

footer{
  background:var(--dark);color:#fff;text-align:center;padding:40px;
}

.container{max-width:900px;margin:auto}