/* Portfolio page - inherits :root tokens from styles.css */
.pf-hero { max-width:1280px; margin:0 auto; padding:9rem 2.5rem 2.5rem; position:relative; z-index:1; }
.pf-title { font-family:var(--ff-d); font-weight:900; font-size:clamp(1.9rem,4.5vw,3.4rem); line-height:1.15; letter-spacing:.02em; color:var(--text-bright); margin-bottom:1.5rem; }
.pf-title .t-cyan { color:var(--cyan); text-shadow:0 0 22px rgba(0,229,212,.55), 0 0 60px rgba(0,229,212,.16); }
.pf-hero .section-sub { margin-bottom:2.5rem; max-width:640px; }
.pf-stats { display:grid; grid-template-columns:repeat(3,minmax(0,180px)); gap:1.5rem; padding-top:2rem; border-top:1px solid rgba(0,229,212,.12); }

.pf-filter { position:sticky; top:60px; z-index:50; background:rgba(3,5,11,.9); backdrop-filter:blur(18px); border-top:1px solid rgba(0,229,212,.12); border-bottom:1px solid rgba(0,229,212,.12); }
.pf-filter-inner { max-width:1280px; margin:0 auto; padding:.9rem 2.5rem; display:flex; gap:.6rem; overflow-x:auto; }
.pf-btn { font-family:var(--ff-m); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); background:transparent; border:1px solid rgba(0,229,212,.24); padding:.5rem 1.05rem; cursor:pointer; white-space:nowrap; transition:color .2s, border-color .2s, background .2s; }
.pf-btn:hover { color:var(--cyan); border-color:var(--cyan); }
.pf-btn.active { color:var(--bg); background:var(--cyan); border-color:var(--cyan); font-weight:600; }

.pf-grid { max-width:1280px; margin:0 auto; padding:3rem 2.5rem 5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem; position:relative; z-index:1; }

.pf-card { background:var(--panel); border:1px solid rgba(0,229,212,.2); display:flex; flex-direction:column; text-decoration:none; overflow:hidden; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); transition:border-color .3s, box-shadow .3s, transform .25s; }
.pf-card:hover { border-color:var(--cyan); box-shadow:0 0 30px rgba(0,229,212,.15); transform:translateY(-4px); }
.pf-card:nth-child(even) { border-color:rgba(180,79,255,.2); }
.pf-card:nth-child(even):hover { border-color:var(--purple); box-shadow:0 0 30px rgba(180,79,255,.18); }

.pf-shot { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface); border-bottom:1px solid rgba(0,229,212,.14); }
.pf-shot img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; filter:saturate(1.05) brightness(.94); transition:filter .3s, transform .5s; }
.pf-card:hover .pf-shot img { filter:saturate(1.15) brightness(1); transform:scale(1.03); }
.pf-shot::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 55%,rgba(3,5,11,.55) 100%); pointer-events:none; }

/* Placeholder shown when a screenshot file is missing */
.pf-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; background:linear-gradient(135deg,rgba(0,229,212,.06) 0%,rgba(180,79,255,.05) 100%); }
.pf-ph span { font-family:var(--ff-m); font-size:.72rem; color:var(--cyan); letter-spacing:.1em; text-shadow:0 0 8px rgba(0,229,212,.4); }
.pf-ph small { font-family:var(--ff-m); font-size:.58rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }

.pf-live { position:absolute; top:.8rem; left:.8rem; z-index:2; font-family:var(--ff-m); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); background:rgba(3,5,11,.8); border:1px solid rgba(0,255,136,.4); padding:.2rem .55rem; display:flex; align-items:center; gap:.35rem; }
.pf-live::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 7px var(--green); }

.pf-body { padding:1.5rem 1.5rem 1.35rem; flex:1; display:flex; flex-direction:column; }
.pf-domain { font-family:var(--ff-m); font-size:.82rem; color:var(--cyan); letter-spacing:.05em; margin-bottom:.5rem; text-shadow:0 0 8px rgba(0,229,212,.4); word-break:break-all; }
.pf-card:nth-child(even) .pf-domain { color:var(--purple-bright); text-shadow:0 0 8px rgba(180,79,255,.4); }
.pf-role { font-family:var(--ff-d); font-weight:600; font-size:.78rem; color:var(--text-bright); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.85rem; line-height:1.5; }
.pf-desc { font-size:.95rem; color:var(--muted-2); line-height:1.75; font-weight:400; margin-bottom:1.15rem; flex:1; }
.pf-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1.1rem; }
.pf-tag { font-family:var(--ff-m); font-size:.62rem; color:var(--cyan); background:rgba(0,229,212,.08); border:1px solid rgba(0,229,212,.22); padding:.16rem .55rem; letter-spacing:.08em; text-transform:uppercase; }
.pf-card:nth-child(even) .pf-tag { color:var(--purple-bright); background:rgba(180,79,255,.08); border-color:rgba(180,79,255,.24); }
.pf-visit { font-family:var(--ff-m); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); padding-top:1rem; border-top:1px solid rgba(0,229,212,.12); display:flex; align-items:center; justify-content:space-between; transition:color .2s; }
.pf-card:hover .pf-visit { color:var(--cyan); }
.pf-card:nth-child(even):hover .pf-visit { color:var(--purple-bright); }

.pf-cta { max-width:1280px; margin:0 auto; padding:0 2.5rem 6rem; position:relative; z-index:1; text-align:center; }
.pf-cta .section-sub { margin:0 auto 2.5rem; }

@media (max-width:640px) {
  .pf-hero { padding:7rem 1.25rem 2rem; }
  .pf-stats { grid-template-columns:repeat(3,1fr); gap:.75rem; }
  .pf-filter-inner { padding:.75rem 1.25rem; }
  .pf-grid { padding:2rem 1.25rem 4rem; grid-template-columns:1fr; }
  .pf-cta { padding:0 1.25rem 4rem; }
}