.project-detail-hero{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
    overflow:hidden;
    padding-top:76px;
    border-bottom:1px solid rgba(148,163,184,.14);
}

.project-detail-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(3,7,18,.98) 0%, rgba(3,7,18,.84) 42%, rgba(3,7,18,.28) 72%, rgba(3,7,18,.14) 100%),
        linear-gradient(180deg, rgba(3,7,18,.18) 0%, rgba(3,7,18,.82) 100%);
    z-index:1;
}

.project-detail-hero-inner{
    position:relative;
    z-index:2;
    max-width:900px;
}

.project-detail-hero h1{
    margin:0 0 24px;
    color:#fff;
    font-size:58px;
    line-height:1.08;
    letter-spacing:-2px;
    font-weight:850;
}

.project-detail-hero p{
    max-width:760px;
    color:rgba(255,255,255,.78);
    font-size:20px;
    line-height:1.7;
}

.project-detail-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:34px;
}

.project-detail-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 420px;
    gap:54px;
    align-items:start;
}

.content-block{
    padding-bottom:46px;
    margin-bottom:46px;
    border-bottom:1px solid rgba(148,163,184,.14);
}

.content-block:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.content-block h2{
    margin:0 0 18px;
    color:#fff;
    font-size:34px;
    line-height:1.2;
    letter-spacing:-.8px;
}

.content-block p,
.rich-content p{
    color:rgba(255,255,255,.7);
    font-size:17px;
    line-height:1.85;
}

.project-sidebar{
    position:sticky;
    top:110px;
}

.project-cover{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    border-radius:22px;
    border:1px solid rgba(148,163,184,.18);
    margin-bottom:22px;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.project-cover:hover{
    transform:scale(1.02);
    border-color:rgba(56,189,248,.42);
}

.sidebar-card{
    padding:28px;
    margin-bottom:22px;
    border-radius:22px;
    border:1px solid rgba(148,163,184,.18);
    background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(3,7,18,.92));
}

.sidebar-card h3{
    margin:0 0 18px;
    color:#fff;
    font-size:20px;
}

.sidebar-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-card li{
    position:relative;
    padding:8px 0 8px 22px;
    color:rgba(255,255,255,.72);
    font-size:15px;
}

.sidebar-card li::before{
    content:"→";
    position:absolute;
    left:0;
    color:#38bdf8;
}

.tech-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tech-list span{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    color:#38bdf8;
    background:rgba(56,189,248,.1);
    border:1px solid rgba(56,189,248,.22);
    font-size:13px;
    font-weight:750;
}

/* Lightbox */
.project-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(0,0,0,.92);
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}

.project-lightbox.active{
    opacity:1;
    visibility:visible;
}

.project-lightbox img{
    max-width:94vw;
    max-height:88vh;
    border-radius:18px;
    box-shadow:0 40px 120px rgba(0,0,0,.65);
}

.project-lightbox-close{
    position:absolute;
    top:24px;
    right:34px;
    color:#fff;
    font-size:44px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}

@media(max-width:980px){
    .project-detail-grid{
        grid-template-columns:1fr;
    }

    .project-sidebar{
        position:static;
    }

    .project-detail-hero h1{
        font-size:44px;
    }

    .project-cover{
        height:360px;
    }
}

@media(max-width:767px){
    .project-detail-hero{
        min-height:auto;
        padding:130px 0 80px;
        background-position:center;
    }

    .project-detail-hero::before{
        background:rgba(3,7,18,.84);
    }

    .project-detail-hero h1{
        font-size:34px;
        letter-spacing:-1px;
    }

    .project-detail-hero p{
        font-size:16px;
    }

    .content-block h2{
        font-size:28px;
    }

    .project-cover{
        height:240px;
    }
}


/* PROJECT LIST */
.project-list-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.project-list-card{
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(148,163,184,.18);
    background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(3,7,18,.94));
    transition:.28s ease;
}

.project-list-card:hover{
    transform:translateY(-6px);
    border-color:rgba(56,189,248,.42);
    box-shadow:0 30px 90px rgba(37,99,235,.16);
}

.project-list-image{
    display:block;
    height:230px;
    overflow:hidden;
    background:rgba(15,23,42,.8);
}

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

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

.project-list-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#38bdf8;
    font-weight:850;
    background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(56,189,248,.08));
}

.project-list-content{
    padding:28px;
}

.project-list-content h2{
    margin:14px 0 12px;
    color:#fff;
    font-size:24px;
    line-height:1.25;
    letter-spacing:-.4px;
}

.project-list-content p{
    color:rgba(255,255,255,.66);
    font-size:15px;
    line-height:1.7;
    margin-bottom:22px;
}

.project-list-link{
    color:#60a5fa;
    font-weight:800;
}

.empty-state{
    grid-column:1 / -1;
    padding:60px;
    text-align:center;
    border-radius:24px;
    border:1px solid rgba(148,163,184,.18);
    background:rgba(15,23,42,.62);
}

.empty-state h2{
    margin-bottom:10px;
}

.empty-state p{
    color:rgba(255,255,255,.65);
}

@media(max-width:980px){
    .project-list-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:767px){
    .project-list-grid{
        grid-template-columns:1fr;
    }

    .project-list-image{
        height:210px;
    }

    .project-list-content{
        padding:24px;
    }
}

.project-link-list{
    display:grid;
    gap:10px;
}

.project-link-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 14px;
    border-radius:14px;
    color:#fff;
    background:rgba(15,23,42,.72);
    border:1px solid rgba(148,163,184,.16);
    font-weight:750;
    transition:.25s ease;
}

.project-link-list a:hover{
    border-color:rgba(56,189,248,.48);
    color:#38bdf8;
    transform:translateX(3px);
}

.store-buttons{
    display:grid;
    gap:10px;
}

.store-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    height:54px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(14,165,233,.72));
    font-weight:850;
    box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.project-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.project-gallery-image{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:18px;
    border:1px solid rgba(148,163,184,.18);
    cursor:pointer;
    transition:.25s ease;
}

.project-gallery-image:hover{
    transform:scale(1.02);
    border-color:rgba(56,189,248,.45);
}

.project-video-link{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 22px;
    border-radius:14px;
    color:#fff;
    background:rgba(37,99,235,.2);
    border:1px solid rgba(56,189,248,.35);
    font-weight:800;
}

@media(max-width:767px){
    .project-gallery{
        grid-template-columns:1fr;
    }

    .project-gallery-image{
        height:210px;
    }
}