/* ===== PORTFOLIO page (portfolio.php) ===== */
.pf-hero{padding:84px 0 96px}
.pf-hero h1{max-width:820px;margin-left:auto;margin-right:auto;line-height:1.15;letter-spacing:-.02em}
.pf-hero p{font-size:1.05rem;margin-bottom:28px}
.pf-hero .badge{margin-bottom:16px}
.pf-orbs i{position:absolute;display:block;border-radius:50%;pointer-events:none;animation:pfOrb 11s ease-in-out infinite}
.pf-orbs .o1{width:260px;height:260px;left:6%;top:14%;background:radial-gradient(circle at 30% 30%,rgba(0,198,255,.45),transparent 70%)}
.pf-orbs .o2{width:320px;height:320px;right:4%;top:-8%;background:radial-gradient(circle at 60% 40%,rgba(139,44,245,.5),transparent 70%);animation-delay:-4s}
.pf-orbs .o3{width:180px;height:180px;right:22%;bottom:-6%;background:radial-gradient(circle,rgba(10,108,255,.5),transparent 70%);animation-delay:-7s}
@keyframes pfOrb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-22px) scale(1.08)}}

/* filter chips */
.pf-main{padding-top:84px}
.pf-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-14px 0 40px}
.pf-chip{font-family:inherit;font-weight:700;font-size:.88rem;color:var(--navy);background:#fff;border:1.5px solid #cfe0ff;padding:9px 22px;border-radius:30px;cursor:pointer;transition:.3s}
.pf-chip:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(10,108,255,.2);border-color:var(--blue)}
.pf-chip.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(10,108,255,.35)}

/* project grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pf-card{background:#fff;border:1px solid #e3ebfb;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(11,31,77,.1);transition:transform .4s,box-shadow .4s,opacity .7s}
.pf-card[hidden]{display:none}
.pf-card:hover{transform:translateY(-10px);box-shadow:0 28px 52px rgba(10,108,255,.26)}
.pf-img{position:relative;overflow:hidden;aspect-ratio:16/10;background:#dfe9ff}
.pf-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pf-card:hover .pf-img img{transform:scale(1.1)}
.pf-over{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(11,31,77,.15),rgba(11,31,77,.78));opacity:0;transition:opacity .35s}
.pf-card:hover .pf-over,.pf-card:focus-within .pf-over{opacity:1}
.pf-view{background:#fff;color:var(--blue);font-weight:800;font-size:.9rem;padding:11px 24px;border-radius:30px;transform:translateY(14px);transition:transform .35s,background .25s,color .25s}
.pf-card:hover .pf-view{transform:none}
.pf-view:hover{background:var(--navy);color:#fff}
.pf-body{padding:18px 22px 22px}
.pf-body small{color:var(--purple);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
.pf-body h3{font-size:1.08rem;color:var(--navy);margin:4px 0 10px}
.pf-link{font-weight:700;font-size:.88rem;color:var(--blue);transition:.25s}
.pf-link:hover{color:var(--purple);letter-spacing:.03em}
.pf-empty{text-align:center;color:var(--muted);font-weight:600;padding:30px 0}
.pf-empty[hidden]{display:none}

@media (max-width:1000px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .pf-hero{padding:60px 0 72px}
  .pf-grid{grid-template-columns:1fr}
}
@media (hover:none){.pf-over{display:none}}