* { margin:0; padding:0; box-sizing:border-box; font-family:Arial; }
body { background:#050816; color:white; overflow-x:hidden; }

canvas { position:fixed; top:0; left:0; z-index:-1; }

.hero { height:100vh; display:flex; align-items:center; padding:60px; }
.content { max-width:900px; }

.tag { display:inline-block; padding:8px 14px; background:#111827; border-radius:20px; margin-bottom:20px; }

h1 { font-size:60px; line-height:1.1; }
h1 span { color:#38bdf8; }

p { color:#cbd5e1; margin-top:20px; font-size:18px; }

.buttons { margin-top:30px; }
.buttons a {
  padding:12px 20px;
  margin-right:10px;
  background:#38bdf8;
  color:black;
  text-decoration:none;
  border-radius:10px;
  font-weight:bold;
}
.buttons .secondary { background:#1e293b; color:white; }

.stats { display:flex; gap:40px; margin-top:40px; }
.stats span { font-size:28px; font-weight:bold; display:block; }

section { padding:100px 60px; }

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

.card {
  padding:30px;
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:12px;
}

#repos {
  margin-top:20px;
  color:#94a3b8;
}

footer {
  text-align:center;
  padding:40px;
  border-top:1px solid #1e293b;
}