*{box-sizing:border-box;font-family:Poppins,Arial}
body{margin:0;background:#031426;color:#fff;scroll-behavior:smooth}
header{height:80px;background:#061a33;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:10}
.brand{font-size:25px;font-weight:bold}.brand span{color:#00bfff}
nav a{color:white;text-decoration:none;margin:12px}
.hero{min-height:600px;display:flex;align-items:center;justify-content:space-between;padding:70px 8%;background:linear-gradient(120deg,#031426,#0a3b70)}
.tag{border:1px solid #00aaff;padding:10px 20px;border-radius:30px}
h1{font-size:65px;line-height:1.05;margin:25px 0}h1 span{color:#00c8ff}
h2{font-size:30px}
.btn{display:inline-block;background:#008cff;color:white;padding:15px 30px;border-radius:30px;text-decoration:none;margin:10px;transition:.3s}
.btn:hover{transform:translateY(-5px)}
.dark{background:transparent;border:1px solid white}
.avatar img{width:380px;height:380px;border-radius:50%;animation:f 4s infinite}
@keyframes f{50%{transform:translateY(-15px)}}
.profile{background:white;color:#10233b;padding:60px 8%;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.skills span{display:inline-block;background:#eaf3ff;padding:12px 18px;border-radius:20px;margin:5px}
.systems{padding:60px 8%}
.cards{display:flex;gap:25px}
.card{background:#092847;padding:25px;border-radius:20px;flex:1;transition:.3s}
.card:hover{transform:translateY(-12px);box-shadow:0 20px 40px #0005}
.card img{width:100%;height:150px;object-fit:cover}
.card a{display:block;background:#008cff;color:white;text-align:center;padding:12px;border-radius:10px;text-decoration:none;margin-top:20px}
footer{text-align:center;background:#020b17;padding:40px}
@media(max-width:800px){header{flex-direction:column;height:auto;padding:20px}nav{display:none}.hero{display:block;text-align:center}h1{font-size:40px}.avatar img{width:260px;height:260px}.profile,.cards{display:block}.card{margin:20px 0}}


.animate{
    opacity:0;
    transform:translateY(35px);
    transition:all .8s ease;
}

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

.card:hover img{
    transform:scale(1.05);
}

.card img{
    transition:.4s ease;
}