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

body{
    background:#1E1E2A;
    color:#E2E2EC;
    font-family:'Source Sans 3',sans-serif;
    font-size:1rem;
    line-height:1.7;
    overflow-x:hidden;
}

h1,h2{
    font-family:'Josefin Sans',sans-serif;
    font-weight:700;
}

.lilac{color:#C084FC}

/* BUBBLES */
.bubbles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
}
.bubble{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(192,132,252,0.15);
    background:rgba(192,132,252,0.04);
    animation:floatBubble linear infinite;
}
@keyframes floatBubble{
    0%{transform:translateY(0) scale(1);opacity:0.15}
    50%{opacity:0.25}
    100%{transform:translateY(-110vh) scale(0.8);opacity:0}
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
}
.atmosphere{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 30% 40%,rgba(192,132,252,0.15) 0%,transparent 50%),
        radial-gradient(ellipse at 70% 60%,rgba(110,231,183,0.1) 0%,transparent 45%),
        radial-gradient(ellipse at 50% 20%,rgba(255,200,87,0.08) 0%,transparent 40%);
    z-index:-1;
}
.hero-card{
    backdrop-filter:blur(8px);
    background:rgba(45,43,85,0.5);
    padding:4rem 3rem;
    text-align:center;
    border:1px solid rgba(192,132,252,0.1);
}
.hero-title{
    font-size:clamp(2rem,4.5vw,4rem);
    line-height:1.1;
    margin-bottom:0.5rem;
}
.hero-sub{
    color:#6EE7B7;
    font-size:0.95rem;
    letter-spacing:0.05em;
}

/* CONTENT */
.content{
    position:relative;
    z-index:1;
    max-width:1000px;
    margin:0 auto;
    padding:6rem 2rem;
}

/* PROJECT */
.project{
    display:flex;
    gap:2rem;
    margin-bottom:4rem;
    padding:2rem;
    backdrop-filter:blur(8px);
    background:rgba(45,43,85,0.3);
    border:1px solid rgba(192,132,252,0.08);
    transition:background 0.3s ease;
}
.project:hover{
    background:rgba(45,43,85,0.5);
}
.project-main{flex:1}
.project-meta{
    flex:0 0 120px;
    display:flex;
    flex-direction:column;
    gap:0.3rem;
}
.meta-label{
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:0.15em;
    color:#C084FC;
    margin-top:0.8rem;
}
.meta-label:first-child{margin-top:0}
.meta-value{
    font-size:0.85rem;
    color:#E2E2EC;
    font-family:'Josefin Sans',sans-serif;
}

/* UNDERLINE DRAW */
.underline-draw{
    position:relative;
    display:inline-block;
    font-size:clamp(1.4rem,3vw,2rem);
    margin-bottom:1rem;
    padding-bottom:0.3rem;
}
.underline-draw::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,#C084FC,#6EE7B7);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.6s ease;
}
.underline-draw.active::after{
    transform:scaleX(1);
}

.project-main p{
    color:rgba(226,226,236,0.7);
    font-size:0.95rem;
}

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

/* FOOTER */
.footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding:3rem 2rem;
    border-top:1px solid rgba(192,132,252,0.1);
}
.footer-name{
    font-family:'Josefin Sans',sans-serif;
    font-size:1.3rem;
    font-weight:700;
}
.footer-tag{
    color:#FFC857;
    font-size:0.8rem;
    margin-top:0.3rem;
}

/* MOBILE */
@media(max-width:640px){
    .project{flex-direction:column}
    .project-meta{flex:none;flex-direction:row;flex-wrap:wrap;gap:0.5rem 1.5rem}
    .meta-label{margin-top:0}
    .hero-card{padding:2.5rem 1.5rem}
    .content{padding:3rem 1.5rem}
}