/* ───────────────── Buttons & CTA ───────────────── */
.cta-row{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}
.btn{
  --bg-btn:rgba(255,255,255,.06);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1rem; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:var(--bg-btn); color:var(--text);
  text-decoration:none; font-weight:600;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{border-color:rgba(255,255,255,.2); transform:translateY(-1px)}
.btn-primary{background:var(--brand); color:#000; border-color:transparent}
.btn-primary:hover{background:var(--brand-hover)}

/* ───────────────── Project section ───────────────── */
.project{background:var(--panel); padding:3rem 0}
.project h2{font-size:var(--step-2); margin:0 0 1rem}
.project p{font-size:var(--step-0); margin:0 0 1.2rem}

/* Features en grille responsive (chips) */
.features{
  list-style:none; padding:0; margin:0 0 2rem 0;
  display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.features li{
  background:var(--chip); padding:.75rem 1rem; border-radius:20px;
  font-size:var(--step--1); border:1px solid rgba(255,255,255,.06);
}

/* ───────────────── Gallery ───────────────── */
.screenshots{
  display:grid; gap:.75rem; margin:0 0 2rem 0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.screenshots li{list-style:none}
.screenshots img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; background:#333; border:2px solid var(--chip);
  transition:transform .25s ease; cursor:pointer;
}
.screenshots img:hover{transform:scale(1.02)}