:root{
    --accent:#00ddff;
    --accent-dark:#0098ff;

    --bg:#111111;
    --surface:#181818;
    --surface-light:#222222;
    --border:#2b2b2b;

    --text:#ffffff;
    --muted:#a3a3a3;

    --radius:14px;
    --container:1280px;

    --transition:.25s ease;
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    width:100%;
}

.container{
    max-width:var(--container);
}

.page-title{
    font-size:3rem;
    font-weight:800;
    margin-bottom:2rem;
}

.text-muted{
    color:var(--muted)!important;
}

.navbar{
    background:#161616;
    border-bottom:1px solid var(--border);
    padding:18px 0;
}

.navbar-brand{
    color:var(--accent)!important;
    font-weight:800;
    font-size:1.6rem;
}

.nav-link{
    color:#d5d5d5!important;
    font-size:.95rem;
    transition:var(--transition);
}

.nav-link:hover,
.nav-link.active{
    color:var(--accent)!important;
}

.btn-accent,
.download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;

    background:var(--accent);
    color:#111;

    padding:14px 34px;

    border:none;
    border-radius:10px;

    font-weight:700;

    transition:var(--transition);
}

.btn-accent:hover,
.download-btn:hover{
    background:var(--accent-dark);
    color:#111;
}

.hero{
    height:100vh;
    background:url("../images/background.png") center/cover;
    position:relative;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.hero-content{
    position:relative;
    z-index:2;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:2rem;
}

.hero h1{
    font-size:5.5rem;
    font-weight:900;
    margin-bottom:1rem;
}

.hero p{
    max-width:720px;
    color:#d0d0d0;
    font-size:1.25rem;
    line-height:1.7;
}

.hero .btn-accent{
    margin-top:2.5rem;
}

.project-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--surface);
    border:1px solid var(--border);
    transition:transform var(--transition),box-shadow var(--transition);
}

.project-card:hover{
    transform:scale(1.025);
    box-shadow:none;
}

.project-card-image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
}

.project-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.project-card:hover .project-card-image img{
    transform:scale(1.08);
}

.overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:rgba(0,0,0,.22);

    transition:background var(--transition);
}

.project-card:hover .overlay{
    background:transparent;
}

.card-top{
    display:flex;
    justify-content:flex-start;
    padding:18px;
}

.card-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    padding:18px;

    transition:opacity var(--transition),transform var(--transition);
}

.project-card:hover .card-bottom{
    opacity:0;
    transform:translateY(10px);
}

.project-title{
    font-size:2rem;
    font-weight:800;
    line-height:1.1;
}

.project-description{
    margin-top:.6rem;
    color:#d8d8d8;
    font-size:.95rem;
}

.type{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    background:var(--accent);
    color:#111;

    font-size:.8rem;
    font-weight:700;
}

.card-body{
    padding:1.4rem;
}

.card-title{
    font-size:1.8rem;
    font-weight:800;
    margin-bottom:.4rem;
}

.form-control,
.form-select{
    background:var(--surface)!important;
    color:var(--text)!important;
    border:1px solid var(--border)!important;
    border-radius:10px;
    box-shadow:none!important;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--accent)!important;
}

.form-control::placeholder{
    color:var(--muted);
}

.badge{
    background:var(--accent)!important;
    color:#111!important;
    border-radius:999px;
    padding:8px 14px;
    font-weight:700;
    font-size:.8rem;
}

.project-cover{
    width:100%;
    max-width:var(--container);
    margin:2rem auto;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--surface);
    border:1px solid var(--border);
}

.project-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.project-container{
    width:100%;
    max-width:var(--container);
    margin:3rem auto;
}

.tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:1.5rem;
}

.tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;

    background:#282828;

    color:#d7d7d7;

    border-radius:999px;

    font-size:.8rem;
    font-weight:600;
}

.tag:first-child{
    background:var(--accent);
    color:#111;
}

.project-name{
    font-size:4rem;
    font-weight:900;
    line-height:1.1;
    margin-bottom:1rem;
}

.project-meta{
    display:flex;
    gap:1rem;
    align-items:center;

    color:var(--muted);

    margin-bottom:2rem;

    font-size:.95rem;
}

.description-box{
    margin-top:2rem;

    background:var(--surface);

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

    border-radius:var(--radius);

    padding:2rem;

    line-height:1.9;
}

.description-box h1,
.description-box h2,
.description-box h3{
    margin-bottom:1rem;
    font-weight:800;
}

.description-box p{
    margin-bottom:1rem;
}

.description-box ul,
.description-box ol{
    margin:1rem 0 1rem 1.5rem;
}

.description-box li{
    margin:.45rem 0;
}

.description-box img{
    border-radius:12px;
    margin:1.5rem 0;
}

.description-box code{
    background:#222;
    padding:.2rem .4rem;
    border-radius:6px;
}

.description-box pre{
    overflow:auto;
    padding:1rem;
    border-radius:10px;
    background:#1a1a1a;
}

footer{
    margin-top:5rem;
    padding:2rem 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    text-align:center;
}

@media (max-width:992px){

    .hero h1{
        font-size:4rem;
    }

    .project-name{
        font-size:3rem;
    }

    .page-title{
        font-size:2.5rem;
    }

}

@media (max-width:768px){

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        font-size:1rem;
    }

    .page-title{
        font-size:2rem;
    }

    .project-name{
        font-size:2.2rem;
    }

    .project-title{
        font-size:1.5rem;
    }

    .card-bottom{
        padding:1rem;
    }

    .project-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:.4rem;
    }

    .description-box{
        padding:1.5rem;
    }

}