*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#0b1220;
  color:white;
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background: radial-gradient(circle at top, #1e3a8a, #0b1220);
}

.glass{
  background:rgba(255,255,255,0.08);
  padding:40px;
  border-radius:20px;
  backdrop-filter: blur(10px);
  box-shadow:0 0 30px rgba(0,0,0,0.4);
  animation: fadeIn 1.5s ease;
}

.profile{
  width:120px;
  height:120px;
  border-radius:50%;
  border:3px solid #38bdf8;
  margin-bottom:15px;
  object-fit:cover;
}

h1 span{
  color:#38bdf8;
}

.tagline{
  opacity:0.8;
  margin-top:10px;
}

.location{
  margin:10px 0;
  font-size:14px;
  opacity:0.7;
}

.btn{
  display:inline-block;
  margin-top:15px;
  padding:10px 20px;
  background:#38bdf8;
  color:black;
  border-radius:8px;
  text-decoration:none;
}

/* SECTIONS */
.section{
  padding:80px 20px;
  text-align:center;
}

.grid{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.card{
  background:#1e293b;
  padding:20px;
  border-radius:12px;
  width:150px;
  transition:0.3s;
}

.card:hover{
  transform:scale(1.1);
  background:#38bdf8;
  color:black;
}

/* FOOTER */
footer{
  text-align:center;
  padding:20px;
  background:#020617;
}

/* ANIMATION */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

.hidden{
  opacity:0;
  transform:translateY(50px);
  transition:0.8s;
}

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