*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0f172a;color:#fff}
section{padding:60px 10%}

/* HERO */
.hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(270deg,#6366f1,#06b6d4,#9333ea);background-size:600% 600%;animation:gradient 10s ease infinite}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero h1{font-size:3rem}
.hero p{margin:15px 0;font-size:1.2rem}
.btn{padding:10px 20px;margin:5px;border:none;border-radius:5px;cursor:pointer;font-weight:600}
.btn-primary{background:#fff;color:#000}
.btn-secondary{background:transparent;border:2px solid #fff;color:#fff}

/* ABOUT */
.about{background:#1e293b}
.about h2{text-align:center;margin-bottom:20px}
.about p{text-align:center;max-width:700px;margin:auto}

/* SKILLS */
.skills{background:#0f172a}
.skills h2{text-align:center;margin-bottom:20px}
.skill-bar{margin:10px 0}
.skill-bar span{display:block;margin-bottom:5px}
.progress{background:#1e293b;border-radius:20px;overflow:hidden}
.progress div{height:10px;background:#06b6d4}

/* PROJECTS */
.projects{background:#1e293b}
.projects h2{text-align:center;margin-bottom:20px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#0f172a;padding:20px;border-radius:10px;transition:0.3s}
.card:hover{transform:translateY(-5px)}

/* CONTACT */
.contact{text-align:center}
.contact input,.contact textarea{width:100%;padding:10px;margin:10px 0;border:none;border-radius:5px}
.contact button{background:#06b6d4;color:#fff;padding:10px 20px;border:none;border-radius:5px}

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

@media(max-width:768px){
.hero h1{font-size:2rem}
}