body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #0f172a;
  color: #e5e7eb;
}
.hero {
  background: linear-gradient(135deg,#0f172a,#1e1e2f,#1e293b);
  padding: 100px 20px;
  text-align: center;
}
.hero h1 { font-size: 56px; margin-bottom: 10px; }
.hero p { font-size: 20px; opacity: .85; }
.buttons { margin-top: 30px; }
.btn { display: inline-block; padding: 14px 26px; margin: 10px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: all .2s ease; }
.btn-primary { background: #ff6f61; color: white; }
.btn-primary:hover { transform: translateY(-2px); background: #ff5546; }
.btn-discord { background: #5865F2; color: white; }
.btn-discord:hover { background: #4752c4; }
.features { padding: 80px 20px; text-align: center; background: #111827; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 30px; max-width: 1100px; margin: auto; }
.feature { background: #1f2937; padding: 30px; border-radius: 12px; transition: .2s; }
.feature:hover { transform: translateY(-6px); }
.screenshots { padding: 80px 20px; text-align: center; }
.screenshot-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.screenshot-grid img { width: 250px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,.5); }
footer { background: #020617; text-align: center; padding: 30px; }
footer a { color: #ff6f61; text-decoration: none; }
.container { max-width: 800px; margin: 3rem auto; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); color: #111827; }
.container h2 { color: #1e1e2f; }