/* ================================================================
   APPSGAIN — PORTFOLIO
   Light theme, same card language as Services. .pf-* scoped.
   ================================================================ */

.pf, .pf-cta{
  --pf-ink:#10162F;
  --pf-body:#667085;
  --pf-mute:#6E7386;
  --pf-line:#E7E9F0;
  --pf-grad-btn:linear-gradient(120deg,#D000A8 0%,#9D00D3 45%,#6A00FF 100%);
  --pf-grad:linear-gradient(120deg,#FF8A00 0%,#FF3030 26%,#F50072 50%,#D000A8 70%,#6A00FF 100%);
  font-family:var(--font-main),system-ui,sans-serif;
}
.pf{ background:#FFFFFF; padding-block:clamp(40px,4.6vw,68px); }
.pf-wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }
.pf-grad{
  background:var(--pf-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── Filters ── */
.pf-filters{
  display:flex; gap:9px; flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,38px);
}
.pf-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 18px; border-radius:999px;
  font-family:var(--font-body),sans-serif; font-size:13.5px; font-weight:600;
  color:var(--pf-ink); background:#fff; border:1px solid var(--pf-line);
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.pf-pill span{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:11px; font-weight:700;
  background:#F2F4F9; color:var(--pf-mute);
}
.pf-pill:hover{ border-color:rgba(106,0,255,.35); color:#6A00FF; transform:translateY(-1px); }
.pf-pill.is-on{ color:#fff; border-color:transparent; background-color:#8B00E0; background-image:var(--pf-grad-btn); box-shadow:0 5px 16px rgba(106,0,255,.24); }
.pf-pill.is-on span{ background:rgba(255,255,255,.22); color:#fff; }

/* ── Grid ── */
.pf-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(18px,2vw,26px);
}
.pf-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--pf-line); border-radius:18px;
  box-shadow:0 1px 3px rgba(16,22,47,.05);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.pf-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(16,22,47,.10); border-color:transparent; }
.pf-card::after{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.pf-card:hover::after{ opacity:1; }

.pf-thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg,#F1F4FB,#E7ECF7);
}
.pf-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.pf-card:hover .pf-thumb img{ transform:scale(1.04); }
.pf-thumb-fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:40px; color:#fff;
  background:linear-gradient(135deg,var(--c1),var(--c2)); opacity:.9;
}
.pf-tag{
  position:absolute; left:14px; bottom:14px; z-index:1;
  padding:5px 12px; border-radius:999px;
  font-family:var(--font-body),sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--pf-ink); background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(16,22,47,.14);
}
.pf-star{
  position:absolute; right:14px; top:14px; z-index:1;
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-size:12px; color:#fff; background:var(--pf-grad);
  box-shadow:0 4px 12px rgba(16,22,47,.2);
}

.pf-body{ display:flex; flex-direction:column; flex:1; padding:22px 22px 20px; }
.pf-title{ font-size:17.5px; font-weight:700; line-height:1.34; color:var(--pf-ink); margin:0 0 5px; }
.pf-client{
  font-family:var(--font-body),sans-serif; font-size:12.5px; font-weight:600;
  color:var(--c2); margin-bottom:10px;
}
.pf-desc{ flex:1; font-family:var(--font-body),sans-serif; font-size:14px; line-height:1.7; color:var(--pf-body); margin:0 0 16px; }
.pf-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0; }
.pf-tags li{
  padding:4px 10px; border-radius:7px;
  font-family:var(--font-body),sans-serif; font-size:11.5px; font-weight:600;
  color:var(--pf-mute); background:#F7F8FC; border:1px solid var(--pf-line);
}
.pf-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body),sans-serif; font-size:13.5px; font-weight:700; color:var(--c2);
}
.pf-link i{ font-size:11px; transition:transform .25s ease; }
.pf-card:hover .pf-link i{ transform:translateX(5px); }
.pf-hit{ position:absolute; inset:0; z-index:2; border-radius:18px; }

/* ── Pagination ── */
.pf-pager{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:clamp(30px,3.4vw,44px); }
.pf-page{
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border-radius:11px; border:1px solid var(--pf-line); background:#fff;
  font-family:var(--font-body),sans-serif; font-size:14px; font-weight:600;
  color:var(--pf-ink); text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.pf-page:hover{ border-color:rgba(106,0,255,.35); color:#6A00FF; transform:translateY(-1px); }
.pf-page.is-on{ color:#fff; border-color:transparent; background-color:#8B00E0; background-image:var(--pf-grad-btn); }

/* ── Empty state ── */
.pf-empty{
  max-width:620px; margin-inline:auto; text-align:center;
  padding:clamp(36px,4.6vw,60px) clamp(24px,3vw,40px);
  background:linear-gradient(180deg,#FAFAFF,#F9F7FF);
  border:1px solid var(--pf-line); border-radius:22px;
}
.pf-empty-ico{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px;
  border-radius:18px; font-size:25px; color:#fff;
  background:var(--pf-grad); box-shadow:0 8px 22px rgba(106,0,255,.22);
}
.pf-empty h2{ font-size:clamp(21px,2.4vw,28px); font-weight:800; letter-spacing:-.02em; color:var(--pf-ink); margin:0 0 12px; }
.pf-empty p{ font-family:var(--font-body),sans-serif; font-size:15px; line-height:1.72; color:var(--pf-body); margin:0 0 26px; }
.pf-empty-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── CTA ── */
.pf-cta{
  padding-block:clamp(46px,5.4vw,76px);
  background:linear-gradient(135deg,#FFF7FB 0%,#F5F3FF 50%,#F5FAFF 100%);
  border-top:1px solid var(--pf-line);
}
.pf-cta-in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,48px); flex-wrap:wrap; }
.pf-cta-title{ font-size:clamp(24px,3vw,38px); font-weight:800; letter-spacing:-.025em; color:var(--pf-ink); margin:0 0 10px; }
.pf-cta-sub{ font-family:var(--font-body),sans-serif; font-size:15.5px; line-height:1.7; color:var(--pf-body); margin:0; max-width:52ch; }
.pf-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ── Reveal ── */
.pf-anim{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.pf-anim.pf-in{ opacity:1; transform:none; }

/* ── Responsive ── */
@media (max-width:680px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-cta-in{ flex-direction:column; align-items:flex-start; }
  .pf-cta-actions{ width:100%; flex-direction:column; }
  .pf-cta-actions .ph-btn{ width:100%; }
  .pf-empty-actions{ flex-direction:column; }
  .pf-empty-actions .ph-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .pf-anim{ opacity:1; transform:none; }
  .pf-card, .pf-pill, .pf-page{ transition:none; }
}