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

body{
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  background:#0a0a0a;
  color:white;
}

/* HERO */
.hero{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:100vh;
  padding:40px 20px;
}

.profile{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:20px;
}

h1{
  font-size:28px;
  font-weight:600;
}

.subtitle{
  opacity:0.6;
  margin:6px 0 14px;
  font-size:14px;
}

h2{
  font-size:24px;
  font-weight:500;
  line-height:1.4;
}

.small{
  margin-top:14px;
  font-size:13px;
  opacity:0.6;
}

/* BUTTONS */
.buttons{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.btn{
  flex:1;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  color:white;
  text-decoration:none;
  font-size:14px;
  transition:0.2s;
}

.btn:hover{
  background:rgba(255,255,255,0.15);
}

/* SECTIONS */
.section{
  margin:60px 0;
  text-align:center;
}

.section img{
  width:100%;
  border-radius:18px;
  margin-bottom:20px;
}

.text{
  padding:0 20px;
}

.text h2{
  font-size:20px;
  margin-bottom:8px;
}

.text p{
  font-size:14px;
  opacity:0.6;
}

/* ANIMATION */
.fade{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

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