* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", Arial, sans-serif;
}


html {
    scroll-behavior: smooth;
}


body {

    background:#050505;
    color:white;
    overflow-x:hidden;

}


/* ==========================
   Background
========================== */


.background {

    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;

}


.glow {

    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    filter:blur(160px);
    opacity:.35;

}


.glow-one {

    background:#7c6fff;
    top:-250px;
    left:-200px;

}


.glow-two {

    background:#4c3cff;
    bottom:-250px;
    right:-200px;

}





/* ==========================
   Navbar
========================== */


.navbar {

    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    width:min(1150px,90%);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 25px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:22px;

    z-index:1000;

}



.logo {

    color:white;
    text-decoration:none;

    font-size:28px;

    font-weight:900;

    letter-spacing:3px;

}



.nav-links {

    display:flex;
    gap:35px;

}



.nav-links a {

    text-decoration:none;
    color:#aaa;

    transition:.3s;

}


.nav-links a:hover {

    color:white;

}




/* ==========================
   Buttons
========================== */


.hire-btn,
.primary-btn,
.secondary-btn,
.small-btn {


    display:inline-block;

    text-decoration:none;

    padding:13px 26px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}



.hire-btn,
.primary-btn,
.small-btn {

    background:#7c6fff;

    color:white;

}



.hire-btn:hover,
.primary-btn:hover,
.small-btn:hover {

    transform:translateY(-4px);

    box-shadow:0 0 30px rgba(124,111,255,.7);

}




.secondary-btn {


    border:1px solid rgba(255,255,255,.25);

    color:white;

}



.secondary-btn:hover {

    background:white;

    color:black;

}







/* ==========================
   Mobile Menu
========================== */


.hamburger {

    display:none;

    background:none;

    border:0;

    cursor:pointer;

}



.hamburger span {


    display:block;

    width:30px;

    height:3px;

    margin:6px;

    background:white;

    transition:.3s;

}



.mobile-menu {

    display:none;

    position:fixed;

    top:100px;

    left:5%;

    width:90%;

    padding:30px;

    border-radius:25px;

    background:rgba(10,10,10,.9);

    backdrop-filter:blur(20px);

    flex-direction:column;

    gap:25px;

    z-index:999;

}



.mobile-menu a {

    color:white;

    text-decoration:none;

}



.mobile-menu.open {

    display:flex;

    animation:slideMenu .35s ease;

}



@keyframes slideMenu {

    from {

        opacity:0;
        transform:translateY(-20px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}








/* ==========================
   Hero
========================== */


.hero {

    position:relative;
    overflow:hidden;
    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:120px 20px;

}



.hero h1 {


    font-size:clamp(45px,7vw,90px);

    line-height:1.05;

    font-weight:900;


    background:linear-gradient(
        90deg,
        white,
        #7c6fff
    );


    background-clip:text;

    -webkit-background-clip:text;

    color:transparent;


}



.hero p {


    margin-top:25px;

    font-size:22px;

    color:#aaa;

}



.hero-buttons {


    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

}







/* ==========================
   Particles
========================== */


#particles {

    position:absolute;
    inset:0;
    pointer-events:none;

}


#particles span {

    position:absolute;

    width:5px;

    height:5px;

    background:#7c6fff;

    border-radius:50%;

}








/* ==========================
   Sections
========================== */


.section {

    width:min(1200px,90%);

    margin:auto;

    padding:100px 0;

}



.section-title {

    text-align:center;

    font-size:48px;

    margin-bottom:55px;

}







/* ==========================
   Cards
========================== */


.cards {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.glass-card {


    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(20px);


    padding:35px;

    border-radius:25px;


    transition:.4s;


}



.glass-card:hover {


    transform:translateY(-10px);

    border-color:#7c6fff;

    box-shadow:0 20px 50px rgba(124,111,255,.2);


}



.glass-card h3 {

    font-size:28px;

    margin-bottom:15px;

}



.glass-card p {

    color:#aaa;

    line-height:1.7;

}








/* Project Expand */


.extra-content {


    max-height:0;

    overflow:hidden;

    transition:.5s;


}



.project-card.active .extra-content {


    max-height:300px;

    margin-top:20px;


}



.expand-btn {


    margin-top:20px;

    border:0;

    padding:12px 20px;

    border-radius:12px;

    background:#7c6fff;

    color:white;

    cursor:pointer;

    font-weight:bold;

}







/* ==========================
   Contact Fix
========================== */


.contact-box {


    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}



.contact-box p {


    max-width:500px;

}






/* ==========================
   Scroll Animations
========================== */


.reveal {


    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}



.reveal.show {


    opacity:1;

    transform:none;

}







/* ==========================
   Footer
========================== */


footer {


    text-align:center;

    padding:50px;

    color:#777;

}








/* ==========================
   Responsive
========================== */


@media(max-width:900px){


    .nav-links,
    .hire-btn {

        display:none;

    }


    .hamburger {

        display:block;

    }


    .cards {

        grid-template-columns:1fr;

    }


    .hero-buttons {

        flex-direction:column;

    }


}



@media(max-width:500px){


    .hero h1 {

        font-size:42px;

    }


    .section-title {

        font-size:38px;

    }


}