body{background:#0b0f19;color:white;font-family:'Poppins';margin:0}
canvas{position:fixed;top:0;left:0;z-index:-1}
header {
  position: sticky;
  top: 0;
  z-index: 1000; /* VERY IMPORTANT */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10%;

  background: rgba(11,15,25,0.9); /* slightly stronger */
  backdrop-filter: blur(10px);
}
nav a{margin-left:20px;color:white;text-decoration:none}
.hero{text-align:center;height:90vh;display:flex;flex-direction:column;justify-content:center}
.btn{padding:12px 25px;background:#6c5ce7;border:none;border-radius:20px;color:white}
section{padding:80px 10%}
.skills,.projects,.github-repos{display:grid;gap:20px}
.skill,.project-card,.repo{background:#121826;padding:20px;border-radius:10px}

section{
    scroll-margin-top: 100px;
}

.contact-form{
 display:flex;
 flex-direction:column;
 max-width:500px;
}

.input-group{
 position:relative;
 margin-bottom:20px;
}

.input-group input,
.input-group textarea{
 width:100%;
 padding:12px;
 border:none;
 border-radius:6px;
 background:#121826;
 color:white;
 outline:none;
}

.input-group label{
 position:absolute;
 top:50%;
 left:12px;
 transform:translateY(-50%);
 color:#aaa;
 pointer-events:none;
 transition:0.3s;
}

.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label{
 top:-8px;
 font-size:12px;
 color:#00e5ff;
}

#form-status{
 margin-top:10px;
 font-size:14px;
 color:#00e5ff;
}