/* /portfolio hero card and brand strip */
@property --pfa{syntax:'<angle>';inherits:false;initial-value:0deg}
.pfh{flex:0 1 clamp(360px,35vw,520px);min-width:0;position:relative;perspective:1400px;animation:pfh-in 1.1s cubic-bezier(.16,1,.3,1) .2s both}
@media(max-width:900px){.pfh{flex:1 1 100%;max-width:460px;margin:0 auto}}
.pfh__tilt{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.pfh.is-live .pfh__tilt{transition:transform .14s linear}
.pfh__ring{position:relative;border-radius:30px;padding:1.5px;background:conic-gradient(from var(--pfa),rgba(245,184,103,.95),rgba(244,239,230,.1) 22%,rgba(127,243,225,.75) 50%,rgba(244,239,230,.1) 74%,rgba(245,184,103,.95));box-shadow:0 50px 130px rgba(0,0,0,.6),0 0 0 1px rgba(244,239,230,.03)}
@media(hover:hover) and (pointer:fine){.pfh__ring{animation:pfh-spin 10s linear infinite}}
.pfh__face{position:relative;border-radius:28.5px;overflow:hidden;aspect-ratio:4/5;background:#0e1230;isolation:isolate}
.pfh__img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:center 32%;display:block;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.02);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pfh.is-live .pfh__img{transition:transform .14s linear}
.pfh__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(7,9,22,.88));pointer-events:none}
.pfh__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(460px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.2),transparent 55%);mix-blend-mode:soft-light}
.pfh:hover .pfh__glare{opacity:1}
.pfh__cap{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;transform:translateZ(30px)}
.pfh__name{display:flex;flex-direction:column;gap:3px}
.pfh__name b{font:600 clamp(18px,1.6vw,22px)/1.1 'Geist',system-ui,sans-serif;color:#f4efe6;letter-spacing:-.02em}
.pfh__mono{font:500 11px/1.2 'Geist Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#d8d2c8}
.pfh__live{display:inline-flex;align-items:center;gap:7px}
.pfh__live::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ff3e1;box-shadow:0 0 10px #7ff3e1;animation:pfh-pulse 2.4s ease-in-out infinite}
.pfh__chip{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:18px;background:rgba(14,18,48,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(244,239,230,.14);box-shadow:0 20px 44px rgba(0,0,0,.45);color:inherit;text-decoration:none;transform:translateZ(80px);opacity:0;animation:pfh-pop .8s cubic-bezier(.16,1,.3,1) both,pfh-bob 6.5s ease-in-out infinite;transition:border-color .25s,background .25s,box-shadow .25s}
.pfh__chip:hover,.pfh__chip:focus-visible{border-color:rgba(245,184,103,.7);background:rgba(20,26,66,.92);box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 0 3px rgba(245,184,103,.12)}
.pfh__chip b{font:600 clamp(24px,2.2vw,30px)/1 'Geist',system-ui,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pfh__chip span{font:500 10.5px/1.35 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#b4aec6}
.pfh__chip i{font-style:normal;color:#f5b867;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pfh__chip:hover i{transform:translate(2px,-2px)}
.pfh__chip--a{left:-9%;top:12%;animation-delay:1s,1.8s}
.pfh__chip--b{right:-8%;bottom:20%;animation-delay:1.25s,2.4s}
.pfh__chip--c{left:-11%;top:47%;animation-delay:1.5s,3s}
.pfh__chip--a b{color:#f5b867}.pfh__chip--b b{color:#7ff3e1}.pfh__chip--c b{color:#f4efe6}
@keyframes pfh-in{from{opacity:0;transform:translateY(44px) scale(.94)}to{opacity:1;transform:none}}
@keyframes pfh-spin{to{--pfa:360deg}}
@keyframes pfh-pop{from{opacity:0;transform:translateZ(80px) translateY(18px) scale(.7)}to{opacity:1;transform:translateZ(80px)}}
@keyframes pfh-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes pfh-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pfh-sway{0%,100%{transform:rotateX(2deg) rotateY(-5deg)}50%{transform:rotateX(-2deg) rotateY(5deg)}}
@media(hover:none){.pfh__tilt{animation:pfh-sway 9s ease-in-out infinite}.pfh__chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,18,48,.94);animation:pfh-pop .8s cubic-bezier(.16,1,.3,1) both}}
@media(max-width:560px){.pfh__chip{padding:9px 12px;gap:9px}.pfh__chip--a{left:2%}.pfh__chip--b{right:2%}.pfh__chip--c{left:0}}
@media(prefers-reduced-motion:reduce){.pfh,.pfh__ring,.pfh__chip,.pfh__tilt,.pfh__live::before{animation:none!important}.pfh__chip{opacity:1}.pfh__tilt,.pfh__img{transition:none}}

/* brands strip */
.pf-brands{list-style:none;margin:0;padding:0;display:flex;gap:56px;align-items:center;width:max-content}
.pf-brands li{display:flex;align-items:center;gap:10px;font:500 clamp(22px,2.4vw,30px)/1 'Geist',system-ui,sans-serif;letter-spacing:-.03em;color:#8e89a0;white-space:nowrap;transition:color .25s}
.pf-brands li:hover{color:#f4efe6}
.pf-brands img{display:block;width:auto;transition:filter .25s,opacity .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.pf-brands .bl{filter:brightness(0) invert(.58)}
.pf-brands li:hover .bl{filter:brightness(0) invert(.97);transform:scale(1.06)}
.pf-brands .bl--box{filter:grayscale(1) brightness(1.15) contrast(.9);opacity:.8}
.pf-brands li:hover .bl--box{filter:none;opacity:1;transform:scale(1.06)}
.pf-brands .si{opacity:.85}
.pf-brands li:hover .si{opacity:1;transform:scale(1.08)}