@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Montserrat', sans-serif; background:#121212; color:#fff; overflow-x:hidden; }

h1,h2,h3 { font-weight:800; }
h2 { text-align:center; margin:60px 0 40px; font-size:2.5em; }

a { text-decoration:none; color:#fff; transition:.3s; }
a:hover { color:#ffb400; }

.hero {
    position:relative;
    width:100%; height:100vh;
    background: linear-gradient(135deg,#4484ce,#ff9b11,#9b59b6,#ff7f7f,#4c045e);
    background-size: 1200% 1200%;
    animation: gradientBG 20s ease infinite;
    display:flex; justify-content:center; align-items:center;
    overflow:hidden;
}

@keyframes gradientBG {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.hero-glass {
    position: relative;
    padding: 40px;
    backdrop-filter: blur(15px);
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    text-align:center;
    z-index:5;
}

.wave {
    display:inline-block;
    animation: wave 2s infinite;
    transform-origin:70% 70%;
}
@keyframes wave {
    0% {transform:rotate(0deg);}
    10%{transform:rotate(14deg);}
    20%{transform:rotate(-8deg);}
    30%{transform:rotate(14deg);}
    40%{transform:rotate(-4deg);}
    50%{transform:rotate(10deg);}
    60%{transform:rotate(0deg);}
    100%{transform:rotate(0deg);}
}

.socials { margin:20px 0; }
.socialicons {
    font-size:2em;
    margin:0 10px;
    transition:.3s;
}
.socialicons:hover { transform:scale(1.2); color:#ffb400; }

.scroll-down { display:inline-block; margin-top:20px; font-size:1.5em; animation: bounce 2s infinite; }
@keyframes bounce {
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(10px);}
}

.projects-container { background:#1a1a1a; padding:80px 20px; position:relative; }
.projects { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }

.project-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    border-radius:15px;
    padding:20px;
    width:300px;
    transition:.3s;
    display:flex; flex-direction:column; align-items:center;
}
.project-card:hover { transform:translateY(-10px); box-shadow:0 0 20px rgba(255,255,255,0.2); }

.project-card img { width:150px; margin-bottom:15px; border-radius:10px; }
.project-card ul { list-style:disc; padding-left:20px; text-align:left; }
.project-card a { margin-top:15px; color:#ffb400; font-weight:600; }

.wave-divider { display:block; width:100%; }
.wave-divider.flip { transform:rotate(180deg); }

.contact-container { background:#121212; padding:80px 20px; text-align:center; }
footer { background:#0f0f0f; padding:20px; text-align:center; font-size:0.9em; color:#aaa; }

#particles { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }