body { margin:0; font-family: 'Poppins', sans-serif; background:#0b0615; color:#eee; }
:root { --accent:#5214A6; }

.navbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#1a1033; }
.navbar .logo { display:flex; align-items:center; gap:0.5rem; }
.navbar img { width:40px; }
.navbar nav a { margin:0 1rem; text-decoration:none; color:#eee; }
.navbar nav a:hover { color:var(--accent); }

.hero { display:flex; align-items:center; justify-content:space-between; padding:3rem 2rem; background:linear-gradient(to right,#1a1033,#0b0615); }
.hero h2 { font-size:2.5rem; color:var(--accent); }
.hero button { margin-top:1rem; padding:0.8rem 1.5rem; background:var(--accent); border:none; border-radius:6px; color:#fff; font-weight:bold; cursor:pointer; }
.hero button:hover { background:#3f0f80; }
.hero-img img { max-width:400px; border-radius:12px; }

.features { padding:3rem 2rem; text-align:center; }
.feature-cards { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.card { background:#1a1033; padding:2rem; border-radius:12px; width:250px; }
.card h3 { color:var(--accent); margin-bottom:0.5rem; }

.page { padding:4rem 2rem; text-align:center; }
.btn { display:inline-block; margin:1rem; padding:0.8rem 1.5rem; background:var(--accent); color:#fff; border-radius:6px; text-decoration:none; }
.btn:hover { background:#3f0f80; }

/* Footer stays fixed at bottom */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1rem;
  background: #1a1033;
  font-size: 0.9rem;
  color: #ccc;
}