/* -------- portfolio page extras -------- */
.pf-hero{
  background:var(--blue); color:var(--white); padding:64px 6vw 60px; border-bottom:3px solid var(--ink);
  text-align:center; position:relative; overflow:hidden;
}
.pf-hero h1{font-size:clamp(2.2rem,7vw,4.6rem); color:var(--white);}
.pf-hero p{max-width:520px; margin:20px auto 0; color:var(--blue-soft); font-weight:500; font-size:1.05rem; line-height:1.6;}
.pf-hero .back-link{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  color:var(--blue-soft); text-decoration:none; font-weight:700; font-size:.85rem;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em;
}
.pf-hero .back-link:hover{color:var(--white);}

.filter-row{
  display:flex; gap:10px; flex-wrap:wrap; padding:34px 0 10px;
}
.filter-chip{
  padding:10px 20px; border:2.5px solid var(--ink); border-radius:100px;
  background:var(--white); font-weight:700; font-size:.82rem; cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:transform .18s var(--bounce), background .2s, color .2s, box-shadow .18s var(--bounce);
}
.filter-chip:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}
.filter-chip.active{background:var(--ink); color:var(--cream);}

.pf-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:34px; padding:30px 0 20px; perspective:1400px;
}
.pf-card{cursor:pointer; transform-style:preserve-3d;}
.pf-card .frame{
  background:var(--white); border:3px solid var(--ink); border-radius:18px;
  padding:14px 14px 20px; box-shadow:var(--shadow);
  transition:box-shadow .25s var(--bounce);
}
.pf-card:hover .frame{box-shadow:var(--shadow-lg);}
.pf-card .swatch{
  aspect-ratio:16/10; border-radius:10px; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.pf-card .swatch .mark{font-family:'Archivo Black',sans-serif; font-size:2.2rem; color:rgba(11,11,18,.14);}
.pf-card .cat-badge{
  position:absolute; top:34px; left:10px; font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  background:var(--ink); color:var(--cream); padding:5px 10px; border-radius:100px; z-index:3;
}
.pf-card .live-badge{
  position:absolute; top:34px; right:10px; font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  background:var(--green); color:var(--ink); padding:5px 10px; border-radius:100px; border:2px solid var(--ink);
  animation:pulse 1.8s infinite; z-index:3;
}
.pf-card .browser-bar{
  position:absolute; top:0; left:0; right:0; height:26px; background:#e8e4d8; border-bottom:2px solid var(--ink);
  display:flex; align-items:center; gap:5px; padding:0 10px; z-index:2;
}
.pf-card .browser-bar span{width:7px; height:7px; border-radius:50%; background:#c7c2b3; border:1.5px solid var(--ink);}
.pf-card .site-frame{
  position:absolute; top:26px; left:0; width:250%; height:250%; transform:scale(.4); transform-origin:top left;
  border:none; pointer-events:none; background:#fff;
}
.pf-card .site-mockup{
  position:absolute; top:26px; left:0; right:0; bottom:0;
  background:#0a0a0a; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px; text-align:center;
}
.pf-card .site-mockup img{width:44px; height:44px; border-radius:50%; border:2px solid #fff; object-fit:cover;}
.pf-card .site-mockup h5{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem; line-height:1.3; max-width:92%;}
.pf-card .site-mockup .stats{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:.58rem; color:#FFD93D; margin-top:4px;}
.pf-card .site-shot{
  position:absolute; top:26px; left:0; right:0; bottom:0;
  width:100%; height:calc(100% - 26px); object-fit:contain; object-position:center;
  background:#FAF6EC;
}
.pf-card .cap{margin-top:16px; padding:0 6px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.pf-card .cap h4{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem;}
.pf-card .cap .svc-tag{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; font-weight:700; color:var(--blue);
  text-transform:uppercase; margin-top:4px; display:block;
}
.pf-card .cap p{color:#6a6a75; font-size:.86rem; margin-top:8px; line-height:1.5;}
.pf-card .view-link{
  margin-top:14px; display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; color:var(--ink);
}

.pf-empty{padding:60px 0; text-align:center; color:#6a6a75; font-weight:600;}

@media (max-width:900px){
  .pf-grid{grid-template-columns:1fr;}
}