*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body{
  background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  color:white;
  overflow-x:hidden;
}

/* NAV FIX */
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:18px 10%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,0.08);
  z-index:9999;
}

nav a{
  color:white;
  text-decoration:none;
  margin-left:15px;
}

/* SECTIONS */
section{
  padding:100px 10%;
  position:relative;
  z-index:1;
}

/* HERO FIX */
#hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:80px;
}

/* HERO ANIMATION */
.hero-content h1,
.hero-content p{
  opacity:0;
  transform:translateY(20px);
  animation:heroFade 1s forwards;
}

.hero-content h1{animation-delay:0.2s;}
.hero-content p:nth-of-type(1){animation-delay:0.5s;}
.hero-content p:nth-of-type(2){animation-delay:0.8s;}

@keyframes heroFade{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* BUTTON */
.btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:12px;
  background:linear-gradient(45deg,#00e0ff,#00ffcc);
  color:black;
  font-weight:bold;
  text-decoration:none;
  margin-top:10px;
  transition:0.3s;
}

.btn:hover{
  transform:scale(1.08);
  box-shadow:0 0 20px rgba(0,224,255,0.6);
}

/* SCROLL ANIMATIONS (OLD VERSION) */
.fade,
.slide-left,
.slide-right,
.slide-up{
  opacity:0;
  transition:0.8s ease;
}

.slide-left{transform:translateX(-60px);}
.slide-right{transform:translateX(60px);}
.slide-up{transform:translateY(40px);}

.fade.show,
.slide-left.show,
.slide-right.show,
.slide-up.show{
  opacity:1;
  transform:translate(0,0);
}

/* ABOUT ME */
.me-section{
  text-align:center;
}

.me-img{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 20px auto;
  border:2px solid rgba(255,255,255,0.3);
  box-shadow:0 0 25px rgba(0,224,255,0.3);
}

/* ORDER BOX */
.order-box{
  padding:30px;
  border-radius:20px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.2);
  max-width:700px;
  margin:auto;
  text-align:center;
}

.order-box p{
  margin:10px 0;
}

/* FOOTER */
footer{
  text-align:center;
  padding:20px;
  opacity:0.7;
}