:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#06b6d4;
  --text:#e6eef6;
  --container:1100px;
  --gap:1rem;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{width:min(92%,var(--container));margin:0 auto;padding:1.5rem 0}

/* page */
.back{display:inline-block;margin:1rem 4% 0;color:var(--muted);text-decoration:none}
.project-hero{display:grid;grid-template-columns:1fr 380px;gap:var(--gap);align-items:start;padding:2rem 4%}
.project-meta h1{margin:0 0 .5rem 0;font-size:1.6rem}
.tagline{margin:0 0 1rem;color:var(--muted)}
.actions{display:flex;gap:.6rem;margin:1rem 0}
.btn{background:var(--accent);color:#042028;padding:.5rem .8rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.tech{list-style:none;padding:0;margin:.5rem 0 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.tech li{background:rgba(255,255,255,0.02);padding:.25rem .5rem;border-radius:8px;font-size:.85rem;color:var(--muted)}

/* screenshot */
.project-screenshot{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.project-screenshot img{display:block;width:100%;height:auto}

/* details */
.project-details{padding:1.25rem 4%;border-top:1px solid rgba(255,255,255,0.03)}
.project-details h2,h3{color:var(--text);margin:0 0 .5rem 0}
.project-details p, .project-details ul{color:var(--muted);line-height:1.6}
.project-details ul{padding-left:1.2rem}

/* responsive */
@media (max-width:880px){
  .project-hero{grid-template-columns:1fr;padding:1rem 4%}
  .project-screenshot{order:-1;margin-bottom:1rem}
  .back{margin-left:4%}
}