*{margin:0;padding:0;box-sizing:border-box;font-family:Inter;}
html{scroll-behavior:smooth;}
body{background:#0F1115;color:#fff;overflow-x:hidden;}

/* Floating lights */
.light{position:fixed;width:500px;height:500px;background:#ffffff12;filter:blur(160px);top:-100px;left:-100px;animation:move 18s infinite alternate;z-index:-1;}
.light.two{top:60%;left:70%;}
@keyframes move{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(200px,120px,0)}}

/* Navbar */
header{position:sticky;top:0;padding:25px 10%;background:#0f1115cc;backdrop-filter:blur(8px);z-index:100;}
.nav{display:flex;justify-content:space-between;align-items:center;}
.logo{font-weight:700;}
.nav-links{display:flex;gap:30px;list-style:none;}
.nav-links a{text-decoration:none;color:#9CA3AF;transition:.25s;}
.nav-links a:hover{color:white;}

/* Hero */
.hero{display:flex;align-items:center;justify-content:center;gap:120px;height:90vh;padding:0 10%;}
.hero h1{font-size:64px;}
.hero p{margin:15px 0;color:#9CA3AF;}
.buttons a{padding:10px 22px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);text-decoration:none;color:white;margin-right:10px;backdrop-filter:blur(10px);transition:.3s;}
.buttons a:hover{background:rgba(255,255,255,0.08);}

/* Avatar Animation */
#avatar{
  width:240px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  animation:float 4s ease-in-out infinite;
  transition:transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow:0 0 25px rgba(34,211,238,0.3);
}
#avatar:hover{box-shadow:0 0 40px rgba(34,211,238,0.5);}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

/* Sections */
.section{padding:120px 10%;text-align:center;}
.secondary{color:#9CA3AF;}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:50px;}
.card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(20px);padding:40px;border-radius:16px;transition:transform .35s ease, box-shadow .35s ease;transform-style:preserve-3d;}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,.4);}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.2,.65,.3,.9);}
.reveal.active{opacity:1;transform:translateY(0);}

/* Footer */
footer{text-align:center;padding:40px;}

/* Mobile */
@media(max-width:900px){
.hero{flex-direction:column;text-align:center;height:auto;padding:80px 10%;gap:40px;}
.hero h1{font-size:42px;}
.hero-img img{width:180px;}
.nav-links{gap:15px;}
}