:root { --bg:#fff; --text:#111; --card:#f3f3f3; }
[data-theme='dark'] { --bg:#121212; --text:#ddd; --card:#1e1e1e; }

body { background:var(--bg); color:var(--text); font-family:Arial; margin:0; padding:0; }

.topnav {
  background:#007bff;
  padding:10px;
  display:flex;
  gap:10px;
}
.topnav button {
  background:white;
  border:0;
  padding:8px 15px;
  border-radius:6px;
  cursor:pointer;
}

.hero {
  text-align:center; padding:60px 20px;
  background:linear-gradient(135deg,#4a00ff,#007bff); color:white;
}
.logo { width:350px; margin-bottom:5px; }
.actions button { margin:10px; padding:10px 20px; border:10; border-radius:6px; cursor:pointer; }

.card-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px; padding:20px;
}
.card { background:var(--card); padding:20px; border-radius:10px; }

.gallery { padding:30px; text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.gallery-item { background:var(--card); padding:10px; border-radius:10px; }
.gallery-item img { width:100%; border-radius:8px; }