.pf-hero{padding:170px var(--pad) 20px;}
  .pf-hero h1{font-size:clamp(48px,9vw,140px);margin-top:18px;}
  .pf-hero h1 .accent{color:var(--blue-2);}
  .pf-hero .pf-sub{margin-top:22px;color:var(--off);font-size:15px;line-height:1.6;max-width:520px;}
  .pf-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
  .pf-filters .chip{cursor:pointer;}

  .pf-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));
    gap:28px;padding:40px var(--pad) 40px;
  }
  .pf-card{
    border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;
    background:var(--panel);transition:transform .5s var(--ease), border-color .3s;
    outline:none;animation:pfIn .6s var(--ease) both;
  }
  .pf-card:hover,.pf-card:focus-visible{transform:translateY(-6px);border-color:var(--blue-2);}
  .pf-card.hide{display:none;}
  @keyframes pfIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

  .pf-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#0d0d0d,#1a2236);overflow:hidden;}
  .pf-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
  .pf-card:hover .pf-media img{transform:scale(1.05);}
  .pf-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:50%;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.4);
    backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
    transition:background .3s, transform .4s var(--ease);
  }
  .pf-play svg{width:22px;height:22px;fill:#fff;margin-left:3px;}
  .pf-card:hover .pf-play{background:var(--blue-solid);transform:translate(-50%,-50%) scale(1.1);}
  .pf-count{
    position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:100px;
    background:rgba(0,0,0,.6);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  }
  .pf-info{padding:22px 24px 26px;}
  .pf-info .cat{font-size:11px;letter-spacing:.18em;color:var(--blue-2);text-transform:uppercase;font-weight:600;}
  .pf-info h3{font-size:clamp(22px,2.2vw,30px);margin-top:12px;}
  .pf-info p{margin-top:10px;color:var(--dim);font-size:14px;line-height:1.5;}

  .pf-empty{display:none;text-align:center;padding:60px var(--pad) 20px;color:var(--dim);}
  .pf-empty.show{display:block;}
  .pf-empty h3{font-size:clamp(24px,3.4vw,40px);color:var(--white);}
  .pf-empty p{margin-top:14px;font-size:15px;}

  /* ---------- popup ---------- */
  .pf-modal{
    position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s;
  }
  .pf-modal.open{opacity:1;visibility:visible;}
  .pf-modal-box{
    position:relative;width:100%;max-width:1000px;max-height:100%;overflow:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
  }
  .pf-close{
    position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;
    background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.3);
    font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .pf-close:hover{background:var(--blue-solid);}
  .pf-stage{position:relative;aspect-ratio:16/10;background:#000;}
  .pf-stage img,.pf-stage iframe{width:100%;height:100%;object-fit:contain;display:block;border:0;}
  .pf-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:46px;height:46px;border-radius:50%;
    background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);
    font-size:20px;display:flex;align-items:center;justify-content:center;
  }
  .pf-arrow:hover{background:var(--blue-solid);}
  .pf-prev{left:14px;} .pf-next{right:14px;}
  .pf-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4;}
  .pf-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;}
  .pf-dots i.on{background:var(--blue-2);box-shadow:0 0 10px var(--blue-2);}
  .pf-modal-info{padding:24px 28px 30px;}
  .pf-modal-info .cat{font-size:11px;letter-spacing:.18em;color:var(--blue-2);text-transform:uppercase;font-weight:600;}
  .pf-modal-info h3{font-size:clamp(24px,3vw,38px);margin-top:12px;}
  .pf-modal-info p{margin-top:12px;color:var(--off);font-size:15px;line-height:1.6;max-width:640px;}

  @media (max-width:760px){
    .pf-hero{padding-top:130px;}
    .pf-grid{gap:20px;}
    .pf-modal{padding:12px;}
    .pf-arrow{width:38px;height:38px;}
  }