*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0e0e0e;color:#eaeaea;overflow-x:hidden;padding-bottom:120px}
#particles-js{position:fixed;inset:0;z-index:-1}

section{
  padding:120px 12%;
}

.home,
#journey{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home{
  align-items:center;
  text-align:center;
}

.profile-img{width:190px;height:190px;border-radius:50%;border:4px solid #444;box-shadow:0 0 25px rgba(255,255,255,.15)}
h1{font-size:3rem;margin-top:20px}
.typewriter{margin-top:10px;font-size:1.4rem;color:#aaa;min-height:1.6rem}

.timeline{max-width:600px;margin-top:40px}
.timeline-item{margin-bottom:40px;padding-left:20px;border-left:2px solid #444}
.timeline-item span{color:#888;font-size:.85rem}
.timeline-item h3{margin:6px 0}

.skills,.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:25px;
  margin-top:40px;
}

.card,.project-card{
  background:rgba(255,255,255,.05);
  padding:22px;
  border-radius:14px;
  transition:.3s;
}

.card:hover,.project-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.1);
}

.skill-img{width:60px;margin-bottom:10px}
.project-card p{font-size:.9rem;color:#ccc}

.badges{display:flex;gap:6px;margin-top:8px}
.badge{background:#222;padding:4px 8px;border-radius:999px;font-size:.75rem}

.github-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  background: #24292f;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.3s;
}

.github-btn:hover {
  background: #444c56;
}

form{max-width:600px;margin-top:40px;display:flex;flex-direction:column;gap:15px}
input,textarea{padding:12px;border-radius:8px;background:#191919;border:none;color:#fff}
button{padding:12px;border-radius:8px;border:none;background:#333;color:#fff;cursor:pointer}

footer{text-align:center;padding:40px;font-size:.8rem;color:#666}

.bottom-nav{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:25px;
  padding:15px 30px;
  border-radius:50px;
  z-index:100;
}

.glass{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.37);
}

.bottom-nav a{
  color:#888;
  font-size:1.2rem;
  transition:.3s;
}

.bottom-nav a:hover{
  color:#fff;
  transform:translateY(-3px);
}

section {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.9s ease;
}

section.reveal {
  opacity: 1;
  transform: translateY(0);
}