* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #231f20;
    color: #e5e5e5;
    margin: 0;
    padding: 40px 20px;
}

/* layout */

main {
    max-width: 1100px;
    margin: 0 auto;
}

.project-page{
    max-width:800px;
    margin:0 auto;
    background:#1a1a1a;
    padding:40px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* headings */

h1{
    font-size:2rem;
    font-weight:700;
    margin-bottom:10px;
}

h2{
    text-align:center;
}

/* metadata */

.meta{
    font-size:0.9rem;
    color:#bbb;
    margin:3px 0;
}

/* images */

img{
    max-width:100%;
    height:auto;
    display:block;
}

/* large project image */

.project-image-large{
    width:100%;
    max-width:680px;
    border-radius:12px;
    margin:25px auto;
    display:block;
}

/* video embed */

.video-container{
    margin-top:25px;
    width:100%;
    max-width:680px;
    aspect-ratio:16/9;
}

.video-container iframe{
    width:100%;
    height:100%;
    border:none;
    border-radius:10px;
}

/* description */

.content{
    margin-top:20px;
    line-height:1.6;
    max-width:650px;
}

/* cards */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.card{
    background:#1a1a1a;
    border-radius:14px;
    padding:22px;
    display:flex;
    flex-direction:column;
    text-align:left;
    box-shadow:0 14px 35px rgba(0,0,0,0.4);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    position:relative;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,0.6);
}

.project-thumb{
    width:100%;
    height:170px;
    object-fit:cover;
    object-position:center;
    border-radius:10px;
    margin-bottom:16px;
    background:#222;
}

/* buttons */

.project-links{
    display:flex;
    gap:14px;
    justify-content:center;
    margin-top:20px;
}

.project-links img,
.project-links svg{
    width:26px;
    height:26px;
}

.project-links img{
    filter:brightness(0) invert(1);
    transition:transform .25s ease, filter .25s ease;
}

.project-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.project-links a:hover img,
.project-links a:hover svg{
    transform:translateY(-3px);
    filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

.project-links svg{
    fill:#ffffff;
}

/* buttons */

.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:6px;
    font-size:0.9rem;
    font-weight:500;
    color:#ffffff;
    text-decoration:none;
}

.btn-download{
    background:#2563eb;
}

.btn-download:hover{
    background:#1e40af;
}

/* links */

.view-project{
    margin-top:auto;
    font-size:0.9rem;
    font-weight:500;
    color:#4f8cff;
    text-decoration:none;
}

.view-project:hover{
    text-decoration:underline;
}

.back-link{
    margin-top:40px;
    text-align:center;
}

.back-link a{
    color:#4f8cff;
    text-decoration:none;
}

.back-link a:hover{
    text-decoration:underline;
}

/* hero */

.hero{
    background:linear-gradient(135deg,#1d4ed8,#1e3a8a);
    color:#fff;
    padding:60px 20px 70px;
    border-radius:16px;
    margin-bottom:80px;
    text-align:center;
}

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

/* logo */

.logo-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-header img {
    width: 100%;
    max-width: 260px;
    height: auto;
}

/* social icons */

.social-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    margin:20px 0 40px 0;
}

.social-bar img{
    width:28px;
    height:28px;
    filter:brightness(0) invert(1);
    transition:transform .25s ease, filter .25s ease;
}

.social-bar a:hover img{
    transform:translateY(-3px);
    filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* badge hover */

.store-badge:hover{
    opacity:0.85;
}