*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
    background:#1A0A2E;
    color:#FFF0E5;
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.65;
    overflow-x:hidden;
}

h1,h2{
    font-family:'Work Sans',sans-serif;
    font-weight:800;
}

.rose{color:#FF6B8A}

/* PARTICLES */
.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
}
.particle{
    position:absolute;
    border-radius:50%;
    animation:drift linear infinite;
}
@keyframes drift{
    0%{transform:translateY(0) translateX(0);opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{transform:translateY(-100vh) translateX(30px);opacity:0}
}

/* GRADIENT MESH */
.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.gradient-mesh{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(179,136,255,0.25) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 30%,rgba(255,107,138,0.2) 0%,transparent 45%),
        radial-gradient(ellipse at 50% 80%,rgba(255,215,0,0.1) 0%,transparent 40%);
    z-index:-1;
}
.hero-title{
    font-size:clamp(3rem,7vw,6rem);
    text-align:center;
    line-height:1.1;
    position:relative;
}
.hero-sub{
    color:#B388FF;
    font-size:1rem;
    margin-top:0.5rem;
    letter-spacing:0.05em;
}

/* PROJECTS */
.projects{
    position:relative;
    z-index:1;
    padding:6rem 2rem;
    max-width:1100px;
    margin:0 auto;
}

.project-card{
    background:#3D1F6D;
    padding:2.5rem 2rem;
    margin-bottom:3rem;
    border-radius:4px;
    cursor:default;
    transition:transform 0.4s ease,box-shadow 0.4s ease;
    position:relative;
}
.project-card:hover{
    transform:translateY(-8px) rotate(0deg);
    box-shadow:0 20px 60px rgba(179,136,255,0.2);
}

.card-1{max-width:600px;transform:rotate(-2deg);margin-left:5%}
.card-2{max-width:500px;transform:rotate(1.5deg);margin-left:35%}
.card-3{max-width:700px;transform:rotate(-1deg);margin-left:10%}
.card-4{max-width:550px;transform:rotate(2.5deg);margin-left:30%}
.card-5{max-width:650px;transform:rotate(-1.5deg);margin-left:8%}

.card-tag{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.15em;
    color:#FFD700;
    display:block;
    margin-bottom:0.5rem;
}
.project-card h2{
    font-size:clamp(1.5rem,3vw,2.2rem);
    margin-bottom:0.75rem;
    color:#FFF0E5;
}
.project-card p{
    color:rgba(255,240,229,0.7);
    font-size:0.9rem;
}

/* FADE-IN */
.fade-in{
    opacity:0;
    transition:opacity 0.6s ease,transform 0.6s ease;
}
.fade-in.visible{
    opacity:1;
}

/* FOOTER */
.footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding:4rem 2rem;
    border-top:1px solid rgba(179,136,255,0.15);
}
.footer-name{
    font-family:'Work Sans',sans-serif;
    font-size:1.5rem;
    font-weight:800;
}
.footer-desc{
    color:#B388FF;
    font-size:0.85rem;
    margin-top:0.3rem;
}

/* MOBILE */
@media(max-width:640px){
    .card-1,.card-2,.card-3,.card-4,.card-5{
        max-width:100%;
        margin-left:0;
        transform:rotate(0);
    }
    .projects{padding:3rem 1.5rem}
}