style.css

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


:root{

    --bg:#050505;
    --card:#111111;
    --border:#262626;
    --text:#ffffff;
    --muted:#a1a1aa;
    --primary:#8b5cf6;
    --secondary:#06b6d4;

}


body{

    font-family:
    Inter,
    system-ui,
    sans-serif;

    background:
    radial-gradient(
        circle at top,
        #312e81,
        transparent 35%
    ),
    var(--bg);

    color:var(--text);

    overflow-x:hidden;

}



html{

    scroll-behavior:smooth;

}







/* Navbar */


.navbar{

    height:80px;

    padding:0 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid var(--border);

    background:
    rgba(5,5,5,.75);

    backdrop-filter:blur(15px);

    position:sticky;

    top:0;

    z-index:10;

}



.logo{

    font-size:25px;

    font-weight:800;

    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #06b6d4
    );

    -webkit-background-clip:text;

    color:transparent;

}



nav{

    display:flex;

    gap:30px;

}



nav a{

    text-decoration:none;

    color:var(--muted);

    transition:.3s;

}



nav a:hover{

    color:white;

}



.nav-btn{

    background:white;

    border:none;

    padding:12px 22px;

    border-radius:12px;

    font-weight:700;

}








/* Hero */


.hero{

    padding:90px 8%;

    text-align:center;

}



.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    color:#ddd6fe;

    background:
    rgba(139,92,246,.15);

    border:1px solid #4c1d95;

    margin-bottom:25px;

}



.hero h1{

    font-size:70px;

    line-height:1.1;

    font-weight:900;

}



.hero h1 span{

    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #06b6d4
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p{

    max-width:700px;

    margin:25px auto;

    font-size:20px;

    line-height:1.7;

    color:var(--muted);

}







/* Buttons */


.hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:35px;

}



.primary,
.secondary{

    padding:15px 30px;

    border-radius:14px;

    font-weight:700;

    cursor:pointer;

}



.primary{

    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #06b6d4
    );

    color:white;

    border:none;

}



.secondary{

    background:#18181b;

    color:white;

    border:1px solid var(--border);

}








/* Upload */


.upload-box{

    max-width:650px;

    margin:70px auto 0;

    padding:45px;

    border-radius:25px;

    border:2px dashed #52525b;

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

    transition:.3s;

}



.upload-box:hover{

    border-color:#8b5cf6;

    transform:translateY(-5px);

}



.upload-icon{

    font-size:55px;

}



.upload-box p{

    margin:15px;

}



.upload-box input{

    display:none;

}



.upload-box label{

    display:inline-block;

    margin-top:20px;

    padding:12px 25px;

    border-radius:12px;

    background:#8b5cf6;

    cursor:pointer;

}








/* Dashboard */


.dashboard,
.skills,
.suggestions,
.features{

    padding:80px 8%;

}



.dashboard h2,
.skills h2,
.suggestions h2{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;

}





.stats{

    display:grid;

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

    gap:25px;

}



.card{

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

    border:1px solid var(--border);

    padding:35px;

    border-radius:22px;

    text-align:center;

}



.card strong{

    display:block;

    font-size:55px;

    margin:15px;

    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #06b6d4
    );

    -webkit-background-clip:text;

    color:transparent;

}



.card p{

    color:#22c55e;

}








/* Skills */


.skill-list{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}



.skill-list span{

    padding:12px 22px;

    border-radius:50px;

    background:#18181b;

    border:1px solid var(--border);

}








/* Suggestions */


.suggestions{

    text-align:center;

}



.suggestion-card{

    max-width:750px;

    margin:20px auto;

    padding:25px;

    text-align:left;

    border-radius:20px;

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

    border:1px solid var(--border);

}



.suggestion-card p{

    color:var(--muted);

    margin-top:10px;

}








/* Features */


.features{

    display:grid;

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

    gap:25px;

}



.feature{

    background:#111;

    padding:35px;

    border-radius:22px;

    border:1px solid var(--border);

}








/* CTA */


.cta{

    margin:50px 8%;

    padding:70px;

    text-align:center;

    border-radius:30px;

    background:
    linear-gradient(
        135deg,
        #18181b,
        #312e81
    );

}



.cta h2{

    font-size:45px;

    margin-bottom:15px;

}






footer{

    padding:40px;

    text-align:center;

    color:var(--muted);

    border-top:1px solid var(--border);

}








/* Responsive */


@media(max-width:1000px){


.hero h1{

    font-size:50px;

}


.stats,
.features{

    grid-template-columns:1fr;

}


}



@media(max-width:700px){


nav{

    display:none;

}



.navbar{

    padding:0 20px;

}



.hero{

    padding:60px 20px;

}



.hero h1{

    font-size:38px;

}



.hero-buttons{

    flex-direction:column;

}



.upload-box{

    padding:30px 20px;

}



.cta{

    padding:40px 20px;

}


}